chore: Adds poster.js, video_accessible_menu

Author: farhan

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([
+        '<div class="video-pre-roll is-<%- type %> poster" ',
+        'style="background-image: url(<%- url %>)">',
+        '<button class="btn-play btn-pre-roll">',
+        '<img src="/static/images/play.png" alt="">',
+        '<span class="sr">', gettext('Play video'), '</span>',
+        '</button>',
+        '</div>'
+    ].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};

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};

xmodule/assets/video/public/js/video_block_main.js

@@ -1,5 +1,10 @@
 // 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';
+
 // TODO: Uncomment the imports
 // import { initialize } from './initialize'; // Assuming this function is imported
 // import {
@@ -23,21 +28,23 @@ 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;
 
@@ -113,34 +120,34 @@ 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);
 
         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);