shaka-player 4.0.0 → 4.0.3

package/test/player_src_equals_integration.js

@@ -319,90 +319,88 @@ describe('Player Src Equals', () => {
     expect(newTrack).toBeTruthy();
   });
 
-  it('add external chapters in vtt format', async () => {
-    await loadWithSrcEquals(SMALL_MP4_CONTENT_URI, /* startTime= */ null);
-
-    const locationUri = new goog.Uri(location.href);
-    const partialUri1 = new goog.Uri('/base/test/test/assets/chapters.vtt');
-    const absoluteUri1 = locationUri.resolve(partialUri1);
-    await player.addChaptersTrack(absoluteUri1.toString(), 'en');
-
-    await shaka.test.Util.delay(1.5);
-
-    const chapters = player.getChapters('en');
-    expect(chapters.length).toBe(3);
-    const chapter1 = chapters[0];
-    expect(chapter1.title).toBe('Chapter 1');
-    expect(chapter1.startTime).toBe(0);
-    expect(chapter1.endTime).toBe(5);
-    const chapter2 = chapters[1];
-    expect(chapter2.title).toBe('Chapter 2');
-    expect(chapter2.startTime).toBe(5);
-    expect(chapter2.endTime).toBe(10);
-    const chapter3 = chapters[2];
-    expect(chapter3.title).toBe('Chapter 3');
-    expect(chapter3.startTime).toBe(10);
-    expect(chapter3.endTime).toBe(20);
-
-    const partialUri2 = new goog.Uri('/base/test/test/assets/chapters2.vtt');
-    const absoluteUri2 = locationUri.resolve(partialUri2);
-    await player.addChaptersTrack(absoluteUri2.toString(), 'en');
-
-    await shaka.test.Util.delay(1.5);
-
-    const chaptersUpdated = player.getChapters('en');
-    expect(chaptersUpdated.length).toBe(6);
-    const chapterUpdated1 = chaptersUpdated[0];
-    expect(chapterUpdated1.title).toBe('Chapter 1');
-    expect(chapterUpdated1.startTime).toBe(0);
-    expect(chapterUpdated1.endTime).toBe(5);
-    const chapterUpdated2 = chaptersUpdated[1];
-    expect(chapterUpdated2.title).toBe('Chapter 2');
-    expect(chapterUpdated2.startTime).toBe(5);
-    expect(chapterUpdated2.endTime).toBe(10);
-    const chapterUpdated3 = chaptersUpdated[2];
-    expect(chapterUpdated3.title).toBe('Chapter 3');
-    expect(chapterUpdated3.startTime).toBe(10);
-    expect(chapterUpdated3.endTime).toBe(20);
-    const chapterUpdated4 = chaptersUpdated[3];
-    expect(chapterUpdated4.title).toBe('Chapter 4');
-    expect(chapterUpdated4.startTime).toBe(20);
-    expect(chapterUpdated4.endTime).toBe(30);
-    const chapterUpdated5 = chaptersUpdated[4];
-    expect(chapterUpdated5.title).toBe('Chapter 5');
-    expect(chapterUpdated5.startTime).toBe(30);
-    expect(chapterUpdated5.endTime).toBe(40);
-    const chapterUpdated6 = chaptersUpdated[5];
-    expect(chapterUpdated6.title).toBe('Chapter 6');
-    expect(chapterUpdated6.startTime).toBe(40);
-    expect(chapterUpdated6.endTime).toBe(61.349);
-  });
-
-  it('add external chapters in srt format', async () => {
-    await loadWithSrcEquals(SMALL_MP4_CONTENT_URI, /* startTime= */ null);
-
-    const locationUri = new goog.Uri(location.href);
-    const partialUri = new goog.Uri('/base/test/test/assets/chapters.srt');
-    const absoluteUri = locationUri.resolve(partialUri);
-    await player.addChaptersTrack(absoluteUri.toString(), 'es');
-
-    await shaka.test.Util.delay(1.5);
+  describe('addChaptersTrack', () => {
+    it('adds external chapters in vtt format', async () => {
+      await loadWithSrcEquals(SMALL_MP4_CONTENT_URI, /* startTime= */ null);
+
+      const locationUri = new goog.Uri(location.href);
+      const partialUri1 = new goog.Uri('/base/test/test/assets/chapters.vtt');
+      const absoluteUri1 = locationUri.resolve(partialUri1);
+      await player.addChaptersTrack(absoluteUri1.toString(), 'en');
+
+      // Data should be available as soon as addChaptersTrack resolves.
+      // See https://github.com/shaka-project/shaka-player/issues/4186
+      const chapters = player.getChapters('en');
+      expect(chapters.length).toBe(3);
+      const chapter1 = chapters[0];
+      expect(chapter1.title).toBe('Chapter 1');
+      expect(chapter1.startTime).toBe(0);
+      expect(chapter1.endTime).toBe(5);
+      const chapter2 = chapters[1];
+      expect(chapter2.title).toBe('Chapter 2');
+      expect(chapter2.startTime).toBe(5);
+      expect(chapter2.endTime).toBe(10);
+      const chapter3 = chapters[2];
+      expect(chapter3.title).toBe('Chapter 3');
+      expect(chapter3.startTime).toBe(10);
+      expect(chapter3.endTime).toBe(20);
+
+      const partialUri2 = new goog.Uri('/base/test/test/assets/chapters2.vtt');
+      const absoluteUri2 = locationUri.resolve(partialUri2);
+      await player.addChaptersTrack(absoluteUri2.toString(), 'en');
+
+      const chaptersUpdated = player.getChapters('en');
+      expect(chaptersUpdated.length).toBe(6);
+      const chapterUpdated1 = chaptersUpdated[0];
+      expect(chapterUpdated1.title).toBe('Chapter 1');
+      expect(chapterUpdated1.startTime).toBe(0);
+      expect(chapterUpdated1.endTime).toBe(5);
+      const chapterUpdated2 = chaptersUpdated[1];
+      expect(chapterUpdated2.title).toBe('Chapter 2');
+      expect(chapterUpdated2.startTime).toBe(5);
+      expect(chapterUpdated2.endTime).toBe(10);
+      const chapterUpdated3 = chaptersUpdated[2];
+      expect(chapterUpdated3.title).toBe('Chapter 3');
+      expect(chapterUpdated3.startTime).toBe(10);
+      expect(chapterUpdated3.endTime).toBe(20);
+      const chapterUpdated4 = chaptersUpdated[3];
+      expect(chapterUpdated4.title).toBe('Chapter 4');
+      expect(chapterUpdated4.startTime).toBe(20);
+      expect(chapterUpdated4.endTime).toBe(30);
+      const chapterUpdated5 = chaptersUpdated[4];
+      expect(chapterUpdated5.title).toBe('Chapter 5');
+      expect(chapterUpdated5.startTime).toBe(30);
+      expect(chapterUpdated5.endTime).toBe(40);
+      const chapterUpdated6 = chaptersUpdated[5];
+      expect(chapterUpdated6.title).toBe('Chapter 6');
+      expect(chapterUpdated6.startTime).toBe(40);
+      expect(chapterUpdated6.endTime).toBe(61.349);
+    });
 
-    const chapters = player.getChapters('es');
-    expect(chapters.length).toBe(3);
-    const chapter1 = chapters[0];
-    expect(chapter1.title).toBe('Chapter 1');
-    expect(chapter1.startTime).toBe(0);
-    expect(chapter1.endTime).toBe(5);
-    const chapter2 = chapters[1];
-    expect(chapter2.title).toBe('Chapter 2');
-    expect(chapter2.startTime).toBe(5);
-    expect(chapter2.endTime).toBe(30);
-    const chapter3 = chapters[2];
-    expect(chapter3.title).toBe('Chapter 3');
-    expect(chapter3.startTime).toBe(30);
-    expect(chapter3.endTime).toBe(61.349);
-  });
+    it('add external chapters in srt format', async () => {
+      await loadWithSrcEquals(SMALL_MP4_CONTENT_URI, /* startTime= */ null);
+
+      const locationUri = new goog.Uri(location.href);
+      const partialUri = new goog.Uri('/base/test/test/assets/chapters.srt');
+      const absoluteUri = locationUri.resolve(partialUri);
+      await player.addChaptersTrack(absoluteUri.toString(), 'es');
+
+      const chapters = player.getChapters('es');
+      expect(chapters.length).toBe(3);
+      const chapter1 = chapters[0];
+      expect(chapter1.title).toBe('Chapter 1');
+      expect(chapter1.startTime).toBe(0);
+      expect(chapter1.endTime).toBe(5);
+      const chapter2 = chapters[1];
+      expect(chapter2.title).toBe('Chapter 2');
+      expect(chapter2.startTime).toBe(5);
+      expect(chapter2.endTime).toBe(30);
+      const chapter3 = chapters[2];
+      expect(chapter3.title).toBe('Chapter 3');
+      expect(chapter3.startTime).toBe(30);
+      expect(chapter3.endTime).toBe(61.349);
+    });
+  }); // describe('addChaptersTrack')
 
   // Since we are not in-charge of streaming, calling |retryStreaming| should
   // have no effect.

