shaka-player 3.2.11 → 3.2.13

package/docs/jsdoc-template/publish.js

@@ -440,6 +440,7 @@ function buildNav(members) {
       [members.externals, 'Externals', seen, linktoExternal],
       [members.namespaces, 'Namespaces', seen, linkto],
       [members.classes, 'Classes', seen, linkto],
+      [members.enums, 'Enums', seen, linkto],
       [members.interfaces, 'Interfaces', seen, linkto],
       [members.events, 'Events', seen, linkto],
       [members.mixins, 'Mixins', seen, linkto],
@@ -484,6 +485,7 @@ function fixUpType(type) {
 exports.publish = (taffyData, opts, tutorials) => {
     let classes;
     let conf;
+    let enums;
     let externals;
     let files;
     let fromDir;
@@ -733,6 +735,31 @@ exports.publish = (taffyData, opts, tutorials) => {
     });
 
     members = helper.getMembers(data);
+    members.enums = [];
+
+    data().each(doclet => {
+        if (doclet.isEnum) {
+            const hasParent = !!docletMap[doclet.memberof];
+
+            // Enums without parents (not attached to a class, but directly to a
+            // namespace) aren't recognized by jsdoc by default and need to be
+            // massaged into the docs separately.
+            if (!hasParent) {
+                // Temporarily call this a "class", so that we can fix the URL.
+                doclet.kind = 'class';
+                // Regenerate the URL, so that this enum gets its own page
+                // instead of a URL that links to an ID within a non-existent
+                // parent page.
+                delete helper.longnameToUrl[doclet.longname];
+                helper.createLink(doclet);
+                // Mark this as an enum (custom type), so that it doesn't get
+                // slotted with the classes.
+                doclet.kind = 'enum';
+                members.enums.push(doclet);
+            }
+        }
+    });
+
     members.tutorials = tutorials.children;
     if (conf.default.sortTutorialsByConfigOrder) {
         members.tutorials.sort((a, b) => {
@@ -778,6 +805,7 @@ exports.publish = (taffyData, opts, tutorials) => {
 
     // set up the lists that we'll use to generate pages
     classes = taffy(members.classes);
+    enums = taffy(members.enums);
     modules = taffy(members.modules);
     namespaces = taffy(members.namespaces);
     mixins = taffy(members.mixins);
@@ -786,6 +814,7 @@ exports.publish = (taffyData, opts, tutorials) => {
 
     Object.keys(helper.longnameToUrl).forEach(longname => {
         const myClasses = helper.find(classes, {longname: longname});
+        const myEnums = helper.find(enums, {longname: longname});
         const myExternals = helper.find(externals, {longname: longname});
         const myInterfaces = helper.find(interfaces, {longname: longname});
         const myMixins = helper.find(mixins, {longname: longname});
@@ -800,6 +829,10 @@ exports.publish = (taffyData, opts, tutorials) => {
             generate(`Class: ${myClasses[0].longname}`, myClasses, helper.longnameToUrl[longname]);
         }
 
+        if (myEnums.length) {
+            generate(`Enum: ${myEnums[0].longname}`, myEnums, helper.longnameToUrl[longname]);
+        }
+
         if (myNamespaces.length) {
             generate(`Namespace: ${myNamespaces[0].longname}`, myNamespaces, helper.longnameToUrl[longname]);
         }

package/docs/jsdoc-template/tmpl/container.tmpl

@@ -144,7 +144,10 @@
                 return m.longname && m.longname.indexOf('module:') !== 0;
             });
         }
-        if (members && members.length && members.forEach) {
+
+        // Skip enums, since they already have their values listed under
+        // "Properties".
+        if (members && members.length && members.forEach && doc.kind != 'enum') {
     ?>
         <h3 class="subsection-title">Members</h3>
 

package/docs/jsdoc.conf.json

@@ -16,6 +16,7 @@
       "navOrder": [
         "Tutorials",
         "Classes",
+        "Enums",
         "Interfaces",
         "Events"
       ]

package/lib/cast/cast_sender.js

@@ -186,21 +186,14 @@ shaka.cast.CastSender = class {
       // If the API becomes available before this instance dies, init will be
       // called again.
 
-      // A note about this value: In our testing environment, we load both
-      // uncompiled and compiled code.  This global callback in uncompiled mode
-      // can be overwritten by the same in compiled mode.  The two versions will
-      // each have their own instances_ map.  Therefore the callback must have a
-      // name, as opposed to being anonymous.  This way, the CastSender tests
-      // can invoke the named static method instead of using a global that could
-      // be overwritten.
-      if (!window.__onGCastApiAvailable) {
-        window.__onGCastApiAvailable = shaka.cast.CastSender.onSdkLoaded_;
-      }
-      if (window.__onGCastApiAvailable != shaka.cast.CastSender.onSdkLoaded_) {
-        shaka.log.alwaysWarn('A global Cast SDK hook is already installed! ' +
-          'Shaka Player will be unable to receive a notification when the ' +
-          'Cast SDK is ready.');
+      // Check if our callback is already installed.
+      if (window.__onGCastApiAvailable !== CastSender.onGCastApiAvailable_) {
+        // Save pre-existing __onGCastApiAvailable in order to restore later.
+        CastSender.__onGCastApiAvailable_ =
+          window.__onGCastApiAvailable || null;
+        window.__onGCastApiAvailable = CastSender.onGCastApiAvailable_;
       }
+
       return;
     }
 
@@ -747,6 +740,9 @@ shaka.cast.CastSender.hasReceivers_ = false;
 /** @private {chrome.cast.Session} */
 shaka.cast.CastSender.session_ = null;
 
+/** @private {?function(boolean)} */
+shaka.cast.CastSender.__onGCastApiAvailable_ = null;
+
 /**
  * A set of all living CastSender instances.  The constructor and destroy
  * methods will add and remove instances from this set.
@@ -774,3 +770,32 @@ shaka.cast.CastSender.onSdkLoaded_ = (loaded) => {
     }
   }
 };
+
+/**
+ * @param {boolean} available
+ * @private
+ */
+shaka.cast.CastSender.onGCastApiAvailable_ = (available) => {
+  // Restore callback from saved.
+  if (shaka.cast.CastSender.__onGCastApiAvailable_) {
+    window.__onGCastApiAvailable =
+      shaka.cast.CastSender.__onGCastApiAvailable_;
+  } else {
+    delete window.__onGCastApiAvailable;
+  }
+  shaka.cast.CastSender.__onGCastApiAvailable_ = null;
+
+  // A note about this value: In our testing environment, we load both
+  // uncompiled and compiled code.  This global callback in uncompiled mode
+  // can be overwritten by the same in compiled mode.  The two versions will
+  // each have their own instances_ map.  Therefore the callback must have a
+  // name, as opposed to being anonymous.  This way, the CastSender tests
+  // can invoke the named static method instead of using a global that could
+  // be overwritten.
+  shaka.cast.CastSender.onSdkLoaded_(available);
+
+  // call restored callback (if any)
+  if (typeof window.__onGCastApiAvailable === 'function') {
+    window.__onGCastApiAvailable(available);
+  }
+};

package/lib/cea/cea608_memory.js

@@ -184,6 +184,10 @@ shaka.cea.Cea608Memory = class {
    * @param {number} count Count of rows to move.
    */
   moveRows(dst, src, count) {
+    if (src < 0 || dst < 0) {
+      return;
+    }
+
     if (dst >= src) {
       for (let i = count-1; i >= 0; i--) {
         this.rows_[dst + i] = this.rows_[src + i].map((e) => e);

package/lib/media/streaming_engine.js

@@ -980,7 +980,11 @@ shaka.media.StreamingEngine = class {
     const timeUntilEnd =
         this.manifest_.presentationTimeline.getDuration() - timeNeeded;
     const oneMicrosecond = 1e-6;
-    if (timeUntilEnd < oneMicrosecond) {
+
+    const bufferEnd =
+      this.playerInterface_.mediaSourceEngine.bufferEnd(mediaState.type);
+
+    if (timeUntilEnd < oneMicrosecond && !!bufferEnd) {
       // We shouldn't rebuffer if the playhead is close to the end of the
       // presentation.
       shaka.log.debug(logPrefix, 'buffered to end of presentation');
@@ -1010,8 +1014,6 @@ shaka.media.StreamingEngine = class {
       return this.config_.updateIntervalSeconds / 2;
     }
 
-    const bufferEnd =
-        this.playerInterface_.mediaSourceEngine.bufferEnd(mediaState.type);
     const reference = this.getSegmentReferenceNeeded_(
         mediaState, presentationTime, bufferEnd);
     if (!reference) {
@@ -1207,7 +1209,16 @@ shaka.media.StreamingEngine = class {
       // Enable MP4 low latency streaming with ReadableStream chunked data.
       if (this.config_.lowLatencyMode && isReadableStreamSupported && isMP4) {
         let remaining = new Uint8Array(0);
+        let processingResult = false;
+        let callbackCalled = false;
         const streamDataCallback = async (data) => {
+          if (processingResult) {
+            // If the fallback result processing was triggered, don't also
+            // append the buffer here.  In theory this should never happen,
+            // but it does on some older TVs.
+            return;
+          }
+          callbackCalled = true;
           this.destroyer_.ensureNotDestroyed();
           if (this.fatalError_) {
             return;
@@ -1238,7 +1249,33 @@ shaka.media.StreamingEngine = class {
           }
         };
 
-        await this.fetch_(mediaState, reference, streamDataCallback);
+        const result =
+            await this.fetch_(mediaState, reference, streamDataCallback);
+        if (!callbackCalled) {
+          // In some environments, we might be forced to use network plugins
+          // that don't support streamDataCallback. In those cases, as a
+          // fallback, append the buffer here.
+          processingResult = true;
+          this.destroyer_.ensureNotDestroyed();
+          if (this.fatalError_) {
+            return;
+          }
+
+          // If the text stream gets switched between fetch_() and append_(),
+          // the new text parser is initialized, but the new init segment is
+          // not fetched yet.  That would cause an error in
+          // TextParser.parseMedia().
+          // See http://b/168253400
+          if (mediaState.waitingToClearBuffer) {
+            shaka.log.info(logPrefix, 'waitingToClearBuffer, skip append');
+            mediaState.performingUpdate = false;
+            this.scheduleUpdate_(mediaState, 0);
+            return;
+          }
+
+          await this.append_(
+              mediaState, presentationTime, stream, reference, result);
+        }
       } else {
         if (this.config_.lowLatencyMode && !isReadableStreamSupported) {
           shaka.log.warning('Low latency streaming mode is enabled, but ' +

package/lib/player.js

@@ -4269,6 +4269,12 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
       this.stats_.setBandwidthEstimate(estimate);
     }
 
+    if (this.loadMode_ == shaka.Player.LoadMode.SRC_EQUALS) {
+      this.stats_.setResolution(
+          /* width= */ element.videoWidth || NaN,
+          /* height= */ element.videoHeight || NaN);
+    }
+
     return this.stats_.getBlob();
   }
 
@@ -6425,7 +6431,7 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @define {string} A version number taken from git at compile time.
  * @export
  */
-shaka.Player.version = 'v3.2.11-uncompiled';
+shaka.Player.version = 'v3.2.13-uncompiled';
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/text/ttml_text_parser.js

@@ -156,6 +156,12 @@ shaka.text.TtmlTextParser = class {
           cellResolutionInfo, /* parentCueElement= */ null,
           /* isContent= */ false);
       if (cue) {
+        // According to the TTML spec, backgrounds default to transparent.
+        // So default the background of the top-level element to transparent.
+        // Nested elements may override that background color already.
+        if (!cue.backgroundColor) {
+          cue.backgroundColor = 'transparent';
+        }
         cues.push(cue);
       }
     }

package/lib/text/ui_text_displayer.js

@@ -498,6 +498,14 @@ shaka.text.UITextDisplayer = class {
       style.backgroundRepeat = 'no-repeat';
       style.backgroundSize = 'contain';
       style.backgroundPosition = 'center';
+
+      // Quoting https://www.w3.org/TR/ttml-imsc1.2/:
+      // "The width and height (in pixels) of the image resource referenced by
+      // smpte:backgroundImage SHALL be equal to the width and height expressed
+      // by the tts:extent attribute of the region in which the div element is
+      // presented".
+      style.width = '100%';
+      style.height = '100%';
     } else {
       // If we have both text and nested cues, then style everything; otherwise
       // place the text in its own <span> so the background doesn't fill the

package/lib/util/platform.js

@@ -163,6 +163,40 @@ shaka.util.Platform = class {
     return shaka.util.Platform.userAgentContains_('CrKey');
   }
 
+  /**
+   * Check if the current platform is a Android-based Cast devices.
+   *
+   * @return {boolean}
+   */
+  static isAndroidCastDevice() {
+    return shaka.util.Platform.isChromecast() &&
+        shaka.util.Platform.userAgentContains_('Android');
+  }
+
+  /**
+   * Returns a major version number for Chrome, or Chromium-based browsers.
+   *
+   * For example:
+   *   - Chrome 106.0.5249.61 returns 106.
+   *   - Edge 106.0.1370.34 returns 106 (since this is based on Chromium).
+   *   - Safari returns null (since this is independent of Chromium).
+   *
+   * @return {?number} A major version number or null if not Chromium-based.
+   */
+  static chromeVersion() {
+    if (!shaka.util.Platform.userAgentContains_('Chrome')) {
+      return null;
+    }
+
+    // Looking for something like "Chrome/106.0.0.0".
+    const match = navigator.userAgent.match(/Chrome\/(\d+)/);
+    if (match) {
+      return parseInt(match[1], /* base= */ 10);
+    }
+
+    return null;
+  }
+
   /**
    * Check if the current platform is Google Chrome.
    *

package/lib/util/stream_utils.js

@@ -467,7 +467,8 @@ shaka.util.StreamUtils = class {
       if (shaka.util.Platform.isXboxOne() && video &&
           ((video.width && video.width > 1920) ||
           (video.height && video.height > 1080)) &&
-          video.codecs.includes('avc1.')) {
+          (video.codecs.includes('avc1.') ||
+          video.codecs.includes('avc3.'))) {
         shaka.log.debug('Dropping variant - not compatible with platform',
             shaka.util.StreamUtils.getVariantSummaryString_(variant));
         return false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shaka-player",
   "description": "DASH/EME video player library",
-  "version": "3.2.11",
+  "version": "3.2.13",
   "homepage": "https://github.com/shaka-project/shaka-player",
   "author": "Google",
   "maintainers": [

package/test/cea/cea608_memory_unit.js

@@ -295,5 +295,93 @@ describe('Cea608Memory', () => {
       const caption = memory.forceEmit(startTime, endTime);
       expect(caption).toEqual(expectedCaption);
     });
+
+    it('does not move rows if source row index is negative', () => {
+      const startTime = 1;
+      const endTime = 2;
+      const text = 'test';
+
+      // Add the text to the buffer, each character on separate rows.
+      // At this point, the memory looks like:
+      // [1]: t
+      // [2]: e
+      // [3]: s
+      // [4]: t
+      for (const c of text) {
+        memory.addChar(CharSet.BASIC_NORTH_AMERICAN,
+            c.charCodeAt(0));
+        memory.setRow(memory.getRow() + 1); // increment row
+      }
+
+      const srcRowIdx = -1;
+      const dstRowIdx = 2;
+      const rowsToMove = 3;
+      memory.moveRows(dstRowIdx, srcRowIdx, rowsToMove);
+
+      // Expected text is 't\ne\ns\nt'
+      const topLevelCue = new shaka.text.Cue(startTime, endTime, '');
+      topLevelCue.nestedCues = [
+        CeaUtils.createDefaultCue(startTime, endTime, 't'),
+        CeaUtils.createLineBreakCue(startTime, endTime),
+        CeaUtils.createDefaultCue(startTime, endTime, 'e'),
+        CeaUtils.createLineBreakCue(startTime, endTime),
+        CeaUtils.createDefaultCue(startTime, endTime, 's'),
+        CeaUtils.createLineBreakCue(startTime, endTime),
+        CeaUtils.createDefaultCue(startTime, endTime, 't'),
+      ];
+
+      const expectedCaption = {
+        stream,
+        cue: topLevelCue,
+      };
+
+      // Force out the new memory.
+      const caption = memory.forceEmit(startTime, endTime);
+      expect(caption).toEqual(expectedCaption);
+    });
+
+    it('does not move rows if destination row index is negative', () => {
+      const startTime = 1;
+      const endTime = 2;
+      const text = 'test';
+
+      // Add the text to the buffer, each character on separate rows.
+      // At this point, the memory looks like:
+      // [1]: t
+      // [2]: e
+      // [3]: s
+      // [4]: t
+      for (const c of text) {
+        memory.addChar(CharSet.BASIC_NORTH_AMERICAN,
+            c.charCodeAt(0));
+        memory.setRow(memory.getRow() + 1); // increment row
+      }
+
+      const srcRowIdx = 1;
+      const dstRowIdx = -2;
+      const rowsToMove = 3;
+      memory.moveRows(dstRowIdx, srcRowIdx, rowsToMove);
+
+      // Expected text is 't\ne\ns\nt'
+      const topLevelCue = new shaka.text.Cue(startTime, endTime, '');
+      topLevelCue.nestedCues = [
+        CeaUtils.createDefaultCue(startTime, endTime, 't'),
+        CeaUtils.createLineBreakCue(startTime, endTime),
+        CeaUtils.createDefaultCue(startTime, endTime, 'e'),
+        CeaUtils.createLineBreakCue(startTime, endTime),
+        CeaUtils.createDefaultCue(startTime, endTime, 's'),
+        CeaUtils.createLineBreakCue(startTime, endTime),
+        CeaUtils.createDefaultCue(startTime, endTime, 't'),
+      ];
+
+      const expectedCaption = {
+        stream,
+        cue: topLevelCue,
+      };
+
+      // Force out the new memory.
+      const caption = memory.forceEmit(startTime, endTime);
+      expect(caption).toEqual(expectedCaption);
+    });
   });
 });

package/test/media/streaming_engine_integration.js

@@ -91,17 +91,17 @@ describe('StreamingEngine', () => {
 
     segmentAvailability = {
       start: 0,
-      end: 60,
+      end: 40,
     };
 
     timeline = shaka.test.StreamingEngineUtil.createFakePresentationTimeline(
         segmentAvailability,
-        /* presentationDuration= */ 60,
+        /* presentationDuration= */ 40,
         /* maxSegmentDuration= */ metadata.video.segmentDuration,
         /* isLive= */ false);
 
     setupNetworkingEngine(
-        /* presentationDuration= */ 60,
+        /* presentationDuration= */ 40,
         {
           audio: metadata.audio.segmentDuration,
           video: metadata.video.segmentDuration,
@@ -109,8 +109,8 @@ describe('StreamingEngine', () => {
 
     setupManifest(
         /* firstPeriodStartTime= */ 0,
-        /* secondPeriodStartTime= */ 30,
-        /* presentationDuration= */ 60);
+        /* secondPeriodStartTime= */ 20,
+        /* presentationDuration= */ 40);
 
     setupPlayhead();
 
@@ -262,10 +262,11 @@ describe('StreamingEngine', () => {
       streamingEngine.switchVariant(variant);
       await streamingEngine.start();
       video.play();
-      // The overall test timeout is 120 seconds, and the content is 60
+      // The overall test timeout is 120 seconds, and the content is 40
       // seconds.  It should be possible to complete this test in 100 seconds,
       // and if not, we want the error thrown to be within the overall test's
-      // timeout window.
+      // timeout window.  Note that we have seen some devices fail to play at
+      // full speed for reasons beyond our control, so we plan for >= 0.5x.
       await waiter.timeoutAfter(100).waitForEnd(video);
     });
 

package/test/offline/offline_integration.js

@@ -68,7 +68,7 @@ filterDescribe('Offline', supportsStorage, () => {
     await player.load(contentUri);
 
     video.play();
-    await playTo(/* end= */ 3, /* timeout= */ 10);
+    await playTo(/* end= */ 3, /* timeout= */ 20);
     await player.unload();
     await storage.remove(contentUri);
   });
@@ -104,7 +104,7 @@ filterDescribe('Offline', supportsStorage, () => {
         await player.load(contentUri);
 
         video.play();
-        await playTo(/* end= */ 3, /* timeout= */ 10);
+        await playTo(/* end= */ 3, /* timeout= */ 20);
         await player.unload();
         await storage.remove(contentUri);
       });
@@ -147,7 +147,7 @@ filterDescribe('Offline', supportsStorage, () => {
         await player.load(contentUri);
 
         video.play();
-        await playTo(/* end= */ 3, /* timeout= */ 10);
+        await playTo(/* end= */ 3, /* timeout= */ 20);
         await player.unload();
         await storage.remove(contentUri);
       });

package/test/player_src_equals_integration.js

@@ -305,6 +305,8 @@ describe('Player Src Equals', () => {
     expect(stats.loadLatency).toBeGreaterThan(0);
     expect(stats.manifestTimeSeconds).toBeNaN(); // There's no manifest.
     expect(stats.drmTimeSeconds).toBeNaN(); // There's no DRM.
+    expect(stats.height).toBe(110);
+    expect(stats.width).toBe(256);
   });
 
   it('plays with external text tracks', async () => {

package/test/test/util/ttml_utils.js

@@ -51,8 +51,6 @@ shaka.test.TtmlUtils = class {
         region,
         nestedCues: jasmine.any(Object),
         payload: '',
-        startTime: 0,
-        endTime: Infinity,
         isContainer: true,
       });
       Object.assign(containerCue, properties);

package/test/text/ttml_text_parser_unit.js

@@ -1486,6 +1486,52 @@ describe('TtmlTextParser', () => {
         {startTime: 1, endTime: 2});
   });
 
+  // Regression test for #4468
+  it('defaults the body background to transparent', () => {
+    verifyHelper(
+        // One cue, don't care about the details
+        [{}],
+        '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
+        '<head>' +
+        '<styling>' +
+        '<style xml:id="s1" tts:backgroundColor="black" />' +
+        '</styling>' +
+        '</head>' +
+        '<body><div>' +
+        '<p begin="00:01.00" end="00:02.00">' +
+        '<span style="s1">Test</span>' +
+        '</p>' +
+        '</div></body></tt>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0},
+        // The body must have these properties:
+        {backgroundColor: 'transparent'},
+        // The div must have these properties:
+        {});  // don't care
+  });
+
+  // Regression test for #4468
+  it('allows the body background color to be set', () => {
+    verifyHelper(
+        // One cue, don't care about the details
+        [{}],
+        '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
+        '<head>' +
+        '<styling>' +
+        '<style xml:id="s1" tts:backgroundColor="black" />' +
+        '</styling>' +
+        '</head>' +
+        '<body style="s1"><div>' +
+        '<p begin="00:01.00" end="00:02.00">' +
+        '<span>Test</span>' +
+        '</p>' +
+        '</div></body></tt>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0, vttOffset: 0},
+        // The body must have these properties:
+        {backgroundColor: 'black'},
+        // The div must have these properties:
+        {});  // don't care
+  });
+
   it('parses wrapping option', () => {
     verifyHelper(
         [

package/test/ui/text_displayer_layout_unit.js

@@ -219,6 +219,21 @@ filterDescribe('TextDisplayer layout', supportsScreenshots, () => {
 
   /** @param {string} prefix Prepended to screenshot names */
   function defineTests(prefix) {
+    // Due to a Safari implementation bug, the browser only does the correct
+    // thing for "end-time-edge-case" on Safari 16+.  Skip the tests on earlier
+    // versions.
+    const safariVersion = shaka.util.Platform.safariVersion();
+    if (prefix == 'native' && safariVersion && safariVersion < 16) {
+      return;
+    }
+
+    // Due to updates in the rendering and/or default styles in Chrome, the
+    // screenshots for native rendering only match in Chrome 106+.
+    const chromeVersion = shaka.util.Platform.chromeVersion();
+    if (prefix == 'native' && chromeVersion && chromeVersion < 106) {
+      return;
+    }
+
     it('basic cue', async () => {
       textDisplayer.append([
         new shaka.text.Cue(0, 1, 'Captain\'s log, stardate 41636.9'),
@@ -262,8 +277,8 @@ filterDescribe('TextDisplayer layout', supportsScreenshots, () => {
 
     // Regression test for #3151
     // Only one cue should be displayed.  Note, however, that we don't control
-    // this in a browser's native display.  As of Feb 2021, only Firefox does
-    // the right thing in native text display.  Chrome, Edge, and Safari all
+    // this in a browser's native display.  As of Sep 2022, both Firefox and
+    // Safari>=16 do the right thing in native text display.  Chrome and Edge
     // show both cues in this edge case.  When we control the display of text
     // through the UI & DOM, we can always get the timing right.
     it('cues ending exactly now', async () => {

package/ui/less/ad_controls.less

@@ -71,6 +71,10 @@
   .ad-text-shadow();
 }
 
+.shaka-ad-controls .shaka-ad-position:not(.shaka-hidden) + .shaka-ad-counter {
+  margin-left: 0.75em;
+}
+
 .shaka-skip-ad-container {
   /* Skip button is positioned at the very right edge of the
    * video container unlike the rest of the bottom controls. */