Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ME.js player keyboard support #4151

Merged
merged 1 commit into from
Jun 1, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions app/assets/javascripts/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@
//= stub mediaelement/plugins/markers
//= stub mediaelement/plugins/quality-avalon
//= stub mediaelement/plugins/quality-i18n
//= stub mediaelement/plugins/jump-forward/jump-forward
//= stub mediaelement/plugins/jump-forward/jump-forward-i18n
//= stub mediaelement/plugins/skip-back/skip-back
//= stub mediaelement/plugins/skip-back/skip-back-i18n
//= stub media_player_wrapper/mejs4_plugin_add_to_playlist
//= stub media_player_wrapper/mejs4_plugin_add_marker_to_playlist
//= stub media_player_wrapper/mejs4_plugin_create_thumbnail
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/avalon_player.js.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class AvalonPlayer
start_time = removeOpt('startTime')
success_callback = removeOpt('success')

features = ['playpause','current','progress','duration',display_track_scrubber,'volume','tracks','qualities',thumbnail_selector, add_to_playlist, add_marker, 'fullscreen','responsive']
features = ['playpause', 'skipback', 'jumpforward', 'current','progress','duration',display_track_scrubber,'volume','tracks','qualities',thumbnail_selector, add_to_playlist, add_marker, 'fullscreen','responsive']
features = (feature for feature in features when feature?)
player_options =
mode: 'auto_plugin'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -575,6 +575,9 @@ class MEJSPlayer {
*/
initializePlayer() {
let currentStreamInfo = this.currentStreamInfo;
// Interval in seconds to jump forward and backward in media
let jumpInterval = 5;

// Mediaelement default root level configuration
let defaults = {
pluginPath: '/assets/mediaelement/shims/',
Expand All @@ -588,7 +591,13 @@ class MEJSPlayer {
defaultQuality: this.defaultQuality,
toggleCaptionsButtonWhenOnlyOne: true,
startVolume: this.localStorage.getItem('startVolume') || 1.0,
startLanguage: this.localStorage.getItem('captions') || ''
startLanguage: this.localStorage.getItem('captions') || '',
// intervals for forward and backward jump using the player buttons
jumpForwardInterval: jumpInterval,
skipBackInterval: jumpInterval,
// jump forward and backward when player is not focused
defaultSeekBackwardInterval: function() { return jumpInterval },
defaultSeekForwardInterval: function() { return jumpInterval }
};

// Add duration as a root level config for Android devices
Expand Down
4 changes: 4 additions & 0 deletions app/assets/javascripts/mejs4_player.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
//= require mediaelement/plugins/markers
//= require mediaelement/plugins/quality-avalon
//= require mediaelement/plugins/quality-i18n
//= require mediaelement/plugins/jump-forward/jump-forward
//= require mediaelement/plugins/jump-forward/jump-forward-i18n
//= require mediaelement/plugins/skip-back/skip-back
//= require mediaelement/plugins/skip-back/skip-back-i18n
//= require media_player_wrapper/mejs4_plugin_add_to_playlist
//= require media_player_wrapper/mejs4_plugin_add_marker_to_playlist
//= require media_player_wrapper/mejs4_plugin_create_thumbnail
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
* Exclude MediaElement4 CSS in /vendor as it collides w/ MEJS2 styles
*= stub mediaelement/mediaelementplayer.css
*= stub mediaelement/plugins/quality.css
*= stub mediaelement/plugins/seekmedia.css

*= require_self
*/
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/mejs4_player.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,5 @@
*= require mejs4/mejs4_plugin_create_thumbnail.scss
*= require mejs4/mejs4_plugin_track_scrubber.scss
*= require mejs4/mejs4_link_back.scss
*= require mediaelement/plugins/seekmedia.css
*/
2 changes: 1 addition & 1 deletion app/views/master_files/_mejs4_player_js.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Unless required by applicable law or agreed to in writing, software distributed
<!-- Missing title and logo features -->
var mejs4AvalonPlayer = new MEJSPlayer({
currentStreamInfo: <%= section_info.to_json.html_safe %>,
features: ['playpause', 'current', 'progress', 'duration', 'volume', 'tracks', <%= quality_feature.html_safe %>'linkBack', 'fullscreen'],
features: ['playpause', 'skipback', 'jumpforward', 'current', 'progress', 'duration', 'volume', 'tracks', <%= quality_feature.html_safe %>'linkBack', 'fullscreen'],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we really want this in the embed player since we have limited space within the iframe, but it would be helpful in fullscreen mode and it might have to be in the normal size in order to be in fullscreen. What do other people think?
@joncameron

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like this might be too much and cramp the rail even further. But I'm interested in at least testing it out on Spruce and feel it out. Maybe these could also sit outside of the MEjs features row.

highlightRail: true,
defaultQuality: '<%= current_quality(section_info) %>'
});
Expand Down
2 changes: 1 addition & 1 deletion app/views/media_objects/_mejs4_player_js.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Unless required by applicable law or agreed to in writing, software distributed
<%= javascript_include_tag "mejs4_player" %>
<% end %>
<script>
var mejs4ConfigFeatures = ['playpause', 'current', 'progress', 'duration', 'trackScrubber', 'volume', 'tracks', 'quality', 'createThumbnail', 'addToPlaylist', 'fullscreen'];
var mejs4ConfigFeatures = ['playpause', 'skipback', 'jumpforward', 'current', 'progress', 'duration', 'trackScrubber', 'volume', 'tracks', 'quality', 'createThumbnail', 'addToPlaylist', 'fullscreen'];

// do not show createThumbnail button if current user can't edit mediaObject
if (<%= cannot? :edit, @media_object %>) {
Expand Down
2 changes: 1 addition & 1 deletion app/views/playlists/_mejs4_player_js.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ var playlistItem = <%= current_playlist_item.to_json.html_safe %>;

var mejs4AvalonPlayer = new MEJSPlayer({
currentStreamInfo: <%= section_info.to_json.html_safe %>,
features: ['playpause', 'current', 'progress', 'duration', 'trackScrubber', 'volume', 'tracks', 'quality', 'markers', 'addMarkerToPlaylist', 'fullscreen', 'playlistItems'],
features: ['playpause', 'skipback', 'jumpforward', 'current', 'progress', 'duration', 'trackScrubber', 'volume', 'tracks', 'quality', 'markers', 'addMarkerToPlaylist', 'fullscreen', 'playlistItems'],
highlightRail: true,
playlistItem: playlistItem,
defaultQuality: '<%= current_quality(section_info) %>'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3360,7 +3360,7 @@ var EN = exports.EN = {

'mejs.install-flash': 'You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https://get.adobe.com/flashplayer/',

'mejs.fullscreen': 'Fullscreen',
'mejs.fullscreen': 'Fullscreen (f)',

'mejs.play': 'Play',
'mejs.pause': 'Pause',
Expand All @@ -3370,8 +3370,8 @@ var EN = exports.EN = {
'mejs.live-broadcast': 'Live Broadcast',

'mejs.volume-help-text': 'Use Up/Down Arrow keys to increase or decrease volume.',
'mejs.unmute': 'Unmute',
'mejs.mute': 'Mute',
'mejs.unmute': 'Unmute (m)',
'mejs.mute': 'Mute (m)',
'mejs.volume-slider': 'Volume Slider',

'mejs.video-player': 'Video Player',
Expand Down Expand Up @@ -5064,7 +5064,7 @@ var MediaElementPlayer = function () {
key: 'onkeydown',
value: function onkeydown(player, media, e) {

if (player.hasFocus && player.options.enableKeyboard) {
if (player.options.enableKeyboard) {
for (var i = 0, total = player.options.keyActions.length; i < total; i++) {
var keyAction = player.options.keyActions[i];

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
'use strict';

if (mejs.i18n.ca !== undefined) {
mejs.i18n.ca['mejs.time-jump-forward'] = ['Salteu endavant 1 segon', 'Salta endavant %1 segons'];
}
if (mejs.i18n.cs !== undefined) {
mejs.i18n.cs['mejs.time-jump-forward'] = ['Přeskočte o 1 sekundu dopředu', 'Přeskočte %1 vteřiny dopředu', 'Jump forward %1 seconds'];
}
if (mejs.i18n.de !== undefined) {
mejs.i18n.de['mejs.time-jump-forward'] = ['1 Sekunde vorspulen', 'Přeskočte %1 vteřiny dopředu', 'Skok %1 vteřin'];
}
if (mejs.i18n.es !== undefined) {
mejs.i18n.es['mejs.time-jump-forward'] = ['Adelantar 1 segundo', 'Adelantar %1 segundos'];
}
if (mejs.i18n.fa !== undefined) {
mejs.i18n.fa['mejs.time-jump-forward'] = 'پرش به جلو 1% ثانیه';
}
if (mejs.i18n.fr !== undefined) {
mejs.i18n.fr['mejs.time-jump-forward'] = ['Avancer de %1 seconde', 'Avancer de %1 secondes'];
}
if (mejs.i18n.hr !== undefined) {
mejs.i18n.hr['mejs.time-jump-forward'] = ['Skoči naprijed 1 sekundu', 'Skoči naprijed %1 sekunde', 'Skoči naprijed %1 sekundi'];
}
if (mejs.i18n.hu !== undefined) {
mejs.i18n.hu['mejs.time-jump-forward'] = ['Ugrás előre 1 másodpercig', 'Ugrás előre %1 másodpercig'];
}
if (mejs.i18n.it !== undefined) {
mejs.i18n.it['mejs.time-jump-forward'] = ['Salta in avanti per 1 secondo', 'Salta in avanti %1 secondi'];
}
if (mejs.i18n.ja !== undefined) {
mejs.i18n.ja['mejs.time-jump-forward'] = '%1秒前にジャンプ';
}
if (mejs.i18n.ko !== undefined) {
mejs.i18n.ko['mejs.time-jump-forward'] = '%1 초 앞으로 뛰어 오르십시오';
}
if (mejs.i18n.ms !== undefined) {
mejs.i18n.ms['mejs.time-jump-forward'] = 'Lompat masa %1 saat';
}
if (mejs.i18n.nl !== undefined) {
mejs.i18n.nl['mejs.time-jump-forward'] = '%1 seconden vooruit springen';
}
if (mejs.i18n.pl !== undefined) {
mejs.i18n.pl['mejs.time-jump-forward'] = ['Przewiń do przodu o sekundę', 'Przewiń do przodu o %1 sekundy', 'Przewiń do przodu o %1 sekund'];
}
if (mejs.i18n.pt !== undefined) {
mejs.i18n.pt['mejs.time-jump-forward'] = ['Avance 1 segundo', 'Avance %1 segundos'];
}
if (mejs.i18n.ro !== undefined) {
mejs.i18n.ro['mejs.time-jump-forward'] = ['Salt înainte de 1 secundă', 'Salt înainte de %1 secunde'];
}
if (mejs.i18n.ru !== undefined) {
mejs.i18n.ru['mejs.time-jump-forward'] = ['Перейти вперед на %1 секунду', 'Перейти вперед на %1 секунды', 'Перейти вперед на %1 секунд'];
}
if (mejs.i18n.sk !== undefined) {
mejs.i18n.sk['mejs.time-jump-forward'] = ['Skočiť dopredu o 1 sekundu', 'Skok vpred o %1 sekundy', 'Skok dopredu %1 sekúnd'];
}
if (mejs.i18n.sv !== undefined) {
mejs.i18n.sv['mejs.time-jump-forward'] = ['Hoppa fram 1 sekund', 'Hoppa fram %1 sekunder'];
}
if (mejs.i18n.tr !== undefined) {
mejs.i18n.tr['mejs.time-jump-forward'] = ['1 saniye ileri atla', '%1 saniye ileri atla'];
}
if (mejs.i18n.uk !== undefined) {
mejs.i18n.uk['mejs.time-jump-forward'] = ['Перейти вперед на %1 секунду', 'Перейти вперед на %1 секунди', 'Перейти вперед на %1 секунд'];
}
if (mejs.i18n.zh !== undefined) {
mejs.i18n.zh['mejs.time-jump-forward'] = '向前跳%1秒';
}
if (mejs.i18n['zh-CN'] !== undefined) {
mejs.i18n['zh-CN']['mejs.time-jump-forward'] = '向前跳%1秒';
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/*!
* MediaElement.js
* http://www.mediaelementjs.com/
*
* MediaElement.js Plugins - https://github.com/mediaelement/mediaelement-plugins
*
* Copyright 2010-2017, John Dyer (http://j.hn/) and Rafael Miranda (https://github.com/rafa8626)
* License: MIT
*
* Feature: Jump forward in the media file for a given number of seconds
*
*/

'use strict';

/**
* Jump forward button
*
* This feature creates a button to forward media a specific number of seconds.
*/

// Translations (English required)
mejs.i18n.en['mejs.time-jump-forward'] = ['Jump forward 1 second', 'Jump forward %1 seconds'];

Object.assign(mejs.MepDefaults, {
/**
* @type {Number}
*/
jumpForwardInterval: 30,
/**
* @type {?String}
*/
jumpForwardText: null
});

Object.assign(MediaElementPlayer.prototype, {
/**
* Feature constructor.
*
* Always has to be prefixed with `build` and the name that will be used in MepDefaults.features list
* @param {MediaElementPlayer} player
* @param {HTMLElement} controls
* @param {HTMLElement} layers
* @param {HTMLElement} media
*/
buildjumpforward (player, controls, layers, media) {

const
t = this,
defaultTitle = mejs.i18n.t('mejs.time-jump-forward', t.options.jumpForwardInterval),
forwardTitle = mejs.Utils.isString(t.options.jumpForwardText) ? t.options.jumpForwardText.replace('%1', t.options.jumpForwardInterval) : defaultTitle,
button = document.createElement('div')
;

button.className = `${t.options.classPrefix}button ${t.options.classPrefix}jump-forward-button`;
button.innerHTML = `<button type="button" aria-controls="${t.id}" title="${forwardTitle}" aria-label="${forwardTitle}" tabindex="0">${t.options.jumpForwardInterval}</button>`;

t.addControlElement(button, 'jumpforward');

// add a click toggle event
button.addEventListener('click', function() {
const duration = !isNaN(media.duration) ? media.duration : t.options.jumpForwardInterval;
if (duration) {
const current = media.currentTime === Infinity ? 0 : media.currentTime;
media.setCurrentTime(Math.min(current + t.options.jumpForwardInterval, duration));
this.querySelector('button').blur();
}
});
}
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
'use strict';

if (mejs.i18n.ca !== undefined) {
mejs.i18n.ca['mejs.time-skip-back'] = ['Retornar 1 segon', 'Retornar %1 segons'];
}
if (mejs.i18n.cs !== undefined) {
mejs.i18n.cs['mejs.time-skip-back'] = ['Přeskočte zpět o 1 sekundu', 'Přeskočte zpět %1 vteřiny', 'Přeskočte zpět %1 sekund'];
}
if (mejs.i18n.de !== undefined) {
mejs.i18n.de['mejs.time-skip-back'] = ['1 Sekunde zurückspulen', '%1 Sekunden zurückspulen'];
}
if (mejs.i18n.es !== undefined) {
mejs.i18n.es['mejs.time-skip-back'] = ['Rebobinar 1 segundo', 'Rebobinar %1 segundos'];
}
if (mejs.i18n.fr !== undefined) {
mejs.i18n.fr['mejs.time-skip-back'] = ['Reculer de %1 seconde', 'Reculer de %1 secondes'];
}
if (mejs.i18n.fa !== undefined) {
mejs.i18n.fa['mejs.time-skip-back'] = '%1 ثانیه به عقب برگردید';
}
if (mejs.i18n.hr !== undefined) {
mejs.i18n.hr['mejs.time-skip-back'] = ['Skoči natrag 1 sekundu', 'Skoči natrag %1 sekunde', 'Skoči natrag %1 sekundi'];
}
if (mejs.i18n.hu !== undefined) {
mejs.i18n.hu['mejs.time-skip-back'] = ['Menj vissza 1 másodpercig', 'Ugrás vissza %1 másodperccel'];
}
if (mejs.i18n.it !== undefined) {
mejs.i18n.it['mejs.time-skip-back'] = ['Riavvolgere 1 secondo', 'Riavvolgere %1 secondi'];
}
if (mejs.i18n.ja !== undefined) {
mejs.i18n.ja['mejs.time-skip-back'] = '%1秒スキップバックする';
}
if (mejs.i18n.ko !== undefined) {
mejs.i18n.ko['mejs.time-skip-back'] = '%1초 를 뒤로 건너뛰세요';
}
if (mejs.i18n.ms !== undefined) {
mejs.i18n.ms['mejs.time-skip-back'] = 'Undur masa %1 saat';
}
if (mejs.i18n.nl !== undefined) {
mejs.i18n.nl['mejs.time-skip-back'] = ['Sla 1 seconde terug', 'Sla %1 seconden terug'];
}
if (mejs.i18n.pl !== undefined) {
mejs.i18n.pl['mejs.time-skip-back'] = ['Cofnij o 1 sekundę', 'Cofnij o %1 sekundy', 'Cofnij o %1 sekund'];
}
if (mejs.i18n.pt !== undefined) {
mejs.i18n.pt['mejs.time-skip-back'] = ['Retroceder %1 segundo', 'Retroceder %1 segundos'];
}
if (mejs.i18n.ro !== undefined) {
mejs.i18n.ro['mejs.time-skip-back'] = ['Treceți înapoi 1 secundă', 'Treceți înapoi în %1 secunde'];
}
if (mejs.i18n.ru !== undefined) {
mejs.i18n.ru['mejs.time-skip-back'] = ['Перейти назад на %1 секунду', 'Перейти назад на %1 секунды', 'Перейти назад на %1 секунд'];
}
if (mejs.i18n.sk !== undefined) {
mejs.i18n.sk['mejs.time-skip-back'] = ['Preskočte späť 1 sekundu', 'Preskočte %1 sekundy', 'Preskočte späť %1 sekúnd'];
}
if (mejs.i18n.sv !== undefined) {
mejs.i18n.sv['mejs.time-skip-back'] = ['Hoppa tillbaka 1 sekund', 'Hoppa tillbaka %1 sekunder'];
}
if (mejs.i18n.tr !== undefined) {
mejs.i18n.tr['mejs.time-skip-back'] = ['1 saniye geri sar', '%1 saniye geri sar'];
}
if (mejs.i18n.uk !== undefined) {
mejs.i18n.uk['mejs.time-skip-back'] = ['Перейти назад на %1 секунду', 'Перейти назад на %1 секунди', 'Перейти назад на %1 секунд'];
}
if (mejs.i18n.zh !== undefined) {
mejs.i18n.zh['mejs.time-skip-back'] = '跳躍式迴繞%1秒';
}
if (mejs.i18n['zh-CN'] !== undefined) {
mejs.i18n['zh-CN']['mejs.time-skip-back'] = '后退%1秒';
}
Loading