Migrating from RequireJS to ES6 Modules

common/static/common/js/karma.common.conf.js

@@ -332,7 +332,11 @@ function getBaseConfig(config, useRequireJs) {
                 base: 'Firefox',
                 prefs: {
                     'app.update.auto': false,
-                    'app.update.enabled': false
+                    'app.update.enabled': false,
+                    'media.autoplay.default': 0, // allow autoplay
+                    'media.autoplay.blocking_policy': 0, // disable autoplay blocking
+                    'media.autoplay.allow-extension-background-pages': true,
+                    'media.autoplay.enabled.user-gestures-needed': false,
                 }
             },
             ChromeDocker: {

package.json

@@ -15,7 +15,7 @@
     "watch-sass": "scripts/watch_sass.sh",
     "test": "npm run test-jest && npm run test-karma",
     "test-jest": "jest",
-    "test-karma": "npm run test-karma-vanilla && npm run test-karma-require && echo 'WARNING: Skipped broken webpack tests. For details, see: https://github.com/openedx/edx-platform/issues/35956'",
+    "test-karma": "npm run test-karma-vanilla && npm run test-karma-require && npm run test-xmodule-webpack && echo 'WARNING: Skipped broken webpack tests. For details, see: https://github.com/openedx/edx-platform/issues/35956'",
     "test-karma-vanilla": "npm run test-cms-vanilla && npm run test-xmodule-vanilla && npm run test-common-vanilla",
     "test-karma-require": "npm run test-cms-require && npm run test-common-require",
     "test-karma-webpack": "npm run test-cms-webpack && npm run test-lms-webpack && npm run test-xmodule-webpack",

webpack.builtinblocks.config.js

@@ -79,14 +79,13 @@ module.exports = {
             './xmodule/js/src/xmodule.js',
             './xmodule/js/src/sequence/edit.js'
         ],
-        VideoBlockDisplay: [
-            './xmodule/js/src/xmodule.js',
-            './xmodule/js/src/video/10_main.js'
-        ],
         VideoBlockEditor: [
             './xmodule/js/src/xmodule.js',
             './xmodule/js/src/tabs/tabs-aggregator.js'
         ],
+        VideoBlockDisplay: [
+            './xmodule/assets/video/public/js/10_main.js'
+        ],
         WordCloudBlockDisplay: [
             './xmodule/js/src/xmodule.js',
             './xmodule/assets/word_cloud/src/js/word_cloud.js'

webpack.common.config.js

@@ -505,15 +505,6 @@ module.exports = Merge.merge({
                         }
                     ]
                 },
-                {
-                    test: /xmodule\/js\/src\/video\/10_main.js/,
-                    use: [
-                        {
-                            loader: 'imports-loader',
-                            options: 'this=>window'
-                        }
-                    ]
-                },
                 /*
                  * END BUILT-IN XBLOCK ASSETS WITH GLOBAL DEFINITIONS
                  ***************************************************************************************************** */
@@ -680,9 +671,11 @@ module.exports = Merge.merge({
             $: 'jQuery',
             backbone: 'Backbone',
             canvas: 'canvas',
+            fs: 'fs',
             gettext: 'gettext',
             jquery: 'jQuery',
             logger: 'Logger',
+            path: 'path',
             underscore: '_',
             URI: 'URI',
             XBlockToXModuleShim: 'XBlockToXModuleShim',

xmodule/assets/video/public/js/00_async_process.js

@@ -0,0 +1,52 @@
+'use strict';
+
+/**
+ * Provides convenient way to process big amount of data without UI blocking.
+ *
+ * @param {array} list Array to process.
+ * @param {function} process Calls this function on each item in the list.
+ * @return {array} Returns a Promise object to observe when all actions of a
+ *                 certain type bound to the collection, queued or not, have finished.
+ */
+let AsyncProcess = {
+    array: function(list, process) {
+        if (!_.isArray(list)) {
+            return $.Deferred().reject().promise();
+        }
+
+        if (!_.isFunction(process) || !list.length) {
+            return $.Deferred().resolve(list).promise();
+        }
+
+        let MAX_DELAY = 50, // maximum amount of time that js code should be allowed to run continuously
+            dfd = $.Deferred();
+        let result = [];
+        let index = 0;
+        let len = list.length;
+
+        let getCurrentTime = function() {
+            return (new Date()).getTime();
+        };
+
+        let handler = function() {
+            let start = getCurrentTime();
+
+            do {
+                result[index] = process(list[index], index);
+                index++;
+            } while (index < len && getCurrentTime() - start < MAX_DELAY);
+
+            if (index < len) {
+                setTimeout(handler, 25);
+            } else {
+                dfd.resolve(result);
+            }
+        };
+
+        setTimeout(handler, 25);
+
+        return dfd.promise();
+    }
+};
+
+export default AsyncProcess;

xmodule/assets/video/public/js/00_component.js

@@ -0,0 +1,81 @@
+'use strict';
+
+import _ from 'underscore';
+
+
+/**
+ * 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}
+ */
+let inherit = Object.create || (function() {
+    let 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 module.
+ * @exports video/00_component.js
+ * @constructor
+ * @return {jquery Promise}
+ */
+let Component = function() {
+    if ($.isFunction(this.initialize)) {
+        // eslint-disable-next-line prefer-spread
+        return this.initialize.apply(this, arguments);
+    }
+};
+
+/**
+ * Returns new constructor that inherits form the current constructor.
+ * @static
+ * @param {Object} protoProps The object containing which will be added to
+ * the prototype.
+ * @return {Object}
+ */
+Component.extend = function(protoProps, staticProps) {
+    let Parent = this;
+    let Child = function() {
+        if ($.isFunction(this.initialize)) {
+            // eslint-disable-next-line prefer-spread
+            return this.initialize.apply(this, arguments);
+        }
+    };
+
+    // Inherit methods and properties from the Parent prototype.
+    Child.prototype = inherit(Parent.prototype);
+    Child.constructor = Parent;
+    // Provide access to parent's methods and properties
+    Child.__super__ = Parent.prototype;
+
+    // Extends inherited methods and properties by methods/properties
+    // passed as argument.
+    if (protoProps) {
+        $.extend(Child.prototype, protoProps);
+    }
+
+    // Inherit static methods and properties
+    $.extend(Child, Parent, staticProps);
+
+    return Child;
+};
+
+export default Component;

xmodule/assets/video/public/js/00_i18n.js

@@ -0,0 +1,35 @@
+'use strict';
+
+/**
+ * i18n module.
+ * @exports video/00_i18n.js
+ * @return {object}
+ */
+
+let 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'),
+    // Translators: Volume level equals 0%.
+    Muted: gettext('Muted'),
+    // Translators: Volume level in range ]0,20]%
+    'Very low': gettext('Very low'),
+    // Translators: Volume level in range ]20,40]%
+    Low: gettext('Low'),
+    // Translators: Volume level in range ]40,60]%
+    Average: gettext('Average'),
+    // Translators: Volume level in range ]60,80]%
+    Loud: gettext('Loud'),
+    // Translators: Volume level in range ]80,99]%
+    'Very loud': gettext('Very loud'),
+    // Translators: Volume level equals 100%.
+    Maximum: gettext('Maximum')
+};
+
+export default i18n;

xmodule/assets/video/public/js/00_iterator.js

@@ -0,0 +1,83 @@
+'use strict';
+
+/**
+ * Provides convenient way to work with iterable data.
+ * @exports video/00_iterator.js
+ * @constructor
+ * @param {array} list Array to be iterated.
+ */
+let Iterator = function(list) {
+    this.list = list;
+    this.index = 0;
+    this.size = this.list.length;
+    this.lastIndex = this.list.length - 1;
+};
+
+Iterator.prototype = {
+
+    /**
+     * Checks validity of provided index for the iterator.
+     * @access protected
+     * @param {numebr} index
+     * @return {boolean}
+     */
+    _isValid: function(index) {
+        return _.isNumber(index) && index < this.size && index >= 0;
+    },
+
+    /**
+     * Returns next element.
+     * @param {number} [index] Updates current position.
+     * @return {any}
+     */
+    next: function(index) {
+        if (!(this._isValid(index))) {
+            index = this.index;
+        }
+
+        this.index = (index >= this.lastIndex) ? 0 : index + 1;
+
+        return this.list[this.index];
+    },
+
+    /**
+     * Returns previous element.
+     * @param {number} [index] Updates current position.
+     * @return {any}
+     */
+    prev: function(index) {
+        if (!(this._isValid(index))) {
+            index = this.index;
+        }
+
+        this.index = (index < 1) ? this.lastIndex : index - 1;
+
+        return this.list[this.index];
+    },
+
+    /**
+     * Returns last element in the list.
+     * @return {any}
+     */
+    last: function() {
+        return this.list[this.lastIndex];
+    },
+
+    /**
+     * Returns first element in the list.
+     * @return {any}
+     */
+    first: function() {
+        return this.list[0];
+    },
+
+    /**
+     * Returns `true` if current position is last for the iterator.
+     * @return {boolean}
+     */
+    isEnd: function() {
+        return this.index === this.lastIndex;
+    }
+};
+
+export default Iterator;