feat: add compatibility layer for video.js 7 and 8 (#1322)

package.json

@@ -85,7 +85,7 @@
     "shelljs": "^0.8.5",
     "sinon": "^8.1.1",
     "url-toolkit": "^2.2.1",
-    "videojs-contrib-eme": "^3.8.1",
+    "videojs-contrib-eme": "^5.0.1",
     "videojs-contrib-quality-levels": "^2.0.4",
     "videojs-generate-karma-config": "^8.0.1",
     "videojs-generate-rollup-config": "^7.0.0",

src/dash-playlist-loader.js

@@ -21,8 +21,9 @@ import {
 import containerRequest from './util/container-request.js';
 import {toUint8} from '@videojs/vhs-utils/es/byte-helpers';
 import logger from './util/logger';
+import {merge} from './util/vjs-compat';
 
-const { EventTarget, mergeOptions } = videojs;
+const { EventTarget } = videojs;
 
 const dashPlaylistUnchanged = function(a, b) {
   if (!isPlaylistUnchanged(a, b)) {
@@ -134,7 +135,7 @@ export const parseMainXml = ({
  */
 export const updateMain = (oldMain, newMain, sidxMapping) => {
   let noChanges = true;
-  let update = mergeOptions(oldMain, {
+  let update = merge(oldMain, {
     // These are top level properties that can be updated
     duration: newMain.duration,
     minimumUpdatePeriod: newMain.minimumUpdatePeriod,
@@ -246,7 +247,7 @@ export const filterChangedSidxMappings = (main, oldSidxMapping) => {
     if (properties.playlists && properties.playlists.length) {
       const playlists = properties.playlists;
 
-      mediaGroupSidx = mergeOptions(
+      mediaGroupSidx = merge(
         mediaGroupSidx,
         compareSidxEntry(playlists, oldSidxMapping)
       );

src/media-groups.js

@@ -4,6 +4,7 @@ import DashPlaylistLoader from './dash-playlist-loader';
 import noop from './util/noop';
 import {isAudioOnly, playlistMatch} from './playlist.js';
 import logger from './util/logger';
+import {merge} from './util/vjs-compat';
 
 /**
  * Convert the properties of an HLS track into an audioTrackKind.
@@ -486,7 +487,7 @@ export const initialize = {
           playlistLoader = null;
         }
 
-        properties = videojs.mergeOptions(
+        properties = merge(
           { id: variantLabel, playlistLoader },
           properties
         );
@@ -586,7 +587,7 @@ export const initialize = {
           );
         }
 
-        properties = videojs.mergeOptions({
+        properties = merge({
           id: variantLabel,
           playlistLoader
         }, properties);
@@ -656,7 +657,7 @@ export const initialize = {
         };
 
         if (captionServices[newProps.instreamId]) {
-          newProps = videojs.mergeOptions(newProps, captionServices[newProps.instreamId]);
+          newProps = merge(newProps, captionServices[newProps.instreamId]);
         }
 
         if (newProps.default === undefined) {
@@ -665,7 +666,7 @@ export const initialize = {
 
         // No PlaylistLoader is required for Closed-Captions because the captions are
         // embedded within the video stream
-        groups[groupId].push(videojs.mergeOptions({ id: variantLabel }, properties));
+        groups[groupId].push(merge({ id: variantLabel }, properties));
 
         if (typeof tracks[variantLabel] === 'undefined') {
           const track = tech.addRemoteTextTrack({

src/media-segment-request.js

@@ -1,4 +1,3 @@
-import videojs from 'video.js';
 import { createTransferableMessage } from './bin-utils';
 import { stringToArrayBuffer } from './util/string-to-array-buffer';
 import { transmux } from './segment-transmuxer';
@@ -8,6 +7,7 @@ import {
   detectContainerForBytes,
   isLikelyFmp4MediaSegment
 } from '@videojs/vhs-utils/es/containers';
+import {merge} from './util/vjs-compat';
 
 export const REQUEST_ERRORS = {
   FAILURE: 2,
@@ -514,7 +514,7 @@ const handleSegmentBytes = ({
             bytes = message.data.buffer;
             segment.bytes = bytesAsUint8Array = message.data;
             message.logs.forEach(function(log) {
-              onTransmuxerLog(videojs.mergeOptions(log, {stream: 'mp4CaptionParser'}));
+              onTransmuxerLog(merge(log, {stream: 'mp4CaptionParser'}));
             });
             finishLoading(message.captions);
           }
@@ -860,7 +860,7 @@ const handleProgress = ({
     return;
   }
 
-  segment.stats = videojs.mergeOptions(segment.stats, getProgressStats(event));
+  segment.stats = merge(segment.stats, getProgressStats(event));
 
   // record the time that we receive the first byte of data
   if (!segment.stats.firstBytesReceivedAt && segment.stats.bytesReceived) {
@@ -981,7 +981,7 @@ export const mediaSegmentRequest = ({
     if (segment.map && !segment.map.bytes && segment.map.key && segment.map.key.resolvedUri === segment.key.resolvedUri) {
       objects.push(segment.map.key);
     }
-    const keyRequestOptions = videojs.mergeOptions(xhrOptions, {
+    const keyRequestOptions = merge(xhrOptions, {
       uri: segment.key.resolvedUri,
       responseType: 'arraybuffer'
     });
@@ -996,7 +996,7 @@ export const mediaSegmentRequest = ({
     const differentMapKey = segment.map.key && (!segment.key || segment.key.resolvedUri !== segment.map.key.resolvedUri);
 
     if (differentMapKey) {
-      const mapKeyRequestOptions = videojs.mergeOptions(xhrOptions, {
+      const mapKeyRequestOptions = merge(xhrOptions, {
         uri: segment.map.key.resolvedUri,
         responseType: 'arraybuffer'
       });
@@ -1005,7 +1005,7 @@ export const mediaSegmentRequest = ({
 
       activeXhrs.push(mapKeyXhr);
     }
-    const initSegmentOptions = videojs.mergeOptions(xhrOptions, {
+    const initSegmentOptions = merge(xhrOptions, {
       uri: segment.map.resolvedUri,
       responseType: 'arraybuffer',
       headers: segmentXhrHeaders(segment.map)
@@ -1016,7 +1016,7 @@ export const mediaSegmentRequest = ({
     activeXhrs.push(initSegmentXhr);
   }
 
-  const segmentRequestOptions = videojs.mergeOptions(xhrOptions, {
+  const segmentRequestOptions = merge(xhrOptions, {
     uri: segment.part && segment.part.resolvedUri || segment.resolvedUri,
     responseType: 'arraybuffer',
     headers: segmentXhrHeaders(segment)

src/playlist-controller.js

@@ -25,6 +25,7 @@ import {
 import { codecsForPlaylist, unwrapCodecList, codecCount } from './util/codecs.js';
 import { createMediaTypes, setupMediaGroups } from './media-groups';
 import logger from './util/logger';
+import {merge, createTimeRanges} from './util/vjs-compat';
 
 const ABORT_EARLY_EXCLUSION_SECONDS = 60 * 2;
 
@@ -219,7 +220,7 @@ export class PlaylistController extends videojs.EventTarget {
     // we don't have to handle sourceclose since dispose will handle termination of
     // everything, and the MediaSource should not be detached without a proper disposal
 
-    this.seekable_ = videojs.createTimeRanges();
+    this.seekable_ = createTimeRanges();
     this.hasPlayed_ = false;
 
     this.syncController_ = new SyncController(options);
@@ -268,19 +269,19 @@ export class PlaylistController extends videojs.EventTarget {
     // setup segment loaders
     // combined audio/video or just video when alternate audio track is selected
     this.mainSegmentLoader_ =
-      new SegmentLoader(videojs.mergeOptions(segmentLoaderSettings, {
+      new SegmentLoader(merge(segmentLoaderSettings, {
         segmentMetadataTrack: this.segmentMetadataTrack_,
         loaderType: 'main'
       }), options);
 
     // alternate audio track
     this.audioSegmentLoader_ =
-      new SegmentLoader(videojs.mergeOptions(segmentLoaderSettings, {
+      new SegmentLoader(merge(segmentLoaderSettings, {
         loaderType: 'audio'
       }), options);
 
     this.subtitleSegmentLoader_ =
-      new VTTSegmentLoader(videojs.mergeOptions(segmentLoaderSettings, {
+      new VTTSegmentLoader(merge(segmentLoaderSettings, {
         loaderType: 'vtt',
         featuresNativeTextTracks: this.tech_.featuresNativeTextTracks
       }), options);
@@ -1518,7 +1519,7 @@ export class PlaylistController extends videojs.EventTarget {
       // seekables are pretty far off, rely on main
       this.seekable_ = mainSeekable;
     } else {
-      this.seekable_ = videojs.createTimeRanges([[
+      this.seekable_ = createTimeRanges([[
         (audioSeekable.start(0) > mainSeekable.start(0)) ? audioSeekable.start(0) :
           mainSeekable.start(0),
         (audioSeekable.end(0) < mainSeekable.end(0)) ? audioSeekable.end(0) :

src/playlist-loader.js

@@ -17,8 +17,9 @@ import {
   forEachMediaGroup
 } from './manifest';
 import {getKnownPartCount} from './playlist.js';
+import {merge} from './util/vjs-compat';
 
-const { mergeOptions, EventTarget } = videojs;
+const { EventTarget } = videojs;
 
 const addLLHLSQueryDirectives = (uri, media) => {
   if (media.endList || !media.serverControl) {
@@ -105,7 +106,7 @@ export const updateSegment = (a, b) => {
     return b;
   }
 
-  const result = mergeOptions(a, b);
+  const result = merge(a, b);
 
   // if only the old segment has preload hints
   // and the new one does not, remove preload hints.
@@ -123,7 +124,7 @@ export const updateSegment = (a, b) => {
   } else if (a.parts && b.parts) {
     for (let i = 0; i < b.parts.length; i++) {
       if (a.parts && a.parts[i]) {
-        result.parts[i] = mergeOptions(a.parts[i], b.parts[i]);
+        result.parts[i] = merge(a.parts[i], b.parts[i]);
       }
     }
   }
@@ -273,7 +274,7 @@ export const isPlaylistUnchanged = (a, b) => a === b ||
   * null if the merge produced no change.
   */
 export const updateMain = (main, newMedia, unchangedCheck = isPlaylistUnchanged) => {
-  const result = mergeOptions(main, {});
+  const result = merge(main, {});
   const oldMedia = result.playlists[newMedia.id];
 
   if (!oldMedia) {
@@ -286,7 +287,7 @@ export const updateMain = (main, newMedia, unchangedCheck = isPlaylistUnchanged)
 
   newMedia.segments = getAllSegments(newMedia);
 
-  const mergedPlaylist = mergeOptions(oldMedia, newMedia);
+  const mergedPlaylist = merge(oldMedia, newMedia);
 
   // always use the new media's preload segment
   if (mergedPlaylist.preloadSegment && !newMedia.preloadSegment) {

src/playlist.js

@@ -3,12 +3,10 @@
  *
  * Playlist related utilities.
  */
-import videojs from 'video.js';
 import window from 'global/window';
 import {isAudioCodec} from '@videojs/vhs-utils/es/codecs.js';
 import {TIME_FUDGE_FACTOR} from './ranges.js';
-
-const {createTimeRange} = videojs;
+import {createTimeRanges} from './util/vjs-compat';
 
 /**
  * Get the duration of a segment, with special cases for
@@ -396,9 +394,9 @@ export const seekable = function(playlist, expired, liveEdgePadding) {
   const seekableEnd = playlistEnd(playlist, expired, useSafeLiveEnd, liveEdgePadding);
 
   if (seekableEnd === null) {
-    return createTimeRange();
+    return createTimeRanges();
   }
-  return createTimeRange(seekableStart, seekableEnd);
+  return createTimeRanges(seekableStart, seekableEnd);
 };
 
 /**

src/ranges.js

@@ -4,8 +4,7 @@
  * Utilities for working with TimeRanges.
  *
  */
-
-import videojs from 'video.js';
+import {createTimeRanges} from './util/vjs-compat';
 
 // Fudge factor to account for TimeRanges rounding
 export const TIME_FUDGE_FACTOR = 1 / 30;
@@ -40,7 +39,7 @@ const filterRanges = function(timeRanges, predicate) {
     }
   }
 
-  return videojs.createTimeRanges(results);
+  return createTimeRanges(results);
 };
 
 /**
@@ -79,7 +78,7 @@ export const findNextRange = function(timeRanges, time) {
  */
 export const findGaps = function(buffered) {
   if (buffered.length < 2) {
-    return videojs.createTimeRanges();
+    return createTimeRanges();
   }
 
   const ranges = [];
@@ -91,7 +90,7 @@ export const findGaps = function(buffered) {
     ranges.push([start, end]);
   }
 
-  return videojs.createTimeRanges(ranges);
+  return createTimeRanges(ranges);
 };
 
 /**
@@ -170,7 +169,7 @@ export const bufferIntersection = function(bufferA, bufferB) {
   const ranges = [];
 
   if (!bufferA || !bufferA.length || !bufferB || !bufferB.length) {
-    return videojs.createTimeRange();
+    return createTimeRanges();
   }
 
   // Handle the case where we have both buffers and create an
@@ -221,7 +220,7 @@ export const bufferIntersection = function(bufferA, bufferB) {
     }
   }
 
-  return videojs.createTimeRanges(ranges);
+  return createTimeRanges(ranges);
 };
 
 /**
@@ -300,7 +299,7 @@ export const getSegmentBufferedPercent = function(
   const endOfSegment = startOfSegment + segmentDuration;
 
   // The entire time range of the segment
-  const originalSegmentRange = videojs.createTimeRanges([[
+  const originalSegmentRange = createTimeRanges([[
     startOfSegment,
     endOfSegment
   ]]);
@@ -311,7 +310,7 @@ export const getSegmentBufferedPercent = function(
   // for that and the function will still return 100% if a only half of a
   // segment is actually in the buffer as long as the currentTime is also
   // half-way through the segment
-  const adjustedSegmentRange = videojs.createTimeRanges([[
+  const adjustedSegmentRange = createTimeRanges([[
     clamp(startOfSegment, [currentTime, endOfSegment]),
     endOfSegment
   ]]);

src/reload-source-on-error.js

@@ -1,4 +1,5 @@
 import videojs from 'video.js';
+import {merge} from './util/vjs-compat';
 
 const defaultOptions = {
   errorInterval: 30,
@@ -20,7 +21,7 @@ const defaultOptions = {
 const initPlugin = function(player, options) {
   let lastCalled = 0;
   let seekTo = 0;
-  const localOptions = videojs.mergeOptions(defaultOptions, options);
+  const localOptions = merge(defaultOptions, options);
 
   player.ready(() => {
     player.trigger({type: 'usage', name: 'vhs-error-reload-initialized'});

src/segment-loader.js

@@ -24,6 +24,7 @@ import shallowEqual from './util/shallow-equal.js';
 import { QUOTA_EXCEEDED_ERR } from './error-codes';
 import {timeRangesToArray, lastBufferedEnd, timeAheadOf} from './ranges.js';
 import {getKnownPartCount} from './playlist.js';
+import {createTimeRanges} from './util/vjs-compat';
 
 /**
  * The segment loader has no recourse except to fetch a segment in the
@@ -838,7 +839,7 @@ export default class SegmentLoader extends videojs.EventTarget {
     const trackInfo = this.getMediaInfo_();
 
     if (!this.sourceUpdater_ || !trackInfo) {
-      return videojs.createTimeRanges();
+      return createTimeRanges();
     }
 
     if (this.loaderType_ === 'main') {