Merge branch 'main' into fix/wait-for-endedtimeline

index.html

@@ -53,6 +53,10 @@ <h3>Options</h3>
  <input id=minified type="checkbox">
  Minified VHS (reloads player)
  </label>
+ <label>
+ <input id=sync-workers type="checkbox">
+ Synchronous Web Workers (reloads player)
+ </label>
  <label>
  <input id=liveui type="checkbox">
  Enable the live UI (reloads player)

package.json

@@ -65,7 +65,6 @@
  "video.js": "^6 || ^7"
  },
  "devDependencies": {
- "@gkatsev/rollup-plugin-bundle-worker": "^1.0.2",
  "@rollup/plugin-replace": "^2.3.4",
  "@videojs/generator-helpers": "~2.0.1",
  "d3": "^3.4.8",
@@ -77,6 +76,7 @@
  "lodash-compat": "^3.10.0",
  "nomnoml": "^0.3.0",
  "rollup": "^2.36.1",
+ "rollup-plugin-worker-factory": "^0.4.1",
  "shelljs": "^0.8.4",
  "sinon": "^8.1.1",
  "url-toolkit": "^2.2.1",

scripts/index-demo-page.js

@@ -217,7 +217,7 @@
  representationsEl.selectedIndex = selectedIndex;
  };
 
- ['debug', 'autoplay', 'muted', 'minified', 'liveui', 'partial', 'url', 'type', 'keysystems', 'buffer-water', 'override-native'].forEach(function(name) {
+ ['debug', 'autoplay', 'muted', 'minified', 'sync-workers', 'liveui', 'partial', 'url', 'type', 'keysystems', 'buffer-water', 'override-native'].forEach(function(name) {
  stateEls[name] = document.getElementById(name);
  });
 
@@ -244,6 +244,13 @@
  window.player.autoplay(event.target.checked);
  });
 
