Video and Audio continues playing even after navigating to next screen

[iesmail-znz]

I am running CHT 3.9.1.

1. Embed .mp4 and mp3 in a form.
2. Play the video/audio and navigate to next screen.
3. The video/audio continues to play.

[derickl]

Looks related to https://github.com/medic/cht-core/issues/5654

[iesmail-znz]

Can this be moved to 3.11 ? We have been waiting for this since November, 2020.

[garethbowen]

We're getting towards the end of the dev cycle on 3.11.0 and I'm trying to keep it lean to get the release out ASAP. It's possible that this bug will be fixed or improved when we update our version of enketo-core (here and here) scheduled for 3.12.0 so it's a little easier for us to do these at the same time.

To help with prioritisation, what impact does this have on your users? Is it just annoying, or getting in the way?

[dianabarsan]

I'm wondering if the implementation of this depends on the Enketo-Core upgrade. This is happening in an Enketo widget, right?

[latin-panda]

Probably yes, we don't have a custom made widget for embed videos and I found a couple of reports people having issues with mp4 in ODK forums. I want to test with the Josh's upgrade branch and see if it's resolved there, I'm still trying to figure out how to add an embed video I guess it's not upload of videos It apparently has some autoplay and considerations towards playing videos.

It'd be very helpful to have a sample form configuration from the opening user 🤔

[latin-panda]

I can replicate the issue when using the current and new version of Enketo (5.18.1). The library isn't doing any job other than inserting the media element. Also, this is a very common issue in HTML where containers with display:none doesn't pause the media and need to be handled manually.

I'll add some code to find and pause videos and audios when navigating to the next/prev page.

[garethbowen]

@latin-panda Sounds good! If it makes sense it may also be something we could contribute back to enketo-core but it depends how generic the solution is.

[latin-panda]

I've opened an issue in enketo-core and provided a PR suggesting a fix. Until this get resolved in their end I've added the fix in our code. (I've noticed that enketo-core v6.0.0 has added a minimum engine of Node 14 I hope it can still run in projects running Node8 - 12)

[latin-panda]

This is ready for AT in this PR.

This work depends on the enketo upgrade, meaning this work can be merged to master once the upgrade is finalised.

[ngaruko]

Tested on local using a custom form and using the documentation on multimedia:

1. Modified death_report , adding video form to the model and video input to the first group:

<h:head>
    <h:title>Death report</h:title>
    <model>
      <itext>
        <translation lang="en">
          <text id="/death_report/death_details/date_of_death:jr:constraintMsg">
            <value>Date of death can only be from today up to 1 year ago.</value>
          </text>
          <text id="somevideo">
            <value form="video">jr://video.mp4</value>
          </text>
          <text id="/death_report/death_details/date_of_death:label">
            <value>Date of Death</value>
          </text>
          <text id="/death_report/death_details/death_information:label">
......
.....
....
<group appearance="field-list" ref="/death_report/inputs">
      <group ref="/death_report/inputs/contact">
        <label ref="jr:itext('/death_report/inputs/contact:label')"/>
        <input appearance="db-object" ref="/death_report/inputs/contact/_id">
          <label ref="jr:itext('/death_report/inputs/contact/_id:label')"/>
        </input>
        <input ref="q2">
        <label ref="jr:itext('somevideo')"/>
      </input>
        <group ref="/death_report/inputs/contact/parent">
.....
....

2. added death_report-media folder to forms/app
3. added a video.mp4 to the folder (video samples from here)
4. cht appload-app-forms ..and sync
5. open death_report and observe that it has the video
6. play the video and click next while it plays
7. on master - the video/audio continue playing in the background (can hear the audio)
8. click <prev button, on master ... the video is still playing and continues.

https://user-images.githubusercontent.com/6979995/136295592-ae6a3805-eff2-4490-a874-9ae8eb847290.mov

9. on branch, the video stop with step 6 and is paused if user goes back to the page with video

https://user-images.githubusercontent.com/6979995/136295629-7deb0108-b9a5-4ef9-bb84-d64deb471734.mov

(modified form attached for future testing, just in case) : death_report.zip

[latin-panda]

Thanks @ngaruko!.

Leaving a note regarding merge: this work depends on the enketo upgrade, meaning this work can be merged to master once the upgrade is finalised.

[latin-panda]

This is updated and ready to merge once the enketo upgrade is merged into the main branch

[latin-panda]

My collaboration is now merged into Enketo-core lib but still not released. Hopefully when we release the Enketo upgrade in v4.0.0, this fix is included and we don't need to merge this patch. I'll keep and eye and post back here with any updates.

[dianabarsan]

Will a patch for Enketo 5.x be released to include the fix? We're not going for the latest Enketo version in 4.0, and I'm not sure if @jkuester is going to bump the version in the PR.

Awesome to see your contribution to Enketo, @latin-panda !

[jkuester]

Just for the record here, we are not planning to go to enketo-core 6.x in the cht-core 4.0.0 release. And since it does not appear that the enketo-core changes will be patched back to 5.x, I think we will still need the patch for this issue (until at least cht-core 4.1 when we can switch to enketo-core 6.x).

[latin-panda]

Just wondering, @jkuester what do you think about merging this into the enketo upgrade branch vs master?

[jkuester]

@latin-panda I think that would be fine (especially given the small amount of code changes here). Though, is there a specific reason you are considering this now?

[latin-panda]

@jkuester, nothing big, thinking of having all the enketo fixes in 1 branch to facilitate the exploratory testing when AT. It's very small code anyways.

[jkuester]

@latin-panda :+1: Okay, just wanted to be sure I was not missing something here. I like the idea of centralizing it to make testing better. (Also just helps to consolidate the Enketo stuff we have still "in-progress".)

I have gone ahead and merged the PR into the main Enketo branch!

[latin-panda]

Thanks @jkuester! Can we close the issue? or would you prefer to keep it open?

[garethbowen]

@latin-panda Great job on getting the fixed merged into enketo-core. We'll need to remember to remove this change when we upgrade and get the proper fix. Do we have a list somewhere of things to do/fix/remove when we upgrade next?

[jkuester]

@garethbowen I have logged https://github.com/medic/cht-core/issues/7599 with the two things I know of so far that will need to be removed. We can add more to that issue if we find them.