Investigate Latest MediaElement and Possible Upgrade

[joncameron]

Description

We should check into the latest version of MediaElement.

• Can we migrate to this?
• What local fixes to the older version of MediaElement we're using need to happen? (have these already been fixed upstream?)

[Dananji]

We had ugraded MediaElement.js in 2019 August to 4.2.10. And there are some minor fixes we did after that. And I think most of these local fixes can be pushed to upstream, since they are not specific to Avalon's use cases. The following list contains all the changes we did locally after the upgrade:

1. Don't hide player controls when hovering (MEJS4: do not hide controls when being hovered #2729)
2. Spacebar not working in Firefox when player is focused (Fix for video player not working with spacebar #3427)
3. Shows subsecond values (Ensure that secondsToTimeCode returns subsecond values #3508) - Avalon specific
4. Fix time rail highlight in player (Fix rails highlight in player #3609) - Avalon specific
5. Time code update in media player going from 00:59 -> 01:00 (Fix time code update in media player #3639) - This seems to be fixed in upstream
6. Handle missing caption text at end of file (Handle missing caption text at end of file. #3675) - Brian has already added this to upstream
7. Embedded player wiggle in Safari (Fix embedded player wiggle in Safari #3832) - Avalon specific
8. Move timefloat when hovering over timerail (Move popover time float in MEJS #3839) - Related to embedded player
9. Media player disappearing in Edge 16 on reload (Bug fix: Media player disappearing on reload in Edge 16 #4022) - Maybe Avalon specific?
10. Preserve fullscreen when advancing to the next section (Preserve fullscreen of player when advancing to next section #4075) - Avalon specific
11. Add support for jump forward and backward (ME.js player keyboard support #4151) - This is a ME plugin integration
12. Carry forward volume changes to the next section (Carry forward the set volume from a section to next section #4156) - This contains a bug fix for volume slider in ME.js
13. Unbind keyboard actions when input fields/textareas are focused (Unbind keyboard actions when input fields/textareas are focused #4380) - This PR moves all the hotkey enable/disable code from different places in the code to main ME.js code

I think it's good if we can push some of these (more generic fixes - 1, 2, 12) upstream since they can be useful for others using this.
We can apply the Avalon specific changes on top of latest ME.js (4.2.16) after upgrading. It seems this is what we did with the last upgrade.

[Dananji]

• ME.js support for displaying fragments of media in the player (custom start and end times)?
  This can be done by providing ME.js with custom start and end times when passing the options.
  NOTE: custom start / end times can be passed down to front-end as media fragments in the src, which then can be extracted and passed down to ME.js.
  When building the progress bar and other toolbar actions we can manipulate them to adhere to the custom start / end times. I have roughly done this, but there are still some things to figure out,
  • Showing the correct time in popup when hovering over the time rail
  • Skipping backward and forward without exceeding the custom scope (partially done)
  • Trigger ended event at the custom end

[phuongdh]

@Dananji pushing them upstream would be great. Let me know if you need help with some of these.

[Dananji]

@phuongdh Do you think it would be better to make separate PRs for each fix rather than making one PR with all the 3 fixes?

[phuongdh]

I'd make separate PRs unless they're interdependent.

[Dananji]

Made 2 PRs to upstream (fix # 1, fix # 2), the last bug was fixed upstream and I had missed it.