From df82bb2de710f812522048fee7def4b04be949fd Mon Sep 17 00:00:00 2001 From: farhan Date: Wed, 16 Apr 2025 17:04:05 +0500 Subject: [PATCH 1/2] chore: Adds poster.js --- xmodule/assets/video/public/js/poster.js | 67 +++++++++++++++++++ .../video/public/js/video_block_main.js | 58 +++++++++------- 2 files changed, 99 insertions(+), 26 deletions(-) create mode 100644 xmodule/assets/video/public/js/poster.js diff --git a/xmodule/assets/video/public/js/poster.js b/xmodule/assets/video/public/js/poster.js new file mode 100644 index 000000000000..857497c97619 --- /dev/null +++ b/xmodule/assets/video/public/js/poster.js @@ -0,0 +1,67 @@ +import $ from 'jquery'; // jQuery import +import _ from 'underscore'; + +'use strict'; + +/** + * VideoPoster function + * @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/video_block_main.js b/xmodule/assets/video/public/js/video_block_main.js index ba711287b8a0..35cf53f7b825 100644 --- a/xmodule/assets/video/public/js/video_block_main.js +++ b/xmodule/assets/video/public/js/video_block_main.js @@ -1,5 +1,8 @@ // Import required modules and dependencies +import $ from 'jquery'; +import _ from 'underscore'; import {VideoStorage} from './video_storage'; +import {VideoPoster} from './poster'; // TODO: Uncomment the imports // import { initialize } from './initialize'; // Assuming this function is imported // import { @@ -23,21 +26,24 @@ import {VideoStorage} from './video_storage'; // VideoPlaySkipControl, // VideoSkipControl, // VideoEventsBumperPlugin, -// VideoPoster, // VideoSocialSharing, // VideoAccessibleMenu, // 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 (require, $) { - // TODO: Following code needs to be reviewed, why we are not getting $ - if (!$) { - $ = window.jQuery; - } +(function () { var youtubeXhr = null; var oldVideo = window.Video; @@ -121,26 +127,26 @@ console.log('In video_block_main.js file'); // 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(); - // }); - // } - // }), - // }); + 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); From 1bb6642d0b4e2c18a2ab99aefccefb90447e5b5e Mon Sep 17 00:00:00 2001 From: farhan Date: Wed, 16 Apr 2025 17:32:51 +0500 Subject: [PATCH 2/2] chore: Adds video_accessible_menu --- xmodule/assets/video/public/js/poster.js | 2 + .../video/public/js/video_accessible_menu.js | 56 +++++++++++++++++++ .../video/public/js/video_block_main.js | 11 ++-- 3 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 xmodule/assets/video/public/js/video_accessible_menu.js diff --git a/xmodule/assets/video/public/js/poster.js b/xmodule/assets/video/public/js/poster.js index 857497c97619..ef059b81fa08 100644 --- a/xmodule/assets/video/public/js/poster.js +++ b/xmodule/assets/video/public/js/poster.js @@ -5,6 +5,8 @@ import _ from 'underscore'; /** * VideoPoster function + * + * @constructor * @param {jQuery} element * @param {Object} options */ 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_block_main.js b/xmodule/assets/video/public/js/video_block_main.js index 35cf53f7b825..902c6e704f21 100644 --- a/xmodule/assets/video/public/js/video_block_main.js +++ b/xmodule/assets/video/public/js/video_block_main.js @@ -3,6 +3,8 @@ import $ from 'jquery'; import _ from 'underscore'; import {VideoStorage} from './video_storage'; import {VideoPoster} from './poster'; +import {VideoTranscriptDownloadHandler} from './video_accessible_menu'; + // TODO: Uncomment the imports // import { initialize } from './initialize'; // Assuming this function is imported // import { @@ -27,7 +29,6 @@ import {VideoPoster} from './poster'; // VideoSkipControl, // VideoEventsBumperPlugin, // VideoSocialSharing, -// VideoAccessibleMenu, // VideoBumper, // } from './video_modules'; // Assuming all necessary modules are grouped here @@ -119,10 +120,10 @@ console.log('In video_block_main.js file'); }; }; - // VideoAccessibleMenu(el, { - // storage: storage, - // saveStateUrl: state.metadata.saveStateUrl, - // }); + VideoTranscriptDownloadHandler(el, { + storage: storage, + saveStateUrl: state.metadata.saveStateUrl, + }); // VideoSocialSharing(el);