From 325fb2b7a9ecafa55d4b4f3e53a62eeb9738f39e Mon Sep 17 00:00:00 2001 From: farhan Date: Wed, 16 Apr 2025 10:59:50 +0500 Subject: [PATCH 1/2] chore: Initial setup of JS files and webpack config --- webpack.common.config.js | 1 + .../assets/video/public/js/async_process.js | 43 + xmodule/assets/video/public/js/commands.js | 137 ++ xmodule/assets/video/public/js/component.js | 69 + .../video/public/js/events_bumper_plugin.js | 179 +++ .../assets/video/public/js/events_plugin.js | 200 +++ .../assets/video/public/js/focus_grabber.js | 132 ++ .../assets/video/public/js/html5_hls_video.js | 99 ++ xmodule/assets/video/public/js/html5_video.js | 290 ++++ xmodule/assets/video/public/js/i18n.js | 18 + xmodule/assets/video/public/js/initialize.js | 825 ++++++++++ xmodule/assets/video/public/js/iterator.js | 78 + .../video/public/js/play_pause_control.js | 95 ++ .../video/public/js/play_placeholder.js | 87 + .../video/public/js/play_skip_control.js | 90 ++ xmodule/assets/video/public/js/poster.js | 69 + xmodule/assets/video/public/js/resizer.js | 191 +++ .../video/public/js/save_state_plugin.js | 189 +++ xmodule/assets/video/public/js/sjson.js | 137 ++ .../assets/video/public/js/skip_control.js | 70 + xmodule/assets/video/public/js/time.js | 43 + .../video/public/js/video_accessible_menu.js | 56 + .../public/js/video_auto_advance_control.js | 148 ++ .../video/public/js/video_block_main.js | 188 +++ .../assets/video/public/js/video_bumper.js | 111 ++ .../assets/video/public/js/video_caption.js | 1420 +++++++++++++++++ .../public/js/video_completion_handler.js | 132 ++ .../video/public/js/video_context_menu.js | 699 ++++++++ .../assets/video/public/js/video_control.js | 167 ++ .../video/public/js/video_full_screen.js | 251 +++ .../assets/video/public/js/video_player.js | 912 +++++++++++ .../video/public/js/video_progress_slider.js | 236 +++ .../video/public/js/video_quality_control.js | 186 +++ .../video/public/js/video_social_sharing.js | 77 + .../video/public/js/video_speed_control.js | 417 +++++ .../assets/video/public/js/video_storage.js | 79 + .../public/js/video_transcript_feedback.js | 241 +++ .../video/public/js/video_volume_control.js | 554 +++++++ xmodule/video_block/video_block.py | 4 +- 39 files changed, 8918 insertions(+), 2 deletions(-) create mode 100644 xmodule/assets/video/public/js/async_process.js create mode 100644 xmodule/assets/video/public/js/commands.js create mode 100644 xmodule/assets/video/public/js/component.js create mode 100644 xmodule/assets/video/public/js/events_bumper_plugin.js create mode 100644 xmodule/assets/video/public/js/events_plugin.js create mode 100644 xmodule/assets/video/public/js/focus_grabber.js create mode 100644 xmodule/assets/video/public/js/html5_hls_video.js create mode 100644 xmodule/assets/video/public/js/html5_video.js create mode 100644 xmodule/assets/video/public/js/i18n.js create mode 100644 xmodule/assets/video/public/js/initialize.js create mode 100644 xmodule/assets/video/public/js/iterator.js create mode 100644 xmodule/assets/video/public/js/play_pause_control.js create mode 100644 xmodule/assets/video/public/js/play_placeholder.js create mode 100644 xmodule/assets/video/public/js/play_skip_control.js create mode 100644 xmodule/assets/video/public/js/poster.js create mode 100644 xmodule/assets/video/public/js/resizer.js create mode 100644 xmodule/assets/video/public/js/save_state_plugin.js create mode 100644 xmodule/assets/video/public/js/sjson.js create mode 100644 xmodule/assets/video/public/js/skip_control.js create mode 100644 xmodule/assets/video/public/js/time.js create mode 100644 xmodule/assets/video/public/js/video_accessible_menu.js create mode 100644 xmodule/assets/video/public/js/video_auto_advance_control.js create mode 100644 xmodule/assets/video/public/js/video_block_main.js create mode 100644 xmodule/assets/video/public/js/video_bumper.js create mode 100644 xmodule/assets/video/public/js/video_caption.js create mode 100644 xmodule/assets/video/public/js/video_completion_handler.js create mode 100644 xmodule/assets/video/public/js/video_context_menu.js create mode 100644 xmodule/assets/video/public/js/video_control.js create mode 100644 xmodule/assets/video/public/js/video_full_screen.js create mode 100644 xmodule/assets/video/public/js/video_player.js create mode 100644 xmodule/assets/video/public/js/video_progress_slider.js create mode 100644 xmodule/assets/video/public/js/video_quality_control.js create mode 100644 xmodule/assets/video/public/js/video_social_sharing.js create mode 100644 xmodule/assets/video/public/js/video_speed_control.js create mode 100644 xmodule/assets/video/public/js/video_storage.js create mode 100644 xmodule/assets/video/public/js/video_transcript_feedback.js create mode 100644 xmodule/assets/video/public/js/video_volume_control.js diff --git a/webpack.common.config.js b/webpack.common.config.js index ca2ae368493d..89082f218524 100644 --- a/webpack.common.config.js +++ b/webpack.common.config.js @@ -139,6 +139,7 @@ module.exports = Merge.smart({ ReactRenderer: './common/static/js/src/ReactRenderer.jsx', XModuleShim: './xmodule/js/src/xmodule.js', VerticalStudentView: './xmodule/assets/vertical/public/js/vertical_student_view.js', + VideoBlockMain: './xmodule/assets/video/public/js/video_block_main.js', commons: 'babel-polyfill' }, diff --git a/xmodule/assets/video/public/js/async_process.js b/xmodule/assets/video/public/js/async_process.js new file mode 100644 index 000000000000..a4d997e28e45 --- /dev/null +++ b/xmodule/assets/video/public/js/async_process.js @@ -0,0 +1,43 @@ +/** + * Provides a convenient way to process a large amount of data without UI blocking. + * + * @param {Array} list - The array to process. + * @param {Function} process - The function to execute on each item. + * @returns {Promise} - Resolves with the processed array. + */ +export const AsyncProcess = { + array(list, process) { + // Validate input + if (!Array.isArray(list)) { + return Promise.reject(new Error('Input is not an array')); + } + + if (typeof process !== 'function' || list.length === 0) { + return Promise.resolve(list); + } + + const MAX_DELAY = 50; + const result = []; + let index = 0; + const len = list.length; + + const handler = (resolve) => { + const start = Date.now(); + + while (index < len && Date.now() - start < MAX_DELAY) { + result[index] = process(list[index], index); + index++; + } + + if (index < len) { + setTimeout(() => handler(resolve), 25); + } else { + resolve(result); + } + }; + + return new Promise((resolve) => { + setTimeout(() => handler(resolve), 25); + }); + } +}; diff --git a/xmodule/assets/video/public/js/commands.js b/xmodule/assets/video/public/js/commands.js new file mode 100644 index 000000000000..0044973d958e --- /dev/null +++ b/xmodule/assets/video/public/js/commands.js @@ -0,0 +1,137 @@ +import $ from 'jquery'; +import _ from 'underscore'; + +'use strict'; + +/** + * Video commands module. + * + * @constructor + * @param {Object} state - The object containing the state of the video + * @param {Object} i18n - The object containing strings with translations + * @return {jQuery.Promise} - A resolved jQuery promise + */ +function VideoCommands(state, i18n) { + if (!(this instanceof VideoCommands)) { + return new VideoCommands(state, i18n); + } + + _.bindAll(this, 'destroy'); + this.state = state; + this.state.videoCommands = this; + this.i18n = i18n; + this.commands = []; + this.initialize(); + + return $.Deferred().resolve().promise(); +} + +VideoCommands.prototype = { + /** + * Initializes the module by loading commands and binding events. + */ + initialize: function () { + this.commands = this.getCommands(); + this.state.el.on('destroy', this.destroy); + }, + + /** + * Cleans up the module by removing event handlers and deleting the instance. + */ + destroy: function () { + this.state.el.off('destroy', this.destroy); + delete this.state.videoCommands; + }, + + /** + * Executes a given command with optional arguments. + * + * @param {String} command - The name of the command to execute + * @param {...*} args - Additional arguments to pass to the command + */ + execute: function (command, ...args) { + if (_.has(this.commands, command)) { + this.commands[command].execute(this.state, ...args); + } else { + console.log(`Command "${command}" is not available.`); + } + }, + + /** + * Returns the available commands as an object. + * + * @return {Object} - A dictionary of available commands + */ + getCommands: function () { + const commands = {}; + const commandsList = [ + playCommand, + pauseCommand, + togglePlaybackCommand, + toggleMuteCommand, + toggleFullScreenCommand, + setSpeedCommand, + skipCommand, + ]; + + _.each(commandsList, (command) => { + commands[command.name] = command; + }); + + return commands; + }, +}; + +/** + * Command constructor. + * + * @constructor + * @param {String} name - The name of the command + * @param {Function} execute - The function to execute the command + */ +function Command(name, execute) { + this.name = name; + this.execute = execute; +} + +// Individual command definitions +const playCommand = new Command('play', (state) => { + state.videoPlayer.play(); +}); + +const pauseCommand = new Command('pause', (state) => { + state.videoPlayer.pause(); +}); + +const togglePlaybackCommand = new Command('togglePlayback', (state) => { + if (state.videoPlayer.isPlaying()) { + pauseCommand.execute(state); + } else { + playCommand.execute(state); + } +}); + +const toggleMuteCommand = new Command('toggleMute', (state) => { + state.videoVolumeControl.toggleMute(); +}); + +const toggleFullScreenCommand = new Command('toggleFullScreen', (state) => { + state.videoFullScreen.toggle(); +}); + +const setSpeedCommand = new Command( + 'speed', + (state, speed) => { + state.videoSpeedControl.setSpeed(state.speedToString(speed)); + } +); + +const skipCommand = new Command('skip', (state, doNotShowAgain) => { + if (doNotShowAgain) { + state.videoBumper.skipAndDoNotShowAgain(); + } else { + state.videoBumper.skip(); + } +}); + +export {VideoCommands}; diff --git a/xmodule/assets/video/public/js/component.js b/xmodule/assets/video/public/js/component.js new file mode 100644 index 000000000000..6833eeafe388 --- /dev/null +++ b/xmodule/assets/video/public/js/component.js @@ -0,0 +1,69 @@ +'use strict'; + +/** + * Creates a new object with the specified prototype object and properties. + * @param {Object} o The object which should be the prototype of the newly-created object. + * @private + * @throws {TypeError, Error} + * @return {Object} + */ +const inherit = Object.create || (function () { + const F = function () { }; + + return function (o) { + if (arguments.length > 1) { + throw Error('Second argument not supported'); + } + if (_.isNull(o) || _.isUndefined(o)) { + throw Error('Cannot set a null [[Prototype]]'); + } + if (!_.isObject(o)) { + throw TypeError('Argument must be an object'); + } + + F.prototype = o; + return new F(); + }; +}()); + +/** + * Component constructor function. + * Calls `initialize()` if defined. + * @returns {any} + */ +function Component() { + if ($.isFunction(this.initialize)) { + return this.initialize.apply(this, arguments); + } +} + +/** + * Adds an `extend` method to the Component constructor. + * Creates a subclass that inherits from Component. + * @param {Object} protoProps - Prototype methods and properties. + * @param {Object} staticProps - Static methods and properties. + * @returns {Function} Child constructor. + */ +Component.extend = function (protoProps, staticProps) { + const Parent = this; + + const Child = function () { + if ($.isFunction(this.initialize)) { + return this.initialize.apply(this, arguments); + } + }; + + Child.prototype = inherit(Parent.prototype); + Child.constructor = Parent; + Child.__super__ = Parent.prototype; + + if (protoProps) { + $.extend(Child.prototype, protoProps); + } + + $.extend(Child, Parent, staticProps); + + return Child; +}; + +export { Component }; diff --git a/xmodule/assets/video/public/js/events_bumper_plugin.js b/xmodule/assets/video/public/js/events_bumper_plugin.js new file mode 100644 index 000000000000..0b93b947a294 --- /dev/null +++ b/xmodule/assets/video/public/js/events_bumper_plugin.js @@ -0,0 +1,179 @@ +import $ from 'jquery'; +import _ from 'underscore'; + +'use strict'; + +/** + * Events module. + * + * @constructor + * @param {Object} state - The object containing the state of the video + * @param {Object} i18n - The object containing strings with translations + * @param {Object} options - Additional options for the plugin + * @return {jQuery.Promise} - A resolved jQuery promise + */ +function VideoEventsBumperPlugin(state, i18n, options) { + if (!(this instanceof VideoEventsBumperPlugin)) { + return new VideoEventsBumperPlugin(state, i18n, options); + } + + _.bindAll( + this, + 'onReady', + 'onPlay', + 'onEnded', + 'onShowLanguageMenu', + 'onHideLanguageMenu', + 'onSkip', + 'onShowCaptions', + 'onHideCaptions', + 'destroy' + ); + + this.state = state; + this.options = _.extend({}, options); + this.state.videoEventsBumperPlugin = this; + this.i18n = i18n; + + this.initialize(); + + return $.Deferred().resolve().promise(); +} + +VideoEventsBumperPlugin.moduleName = 'EventsBumperPlugin'; + +VideoEventsBumperPlugin.prototype = { + /** + * Initialize the plugin by binding the required event handlers + */ + initialize: function () { + this.events = { + ready: this.onReady, + play: this.onPlay, + 'ended stop': this.onEnded, + skip: this.onSkip, + 'language_menu:show': this.onShowLanguageMenu, + 'language_menu:hide': this.onHideLanguageMenu, + 'captions:show': this.onShowCaptions, + 'captions:hide': this.onHideCaptions, + destroy: this.destroy, + }; + this.bindHandlers(); + }, + + /** + * Bind event handlers to the video state element + */ + bindHandlers: function () { + this.state.el.on(this.events); + }, + + /** + * Cleanup by removing event handlers and destroying the plugin instance + */ + destroy: function () { + this.state.el.off(this.events); + delete this.state.videoEventsBumperPlugin; + }, + + /** + * Handle the `ready` event + */ + onReady: function () { + this.log('edx.video.bumper.loaded'); + }, + + /** + * Handle the `play` event + */ + onPlay: function () { + this.log('edx.video.bumper.played', { currentTime: this.getCurrentTime() }); + }, + + /** + * Handle the `ended` and `stop` events + */ + onEnded: function () { + this.log('edx.video.bumper.stopped', { currentTime: this.getCurrentTime() }); + }, + + /** + * Handle the `skip` event + */ + onSkip: function (event, doNotShowAgain) { + const info = { currentTime: this.getCurrentTime() }; + const eventName = `edx.video.bumper.${doNotShowAgain ? 'dismissed' : 'skipped'}`; + this.log(eventName, info); + }, + + /** + * Handle when the language menu is shown + */ + onShowLanguageMenu: function () { + this.log('edx.video.bumper.transcript.menu.shown'); + }, + + /** + * Handle when the language menu is hidden + */ + onHideLanguageMenu: function () { + this.log('edx.video.bumper.transcript.menu.hidden'); + }, + + /** + * Handle when captions are shown + */ + onShowCaptions: function () { + this.log('edx.video.bumper.transcript.shown', { currentTime: this.getCurrentTime() }); + }, + + /** + * Handle when captions are hidden + */ + onHideCaptions: function () { + this.log('edx.video.bumper.transcript.hidden', { currentTime: this.getCurrentTime() }); + }, + + /** + * Get the current time of the video + * + * @return {Number} - The current time of the video in seconds + */ + getCurrentTime: function () { + const player = this.state.videoPlayer; + return player ? player.currentTime : 0; + }, + + /** + * Get the duration of the video + * + * @return {Number} - The duration of the video in seconds + */ + getDuration: function () { + const player = this.state.videoPlayer; + return player ? player.duration() : 0; + }, + + /** + * Log an event + * + * @param {String} eventName - The name of the event to log + * @param {Object} data - Additional data to log with the event + */ + log: function (eventName, data) { + const logInfo = _.extend( + { + host_component_id: this.state.id, + bumper_id: this.state.config.sources[0] || '', + duration: this.getDuration(), + code: 'html5', + }, + data, + this.options.data + ); + + Logger.log(eventName, logInfo); + }, +}; + +export { VideoEventsBumperPlugin }; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/events_plugin.js b/xmodule/assets/video/public/js/events_plugin.js new file mode 100644 index 000000000000..9c315b9f4443 --- /dev/null +++ b/xmodule/assets/video/public/js/events_plugin.js @@ -0,0 +1,200 @@ +import $ from 'jquery'; +import _ from 'underscore'; + +'use strict'; + +/** + * Events module. + * + * @constructor + * @param {Object} state - The object containing the state of the video + * @param {Object} i18n - The object containing strings with translations + * @param {Object} options - Additional options for the plugin + * @return {jQuery.Promise} - A resolved jQuery promise + */ +function VideoEventsPlugin(state, i18n, options) { + if (!(this instanceof VideoEventsPlugin)) { + return new VideoEventsPlugin(state, i18n, options); + } + + _.bindAll( + this, + 'onReady', + 'onPlay', + 'onPause', + 'onComplete', + 'onEnded', + 'onSeek', + 'onSpeedChange', + 'onAutoAdvanceChange', + 'onShowLanguageMenu', + 'onHideLanguageMenu', + 'onSkip', + 'onShowTranscript', + 'onHideTranscript', + 'onShowCaptions', + 'onHideCaptions', + 'destroy' + ); + + this.state = state; + this.options = _.extend({}, options); + this.state.videoEventsPlugin = this; + this.i18n = i18n; + this.initialize(); + + return $.Deferred().resolve().promise(); +} + +VideoEventsPlugin.moduleName = 'EventsPlugin'; +VideoEventsPlugin.prototype = { + /** + * Initialize the EventsPlugin module. + */ + initialize: function () { + this.events = { + ready: this.onReady, + play: this.onPlay, + pause: this.onPause, + complete: this.onComplete, + 'ended stop': this.onEnded, + seek: this.onSeek, + skip: this.onSkip, + speedchange: this.onSpeedChange, + autoadvancechange: this.onAutoAdvanceChange, + 'language_menu:show': this.onShowLanguageMenu, + 'language_menu:hide': this.onHideLanguageMenu, + 'transcript:show': this.onShowTranscript, + 'transcript:hide': this.onHideTranscript, + 'captions:show': this.onShowCaptions, + 'captions:hide': this.onHideCaptions, + destroy: this.destroy, + }; + + this.bindHandlers(); + this.emitPlayVideoEvent = true; + }, + + /** + * Destroy the EventPlugin instance and cleanup. + */ + destroy: function () { + this.state.el.off(this.events); + delete this.state.videoEventsPlugin; + }, + + bindHandlers: function () { + this.state.el.on(this.events); + }, + + onReady: function () { + this.log('load_video'); + }, + + onPlay: function () { + if (this.emitPlayVideoEvent) { + this.log('play_video', {currentTime: this.getCurrentTime()}); + this.emitPlayVideoEvent = false; + } + }, + + onPause: function () { + this.log('pause_video', {currentTime: this.getCurrentTime()}); + this.emitPlayVideoEvent = true; + }, + + onComplete: function () { + this.log('complete_video', {currentTime: this.getCurrentTime()}); + }, + + onEnded: function () { + this.log('stop_video', {currentTime: this.getCurrentTime()}); + this.emitPlayVideoEvent = true; + }, + + onSkip: function (event, doNotShowAgain) { + var info = {currentTime: this.getCurrentTime()}, + eventName = doNotShowAgain ? 'do_not_show_again_video' : 'skip_video'; + this.log(eventName, info); + }, + + onSeek: function (event, time, oldTime, type) { + this.log('seek_video', { + old_time: oldTime, + new_time: time, + type: type + }); + this.emitPlayVideoEvent = true; + }, + + onSpeedChange: function (event, newSpeed, oldSpeed) { + this.log('speed_change_video', { + current_time: this.getCurrentTime(), + old_speed: this.state.speedToString(oldSpeed), + new_speed: this.state.speedToString(newSpeed) + }); + }, + + onAutoAdvanceChange: function (event, enabled) { + this.log('auto_advance_change_video', { + enabled: enabled + }); + }, + + onShowLanguageMenu: function () { + this.log('edx.video.language_menu.shown'); + }, + + onHideLanguageMenu: function () { + this.log('edx.video.language_menu.hidden', {language: this.getCurrentLanguage()}); + }, + + onShowTranscript: function () { + this.log('show_transcript', {current_time: this.getCurrentTime()}); + }, + + onHideTranscript: function () { + this.log('hide_transcript', {current_time: this.getCurrentTime()}); + }, + + onShowCaptions: function () { + this.log('edx.video.closed_captions.shown', {current_time: this.getCurrentTime()}); + }, + + onHideCaptions: function () { + this.log('edx.video.closed_captions.hidden', {current_time: this.getCurrentTime()}); + }, + + getCurrentTime: function () { + var player = this.state.videoPlayer, + startTime = this.state.config.startTime, + currentTime; + currentTime = player ? player.currentTime : 0; + // if video didn't start from 0(it's a subsection of video), subtract the additional time at start + if (startTime) { + currentTime = currentTime ? currentTime - startTime : 0; + } + return currentTime; + }, + + getCurrentLanguage: function () { + var language = this.state.lang; + return language; + }, + + log: function (eventName, data) { + // use startTime and endTime to calculate the duration to handle the case where only a subsection of video is used + var endTime = this.state.config.endTime || this.state.duration, + startTime = this.state.config.startTime; + + var logInfo = _.extend({ + id: this.state.id, + // eslint-disable-next-line no-nested-ternary + code: this.state.isYoutubeType() ? this.state.youtubeId() : this.state.canPlayHLS ? 'hls' : 'html5', + duration: endTime - startTime + }, data, this.options.data); + Logger.log(eventName, logInfo); + } +}; + +export {VideoEventsPlugin}; diff --git a/xmodule/assets/video/public/js/focus_grabber.js b/xmodule/assets/video/public/js/focus_grabber.js new file mode 100644 index 000000000000..66b7ca713d99 --- /dev/null +++ b/xmodule/assets/video/public/js/focus_grabber.js @@ -0,0 +1,132 @@ +/* + * 025_focus_grabber.js + * + * Purpose: Provide a way to focus on autohidden Video controls. + * + * + * Because in HTML player mode we have a feature of autohiding controls on + * mouse inactivity, sometimes focus is lost from the currently selected + * control. What's more, when all controls are autohidden, we can't get to any + * of them because by default browser does not place hidden elements on the + * focus chain. + * + * To get around this minor annoyance, this module will manage 2 placeholder + * elements that will be invisible to the user's eye, but visible to the + * browser. This will allow for a sneaky stealing of focus and placing it where + * we need (on hidden controls). + * + * This code has been moved to a separate module because it provides a concrete + * block of functionality that can be turned on (off). + */ + +/* + * "If you want to climb a mountain, begin at the top." + * + * ~ Zen saying + */ + +import $ from 'jquery'; + +// FocusGrabber module. +const FocusGrabber = function (state) { + var dfd = $.Deferred(); + + state.focusGrabber = {}; + + _makeFunctionsPublic(state); + _renderElements(state); + _bindHandlers(state); + + dfd.resolve(); + return dfd.promise(); +}; + +// Private functions. + +function _makeFunctionsPublic(state) { + var methodsDict = { + disableFocusGrabber: disableFocusGrabber, + enableFocusGrabber: enableFocusGrabber, + onFocus: onFocus + }; + + state.bindTo(methodsDict, state.focusGrabber, state); +} + +function _renderElements(state) { + state.focusGrabber.elFirst = state.el.find('.focus_grabber.first'); + state.focusGrabber.elLast = state.el.find('.focus_grabber.last'); + + // From the start, the Focus Grabber must be disabled so that + // tabbing (switching focus) does not land the user on one of the + // placeholder elements (elFirst, elLast). + state.focusGrabber.disableFocusGrabber(); +} + +function _bindHandlers(state) { + state.focusGrabber.elFirst.on('focus', state.focusGrabber.onFocus); + state.focusGrabber.elLast.on('focus', state.focusGrabber.onFocus); + + // When the video container element receives programmatic focus, then + // on un-focus ('blur' event) we should trigger a 'mousemove' event so + // as to reveal autohidden controls. + state.el.on('blur', function () { + state.el.trigger('mousemove'); + }); +} + +// Public functions. + +function enableFocusGrabber() { + var tabIndex; + + // When the Focus Grabber is being enabled, there are two different + // scenarios: + // + // 1.) Currently focused element was inside the video player. + // 2.) Currently focused element was somewhere else on the page. + // + // In the first case we must make sure that the video player doesn't + // loose focus, even though the controls are autohidden. + if ($(document.activeElement).parents().hasClass('video')) { + tabIndex = -1; + } else { + tabIndex = 0; + } + + this.focusGrabber.elFirst.attr('tabindex', tabIndex); + this.focusGrabber.elLast.attr('tabindex', tabIndex); + + // Don't loose focus. We are inside video player on some control, but + // because we can't remain focused on a hidden element, we will shift + // focus to the main video element. + // + // Once the main element will receive the un-focus ('blur') event, a + // 'mousemove' event will be triggered, and the video controls will + // receive focus once again. + if (tabIndex === -1) { + this.el.focus(); + + this.focusGrabber.elFirst.attr('tabindex', 0); + this.focusGrabber.elLast.attr('tabindex', 0); + } +} + +function disableFocusGrabber() { + // Only programmatic focusing on these elements will be available. + // We don't want the user to focus on them (for example with the 'Tab' + // key). + this.focusGrabber.elFirst.attr('tabindex', -1); + this.focusGrabber.elLast.attr('tabindex', -1); +} + +function onFocus(event, params) { + // Once the Focus Grabber placeholder elements will gain focus, we will + // trigger 'mousemove' event so that the autohidden controls will + // become visible. + this.el.trigger('mousemove'); + + this.focusGrabber.disableFocusGrabber(); +} + +export {FocusGrabber}; diff --git a/xmodule/assets/video/public/js/html5_hls_video.js b/xmodule/assets/video/public/js/html5_hls_video.js new file mode 100644 index 000000000000..fad512248bcb --- /dev/null +++ b/xmodule/assets/video/public/js/html5_hls_video.js @@ -0,0 +1,99 @@ +import { bindAll, once } from 'underscore'; +import { Player as HTML5Player } from './02_html5_video.js'; +import Hls from 'hls.js'; + +export class HLSVideoPlayer extends HTML5Player { + constructor(el, config) { + super(); + + this.config = config; + this.init(el, config); + + bindAll(this, 'playVideo', 'pauseVideo', 'onReady'); + + // Handle unsupported HLS + if (config.HLSOnlySources && !config.canPlayHLS) { + this.showErrorMessage(null, '.video-hls-error'); + return; + } + + // Setup on initialize + const onInitialize = once(() => { + console.log('[HLS Video]: HLS Player initialized'); + this.showPlayButton(); + }); + config.state.el.addEventListener('initialize', onInitialize); + + // Handle native Safari HLS + if (config.browserIsSafari) { + this.videoEl.setAttribute('src', config.videoSources[0]); + } else { + this.hls = new Hls({ + autoStartLoad: config.state.auto_advance ?? false + }); + + this.hls.loadSource(config.videoSources[0]); + this.hls.attachMedia(this.video); + + this.hls.on(Hls.Events.ERROR, this.onError.bind(this)); + + this.hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => { + console.log('[HLS Video]: MANIFEST_PARSED, qualityLevelsInfo:', + data.levels.map(level => ({ + bitrate: level.bitrate, + resolution: `${level.width}x${level.height}` + })) + ); + this.config.onReadyHLS?.(); + }); + + this.hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => { + const level = this.hls.levels[data.level]; + console.log('[HLS Video]: LEVEL_SWITCHED, qualityLevelInfo:', { + bitrate: level.bitrate, + resolution: `${level.width}x${level.height}` + }); + }); + } + } + + playVideo() { + super.updatePlayerLoadingState('show'); + if (!this.config.browserIsSafari) { + this.hls.startLoad(); + } + super.playVideo(); + } + + pauseVideo() { + super.pauseVideo(); + super.updatePlayerLoadingState('hide'); + } + + onPlaying() { + super.onPlaying(); + super.updatePlayerLoadingState('hide'); + } + + onReady() { + this.config.events.onReady?.(null); + } + + onError(event, data) { + if (!data.fatal) return; + + switch (data.type) { + case Hls.ErrorTypes.NETWORK_ERROR: + console.error('[HLS Video]: Fatal network error. Details:', data.details); + this.hls.startLoad(); + break; + case Hls.ErrorTypes.MEDIA_ERROR: + console.error('[HLS Video]: Fatal media error. Details:', data.details); + this.hls.recoverMediaError(); + break; + default: + console.error('[HLS Video]: Unrecoverable error. Details:', data.details); + break; + } + } +} diff --git a/xmodule/assets/video/public/js/html5_video.js b/xmodule/assets/video/public/js/html5_video.js new file mode 100644 index 000000000000..75f16181305d --- /dev/null +++ b/xmodule/assets/video/public/js/html5_video.js @@ -0,0 +1,290 @@ +/* eslint-disable no-console, no-param-reassign */ +'use strict'; + +import _ from 'underscore'; + +// HTML5Video object that will be exported +const HTML5Video = {}; + +// Constants mimicking the YouTube API +HTML5Video.PlayerState = { + UNSTARTED: -1, + ENDED: 0, + PLAYING: 1, + PAUSED: 2, + BUFFERING: 3, + CUED: 5 +}; + +// HTML5Video.Player constructor function +class Player { + constructor(el, config) { + this.init(el, config); + + const sourceList = $.map(config.videoSources, source => { + const separator = source.indexOf('?') === -1 ? '?' : '&'; + return ``; + }); + + const errorMessage = [ + gettext('This browser cannot play .mp4, .ogg, or .webm files.'), + gettext('Try using a different browser, such as Google Chrome.') + ].join(''); + + this.video.innerHTML = sourceList.join('') + errorMessage; + + const lastSource = this.videoEl.find('source').last(); + lastSource.on('error', this.showErrorMessage.bind(this)); + lastSource.on('error', this.onError.bind(this)); + this.videoEl.on('error', this.onError.bind(this)); + } + + init(el, config) { + const self = this; + const isTouch = window.onTouchBasedDevice?.() || ''; + const events = [ + 'loadstart', 'progress', 'suspend', 'abort', 'error', + 'emptied', 'stalled', 'play', 'pause', 'loadedmetadata', + 'loadeddata', 'waiting', 'playing', 'canplay', 'canplaythrough', + 'seeking', 'seeked', 'timeupdate', 'ended', 'ratechange', + 'durationchange', 'volumechange' + ]; + + this.config = config; + this.logs = []; + this.el = $(el); + + this.video = document.createElement('video'); + this.videoEl = $(this.video); + this.videoOverlayEl = this.el.find('.video-wrapper .btn-play'); + this.playerState = HTML5Video.PlayerState.UNSTARTED; + + _.bindAll(this, 'onLoadedMetadata', 'onPlay', 'onPlaying', 'onPause', 'onEnded'); + + const togglePlayback = () => { + const { PLAYING, PAUSED } = HTML5Video.PlayerState; + if (self.playerState === PLAYING) { + self.playerState = PAUSED; + self.pauseVideo(); + } else { + self.playerState = PLAYING; + self.playVideo(); + } + }; + + this.videoEl.on('click', togglePlayback); + this.videoOverlayEl.on('click', togglePlayback); + + this.debug = false; + + $.each(events, (index, eventName) => { + self.video.addEventListener(eventName, function (...args) { + self.logs.push({ + 'event name': eventName, + state: self.playerState + }); + + if (self.debug) { + console.log( + 'event name:', eventName, + 'state:', self.playerState, + 'readyState:', self.video.readyState, + 'networkState:', self.video.networkState + ); + } + + self.el.trigger(`html5:${eventName}`, args); + }); + }); + + this.video.addEventListener('loadedmetadata', this.onLoadedMetadata, false); + this.video.addEventListener('play', this.onPlay, false); + this.video.addEventListener('playing', this.onPlaying, false); + this.video.addEventListener('pause', this.onPause, false); + this.video.addEventListener('ended', this.onEnded, false); + + if (/iP(hone|od)/i.test(isTouch[0])) { + this.videoEl.prop('controls', true); + } + + if (config.poster) { + this.videoEl.prop('poster', config.poster); + } + + this.videoEl.appendTo(this.el.find('.video-player > div:first-child')); + } + + showPlayButton() { + this.videoOverlayEl.removeClass('is-hidden'); + } + + hidePlayButton() { + this.videoOverlayEl.addClass('is-hidden'); + } + + showLoading() { + this.el + .removeClass('is-initialized') + .find('.spinner') + .removeAttr('tabindex') + .attr({ 'aria-hidden': 'false' }); + } + + hideLoading() { + this.el + .addClass('is-initialized') + .find('.spinner') + .attr({ 'aria-hidden': 'false', tabindex: -1 }); + } + + updatePlayerLoadingState(state) { + if (state === 'show') { + this.hidePlayButton(); + this.showLoading(); + } else if (state === 'hide') { + this.hideLoading(); + } + } + + callStateChangeCallback() { + const callback = this.config.events.onStateChange; + if ($.isFunction(callback)) { + callback({ data: this.playerState }); + } + } + + pauseVideo() { + this.video.pause(); + } + + seekTo(value) { + if (typeof value === 'number' && value <= this.video.duration && value >= 0) { + this.video.currentTime = value; + } + } + + setVolume(value) { + if (typeof value === 'number' && value <= 100 && value >= 0) { + this.video.volume = value * 0.01; + } + } + + getCurrentTime() { + return this.video.currentTime; + } + + playVideo() { + this.video.play(); + } + + getPlayerState() { + return this.playerState; + } + + getVolume() { + return this.video.volume; + } + + getDuration() { + return isNaN(this.video.duration) ? 0 : this.video.duration; + } + + setPlaybackRate(value) { + const newSpeed = parseFloat(value); + if (isFinite(newSpeed) && this.video.playbackRate !== value) { + this.video.playbackRate = value; + } + } + + getAvailablePlaybackRates() { + return [0.75, 1.0, 1.25, 1.5, 2.0]; + } + + _getLogs() { + return this.logs; + } + + showErrorMessage(_, cssSelector = '.video-player .video-error') { + this.el + .find('.video-player div') + .addClass('hidden') + .end() + .find(cssSelector) + .removeClass('is-hidden') + .end() + .addClass('is-initialized') + .find('.spinner') + .attr({ 'aria-hidden': 'true', tabindex: -1 }); + } + + onError() { + const callback = this.config.events.onError; + if ($.isFunction(callback)) { + callback(); + } + } + + destroy() { + this.video.removeEventListener('loadedmetadata', this.onLoadedMetadata, false); + this.video.removeEventListener('play', this.onPlay, false); + this.video.removeEventListener('playing', this.onPlaying, false); + this.video.removeEventListener('pause', this.onPause, false); + this.video.removeEventListener('ended', this.onEnded, false); + + this.el + .find('.video-player div') + .removeClass('is-hidden') + .end() + .find('.video-player .video-error') + .addClass('is-hidden') + .end() + .removeClass('is-initialized') + .find('.spinner') + .attr({ 'aria-hidden': 'false' }); + + this.videoEl.off('remove'); + this.videoEl.remove(); + } + + onReady() { + if ($.isFunction(this.config.events.onReady)) { + this.config.events.onReady(null); + } + this.showPlayButton(); + } + + onLoadedMetadata() { + this.playerState = HTML5Video.PlayerState.PAUSED; + if ($.isFunction(this.config.events.onReady)) { + this.onReady(); + } + } + + onPlay() { + this.playerState = HTML5Video.PlayerState.BUFFERING; + this.callStateChangeCallback(); + this.videoOverlayEl.addClass('is-hidden'); + } + + onPlaying() { + this.playerState = HTML5Video.PlayerState.PLAYING; + this.callStateChangeCallback(); + this.videoOverlayEl.addClass('is-hidden'); + } + + onPause() { + this.playerState = HTML5Video.PlayerState.PAUSED; + this.callStateChangeCallback(); + this.showPlayButton(); + } + + onEnded() { + this.playerState = HTML5Video.PlayerState.ENDED; + this.callStateChangeCallback(); + } +} + +// Attach to exported object +HTML5Video.Player = Player; + +export { HTML5Video }; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/i18n.js b/xmodule/assets/video/public/js/i18n.js new file mode 100644 index 000000000000..24186a06a837 --- /dev/null +++ b/xmodule/assets/video/public/js/i18n.js @@ -0,0 +1,18 @@ +export const i18n = { + Play: gettext('Play'), + Pause: gettext('Pause'), + Mute: gettext('Mute'), + Unmute: gettext('Unmute'), + 'Exit full browser': gettext('Exit full browser'), + 'Fill browser': gettext('Fill browser'), + Speed: gettext('Speed'), + 'Auto-advance': gettext('Auto-advance'), + Volume: gettext('Volume'), + Muted: gettext('Muted'), // Volume level = 0% + 'Very low': gettext('Very low'), // 0-20% + Low: gettext('Low'), // 20-40% + Average: gettext('Average'), // 40-60% + Loud: gettext('Loud'), // 60-80% + 'Very loud': gettext('Very loud'), // 80-99% + Maximum: gettext('Maximum') // 100% +}; diff --git a/xmodule/assets/video/public/js/initialize.js b/xmodule/assets/video/public/js/initialize.js new file mode 100644 index 000000000000..879c76eb5030 --- /dev/null +++ b/xmodule/assets/video/public/js/initialize.js @@ -0,0 +1,825 @@ + +console.log("Within Initialize.js!"); +/** + * @function + * + * Initialize module exports this function. + * + * @param {object} state The object containg the state of the video player. + * All other modules, their parameters, public letiables, etc. are + * available via this object. + * @param {DOM element} element Container of the entire Video DOM element. + */ +let Initialize = function (state, element) { + _makeFunctionsPublic(state); + + state.initialize(element) + .done(function () { + if (state.isYoutubeType()) { + state.parseSpeed(); + } + // On iPhones and iPods native controls are used. + if (/iP(hone|od)/i.test(state.isTouch[0])) { + _hideWaitPlaceholder(state); + state.el.trigger('initialize', arguments); + + return false; + } + + _initializeModules(state, i18n) + .done(function () { + // On iPad ready state occurs just after start playing. + // We hide controls before video starts playing. + if (/iPad|Android/i.test(state.isTouch[0])) { + state.el.on('play', _.once(function () { + state.trigger('videoControl.show', null); + })); + } else { + // On PC show controls immediately. + state.trigger('videoControl.show', null); + } + + _hideWaitPlaceholder(state); + state.el.trigger('initialize', arguments); + }); + }); +}, + + /* eslint-disable no-use-before-define */ + methodsDict = { + bindTo, + fetchMetadata, + getCurrentLanguage, + getDuration, + getPlayerMode, + getVideoMetadata, + initialize, + isHtml5Mode, + isFlashMode, + isYoutubeType, + parseSpeed, + parseYoutubeStreams, + setPlayerMode, + setSpeed, + setAutoAdvance, + speedToString, + trigger, + youtubeId, + loadHtmlPlayer, + loadYoutubePlayer, + loadYouTubeIFrameAPI + }, + /* eslint-enable no-use-before-define */ + + _youtubeApiDeferred = null, + _oldOnYouTubeIframeAPIReady; + +Initialize.prototype = methodsDict; + +// *************************************************************** +// Private functions start here. Private functions start with underscore. +// *************************************************************** + +/** +* @function _makeFunctionsPublic +* +* Functions which will be accessible via 'state' object. When called, +* these functions will get the 'state' +* object as a context. +* +* @param {object} state The object containg the state (properties, +* methods, modules) of the Video player. +*/ +function _makeFunctionsPublic(state) { + bindTo(methodsDict, state, state); +} + +// function _renderElements(state) +// +// Create any necessary DOM elements, attach them, and set their +// initial configuration. Also make the created DOM elements available +// via the 'state' object. Much easier to work this way - you don't +// have to do repeated jQuery element selects. +function _renderElements(state) { + // Launch embedding of actual video content, or set it up so that it + // will be done as soon as the appropriate video player (YouTube or + // stand-alone HTML5) is loaded, and can handle embedding. + // + // Note that the loading of stand alone HTML5 player API is handled by + // Require JS. At the time when we reach this code, the stand alone + // HTML5 player is already loaded, so no further testing in that case + // is required. + let video, onYTApiReady, setupOnYouTubeIframeAPIReady; + + if (state.videoType === 'youtube') { + state.youtubeApiAvailable = false; + + onYTApiReady = function () { + console.log('[Video info]: YouTube API is available and is loaded.'); + if (state.htmlPlayerLoaded) { return; } + + console.log('[Video info]: Starting YouTube player.'); + video = VideoPlayer(state); + + state.modules.push(video); + state.__dfd__.resolve(); + state.youtubeApiAvailable = true; + }; + + if (window.YT) { + // If we have a Deferred object responsible for calling OnYouTubeIframeAPIReady + // callbacks, make sure that they have all been called by trying to resolve the + // Deferred object. Upon resolving, all the OnYouTubeIframeAPIReady will be + // called. If the object has been already resolved, the callbacks will not + // be called a second time. + if (_youtubeApiDeferred) { + _youtubeApiDeferred.resolve(); + } + + window.YT.ready(onYTApiReady); + } else { + // There is only one global letiable window.onYouTubeIframeAPIReady which + // is supposed to be a function that will be called by the YouTube API + // when it finished initializing. This function will update this global function + // so that it resolves our Deferred object, which will call all of the + // OnYouTubeIframeAPIReady callbacks. + // + // If this global function is already defined, we store it first, and make + // sure that it gets executed when our Deferred object is resolved. + setupOnYouTubeIframeAPIReady = function () { + _oldOnYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady || undefined; + + window.onYouTubeIframeAPIReady = function () { + _youtubeApiDeferred.resolve(); + }; + + window.onYouTubeIframeAPIReady.done = _youtubeApiDeferred.done; + + if (_oldOnYouTubeIframeAPIReady) { + window.onYouTubeIframeAPIReady.done(_oldOnYouTubeIframeAPIReady); + } + }; + + // If a Deferred object hasn't been created yet, create one now. It will + // be responsible for calling OnYouTubeIframeAPIReady callbacks once the + // YouTube API loads. After creating the Deferred object, load the YouTube + // API. + if (!_youtubeApiDeferred) { + _youtubeApiDeferred = $.Deferred(); + setupOnYouTubeIframeAPIReady(); + } else if (!window.onYouTubeIframeAPIReady || !window.onYouTubeIframeAPIReady.done) { + // The Deferred object could have been already defined in a previous + // initialization of the video module. However, since then the global letiable + // window.onYouTubeIframeAPIReady could have been overwritten. If so, + // we should set it up again. + setupOnYouTubeIframeAPIReady(); + } + + // Attach a callback to our Deferred object to be called once the + // YouTube API loads. + window.onYouTubeIframeAPIReady.done(function () { + window.YT.ready(onYTApiReady); + }); + } + } else { + video = VideoPlayer(state); + + state.modules.push(video); + state.__dfd__.resolve(); + state.htmlPlayerLoaded = true; + } +} + +function _waitForYoutubeApi(state) { + console.log('[Video info]: Starting to wait for YouTube API to load.'); + window.setTimeout(function () { + // If YouTube API will load OK, it will run `onYouTubeIframeAPIReady` + // callback, which will set `state.youtubeApiAvailable` to `true`. + // If something goes wrong at this stage, `state.youtubeApiAvailable` is + // `false`. + if (!state.youtubeApiAvailable) { + console.log('[Video info]: YouTube API is not available.'); + if (!state.htmlPlayerLoaded) { + state.loadHtmlPlayer(); + } + } + state.el.trigger('youtube_availability', [state.youtubeApiAvailable]); + }, state.config.ytTestTimeout); +} + +function loadYouTubeIFrameAPI(scriptTag) { + let firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag); +} + +// function _parseYouTubeIDs(state) +// The function parse YouTube stream ID's. +// @return +// false: We don't have YouTube video IDs to work with; most likely +// we have HTML5 video sources. +// true: Parsing of YouTube video IDs went OK, and we can proceed +// onwards to play YouTube videos. +function _parseYouTubeIDs(state) { + if (state.parseYoutubeStreams(state.config.streams)) { + state.videoType = 'youtube'; + + return true; + } + + console.log( + '[Video info]: Youtube Video IDs are incorrect or absent.' + ); + + return false; +} + +/** +* Extract HLS video URLs from available video URLs. +* +* @param {object} state The object contaning the state (properties, methods, modules) of the Video player. +* @returns Array of available HLS video source urls. +*/ +function extractHLSVideoSources(state) { + return _.filter(state.config.sources, function (source) { + return /\.m3u8(\?.*)?$/.test(source); + }); +} + +// function _prepareHTML5Video(state) +// The function prepare HTML5 video, parse HTML5 +// video sources etc. +function _prepareHTML5Video(state) { + state.speeds = ['0.75', '1.0', '1.25', '1.50', '2.0']; + // If none of the supported video formats can be played and there is no + // short-hand video links, than hide the spinner and show error message. + if (!state.config.sources.length) { + _hideWaitPlaceholder(state); + state.el + .find('.video-player div') + .addClass('hidden'); + state.el + .find('.video-player .video-error') + .removeClass('is-hidden'); + + return false; + } + + state.videoType = 'html5'; + + if (!_.keys(state.config.transcriptLanguages).length) { + state.config.showCaptions = false; + } + state.setSpeed(state.speed); + + return true; +} + +function _hideWaitPlaceholder(state) { + state.el + .addClass('is-initialized') + .find('.spinner') + .attr({ + 'aria-hidden': 'true', + tabindex: -1 + }); +} + +function _setConfigurations(state) { + state.setPlayerMode(state.config.mode); + // Possible value are: 'visible', 'hiding', and 'invisible'. + state.controlState = 'visible'; + state.controlHideTimeout = null; + state.captionState = 'invisible'; + state.captionHideTimeout = null; + state.HLSVideoSources = extractHLSVideoSources(state); +} + +// eslint-disable-next-line no-shadow +function _initializeModules(state, i18n) { + let dfd = $.Deferred(), + modulesList = $.map(state.modules, function (module) { + let options = state.options[module.moduleName] || {}; + if (_.isFunction(module)) { + return module(state, i18n, options); + } else if ($.isPlainObject(module)) { + return module; + } + }); + + $.when.apply(null, modulesList) + .done(dfd.resolve); + + return dfd.promise(); +} + +function _getConfiguration(data, storage) { + let isBoolean = function (value) { + let regExp = /^true$/i; + return regExp.test(value.toString()); + }, + // List of keys that will be extracted form the configuration. + extractKeys = [], + // Compatibility keys used to change names of some parameters in + // the final configuration. + compatKeys = { + start: 'startTime', + end: 'endTime' + }, + // Conversions used to pre-process some configuration data. + conversions = { + showCaptions: isBoolean, + autoplay: isBoolean, + autohideHtml5: isBoolean, + autoAdvance: function (value) { + let shouldAutoAdvance = storage.getItem('auto_advance'); + if (_.isUndefined(shouldAutoAdvance)) { + return isBoolean(value) || false; + } else { + return shouldAutoAdvance; + } + }, + savedVideoPosition: function (value) { + return storage.getItem('savedVideoPosition', true) + || Number(value) + || 0; + }, + speed: function (value) { + return storage.getItem('speed', true) || value; + }, + generalSpeed: function (value) { + return storage.getItem('general_speed') + || value + || '1.0'; + }, + transcriptLanguage: function (value) { + return storage.getItem('language') + || value + || 'en'; + }, + ytTestTimeout: function (value) { + value = parseInt(value, 10); + + if (!isFinite(value)) { + value = 1500; + } + + return value; + }, + startTime: function (value) { + value = parseInt(value, 10); + if (!isFinite(value) || value < 0) { + return 0; + } + + return value; + }, + endTime: function (value) { + value = parseInt(value, 10); + + if (!isFinite(value) || value === 0) { + return null; + } + + return value; + } + }, + config = {}; + + data = _.extend({ + startTime: 0, + endTime: null, + sub: '', + streams: '' + }, data); + + $.each(data, function (option, value) { + // Extract option that is in `extractKeys`. + if ($.inArray(option, extractKeys) !== -1) { + return; + } + + // Change option name to key that is in `compatKeys`. + if (compatKeys[option]) { + option = compatKeys[option]; + } + + // Pre-process data. + if (conversions[option]) { + if (_.isFunction(conversions[option])) { + value = conversions[option].call(this, value); + } else { + throw new TypeError(option + ' is not a function.'); + } + } + config[option] = value; + }); + + return config; +} + +// *************************************************************** +// Public functions start here. +// These are available via the 'state' object. Their context ('this' +// keyword) is the 'state' object. The magic private function that makes +// them available and sets up their context is makeFunctionsPublic(). +// *************************************************************** + +// function bindTo(methodsDict, obj, context, rewrite) +// Creates a new function with specific context and assigns it to the provided +// object. +// eslint-disable-next-line no-shadow +function bindTo(methodsDict, obj, context, rewrite) { + $.each(methodsDict, function (name, method) { + if (_.isFunction(method)) { + if (_.isUndefined(rewrite)) { + rewrite = true; + } + + if (_.isUndefined(obj[name]) || rewrite) { + obj[name] = _.bind(method, context); + } + } + }); +} + +function loadYoutubePlayer() { + if (this.htmlPlayerLoaded) { return; } + + console.log( + '[Video info]: Fetch metadata for YouTube video.' + ); + + this.fetchMetadata(); + this.parseSpeed(); +} + +function loadHtmlPlayer() { + // When the youtube link doesn't work for any reason + // (for example, firewall) any + // alternate sources should automatically play. + if (!_prepareHTML5Video(this)) { + console.log( + '[Video info]: Continue loading ' + + 'YouTube video.' + ); + + // Non-YouTube sources were not found either. + + this.el.find('.video-player div') + .removeClass('hidden'); + this.el.find('.video-player .video-error') + .addClass('is-hidden'); + + // If in reality the timeout was to short, try to + // continue loading the YouTube video anyways. + this.loadYoutubePlayer(); + } else { + console.log( + '[Video info]: Start HTML5 player.' + ); + + // In-browser HTML5 player does not support quality + // control. + this.el.find('.quality_control').hide(); + _renderElements(this); + } +} + +// function initialize(element) +// The function set initial configuration and preparation. + +function initialize(element) { + let self = this, + el = this.el, + id = this.id, + container = el.find('.video-wrapper'), + __dfd__ = $.Deferred(), + isTouch = onTouchBasedDevice() || ''; + + if (isTouch) { + el.addClass('is-touch'); + } + + $.extend(this, { + __dfd__: __dfd__, + container: container, + isFullScreen: false, + isTouch: isTouch + }); + + console.log('[Video info]: Initializing video with id "%s".', id); + + // We store all settings passed to us by the server in one place. These + // are "read only", so don't modify them. All letiable content lives in + // 'state' object. + // jQuery .data() return object with keys in lower camelCase format. + this.config = $.extend({}, _getConfiguration(this.metadata, this.storage), { + element: element, + fadeOutTimeout: 1400, + captionsFreezeTime: 10000, + mode: $.cookie('edX_video_player_mode'), + // Available HD qualities will only be accessible once the video has + // been played once, via player.getAvailableQualityLevels. + availableHDQualities: [] + }); + + if (this.config.endTime < this.config.startTime) { + this.config.endTime = null; + } + + this.lang = this.config.transcriptLanguage; + this.speed = this.speedToString( + this.config.speed || this.config.generalSpeed + ); + this.auto_advance = this.config.autoAdvance; + this.htmlPlayerLoaded = false; + this.duration = this.metadata.duration; + + _setConfigurations(this); + + // If `prioritizeHls` is set to true than `hls` is the primary playback + if (this.config.prioritizeHls || !(_parseYouTubeIDs(this))) { + // If we do not have YouTube ID's, try parsing HTML5 video sources. + if (!_prepareHTML5Video(this)) { + __dfd__.reject(); + // Non-YouTube sources were not found either. + return __dfd__.promise(); + } + + console.log('[Video info]: Start player in HTML5 mode.'); + _renderElements(this); + } else { + _renderElements(this); + + _waitForYoutubeApi(this); + + let scriptTag = document.createElement('script'); + + scriptTag.src = this.config.ytApiUrl; + scriptTag.async = true; + + $(scriptTag).on('load', function () { + self.loadYoutubePlayer(); + }); + $(scriptTag).on('error', function () { + console.log( + '[Video info]: YouTube returned an error for ' + + 'video with id "' + self.id + '".' + ); + // If the video is already loaded in `_waitForYoutubeApi` by the + // time we get here, then we shouldn't load it again. + if (!self.htmlPlayerLoaded) { + self.loadHtmlPlayer(); + } + }); + + window.Video.loadYouTubeIFrameAPI(scriptTag); + } + return __dfd__.promise(); +} + +// function parseYoutubeStreams(state, youtubeStreams) +// +// Take a string in the form: +// "iCawTYPtehk:0.75,KgpclqP-LBA:1.0,9-2670d5nvU:1.5" +// parse it, and make it available via the 'state' object. If we are +// not given a string, or it's length is zero, then we return false. +// +// @return +// false: We don't have YouTube video IDs to work with; most likely +// we have HTML5 video sources. +// true: Parsing of YouTube video IDs went OK, and we can proceed +// onwards to play YouTube videos. +function parseYoutubeStreams(youtubeStreams) { + if (_.isUndefined(youtubeStreams) || !youtubeStreams.length) { + return false; + } + + this.videos = {}; + + _.each(youtubeStreams.split(/,/), function (video) { + let speed; + video = video.split(/:/); + speed = this.speedToString(video[0]); + this.videos[speed] = video[1]; + }, this); + + return _.isString(this.videos['1.0']); +} + +// function fetchMetadata() +// +// When dealing with YouTube videos, we must fetch meta data that has +// certain key facts not available while the video is loading. For +// example the length of the video can be determined from the meta +// data. +function fetchMetadata() { + let self = this, + metadataXHRs = []; + + this.metadata = {}; + + metadataXHRs = _.map(this.videos, function (url, speed) { + return self.getVideoMetadata(url, function (data) { + if (data.items.length > 0) { + let metaDataItem = data.items[0]; + self.metadata[metaDataItem.id] = metaDataItem.contentDetails; + } + }); + }); + + $.when.apply(this, metadataXHRs).done(function () { + self.el.trigger('metadata_received'); + + // Not only do we trigger the "metadata_received" event, we also + // set a flag to notify that metadata has been received. This + // allows for code that will miss the "metadata_received" event + // to know that metadata has been received. This is important in + // cases when some code will subscribe to the "metadata_received" + // event after it has been triggered. + self.youtubeMetadataReceived = true; + }); +} + +// function parseSpeed() +// +// Create a separate array of available speeds. +function parseSpeed() { + this.speeds = _.keys(this.videos).sort(); +} + +function setSpeed(newSpeed) { + // Possible speeds for each player type. + // HTML5 = [0.75, 1, 1.25, 1.5, 2] + // Youtube Flash = [0.75, 1, 1.25, 1.5] + // Youtube HTML5 = [0.25, 0.5, 1, 1.5, 2] + let map = { + 0.25: '0.75', // Youtube HTML5 -> HTML5 or Youtube Flash + '0.50': '0.75', // Youtube HTML5 -> HTML5 or Youtube Flash + 0.75: '0.50', // HTML5 or Youtube Flash -> Youtube HTML5 + 1.25: '1.50', // HTML5 or Youtube Flash -> Youtube HTML5 + 2.0: '1.50' // HTML5 or Youtube HTML5 -> Youtube Flash + }; + + if (_.contains(this.speeds, newSpeed)) { + this.speed = newSpeed; + } else { + newSpeed = map[newSpeed]; + this.speed = _.contains(this.speeds, newSpeed) ? newSpeed : '1.0'; + } + this.speed = parseFloat(this.speed); +} + +function setAutoAdvance(enabled) { + this.auto_advance = enabled; +} + +function getVideoMetadata(url, callback) { + let youTubeEndpoint; + if (!(_.isString(url))) { + url = this.videos['1.0'] || ''; + } + // Will hit the API URL to get the youtube video metadata. + youTubeEndpoint = this.config.ytMetadataEndpoint; // The new runtime supports anonymous users + // and uses an XBlock handler to get YouTube metadata + if (!youTubeEndpoint) { + // The old runtime has a full/separate LMS API for getting YouTube metadata, but it doesn't + // support anonymous users nor videos that play in a sandboxed iframe. + youTubeEndpoint = [this.config.lmsRootURL, '/courses/yt_video_metadata', '?id=', url].join(''); + } + return $.ajax({ + url: youTubeEndpoint, + success: _.isFunction(callback) ? callback : null, + error: function () { + console.warn( + 'Unable to get youtube video metadata. Some video metadata may be unavailable.' + ); + }, + notifyOnError: false + }); +} + +function youtubeId(speed) { + let currentSpeed = this.isFlashMode() ? this.speed : '1.0'; + + return this.videos[speed] + || this.videos[currentSpeed] + || this.videos['1.0']; +} + +function getDuration() { + try { + return moment.duration(this.metadata[this.youtubeId()].duration, moment.ISO_8601).asSeconds(); + } catch (err) { + return _.result(this.metadata[this.youtubeId('1.0')], 'duration') || 0; + } +} + +/** +* Sets player mode. +* +* @param {string} mode Mode to set for the video player if it is supported. +* Otherwise, `html5` is used by default. +*/ +function setPlayerMode(mode) { + let supportedModes = ['html5', 'flash']; + + mode = _.contains(supportedModes, mode) ? mode : 'html5'; + this.currentPlayerMode = mode; +} + +/** +* Returns current player mode. +* +* @return {string} Returns string that describes player mode +*/ +function getPlayerMode() { + return this.currentPlayerMode; +} + +/** +* Checks if current player mode is Flash. +* +* @return {boolean} Returns `true` if current mode is `flash`, otherwise +* it returns `false` +*/ +function isFlashMode() { + return this.getPlayerMode() === 'flash'; +} + +/** +* Checks if current player mode is Html5. +* +* @return {boolean} Returns `true` if current mode is `html5`, otherwise +* it returns `false` +*/ +function isHtml5Mode() { + return this.getPlayerMode() === 'html5'; +} + +function isYoutubeType() { + return this.videoType === 'youtube'; +} + +function speedToString(speed) { + return parseFloat(speed).toFixed(2).replace(/\.00$/, '.0'); +} + +function getCurrentLanguage() { + let keys = _.keys(this.config.transcriptLanguages); + + if (keys.length) { + if (!_.contains(keys, this.lang)) { + if (_.contains(keys, 'en')) { + this.lang = 'en'; + } else { + this.lang = keys.pop(); + } + } + } else { + return null; + } + + return this.lang; +} + +/* +* The trigger() function will assume that the @objChain is a complete +* chain with a method (function) at the end. It will call this function. +* So for example, when trigger() is called like so: +* +* state.trigger('videoPlayer.pause', {'param1': 10}); +* +* Then trigger() will execute: +* +* state.videoPlayer.pause({'param1': 10}); +*/ +function trigger(objChain) { + let extraParameters = Array.prototype.slice.call(arguments, 1), + i, tmpObj, chain; + + // Remember that 'this' is the 'state' object. + tmpObj = this; + chain = objChain.split('.'); + + // At the end of the loop the letiable 'tmpObj' will either be the + // correct object/function to trigger/invoke. If the 'chain' chain of + // object is incorrect (one of the link is non-existent), then the loop + // will immediately exit. + while (chain.length) { + i = chain.shift(); + + if (tmpObj.hasOwnProperty(i)) { + tmpObj = tmpObj[i]; + } else { + // An incorrect object chain was specified. + + return false; + } + } + + tmpObj.apply(this, extraParameters); + + return true; +} +export { Initialize } \ No newline at end of file diff --git a/xmodule/assets/video/public/js/iterator.js b/xmodule/assets/video/public/js/iterator.js new file mode 100644 index 000000000000..59d2ba2bbfb5 --- /dev/null +++ b/xmodule/assets/video/public/js/iterator.js @@ -0,0 +1,78 @@ +'use strict'; + +/** + * Provides a convenient way to work with iterable data. + * @constructor + * @param {Array} list Array to be iterated. + */ +function Iterator(list) { + this.list = list; + this.index = 0; + this.size = this.list.length; + this.lastIndex = this.list.length - 1; +} + +Iterator.prototype = { + /** + * Checks validity of the provided index for the iterator. + * @param {number} index + * @return {boolean} + */ + _isValid(index) { + return _.isNumber(index) && index < this.size && index >= 0; + }, + + /** + * Returns the next element. + * @param {number} [index] Updates current position. + * @return {any} + */ + next(index) { + if (!this._isValid(index)) { + index = this.index; + } + + this.index = (index >= this.lastIndex) ? 0 : index + 1; + return this.list[this.index]; + }, + + /** + * Returns the previous element. + * @param {number} [index] Updates current position. + * @return {any} + */ + prev(index) { + if (!this._isValid(index)) { + index = this.index; + } + + this.index = (index < 1) ? this.lastIndex : index - 1; + return this.list[this.index]; + }, + + /** + * Returns the last element in the list. + * @return {any} + */ + last() { + return this.list[this.lastIndex]; + }, + + /** + * Returns the first element in the list. + * @return {any} + */ + first() { + return this.list[0]; + }, + + /** + * Returns `true` if the current position is the last for the iterator. + * @return {boolean} + */ + isEnd() { + return this.index === this.lastIndex; + } +}; + +export { Iterator }; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/play_pause_control.js b/xmodule/assets/video/public/js/play_pause_control.js new file mode 100644 index 000000000000..c2b2bdb2aa0e --- /dev/null +++ b/xmodule/assets/video/public/js/play_pause_control.js @@ -0,0 +1,95 @@ +import $ from 'jquery'; // jQuery import +import _ from 'underscore'; + +'use strict'; + +/** + * PlayPauseControl function + * + * @constructor + * @param {Object} state - The object containing the state of the video + * @param {Object} i18n - The object containing strings with translations + * @return {jQuery.Promise} - A resolved jQuery promise + */ +function VideoPlayPauseControl(state, i18n) { + if (!(this instanceof VideoPlayPauseControl)) { + return new VideoPlayPauseControl(state, i18n); + } + + _.bindAll(this, 'play', 'pause', 'onClick', 'destroy'); + this.state = state; + this.state.videoPlayPauseControl = this; + this.i18n = i18n; + + this.initialize(); + + return $.Deferred().resolve().promise(); +} + +VideoPlayPauseControl.prototype = { + template: [ + '', + ].join(''), + + /** Initializes the module. */ + initialize: function () { + this.el = $(this.template); + this.render(); + this.bindHandlers(); + }, + + /** + * Creates any necessary DOM elements, attach them, and set their, + * initial configuration. + */ + render: function () { + this.state.el.find('.vcr').prepend(this.el); + }, + + /** Bind any necessary function callbacks to DOM events. */ + bindHandlers: function () { + this.el.on('click', this.onClick); + this.state.el.on({ + play: this.play, + 'pause ended': this.pause, + destroy: this.destroy, + }); + }, + + onClick: function (event) { + event.preventDefault(); + this.state.videoCommands.execute('togglePlayback'); + }, + + play: function () { + this.el + .addClass('pause') + .removeClass('play') + .attr({title: gettext('Pause'), 'aria-label': gettext('Pause')}) + .find('.icon') + .removeClass('fa-play') + .addClass('fa-pause'); + }, + + pause: function () { + this.el + .removeClass('pause') + .addClass('play') + .attr({title: gettext('Play'), 'aria-label': gettext('Play')}) + .find('.icon') + .removeClass('fa-pause') + .addClass('fa-play'); + }, + + destroy: function () { + this.el.remove(); + this.state.el.off('destroy', this.destroy); + delete this.state.videoPlayPauseControl; + }, +}; + +export {VideoPlayPauseControl}; diff --git a/xmodule/assets/video/public/js/play_placeholder.js b/xmodule/assets/video/public/js/play_placeholder.js new file mode 100644 index 000000000000..d3d7384573bb --- /dev/null +++ b/xmodule/assets/video/public/js/play_placeholder.js @@ -0,0 +1,87 @@ +import $ from 'jquery'; // jQuery import +import _ from 'underscore'; + +'use strict'; + +/** + * Video Play placeholder control function. + * + * @constructor + * @param {Object} state - The object containing the state of the video + * @param {Object} i18n - The object containing strings with translations + * @return {jQuery.Promise} - A resolved jQuery promise + */ +function VideoPlayPlaceholder(state, i18n) { + if (!(this instanceof VideoPlayPlaceholder)) { + return new VideoPlayPlaceholder(state, i18n); + } + + _.bindAll(this, 'onClick', 'hide', 'show', 'destroy'); + this.state = state; + this.state.videoPlayPlaceholder = this; + this.i18n = i18n; + this.initialize(); + + return $.Deferred().resolve().promise(); +} + +VideoPlayPlaceholder.prototype = { + destroy: function () { + this.el.off('click', this.onClick); + this.state.el.off({ + destroy: this.destroy, + play: this.hide, + 'ended pause': this.show, + }); + this.hide(); + delete this.state.videoPlayPlaceholder; + }, + + /** + * Indicates whether the placeholder should be shown. + * We display it for HTML5 videos on iPad and Android devices. + * @return {Boolean} + */ + shouldBeShown: function () { + return /iPad|Android/i.test(this.state.isTouch[0]) && !this.state.isYoutubeType(); + }, + + /** Initializes the module. */ + initialize: function () { + if (!this.shouldBeShown()) { + return false; + } + + this.el = this.state.el.find('.btn-play'); + this.bindHandlers(); + this.show(); + }, + + /** Bind any necessary function callbacks to DOM events. */ + bindHandlers: function () { + this.el.on('click', this.onClick); + this.state.el.on({ + destroy: this.destroy, + play: this.hide, + 'ended pause': this.show, + }); + }, + + onClick: function () { + this.state.videoCommands.execute('play'); + }, + + hide: function () { + this.el + .addClass('is-hidden') + .attr({'aria-hidden': 'true', tabindex: -1}); + }, + + show: function () { + this.el + .removeClass('is-hidden') + .attr({'aria-hidden': 'false', tabindex: 0}); + } +}; + +export {VideoPlayPlaceholder}; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/play_skip_control.js b/xmodule/assets/video/public/js/play_skip_control.js new file mode 100644 index 000000000000..3be7d8b05398 --- /dev/null +++ b/xmodule/assets/video/public/js/play_skip_control.js @@ -0,0 +1,90 @@ +import $ from 'jquery'; // jQuery import +import _ from 'underscore'; + +'use strict'; + +/** + * Play/skip control module + * + * @constructor + * @param {Object} state - The object containing the state of the video + * @param {Object} i18n - The object containing strings with translations + * @return {jQuery.Promise} - A resolved jQuery promise + */ +function VideoPlaySkipControl(state, i18n) { + if (!(this instanceof VideoPlaySkipControl)) { + return new VideoPlaySkipControl(state, i18n); + } + + _.bindAll(this, 'play', 'onClick', 'destroy'); + this.state = state; + this.state.videoPlaySkipControl = this; + this.i18n = i18n; + + this.initialize(); + + return $.Deferred().resolve().promise(); +} + +VideoPlaySkipControl.prototype = { + template: [ + '', + ].join(''), + + /** Initializes the module. */ + initialize: function () { + this.el = $(this.template); + this.render(); + this.bindHandlers(); + }, + + /** + * Creates any necessary DOM elements, attach them, and set their, + * initial configuration. + */ + render: function () { + this.state.el.find('.vcr').prepend(this.el); + }, + + /** Bind any necessary function callbacks to DOM events. */ + bindHandlers: function () { + this.el.on('click', this.onClick); + this.state.el.on({ + play: this.play, + destroy: this.destroy, + }); + }, + + onClick: function (event) { + event.preventDefault(); + if (this.state.videoPlayer.isPlaying()) { + this.state.videoCommands.execute('skip'); + } else { + this.state.videoCommands.execute('play'); + } + }, + + play: function () { + this.el + .removeClass('play') + .addClass('skip') + .attr('title', gettext('Skip')) + .find('.icon') + .removeClass('fa-play') + .addClass('fa-step-forward'); + // Disable possibility to pause the video. + this.state.el.find('video').off('click'); + }, + + destroy: function () { + this.el.remove(); + this.state.el.off('destroy', this.destroy); + delete this.state.videoPlaySkipControl; + }, +}; + +export {VideoPlaySkipControl}; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/poster.js b/xmodule/assets/video/public/js/poster.js new file mode 100644 index 000000000000..ef059b81fa08 --- /dev/null +++ b/xmodule/assets/video/public/js/poster.js @@ -0,0 +1,69 @@ +import $ from 'jquery'; // jQuery import +import _ from 'underscore'; + +'use strict'; + +/** + * VideoPoster function + * + * @constructor + * @param {jQuery} element + * @param {Object} options + */ +function VideoPoster(element, options) { + if (!(this instanceof VideoPoster)) { + return new VideoPoster(element, options); + } + + _.bindAll(this, 'onClick', 'destroy'); + this.element = element; + this.container = element.find('.video-player'); + this.options = options || {}; + this.initialize(); +} + +VideoPoster.moduleName = 'Poster'; +VideoPoster.prototype = { + template: _.template([ + '
', + '', + '
' + ].join('')), + + initialize: function () { + this.el = $(this.template({ + url: this.options.poster.url, + type: this.options.poster.type + })); + this.element.addClass('is-pre-roll'); + this.render(); + this.bindHandlers(); + }, + + bindHandlers: function () { + this.el.on('click', this.onClick); + this.element.on('destroy', this.destroy); + }, + + render: function () { + this.container.append(this.el); + }, + + onClick: function () { + if (_.isFunction(this.options.onClick)) { + this.options.onClick(); + } + this.destroy(); + }, + + destroy: function () { + this.element.off('destroy', this.destroy).removeClass('is-pre-roll'); + this.el.remove(); + }, +}; + +export {VideoPoster}; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/resizer.js b/xmodule/assets/video/public/js/resizer.js new file mode 100644 index 000000000000..bd1382be16e1 --- /dev/null +++ b/xmodule/assets/video/public/js/resizer.js @@ -0,0 +1,191 @@ +import _ from 'underscore'; + +class Resizer { + constructor(params) { + const defaults = { + container: window, + element: null, + containerRatio: null, + elementRatio: null + }; + this.callbacksList = []; + this.delta = { + height: 0, + width: 0 + }; + this.mode = null; + this.config = { ...defaults, ...params }; + + if (!this.config.element) { + console.log('Required parameter `element` is not passed.'); + } + + this.callbacks = { + add: this.addCallback.bind(this), + once: this.addOnceCallback.bind(this), + remove: this.removeCallback.bind(this), + removeAll: this.removeCallbacks.bind(this) + }; + this.deltaApi = { + add: this.addDelta.bind(this), + substract: this.substractDelta.bind(this), + reset: this.resetDelta.bind(this) + }; + } + + getData() { + const $container = this.config.container instanceof Window ? this.config.container : this.config.container; + const containerWidth = ($container === window ? $container.innerWidth : $container.offsetWidth) + this.delta.width; + const containerHeight = ($container === window ? $container.innerHeight : $container.offsetHeight) + this.delta.height; + let containerRatio = this.config.containerRatio; + + const $element = this.config.element; + let elementRatio = this.config.elementRatio; + + if (!containerRatio) { + containerRatio = containerWidth / containerHeight; + } + + if (!elementRatio && $element) { + elementRatio = $element.offsetWidth / $element.offsetHeight; + } + + return { + containerWidth, + containerHeight, + containerRatio, + element: $element, + elementRatio + }; + } + + align() { + const data = this.getData(); + + switch (this.mode) { + case 'height': + this.alignByHeightOnly(data); + break; + case 'width': + this.alignByWidthOnly(data); + break; + default: + if (data.containerRatio >= data.elementRatio) { + this.alignByHeightOnly(data); + } else { + this.alignByWidthOnly(data); + } + break; + } + + this.fireCallbacks(); + return this; + } + + alignByWidthOnly(data = this.getData()) { + if (!data.element) return this; + const height = data.containerWidth / data.elementRatio; + data.element.style.height = `${height}px`; + data.element.style.width = `${data.containerWidth}px`; + data.element.style.top = `${0.5 * (data.containerHeight - height)}px`; + data.element.style.left = '0px'; + return this; + } + + alignByHeightOnly(data = this.getData()) { + if (!data.element) return this; + const width = data.containerHeight * data.elementRatio; + data.element.style.height = `${data.containerHeight}px`; + data.element.style.width = `${width}px`; + data.element.style.top = '0px'; + data.element.style.left = `${0.5 * (data.containerWidth - width)}px`; + return this; + } + + setMode(param) { + if (_.isString(param)) { + this.mode = param; + this.align(); + } + return this; + } + + setElement(element) { + this.config.element = element; + return this; + } + + addCallback(func) { + if (_.isFunction(func)) { + this.callbacksList.push(func); + } else { + console.error('[Video info]: TypeError: Argument is not a function.'); + } + return this; + } + + addOnceCallback(func) { + if (_.isFunction(func)) { + const decorator = () => { + func(); + this.removeCallback(func); + }; + this.addCallback(decorator); + } else { + console.error('TypeError: Argument is not a function.'); + } + return this; + } + + fireCallbacks() { + this.callbacksList.forEach(callback => callback()); + } + + removeCallbacks() { + this.callbacksList.length = 0; + return this; + } + + removeCallback(func) { + const index = this.callbacksList.indexOf(func); + if (index !== -1) { + return this.callbacksList.splice(index, 1); + } + return undefined; + } + + resetDelta() { + this.delta.height = 0; + this.delta.width = 0; + return this; + } + + addDelta(value, side) { + if (_.isNumber(value) && _.isNumber(this.delta[side])) { + this.delta[side] += value; + } + return this; + } + + substractDelta(value, side) { + if (_.isNumber(value) && _.isNumber(this.delta[side])) { + this.delta[side] -= value; + } + return this; + } + + destroy() { + const data = this.getData(); + if (data.element) { + data.element.style.height = ''; + data.element.style.width = ''; + data.element.style.top = ''; + data.element.style.left = ''; + } + this.removeCallbacks(); + this.resetDelta(); + this.mode = null; + } +} + +export { Resizer }; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/save_state_plugin.js b/xmodule/assets/video/public/js/save_state_plugin.js new file mode 100644 index 000000000000..524699fd923b --- /dev/null +++ b/xmodule/assets/video/public/js/save_state_plugin.js @@ -0,0 +1,189 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Time from 'time.js'; + +'use strict'; + +/** + * Save state module. + * + * @constructor + * @param {Object} state - The object containing the state of the video + * @param {Object} i18n - The object containing strings with translations + * @param {Object} options - Options (e.g., events to handle) + * @return {jQuery.Promise} - A resolved jQuery promise + */ +function VideoSaveStatePlugin(state, i18n, options) { + if (!(this instanceof VideoSaveStatePlugin)) { + return new VideoSaveStatePlugin(state, i18n, options); + } + + _.bindAll( + this, + 'onSpeedChange', + 'onAutoAdvanceChange', + 'saveStateHandler', + 'bindUnloadHandler', + 'onUnload', + 'onYoutubeAvailability', + 'onLanguageChange', + 'destroy' + ); + + this.state = state; + this.options = _.extend({events: []}, options); + this.state.videoSaveStatePlugin = this; + this.i18n = i18n; + this.initialize(); + + return $.Deferred().resolve().promise(); +} + +VideoSaveStatePlugin.moduleName = 'SaveStatePlugin'; +VideoSaveStatePlugin.prototype = { + /** + * Initializes the save state plugin and binds required handlers + */ + initialize: function () { + this.events = { + speedchange: this.onSpeedChange, + autoadvancechange: this.onAutoAdvanceChange, + play: this.bindUnloadHandler, + 'pause destroy': this.saveStateHandler, + 'language_menu:change': this.onLanguageChange, + youtube_availability: this.onYoutubeAvailability, + }; + this.bindHandlers(); + }, + + /** + * Binds the appropriate event handlers to the state element or user-provided events + */ + bindHandlers: function () { + if (this.options.events.length) { + _.each( + this.options.events, + function (eventName) { + if (_.has(this.events, eventName)) { + const callback = this.events[eventName]; + this.state.el.on(eventName, callback); + } + }, + this + ); + } else { + this.state.el.on(this.events); + } + this.state.el.on('destroy', this.destroy); + }, + + /** + * Binds the unload event handler once + */ + bindUnloadHandler: _.once(function () { + $(window).on('unload.video', this.onUnload); + }), + + /** + * Cleans up the plugin by removing event handlers and deleting the instance + */ + destroy: function () { + this.state.el.off(this.events).off('destroy', this.destroy); + $(window).off('unload.video', this.onUnload); + delete this.state.videoSaveStatePlugin; + }, + + /** + * Handles speed change events + * + * @param {Event} event - The event object + * @param {number} newSpeed - The new playback speed + */ + onSpeedChange: function (event, newSpeed) { + this.saveState(true, {speed: newSpeed}); + this.state.storage.setItem('speed', newSpeed, true); + this.state.storage.setItem('general_speed', newSpeed); + }, + + /** + * Handles auto-advance toggle events + * + * @param {Event} event - The event object + * @param {boolean} enabled - Whether auto-advance is enabled + */ + onAutoAdvanceChange: function (event, enabled) { + this.saveState(true, {auto_advance: enabled}); + this.state.storage.setItem('auto_advance', enabled); + }, + + /** + * Saves the state when triggered directly by an event + */ + saveStateHandler: function () { + this.saveState(true); + }, + + /** + * Saves the state during a `window.unload` event + */ + onUnload: function () { + this.saveState(); + }, + + /** + * Handles language change events + * + * @param {Event} event - The event object + * @param {string} langCode - The new language code + */ + onLanguageChange: function (event, langCode) { + this.state.storage.setItem('language', langCode); + }, + + /** + * Handles YouTube availability changes + * + * @param {Event} event - The event object + * @param {boolean} youtubeIsAvailable - Whether YouTube is available + */ + onYoutubeAvailability: function (event, youtubeIsAvailable) { + if (youtubeIsAvailable !== this.state.config.recordedYoutubeIsAvailable) { + this.saveState(true, {youtube_is_available: youtubeIsAvailable}); + } + }, + + /** + * Saves the current state of the video + * + * @param {boolean} async - Whether to save asynchronously + * @param {Object} [additionalData] - Additional data to save + */ + saveState: function (async, data) { + if (this.state.config.saveStateEnabled) { + if (!($.isPlainObject(data))) { + data = { + saved_video_position: this.state.videoPlayer.currentTime + }; + } + + if (data.speed) { + this.state.storage.setItem('speed', data.speed, true); + } + + if (_.has(data, 'saved_video_position')) { + this.state.storage.setItem('savedVideoPosition', data.saved_video_position, true); + data.saved_video_position = Time.formatFull(data.saved_video_position); + } + + $.ajax({ + url: this.state.config.saveStateUrl, + type: 'POST', + async: !!async, + dataType: 'json', + data: data + }); + } + }, +}; + +export {VideoSaveStatePlugin}; diff --git a/xmodule/assets/video/public/js/sjson.js b/xmodule/assets/video/public/js/sjson.js new file mode 100644 index 000000000000..d1cbf6c90ade --- /dev/null +++ b/xmodule/assets/video/public/js/sjson.js @@ -0,0 +1,137 @@ +import _ from 'underscore'; + +/** + * Creates an object to manage subtitle data. + * + * @param {object} data An object containing subtitle information with `start` (array of start times) and `text` (array of captions). + * @returns {object} An object with methods to access and manipulate subtitle data. + */ +const Sjson = function (data) { + 'use strict'; + + const sjson = { + start: Array.isArray(data.start) ? [...data.start] : [], + text: Array.isArray(data.text) ? [...data.text] : [] + }; + + /** + * Creates a getter function for a specified property of the `sjson` object. + * + * @param {string} propertyName The name of the property to access ('start' or 'text'). + * @returns {function(): Array} A function that returns a copy of the specified array. + */ + const getter = function (propertyName) { + return function () { + return [...sjson[propertyName]]; + }; + }; + + /** + * Returns a copy of the array of start times. + * + * @returns {Array} An array of subtitle start times in seconds. + */ + const getStartTimes = getter('start'); + + /** + * Returns a copy of the array of captions. + * + * @returns {Array} An array of subtitle text. + */ + const getCaptions = getter('text'); + + /** + * Returns the number of captions available. + * + * @returns {number} The total number of captions. + */ + const size = function () { + return sjson.text.length; + }; + + /** + * Searches for the index of the caption that should be displayed at a given time. + * + * @param {number} time The time (in seconds) to search for. + * @param {number} [startTime] An optional start time (in seconds) to filter the search within. + * @param {number} [endTime] An optional end time (in seconds) to filter the search within. + * @returns {number} The index of the caption to display at the given time, or the index of the last caption if the time is beyond the last start time. Returns 0 if no captions are available. + */ + function search(time, startTime, endTime) { + let start = getStartTimes(); + let max = size() - 1; + let min = 0; + let searchResults; + let index; + + if (typeof startTime !== 'undefined' && typeof endTime !== 'undefined') { + searchResults = filter(startTime, endTime); + start = searchResults.start; + max = searchResults.captions.length - 1; + } + + if (start.length === 0) { + return 0; + } + + while (min < max) { + index = Math.ceil((max + min) / 2); + + if (time < start[index]) { + max = index - 1; + } + + if (time >= start[index]) { + min = index; + } + } + + return min; + } + + /** + * Filters captions that occur between a given start and end time. + * + * @param {number} start The start time (in seconds) for filtering. + * @param {number} end The end time (in seconds) for filtering. + * @returns {object} An object with `start` (array of filtered start times) and `captions` (array of corresponding filtered captions). + */ + function filter(start, end) { + const filteredTimes = []; + const filteredCaptions = []; + const startTimes = getStartTimes(); + const captions = getCaptions(); + + if (startTimes.length !== captions.length) { + console.warn('video caption and start time arrays do not match in length'); + } + + let effectiveEnd = end; + if (effectiveEnd === null && startTimes.length) { + effectiveEnd = startTimes[startTimes.length - 1]; + } + + for (let i = 0; i < startTimes.length; i++) { + const currentStartTime = startTimes[i]; + if (currentStartTime >= start && currentStartTime <= effectiveEnd) { + filteredTimes.push(currentStartTime); + filteredCaptions.push(captions[i]); + } + } + + return { + start: filteredTimes, + captions: filteredCaptions + }; + } + + return { + getCaptions, + getStartTimes, + getSize: size, + filter, + search + }; +}; + +export { Sjson }; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/skip_control.js b/xmodule/assets/video/public/js/skip_control.js new file mode 100644 index 000000000000..326c8e8fbb64 --- /dev/null +++ b/xmodule/assets/video/public/js/skip_control.js @@ -0,0 +1,70 @@ +import $ from 'jquery'; // jQuery import +import _ from 'underscore'; + +'use strict'; + +/** + * VideoSkipControl function + * + * @constructor + * @param {Object} state The object containing the state of the video + * @param {Object} i18n The object containing strings with translations + * @return {jQuery.Promise} Returns a resolved jQuery promise + */ +function VideoSkipControl(state, i18n) { + if (!(this instanceof VideoSkipControl)) { + return new VideoSkipControl(state, i18n); + } + + _.bindAll(this, 'onClick', 'render', 'destroy'); + this.state = state; + this.state.videoSkipControl = this; + this.i18n = i18n; + + this.initialize(); + + return $.Deferred().resolve().promise(); +} + +VideoSkipControl.prototype = { + template: [ + '', + ].join(''), + + initialize: function () { + this.el = $(this.template); + this.bindHandlers(); + }, + + /** Creates any necessary DOM elements, attach them, and set their, initial configuration. */ + render: function () { + this.state.el.find('.vcr .control').after(this.el); + }, + + /** Bind any necessary function callbacks to DOM events. */ + bindHandlers: function () { + this.el.on('click', this.onClick); + + this.state.el.on({ + 'play.skip': _.once(this.render), + 'destroy.skip': this.destroy, + }); + }, + + onClick: function (event) { + event.preventDefault(); + this.state.videoCommands.execute('skip', true); + }, + + destroy: function () { + this.el.remove(); + this.state.el.off('.skip'); + delete this.state.videoSkipControl; + }, +}; + +export {VideoSkipControl}; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/time.js b/xmodule/assets/video/public/js/time.js new file mode 100644 index 000000000000..e9c96571874d --- /dev/null +++ b/xmodule/assets/video/public/js/time.js @@ -0,0 +1,43 @@ +// eslint-disable-next-line no-shadow +function format(time, formatFull) { + var hours, minutes, seconds; + + if (!_.isFinite(time) || time < 0) { + time = 0; + } + + seconds = Math.floor(time); + minutes = Math.floor(seconds / 60); + hours = Math.floor(minutes / 60); + seconds %= 60; + minutes %= 60; + + if (formatFull) { + return '' + _pad(hours) + ':' + _pad(minutes) + ':' + _pad(seconds % 60); + } else if (hours) { + return '' + hours + ':' + _pad(minutes) + ':' + _pad(seconds % 60); + } else { + return '' + minutes + ':' + _pad(seconds % 60); + } +} + +function formatFull(time) { + // The returned value will not be user-facing. So no need for + // internationalization. + return format(time, true); +} + +function convert(time, oldSpeed, newSpeed) { + // eslint-disable-next-line no-mixed-operators + return (time * oldSpeed / newSpeed).toFixed(3); +} + +function _pad(number) { + if (number < 10) { + return '0' + number; + } else { + return '' + number; + } +} + +export default {format, formatFull, convert}; diff --git a/xmodule/assets/video/public/js/video_accessible_menu.js b/xmodule/assets/video/public/js/video_accessible_menu.js new file mode 100644 index 000000000000..efcbff1cf63f --- /dev/null +++ b/xmodule/assets/video/public/js/video_accessible_menu.js @@ -0,0 +1,56 @@ +import _ from 'underscore'; + +/** + * Video Download Transcript control module. + * + * @constructor + * @param {jQuery} element + * @param {Object} options + */ +function VideoTranscriptDownloadHandler(element, options = {}) { + if (!(this instanceof VideoTranscriptDownloadHandler)) { + return new VideoTranscriptDownloadHandler(element, options); + } + + _.bindAll(this, 'clickHandler'); + + this.container = element; + this.options = options; + + if (this.container.find('.wrapper-downloads .wrapper-download-transcripts')) { + this.initialize(); + } +} + +VideoTranscriptDownloadHandler.prototype = { + // Initializes the module. + initialize() { + this.value = this.options.storage.getItem('transcript_download_format'); + this.el = this.container.find('.list-download-transcripts'); + this.el.on('click', '.btn-link', this.clickHandler); + }, + + // Event handler. We delay link clicks until the file type is set + clickHandler(event) { + event.preventDefault(); + + const fileType = $(event.target).data('value'); + const data = {transcript_download_format: fileType}; + const downloadUrl = $(event.target).attr('href'); + + $.ajax({ + url: this.options.saveStateUrl, + type: 'POST', + dataType: 'json', + data: data, + success: () => { + this.options.storage.setItem('transcript_download_format', fileType); + }, + complete: () => { + document.location.href = downloadUrl; + }, + }); + }, +}; + +export {VideoTranscriptDownloadHandler}; diff --git a/xmodule/assets/video/public/js/video_auto_advance_control.js b/xmodule/assets/video/public/js/video_auto_advance_control.js new file mode 100644 index 000000000000..d6cba1b5d79d --- /dev/null +++ b/xmodule/assets/video/public/js/video_auto_advance_control.js @@ -0,0 +1,148 @@ +import { interpolateHtml, HTML } from 'edx-ui-toolkit/js/utils/html-utils'; +import _ from 'underscore'; +import * as gettext from 'gettext'; + +/** + * Auto advance control module. + * @exports video/08_video_auto_advance_control.js + * @constructor + * @param {object} state The object containing the state of the video player. + * @return {Promise} + */ +class VideoAutoAdvanceControl { + constructor(state) { + if (!(this instanceof VideoAutoAdvanceControl)) { + return new VideoAutoAdvanceControl(state); + } + + _.bindAll(this, 'onClick', 'destroy', 'autoPlay', 'autoAdvance'); + this.state = state; + this.state.videoAutoAdvanceControl = this; + this.el = null; + this.initialize(); + + return Promise.resolve(); + } + + template = interpolateHtml( + HTML([ + ''].join('')), + { + autoAdvanceText: gettext('Auto-advance') // Assuming gettext is globally available or imported + } + ).toString(); + + destroy() { + if (this.el) { + this.el.removeEventListener('click', this.onClick); + this.el.remove(); + } + if (this.state && this.state.el) { + this.state.el.removeEventListener('ready', this.autoPlay); + this.state.el.removeEventListener('ended', this.autoAdvance); + this.state.el.removeEventListener('destroy', this.destroy); + } + if (this.state) { + delete this.state.videoAutoAdvanceControl; + } + } + + /** Initializes the module. */ + initialize() { + const state = this.state; + + this.el = this.createDOMElement(this.template); + this.render(); + this.setAutoAdvance(state.auto_advance); + this.bindHandlers(); + + return true; + } + + /** + * Creates a DOM element from an HTML string. + * @param {string} htmlString The HTML string to create the element from. + * @returns {HTMLElement} The created DOM element. + */ + createDOMElement(htmlString) { + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = htmlString.trim(); + return tempDiv.firstChild; + } + + /** + * Creates any necessary DOM elements, attach them, and set their, + * initial configuration. + * @param {boolean} enabled Whether auto advance is enabled + */ + render() { + const secondaryControls = this.state.el.querySelector('.secondary-controls'); + if (secondaryControls && this.el) { + secondaryControls.prepend(this.el); + } + } + + /** + * Bind any necessary function callbacks to DOM events (click, + * mousemove, etc.). + */ + bindHandlers() { + if (this.el) { + this.el.addEventListener('click', this.onClick); + } + if (this.state && this.state.el) { + this.state.el.addEventListener('ready', this.autoPlay); + this.state.el.addEventListener('ended', this.autoAdvance); + this.state.el.addEventListener('destroy', this.destroy); + } + } + + onClick(event) { + const enabled = !this.state.auto_advance; + event.preventDefault(); + this.setAutoAdvance(enabled); + if (this.el) { + this.el.dispatchEvent(new CustomEvent('autoadvancechange', { detail: [enabled] })); + } + } + + /** + * Sets or unsets auto advance. + * @param {boolean} enabled Sets auto advance. + */ + setAutoAdvance(enabled) { + if (this.el) { + if (enabled) { + this.el.classList.add('active'); + } else { + this.el.classList.remove('active'); + } + } + } + + autoPlay() { + // Only autoplay the video if it's the first component of the unit. + // If a unit has more than one video, no more than one will autoplay. + const isFirstComponent = this.state.el.closest('.vert-0'); + if (this.state.auto_advance && isFirstComponent) { + this.state.videoCommands.execute('play'); // Assuming videoCommands is on the state + } + } + + autoAdvance() { + if (this.state.auto_advance) { + const nextButton = document.querySelector('.sequence-nav-button.button-next'); + if (nextButton) { + nextButton.click(); + } + } + } +} + +export { VideoAutoAdvanceControl }; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/video_block_main.js b/xmodule/assets/video/public/js/video_block_main.js new file mode 100644 index 000000000000..5c2026d820b8 --- /dev/null +++ b/xmodule/assets/video/public/js/video_block_main.js @@ -0,0 +1,188 @@ +// Import required modules and dependencies +import $ from 'jquery'; +import _ from 'underscore'; +import {VideoStorage} from './video_storage'; +import {VideoPoster} from './poster'; +import {VideoTranscriptDownloadHandler} from './video_accessible_menu'; +import {Initialize} from './initialize'; + +// TODO: Uncomment the imports +// import { initialize } from './initialize'; // Assuming this function is imported +// import { +// FocusGrabber, +// VideoControl, +// VideoPlayPlaceholder, +// VideoPlayPauseControl, +// VideoProgressSlider, +// VideoSpeedControl, +// VideoVolumeControl, +// VideoQualityControl, +// VideoFullScreen, +// VideoCaption, +// VideoCommands, +// VideoContextMenu, +// VideoSaveStatePlugin, +// VideoEventsPlugin, +// VideoCompletionHandler, +// VideoTranscriptFeedback, +// VideoAutoAdvanceControl, +// VideoPlaySkipControl, +// VideoSkipControl, +// VideoEventsBumperPlugin, +// VideoSocialSharing, +// VideoBumper, +// } from './video_modules'; // Assuming all necessary modules are grouped here + +// Stub gettext if the runtime doesn't provide it +if (typeof window.gettext === 'undefined') { + window.gettext = function (text) { + return text; + }; +} + + +'use strict'; + +console.log('In video_block_main.js file'); + +(function () { + var youtubeXhr = null; + var oldVideo = window.Video; + + window.Video = function (runtime, element) { + console.log('In Video initialize method'); + + const el = $(element).find('.video'); + const id = el.attr('id').replace(/video_/, ''); + const storage = new VideoStorage('VideoState', id); + const bumperMetadata = el.data('bumper-metadata'); + const autoAdvanceEnabled = el.data('autoadvance-enabled') === 'True'; + + const mainVideoModules = [] + // TODO: Uncomment the code + // const mainVideoModules = [ + // FocusGrabber, + // VideoControl, + // VideoPlayPlaceholder, + // VideoPlayPauseControl, + // VideoProgressSlider, + // VideoSpeedControl, + // VideoVolumeControl, + // VideoQualityControl, + // VideoFullScreen, + // VideoCaption, + // VideoCommands, + // VideoContextMenu, + // VideoSaveStatePlugin, + // VideoEventsPlugin, + // VideoCompletionHandler, + // VideoTranscriptFeedback, + // ].concat(autoAdvanceEnabled ? [VideoAutoAdvanceControl] : []); + + const bumperVideoModules = [ + // VideoControl, + // VideoPlaySkipControl, + // VideoSkipControl, + // VideoVolumeControl, + // VideoCaption, + // VideoCommands, + // VideoSaveStatePlugin, + // VideoTranscriptFeedback, + // VideoEventsBumperPlugin, + // VideoCompletionHandler, + ]; + + const state = { + el: el, + id: id, + metadata: el.data('metadata'), + storage: storage, + options: {}, + youtubeXhr: youtubeXhr, + modules: mainVideoModules, + }; + + const getBumperState = (metadata) => { + return $.extend(true, { + el: el, + id: id, + storage: storage, + options: {SaveStatePlugin: {events: ['language_menu:change']}}, + youtubeXhr: youtubeXhr, + modules: bumperVideoModules, + }, {metadata: metadata}); + }; + + const player = (innerState) => { + return () => { + _.extend(innerState.metadata, {autoplay: true, focusFirstControl: true}); + // TODO: Uncomment following initialize method calling + Initialize(innerState, element); + }; + }; + + VideoTranscriptDownloadHandler(el, { + storage: storage, + saveStateUrl: state.metadata.saveStateUrl, + }); + + // VideoSocialSharing(el); + + if (bumperMetadata) { + VideoPoster(el, { + poster: el.data('poster'), + onClick: _.once(function () { + const mainVideoPlayer = player(state); + + if (storage.getItem('isBumperShown')) { + mainVideoPlayer(); + } else { + const bumperState = getBumperState(bumperMetadata); + const bumper = new VideoBumper(player(bumperState), bumperState); + + state.bumperState = bumperState; + + bumper.getPromise().then(() => { + delete state.bumperState; + mainVideoPlayer(); + }); + } + }), + }); + } else { + // TODO: Uncomment following initialize method calling + Initialize(state, element); + } + + if (!youtubeXhr) { + youtubeXhr = state.youtubeXhr; + } + + el.data('video-player-state', state); + const onSequenceChange = () => { + if (state && state.videoPlayer) { + state.videoPlayer.destroy(); + } + $('.sequence').off('sequence:change', onSequenceChange); + }; + $('.sequence').on('sequence:change', onSequenceChange); + + // Because the 'state' object is only available inside this closure, we will also make it available to + // the caller by returning it. This is necessary so that we can test Video with Jasmine. + return state; + }; + + window.Video.clearYoutubeXhr = function () { + youtubeXhr = null; + }; + + // TODO: Uncomment following initialize related code + // window.Video.loadYouTubeIFrameAPI = initialize.prototype.loadYouTubeIFrameAPI; + + // Invoke the mock Video constructor so that the elements stored within it can be processed by the real + // `window.Video` constructor. + // TODO: Un comment following + // oldVideo(null, true); + +}()); + diff --git a/xmodule/assets/video/public/js/video_bumper.js b/xmodule/assets/video/public/js/video_bumper.js new file mode 100644 index 000000000000..4ae6f19bcc24 --- /dev/null +++ b/xmodule/assets/video/public/js/video_bumper.js @@ -0,0 +1,111 @@ +'use strict'; +import $ from 'jquery'; + +/** + * VideoBumper module. + * + * @param {Function} player - The player factory function. + * @param {Object} state - Object containing the video state and DOM refs. + * @returns {Promise} A jQuery promise that resolves when bumper ends. + */ +export default class VideoBumper { + constructor(player, state) { + this.dfd = $.Deferred(); + this.element = state.el; + this.player = player; + this.state = state; + this.doNotShowAgain = false; + this.maxBumperDuration = 35; // seconds + + // Attach bumper instance to state for external reference + this.state.videoBumper = this; + + // Style and initialize + this.element.addClass('is-bumper'); + + // Bind class methods to `this` + this.showMainVideoHandler = this.showMainVideoHandler.bind(this); + this.destroy = this.destroy.bind(this); + this.skipByDuration = this.skipByDuration.bind(this); + this.destroyAndResolve = this.destroyAndResolve.bind(this); + + this.bindHandlers(); + this.initialize(); + } + + initialize() { + this.player(); + } + + getPromise() { + return this.dfd.promise(); + } + + showMainVideoHandler() { + this.state.storage.setItem('isBumperShown', true); + setTimeout(() => { + this.saveState(); + this.showMainVideo(); + }, 20); + } + + destroyAndResolve() { + this.destroy(); + this.dfd.resolve(); + } + + showMainVideo() { + if (this.state.videoPlayer) { + this.destroyAndResolve(); + } else { + this.element.on('initialize', this.destroyAndResolve); + } + } + + skip() { + this.element.trigger('skip', [this.doNotShowAgain]); + this.showMainVideoHandler(); + } + + skipAndDoNotShowAgain() { + this.doNotShowAgain = true; + this.skip(); + } + + skipByDuration(event, time) { + if (time > this.maxBumperDuration) { + this.element.trigger('ended'); + } + } + + bindHandlers() { + this.element.on('ended error', this.showMainVideoHandler); + this.element.on('timeupdate', this.skipByDuration); + } + + saveState() { + const info = { bumper_last_view_date: true }; + if (this.doNotShowAgain) { + Object.assign(info, { bumper_do_not_show_again: true }); + } + + if (this.state.videoSaveStatePlugin) { + this.state.videoSaveStatePlugin.saveState(true, info); + } + } + + destroy() { + this.element.off('ended error', this.showMainVideoHandler); + this.element.off({ + timeupdate: this.skipByDuration, + initialize: this.destroyAndResolve + }); + this.element.removeClass('is-bumper'); + + if (typeof this.state.videoPlayer?.destroy === 'function') { + this.state.videoPlayer.destroy(); + } + + delete this.state.videoBumper; + } +} diff --git a/xmodule/assets/video/public/js/video_caption.js b/xmodule/assets/video/public/js/video_caption.js new file mode 100644 index 000000000000..99302cf7e891 --- /dev/null +++ b/xmodule/assets/video/public/js/video_caption.js @@ -0,0 +1,1420 @@ +'use strict'; + +// TODO: Update these TODOs +import Sjson from 'video/00_sjson.js'; +import AsyncProcess from 'video/00_async_process.js'; +import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils'; +import Draggabilly from 'draggabilly'; +import convert from './time'; +import _ from 'underscore'; + +/** + * @desc VideoCaption module exports a function. + * + * @type {function} + * @access public + * + * @param {object} state - The object containing the state of the video + * player. All other modules, their parameters, public variables, etc. + * are available via this object. + * + * @this {object} The global window object. + * + * @returns {jquery Promise} + */ +const VideoCaption = function (state) { + if (!(this instanceof VideoCaption)) { + return new VideoCaption(state); + } + + _.bindAll(this, 'toggleTranscript', 'onMouseEnter', 'onMouseLeave', 'onMovement', + 'onContainerMouseEnter', 'onContainerMouseLeave', 'fetchCaption', + 'onResize', 'pause', 'play', 'onCaptionUpdate', 'onCaptionHandler', 'destroy', + 'handleKeypress', 'handleKeypressLink', 'openLanguageMenu', 'closeLanguageMenu', + 'previousLanguageMenuItem', 'nextLanguageMenuItem', 'handleCaptionToggle', + 'showClosedCaptions', 'hideClosedCaptions', 'toggleClosedCaptions', + 'updateCaptioningCookie', 'handleCaptioningCookie', 'handleTranscriptToggle', + 'listenForDragDrop', 'setTranscriptVisibility', 'updateTranscriptCookie', + 'toggleGoogleDisclaimer' + ); + + this.state = state; + this.state.videoCaption = this; + this.renderElements(); + this.handleCaptioningCookie(); + this.setTranscriptVisibility(); + this.listenForDragDrop(); + + return $.Deferred().resolve().promise(); +}; + + +VideoCaption.prototype = { + + destroy: function () { + this.state.el + .off({ + 'caption:fetch': this.fetchCaption, + 'caption:resize': this.onResize, + 'caption:update': this.onCaptionUpdate, + ended: this.pause, + fullscreen: this.onResize, + pause: this.pause, + play: this.play, + destroy: this.destroy + }) + .removeClass('is-captions-rendered'); + if (this.fetchXHR && this.fetchXHR.abort) { + this.fetchXHR.abort(); + } + if (this.availableTranslationsXHR && this.availableTranslationsXHR.abort) { + this.availableTranslationsXHR.abort(); + } + this.subtitlesEl.remove(); + this.container.remove(); + delete this.state.videoCaption; + }, + /** + * @desc Initiate rendering of elements, and set their initial configuration. + * + */ + renderElements: function () { + var languages = this.state.config.transcriptLanguages; + + var langHtml = HtmlUtils.interpolateHtml( + HtmlUtils.HTML( + [ + '
', + '', + '', + '
', + '

', + '', + '
', + '
' + ].join('')), + { + langTitle: gettext('Open language menu'), + courseId: this.state.id + } + ); + + var subtitlesHtml = HtmlUtils.interpolateHtml( + HtmlUtils.HTML( + [ + '
', + '

', + '
    ', + '
    ' + ].join('')), + { + courseId: this.state.id, + courseLang: this.state.lang + } + ); + + this.loaded = false; + this.subtitlesEl = $(HtmlUtils.ensureHtml(subtitlesHtml).toString()); + this.subtitlesMenuEl = this.subtitlesEl.find('.subtitles-menu'); + this.container = $(HtmlUtils.ensureHtml(langHtml).toString()); + this.captionControlEl = this.container.find('.toggle-captions'); + this.captionDisplayEl = this.state.el.find('.closed-captions'); + this.transcriptControlEl = this.container.find('.toggle-transcript'); + this.languageChooserEl = this.container.find('.lang'); + this.menuChooserEl = this.languageChooserEl.parent(); + + if (_.keys(languages).length) { + this.renderLanguageMenu(languages); + this.fetchCaption(); + } + }, + + /** + * @desc Bind any necessary function callbacks to DOM events (click, + * mousemove, etc.). + * + */ + bindHandlers: function () { + var state = this.state, + events = [ + 'mouseover', 'mouseout', 'mousedown', 'click', 'focus', 'blur', + 'keydown' + ].join(' '); + + this.captionControlEl.on({ + click: this.toggleClosedCaptions, + keydown: this.handleCaptionToggle + }); + this.transcriptControlEl.on({ + click: this.toggleTranscript, + keydown: this.handleTranscriptToggle + }); + this.subtitlesMenuEl.on({ + mouseenter: this.onMouseEnter, + mouseleave: this.onMouseLeave, + mousemove: this.onMovement, + mousewheel: this.onMovement, + DOMMouseScroll: this.onMovement + }) + .on(events, 'span[data-index]', this.onCaptionHandler); + this.container.on({ + mouseenter: this.onContainerMouseEnter, + mouseleave: this.onContainerMouseLeave + }); + + if (this.showLanguageMenu) { + this.languageChooserEl.on({ + keydown: this.handleKeypress + }, '.language-menu'); + + this.languageChooserEl.on({ + keydown: this.handleKeypressLink + }, '.control-lang'); + } + + state.el + .on({ + 'caption:fetch': this.fetchCaption, + 'caption:resize': this.onResize, + 'caption:update': this.onCaptionUpdate, + ended: this.pause, + fullscreen: this.onResize, + pause: this.pause, + play: this.play, + destroy: this.destroy + }); + + if ((state.videoType === 'html5') && (state.config.autohideHtml5)) { + this.subtitlesMenuEl.on('scroll', state.videoControl.showControls); + } + }, + + onCaptionUpdate: function (event, time) { + this.updatePlayTime(time); + }, + + handleCaptionToggle: function (event) { + var KEY = $.ui.keyCode, + keyCode = event.keyCode; + + switch (keyCode) { + case KEY.SPACE: + case KEY.ENTER: + event.preventDefault(); + this.toggleClosedCaptions(event); + // no default + } + }, + + handleTranscriptToggle: function (event) { + var KEY = $.ui.keyCode, + keyCode = event.keyCode; + + switch (keyCode) { + case KEY.SPACE: + case KEY.ENTER: + event.preventDefault(); + this.toggleTranscript(event); + // no default + } + }, + + handleKeypressLink: function (event) { + var KEY = $.ui.keyCode, + keyCode = event.keyCode, + focused, index, total; + + switch (keyCode) { + case KEY.UP: + event.preventDefault(); + focused = $(':focus').parent(); + index = this.languageChooserEl.find('li').index(focused); + total = this.languageChooserEl.find('li').size() - 1; + + this.previousLanguageMenuItem(event, index); + break; + + case KEY.DOWN: + event.preventDefault(); + focused = $(':focus').parent(); + index = this.languageChooserEl.find('li').index(focused); + total = this.languageChooserEl.find('li').size() - 1; + + this.nextLanguageMenuItem(event, index, total); + break; + + case KEY.ESCAPE: + this.closeLanguageMenu(event); + break; + + case KEY.ENTER: + case KEY.SPACE: + return true; + // no default + } + return true; + }, + + handleKeypress: function (event) { + var KEY = $.ui.keyCode, + keyCode = event.keyCode; + + switch (keyCode) { + // Handle keypresses + case KEY.ENTER: + case KEY.SPACE: + case KEY.UP: + event.preventDefault(); + this.openLanguageMenu(event); + break; + + case KEY.ESCAPE: + this.closeLanguageMenu(event); + break; + // no default + } + + return event.keyCode === KEY.TAB; + }, + + nextLanguageMenuItem: function (event, index, total) { + event.preventDefault(); + + if (event.altKey || event.shiftKey) { + return true; + } + + if (index === total) { + this.languageChooserEl + .find('.control-lang').first() + .focus(); + } else { + this.languageChooserEl + .find('li:eq(' + index + ')') + .next() + .find('.control-lang') + .focus(); + } + + return false; + }, + + previousLanguageMenuItem: function (event, index) { + event.preventDefault(); + + if (event.altKey || event.shiftKey) { + return true; + } + + if (index === 0) { + this.languageChooserEl + .find('.control-lang').last() + .focus(); + } else { + this.languageChooserEl + .find('li:eq(' + index + ')') + .prev() + .find('.control-lang') + .focus(); + } + + return false; + }, + + openLanguageMenu: function (event) { + var button = this.languageChooserEl, + menu = button.parent().find('.menu'); + + event.preventDefault(); + + button + .addClass('is-opened'); + + menu + .find('.control-lang').last() + .focus(); + }, + + closeLanguageMenu: function (event) { + var button = this.languageChooserEl; + event.preventDefault(); + + button + .removeClass('is-opened') + .find('.language-menu') + .focus(); + }, + + onCaptionHandler: function (event) { + switch (event.type) { + case 'mouseover': + case 'mouseout': + this.captionMouseOverOut(event); + break; + case 'mousedown': + this.captionMouseDown(event); + break; + case 'click': + this.captionClick(event); + break; + case 'focusin': + this.captionFocus(event); + break; + case 'focusout': + this.captionBlur(event); + break; + case 'keydown': + this.captionKeyDown(event); + break; + // no default + } + }, + + /** + * @desc Opens language menu. + * + * @param {jquery Event} event + */ + onContainerMouseEnter: function (event) { + event.preventDefault(); + $(event.currentTarget).find('.lang').addClass('is-opened'); + + // We only want to fire the analytics event if a menu is + // present instead of on the container hover, since it wraps + // the "CC" and "Transcript" buttons as well. + if ($(event.currentTarget).find('.lang').length) { + this.state.el.trigger('language_menu:show'); + } + }, + + /** + * @desc Closes language menu. + * + * @param {jquery Event} event + */ + onContainerMouseLeave: function (event) { + event.preventDefault(); + $(event.currentTarget).find('.lang').removeClass('is-opened'); + + // We only want to fire the analytics event if a menu is + // present instead of on the container hover, since it wraps + // the "CC" and "Transcript" buttons as well. + if ($(event.currentTarget).find('.lang').length) { + this.state.el.trigger('language_menu:hide'); + } + }, + + /** + * @desc Freezes moving of captions when mouse is over them. + * + * @param {jquery Event} event + */ + onMouseEnter: function () { + if (this.frozen) { + clearTimeout(this.frozen); + } + + this.frozen = setTimeout( + this.onMouseLeave, + this.state.config.captionsFreezeTime + ); + }, + + /** + * @desc Unfreezes moving of captions when mouse go out. + * + * @param {jquery Event} event + */ + onMouseLeave: function () { + if (this.frozen) { + clearTimeout(this.frozen); + } + + this.frozen = null; + + if (this.playing) { + this.scrollCaption(); + } + }, + + /** + * @desc Freezes moving of captions when mouse is moving over them. + * + * @param {jquery Event} event + */ + onMovement: function () { + this.onMouseEnter(); + }, + + /** + * @desc Gets the correct start and end times from the state configuration + * + * @returns {array} if [startTime, endTime] are defined + */ + getStartEndTimes: function () { + // due to the way config.startTime/endTime are + // processed in 03_video_player.js, we assume + // endTime can be an integer or null, + // and startTime is an integer > 0 + var config = this.state.config; + var startTime = config.startTime * 1000; + var endTime = (config.endTime !== null) ? config.endTime * 1000 : null; + return [startTime, endTime]; + }, + + /** + * @desc Gets captions within the start / end times stored within this.state.config + * + * @returns {object} {start, captions} parallel arrays of + * start times and corresponding captions + */ + getBoundedCaptions: function () { + // get start and caption. If startTime and endTime + // are specified, filter by that range. + var times = this.getStartEndTimes(); + // eslint-disable-next-line prefer-spread + var results = this.sjson.filter.apply(this.sjson, times); + var start = results.start; + var captions = results.captions; + + return { + start: start, + captions: captions + }; + }, + + /** + * @desc Shows/Hides Google disclaimer based on captions being AI generated and + * if ClosedCaptions are being shown. + * + * @param {array} captions List of captions for the video. + * + * @returns {boolean} + */ + toggleGoogleDisclaimer: function (captions) { + var self = this, + state = this.state, + aIGeneratedSpan = '', + captionsAIGenerated = captions.some(caption => caption.includes(aIGeneratedSpan)); + + if (!self.hideCaptionsOnLoad && !state.captionsHidden) { + if (captionsAIGenerated) { + state.el.find('.google-disclaimer').show(); + self.shouldShowGoogleDisclaimer = true; + } else { + state.el.find('.google-disclaimer').hide(); + self.shouldShowGoogleDisclaimer = false; + } + } + }, + + /** + * @desc Fetch the caption file specified by the user. Upon successful + * receipt of the file, the captions will be rendered. + * @param {boolean} [fetchWithYoutubeId] Fetch youtube captions if true. + * @returns {boolean} + * true: The user specified a caption file. NOTE: if an error happens + * while the specified file is being retrieved (for example the + * file is missing on the server), this function will still return + * true. + * false: No caption file was specified, or an empty string was + * specified for the Youtube type player. + */ + fetchCaption: function (fetchWithYoutubeId) { + var self = this, + state = this.state, + language = state.getCurrentLanguage(), + url = state.config.transcriptTranslationUrl.replace('__lang__', language), + data, youtubeId; + + if (this.loaded) { + this.hideCaptions(false); + } + + if (this.fetchXHR && this.fetchXHR.abort) { + this.fetchXHR.abort(); + } + + if (state.videoType === 'youtube' || fetchWithYoutubeId) { + try { + youtubeId = state.youtubeId('1.0'); + } catch (err) { + youtubeId = null; + } + + if (!youtubeId) { + return false; + } + + data = {videoId: youtubeId}; + } + + state.el.removeClass('is-captions-rendered'); + // Fetch the captions file. If no file was specified, or if an error + // occurred, then we hide the captions panel, and the "Transcript" button + this.fetchXHR = $.ajaxWithPrefix({ + url: url, + notifyOnError: false, + data: data, + success: function (sjson) { + var results, start, captions; + self.sjson = new Sjson(sjson); + results = self.getBoundedCaptions(); + start = results.start; + captions = results.captions; + + self.toggleGoogleDisclaimer(captions); + + if (self.loaded) { + if (self.rendered) { + self.renderCaption(start, captions); + self.updatePlayTime(state.videoPlayer.currentTime); + } + } else { + if (state.isTouch) { + HtmlUtils.setHtml( + self.subtitlesEl.find('.subtitles-menu'), + HtmlUtils.joinHtml( + HtmlUtils.HTML('
  1. '), + gettext('Transcript will be displayed when you start playing the video.'), + HtmlUtils.HTML('
    2. ') + ) + ); + } else { + self.renderCaption(start, captions); + } + self.hideCaptions(self.hideCaptionsOnLoad); + HtmlUtils.append( + self.state.el.find('.video-wrapper').parent(), + HtmlUtils.HTML(self.subtitlesEl) + ); + HtmlUtils.append( + self.state.el.find('.secondary-controls'), + HtmlUtils.HTML(self.container) + ); + self.bindHandlers(); + } + + self.loaded = true; + }, + error: function (jqXHR, textStatus, errorThrown) { + var canFetchWithYoutubeId; + console.log('[Video info]: ERROR while fetching captions.'); + console.log( + '[Video info]: STATUS:', textStatus + + ', MESSAGE:', '' + errorThrown + ); + // If initial list of languages has more than 1 item, check + // for availability other transcripts. + // If player mode is html5 and there are no initial languages + // then try to fetch youtube version of transcript with + // youtubeId. + if (_.keys(state.config.transcriptLanguages).length > 1) { + self.fetchAvailableTranslations(); + } else if (!fetchWithYoutubeId && state.videoType === 'html5') { + canFetchWithYoutubeId = self.fetchCaption(true); + if (canFetchWithYoutubeId) { + console.log('[Video info]: Html5 mode fetching caption with youtubeId.'); // eslint-disable-line max-len, no-console + } else { + self.hideCaptions(true); + self.languageChooserEl.hide(); + self.hideClosedCaptions(); + } + } else { + self.hideCaptions(true); + self.languageChooserEl.hide(); + self.hideClosedCaptions(); + } + } + }); + + return true; + }, + + /** + * @desc Fetch the list of available language codes. Upon successful receipt + * the list of available languages will be updated. + * + * @returns {jquery Promise} + */ + fetchAvailableTranslations: function () { + var self = this, + state = this.state; + + this.availableTranslationsXHR = $.ajaxWithPrefix({ + url: state.config.transcriptAvailableTranslationsUrl, + notifyOnError: false, + success: function (response) { + var currentLanguages = state.config.transcriptLanguages, + newLanguages = _.pick(currentLanguages, response); + + // Update property with available currently translations. + state.config.transcriptLanguages = newLanguages; + // Remove an old language menu. + self.container.find('.langs-list').remove(); + + if (_.keys(newLanguages).length) { + self.renderLanguageMenu(newLanguages); + } + }, + error: function () { + self.hideCaptions(true); + self.languageChooserEl.hide(); + } + }); + + return this.availableTranslationsXHR; + }, + + /** + * @desc Recalculates and updates the height of the container of captions. + * + */ + onResize: function () { + this.subtitlesEl + .find('.spacing').first() + .height(this.topSpacingHeight()); + + this.subtitlesEl + .find('.spacing').last() + .height(this.bottomSpacingHeight()); + + this.scrollCaption(); + this.setSubtitlesHeight(); + }, + + /** + * @desc Create any necessary DOM elements, attach them, and set their + * initial configuration for the Language menu. + * + * @param {object} languages Dictionary where key is language code, + * value - language label + * + */ + renderLanguageMenu: function (languages) { + var self = this, + state = this.state, + $menu = $('
      '), + currentLang = state.getCurrentLanguage(), + $li, $link, linkHtml; + + if (_.keys(languages).length < 2) { + // Remove the menu toggle button + self.container.find('.lang').remove(); + return; + } + + this.showLanguageMenu = true; + + $.each(languages, function (code, label) { + $li = $('
    1. ', {'data-lang-code': code}); + linkHtml = HtmlUtils.joinHtml( + HtmlUtils.HTML('') + ); + $link = $(linkHtml.toString()); + + if (currentLang === code) { + $li.addClass('is-active'); + $link.attr('aria-pressed', 'true'); + } + + $li.append($link); + $menu.append($li); + }); + + HtmlUtils.append( + this.languageChooserEl, + HtmlUtils.HTML($menu) + ); + + $menu.on('click', '.control-lang', function (e) { + var el = $(e.currentTarget).parent(), + captionState = self.state, + langCode = el.data('lang-code'); + + if (captionState.lang !== langCode) { + captionState.lang = langCode; + el.addClass('is-active') + .siblings('li') + .removeClass('is-active') + .find('.control-lang') + .attr('aria-pressed', 'false'); + + $(e.currentTarget).attr('aria-pressed', 'true'); + + captionState.el.trigger('language_menu:change', [langCode]); + self.fetchCaption(); + + // update the closed-captions lang attribute + self.captionDisplayEl.attr('lang', langCode); + + // update the transcript lang attribute + self.subtitlesMenuEl.attr('lang', langCode); + self.closeLanguageMenu(e); + } + }); + }, + + /** + * @desc Create any necessary DOM elements, attach them, and set their + * initial configuration. + * + * @param {jQuery element} container Element in which captions will be + * inserted. + * @param {array} start List of start times for the video. + * @param {array} captions List of captions for the video. + * @returns {object} jQuery's Promise object + * + */ + buildCaptions: function (container, start, captions) { + var process = function (text, index) { + var $spanEl = $('', { + role: 'link', + 'data-index': index, + 'data-start': start[index], + tabindex: 0 + }); + + HtmlUtils.setHtml($($spanEl), HtmlUtils.HTML(text.toString())); + + return $spanEl.wrap('
    2. ').parent()[0]; // xss-lint: disable=javascript-jquery-insertion + }; + + return AsyncProcess.array(captions, process).done(function (list) { + HtmlUtils.append( + container, + HtmlUtils.HTML(list) + ); + }); + }, + + /** + * @desc Initiates creating of captions and set their initial configuration. + * + * @param {array} start List of start times for the video. + * @param {array} captions List of captions for the video. + * + */ + renderCaption: function (start, captions) { + var self = this; + + var onRender = function () { + self.addPaddings(); + // Enables or disables automatic scrolling of the captions when the + // video is playing. This feature has to be disabled when tabbing + // through them as it interferes with that action. Initially, have + // this flag enabled as we assume mouse use. Then, if the first + // caption (through forward tabbing) or the last caption (through + // backwards tabbing) gets the focus, disable that feature. + // Re-enable it if tabbing then cycles out of the the captions. + self.autoScrolling = true; + // Keeps track of where the focus is situated in the array of + // captions. Used to implement the automatic scrolling behavior and + // decide if the outline around a caption has to be hidden or shown + // on a mouseenter or mouseleave. Initially, no caption has the + // focus, set the index to -1. + self.currentCaptionIndex = -1; + // Used to track if the focus is coming from a click or tabbing. This + // has to be known to decide if, when a caption gets the focus, an + // outline has to be drawn (tabbing) or not (mouse click). + self.isMouseFocus = false; + self.rendered = true; + self.state.el.addClass('is-captions-rendered'); + + self.subtitlesEl + .attr('aria-label', gettext('Activating a link in this group will skip to the corresponding point in the video.')); // eslint-disable-line max-len + + self.subtitlesEl.find('.transcript-title') + .text(gettext('Video transcript')); + + self.subtitlesEl.find('.transcript-start') + .text(gettext('Start of transcript. Skip to the end.')) + .attr('lang', $('html').attr('lang')); + + self.subtitlesEl.find('.transcript-end') + .text(gettext('End of transcript. Skip to the start.')) + .attr('lang', $('html').attr('lang')); + + self.container.find('.menu-container .instructions') + .text(gettext('Press the UP arrow key to enter the language menu then use UP and DOWN arrow keys to navigate language options. Press ENTER to change to the selected language.')); // eslint-disable-line max-len + }; + + this.rendered = false; + this.subtitlesMenuEl.empty(); + this.setSubtitlesHeight(); + this.buildCaptions(this.subtitlesMenuEl, start, captions).done(onRender); + }, + + /** + * @desc Sets top and bottom spacing height and make sure they are taken + * out of the tabbing order. + * + */ + addPaddings: function () { + var topSpacer = HtmlUtils.interpolateHtml( + HtmlUtils.HTML([ + '
    3. ', + '', // eslint-disable-line max-len, indent + '
      4. ' + ].join('')), + { + id: this.state.id, + height: this.topSpacingHeight() + } + ); + + var bottomSpacer = HtmlUtils.interpolateHtml( + HtmlUtils.HTML([ + '
    4. ', + '', // eslint-disable-line max-len, indent + '
      5. ' + ].join('')), + { + id: this.state.id, + height: this.bottomSpacingHeight() + } + ); + + HtmlUtils.prepend( + this.subtitlesMenuEl, + topSpacer + ); + + HtmlUtils.append( + this.subtitlesMenuEl, + bottomSpacer + ); + }, + + /** + * @desc + * On mouseOver: Hides the outline of a caption that has been tabbed to. + * On mouseOut: Shows the outline of a caption that has been tabbed to. + * + * @param {jquery Event} event + * + */ + captionMouseOverOut: function (event) { + var $caption = $(event.target), + captionIndex = parseInt($caption.attr('data-index'), 10); + + if (captionIndex === this.currentCaptionIndex) { + if (event.type === 'mouseover') { + $caption.removeClass('focused'); + } else { // mouseout + $caption.addClass('focused'); + } + } + }, + + /** + * @desc Handles mousedown event on concrete caption. + * + * @param {jquery Event} event + * + */ + captionMouseDown: function (event) { + var $caption = $(event.target); + + this.isMouseFocus = true; + this.autoScrolling = true; + $caption.removeClass('focused'); + this.currentCaptionIndex = -1; + }, + + /** + * @desc Handles click event on concrete caption. + * + * @param {jquery Event} event + * + */ + captionClick: function (event) { + this.seekPlayer(event); + }, + + /** + * @desc Handles focus event on concrete caption. + * + * @param {jquery Event} event + * + */ + captionFocus: function (event) { + var $caption = $(event.target), + container = $caption.parent(), + captionIndex = parseInt($caption.attr('data-index'), 10); + // If the focus comes from a mouse click, hide the outline, turn on + // automatic scrolling and set currentCaptionIndex to point outside of + // caption list (ie -1) to disable mouseenter, mouseleave behavior. + if (this.isMouseFocus) { + this.autoScrolling = true; + container.removeClass('focused'); + this.currentCaptionIndex = -1; + } else { + // If the focus comes from tabbing, show the outline and turn off + // automatic scrolling. + + this.currentCaptionIndex = captionIndex; + container.addClass('focused'); + // The second and second to last elements turn automatic scrolling + // off again as it may have been enabled in captionBlur. + if ( + captionIndex <= 1 + || captionIndex >= this.sjson.getSize() - 2 + ) { + this.autoScrolling = false; + } + } + }, + + /** + * @desc Handles blur event on concrete caption. + * + * @param {jquery Event} event + * + */ + captionBlur: function (event) { + var $caption = $(event.target), + container = $caption.parent(), + captionIndex = parseInt($caption.attr('data-index'), 10); + + container.removeClass('focused'); + // If we are on first or last index, we have to turn automatic scroll + // on again when losing focus. There is no way to know in what + // direction we are tabbing. So we could be on the first element and + // tabbing back out of the captions or on the last element and tabbing + // forward out of the captions. + if (captionIndex === 0 + || captionIndex === this.sjson.getSize() - 1) { + this.autoScrolling = true; + } + }, + + /** + * @desc Handles keydown event on concrete caption. + * + * @param {jquery Event} event + * + */ + captionKeyDown: function (event) { + this.isMouseFocus = false; + if (event.which === 13) { // Enter key + this.seekPlayer(event); + } + }, + + /** + * @desc Scrolls caption container to make active caption visible. + * + */ + scrollCaption: function () { + var el = this.subtitlesEl.find('.current:first'); + + // Automatic scrolling gets disabled if one of the captions has + // received focus through tabbing. + if ( + !this.frozen + && el.length + && this.autoScrolling + ) { + this.subtitlesEl.scrollTo( + el, + { + offset: -1 * this.calculateOffset(el) + } + ); + } + }, + + /** + * @desc Updates flags on play + * + */ + play: function () { + var captions, startAndCaptions, start; + if (this.loaded) { + if (!this.rendered) { + startAndCaptions = this.getBoundedCaptions(); + start = startAndCaptions.start; + captions = startAndCaptions.captions; + this.renderCaption(start, captions); + } + + this.playing = true; + } + }, + + /** + * @desc Updates flags on pause + * + */ + pause: function () { + if (this.loaded) { + this.playing = false; + } + }, + + /** + * @desc Updates captions UI on paying. + * + * @param {number} time Time in seconds. + * + */ + updatePlayTime: function (time) { + var state = this.state, + params, newIndex, times; + + if (this.loaded) { + if (state.isFlashMode()) { + time = convert(time, state.speed, '1.0'); + } + + time = Math.round(time * 1000 + 100); + times = this.getStartEndTimes(); + // if start and end times are defined, limit search. + // else, use the entire list of video captions + params = [time].concat(times); + // eslint-disable-next-line prefer-spread + newIndex = this.sjson.search.apply(this.sjson, params); + + if ( + typeof newIndex !== 'undefined' + && newIndex !== -1 + && this.currentIndex !== newIndex + ) { + if (typeof this.currentIndex !== 'undefined') { + this.subtitlesEl + .find('li.current') + .attr('aria-current', 'false') + .removeClass('current'); + } + this.subtitlesEl + .find("span[data-index='" + newIndex + "']") + .parent() + .attr('aria-current', 'true') + .addClass('current'); + + this.currentIndex = newIndex; + this.captionDisplayEl.text(this.subtitlesEl.find("span[data-index='" + newIndex + "']").text()); + this.scrollCaption(); + } + } + }, + + /** + * @desc Sends log to the server on caption seek. + * + * @param {jquery Event} event + * + */ + seekPlayer: function (event) { + var state = this.state, + time = parseInt($(event.target).data('start'), 10); + + if (state.isFlashMode()) { + time = Math.round(convert(time, '1.0', state.speed)); + } + + state.trigger( + 'videoPlayer.onCaptionSeek', + { + type: 'onCaptionSeek', + time: time / 1000 + } + ); + + event.preventDefault(); + }, + + /** + * @desc Calculates offset for paddings. + * + * @param {jquery element} element Top or bottom padding element. + * @returns {number} Offset for the passed padding element. + * + */ + calculateOffset: function (element) { + return this.captionHeight() / 2 - element.height() / 2; + }, + + /** + * @desc Calculates offset for the top padding element. + * + * @returns {number} Offset for the passed top padding element. + * + */ + topSpacingHeight: function () { + return this.calculateOffset( + this.subtitlesEl.find('li:not(.spacing)').first() + ); + }, + + /** + * @desc Calculates offset for the bottom padding element. + * + * @returns {number} Offset for the passed bottom padding element. + * + */ + bottomSpacingHeight: function () { + return this.calculateOffset( + this.subtitlesEl.find('li:not(.spacing)').last() + ); + }, + + handleCaptioningCookie: function () { + if ($.cookie('show_closed_captions') === 'true') { + this.state.showClosedCaptions = true; + this.showClosedCaptions(); + + // keep it going until turned off + $.cookie('show_closed_captions', 'true', { + expires: 3650, + path: '/' + }); + } else { + this.hideClosedCaptions(); + } + }, + + toggleClosedCaptions: function (event) { + event.preventDefault(); + + if (this.state.el.hasClass('has-captions')) { + this.state.showClosedCaptions = false; + this.updateCaptioningCookie(false); + this.hideClosedCaptions(); + } else { + this.state.showClosedCaptions = true; + this.updateCaptioningCookie(true); + this.showClosedCaptions(); + } + }, + + showClosedCaptions: function () { + var text = gettext('Hide closed captions'); + this.state.el.addClass('has-captions'); + + this.captionDisplayEl + .show() + .addClass('is-visible') + .attr('lang', this.state.lang); + + this.captionControlEl + .addClass('is-active') + .attr('title', text) + .attr('aria-label', text); + + if (this.subtitlesEl.find('.current').text()) { + this.captionDisplayEl + .text(this.subtitlesEl.find('.current').text()); + } else { + this.captionDisplayEl + .text(gettext('(Caption will be displayed when you start playing the video.)')); + } + + this.state.el.trigger('captions:show'); + }, + + hideClosedCaptions: function () { + var text = gettext('Turn on closed captioning'); + this.state.el.removeClass('has-captions'); + + this.captionDisplayEl + .hide() + .removeClass('is-visible'); + + this.captionControlEl + .removeClass('is-active') + .attr('title', text) + .attr('aria-label', text); + + this.state.el.trigger('captions:hide'); + }, + + updateCaptioningCookie: function (method) { + if (method) { + $.cookie('show_closed_captions', 'true', { + expires: 3650, + path: '/' + }); + } else { + $.cookie('show_closed_captions', null, { + path: '/' + }); + } + }, + + /** + * This runs when the video block is first rendered and sets the initial visibility + * of the transcript panel based on the value of the 'show_transcript' cookie and/or + * the block's showCaptions setting. + */ + setTranscriptVisibility: function () { + var hideCaptionsOnRender = !this.state.config.showCaptions; + + if ($.cookie('show_transcript') === 'true') { + this.hideCaptionsOnLoad = false; + // Keep it going until turned off. + this.updateTranscriptCookie(true); + } else if ($.cookie('show_transcript') === 'false') { + hideCaptionsOnRender = true; + this.hideCaptionsOnLoad = true; + } else { + this.hideCaptionsOnLoad = !this.state.config.showCaptions; + } + + if (hideCaptionsOnRender) { + this.state.el.addClass('closed'); + } + }, + + /** + * @desc Shows/Hides transcript on click `transcript` button + * + * @param {jquery Event} event + * + */ + toggleTranscript: function (event) { + event.preventDefault(); + if (this.state.el.hasClass('closed')) { + this.hideCaptions(false, true); + this.updateTranscriptCookie(true); + } else { + this.hideCaptions(true, true); + this.updateTranscriptCookie(false); + } + }, + + updateTranscriptCookie: function (showTranscript) { + if (showTranscript) { + $.cookie('show_transcript', 'true', { + expires: 3650, + path: '/' + }); + } else { + $.cookie('show_transcript', 'false', { + path: '/' + }); + } + }, + + listenForDragDrop: function () { + var captions = this.captionDisplayEl['0']; + + if (typeof Draggabilly === 'function') { + // eslint-disable-next-line no-new + new Draggabilly(captions, {containment: true}); + } else { + console.log('Closed captioning available but not draggable'); + } + }, + + /** + * @desc Shows/Hides the transcript panel. + * + * @param {boolean} hideCaptions if `true` hides the transcript panel, + * otherwise - show. + */ + hideCaptions: function (hideCaptions, triggerEvent) { + var transcriptControlEl = this.transcriptControlEl, + self = this, + state = this.state, + text; + + if (hideCaptions) { + state.captionsHidden = true; + state.el.addClass('closed'); + text = gettext('Turn on transcripts'); + if (triggerEvent) { + this.state.el.trigger('transcript:hide'); + } + + state.el.find('.google-disclaimer').hide(); + + transcriptControlEl + .removeClass('is-active') + .attr('title', gettext(text)) + .attr('aria-label', text); + } else { + state.captionsHidden = false; + state.el.removeClass('closed'); + this.scrollCaption(); + text = gettext('Turn off transcripts'); + if (triggerEvent) { + this.state.el.trigger('transcript:show'); + } + + if (self.shouldShowGoogleDisclaimer) { + state.el.find('.google-disclaimer').show(); + } + + transcriptControlEl + .addClass('is-active') + .attr('title', gettext(text)) + .attr('aria-label', text); + } + + if (state.resizer) { + if (state.isFullScreen) { + state.resizer.setMode('both'); + } else { + state.resizer.alignByWidthOnly(); + } + } + + this.setSubtitlesHeight(); + }, + + /** + * @desc Return the caption container height. + * + * @returns {number} event Height of the container in pixels. + * + */ + captionHeight: function () { + var state = this.state; + if (state.isFullScreen) { + return state.container.height() - state.videoFullScreen.height; + } else { + return state.container.height(); + } + }, + + /** + * @desc Sets the height of the caption container element. + * + */ + setSubtitlesHeight: function () { + var height = 0, + state = this.state; + // on page load captionHidden = undefined + if ((state.captionsHidden === undefined && this.hideCaptionsOnLoad) + || state.captionsHidden === true + ) { + // In case of html5 autoshowing subtitles, we adjust height of + // subs, by height of scrollbar. + height = state.el.find('.video-controls').height() + + 0.5 * state.el.find('.slider').height(); + // Height of videoControl does not contain height of slider. + // css is set to absolute, to avoid yanking when slider + // autochanges its height. + } + + this.subtitlesEl.css({ + maxHeight: this.captionHeight() - height + }); + } +}; + + +// Export as default +export default VideoCaption; diff --git a/xmodule/assets/video/public/js/video_completion_handler.js b/xmodule/assets/video/public/js/video_completion_handler.js new file mode 100644 index 000000000000..2bb153bab728 --- /dev/null +++ b/xmodule/assets/video/public/js/video_completion_handler.js @@ -0,0 +1,132 @@ +/** + * Handles video completion logic. + * @param {Object} state - The shared video state object. + * @returns {Promise} + */ + +const VideoCompletionHandler = (state) => { + const handler = new CompletionHandler(state); + state.completionHandler = handler; + return Promise.resolve(); +} + +class CompletionHandler { + constructor(state) { + this.state = state; + this.el = state.el; // Should be a DOM element + this.lastSentTime = undefined; + this.isComplete = false; + this.completionPercentage = state.config.completionPercentage; + this.startTime = state.config.startTime; + this.endTime = state.config.endTime; + this.isEnabled = state.config.completionEnabled; + + if (this.endTime) { + this.completeAfterTime = this.calculateCompleteAfterTime(this.startTime, this.endTime); + } + + if (this.isEnabled) { + this.bindHandlers(); + } + } + + destroy() { + this.el.removeEventListener('timeupdate', this._onTimeUpdate); + this.el.removeEventListener('ended', this._onEnded); + this.el.removeEventListener('metadata_received', this._onMetadataReceived); + delete this.state.completionHandler; + } + + bindHandlers() { + this._onEnded = this.handleEnded.bind(this); + this._onTimeUpdate = (e) => this.handleTimeUpdate(e.detail); + this._onMetadataReceived = this.checkMetadata.bind(this); + + this.el.addEventListener('ended', this._onEnded); + this.el.addEventListener('timeupdate', this._onTimeUpdate); + this.el.addEventListener('metadata_received', this._onMetadataReceived); + } + + handleEnded() { + if (!this.isComplete) { + this.markCompletion(); + } + } + + handleTimeUpdate(currentTime) { + if (this.isComplete) return; + + const now = Date.now() / 1000; + + if ( + this.lastSentTime !== undefined && + currentTime - this.lastSentTime < this.repostDelaySeconds() + ) { + return; + } + + if (this.completeAfterTime === undefined) { + const duration = this.state.videoPlayer.duration?.(); + if (!duration) return; + this.completeAfterTime = this.calculateCompleteAfterTime(this.startTime, duration); + } + + if (currentTime > this.completeAfterTime) { + this.markCompletion(currentTime); + } + } + + checkMetadata() { + const metadata = this.state.metadata?.[this.state.youtubeId()]; + const ytRating = metadata?.contentRating?.ytRating; + + if (ytRating === 'ytAgeRestricted' && !this.isComplete) { + this.markCompletion(); + } + } + + async markCompletion(currentTime) { + this.isComplete = true; + this.lastSentTime = currentTime; + + this.el.dispatchEvent(new CustomEvent('complete')); + + const url = this.state.config.publishCompletionUrl; + + if (!url) { + console.warn('publishCompletionUrl not defined'); + return; + } + + try { + const res = await fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ completion: 1.0 }) + }); + + if (!res.ok) { + const error = await res.json(); + throw new Error(error?.error || 'Unknown error'); + } + + this.el.removeEventListener('timeupdate', this._onTimeUpdate); + this.el.removeEventListener('ended', this._onEnded); + } catch (err) { + console.warn('Failed to submit completion:', err.message); + this.isComplete = false; + } + } + + calculateCompleteAfterTime(startTime, endTime) { + return startTime + (endTime - startTime) * this.completionPercentage; + } + + repostDelaySeconds() { + return 3.0; + } +} + +export { VideoCompletionHandler } \ No newline at end of file diff --git a/xmodule/assets/video/public/js/video_context_menu.js b/xmodule/assets/video/public/js/video_context_menu.js new file mode 100644 index 000000000000..6f9906d8309b --- /dev/null +++ b/xmodule/assets/video/public/js/video_context_menu.js @@ -0,0 +1,699 @@ +import $ from 'jquery'; +import _ from 'underscore'; +import Component from './00_component.js'; + +const AbstractItem = Component.extend({ + initialize: function (options) { + this.options = $.extend(true, { + label: '', + prefix: 'edx-', + dataAttrs: {menu: this}, + attrs: {}, + items: [], + callback: $.noop, + initialize: $.noop + }, options); + + this.id = _.uniqueId(); + this.element = this.createElement(); + this.element.attr(this.options.attrs).data(this.options.dataAttrs); + this.children = []; + this.delegateEvents(); + this.options.initialize.call(this, this); + }, + destroy: function () { + _.invoke(this.getChildren(), 'destroy'); + this.undelegateEvents(); + this.getElement().remove(); + }, + open: function () { + this.getElement().addClass('is-opened'); + return this; + }, + close: function () { + }, + closeSiblings: function () { + _.invoke(this.getSiblings(), 'close'); + return this; + }, + getElement: function () { + return this.element; + }, + addChild: function (child) { + var firstChild = null, + lastChild = null; + if (this.hasChildren()) { + lastChild = this.getLastChild(); + lastChild.next = child; + firstChild = this.getFirstChild(); + firstChild.prev = child; + } + child.parent = this; + child.next = firstChild; + child.prev = lastChild; + this.children.push(child); + return this; + }, + getChildren: function () { + // Returns the copy. + return this.children.concat(); + }, + hasChildren: function () { + return this.getChildren().length > 0; + }, + getFirstChild: function () { + return _.first(this.children); + }, + getLastChild: function () { + return _.last(this.children); + }, + bindEvent: function (element, events, handler) { + $(element).on(this.addNamespace(events), handler); + return this; + }, + getNext: function () { + var item = this.next; + while (item.isHidden() && this.id !== item.id) { + item = item.next; + } + return item; + }, + getPrev: function () { + var item = this.prev; + while (item.isHidden() && this.id !== item.id) { + item = item.prev; + } + return item; + }, + createElement: function () { + return null; + }, + getRoot: function () { + var item = this; + while (item.parent) { + item = item.parent; + } + return item; + }, + populateElement: function () { + }, + focus: function () { + this.getElement().focus(); + this.closeSiblings(); + return this; + }, + isHidden: function () { + return this.getElement().is(':hidden'); + }, + getSiblings: function () { + var items = [], + item = this; + while (item.next && item.next.id !== this.id) { + item = item.next; + items.push(item); + } + return items; + }, + select: function () { + }, + unselect: function () { + }, + setLabel: function () { + }, + itemHandler: function () { + }, + keyDownHandler: function () { + }, + delegateEvents: function () { + }, + undelegateEvents: function () { + this.getElement().off('.' + this.id); + }, + addNamespace: function (events) { + return _.map(events.split(/\s+/), function (event) { + return event + '.' + this.id; + }, this).join(' '); + } +}); + +const AbstractMenu = AbstractItem.extend({ + delegateEvents: function () { + this.bindEvent(this.getElement(), 'keydown mouseleave mouseover', this.itemHandler.bind(this)) + .bindEvent(this.getElement(), 'contextmenu', function (event) { + event.preventDefault(); + }); + return this; + }, + + populateElement: function () { + var fragment = document.createDocumentFragment(); + + _.each(this.getChildren(), function (child) { + fragment.appendChild(child.populateElement()[0]); + }, this); + + this.appendContent([fragment]); + this.isRendered = true; + return this.getElement(); + }, + + close: function () { + this.closeChildren(); + this.getElement().removeClass('is-opened'); + return this; + }, + + closeChildren: function () { + _.invoke(this.getChildren(), 'close'); + return this; + }, + + itemHandler: function (event) { + event.preventDefault(); + var item = $(event.target).data('menu'); + // eslint-disable-next-line default-case + switch (event.type) { + case 'keydown': + this.keyDownHandler.call(this, event, item); + break; + case 'mouseover': + this.mouseOverHandler.call(this, event, item); + break; + case 'mouseleave': + this.mouseLeaveHandler.call(this, event, item); + break; + } + }, + + keyDownHandler: function () { + }, + mouseOverHandler: function () { + }, + mouseLeaveHandler: function () { + } +}); + +const Menu = AbstractMenu.extend({ + initialize: function (options, contextmenuElement, container) { + this.contextmenuElement = $(contextmenuElement); + this.container = $(container); + this.overlay = this.getOverlay(); + AbstractMenu.prototype.initialize.apply(this, arguments); + this.build(this, this.options.items); + }, + + createElement: function () { + return $('
        ', { + class: ['contextmenu', this.options.prefix + 'contextmenu'].join(' '), + role: 'menu', + tabindex: -1 + }); + }, + + delegateEvents: function () { + AbstractMenu.prototype.delegateEvents.call(this); + this.bindEvent(this.contextmenuElement, 'contextmenu', this.contextmenuHandler.bind(this)) + .bindEvent(window, 'resize', _.debounce(this.close.bind(this), 100)); + return this; + }, + + destroy: function () { + AbstractMenu.prototype.destroy.call(this); + this.overlay.destroy(); + this.contextmenuElement.removeData('contextmenu'); + return this; + }, + + undelegateEvents: function () { + AbstractMenu.prototype.undelegateEvents.call(this); + this.contextmenuElement.off(this.addNamespace('contextmenu')); + this.overlay.undelegateEvents(); + return this; + }, + + appendContent: function (content) { + var $content = $(content); + this.getElement().append($content); + return this; + }, + + addChild: function () { + AbstractMenu.prototype.addChild.apply(this, arguments); + this.next = this.getFirstChild(); + this.prev = this.getLastChild(); + return this; + }, + + build: function (container, items) { + _.each(items, function (item) { + var child; + if (_.has(item, 'items')) { + child = this.build((new Submenu(item, this.contextmenuElement)), item.items); + } else { + child = new MenuItem(item); + } + container.addChild(child); + }, this); + return container; + }, + + focus: function () { + this.getElement().focus(); + return this; + }, + + open: function () { + var $menu = (this.isRendered) ? this.getElement() : this.populateElement(); + this.container.append($menu); + AbstractItem.prototype.open.call(this); + this.overlay.show(this.container); + return this; + }, + + close: function () { + AbstractMenu.prototype.close.call(this); + this.getElement().detach(); + this.overlay.hide(); + return this; + }, + + position: function (event) { + this.getElement().position({ + my: 'left top', + of: event, + collision: 'flipfit flipfit', + within: this.contextmenuElement + }); + + return this; + }, + + pointInContainerBox: function (x, y) { + var containerOffset = this.contextmenuElement.offset(), + containerBox = { + x0: containerOffset.left, + y0: containerOffset.top, + x1: containerOffset.left + this.contextmenuElement.outerWidth(), + y1: containerOffset.top + this.contextmenuElement.outerHeight() + }; + return containerBox.x0 <= x && x <= containerBox.x1 && containerBox.y0 <= y && y <= containerBox.y1; + }, + + getOverlay: function () { + return new Overlay( + this.close.bind(this), + function (event) { + event.preventDefault(); + if (this.pointInContainerBox(event.pageX, event.pageY)) { + this.position(event).focus(); + this.closeChildren(); + } else { + this.close(); + } + }.bind(this) + ); + }, + + contextmenuHandler: function (event) { + event.preventDefault(); + event.stopPropagation(); + this.open().position(event).focus(); + }, + + keyDownHandler: function (event, item) { + var KEY = $.ui.keyCode, + keyCode = event.keyCode; + + // eslint-disable-next-line default-case + switch (keyCode) { + case KEY.UP: + item.getPrev().focus(); + event.stopPropagation(); + break; + case KEY.DOWN: + item.getNext().focus(); + event.stopPropagation(); + break; + case KEY.TAB: + event.stopPropagation(); + break; + case KEY.ESCAPE: + this.close(); + break; + } + + return false; + } +}); + +const Overlay = Component.extend({ + ns: '.overlay', + initialize: function (clickHandler, contextmenuHandler) { + this.element = $('
        ', { + class: 'overlay' + }); + this.clickHandler = clickHandler; + this.contextmenuHandler = contextmenuHandler; + }, + + destroy: function () { + this.getElement().remove(); + this.undelegateEvents(); + }, + + getElement: function () { + return this.element; + }, + + hide: function () { + this.getElement().detach(); + this.undelegateEvents(); + return this; + }, + + show: function (container) { + var $elem = $(this.getElement()); + $(container).append($elem); + this.delegateEvents(); + return this; + }, + + delegateEvents: function () { + var self = this; + $(document) + .on('click' + this.ns, function () { + if (_.isFunction(self.clickHandler)) { + self.clickHandler.apply(this, arguments); + } + self.hide(); + }) + .on('contextmenu' + this.ns, function () { + if (_.isFunction(self.contextmenuHandler)) { + self.contextmenuHandler.apply(this, arguments); + } + }); + return this; + }, + + undelegateEvents: function () { + $(document).off(this.ns); + return this; + } +}); + +const Submenu = AbstractMenu.extend({ + initialize: function (options, contextmenuElement) { + this.contextmenuElement = contextmenuElement; + AbstractMenu.prototype.initialize.apply(this, arguments); + }, + + createElement: function () { + var $spanElem, + $listElem, + $element = $('
      1. ', { + class: ['submenu-item', 'menu-item', this.options.prefix + 'submenu-item'].join(' '), + 'aria-expanded': 'false', + 'aria-haspopup': 'true', + 'aria-labelledby': 'submenu-item-label-' + this.id, + role: 'menuitem', + tabindex: -1 + }); + + $spanElem = $('', { + id: 'submenu-item-label-' + this.id, + text: this.options.label + }); + this.label = $spanElem.appendTo($element); + + $listElem = $('
          ', { + class: ['submenu', this.options.prefix + 'submenu'].join(' '), + role: 'menu' + }); + + this.list = $listElem.appendTo($element); + + return $element; + }, + + appendContent: function (content) { + var $content = $(content); + this.list.append($content); + return this; + }, + + setLabel: function (label) { + this.label.text(label); + return this; + }, + + openKeyboard: function () { + if (this.hasChildren()) { + this.open(); + this.getFirstChild().focus(); + } + return this; + }, + + keyDownHandler: function (event) { + var KEY = $.ui.keyCode, + keyCode = event.keyCode; + + // eslint-disable-next-line default-case + switch (keyCode) { + case KEY.LEFT: + this.close().focus(); + event.stopPropagation(); + break; + case KEY.RIGHT: + case KEY.ENTER: + case KEY.SPACE: + this.openKeyboard(); + event.stopPropagation(); + break; + } + + return false; + }, + + open: function () { + AbstractMenu.prototype.open.call(this); + this.getElement().attr({'aria-expanded': 'true'}); + this.position(); + return this; + }, + + close: function () { + AbstractMenu.prototype.close.call(this); + this.getElement().attr({'aria-expanded': 'false'}); + return this; + }, + + position: function () { + this.list.position({ + my: 'left top', + at: 'right top', + of: this.getElement(), + collision: 'flipfit flipfit', + within: this.contextmenuElement + }); + return this; + }, + + mouseOverHandler: function () { + clearTimeout(this.timer); + this.timer = setTimeout(this.open.bind(this), 200); + this.focus(); + }, + + mouseLeaveHandler: function () { + clearTimeout(this.timer); + this.timer = setTimeout(this.close.bind(this), 200); + this.focus(); + } +}); + +const MenuItem = AbstractItem.extend({ + createElement: function () { + var classNames = [ + 'menu-item', this.options.prefix + 'menu-item', + this.options.isSelected ? 'is-selected' : '' + ].join(' '); + + return $('
        1. ', { + class: classNames, + 'aria-selected': this.options.isSelected ? 'true' : 'false', + role: 'menuitem', + tabindex: -1, + text: this.options.label + }); + }, + + populateElement: function () { + return this.getElement(); + }, + + delegateEvents: function () { + this.bindEvent(this.getElement(), 'click keydown contextmenu mouseover', this.itemHandler.bind(this)); + return this; + }, + + setLabel: function (label) { + this.getElement().text(label); + return this; + }, + + select: function (event) { + this.options.callback.call(this, event, this, this.options); + this.getElement() + .addClass('is-selected') + .attr({'aria-selected': 'true'}); + _.invoke(this.getSiblings(), 'unselect'); + // Hide the menu. + this.getRoot().close(); + return this; + }, + + unselect: function () { + this.getElement() + .removeClass('is-selected') + .attr({'aria-selected': 'false'}); + return this; + }, + + itemHandler: function (event) { + event.preventDefault(); + // eslint-disable-next-line default-case + switch (event.type) { + case 'contextmenu': + case 'click': + this.select(); + break; + case 'mouseover': + this.focus(); + event.stopPropagation(); + break; + case 'keydown': + this.keyDownHandler.call(this, event, this); + break; + } + }, + + keyDownHandler: function (event) { + var KEY = $.ui.keyCode, + keyCode = event.keyCode; + + // eslint-disable-next-line default-case + switch (keyCode) { + case KEY.RIGHT: + event.stopPropagation(); + break; + case KEY.ENTER: + case KEY.SPACE: + this.select(); + event.stopPropagation(); + break; + } + + return false; + } +}); + +const VideoContextMenu = (state, i18n) => { + const speedCallback = (event, menuitem, options) => { + var speed = parseFloat(options.label); + state.videoCommands.execute('speed', speed); + } + const options = { + items: [{ + label: i18n.Play, + callback: function () { + state.videoCommands.execute('togglePlayback'); + }, + initialize: function (menuitem) { + state.el.on({ + play: function () { + menuitem.setLabel(i18n.Pause); + }, + pause: function () { + menuitem.setLabel(i18n.Play); + } + }); + } + }, { + label: state.videoVolumeControl.getMuteStatus() ? i18n.Unmute : i18n.Mute, + callback: function () { + state.videoCommands.execute('toggleMute'); + }, + initialize: function (menuitem) { + state.el.on({ + volumechange: function () { + if (state.videoVolumeControl.getMuteStatus()) { + menuitem.setLabel(i18n.Unmute); + } else { + menuitem.setLabel(i18n.Mute); + } + } + }); + } + }, { + label: i18n['Fill browser'], + callback: function () { + state.videoCommands.execute('toggleFullScreen'); + }, + initialize: function (menuitem) { + state.el.on({ + fullscreen: function (event, isFullscreen) { + if (isFullscreen) { + menuitem.setLabel(i18n['Exit full browser']); + } else { + menuitem.setLabel(i18n['Fill browser']); + } + } + }); + } + }, { + label: i18n.Speed, + items: _.map(state.speeds, function (speed) { + var isSelected = parseFloat(speed) === state.speed; + return { + label: speed + 'x', callback: speedCallback, speed: speed, isSelected: isSelected + }; + }), + initialize: function (menuitem) { + state.el.on({ + speedchange: function (event, speed) { + // eslint-disable-next-line no-shadow + var item = menuitem.getChildren().filter(function (item) { + return item.options.speed === speed; + })[0]; + if (item) { + item.select(); + } + } + }); + } + } + ] + }; + + // eslint-disable-next-line no-shadow + $.fn.contextmenu = (container, options) => { + return this.each(function () { + $(this).data('contextmenu', new Menu(options, this, container)); + }); + }; + + if (!state.isYoutubeType()) { + state.el.find('video').contextmenu(state.el, options); + state.el.on('destroy', function () { + var contextmenu = $(this).find('video').data('contextmenu'); + if (contextmenu) { + contextmenu.destroy(); + } + }); + } + + return $.Deferred().resolve().promise(); +} + +export default VideoContextMenu diff --git a/xmodule/assets/video/public/js/video_control.js b/xmodule/assets/video/public/js/video_control.js new file mode 100644 index 000000000000..f422d5ba6fc5 --- /dev/null +++ b/xmodule/assets/video/public/js/video_control.js @@ -0,0 +1,167 @@ +// VideoControl.js + +import * as Time from 'time.js'; + +/** + * Initializes video control logic. + * @param {Object} state - The shared state object for the video player. + * @returns {Promise} + */ +export default function VideoControl(state) { + return new Promise((resolve) => { + state.videoControl = {}; + + _makeFunctionsPublic(state); + _renderElements(state); + _bindHandlers(state); + + resolve(); + }); +} + +// *************************************************************** +// Private helper functions +// *************************************************************** + +function _makeFunctionsPublic(state) { + const methodsDict = { + destroy, + hideControls, + show, + showControls, + focusFirst, + updateVcrVidTime + }; + + // Equivalent of `state.bindTo(methodsDict, state.videoControl, state)` + for (const [key, fn] of Object.entries(methodsDict)) { + state.videoControl[key] = fn.bind(state); + } +} + +function destroy() { + this.el.removeEventListener('mousemove', this.videoControl.showControls); + this.el.removeEventListener('keydown', this.videoControl.showControls); + this.el.removeEventListener('destroy', this.videoControl.destroy); + this.el.removeEventListener('initialize', this.videoControl.focusFirst); + + if (this.controlHideTimeout) { + clearTimeout(this.controlHideTimeout); + } + + delete this.videoControl; +} + +function _renderElements(state) { + state.videoControl.el = state.el.querySelector('.video-controls'); + state.videoControl.vidTimeEl = state.videoControl.el.querySelector('.vidtime'); + + if (state.videoType === 'html5' && state.config.autohideHtml5) { + state.videoControl.fadeOutTimeout = state.config.fadeOutTimeout; + + state.videoControl.el.classList.add('html5'); + + state.controlHideTimeout = setTimeout( + state.videoControl.hideControls, + state.videoControl.fadeOutTimeout + ); + } +} + +function _bindHandlers(state) { + if (state.videoType === 'html5' && state.config.autohideHtml5) { + state.el.addEventListener('mousemove', state.videoControl.showControls); + state.el.addEventListener('keydown', state.videoControl.showControls); + } + + if (state.config.focusFirstControl) { + state.el.addEventListener('initialize', state.videoControl.focusFirst); + } + + state.el.addEventListener('destroy', state.videoControl.destroy); +} + +// *************************************************************** +// Public methods — bound to state.videoControl +// *************************************************************** + +function focusFirst() { + const firstControl = this.videoControl.el.querySelector('.vcr a, .vcr button'); + if (firstControl) firstControl.focus(); +} + +function show() { + this.videoControl.el.classList.remove('is-hidden'); + const event = new CustomEvent('controls:show', { detail: arguments }); + this.el.dispatchEvent(event); +} + +function showControls() { + if (this.controlShowLock || !this.captionsHidden) return; + + this.controlShowLock = true; + + const el = this.videoControl.el; + + switch (this.controlState) { + case 'invisible': + el.style.display = 'block'; + this.controlState = 'visible'; + break; + + case 'hiding': + el.style.opacity = 1; + el.style.display = 'block'; + this.controlState = 'visible'; + break; + + case 'visible': + clearTimeout(this.controlHideTimeout); + break; + } + + this.controlHideTimeout = setTimeout( + this.videoControl.hideControls, + this.videoControl.fadeOutTimeout + ); + + this.controlShowLock = false; +} + +function hideControls() { + if (!this.captionsHidden) return; + + this.controlHideTimeout = null; + this.controlState = 'hiding'; + + const el = this.videoControl.el; + el.style.transition = `opacity ${this.videoControl.fadeOutTimeout}ms`; + el.style.opacity = 0; + + setTimeout(() => { + el.style.display = 'none'; + this.controlState = 'invisible'; + + this.videoVolumeControl?.el.classList.remove('open'); + this.videoSpeedControl?.el.classList.remove('open'); + + this.focusGrabber?.enableFocusGrabber?.(); + }, this.videoControl.fadeOutTimeout); +} + +function updateVcrVidTime(params) { + let endTime = this.config.endTime ?? params.duration; + endTime = Math.min(endTime, params.duration); + + const startTime = this.config.startTime > 0 ? this.config.startTime : 0; + if (startTime && this.config.endTime) { + endTime = this.config.endTime - startTime; + } + + const currentTime = startTime ? params.time - startTime : params.time; + const formattedTime = `${Time.format(currentTime)} / ${Time.format(endTime)}`; + + if (this.videoControl.vidTimeEl) { + this.videoControl.vidTimeEl.textContent = formattedTime; + } +} diff --git a/xmodule/assets/video/public/js/video_full_screen.js b/xmodule/assets/video/public/js/video_full_screen.js new file mode 100644 index 000000000000..fdf081f496a2 --- /dev/null +++ b/xmodule/assets/video/public/js/video_full_screen.js @@ -0,0 +1,251 @@ +'use strict'; + +import $ from 'jquery'; +import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils'; +import { gettext } from '@edx/frontend-platform/i18n'; + +const fullscreenTemplate = ` + +`; + +const prefixedFullscreenProperties = (() => { + if ('fullscreenEnabled' in document) { + return { + fullscreenElement: 'fullscreenElement', + fullscreenEnabled: 'fullscreenEnabled', + requestFullscreen: 'requestFullscreen', + exitFullscreen: 'exitFullscreen', + fullscreenchange: 'fullscreenchange', + fullscreenerror: 'fullscreenerror' + }; + } + if ('webkitFullscreenEnabled' in document) { + return { + fullscreenElement: 'webkitFullscreenElement', + fullscreenEnabled: 'webkitFullscreenEnabled', + requestFullscreen: 'webkitRequestFullscreen', + exitFullscreen: 'webkitExitFullscreen', + fullscreenchange: 'webkitfullscreenchange', + fullscreenerror: 'webkitfullscreenerror' + }; + } + if ('mozFullScreenEnabled' in document) { + return { + fullscreenElement: 'mozFullScreenElement', + fullscreenEnabled: 'mozFullScreenEnabled', + requestFullscreen: 'mozRequestFullScreen', + exitFullscreen: 'mozCancelFullScreen', + fullscreenchange: 'mozfullscreenchange', + fullscreenerror: 'mozfullscreenerror' + }; + } + if ('msFullscreenEnabled' in document) { + return { + fullscreenElement: 'msFullscreenElement', + fullscreenEnabled: 'msFullscreenEnabled', + requestFullscreen: 'msRequestFullscreen', + exitFullscreen: 'msExitFullscreen', + fullscreenchange: 'MSFullscreenChange', + fullscreenerror: 'MSFullscreenError' + }; + } + return {}; +})(); + +function getVendorPrefixed(property) { + return prefixedFullscreenProperties[property]; +} + +function getFullscreenElement() { + return document[getVendorPrefixed('fullscreenElement')]; +} + +function exitFullscreen() { + return document[getVendorPrefixed('exitFullscreen')]?.() || null; +} + +function requestFullscreen(element, options) { + return element[getVendorPrefixed('requestFullscreen')]?.(options) || null; +} + +function renderElements(state) { + const { videoFullScreen } = state; + videoFullScreen.fullScreenEl = $(fullscreenTemplate); + videoFullScreen.sliderEl = state.el.find('.slider'); + videoFullScreen.fullScreenState = false; + HtmlUtils.append(state.el.find('.secondary-controls'), HtmlUtils.HTML(videoFullScreen.fullScreenEl)); + videoFullScreen.updateControlsHeight(); +} + +function bindHandlers(state) { + const { videoFullScreen } = state; + + videoFullScreen.fullScreenEl.on('click', videoFullScreen.toggleHandler); + state.el.on({ destroy: videoFullScreen.destroy }); + $(document).on('keyup', videoFullScreen.exitHandler); + document.addEventListener(getVendorPrefixed('fullscreenchange'), videoFullScreen.handleFullscreenChange); +} + +function getControlsHeight(controls, slider) { + return controls.height() + 0.5 * slider.height(); +} + +function destroy() { + $(document).off('keyup', this.videoFullScreen.exitHandler); + this.videoFullScreen.fullScreenEl.remove(); + this.el.off({ destroy: this.videoFullScreen.destroy }); + + document.removeEventListener( + getVendorPrefixed('fullscreenchange'), + this.videoFullScreen.handleFullscreenChange + ); + + if (this.isFullScreen) { + this.videoFullScreen.exit(); + } + + delete this.videoFullScreen; +} + +function handleFullscreenChange() { + if (getFullscreenElement() !== this.el[0] && this.isFullScreen) { + this.videoFullScreen.handleExit(); + } +} + +function updateControlsHeight() { + const controls = this.el.find('.video-controls'); + const slider = this.videoFullScreen.sliderEl; + + this.videoFullScreen.height = getControlsHeight(controls, slider); + return this.videoFullScreen.height; +} + +function notifyParent(fullscreenOpen) { + if (window !== window.parent) { + window.parent.postMessage({ + type: 'plugin.videoFullScreen', + payload: { open: fullscreenOpen } + }, document.referrer); + } +} + +function toggleHandler(event) { + event.preventDefault(); + this.videoCommands.execute('toggleFullScreen'); +} + +function handleExit() { + if (!this.isFullScreen) return; + + const fullScreenClassNameEl = this.el.add(document.documentElement); + const closedCaptionsEl = this.el.find('.closed-captions'); + + this.isFullScreen = this.videoFullScreen.fullScreenState = false; + fullScreenClassNameEl.removeClass('video-fullscreen'); + $(window).scrollTop(this.scrollPos); + + this.videoFullScreen.fullScreenEl + .attr({ title: gettext('Fill browser'), 'aria-label': gettext('Fill browser') }) + .find('.icon') + .removeClass('fa-compress') + .addClass('fa-arrows-alt'); + + $(closedCaptionsEl).css({ top: '70%', left: '5%' }); + + if (this.resizer) { + this.resizer.delta.reset().setMode('width'); + } + + this.el.trigger('fullscreen', [this.isFullScreen]); + this.videoFullScreen.notifyParent(false); +} + +function handleEnter() { + if (this.isFullScreen) return; + + const fullScreenClassNameEl = this.el.add(document.documentElement); + const closedCaptionsEl = this.el.find('.closed-captions'); + + this.videoFullScreen.notifyParent(true); + + this.isFullScreen = this.videoFullScreen.fullScreenState = true; + fullScreenClassNameEl.addClass('video-fullscreen'); + + this.videoFullScreen.fullScreenEl + .attr({ title: gettext('Exit full browser'), 'aria-label': gettext('Exit full browser') }) + .find('.icon') + .removeClass('fa-arrows-alt') + .addClass('fa-compress'); + + $(closedCaptionsEl).css({ top: '70%', left: '5%' }); + + if (this.resizer) { + this.resizer.delta.substract(this.videoFullScreen.updateControlsHeight(), 'height').setMode('both'); + } + + this.el.trigger('fullscreen', [this.isFullScreen]); +} + +function enter() { + this.scrollPos = $(window).scrollTop(); + this.videoFullScreen.handleEnter(); + requestFullscreen(this.el[0]); +} + +function exit() { + if (getFullscreenElement() === this.el[0]) { + exitFullscreen(); + } else { + this.videoFullScreen.handleExit(); + } +} + +function toggle() { + if (this.videoFullScreen.fullScreenState) { + this.videoFullScreen.exit(); + } else { + this.videoFullScreen.enter(); + } +} + +function exitHandler(event) { + if (this.isFullScreen && event.keyCode === 27) { + event.preventDefault(); + this.videoCommands.execute('toggleFullScreen'); + } +} + +function makeFunctionsPublic(state) { + const methods = { + destroy, + enter, + exit, + exitHandler, + handleExit, + handleEnter, + handleFullscreenChange, + toggle, + toggleHandler, + updateControlsHeight, + notifyParent + }; + + state.bindTo(methods, state.videoFullScreen, state); +} + +function initializeVideoFullScreen(state) { + const dfd = $.Deferred(); + + state.videoFullScreen = {}; + makeFunctionsPublic(state); + renderElements(state); + bindHandlers(state); + + dfd.resolve(); + return dfd.promise(); +} + +export { initializeVideoFullScreen } \ No newline at end of file diff --git a/xmodule/assets/video/public/js/video_player.js b/xmodule/assets/video/public/js/video_player.js new file mode 100644 index 000000000000..6e0920951c89 --- /dev/null +++ b/xmodule/assets/video/public/js/video_player.js @@ -0,0 +1,912 @@ +'use strict'; +import _ from "underscore"; +import $ from "jquery" + +function VideoPlayer(HTML5Video, HTML5HLSVideo, Resizer, HLS, _, Time) { + const dfd = $.Deferred(), + VideoPlayer = function (state) { + state.videoPlayer = {}; + _makeFunctionsPublic(state); + _initialize(state); + // No callbacks to DOM events (click, mousemove, etc.). + + return dfd.promise(); + }, + /* eslint-disable no-use-before-define */ + methodsDict = { + destroy: destroy, + duration: duration, + handlePlaybackQualityChange: handlePlaybackQualityChange, + + // Added for finer graded seeking control. + // Please see: + // https://developers.google.com/youtube/js_api_reference#Events + isBuffering: isBuffering, + // https://developers.google.com/youtube/js_api_reference#cueVideoById + isCued: isCued, + + isEnded: isEnded, + isPlaying: isPlaying, + isUnstarted: isUnstarted, + onCaptionSeek: onSeek, + onEnded: onEnded, + onError: onError, + onPause: onPause, + onPlay: onPlay, + runTimer: runTimer, + stopTimer: stopTimer, + onLoadMetadataHtml5: onLoadMetadataHtml5, + onPlaybackQualityChange: onPlaybackQualityChange, + onReady: onReady, + onSlideSeek: onSeek, + onSpeedChange: onSpeedChange, + onAutoAdvanceChange: onAutoAdvanceChange, + onStateChange: onStateChange, + onUnstarted: onUnstarted, + onVolumeChange: onVolumeChange, + pause: pause, + play: play, + seekTo: seekTo, + setPlaybackRate: setPlaybackRate, + update: update, + figureOutStartEndTime: figureOutStartEndTime, + figureOutStartingTime: figureOutStartingTime, + updatePlayTime: updatePlayTime + }; + /* eslint-enable no-use-before-define */ + + VideoPlayer.prototype = methodsDict; + + // VideoPlayer() function - what this module "exports". + return VideoPlayer; + + // *************************************************************** + // Private functions start here. + // *************************************************************** + + // function _makeFunctionsPublic(state) + // + // Functions which will be accessible via 'state' object. When called, + // these functions will get the 'state' object as a context. + function _makeFunctionsPublic(state) { + const debouncedF = _.debounce( + function (params) { + // Can't cancel a queued debounced function on destroy + if (state.videoPlayer) { + return onSeek.call(this, params); + } + }.bind(state), + 300 + ); + + state.bindTo(methodsDict, state.videoPlayer, state); + + state.videoPlayer.onSlideSeek = debouncedF; + state.videoPlayer.onCaptionSeek = debouncedF; + } + + // Updates players state, once metadata is loaded for html5 player. + function onLoadMetadataHtml5() { + const player = this.videoPlayer.player.videoEl, + videoWidth = player[0].videoWidth || player.width(), + videoHeight = player[0].videoHeight || player.height(); + + _resize(this, videoWidth, videoHeight); + _updateVcrAndRegion(this); + } + + // function _initialize(state) + // + // Create any necessary DOM elements, attach them, and set their + // initial configuration. Also make the created DOM elements available + // via the 'state' object. Much easier to work this way - you don't + // have to do repeated jQuery element selects. + // eslint-disable-next-line no-underscore-dangle + function _initialize(state) { + let youTubeId, + player, + userAgent, + commonPlayerConfig, + eventToBeTriggered = 'loadedmetadata'; + + // The function is called just once to apply pre-defined configurations + // by student before video starts playing. Waits until the video's + // metadata is loaded, which normally happens just after the video + // starts playing. Just after that configurations can be applied. + state.videoPlayer.ready = _.once(function () { + if (!state.isFlashMode() && state.speed != '1.0') { + state.videoPlayer.setPlaybackRate(state.speed); + } + }); + + if (state.isYoutubeType()) { + state.videoPlayer.PlayerState = YT.PlayerState; + state.videoPlayer.PlayerState.UNSTARTED = -1; + } else { + state.videoPlayer.PlayerState = HTML5Video.PlayerState; + } + + state.videoPlayer.currentTime = 0; + + state.videoPlayer.goToStartTime = true; + state.videoPlayer.stopAtEndTime = true; + + state.videoPlayer.playerVars = { + controls: 0, + wmode: 'transparent', + rel: 0, + showinfo: 0, + enablejsapi: 1, + modestbranding: 1, + cc_load_policy: 0 + }; + + if (!state.isFlashMode()) { + state.videoPlayer.playerVars.html5 = 1; + } + + // Detect the current browser for several browser-specific work-arounds. + userAgent = navigator.userAgent.toLowerCase(); + state.browserIsFirefox = userAgent.indexOf('firefox') > -1; + state.browserIsChrome = userAgent.indexOf('chrome') > -1; + // Chrome includes both "Chrome" and "Safari" in the user agent. + state.browserIsSafari = (userAgent.indexOf('safari') > -1 + && !state.browserIsChrome); + + // Browser can play HLS videos if either `Media Source Extensions` + // feature is supported or browser is safari (native HLS support) + state.canPlayHLS = state.HLSVideoSources.length > 0 && (HLS.isSupported() || state.browserIsSafari); + state.HLSOnlySources = state.config.sources.length > 0 + && state.config.sources.length === state.HLSVideoSources.length; + + commonPlayerConfig = { + playerVars: state.videoPlayer.playerVars, + videoSources: state.config.sources, + poster: state.config.poster, + browserIsSafari: state.browserIsSafari, + events: { + onReady: state.videoPlayer.onReady, + onStateChange: state.videoPlayer.onStateChange, + onError: state.videoPlayer.onError + } + }; + + if (state.videoType === 'html5') { + if (state.canPlayHLS || state.HLSOnlySources) { + state.videoPlayer.player = new HTML5HLSVideo.Player( + state.el, + _.extend({}, commonPlayerConfig, { + state: state, + onReadyHLS: function () { dfd.resolve(); }, + videoSources: state.HLSVideoSources, + canPlayHLS: state.canPlayHLS, + HLSOnlySources: state.HLSOnlySources + }) + ); + // `loadedmetadata` event triggered too early on Safari due + // to which correct video dimensions were not calculated + eventToBeTriggered = state.browserIsSafari ? 'loadeddata' : eventToBeTriggered; + } else { + state.videoPlayer.player = new HTML5Video.Player(state.el, commonPlayerConfig); + } + // eslint-disable-next-line no-multi-assign + player = state.videoEl = state.videoPlayer.player.videoEl; + player[0].addEventListener(eventToBeTriggered, state.videoPlayer.onLoadMetadataHtml5, false); + player.on('remove', state.videoPlayer.destroy); + } else { + youTubeId = state.youtubeId(); + + state.videoPlayer.player = new YT.Player(state.id, { + playerVars: state.videoPlayer.playerVars, + videoId: youTubeId, + events: { + onReady: state.videoPlayer.onReady, + onStateChange: state.videoPlayer.onStateChange, + onPlaybackQualityChange: state.videoPlayer.onPlaybackQualityChange, + onError: state.videoPlayer.onError + } + }); + + state.el.on('initialize', function () { + // eslint-disable-next-line no-shadow, no-multi-assign + const player = state.videoEl = state.el.find('iframe'), + videoWidth = player.attr('width') || player.width(), + videoHeight = player.attr('height') || player.height(); + + player.on('remove', state.videoPlayer.destroy); + + _resize(state, videoWidth, videoHeight); + _updateVcrAndRegion(state, true); + }); + } + + if (state.isTouch) { + dfd.resolve(); + } + } + + function _updateVcrAndRegion(state, isYoutube) { + // eslint-disable-next-line no-shadow + let update = function (state) { + // eslint-disable-next-line no-shadow + let duration = state.videoPlayer.duration(), + time; + + time = state.videoPlayer.figureOutStartingTime(duration); + + // Update the VCR. + state.trigger( + 'videoControl.updateVcrVidTime', + { + time: time, + duration: duration + } + ); + + // Update the time slider. + state.trigger( + 'videoProgressSlider.updateStartEndTimeRegion', + { + duration: duration + } + ); + state.trigger( + 'videoProgressSlider.updatePlayTime', + { + time: time, + duration: duration + } + ); + }; + + // After initialization, update the VCR with total time. + // At this point only the metadata duration is available (not + // very precise), but it is better than having 00:00:00 for + // total time. + if (state.youtubeMetadataReceived || !isYoutube) { + // Metadata was already received, and is available. + update(state); + } else { + // We wait for metadata to arrive, before we request the update + // of the VCR video time, and of the start-end time region. + // Metadata contains duration of the video. + state.el.on('metadata_received', function () { + update(state); + }); + } + } + + function _resize(state, videoWidth, videoHeight) { + state.resizer = new Resizer({ + element: state.videoEl, + elementRatio: videoWidth / videoHeight, + container: state.container + }) + .callbacks.once(function () { + state.el.trigger('caption:resize'); + }) + .setMode('width'); + + // Update captions size when controls becomes visible on iPad or Android + if (/iPad|Android/i.test(state.isTouch[0])) { + state.el.on('controls:show', function () { + state.el.trigger('caption:resize'); + }); + } + + $(window).on('resize.video', _.debounce(function () { + state.trigger('videoFullScreen.updateControlsHeight', null); + state.el.trigger('caption:resize'); + state.resizer.align(); + }, 100)); + } + + // function _restartUsingFlash(state) + // + // When we are about to play a YouTube video in HTML5 mode and discover + // that we only have one available playback rate, we will switch to + // Flash mode. In Flash speed switching is done by reloading videos + // recorded at different frame rates. + function _restartUsingFlash(state) { + // Remove from the page current iFrame with HTML5 video. + state.videoPlayer.player.destroy(); + + state.setPlayerMode('flash'); + + console.log('[Video info]: Changing YouTube player mode to "flash".'); + + // Removed configuration option that requests the HTML5 mode. + delete state.videoPlayer.playerVars.html5; + + // Request for the creation of a new Flash player + state.videoPlayer.player = new YT.Player(state.id, { + playerVars: state.videoPlayer.playerVars, + videoId: state.youtubeId(), + events: { + onReady: state.videoPlayer.onReady, + onStateChange: state.videoPlayer.onStateChange, + onPlaybackQualityChange: state.videoPlayer.onPlaybackQualityChange, + onError: state.videoPlayer.onError + } + }); + + _updateVcrAndRegion(state, true); + state.el.trigger('caption:fetch'); + state.resizer.setElement(state.el.find('iframe')).align(); + } + + // *************************************************************** + // Public functions start here. + // These are available via the 'state' object. Their context ('this' + // keyword) is the 'state' object. The magic private function that makes + // them available and sets up their context is makeFunctionsPublic(). + // *************************************************************** + + function destroy() { + const player = this.videoPlayer.player; + this.el.removeClass([ + 'is-unstarted', 'is-playing', 'is-paused', 'is-buffered', + 'is-ended', 'is-cued' + ].join(' ')); + $(window).off('.video'); + this.el.trigger('destroy'); + this.el.off(); + this.videoPlayer.stopTimer(); + if (this.resizer && this.resizer.destroy) { + this.resizer.destroy(); + } + if (player && player.video) { + player.video.removeEventListener('loadedmetadata', this.videoPlayer.onLoadMetadataHtml5, false); + } + if (player && _.isFunction(player.destroy)) { + player.destroy(); + } + if (this.canPlayHLS && player.hls) { + player.hls.destroy(); + } + delete this.videoPlayer; + } + + function pause() { + if (this.videoPlayer.player.pauseVideo) { + this.videoPlayer.player.pauseVideo(); + } + } + + function play() { + if (this.videoPlayer.player.playVideo) { + if (this.videoPlayer.isEnded()) { + // When the video will start playing again from the start, the + // start-time and end-time will come back into effect. + this.videoPlayer.goToStartTime = true; + } + + this.videoPlayer.player.playVideo(); + } + } + + // This function gets the video's current play position in time + // (currentTime) and its duration. + // It is called at a regular interval when the video is playing. + function update(time) { + this.videoPlayer.currentTime = time || this.videoPlayer.player.getCurrentTime(); + + if (isFinite(this.videoPlayer.currentTime)) { + this.videoPlayer.updatePlayTime(this.videoPlayer.currentTime); + + // We need to pause the video if current time is smaller (or equal) + // than end-time. Also, we must make sure that this is only done + // once per video playing from start to end. + if ( + this.videoPlayer.endTime !== null + && this.videoPlayer.endTime <= this.videoPlayer.currentTime + ) { + this.videoPlayer.pause(); + + this.trigger('videoProgressSlider.notifyThroughHandleEnd', { + end: true + }); + + this.el.trigger('stop'); + } + this.el.trigger('timeupdate', [this.videoPlayer.currentTime]); + } + } + + function setPlaybackRate(newSpeed) { + this.videoPlayer.player.setPlaybackRate(newSpeed); + } + + function onSpeedChange(newSpeed) { + const time = this.videoPlayer.currentTime; + + if (this.isFlashMode()) { + this.videoPlayer.currentTime = Time.convert( + time, + parseFloat(this.speed), + newSpeed + ); + } + + newSpeed = parseFloat(newSpeed); + this.setSpeed(newSpeed); + this.videoPlayer.setPlaybackRate(newSpeed); + } + + function onAutoAdvanceChange(enabled) { + this.setAutoAdvance(enabled); + } + + // Every 200 ms, if the video is playing, we call the function update, via + // clearInterval. This interval is called updateInterval. + // It is created on a onPlay event. Cleared on a onPause event. + // Reinitialized on a onSeek event. + function onSeek(params) { + const time = params.time, + type = params.type, + oldTime = this.videoPlayer.currentTime; + // After the user seeks, the video will start playing from + // the sought point, and stop playing at the end. + this.videoPlayer.goToStartTime = false; + + this.videoPlayer.seekTo(time); + + this.el.trigger('seek', [time, oldTime, type]); + } + + function seekTo(time) { + // eslint-disable-next-line no-shadow + const duration = this.videoPlayer.duration(); + + if ((typeof time !== 'number') || (time > duration) || (time < 0)) { + return false; + } + + this.el.off('play.seek'); + + if (this.videoPlayer.isPlaying()) { + this.videoPlayer.stopTimer(); + } + const isUnplayed = this.videoPlayer.isUnstarted() + || this.videoPlayer.isCued(); + + // Use `cueVideoById` method for youtube video that is not played before. + if (isUnplayed && this.isYoutubeType()) { + this.videoPlayer.player.cueVideoById(this.youtubeId(), time); + } else { + // Youtube video cannot be rewinded during bufferization, so wait to + // finish bufferization and then rewind the video. + if (this.isYoutubeType() && this.videoPlayer.isBuffering()) { + this.el.on('play.seek', function () { + this.videoPlayer.player.seekTo(time, true); + }.bind(this)); + } else { + // Otherwise, just seek the video + this.videoPlayer.player.seekTo(time, true); + } + } + + this.videoPlayer.updatePlayTime(time, true); + + // the timer is stopped above; restart it. + if (this.videoPlayer.isPlaying()) { + this.videoPlayer.runTimer(); + } + // Update the the current time when user seek. (YoutubePlayer) + this.videoPlayer.currentTime = time; + } + + function runTimer() { + if (!this.videoPlayer.updateInterval) { + this.videoPlayer.updateInterval = window.setInterval( + this.videoPlayer.update, 200 + ); + + this.videoPlayer.update(); + } + } + + function stopTimer() { + window.clearInterval(this.videoPlayer.updateInterval); + delete this.videoPlayer.updateInterval; + } + + function onEnded() { + const time = this.videoPlayer.duration(); + + this.trigger('videoProgressSlider.notifyThroughHandleEnd', { + end: true + }); + + if (this.videoPlayer.skipOnEndedStartEndReset) { + this.videoPlayer.skipOnEndedStartEndReset = undefined; + } + // Sometimes `onEnded` events fires when `currentTime` not equal + // `duration`. In this case, slider doesn't reach the end point of + // timeline. + this.videoPlayer.updatePlayTime(time); + + // Emit 'pause_video' event when a video ends if Player is of Youtube + if (this.isYoutubeType()) { + this.el.trigger('pause', arguments); + } + this.el.trigger('ended', arguments); + } + + function onPause() { + this.videoPlayer.stopTimer(); + this.el.trigger('pause', arguments); + } + + function onPlay() { + this.videoPlayer.runTimer(); + this.trigger('videoProgressSlider.notifyThroughHandleEnd', { + end: false + }); + this.videoPlayer.ready(); + this.el.trigger('play', arguments); + } + + function onUnstarted() { } + + function handlePlaybackQualityChange(value) { + this.videoPlayer.player.setPlaybackQuality(value); + } + + function onPlaybackQualityChange() { + let quality; + + quality = this.videoPlayer.player.getPlaybackQuality(); + + this.trigger('videoQualityControl.onQualityChange', quality); + this.el.trigger('qualitychange', arguments); + } + + function onReady() { + let _this = this, + availablePlaybackRates, baseSpeedSubs, + player, videoWidth, videoHeight; + + dfd.resolve(); + + this.el.on('speedchange', function (event, speed) { + _this.videoPlayer.onSpeedChange(speed); + }); + + this.el.on('autoadvancechange', function (event, enabled) { + _this.videoPlayer.onAutoAdvanceChange(enabled); + }); + + this.el.on('volumechange volumechange:silent', function (event, volume) { + _this.videoPlayer.onVolumeChange(volume); + }); + + availablePlaybackRates = this.videoPlayer.player + .getAvailablePlaybackRates(); + + // Because of problems with muting sound outside of range 0.25 and + // 5.0, we should filter our available playback rates. + // Issues: + // https://code.google.com/p/chromium/issues/detail?id=264341 + // https://bugzilla.mozilla.org/show_bug.cgi?id=840745 + // https://developer.mozilla.org/en-US/docs/DOM/HTMLMediaElement + + availablePlaybackRates = _.filter( + availablePlaybackRates, + function (item) { + const speed = Number(item); + return speed > 0.25 && speed <= 5; + } + ); + + // Because of a recent change in the YouTube API (not documented), sometimes + // HTML5 mode loads after Flash mode has been loaded. In this case we have + // multiple speeds available but the variable `this.currentPlayerMode` is + // set to "flash". This is impossible because in Flash mode we can have + // only one speed available. Therefore we must execute the following code + // block if we have multiple speeds or if `this.currentPlayerMode` is set to + // "html5". If any of the two conditions are true, we then set the variable + // `this.currentPlayerMode` to "html5". + // + // For more information, please see the PR that introduced this change: + // https://github.com/openedx/edx-platform/pull/2841 + if ( + (this.isHtml5Mode() || availablePlaybackRates.length > 1) + && this.isYoutubeType() + ) { + if (availablePlaybackRates.length === 1 && !this.isTouch) { + // This condition is needed in cases when Firefox version is + // less than 20. In those versions HTML5 playback could only + // happen at 1 speed (no speed changing). Therefore, in this + // case, we need to switch back to Flash. + // + // This might also happen in other browsers, therefore when we + // have 1 speed available, we fall back to Flash. + + _restartUsingFlash(this); + return false; + } else if (availablePlaybackRates.length > 1) { + this.setPlayerMode('html5'); + + // We need to synchronize available frame rates with the ones + // that the user specified. + + baseSpeedSubs = this.videos['1.0']; + // this.videos is a dictionary containing various frame rates + // and their associated subs. + + // First clear the dictionary. + $.each(this.videos, function (index, value) { + delete _this.videos[index]; + }); + this.speeds = []; + // Recreate it with the supplied frame rates. + $.each(availablePlaybackRates, function (index, value) { + const key = value.toFixed(2).replace(/\.00$/, '.0'); + + _this.videos[key] = baseSpeedSubs; + _this.speeds.push(key); + }); + + this.setSpeed(this.speed); + this.el.trigger('speed:render', [this.speeds, this.speed]); + } + } + + if (this.isFlashMode()) { + this.setSpeed(this.speed); + this.el.trigger('speed:set', [this.speed]); + } + + if (this.isHtml5Mode()) { + this.videoPlayer.player.setPlaybackRate(this.speed); + } + + // eslint-disable-next-line no-shadow + const duration = this.videoPlayer.duration(), + time = this.videoPlayer.figureOutStartingTime(duration); + + // this.duration will be set initially only if duration is coming from edx-val + this.duration = this.duration || duration; + + if (time > 0 && this.videoPlayer.goToStartTime) { + this.videoPlayer.seekTo(time); + } + + this.el.trigger('ready', arguments); + + if (this.config.autoplay) { + this.videoPlayer.play(); + } + } + + function onStateChange(event) { + this.el.removeClass([ + 'is-unstarted', 'is-playing', 'is-paused', 'is-buffered', + 'is-ended', 'is-cued' + ].join(' ')); + + // eslint-disable-next-line default-case + switch (event.data) { + case this.videoPlayer.PlayerState.UNSTARTED: + this.el.addClass('is-unstarted'); + this.videoPlayer.onUnstarted(); + break; + case this.videoPlayer.PlayerState.PLAYING: + this.el.addClass('is-playing'); + this.videoPlayer.onPlay(); + break; + case this.videoPlayer.PlayerState.PAUSED: + this.el.addClass('is-paused'); + this.videoPlayer.onPause(); + break; + case this.videoPlayer.PlayerState.BUFFERING: + this.el.addClass('is-buffered'); + this.el.trigger('buffering'); + break; + case this.videoPlayer.PlayerState.ENDED: + this.el.addClass('is-ended'); + this.videoPlayer.onEnded(); + break; + case this.videoPlayer.PlayerState.CUED: + this.el.addClass('is-cued'); + if (this.isFlashMode()) { + this.videoPlayer.play(); + } + break; + } + } + + function onError(code) { + this.el.trigger('error', [code]); + } + + // eslint-disable-next-line no-shadow + function figureOutStartEndTime(duration) { + const videoPlayer = this.videoPlayer; + + videoPlayer.startTime = this.config.startTime; + if (videoPlayer.startTime >= duration) { + videoPlayer.startTime = 0; + } else if (this.isFlashMode()) { + videoPlayer.startTime /= Number(this.speed); + } + + videoPlayer.endTime = this.config.endTime; + if ( + videoPlayer.endTime <= videoPlayer.startTime + || videoPlayer.endTime >= duration + ) { + videoPlayer.endTime = null; + } else if (this.isFlashMode()) { + videoPlayer.endTime /= Number(this.speed); + } + } + + // eslint-disable-next-line no-shadow + function figureOutStartingTime(duration) { + let savedVideoPosition = this.config.savedVideoPosition, + + // Default starting time is 0. This is the case when + // there is not start-time, no previously saved position, + // or one (or both) of those values is incorrect. + time = 0, + + startTime, endTime; + + this.videoPlayer.figureOutStartEndTime(duration); + + startTime = this.videoPlayer.startTime; + endTime = this.videoPlayer.endTime; + + if (startTime > 0) { + if ( + startTime < savedVideoPosition + && (endTime > savedVideoPosition || endTime === null) + + // We do not want to jump to the end of the video. + // We subtract 1 from the duration for a 1 second + // safety net. + && savedVideoPosition < duration - 1 + ) { + time = savedVideoPosition; + } else { + time = startTime; + } + } else if ( + savedVideoPosition > 0 + && (endTime > savedVideoPosition || endTime === null) + + // We do not want to jump to the end of the video. + // We subtract 1 from the duration for a 1 second + // safety net. + && savedVideoPosition < duration - 1 + ) { + time = savedVideoPosition; + } + + return time; + } + + function updatePlayTime(time, skip_seek) { + let videoPlayer = this.videoPlayer, + endTime = this.videoPlayer.duration(), + youTubeId; + + if (this.config.endTime) { + endTime = Math.min(this.config.endTime, endTime); + } + + this.trigger( + 'videoProgressSlider.updatePlayTime', + { + time: time, + duration: endTime + } + ); + + this.trigger( + 'videoControl.updateVcrVidTime', + { + time: time, + duration: endTime + } + ); + + this.el.trigger('caption:update', [time]); + } + + function isEnded() { + let playerState = this.videoPlayer.player.getPlayerState(), + ENDED = this.videoPlayer.PlayerState.ENDED; + + return playerState === ENDED; + } + + function isPlaying() { + let playerState = this.videoPlayer.player.getPlayerState(); + + return playerState === this.videoPlayer.PlayerState.PLAYING; + } + + function isBuffering() { + let playerState = this.videoPlayer.player.getPlayerState(); + + return playerState === this.videoPlayer.PlayerState.BUFFERING; + } + + function isCued() { + let playerState = this.videoPlayer.player.getPlayerState(); + + return playerState === this.videoPlayer.PlayerState.CUED; + } + + function isUnstarted() { + let playerState = this.videoPlayer.player.getPlayerState(); + + return playerState === this.videoPlayer.PlayerState.UNSTARTED; + } + + /* +* Return the duration of the video in seconds. +* +* First, try to use the native player API call to get the duration. +* If the value returned by the native function is not valid, resort to +* the value stored in the metadata for the video. Note that the metadata +* is available only for YouTube videos. +* +* IMPORTANT! It has been observed that sometimes, after initial playback +* of the video, when operations "pause" and "play" are performed (in that +* sequence), the function will start returning a slightly different value. +* +* For example: While playing for the first time, the function returns 31. +* After pausing the video and then resuming once more, the function will +* start returning 31.950656. +* +* This instability is internal to the player API (or browser internals). +*/ + function duration() { + let dur; + + // Sometimes the YouTube API doesn't finish instantiating all of it's + // methods, but the execution point arrives here. + // + // This happens when you have start-time and end-time set, and click "Edit" + // in Studio, and then "Save". The Video editor dialog closes, the + // video reloads, but the start-end range is not visible. + if (this.videoPlayer.player.getDuration) { + dur = this.videoPlayer.player.getDuration(); + } + + // For YouTube videos, before the video starts playing, the API + // function player.getDuration() will return 0. This means that the VCR + // will show total time as 0 when the page just loads (before the user + // clicks the Play button). + // + // We can do betterin a case when dur is 0 (or less than 0). We can ask + // the getDuration() function for total time, which will query the + // metadata for a duration. + // + // Be careful! Often the metadata duration is not very precise. It + // might differ by one or two seconds against the actual time as will + // be reported later on by the player.getDuration() API function. + if (!isFinite(dur) || dur <= 0) { + if (this.isYoutubeType()) { + dur = this.getDuration(); + } + } + + // Just in case the metadata is garbled, or something went wrong, we + // have a final check. + if (!isFinite(dur) || dur <= 0) { + dur = 0; + } + + return Math.floor(dur); + } + + function onVolumeChange(volume) { + this.videoPlayer.player.setVolume(volume); + } +}; +export { VideoPlayer } \ No newline at end of file diff --git a/xmodule/assets/video/public/js/video_progress_slider.js b/xmodule/assets/video/public/js/video_progress_slider.js new file mode 100644 index 000000000000..a1c75f471fe2 --- /dev/null +++ b/xmodule/assets/video/public/js/video_progress_slider.js @@ -0,0 +1,236 @@ +'use strict'; +import $ from 'jquery'; +import edx from 'edx-ui-toolkit/js/utils/html-utils'; +import { gettext, ngettext, interpolate } from '@edx/frontend-platform/i18n'; + +/** + * "This is as true in everyday life as it is in battle: we are given one life + * and the decision is ours whether to wait for circumstances to make up our + * mind, or whether to act, and in acting, to live." + * — Omar N. Bradley + */ + +const sliderTemplate = ` +
          +`; + +export default function initializeVideoProgressSlider(state) { + const dfd = $.Deferred(); + state.videoProgressSlider = {}; + makeFunctionsPublic(state); + renderElements(state); + dfd.resolve(); + return dfd.promise(); +} + +function makeFunctionsPublic(state) { + const methods = { + destroy, + buildSlider, + getRangeParams, + onSlide, + onStop, + updatePlayTime, + updateStartEndTimeRegion, + notifyThroughHandleEnd, + getTimeDescription, + focusSlider + }; + + state.bindTo(methods, state.videoProgressSlider, state); +} + +function renderElements(state) { + state.videoProgressSlider.el = $(sliderTemplate); + state.el.find('.video-controls').prepend(state.videoProgressSlider.el); + state.videoProgressSlider.buildSlider(); + buildHandle(state); + bindHandlers(state); +} + +function bindHandlers(state) { + state.videoProgressSlider.el.on('keypress', sliderToggle.bind(state)); + state.el.on('destroy', state.videoProgressSlider.destroy); +} + +function destroy() { + this.videoProgressSlider.el.removeAttr('tabindex').slider('destroy'); + this.el.off('destroy', this.videoProgressSlider.destroy); + delete this.videoProgressSlider; +} + +function buildHandle(state) { + const handle = state.videoProgressSlider.el.find('.ui-slider-handle'); + state.videoProgressSlider.handle = handle; + + state.videoProgressSlider.el.attr({ tabindex: -1 }); + + handle.attr({ + role: 'slider', + 'aria-disabled': false, + 'aria-valuetext': getTimeDescription(state.videoProgressSlider.slider.slider('option', 'value')), + 'aria-valuemax': state.videoPlayer.duration(), + 'aria-valuemin': '0', + 'aria-valuenow': state.videoPlayer.currentTime, + tabindex: '0', + 'aria-label': gettext('Video position. Press space to toggle playback') + }); +} + +function buildSlider() { + const sliderContents = edx.HtmlUtils.joinHtml( + edx.HtmlUtils.HTML('
          ') + ); + + this.videoProgressSlider.el.append(sliderContents.text); + + this.videoProgressSlider.slider = this.videoProgressSlider.el.slider({ + range: 'min', + min: this.config.startTime, + max: this.config.endTime, + slide: this.videoProgressSlider.onSlide, + stop: this.videoProgressSlider.onStop, + step: 5 + }); + + this.videoProgressSlider.sliderProgress = this.videoProgressSlider.slider.find( + '.ui-slider-range.ui-widget-header.ui-slider-range-min' + ); +} + +function updateStartEndTimeRegion(params) { + if (!params.duration) return; + + let start = this.config.startTime; + let end = this.config.endTime; + const duration = params.duration; + + if (start > duration) start = 0; + else if (this.isFlashMode()) start /= Number(this.speed); + + if (end === null || end > duration) end = duration; + else if (this.isFlashMode()) end /= Number(this.speed); + + if (start === 0 && end === duration) return; + + return getRangeParams(start, end, duration); +} + +function getRangeParams(startTime, endTime, duration) { + const step = 100 / duration; + const left = startTime * step; + const width = endTime * step - left; + + return { + left: `${left}%`, + width: `${width}%` + }; +} + +function onSlide(event, ui) { + const time = ui.value; + let endTime = this.videoPlayer.duration(); + + if (this.config.endTime) { + endTime = Math.min(this.config.endTime, endTime); + } + + this.videoProgressSlider.frozen = true; + this.videoProgressSlider.lastSeekValue = time; + + this.trigger('videoControl.updateVcrVidTime', { time, duration: endTime }); + this.trigger('videoPlayer.onSlideSeek', { type: 'onSlideSeek', time }); + + this.videoProgressSlider.handle.attr('aria-valuetext', getTimeDescription(this.videoPlayer.currentTime)); +} + +function onStop(event, ui) { + const _this = this; + this.videoProgressSlider.frozen = true; + + if (this.videoProgressSlider.lastSeekValue !== ui.value) { + this.trigger('videoPlayer.onSlideSeek', { type: 'onSlideSeek', time: ui.value }); + } + + this.videoProgressSlider.handle.attr('aria-valuetext', getTimeDescription(this.videoPlayer.currentTime)); + + setTimeout(() => { + _this.videoProgressSlider.frozen = false; + }, 200); +} + +function updatePlayTime(params) { + const time = Math.floor(params.time); + let endTime = Math.floor(params.duration); + + if (this.config.endTime !== null) { + endTime = Math.min(this.config.endTime, endTime); + } + + if (this.videoProgressSlider.slider && !this.videoProgressSlider.frozen) { + this.videoProgressSlider.slider + .slider('option', 'max', endTime) + .slider('option', 'value', time); + } + + this.videoProgressSlider.handle.attr({ + 'aria-valuemax': endTime, + 'aria-valuenow': time + }); +} + +function notifyThroughHandleEnd(params) { + const handle = this.videoProgressSlider.handle; + if (params.end) { + handle.attr('title', gettext('Video ended')).focus(); + } else { + handle.attr('title', gettext('Video position')); + } +} + +function getTimeDescription(time) { + let seconds = Math.floor(time); + let minutes = Math.floor(seconds / 60); + let hours = Math.floor(minutes / 60); + + seconds %= 60; + minutes %= 60; + + const i18n = (value, word) => { + let msg; + switch (word) { + case 'hour': + msg = ngettext('%(value)s hour', '%(value)s hours', value); + break; + case 'minute': + msg = ngettext('%(value)s minute', '%(value)s minutes', value); + break; + case 'second': + msg = ngettext('%(value)s second', '%(value)s seconds', value); + break; + } + return interpolate(msg, { value }, true); + }; + + if (hours) { + return `${i18n(hours, 'hour')} ${i18n(minutes, 'minute')} ${i18n(seconds, 'second')}`; + } else if (minutes) { + return `${i18n(minutes, 'minute')} ${i18n(seconds, 'second')}`; + } + + return i18n(seconds, 'second'); +} + +function focusSlider() { + this.videoProgressSlider.handle.attr( + 'aria-valuetext', getTimeDescription(this.videoPlayer.currentTime) + ); + this.videoProgressSlider.el.trigger('focus'); +} + +function sliderToggle(e) { + if (e.which === 32) { + e.preventDefault(); + this.videoCommands.execute('togglePlayback'); + } +} diff --git a/xmodule/assets/video/public/js/video_quality_control.js b/xmodule/assets/video/public/js/video_quality_control.js new file mode 100644 index 000000000000..ecb856e971ca --- /dev/null +++ b/xmodule/assets/video/public/js/video_quality_control.js @@ -0,0 +1,186 @@ + +import { interpolateHtml, HTML } from 'edx-ui-toolkit/js/utils/html-utils'; +import _ from 'underscore'; +import * as gettext from 'gettext'; + +/** + * Creates the VideoQualityControl module. + * @param {object} state The object containing the state of the video player. + * @returns {Promise|undefined} A promise that resolves when the module is initialized, or undefined if not applicable. + */ +const VideoQualityControl = function (state) { + // Changing quality for now only works for YouTube videos. + if (state.videoType !== 'youtube') { + return; + } + + this.state = state; + this.videoQualityControl = { + el: null, + quality: 'large' + }; + + this._makeFunctionsPublic(state); + this._renderElements(state); + this._bindHandlers(state); + + return Promise.resolve(); +}; + +/** + * Makes the VideoQualityControl functions accessible via the 'state' object. + * @param {object} state The object containing the state of the video player. + */ +VideoQualityControl.prototype._makeFunctionsPublic = function (state) { + const methodsDict = { + destroy: this.destroy.bind(this), + fetchAvailableQualities: this.fetchAvailableQualities.bind(this), + onQualityChange: this.onQualityChange.bind(this), + showQualityControl: this.showQualityControl.bind(this), + toggleQuality: this.toggleQuality.bind(this) + }; + + state.bindTo(methodsDict, state.videoQualityControl, state); +}; + +VideoQualityControl.prototype.template = interpolateHtml( + HTML([ + '' + ].join('')), + { + highDefinition: gettext('High Definition'), // Assuming gettext is globally available or imported + off: gettext('off') // Assuming gettext is globally available or imported + } +); + +VideoQualityControl.prototype.destroy = function () { + if (this.videoQualityControl.el) { + this.videoQualityControl.el.removeEventListener('click', this.videoQualityControl.toggleQuality); + this.videoQualityControl.el.remove(); + } + if (this.state && this.state.el) { + this.state.el.removeEventListener('play.quality', this.fetchAvailableQualities); + this.state.el.removeEventListener('destroy.quality', this.destroy); + } + delete this.state.videoQualityControl; +}; + +/** + * Creates and appends the DOM elements for the quality control. + * @param {object} state The object containing the state of the video player. + */ +VideoQualityControl.prototype._renderElements = function (state) { + this.videoQualityControl.el = this.createDOMElement(this.template.toString()); + const secondaryControls = state.el.querySelector('.secondary-controls'); + if (secondaryControls && this.videoQualityControl.el) { + secondaryControls.appendChild(this.videoQualityControl.el); + } +}; + +/** + * Creates a DOM element from an HTML string. + * @param {string} htmlString The HTML string to create the element from. + * @returns {HTMLElement} The created DOM element. + */ +VideoQualityControl.prototype.createDOMElement = function (htmlString) { + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = htmlString.trim(); + return tempDiv.firstChild; +}; + +/** + * Binds event handlers for the quality control. + * @param {object} state The object containing the state of the video player. + */ +VideoQualityControl.prototype._bindHandlers = function (state) { + if (this.videoQualityControl.el) { + this.videoQualityControl.el.addEventListener('click', this.toggleQuality); + } + if (state && state.el) { + state.el.addEventListener('play', this.fetchAvailableQualities.bind(this), { once: true }); + state.el.addEventListener('destroy', this.destroy.bind(this)); + } +}; + +/** + * Shows the quality control button. This function will only be called if HD qualities are available. + */ +VideoQualityControl.prototype.showQualityControl = function () { + if (this.videoQualityControl.el) { + this.videoQualityControl.el.classList.remove('is-hidden'); + } +}; + +/** + * Gets the available qualities from the YouTube API. Possible values are: + * ['highres', 'hd1080', 'hd720', 'large', 'medium', 'small']. + * HD are: ['highres', 'hd1080', 'hd720']. + */ +VideoQualityControl.prototype.fetchAvailableQualities = function () { + if (this.state && this.state.videoPlayer && this.state.videoPlayer.player && this.state.videoPlayer.player.getAvailableQualityLevels) { + const qualities = this.state.videoPlayer.player.getAvailableQualityLevels(); + this.state.config.availableHDQualities = _.intersection( + qualities, ['highres', 'hd1080', 'hd720'] + ); + + // HD qualities are available, show video quality control. + if (this.state.config.availableHDQualities.length > 0) { + this.showQualityControl(); + this.onQualityChange(this.videoQualityControl.quality); + } + // On initialization, force the video quality to be 'large' instead of + // 'default'. Otherwise, the player will sometimes switch to HD + // automatically, for example when the iframe resizes itself. + this.state.trigger('videoPlayer.handlePlaybackQualityChange', + this.videoQualityControl.quality + ); + } +}; + +/** + * Updates the visual state of the quality control button based on the current quality. + * @param {string} value The current quality level. + */ +VideoQualityControl.prototype.onQualityChange = function (value) { + this.videoQualityControl.quality = value; + if (this.videoQualityControl.el) { + const controlTextSpan = this.videoQualityControl.el.querySelector('.control-text'); + if (_.contains(this.state.config.availableHDQualities, value)) { + this.videoQualityControl.el.classList.add('active'); + if (controlTextSpan) { + controlTextSpan.textContent = gettext('on'); // Assuming gettext is globally available or imported + } + } else { + this.videoQualityControl.el.classList.remove('active'); + if (controlTextSpan) { + controlTextSpan.textContent = gettext('off'); // Assuming gettext is globally available or imported + } + } + } +}; + +/** + * Toggles the quality of the video if HD qualities are available. + * @param {Event} event The click event. + */ +VideoQualityControl.prototype.toggleQuality = function (event) { + event.preventDefault(); + if (this.state && this.state.config && this.state.config.availableHDQualities) { + const currentValue = this.videoQualityControl.quality; + const isHD = _.contains(this.state.config.availableHDQualities, currentValue); + const newQuality = isHD ? 'large' : 'highres'; + this.state.trigger('videoPlayer.handlePlaybackQualityChange', newQuality); + } +}; + +export {VideoQualityControl}; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/video_social_sharing.js b/xmodule/assets/video/public/js/video_social_sharing.js new file mode 100644 index 000000000000..6d8bd19e5413 --- /dev/null +++ b/xmodule/assets/video/public/js/video_social_sharing.js @@ -0,0 +1,77 @@ +import $ from 'jquery'; +import _ from 'underscore'; + +'use strict'; + +/** + * Video Social Sharing control module. + * + * @constructor + * @param {jQuery.Element} element - The container element for the video social sharing controls + * @param {Object} options - Additional options for the module + */ +function VideoSocialSharingHandler(element, options) { + if (!(this instanceof VideoSocialSharingHandler)) { + return new VideoSocialSharingHandler(element, options); + } + + _.bindAll(this, 'clickHandler', 'copyHandler', 'hideHandler', 'showHandler'); + + this.container = element; + + if (this.container.find('.wrapper-downloads .wrapper-social-share')) { + this.initialize(); + } + + return false; +} + +VideoSocialSharingHandler.prototype = { + // Initializes the module. + initialize: function () { + this.el = this.container.find('.wrapper-social-share'); + this.baseVideoUrl = this.el.data('url'); + this.course_id = this.container.data('courseId'); + this.block_id = this.container.data('blockId'); + this.el.on('click', '.social-share-link', this.clickHandler); + + this.closeBtn = this.el.find('.close-btn'); + this.toggleBtn = this.el.find('.social-toggle-btn'); + this.copyBtn = this.el.find('.public-video-copy-btn'); + this.shareContainer = this.el.find('.container-social-share'); + this.closeBtn.on('click', this.hideHandler); + this.toggleBtn.on('click', this.showHandler); + this.copyBtn.on('click', this.copyHandler); + }, + + // Fire an analytics event on share button click. + clickHandler: function (event) { + const source = $(event.currentTarget).data('source'); + this.sendAnalyticsEvent(source); + }, + + hideHandler: function (event) { + this.shareContainer.hide(); + this.toggleBtn.show(); + }, + + showHandler: function (event) { + this.shareContainer.show(); + this.toggleBtn.hide(); + }, + + copyHandler: function (event) { + navigator.clipboard.writeText(this.copyBtn.data('url')); + }, + + // Send an analytics event for share button tracking. + sendAnalyticsEvent: function (source) { + window.analytics.track('edx.social.video.share_button.clicked', { + source: source, + video_block_id: this.container.data('blockId'), + course_id: this.container.data('courseId'), + }); + }, +}; + +export {VideoSocialSharingHandler}; \ No newline at end of file diff --git a/xmodule/assets/video/public/js/video_speed_control.js b/xmodule/assets/video/public/js/video_speed_control.js new file mode 100644 index 000000000000..37708af72889 --- /dev/null +++ b/xmodule/assets/video/public/js/video_speed_control.js @@ -0,0 +1,417 @@ +'use strict'; + +import Iterator from 'video/00_iterator.js'; +import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils'; + +/** + * Video speed control module. + * @exports video/08_video_speed_control.js + * @constructor + * @param {object} state The object containing the state of the video player. + * @return {jquery Promise} + */ +const VideoSpeedControl = (state) => { + if (!(this instanceof VideoSpeedControl)) { + return new VideoSpeedControl(state); + } + + _.bindAll(this, 'onSetSpeed', 'onRenderSpeed', 'clickLinkHandler', + 'keyDownLinkHandler', 'mouseEnterHandler', 'mouseLeaveHandler', + 'clickMenuHandler', 'keyDownMenuHandler', 'destroy' + ); + this.state = state; + this.state.videoSpeedControl = this; + this.initialize(); + + return $.Deferred().resolve().promise(); +}; + +VideoSpeedControl.prototype = { + template: [ + '
          ', + '

          ', + gettext('Press UP to enter the speed menu then use the UP and DOWN arrow keys to navigate the different speeds, then press ENTER to change to the selected speed.'), // eslint-disable-line max-len, indent + '

          ', + '', + '
            ', + '
            ' + ].join(''), + + destroy: function () { + this.el.off({ + mouseenter: this.mouseEnterHandler, + mouseleave: this.mouseLeaveHandler, + click: this.clickMenuHandler, + keydown: this.keyDownMenuHandler + }); + + this.state.el.off({ + 'speed:set': this.onSetSpeed, + 'speed:render': this.onRenderSpeed + }); + this.closeMenu(true); + this.speedsContainer.remove(); + this.el.remove(); + delete this.state.videoSpeedControl; + }, + + /** Initializes the module. */ + initialize: function () { + var state = this.state; + + if (!this.isPlaybackRatesSupported(state)) { + console.log( + '[Video info]: playbackRate is not supported.' + ); + + return false; + } + this.el = $(this.template); + this.speedsContainer = this.el.find('.video-speeds'); + this.speedButton = this.el.find('.speed-button'); + this.render(state.speeds, state.speed); + this.setSpeed(state.speed, true, true); + this.bindHandlers(); + + return true; + }, + + /** + * Creates any necessary DOM elements, attach them, and set their, + * initial configuration. + * @param {array} speeds List of speeds available for the player. + * @param {string} currentSpeed The current speed set to the player. + */ + render: function (speeds, currentSpeed) { + var speedsContainer = this.speedsContainer, + reversedSpeeds = speeds.concat().reverse(), + instructionsId = 'speed-instructions-' + this.state.id, + speedsList = $.map(reversedSpeeds, function (speed) { + return HtmlUtils.interpolateHtml( + HtmlUtils.HTML( + [ + '
          1. ', + '', + '
            2. ' + ].join('') + ), + { + speed: speed + } + ).toString(); + }); + + HtmlUtils.setHtml( + speedsContainer, + HtmlUtils.HTML(speedsList) + ); + this.speedLinks = new Iterator(speedsContainer.find('.speed-option')); + HtmlUtils.prepend( + this.state.el.find('.secondary-controls'), + HtmlUtils.HTML(this.el) + ); + this.setActiveSpeed(currentSpeed); + + // set dynamic id for instruction element to avoid collisions + this.el.find('.instructions').attr('id', instructionsId); + this.speedButton.attr('aria-describedby', instructionsId); + }, + + /** + * Bind any necessary function callbacks to DOM events (click, + * mousemove, etc.). + */ + bindHandlers: function () { + // Attach various events handlers to the speed menu button. + this.el.on({ + mouseenter: this.mouseEnterHandler, + mouseleave: this.mouseLeaveHandler, + click: this.openMenu, + keydown: this.keyDownMenuHandler + }); + + // Attach click and keydown event handlers to the individual speed + // entries. + this.speedsContainer.on({ + click: this.clickLinkHandler, + keydown: this.keyDownLinkHandler + }, '.speed-option'); + + this.state.el.on({ + 'speed:set': this.onSetSpeed, + 'speed:render': this.onRenderSpeed + }); + this.state.el.on('destroy', this.destroy); + }, + + onSetSpeed: function (event, speed) { + this.setSpeed(speed, true); + }, + + onRenderSpeed: function (event, speeds, currentSpeed) { + this.render(speeds, currentSpeed); + }, + + /** + * Check if playbackRate supports by browser. If browser supports, 1.0 + * should be returned by playbackRate property. In this case, function + * return True. Otherwise, False will be returned. + * iOS doesn't support speed change. + * @param {object} state The object containing the state of the video + * player. + * @return {boolean} + * true: Browser support playbackRate functionality. + * false: Browser doesn't support playbackRate functionality. + */ + isPlaybackRatesSupported: function (state) { + var isHtml5 = state.videoType === 'html5', + isTouch = state.isTouch, + video = document.createElement('video'); + + // eslint-disable-next-line no-extra-boolean-cast + return !isTouch || (isHtml5 && !Boolean(video.playbackRate)); + }, + + /** + * Opens speed menu. + * @param {boolean} [bindEvent] Click event will be attached on window. + */ + openMenu: function (bindEvent) { + // When speed entries have focus, the menu stays open on + // mouseleave. A clickHandler is added to the window + // element to have clicks close the menu when they happen + // outside of it. + if (bindEvent) { + $(window).on('click.speedMenu', this.clickMenuHandler); + } + + this.el.addClass('is-opened'); + this.speedButton + .attr('tabindex', -1) + .attr('aria-expanded', 'true'); + }, + + /** + * Closes speed menu. + * @param {boolean} [unBindEvent] Click event will be detached from window. + */ + closeMenu: function (unBindEvent) { + // Remove the previously added clickHandler from window element. + if (unBindEvent) { + $(window).off('click.speedMenu'); + } + + this.el.removeClass('is-opened'); + this.speedButton + .attr('tabindex', 0) + .attr('aria-expanded', 'false'); + }, + + /** + * Sets new current speed for the speed control and triggers `speedchange` + * event if needed. + * @param {string|number} speed Speed to be set. + * @param {boolean} [silent] Sets the new speed without triggering + * `speedchange` event. + * @param {boolean} [forceUpdate] Updates the speed even if it's + * not differs from current speed. + */ + setSpeed: function (speed, silent, forceUpdate) { + var newSpeed = this.state.speedToString(speed); + if (newSpeed !== this.currentSpeed || forceUpdate) { + this.speedsContainer + .find('li') + .siblings("li[data-speed='" + newSpeed + "']"); + + this.speedButton.find('.value').text(newSpeed + 'x'); + this.currentSpeed = newSpeed; + + if (!silent) { + this.el.trigger('speedchange', [newSpeed, this.state.speed]); + } + } + + this.resetActiveSpeed(); + this.setActiveSpeed(newSpeed); + }, + + resetActiveSpeed: function () { + var speedOptions = this.speedsContainer.find('li'); + + $(speedOptions).each(function (index, el) { + $(el).removeClass('is-active') + .find('.speed-option') + .attr('aria-pressed', 'false'); + }); + }, + + setActiveSpeed: function (speed) { + var speedOption = this.speedsContainer.find('li[data-speed="' + this.state.speedToString(speed) + '"]'); + + speedOption.addClass('is-active') + .find('.speed-option') + .attr('aria-pressed', 'true'); + + this.speedButton.attr('title', gettext('Video speed: ') + this.state.speedToString(speed) + 'x'); + }, + + /** + * Click event handler for the menu. + * @param {jquery Event} event + */ + clickMenuHandler: function () { + this.closeMenu(); + + return false; + }, + + /** + * Click event handler for speed links. + * @param {jquery Event} event + */ + clickLinkHandler: function (event) { + var el = $(event.currentTarget).parent(), + speed = $(el).data('speed'); + + this.resetActiveSpeed(); + this.setActiveSpeed(speed); + this.state.videoCommands.execute('speed', speed); + this.closeMenu(true); + + return false; + }, + + /** + * Mouseenter event handler for the menu. + * @param {jquery Event} event + */ + mouseEnterHandler: function () { + this.openMenu(); + + return false; + }, + + /** + * Mouseleave event handler for the menu. + * @param {jquery Event} event + */ + mouseLeaveHandler: function () { + // Only close the menu is no speed entry has focus. + if (!this.speedLinks.list.is(':focus')) { + this.closeMenu(); + } + + return false; + }, + + /** + * Keydown event handler for the menu. + * @param {jquery Event} event + */ + keyDownMenuHandler: function (event) { + var KEY = $.ui.keyCode, + keyCode = event.keyCode; + + // eslint-disable-next-line default-case + switch (keyCode) { + // Open menu and focus on last element of list above it. + case KEY.ENTER: + case KEY.SPACE: + case KEY.UP: + this.openMenu(true); + this.speedLinks.last().focus(); + break; + // Close menu. + case KEY.ESCAPE: + this.closeMenu(true); + break; + } + // We do not stop propagation and default behavior on a TAB + // keypress. + return event.keyCode === KEY.TAB; + }, + + /** + * Keydown event handler for speed links. + * @param {jquery Event} event + */ + keyDownLinkHandler: function (event) { + // ALT key is used to change (alternate) the function of + // other pressed keys. In this, do nothing. + if (event.altKey) { + return true; + } + + var KEY = $.ui.keyCode, + self = this, + parent = $(event.currentTarget).parent(), + index = parent.index(), + speed = parent.data('speed'); + + // eslint-disable-next-line default-case + switch (event.keyCode) { + // Close menu. + case KEY.TAB: + // Closes menu after 25ms delay to change `tabindex` after + // finishing default behavior. + setTimeout(function () { + self.closeMenu(true); + }, 25); + + return true; + // Close menu and give focus to speed control. + case KEY.ESCAPE: + this.closeMenu(true); + this.speedButton.focus(); + + return false; + // Scroll up menu, wrapping at the top. Keep menu open. + case KEY.UP: + // Shift + Arrows keyboard shortcut might be used by + // screen readers. In this, do nothing. + if (event.shiftKey) { + return true; + } + + this.speedLinks.prev(index).focus(); + return false; + // Scroll down menu, wrapping at the bottom. Keep menu + // open. + case KEY.DOWN: + // Shift + Arrows keyboard shortcut might be used by + // screen readers. In this, do nothing. + if (event.shiftKey) { + return true; + } + + this.speedLinks.next(index).focus(); + return false; + // Close menu, give focus to speed control and change + // speed. + case KEY.ENTER: + case KEY.SPACE: + this.closeMenu(true); + this.speedButton.focus(); + this.setSpeed(this.state.speedToString(speed)); + + return false; + } + + return true; + } +}; + +export default VideoSpeedControl; diff --git a/xmodule/assets/video/public/js/video_storage.js b/xmodule/assets/video/public/js/video_storage.js new file mode 100644 index 000000000000..5262041b8778 --- /dev/null +++ b/xmodule/assets/video/public/js/video_storage.js @@ -0,0 +1,79 @@ +'use strict'; + +console.log('In video_storage.js file'); + +/** + * Provides a convenient way to store key-value pairs. + * + * @param {string} namespace Namespace that is used to store data. + * @param {string} id Identifier for instance-specific storage. + * @return {object} VideoStorage API. + */ +export function VideoStorage(namespace = 'VideoStorage', id = Math.random().toString(36).slice(2)) { + /** + * Adds new value to the storage or rewrites existent. + * + * @param {string} name Identifier of the data. + * @param {any} value Data to store. + * @param {boolean} instanceSpecific Data with this flag will be added + * to instance specific storage. + */ + const setItem = (name, value, instanceSpecific) => { + if (name) { + if (instanceSpecific) { + window[namespace][id][name] = value; + } else { + window[namespace][name] = value; + } + } + }; + + /** + * Returns the current value associated with the given name. + * + * @param {string} name Identifier of the data. + * @param {boolean} instanceSpecific Data with this flag will be added + * to instance specific storage. + * @return {any} The current value associated with the given name. + * If the given key does not exist in the list + * associated with the object then this method must return null. + */ + const getItem = (name, instanceSpecific) => { + if (instanceSpecific) { + return window[namespace][id][name]; + } else { + return window[namespace][name]; + } + }; + + /** + * Removes the current value associated with the given name. + * + * @param {string} name Identifier of the data. + * @param {boolean} instanceSpecific Data with this flag will be added + * to instance specific storage. + */ + const removeItem = (name, instanceSpecific) => { + if (instanceSpecific) { + delete window[namespace][id][name]; + } else { + delete window[namespace][name]; + } + }; + + /** Clear the storage. */ + const clear = () => { + window[namespace] = {}; + window[namespace][id] = {}; + }; + + window[namespace] = window[namespace] || {}; + window[namespace][id] = window[namespace][id] || {}; + + return { + clear: clear, + getItem: getItem, + removeItem: removeItem, + setItem: setItem + }; +} diff --git a/xmodule/assets/video/public/js/video_transcript_feedback.js b/xmodule/assets/video/public/js/video_transcript_feedback.js new file mode 100644 index 000000000000..ad4888853d7f --- /dev/null +++ b/xmodule/assets/video/public/js/video_transcript_feedback.js @@ -0,0 +1,241 @@ +// VideoTranscriptFeedbackHandler module. +'use strict'; + +import _ from 'underscore'; + +/** + * @desc VideoTranscriptFeedbackHandler module exports a function. + * + * @type {function} + * @access public + * + * @param {object} state - The object containing the state of the video + * player. All other modules, their parameters, public variables, etc. + * are available via this object. + * + * @this {object} The global window object. + * + */ + +const VideoTranscriptFeedback = (state) => { + if (!(this instanceof VideoTranscriptFeedback)) { + return new VideoTranscriptFeedback(state); + } + + _.bindAll(this, 'destroy', 'getFeedbackForCurrentTranscript', 'markAsPositiveFeedback', 'markAsNegativeFeedback', 'markAsEmptyFeedback', + 'selectThumbsUp', 'selectThumbsDown', 'unselectThumbsUp', 'unselectThumbsDown', 'thumbsUpClickHandler', 'thumbsDownClickHandler', + 'sendFeedbackForCurrentTranscript', 'onHideLanguageMenu', 'getCurrentLanguage', 'loadAndSetVisibility', 'showWidget', 'hideWidget' + ); + + this.state = state; + this.state.videoTranscriptFeedback = this; + this.currentTranscriptLanguage = this.state.lang; + this.transcriptLanguages = this.state.config.transcriptLanguages; + + if (this.state.el.find('.wrapper-transcript-feedback').length) { + this.initialize(); + } + + return false; +}; + +VideoTranscriptFeedback.prototype = { + destroy: function () { + this.state.el.off(this.events); + }, + + initialize: function () { + this.el = this.state.el.find('.wrapper-transcript-feedback'); + + this.videoId = this.el.data('video-id'); + this.userId = this.el.data('user-id'); + this.aiTranslationsUrl = this.state.config.aiTranslationsUrl; + + this.thumbsUpButton = this.el.find('.thumbs-up-btn'); + this.thumbsDownButton = this.el.find('.thumbs-down-btn'); + this.thumbsUpButton.on('click', this.thumbsUpClickHandler); + this.thumbsDownButton.on('click', this.thumbsDownClickHandler); + + this.events = { + 'language_menu:hide': this.onHideLanguageMenu, + destroy: this.destroy + }; + this.loadAndSetVisibility(); + this.bindHandlers(); + }, + + bindHandlers: function () { + this.state.el.on(this.events); + }, + + getFeedbackForCurrentTranscript: function () { + var self = this; + var url = self.aiTranslationsUrl + '/transcript-feedback' + '?transcript_language=' + self.currentTranscriptLanguage + '&video_id=' + self.videoId + '&user_id=' + self.userId; + + $.ajax({ + url: url, + type: 'GET', + success: function (data) { + if (data && data.value === true) { + self.markAsPositiveFeedback(); + self.currentFeedback = true; + } else { + if (data && data.value === false) { + self.markAsNegativeFeedback(); + self.currentFeedback = false; + } else { + self.markAsEmptyFeedback(); + self.currentFeedback = null; + } + } + }, + error: function (error) { + self.markAsEmptyFeedback(); + self.currentFeedback = null; + } + }); + }, + + markAsPositiveFeedback: function () { + this.selectThumbsUp(); + this.unselectThumbsDown(); + }, + + markAsNegativeFeedback: function () { + this.selectThumbsDown(); + this.unselectThumbsUp(); + }, + + markAsEmptyFeedback: function () { + this.unselectThumbsUp(); + this.unselectThumbsDown(); + }, + + selectThumbsUp: function () { + var thumbsUpIcon = this.thumbsUpButton.find('.thumbs-up-icon'); + if (thumbsUpIcon[0].classList.contains('fa-thumbs-o-up')) { + thumbsUpIcon[0].classList.remove("fa-thumbs-o-up"); + thumbsUpIcon[0].classList.add("fa-thumbs-up"); + } + }, + + selectThumbsDown: function () { + var thumbsDownIcon = this.thumbsDownButton.find('.thumbs-down-icon'); + if (thumbsDownIcon[0].classList.contains('fa-thumbs-o-down')) { + thumbsDownIcon[0].classList.remove("fa-thumbs-o-down"); + thumbsDownIcon[0].classList.add("fa-thumbs-down"); + } + }, + + unselectThumbsUp: function () { + var thumbsUpIcon = this.thumbsUpButton.find('.thumbs-up-icon'); + if (thumbsUpIcon[0].classList.contains('fa-thumbs-up')) { + thumbsUpIcon[0].classList.remove("fa-thumbs-up"); + thumbsUpIcon[0].classList.add("fa-thumbs-o-up"); + } + }, + + unselectThumbsDown: function () { + var thumbsDownIcon = this.thumbsDownButton.find('.thumbs-down-icon'); + if (thumbsDownIcon[0].classList.contains('fa-thumbs-down')) { + thumbsDownIcon[0].classList.remove("fa-thumbs-down"); + thumbsDownIcon[0].classList.add("fa-thumbs-o-down"); + } + }, + + thumbsUpClickHandler: function () { + if (this.currentFeedback) { + this.sendFeedbackForCurrentTranscript(null); + } else { + this.sendFeedbackForCurrentTranscript(true); + } + }, + + thumbsDownClickHandler: function () { + if (this.currentFeedback === false) { + this.sendFeedbackForCurrentTranscript(null); + } else { + this.sendFeedbackForCurrentTranscript(false); + } + }, + + sendFeedbackForCurrentTranscript: function (feedbackValue) { + var self = this; + var url = self.aiTranslationsUrl + '/transcript-feedback/'; + $.ajax({ + url: url, + type: 'POST', + dataType: 'json', + data: { + transcript_language: self.currentTranscriptLanguage, + video_id: self.videoId, + user_id: self.userId, + value: feedbackValue, + }, + success: function (data) { + if (data && data.value === true) { + self.markAsPositiveFeedback(); + self.currentFeedback = true; + } else { + if (data && data.value === false) { + self.markAsNegativeFeedback(); + self.currentFeedback = false; + } else { + self.markAsEmptyFeedback(); + self.currentFeedback = null; + } + } + }, + error: function () { + self.markAsEmptyFeedback(); + self.currentFeedback = null; + } + }); + }, + + onHideLanguageMenu: function () { + var newLanguageSelected = this.getCurrentLanguage(); + if (this.currentTranscriptLanguage !== newLanguageSelected) { + this.currentTranscriptLanguage = this.getCurrentLanguage(); + this.loadAndSetVisibility(); + } + }, + + getCurrentLanguage: function () { + var language = this.state.lang; + return language; + }, + + loadAndSetVisibility: function () { + var self = this; + var url = self.aiTranslationsUrl + '/video-transcript' + '?transcript_language=' + self.currentTranscriptLanguage + '&video_id=' + self.videoId; + + $.ajax({ + url: url, + type: 'GET', + async: false, + success: function (data) { + if (data && data.status === 'Completed') { + self.showWidget(); + self.getFeedbackForCurrentTranscript(); + } else { + self.hideWidget(); + } + }, + error: function (error) { + self.hideWidget(); + } + }); + }, + + showWidget: function () { + this.el.show(); + }, + + hideWidget: function () { + this.el.hide(); + } +}; + +// Export as ES6 default +export default VideoTranscriptFeedback; diff --git a/xmodule/assets/video/public/js/video_volume_control.js b/xmodule/assets/video/public/js/video_volume_control.js new file mode 100644 index 000000000000..e8e2a41f4e84 --- /dev/null +++ b/xmodule/assets/video/public/js/video_volume_control.js @@ -0,0 +1,554 @@ +'use strict'; + +import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils'; + +/** + * Video volume control module. + * @exports video/07_video_volume_control.js + * @constructor + * @param {Object} state The object containing the state of the video + * @param {Object} i18n The object containing strings with translations. + * @return {jquery Promise} + */ +const VideoVolumeControl = function (state, i18n) { + if (!(this instanceof VideoVolumeControl)) { + return new VideoVolumeControl(state, i18n); + } + + _.bindAll(this, 'keyDownHandler', 'updateVolumeSilently', + 'onVolumeChangeHandler', 'openMenu', 'closeMenu', + 'toggleMuteHandler', 'keyDownButtonHandler', 'destroy' + ); + this.state = state; + this.state.videoVolumeControl = this; + this.i18n = i18n; + this.initialize(); + + return $.Deferred().resolve().promise(); +}; + + +VideoVolumeControl.prototype = { + /** Minimum value for the volume slider. */ + min: 0, + /** Maximum value for the volume slider. */ + max: 100, + /** Step to increase/decrease volume level via keyboard. */ + step: 20, + + videoVolumeControlHtml: HtmlUtils.interpolateHtml( + HtmlUtils.HTML([ + '
            ', + '

            ', + '{volumeInstructions}', + '

            ', + '', + '', + '
            '].join('')), + { + volumeInstructions: gettext('Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.'), // eslint-disable-line max-len + adjustVideoVolume: gettext('Adjust video volume'), + volumeText: gettext('Volume') + } + ), + + destroy: function () { + this.volumeSlider.slider('destroy'); + this.state.el.find('iframe').removeAttr('tabindex'); + this.a11y.destroy(); + // eslint-disable-next-line no-multi-assign + this.cookie = this.a11y = null; + this.closeMenu(); + + this.state.el + .off('play.volume') + .off({ + keydown: this.keyDownHandler, + volumechange: this.onVolumeChangeHandler + }); + this.el.off({ + mouseenter: this.openMenu, + mouseleave: this.closeMenu + }); + this.button.off({ + mousedown: this.toggleMuteHandler, + keydown: this.keyDownButtonHandler, + focus: this.openMenu, + blur: this.closeMenu + }); + this.el.remove(); + delete this.state.videoVolumeControl; + }, + + /** Initializes the module. */ + initialize: function () { + var volume; + + if (this.state.isTouch) { + // iOS doesn't support volume change + return false; + } + + this.el = $(this.videoVolumeControlHtml.toString()); + // Youtube iframe react on key buttons and has his own handlers. + // So, we disallow focusing on iframe. + this.state.el.find('iframe').attr('tabindex', -1); + this.button = this.el.children('.control'); + this.cookie = new CookieManager(this.min, this.max); + this.a11y = new Accessibility( + this.button, this.min, this.max, this.i18n + ); + volume = this.cookie.getVolume(); + this.storedVolume = this.max; + + this.render(); + this.bindHandlers(); + this.setVolume(volume, true, false); + this.checkMuteButtonStatus(volume); + }, + + /** + * Creates any necessary DOM elements, attach them, and set their, + * initial configuration. + */ + render: function () { + var container = this.el.find('.volume-slider'), + instructionsId = 'volume-instructions-' + this.state.id; + + HtmlUtils.append(container, HtmlUtils.HTML('
            ')); + + this.volumeSlider = container.slider({ + orientation: 'vertical', + range: 'min', + min: this.min, + max: this.max, + slide: this.onSlideHandler.bind(this) + }); + + // We provide an independent behavior to adjust volume level. + // Therefore, we do not need redundant focusing on slider in TAB + // order. + container.find('.volume-handle').attr('tabindex', -1); + this.state.el.find('.secondary-controls').append(this.el); + + // set dynamic id for instruction element to avoid collisions + this.el.find('.instructions').attr('id', instructionsId); + this.button.attr('aria-describedby', instructionsId); + }, + + /** Bind any necessary function callbacks to DOM events. */ + bindHandlers: function () { + this.state.el.on({ + 'play.volume': _.once(this.updateVolumeSilently), + volumechange: this.onVolumeChangeHandler + }); + this.state.el.find('.volume').on({ + mouseenter: this.openMenu, + mouseleave: this.closeMenu + }); + this.button.on({ + keydown: this.keyDownHandler, + click: false, + mousedown: this.toggleMuteHandler, + focus: this.openMenu, + blur: this.closeMenu + }); + this.state.el.on('destroy', this.destroy); + }, + + /** + * Updates volume level without updating view and triggering + * `volumechange` event. + */ + updateVolumeSilently: function () { + this.state.el.trigger( + 'volumechange:silent', [this.getVolume()] + ); + }, + + /** + * Returns current volume level. + * @return {Number} + */ + getVolume: function () { + return this.volume; + }, + + /** + * Sets current volume level. + * @param {Number} volume Suggested volume level + * @param {Boolean} [silent] Sets the new volume level without + * triggering `volumechange` event and updating the cookie. + * @param {Boolean} [withoutSlider] Disables updating the slider. + */ + setVolume: function (volume, silent, withoutSlider) { + if (volume === this.getVolume()) { + return false; + } + + this.volume = volume; + this.a11y.update(this.getVolume()); + + if (!withoutSlider) { + this.updateSliderView(this.getVolume()); + } + + if (!silent) { + this.cookie.setVolume(this.getVolume()); + this.state.el.trigger('volumechange', [this.getVolume()]); + } + }, + + /** Increases current volume level using previously defined step. */ + increaseVolume: function () { + var volume = Math.min(this.getVolume() + this.step, this.max); + + this.setVolume(volume, false, false); + this.el.find('.volume-slider') + .attr('aria-valuenow', volume); + }, + + /** Decreases current volume level using previously defined step. */ + decreaseVolume: function () { + var volume = Math.max(this.getVolume() - this.step, this.min); + + this.setVolume(volume, false, false); + this.el.find('.volume-slider') + .attr('aria-valuenow', volume); + }, + + /** Updates volume slider view. */ + updateSliderView: function (volume) { + this.volumeSlider.slider('value', volume); + this.el.find('.volume-slider') + .attr('aria-valuenow', volume); + }, + + /** + * Mutes or unmutes volume. + * @param {Number} muteStatus Flag to mute/unmute volume. + */ + mute: function (muteStatus) { + var volume; + + this.updateMuteButtonView(muteStatus); + + if (muteStatus) { + this.storedVolume = this.getVolume() || this.max; + } + + volume = muteStatus ? 0 : this.storedVolume; + this.setVolume(volume, false, false); + this.el.find('.volume-slider') + .attr('aria-valuenow', volume); + }, + + /** + * Returns current volume state (is it muted or not?). + * @return {Boolean} + */ + getMuteStatus: function () { + return this.getVolume() === 0; + }, + + /** + * Updates the volume button view. + * @param {Boolean} isMuted Flag to use muted or unmuted view. + */ + updateMuteButtonView: function (isMuted) { + var action = isMuted ? 'addClass' : 'removeClass'; + + this.el[action]('is-muted'); + + if (isMuted) { + this.el + .find('.control .icon') + .removeClass('fa-volume-up') + .addClass('fa-volume-off'); + } else { + this.el + .find('.control .icon') + .removeClass('fa-volume-off') + .addClass('fa-volume-up'); + } + }, + + /** Toggles the state of the volume button. */ + toggleMute: function () { + this.mute(!this.getMuteStatus()); + }, + + /** + * Checks and updates the state of the volume button relatively to + * volume level. + * @param {Number} volume Volume level. + */ + checkMuteButtonStatus: function (volume) { + if (volume <= this.min) { + this.updateMuteButtonView(true); + this.state.el.off('volumechange.is-muted'); + this.state.el.on('volumechange.is-muted', _.once(function () { + this.updateMuteButtonView(false); + }.bind(this))); + } + }, + + /** Opens volume menu. */ + openMenu: function () { + this.el.addClass('is-opened'); + this.button.attr('aria-expanded', 'true'); + }, + + /** Closes speed menu. */ + closeMenu: function () { + this.el.removeClass('is-opened'); + this.button.attr('aria-expanded', 'false'); + }, + + /** + * Keydown event handler for the video container. + * @param {jquery Event} event + */ + keyDownHandler: function (event) { + // ALT key is used to change (alternate) the function of + // other pressed keys. In this case, do nothing. + if (event.altKey) { + return true; + } + + if ($(event.target).hasClass('ui-slider-handle')) { + return true; + } + + var KEY = $.ui.keyCode, + keyCode = event.keyCode; + + // eslint-disable-next-line default-case + switch (keyCode) { + case KEY.UP: + // Shift + Arrows keyboard shortcut might be used by + // screen readers. In this case, do nothing. + if (event.shiftKey) { + return true; + } + + this.increaseVolume(); + return false; + case KEY.DOWN: + // Shift + Arrows keyboard shortcut might be used by + // screen readers. In this case, do nothing. + if (event.shiftKey) { + return true; + } + + this.decreaseVolume(); + return false; + + case KEY.SPACE: + case KEY.ENTER: + // Shift + Enter keyboard shortcut might be used by + // screen readers. In this case, do nothing. + if (event.shiftKey) { + return true; + } + + this.toggleMute(); + return false; + } + + return true; + }, + + /** + * Keydown event handler for the volume button. + * @param {jquery Event} event + */ + keyDownButtonHandler: function (event) { + // ALT key is used to change (alternate) the function of + // other pressed keys. In this case, do nothing. + if (event.altKey) { + return true; + } + + var KEY = $.ui.keyCode, + keyCode = event.keyCode; + + // eslint-disable-next-line default-case + switch (keyCode) { + case KEY.ENTER: + case KEY.SPACE: + this.toggleMute(); + return false; + } + + return true; + }, + + /** + * onSlide callback for the video slider. + * @param {jquery Event} event + * @param {jqueryuiSlider ui} ui + */ + onSlideHandler: function (event, ui) { + this.setVolume(ui.value, false, true); + this.el.find('.volume-slider') + .attr('aria-valuenow', ui.volume); + }, + + /** + * Mousedown event handler for the volume button. + * @param {jquery Event} event + */ + toggleMuteHandler: function (event) { + this.toggleMute(); + event.preventDefault(); + }, + + /** + * Volumechange event handler. + * @param {jquery Event} event + * @param {Number} volume Volume level. + */ + onVolumeChangeHandler: function (event, volume) { + this.checkMuteButtonStatus(volume); + } +}; + + +/** + * Module responsible for the accessibility of volume controls. + * @constructor + * @private + * @param {jquery $} button The volume button. + * @param {Number} min Minimum value for the volume slider. + * @param {Number} max Maximum value for the volume slider. + * @param {Object} i18n The object containing strings with translations. + */ +const Accessibility = (button, min, max, i18n) => { + this.min = min; + this.max = max; + this.button = button; + this.i18n = i18n; + + this.initialize(); +}; + + +Accessibility.prototype = { + destroy: function () { + this.liveRegion.remove(); + }, + + /** Initializes the module. */ + initialize: function () { + this.liveRegion = $('
            ', { + class: 'sr video-live-region', + 'aria-hidden': 'false', + 'aria-live': 'polite' + }); + + this.button.after(HtmlUtils.HTML(this.liveRegion).toString()); + }, + + /** + * Updates text of the live region. + * @param {Number} volume Volume level. + */ + update: function (volume) { + this.liveRegion.text([ + this.getVolumeDescription(volume), + this.i18n.Volume + '.' + ].join(' ')); + + $(this.button).parent().find('.volume-slider') + .attr('aria-valuenow', volume); + }, + + /** + * Returns a string describing the level of volume. + * @param {Number} volume Volume level. + */ + getVolumeDescription: function (volume) { + if (volume === 0) { + return this.i18n.Muted; + } else if (volume <= 20) { + return this.i18n['Very low']; + } else if (volume <= 40) { + return this.i18n.Low; + } else if (volume <= 60) { + return this.i18n.Average; + } else if (volume <= 80) { + return this.i18n.Loud; + } else if (volume <= 99) { + return this.i18n['Very loud']; + } + + return this.i18n.Maximum; + } +}; + + +/** + * Module responsible for the work with volume cookie. + * @constructor + * @private + * @param {Number} min Minimum value for the volume slider. + * @param {Number} max Maximum value for the volume slider. + */ +const CookieManager = function (min, max) { + this.min = min; + this.max = max; + this.cookieName = 'video_player_volume_level'; +}; + + +CookieManager.prototype = { + /** + * Returns volume level from the cookie. + * @return {Number} Volume level. + */ + getVolume: function () { + var volume = parseInt($.cookie(this.cookieName), 10); + + if (_.isFinite(volume)) { + volume = Math.max(volume, this.min); + volume = Math.min(volume, this.max); + } else { + volume = this.max; + } + + return volume; + }, + + /** + * Updates volume cookie. + * @param {Number} volume Volume level. + */ + setVolume: function (value) { + $.cookie(this.cookieName, value, { + expires: 3650, + path: '/' + }); + } +}; + +export default VideoVolumeControl; diff --git a/xmodule/video_block/video_block.py b/xmodule/video_block/video_block.py index b0e01068fbf3..73ed4579ab83 100644 --- a/xmodule/video_block/video_block.py +++ b/xmodule/video_block/video_block.py @@ -246,8 +246,8 @@ def student_view(self, context): """ fragment = Fragment(self.get_html(context=context)) add_css_to_fragment(fragment, 'VideoBlockDisplay.css') - add_webpack_js_to_fragment(fragment, 'VideoBlockDisplay') - shim_xmodule_js(fragment, 'Video') + add_webpack_js_to_fragment(fragment, 'VideoBlockMain') + fragment.initialize_js('Video') return fragment def author_view(self, context): From 462c5d860776570fb894fb1749eee6dd2e67e2dc Mon Sep 17 00:00:00 2001 From: farhan Date: Wed, 23 Apr 2025 11:49:48 +0500 Subject: [PATCH 2/2] chore: update main.js --- .../video/public/js/video_block_main.js | 108 +++++++++--------- 1 file changed, 56 insertions(+), 52 deletions(-) diff --git a/xmodule/assets/video/public/js/video_block_main.js b/xmodule/assets/video/public/js/video_block_main.js index 5c2026d820b8..fdaad6616b54 100644 --- a/xmodule/assets/video/public/js/video_block_main.js +++ b/xmodule/assets/video/public/js/video_block_main.js @@ -4,34 +4,23 @@ import _ from 'underscore'; import {VideoStorage} from './video_storage'; import {VideoPoster} from './poster'; import {VideoTranscriptDownloadHandler} from './video_accessible_menu'; +import {VideoSkipControl} from './skip_control'; +import {VideoPlayPlaceholder} from './play_placeholder'; +import {VideoPlaySkipControl} from './play_skip_control'; +import {VideoPlayPauseControl} from './play_pause_control'; +import {VideoSocialSharingHandler} from './video_social_sharing'; +import {FocusGrabber} from './focus_grabber'; +import {VideoCommands} from "./commands"; +import {VideoEventsBumperPlugin} from "./events_bumper_plugin"; +import {VideoEventsPlugin} from "./events_plugin"; +import {VideoSaveStatePlugin} from "./save_state_plugin"; +import VideoCaption from "./video_caption"; +import VideoContextMenu from "./video_context_menu"; +import VideoSpeedControl from "./video_speed_control"; +import VideoTranscriptFeedback from "./video_transcript_feedback"; +import VideoVolumeControl from "./video_volume_control" import {Initialize} from './initialize'; -// TODO: Uncomment the imports -// import { initialize } from './initialize'; // Assuming this function is imported -// import { -// FocusGrabber, -// VideoControl, -// VideoPlayPlaceholder, -// VideoPlayPauseControl, -// VideoProgressSlider, -// VideoSpeedControl, -// VideoVolumeControl, -// VideoQualityControl, -// VideoFullScreen, -// VideoCaption, -// VideoCommands, -// VideoContextMenu, -// VideoSaveStatePlugin, -// VideoEventsPlugin, -// VideoCompletionHandler, -// VideoTranscriptFeedback, -// VideoAutoAdvanceControl, -// VideoPlaySkipControl, -// VideoSkipControl, -// VideoEventsBumperPlugin, -// VideoSocialSharing, -// VideoBumper, -// } from './video_modules'; // Assuming all necessary modules are grouped here // Stub gettext if the runtime doesn't provide it if (typeof window.gettext === 'undefined') { @@ -58,36 +47,52 @@ console.log('In video_block_main.js file'); const bumperMetadata = el.data('bumper-metadata'); const autoAdvanceEnabled = el.data('autoadvance-enabled') === 'True'; - const mainVideoModules = [] - // TODO: Uncomment the code - // const mainVideoModules = [ - // FocusGrabber, - // VideoControl, - // VideoPlayPlaceholder, - // VideoPlayPauseControl, - // VideoProgressSlider, - // VideoSpeedControl, - // VideoVolumeControl, - // VideoQualityControl, - // VideoFullScreen, - // VideoCaption, - // VideoCommands, - // VideoContextMenu, - // VideoSaveStatePlugin, - // VideoEventsPlugin, - // VideoCompletionHandler, - // VideoTranscriptFeedback, - // ].concat(autoAdvanceEnabled ? [VideoAutoAdvanceControl] : []); + const mainVideoModules = [ + FocusGrabber, + // VideoControl, + VideoPlayPlaceholder, + VideoPlayPauseControl, + // VideoProgressSlider, + // VideoSpeedControl, + // VideoVolumeControl, + // VideoQualityControl, + // VideoFullScreen, + // VideoCaption, + VideoCommands, + // VideoContextMenu, + VideoSaveStatePlugin, + VideoEventsPlugin, + // VideoCompletionHandler, + // VideoTranscriptFeedback, + VideoSpeedControl, + VideoVolumeControl, + // VideoQualityControl, + // VideoFullScreen, + VideoCaption, + // VideoCommands, + VideoContextMenu, + // VideoSaveStatePlugin, + // VideoEventsPlugin, + // VideoCompletionHandler, + VideoTranscriptFeedback, + // ].concat(autoAdvanceEnabled ? [VideoAutoAdvanceControl] : []); + ] const bumperVideoModules = [ // VideoControl, - // VideoPlaySkipControl, - // VideoSkipControl, + VideoPlaySkipControl, + VideoSkipControl, // VideoVolumeControl, // VideoCaption, + VideoCommands, + VideoSaveStatePlugin, + // VideoTranscriptFeedback, + VideoEventsBumperPlugin, + VideoVolumeControl, + VideoCaption, // VideoCommands, // VideoSaveStatePlugin, - // VideoTranscriptFeedback, + VideoTranscriptFeedback, // VideoEventsBumperPlugin, // VideoCompletionHandler, ]; @@ -117,7 +122,7 @@ console.log('In video_block_main.js file'); return () => { _.extend(innerState.metadata, {autoplay: true, focusFirstControl: true}); // TODO: Uncomment following initialize method calling - Initialize(innerState, element); + // initialize(innerState, element); }; }; @@ -126,7 +131,7 @@ console.log('In video_block_main.js file'); saveStateUrl: state.metadata.saveStateUrl, }); - // VideoSocialSharing(el); + VideoSocialSharingHandler(el); if (bumperMetadata) { VideoPoster(el, { @@ -185,4 +190,3 @@ console.log('In video_block_main.js file'); // oldVideo(null, true); }()); -