+ stateEls['sync-workers'].addEventListener('change', function(event) {
+ saveState();
+
+ // reload the player and scripts
+ stateEls.minified.dispatchEvent(newEvent('change'));
+ });
+
  stateEls.debug.addEventListener('change', function(event) {
  saveState();
  window.videojs.log.level(event.target.checked ? 'debug' : 'info');
@@ -281,12 +288,17 @@
  'node_modules/video.js/dist/alt/video.core',
  'node_modules/videojs-contrib-eme/dist/videojs-contrib-eme',
  'node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels',
- 'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector',
- 'dist/videojs-http-streaming'
+ 'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector'
  ].map(function(url) {
  return url + (event.target.checked ? '.min' : '') + '.js';
  });
 
+ if (stateEls['sync-workers'].checked) {
+ urls.push('dist/videojs-http-streaming-sync-workers.js');
+ } else {
+ urls.push('dist/videojs-http-streaming' + (event.target.checked ? '.min' : '') + '.js');
+ }
+
  saveState();
 
  if (window.player) {

scripts/rollup.config.js

@@ -1,9 +1,10 @@
 const generate = require('videojs-generate-rollup-config');
-const worker = require('@gkatsev/rollup-plugin-bundle-worker');
+const worker = require('rollup-plugin-worker-factory');
 const {terser} = require('rollup-plugin-terser');
 const createTestData = require('./create-test-data.js');
 const replace = require('@rollup/plugin-replace');
 
+let syncWorker;
 // see https://github.com/videojs/videojs-generate-rollup-config
 // for options
 const options = {
@@ -26,11 +27,13 @@ const options = {
  });
  },
  plugins(defaults) {
- defaults.module.splice(2, 0, 'worker');
- defaults.browser.splice(2, 0, 'worker');
- defaults.test.splice(3, 0, 'worker');
-
- defaults.test.splice(0, 0, 'createTestData');
+ // add worker and createTestData to the front of plugin lists
+ defaults.module.unshift('worker');
+ defaults.browser.unshift('worker');
+ // change this to `syncWorker` for syncronous web worker
+ // during unit tests
+ defaults.test.unshift('worker');
+ defaults.test.unshift('createTestData');
 
  // istanbul is only in the list for regular builds and not watch
  if (defaults.test.indexOf('istanbul') !== -1) {
@@ -41,20 +44,35 @@ const options = {
  return defaults;
  },
  primedPlugins(defaults) {
- return Object.assign(defaults, {
+ defaults = Object.assign(defaults, {
  replace: replace({
  // single quote replace
  "require('@videojs/vhs-utils/es": "require('@videojs/vhs-utils/cjs",
  // double quote replace
  'require("@videojs/vhs-utils/es': 'require("@videojs/vhs-utils/cjs'
  }),
- worker: worker(),
  uglify: terser({
  output: {comments: 'some'},
  compress: {passes: 2}
  }),
  createTestData: createTestData()
  });
+
+ defaults.worker = worker({type: 'browser', plugins: [
+ defaults.resolve,
+ defaults.json,
+ defaults.commonjs,
+ defaults.babel
+ ]});
+
+ defaults.syncWorker = syncWorker = worker({type: 'mock', plugins: [
+ defaults.resolve,
+ defaults.json,
+ defaults.commonjs,
+ defaults.babel
+ ]});
+
+ return defaults;
  },
  babel(defaults) {
  const presetEnvSettings = defaults.presets[0][1];
@@ -75,27 +93,19 @@ if (process.env.CI_TEST_TYPE) {
 }
 const config = generate(options);
 
+if (config.builds.browser) {
+ config.builds.syncWorkers = config.makeBuild('browser', {
+ output: {
+ name: 'httpStreaming',
+ format: 'umd',
+ file: 'dist/videojs-http-streaming-sync-workers.js'
+ }
+ });
+
+ config.builds.syncWorkers.plugins[0] = syncWorker;
+}
+
 // Add additonal builds/customization here!
 
 // export the builds to rollup
-export default [
- config.makeBuild('browser', {
- input: 'src/decrypter-worker.js',
- output: {
- format: 'iife',
- name: 'decrypterWorker',
- file: 'src/decrypter-worker.worker.js'
- },
- external: []
- }),
-
- config.makeBuild('browser', {
- input: 'src/transmuxer-worker.js',
- output: {
- format: 'iife',
- name: 'transmuxerWorker',
- file: 'src/transmuxer-worker.worker.js'
- },
- external: []
- })
-].concat(Object.values(config.builds));
+export default Object.values(config.builds);

src/decrypter-worker.js

@@ -6,43 +6,36 @@ import { createTransferableMessage } from './bin-utils';
  * Our web worker interface so that things can talk to aes-decrypter
  * that will be running in a web worker. the scope is passed to this by
  * webworkify.
- *
- * @param {Object} self
- * the scope for the web worker
  */
-const DecrypterWorker = function(self) {
- self.onmessage = function(event) {
- const data = event.data;
- const encrypted = new Uint8Array(
- data.encrypted.bytes,
- data.encrypted.byteOffset,
- data.encrypted.byteLength
- );
- const key = new Uint32Array(
- data.key.bytes,
- data.key.byteOffset,
- data.key.byteLength / 4
- );
- const iv = new Uint32Array(
- data.iv.bytes,
- data.iv.byteOffset,
- data.iv.byteLength / 4
- );
+self.onmessage = function(event) {
+ const data = event.data;
+ const encrypted = new Uint8Array(
+ data.encrypted.bytes,
+ data.encrypted.byteOffset,
+ data.encrypted.byteLength
+ );
+ const key = new Uint32Array(
+ data.key.bytes,
+ data.key.byteOffset,
+ data.key.byteLength / 4
+ );
+ const iv = new Uint32Array(
+ data.iv.bytes,
+ data.iv.byteOffset,
+ data.iv.byteLength / 4
+ );
 
- /* eslint-disable no-new, handle-callback-err */
- new Decrypter(
- encrypted,
- key,
- iv,
- function(err, bytes) {
- self.postMessage(createTransferableMessage({
- source: data.source,
- decrypted: bytes
- }), [bytes.buffer]);
- }
- );
- /* eslint-enable */
- };
+ /* eslint-disable no-new, handle-callback-err */
+ new Decrypter(
+ encrypted,
+ key,
+ iv,
+ function(err, bytes) {
+ self.postMessage(createTransferableMessage({
+ source: data.source,
+ decrypted: bytes
+ }), [bytes.buffer]);
+ }
+ );
+ /* eslint-enable */
 };
-
-export default new DecrypterWorker(self);

src/master-playlist-controller.js

@@ -13,7 +13,7 @@ import videojs from 'video.js';
 import { updateAdCues } from './ad-cue-tags';
 import SyncController from './sync-controller';
 import TimelineChangeController from './timeline-change-controller';
-import Decrypter from 'worker!./decrypter-worker.worker.js';
+import Decrypter from 'worker!./decrypter-worker.js';
 import Config from './config';
 import {
  parseCodecs,

src/segment-loader.js

@@ -7,7 +7,6 @@ import Config from './config';
 import window from 'global/window';
 import { initSegmentId, segmentKeyId } from './bin-utils';
 import { mediaSegmentRequest, REQUEST_ERRORS } from './media-segment-request';
-import TransmuxWorker from 'worker!./transmuxer-worker.worker.js';
 import segmentTransmuxer from './segment-transmuxer';
 import { TIME_FUDGE_FACTOR, timeUntilRebuffer as timeUntilRebuffer_ } from './ranges';
 import { minRebufferMaxBandwidthSelector } from './playlist-selectors';
@@ -530,7 +529,6 @@ export default class SegmentLoader extends videojs.EventTarget {
  };
 
  this.transmuxer_ = this.createTransmuxer_();
-
  this.triggerSyncInfoUpdate_ = () => this.trigger('syncinfoupdate');
  this.syncController_.on('syncinfoupdate', this.triggerSyncInfoUpdate_);
 
@@ -591,20 +589,13 @@ export default class SegmentLoader extends videojs.EventTarget {
  }
 
  createTransmuxer_() {
- const transmuxer = new TransmuxWorker();
-
- transmuxer.postMessage({
- action: 'init',
- options: {
- parse708captions: this.parse708captions_,
- remux: false,
- alignGopsAtEnd: this.safeAppend_,
- keepOriginalTimestamps: true,
- handlePartialData: this.handlePartialData_
- }
+ return segmentTransmuxer.createTransmuxer({
+ remux: false,
+ alignGopsAtEnd: this.safeAppend_,
+ keepOriginalTimestamps: true,
+ handlePartialData: this.handlePartialData_,
+ parse708captions: this.parse708captions_
  });
-
- return transmuxer;
  }
 
  /**
@@ -632,9 +623,6 @@ export default class SegmentLoader extends videojs.EventTarget {
  this.abort_();
  if (this.transmuxer_) {
  this.transmuxer_.terminate();
- // Although it isn't an instance of a class, the segment transmuxer must still be
- // cleaned up.
- segmentTransmuxer.dispose();
  }
  this.resetStats_();