package/test/player_unit.js

@@ -124,7 +124,13 @@ describe('Player', () => {
 
       player.createDrmEngine = () => drmEngine;
       player.createNetworkingEngine = () => networkingEngine;
-      player.createPlayhead = () => playhead;
+      player.createPlayhead = (startTime) => {
+        const callableSetStartTime =
+            shaka.test.Util.spyFunc(playhead.setStartTime);
+        callableSetStartTime(startTime);
+        playhead.setStartTime.calls.reset();
+        return playhead;
+      };
       player.createMediaSourceEngine = () => mediaSourceEngine;
       player.createStreamingEngine = () => streamingEngine;
     }
@@ -156,6 +162,7 @@ describe('Player', () => {
       window.MediaSource.isTypeSupported = originalIsTypeSupported;
       shaka.media.ManifestParser.unregisterParserByMime(fakeMimeType);
       navigator.mediaCapabilities.decodingInfo = originalDecodingInfo;
+      onError.calls.reset();
     }
   });
 
@@ -2658,6 +2665,51 @@ describe('Player', () => {
       expect(activeVariant.id).toBe(1);
     });
 
+    // Regression test for https://github.com/shaka-project/shaka-player/issues/4190
+    it('throws only one RESTRICTIONS_CANNOT_BE_MET error', async () => {
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        manifest.addVariant(0, (variant) => {
+          variant.addVideo(1, (stream) => {
+            stream.keyIds = new Set(['abc']);
+          });
+        });
+      });
+
+      // Check that error is RESTRICTIONS_CANNOT_BE_MET
+      onError.and.callFake((e) => {
+        const error = e.detail;
+        shaka.test.Util.expectToEqualError(
+            error,
+            new shaka.util.Error(
+                shaka.util.Error.Severity.CRITICAL,
+                shaka.util.Error.Category.MANIFEST,
+                shaka.util.Error.Code.RESTRICTIONS_CANNOT_BE_MET, {
+                  hasAppRestrictions: false,
+                  missingKeys: ['abc'],
+                  restrictedKeyStatuses: [],
+                }));
+      });
+
+      await player.load(fakeManifestUri, 0, fakeMimeType);
+      const activeVariant = getActiveVariantTrack();
+      expect(activeVariant.id).toBe(0);
+
+      abrManager.chooseIndex = 0;
+      abrManager.chooseVariant.calls.reset();
+
+      onKeyStatus({'abc': 'output-restricted'});
+
+      // Ensure that RESTRICTIONS_CANNOT_BE_MET is thrown once
+      expect(onError).toHaveBeenCalledTimes(1);
+
+      // It does not call chooseVariant
+      expect(abrManager.chooseVariant).not.toHaveBeenCalled();
+
+      // The first variant is disallowed.
+      expect(manifest.variants[0].id).toBe(0);
+      expect(manifest.variants[0].allowedByKeySystem).toBe(false);
+    });
+
     it('doesn\'t switch if the active stream isn\'t restricted', async () => {
       manifest = shaka.test.ManifestGenerator.generate((manifest) => {
         manifest.addVariant(0, (variant) => {
@@ -3664,6 +3716,51 @@ describe('Player', () => {
     });
   });
 
+  describe('config streaming.startAtSegmentBoundary', () => {
+    // Test for https://github.com/shaka-project/shaka-player/issues/4188
+    // In that issue, using streaming.startAtSegmentBoundary in v4.0.0 caused
+    // an exception due to the use of a removed method.
+    it('adjusts start time', async () => {
+      player.configure('streaming.startAtSegmentBoundary', true);
+
+      // In order to adjust the start time to a segment boundary, we need
+      // segment descriptions in the segment index.  So create a non-default
+      // fake manifest.
+      const timeline = new shaka.media.PresentationTimeline(300, 0);
+      timeline.setStatic(true);
+      // This duration is used by useSegmentTemplate below to decide how many
+      // references to generate.
+      timeline.setDuration(300);
+      manifest = shaka.test.ManifestGenerator.generate((manifest) => {
+        manifest.presentationTimeline = timeline;
+        manifest.addVariant(0, (variant) => {
+          variant.addVideo(1, (stream) => {
+            stream.useSegmentTemplate(
+                '$Number$.mp4', /* segmentDuration= */ 10);
+          });
+        });
+      });
+
+      await player.load(fakeManifestUri, 12, fakeMimeType);
+
+      expect(playhead.setStartTime).toHaveBeenCalledWith(10);
+    });
+
+    it('does not fail with no segments', async () => {
+      player.configure('streaming.startAtSegmentBoundary', true);
+
+      // Without useSegmentTemplate in the fake manifest, the call to
+      // getIteratorForTime() in Player produces a null iterator.  Using the
+      // default fake manifest should cover that case.  But just to make sure,
+      // verify that we have no segments before calling load().
+      const variant = manifest.variants[0];
+      expect(variant.video.segmentIndex.getIteratorForTime(0)).toBeNull();
+      expect(variant.audio.segmentIndex.getIteratorForTime(0)).toBeNull();
+
+      await player.load(fakeManifestUri, 0, fakeMimeType);
+    });
+  });
+
   /**
    * Gets the currently active variant track.
    * @return {shaka.extern.Track}

package/test/test/boot.js

@@ -242,6 +242,15 @@ window.xfilterDescribe = (describeName, cond, describeBody) => {
   window['describe'] = oldDescribe;
 };
 
+/**
+ * A very short alias for filtering offline integration tests.
+ *
+ * @return {boolean}
+ */
+window.offlineSupported = () => {
+  return shaka.offline.StorageMuxer.support();
+};
+
 /**
  * Load node modules used in testing and install them into window.
  * @return {!Promise}

package/test/test/externs/filters.js

@@ -38,3 +38,7 @@ var filterDescribe = function(name, cond, callback) {};
  * @param {function()} callback
  */
 var xfilterDescribe = function(name, cond, callback) {};
+
+
+/** @return {boolean} */
+var offlineSupported = function() {};

package/test/test/util/simple_fakes.js

@@ -152,9 +152,27 @@ shaka.test.FakeVideo = class {
   constructor(currentTime) {
     /** @const {!Object.<string, !Function>} */
     this.on = {};  // event listeners
+
     /** @type {!Array.<!TextTrack>} */
     this.textTracks = [];
 
+    // In a real video element, textTracks is an event target.
+    // Since Player listens to events on textTracks, we need to fake that
+    // interface.
+    this.textTracksEventTarget = new shaka.util.FakeEventTarget();
+    this.textTracks.addEventListener =
+        // eslint-disable-next-line no-restricted-syntax
+        this.textTracksEventTarget.addEventListener.bind(
+            this.textTracksEventTarget);
+    this.textTracks.removeEventListener =
+        // eslint-disable-next-line no-restricted-syntax
+        this.textTracksEventTarget.removeEventListener.bind(
+            this.textTracksEventTarget);
+    this.textTracks.dispatchEvent =
+        // eslint-disable-next-line no-restricted-syntax
+        this.textTracksEventTarget.dispatchEvent.bind(
+            this.textTracksEventTarget);
+
     this.currentTime = currentTime || 0;
     this.readyState = 0;
     this.playbackRate = 1;
@@ -173,6 +191,10 @@ shaka.test.FakeVideo = class {
         jasmine.createSpy('addTextTrack').and.callFake((kind, id) => {
           const track = new shaka.test.FakeTextTrack();
           this.textTracks.push(track);
+
+          const trackEvent = new shaka.util.FakeEvent('addtrack', {track});
+          this.textTracksEventTarget.dispatchEvent(trackEvent);
+
           return track;
         });
 
@@ -308,11 +330,18 @@ shaka.test.FakePlayhead = class {
     /** @type {!jasmine.Spy} */
     this.setRebufferingGoal = jasmine.createSpy('setRebufferingGoal');
 
+    /** @private {number} */
+    this.startTime_ = 0;
+
     /** @type {!jasmine.Spy} */
-    this.setStartTime = jasmine.createSpy('setStartTime');
+    this.setStartTime = jasmine.createSpy('setStartTime')
+        .and.callFake((value) => {
+          this.startTime_ = value;
+        });
 
     /** @type {!jasmine.Spy} */
-    this.getTime = jasmine.createSpy('getTime').and.returnValue(0);
+    this.getTime = jasmine.createSpy('getTime')
+        .and.callFake(() => this.startTime_);
 
     /** @type {!jasmine.Spy} */
     this.setBuffering = jasmine.createSpy('setBuffering');

package/test/text/vtt_text_parser_unit.js

@@ -535,7 +535,61 @@ describe('VttTextParser', () => {
         'Test\n\n' +
         '00:00:40.000 --> 00:00:50.000 line:-1\n' +
         'Test2',
-        {periodStart: 0, segmentStart: 25, segmentEnd: 65, vttOffset: 0});
+        {periodStart: 0, segmentStart: 25, segmentEnd: 65, vttOffset: 0},
+        /* sequenceMode= */ true);
+  });
+
+  it('ignores X-TIMESTAMP-MAP header if not in sequence mode', () => {
+    verifyHelper(
+        [
+          {startTime: 20, endTime: 40, payload: 'Test'},
+          {startTime: 40, endTime: 50, payload: 'Test2'},
+        ],
+        'WEBVTT\n' +
+        'X-TIMESTAMP-MAP=MPEGTS:900000,LOCAL:01:00:00.000\n\n' +
+        '00:00:20.000 --> 00:00:40.000 line:0\n' +
+        'Test\n\n' +
+        '00:00:40.000 --> 00:00:50.000 line:-1\n' +
+        'Test2',
+        {periodStart: 0, segmentStart: 25, segmentEnd: 65, vttOffset: 0},
+        /* sequenceMode= */ false);
+  });
+
+  it('parses X-TIMESTAMP-MAP header with non-zero local base', () => {
+    verifyHelper(
+        [
+          {startTime: 1800, endTime: 1810, payload: 'Test'},
+          {startTime: 1820, endTime: 1830, payload: 'Test2'},
+        ],
+        // 162000000 = 30 * 60 * 90k = 30 minutes for the TS part of the map.
+        // The local (VTT) part of the map is 1 hour.
+        // So text times of 1 hour map to media times of 30 minutes.
+        'WEBVTT\n' +
+        'X-TIMESTAMP-MAP=MPEGTS:162000000,LOCAL:01:00:00.000\n\n' +
+        '01:00:00.000 --> 01:00:10.000 line:0\n' +
+        'Test\n\n' +
+        '01:00:20.000 --> 01:00:30.000 line:-1\n' +
+        'Test2',
+        {periodStart: 0, segmentStart: 25, segmentEnd: 65, vttOffset: 0},
+        /* sequenceMode= */ true);
+  });
+
+  it('combines X-TIMESTAMP-MAP header with periodStart', () => {
+    verifyHelper(
+        [
+          {startTime: 130, endTime: 150, payload: 'Test'},
+          {startTime: 150, endTime: 160, payload: 'Test2'},
+        ],
+        // 900000 = 10 sec, so expect every timestamp to be 10
+        // seconds ahead of what is specified.
+        'WEBVTT\n' +
+        'X-TIMESTAMP-MAP=MPEGTS:900000,LOCAL:00:00:00.000\n\n' +
+        '00:00:20.000 --> 00:00:40.000 line:0\n' +
+        'Test\n\n' +
+        '00:00:40.000 --> 00:00:50.000 line:-1\n' +
+        'Test2',
+        {periodStart: 100, segmentStart: 25, segmentEnd: 65, vttOffset: 0},
+        /* sequenceMode= */ true);
   });
 
   it('handles timestamp rollover with X-TIMESTAMP-MAP header', () => {
@@ -551,7 +605,8 @@ describe('VttTextParser', () => {
         'Test',
         // Non-null segmentStart takes precedence over X-TIMESTAMP-MAP.
         // This protects us from rollover in the MPEGTS field.
-        {periodStart: 0, segmentStart: 95440, segmentEnd: 95550, vttOffset: 0});
+        {periodStart: 0, segmentStart: 95440, segmentEnd: 95550, vttOffset: 0},
+        /* sequenceMode= */ true);
 
     verifyHelper(
         [
@@ -564,7 +619,8 @@ describe('VttTextParser', () => {
         'X-TIMESTAMP-MAP=MPEGTS:9745408,LOCAL:00:00:00.000\n\n' +
         '00:00:00.000 --> 00:00:02.000 line:0\n' +
         'Test2',
-        {periodStart: 0, segmentStart: 95550, segmentEnd: 95560, vttOffset: 0});
+        {periodStart: 0, segmentStart: 95550, segmentEnd: 95560, vttOffset: 0},
+        /* sequenceMode= */ true);
   });
 
   it('supports global style blocks', () => {
@@ -978,11 +1034,14 @@ describe('VttTextParser', () => {
    * @param {!Array} cues
    * @param {string} text
    * @param {shaka.extern.TextParser.TimeContext} time
+   * @param {boolean=} sequenceMode
    */
-  function verifyHelper(cues, text, time) {
+  function verifyHelper(cues, text, time, sequenceMode = false) {
     const data =
         shaka.util.BufferUtils.toUint8(shaka.util.StringUtils.toUTF8(text));
-    const result = new shaka.text.VttTextParser().parseMedia(data, time);
+    const parser = new shaka.text.VttTextParser();
+    parser.setSequenceMode(sequenceMode);
+    const result = parser.parseMedia(data, time);
 
     const expected = cues.map((cue) => {
       if (cue.nestedCues) {

package/test/util/mime_utils_unit.js

@@ -0,0 +1,54 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+describe('MimeUtils', () => {
+  const getNormalizedCodec = (codecs) =>
+    shaka.util.MimeUtils.getNormalizedCodec(codecs);
+
+  it('normalizes codecs', () => {
+    expect(getNormalizedCodec('mp4a.66')).toBe('aac');
+    expect(getNormalizedCodec('mp4a.67')).toBe('aac');
+    expect(getNormalizedCodec('mp4a.68')).toBe('aac');
+
+    expect(getNormalizedCodec('mp3')).toBe('mp3');
+    expect(getNormalizedCodec('mp4a.69')).toBe('mp3');
+    expect(getNormalizedCodec('mp4a.6B')).toBe('mp3');
+    expect(getNormalizedCodec('mp4a.6b')).toBe('mp3');
+
+    expect(getNormalizedCodec('mp4a.40.2')).toBe('aac');
+    expect(getNormalizedCodec('mp4a.40.02')).toBe('aac');
+    expect(getNormalizedCodec('mp4a.40.5')).toBe('aac');
+    expect(getNormalizedCodec('mp4a.40.05')).toBe('aac');
+    expect(getNormalizedCodec('mp4a.40.29')).toBe('aac');
+    expect(getNormalizedCodec('mp4a.40.42')).toBe('aac');
+
+    expect(getNormalizedCodec('ac-3')).toBe('ac-3');
+    expect(getNormalizedCodec('mp4a.a5')).toBe('ac-3');
+    expect(getNormalizedCodec('mp4a.A5')).toBe('ac-3');
+
+    expect(getNormalizedCodec('ec-3')).toBe('ec-3');
+    expect(getNormalizedCodec('mp4a.a6')).toBe('ec-3');
+    expect(getNormalizedCodec('mp4a.A6')).toBe('ec-3');
+
+    expect(getNormalizedCodec('dtsc')).toBe('dtsc');
+    expect(getNormalizedCodec('mp4a.a9')).toBe('dtsc');
+
+    expect(getNormalizedCodec('dtsx')).toBe('dtsx');
+    expect(getNormalizedCodec('mp4a.b2')).toBe('dtsx');
+
+    expect(getNormalizedCodec('vp8')).toBe('vp8');
+    expect(getNormalizedCodec('vp8.0')).toBe('vp8');
+
+    expect(getNormalizedCodec('avc1')).toBe('avc');
+    expect(getNormalizedCodec('avc3')).toBe('avc');
+
+    expect(getNormalizedCodec('hvc1')).toBe('hevc');
+    expect(getNormalizedCodec('hev1')).toBe('hevc');
+
+    expect(getNormalizedCodec('dvh1.05')).toBe('dovi');
+    expect(getNormalizedCodec('dvhe.05')).toBe('dovi');
+  });
+});

package/test/util/periods_unit.js

@@ -996,6 +996,85 @@ describe('PeriodCombiner', () => {
     expect(audio2.originalId).toBe('2,4');
   });
 
+  it('Matches streams with related codecs', async () => {
+    const stream1 = makeVideoStream(1080);
+    stream1.originalId = '1';
+    stream1.bandwidth = 120000;
+    stream1.codecs = 'hvc1.1.4.L126.B0';
+
+    const stream2 = makeVideoStream(1080);
+    stream2.originalId = '2';
+    stream2.bandwidth = 120000;
+    stream2.codecs = 'hev1.2.4.L123.B0';
+
+    const stream3 = makeVideoStream(1080);
+    stream3.originalId = '3';
+    stream3.bandwidth = 120000;
+    stream3.codecs = 'dvhe.05.01';
+
+    const stream4 = makeVideoStream(1080);
+    stream4.originalId = '4';
+    stream4.bandwidth = 120000;
+    stream4.codecs = 'dvh1.05.01';
+
+    const stream5 = makeVideoStream(1080);
+    stream5.originalId = '5';
+    stream5.bandwidth = 120000;
+    stream5.codecs = 'avc1.42001f';
+
+    const stream6 = makeVideoStream(1080);
+    stream6.originalId = '6';
+    stream6.bandwidth = 120000;
+    stream6.codecs = 'avc3.42001f';
+
+    const stream7 = makeVideoStream(1080);
+    stream7.originalId = '7';
+    stream7.bandwidth = 120000;
+    stream7.codecs = 'vp09.00.10.08';
+
+    const stream8 = makeVideoStream(1080);
+    stream8.originalId = '8';
+    stream8.bandwidth = 120000;
+    stream8.codecs = 'vp09.01.20.08.01';
+
+    /** @type {!Array.<shaka.util.PeriodCombiner.Period>} */
+    const periods = [
+      {
+        id: '0',
+        videoStreams: [
+          stream1, stream3, stream5, stream7,
+        ],
+        audioStreams: [],
+        textStreams: [],
+        imageStreams: [],
+      },
+      {
+        id: '1',
+        videoStreams: [
+          stream2, stream4, stream6, stream8,
+        ],
+        audioStreams: [],
+        textStreams: [],
+        imageStreams: [],
+      },
+    ];
+
+    await combiner.combinePeriods(periods, /* isDynamic= */ true);
+    const variants = combiner.getVariants();
+    expect(variants.length).toBe(4);
+    // We can use the originalId field to see what each track is composed of.
+    const video1 = variants[0].video;
+    expect(video1.originalId).toBe('1,2');
+
+    const video2 = variants[1].video;
+    expect(video2.originalId).toBe('3,4');
+
+    const video3 = variants[2].video;
+    expect(video3.originalId).toBe('5,6');
+
+    const video4 = variants[3].video;
+    expect(video4.originalId).toBe('7,8');
+  });
 
   it('Matches streams with most roles in common', async () => {
     const makeAudioStreamWithRoles = (roles) => {

package/ui/less/containers.less

@@ -161,7 +161,7 @@
     /* Consistent margins (external) and padding (internal) between controls. */
     .bottom-panels-elements-margin();
 
-    padding: 0;
+    padding: 0 5px;
 
     /* Transparent backgrounds, no borders, and a pointer when you mouse over
      * them. */

package/ui/less/general.less

@@ -37,7 +37,7 @@
 }
 
 .bottom-panels-elements-margin() {
-  margin: 1px 6px;
+  margin: 1px;
 }
 
 /* For containers which host elements overlaying other things. */

package/ui/less/range_elements.less

@@ -140,6 +140,7 @@
 
 .shaka-volume-bar-container {
   width: 100px;
+  padding: 0;
 }
 
 .shaka-range-element {

package/ui/resolution_selection.js

@@ -90,7 +90,7 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
       return otherIdx == idx;
     });
 
-    // Sort the tracks by height or bandwith depending on content type.
+    // Sort the tracks by height or bandwidth depending on content type.
     if (this.player.isAudioOnly()) {
       tracks.sort((t1, t2) => {
         goog.asserts.assert(t1.bandwidth != null, 'Null bandwidth');