shaka-player 4.4.3 → 4.6.0

package/ui/remote_button.js

@@ -0,0 +1,203 @@
+/*! @license
+ * Shaka Player
+ * Copyright 2016 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+goog.provide('shaka.ui.RemoteButton');
+
+goog.require('shaka.Player');
+goog.require('shaka.ui.Controls');
+goog.require('shaka.ui.Element');
+goog.require('shaka.ui.Enums');
+goog.require('shaka.ui.Locales');
+goog.require('shaka.ui.Localization');
+goog.require('shaka.ui.OverflowMenu');
+goog.require('shaka.ui.Utils');
+goog.require('shaka.util.Dom');
+goog.require('shaka.util.Platform');
+goog.requireType('shaka.ui.Controls');
+
+
+/**
+ * @extends {shaka.ui.Element}
+ * @final
+ * @export
+ */
+shaka.ui.RemoteButton = class extends shaka.ui.Element {
+  /**
+   * @param {!HTMLElement} parent
+   * @param {!shaka.ui.Controls} controls
+   */
+  constructor(parent, controls) {
+    super(parent, controls);
+
+    /** @private {!HTMLButtonElement} */
+    this.remoteButton_ = shaka.util.Dom.createButton();
+    this.remoteButton_.classList.add('shaka-remote-button');
+    this.remoteButton_.classList.add('shaka-tooltip');
+    this.remoteButton_.ariaPressed = 'false';
+
+    /** @private {!HTMLElement} */
+    this.remoteIcon_ = shaka.util.Dom.createHTMLElement('i');
+    this.remoteIcon_.classList.add('material-icons-round');
+    let icon = shaka.ui.Enums.MaterialDesignIcons.CAST;
+    const safariVersion = shaka.util.Platform.safariVersion();
+    if (safariVersion && safariVersion >= 13) {
+      icon = shaka.ui.Enums.MaterialDesignIcons.AIRPLAY;
+    }
+    this.remoteIcon_.textContent = icon;
+    this.remoteButton_.appendChild(this.remoteIcon_);
+
+    const label = shaka.util.Dom.createHTMLElement('label');
+    label.classList.add('shaka-overflow-button-label');
+    label.classList.add('shaka-overflow-menu-only');
+    this.remoteNameSpan_ = shaka.util.Dom.createHTMLElement('span');
+    label.appendChild(this.remoteNameSpan_);
+
+    this.remoteCurrentSelectionSpan_ =
+      shaka.util.Dom.createHTMLElement('span');
+    this.remoteCurrentSelectionSpan_.classList.add(
+        'shaka-current-selection-span');
+    label.appendChild(this.remoteCurrentSelectionSpan_);
+    this.remoteButton_.appendChild(label);
+    this.parent.appendChild(this.remoteButton_);
+
+    /** @private {number} */
+    this.callbackId_ = -1;
+
+    // Setup strings in the correct language
+    this.updateLocalizedStrings_();
+
+    shaka.ui.Utils.setDisplay(this.remoteButton_, false);
+
+    if (!this.video.remote || this.video.disableRemotePlayback) {
+      this.remoteButton_.classList.add('shaka-hidden');
+    } else {
+      this.eventManager.listen(
+          this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
+            this.updateLocalizedStrings_();
+          });
+
+      this.eventManager.listen(
+          this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
+            this.updateLocalizedStrings_();
+          });
+
+      this.eventManager.listen(this.controls, 'caststatuschanged', () => {
+        this.updateRemoteState_();
+      });
+
+      this.eventManager.listen(this.remoteButton_, 'click', () => {
+        this.video.remote.prompt();
+      });
+
+      this.eventManager.listen(this.video.remote, 'connect', () => {
+        this.updateRemoteState_();
+      });
+
+      this.eventManager.listen(this.video.remote, 'connecting', () => {
+        this.updateRemoteState_();
+      });
+
+      this.eventManager.listen(this.video.remote, 'disconnect', () => {
+        this.updateRemoteState_();
+      });
+
+      this.eventManager.listen(this.player, 'loaded', () => {
+        this.updateRemoteState_();
+      });
+
+      this.updateRemoteState_();
+    }
+  }
+
+  /** @override */
+  release() {
+    if (this.video.remote && this.callbackId_ != -1) {
+      this.video.remote.cancelWatchAvailability(this.callbackId_).catch(() => {
+        // Ignore this error.
+      });
+    }
+
+    super.release();
+  }
+
+  /**
+   * @private
+   */
+  async updateRemoteState_() {
+    if (this.controls.getCastProxy().canCast() &&
+        this.controls.isCastAllowed()) {
+      shaka.ui.Utils.setDisplay(this.remoteButton_, false);
+      if (this.callbackId_ != -1) {
+        this.video.remote.cancelWatchAvailability(this.callbackId_);
+        this.callbackId_ = -1;
+      }
+    } else if (this.video.remote.state == 'disconnected') {
+      const handleAvailabilityChange = (availability) => {
+        if (this.player) {
+          const loadMode = this.player.getLoadMode();
+          const srcMode = loadMode == shaka.Player.LoadMode.SRC_EQUALS;
+          shaka.ui.Utils.setDisplay(
+              this.remoteButton_, srcMode && availability);
+        } else {
+          shaka.ui.Utils.setDisplay(this.remoteButton_, false);
+        }
+      };
+      try {
+        if (this.callbackId_ != -1) {
+          await this.video.remote.cancelWatchAvailability(this.callbackId_);
+          this.callbackId_ = -1;
+        }
+      } catch (e) {
+        // Ignore this error.
+      }
+      try {
+        const id = await this.video.remote.watchAvailability(
+            handleAvailabilityChange);
+        this.callbackId_ = id;
+      } catch (e) {
+        handleAvailabilityChange(/* availability= */ true);
+      }
+    } else if (this.callbackId_ != -1) {
+      // If remote device is connecting or connected, we should stop
+      // watching remote device availability to save power.
+      await this.video.remote.cancelWatchAvailability(this.callbackId_);
+      this.callbackId_ = -1;
+    }
+  }
+
+  /**
+   * @private
+   */
+  updateLocalizedStrings_() {
+    const LocIds = shaka.ui.Locales.Ids;
+    let text = this.localization.resolve(LocIds.CAST);
+    const safariVersion = shaka.util.Platform.safariVersion();
+    if (safariVersion && safariVersion >= 13) {
+      text = this.localization.resolve(LocIds.AIRPLAY);
+    }
+    this.remoteButton_.ariaLabel = text;
+    this.remoteNameSpan_.textContent = text;
+  }
+};
+
+
+/**
+ * @implements {shaka.extern.IUIElement.Factory}
+ * @final
+ */
+shaka.ui.RemoteButton.Factory = class {
+  /** @override */
+  create(rootElement, controls) {
+    return new shaka.ui.RemoteButton(rootElement, controls);
+  }
+};
+
+shaka.ui.OverflowMenu.registerElement(
+    'remote', new shaka.ui.RemoteButton.Factory());
+
+shaka.ui.Controls.registerElement(
+    'remote', new shaka.ui.RemoteButton.Factory());

package/ui/resolution_selection.js

@@ -89,10 +89,18 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
     // Remove duplicate entries with the same resolution or quality depending
     // on content type.  Pick an arbitrary one.
     tracks = tracks.filter((track, idx) => {
-      // Keep the first one with the same height or bandwidth.
-      const otherIdx = this.player.isAudioOnly() ?
-          tracks.findIndex((t) => t.bandwidth == track.bandwidth) :
-          tracks.findIndex((t) => t.height == track.height);
+      // Keep the first one with the same height and framrate or bandwidth.
+      let otherIdx = -1;
+      if (this.player.isAudioOnly()) {
+        otherIdx = tracks.findIndex((t) => t.bandwidth == track.bandwidth);
+      } else {
+        otherIdx = tracks.findIndex((t) => {
+          return t.height == track.height &&
+              t.frameRate == track.frameRate &&
+              t.hdr == track.hdr &&
+              t.videoLayout == track.videoLayout;
+        });
+      }
       return otherIdx == idx;
     });
 
@@ -132,14 +140,12 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
           () => this.onTrackSelected_(track));
 
       const span = shaka.util.Dom.createHTMLElement('span');
-      if (this.player.isAudioOnly()) {
+      if (this.player.isAudioOnly() && track.bandwidth) {
         span.textContent = Math.round(track.bandwidth / 1000) + ' kbits/s';
+      } else if (track.height && track.width) {
+        span.textContent = this.getResolutionLabel_(track);
       } else {
-        if (track.hdr == 'PQ' || track.hdr == 'HLG') {
-          span.textContent = track.height + 'p (HDR)';
-        } else {
-          span.textContent = track.height + 'p';
-        }
+        span.textContent = 'Unknown';
       }
       button.appendChild(span);
 
@@ -191,6 +197,37 @@ shaka.ui.ResolutionSelection = class extends shaka.ui.SettingsMenu {
   }
 
 
+  /**
+   * @param {!shaka.extern.Track} track
+   * @return {string}
+   * @private
+   */
+  getResolutionLabel_(track) {
+    const trackHeight = track.height || 0;
+    const trackWidth = track.width || 0;
+    let height = trackHeight;
+    const aspectRatio = trackWidth / trackHeight;
+    if (aspectRatio > (16 / 9)) {
+      height = Math.round(trackWidth * 9 / 16);
+    }
+    let text = height + 'p';
+    if (height == 2160) {
+      text = '4K';
+    }
+    const frameRate = track.frameRate;
+    if (frameRate && (frameRate >= 50 || frameRate <= 20)) {
+      text += Math.round(track.frameRate);
+    }
+    if (track.hdr == 'PQ' || track.hdr == 'HLG') {
+      text += ' (HDR)';
+    }
+    if (track.videoLayout == 'CH-STEREO') {
+      text += ' (3D)';
+    }
+    return text;
+  }
+
+
   /**
    * @param {!shaka.extern.Track} track
    * @private

package/ui/seek_bar.js

@@ -8,12 +8,17 @@
 goog.provide('shaka.ui.SeekBar');
 
 goog.require('shaka.ads.AdManager');
+goog.require('shaka.net.NetworkingEngine');
 goog.require('shaka.ui.Constants');
 goog.require('shaka.ui.Locales');
 goog.require('shaka.ui.Localization');
 goog.require('shaka.ui.RangeElement');
 goog.require('shaka.ui.Utils');
 goog.require('shaka.util.Dom');
+goog.require('shaka.util.Error');
+goog.require('shaka.util.EventManager');
+goog.require('shaka.util.Mp4Parser');
+goog.require('shaka.util.Networking');
 goog.require('shaka.util.Timer');
 goog.requireType('shaka.ui.Controls');
 
@@ -79,6 +84,19 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       this.markAdBreaks_();
     });
 
+    /**
+     * @private {shaka.util.EventManager}
+     */
+    this.chaptersEventManager_ = new shaka.util.EventManager();
+
+
+    /** @private {!HTMLElement} */
+    this.chaptersContainer_ = shaka.util.Dom.createHTMLElement('div');
+    this.chaptersContainer_.id = 'shaka-player-ui-chapters-container';
+    this.container.appendChild(this.chaptersContainer_);
+
+    this.setupChapters_();
+
     /**
      * When user is scrubbing the seek bar - we should pause the video - see
      * https://github.com/google/shaka-player/pull/2898#issuecomment-705229215
@@ -108,6 +126,16 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
     this.thumbnailContainer_.appendChild(this.thumbnailTime_);
     this.container.appendChild(this.thumbnailContainer_);
 
+    /**
+     * @private {?shaka.extern.Thumbnail}
+     */
+    this.lastThumbnail_ = null;
+
+    /**
+     * @private {?shaka.net.NetworkingEngine.PendingRequest}
+     */
+    this.lastThumbnailPendingRequest_ = null;
+
     /**
      * True if the bar is moving due to touchscreen or keyboard events.
      *
@@ -159,6 +187,12 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
         this.player, 'unloading', () => {
           this.adCuePoints_ = [];
           this.onAdCuePointsChanged_();
+          if (this.lastThumbnailPendingRequest_) {
+            this.lastThumbnailPendingRequest_.abort();
+            this.lastThumbnailPendingRequest_ = null;
+          }
+          this.lastThumbnail_ = null;
+          this.hideThumbnail_();
         });
 
     this.eventManager.listen(this.bar, 'mousemove', (event) => {
@@ -204,6 +238,8 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       this.adBreaksTimer_ = null;
     }
 
+    this.chaptersEventManager_.release();
+
     super.release();
   }
 
@@ -504,8 +540,52 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
         Math.max(0, pixelPosition - (width / 2)));
     this.thumbnailContainer_.style.left = leftPosition + 'px';
     this.thumbnailContainer_.style.visibility = 'visible';
-    const uri = thumbnail.uris[0].split('#xywh=')[0];
-    if (uri !== this.thumbnailImage_.src) {
+    let uri = thumbnail.uris[0].split('#xywh=')[0];
+    if (!this.lastThumbnail_ ||
+        uri !== this.lastThumbnail_.uris[0].split('#xywh=')[0] ||
+        thumbnail.segment.getStartByte() !=
+            this.lastThumbnail_.segment.getStartByte() ||
+        thumbnail.segment.getEndByte() !=
+            this.lastThumbnail_.segment.getEndByte()) {
+      this.lastThumbnail_ = thumbnail;
+      if (this.lastThumbnailPendingRequest_) {
+        this.lastThumbnailPendingRequest_.abort();
+        this.lastThumbnailPendingRequest_ = null;
+      }
+      if (thumbnailTrack.codecs == 'mjpg' || uri.startsWith('offline:')) {
+        this.thumbnailImage_.src = shaka.ui.SeekBar.Transparent_Image_;
+        try {
+          const requestType = shaka.net.NetworkingEngine.RequestType.SEGMENT;
+          const type =
+              shaka.net.NetworkingEngine.AdvancedRequestType.MEDIA_SEGMENT;
+          const request = shaka.util.Networking.createSegmentRequest(
+              thumbnail.segment.getUris(),
+              thumbnail.segment.getStartByte(),
+              thumbnail.segment.getEndByte(),
+              this.player.getConfiguration().streaming.retryParameters);
+          this.lastThumbnailPendingRequest_ = this.player.getNetworkingEngine()
+              .request(requestType, request, {type});
+          const response = await this.lastThumbnailPendingRequest_.promise;
+          this.lastThumbnailPendingRequest_ = null;
+          if (thumbnailTrack.codecs == 'mjpg') {
+            const parser = new shaka.util.Mp4Parser()
+                .box('mdat', shaka.util.Mp4Parser.allData((data) => {
+                  const blob = new Blob([data], {type: 'image/jpeg'});
+                  uri = URL.createObjectURL(blob);
+                }));
+            parser.parse(response.data, /* partialOkay= */ false);
+          } else {
+            const mimeType = thumbnailTrack.mimeType || 'image/jpeg';
+            const blob = new Blob([response.data], {type: mimeType});
+            uri = URL.createObjectURL(blob);
+          }
+        } catch (error) {
+          if (error.code == shaka.util.Error.Code.OPERATION_ABORTED) {
+            return;
+          }
+          throw error;
+        }
+      }
       try {
         this.thumbnailContainer_.removeChild(this.thumbnailImage_);
       } catch (e) {
@@ -516,6 +596,11 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       this.thumbnailImage_.id = 'shaka-player-ui-thumbnail-image';
       this.thumbnailImage_.draggable = false;
       this.thumbnailImage_.src = uri;
+      this.thumbnailImage_.onload = () => {
+        if (uri.startsWith('blob:')) {
+          URL.revokeObjectURL(uri);
+        }
+      };
       this.thumbnailContainer_.insertBefore(this.thumbnailImage_,
           this.thumbnailContainer_.firstChild);
     }
@@ -571,7 +656,10 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
         return bestOptions[0];
       }
     }
-    return imageTracks[0];
+    const mjpgTrack = imageTracks.find((track) => {
+      return track.mimeType == 'application/mp4' && track.codecs == 'mjpg';
+    });
+    return mjpgTrack || imageTracks[0];
   }
 
 
@@ -605,9 +693,214 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
       return minutes + ':' + seconds;
     }
   }
+
+  /**
+   * Sets up the chapter element creator and change handling.
+   * @private
+   */
+  setupChapters_() {
+    let language = 'und';
+    /** @type {!Array<shaka.extern.Chapter>} */
+    let chapters = [];
+
+    /**
+    * Does a value compare on chapters.
+    * @param {shaka.extern.Chapter} a
+    * @param {shaka.extern.Chapter} b
+    * @return {boolean}
+    */
+    const chaptersEqual = (a, b) => {
+      return (!a && !b) || (a.id === b.id && a.title === b.title &&
+          a.startTime === b.startTime && a.endTime === b.endTime);
+    };
+
+    /** @type {function(): void} */
+    const handleChapterTrackChange = () => {
+      let nextLanguage = 'und';
+      /** @type {!Array<shaka.extern.Chapter>} */
+      let nextChapters = [];
+
+      const currentLocales = this.localization.getCurrentLocales();
+      for (const locale of Array.from(currentLocales)) {
+        nextLanguage = locale;
+        nextChapters = this.player.getChapters(nextLanguage);
+        if (nextChapters.length) {
+          break;
+        }
+      }
+      if (!nextChapters.length) {
+        nextLanguage = 'und';
+        nextChapters = this.player.getChapters(nextLanguage);
+      }
+
+      const languageChanged = nextLanguage !== language;
+      const chaptersChanged = chapters.length !== nextChapters.length ||
+        !chapters.some((c, idx) => {
+          const n = nextChapters.at(idx);
+          return chaptersEqual(c, n) ||
+            nextChapters.some((n) => chaptersEqual(c, n));
+        });
+
+      language = nextLanguage;
+      chapters = nextChapters;
+      if (!nextChapters.length) {
+        this.deletePreviousChapters_();
+      } else if (languageChanged || chaptersChanged) {
+        this.createChapterElements_(this.container, chapters);
+      }
+    };
+
+    handleChapterTrackChange();
+
+    this.eventManager.listen(
+        this.player, 'unloading', () => {
+          this.deletePreviousChapters_();
+          language = 'und';
+          chapters = [];
+        });
+
+    this.eventManager.listen(
+        this.player, 'trackschanged', handleChapterTrackChange);
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
+          handleChapterTrackChange();
+        });
+
+    this.eventManager.listen(
+        this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
+          handleChapterTrackChange();
+        });
+  }
+
+  /**
+   * Builds and inserts ChaptersElement into dom container.
+   * @param {!HTMLElement} container
+   * @param {!Array<shaka.extern.Chapter>} chapterTracks
+   * @private
+   */
+  createChapterElements_(container, chapterTracks) {
+    this.deletePreviousChapters_();
+
+    const hiddenClass = 'shaka-hidden';
+
+    /** @type {{start: number, end: number}} */
+    const seekRange = this.player.seekRange();
+
+    /**
+     * @type {!Array<{
+     *  start: number,
+     *  end: number,
+     *  size: number,
+     *  title: string,
+     *  id: string
+     * }>}
+     * */
+    const chapters = [];
+
+    for (const c of chapterTracks) {
+      if (c.startTime >= seekRange.end) {
+        continue;
+      }
+      const start = c.startTime > seekRange.start ?
+        c.startTime : seekRange.start;
+      const end = c.endTime < seekRange.end ?
+        c.endTime : seekRange.end;
+      const size = (end-start);
+      chapters.push({start, end, size, title: c.title, id: c.id});
+    }
+
+    if (chapters.length < 2) {
+      return;
+    }
+
+    const totalSize = chapters.reduce((t, c) => {
+      t += c.size;
+      return t;
+    }, 0);
+
+    /**
+     * @type {!Array<{
+     *  start: number,
+     *  end: number,
+     *  el: HTMLElement
+     * }>}
+     * */
+    const chapterElMap = [];
+
+    for (const c of chapters) {
+      /** @type {!HTMLElement} */
+      const chapterEl = shaka.util.Dom.createHTMLElement('div');
+      chapterEl.classList.add('shaka-chapter');
+      chapterEl.style.width = `${c.size * 100 / totalSize}%`;
+
+      this.chaptersContainer_.appendChild(chapterEl);
+
+      /** @type {!HTMLElement} */
+      const chapterMarker = shaka.util.Dom.createHTMLElement('div');
+      chapterMarker.style.borderColor =
+        this.config_.seekBarColors.chapterMarks;
+      chapterEl.appendChild(chapterMarker);
+
+      /** @type {!HTMLElement} */
+      const chapterLabel = shaka.util.Dom.createHTMLElement('p');
+      chapterLabel.classList.add('shaka-chapter-label', hiddenClass);
+      chapterLabel.style.color =
+        this.config_.seekBarColors.chapterLabels;
+      chapterLabel.innerText = c.title;
+      chapterEl.appendChild(chapterLabel);
+
+      chapterElMap.push(
+          {start: c.start, end: c.end, el: chapterLabel});
+    }
+
+    // Add chapter event listeners
+    this.chaptersEventManager_.listen(this.bar, 'pointermove', (e) => {
+      if (!e.target) {
+        return;
+      }
+      const target = /** @type {HTMLElement} */(e.target);
+
+      const screenXDiff = e.offsetX / target.clientWidth;
+      const rangeMax = parseInt(target.getAttribute('max'), 10);
+      const hoverVal = screenXDiff * rangeMax;
+
+      for (const c of chapterElMap) {
+        const hidden = c.el.classList.contains(hiddenClass);
+        const inChapter = c.start <= hoverVal && hoverVal < c.end;
+        if (inChapter === hidden) {
+          c.el.classList.toggle(hiddenClass);
+        }
+      }
+    }, {passive: true});
+
+    this.chaptersEventManager_.listen(this.bar, 'pointerout', () => {
+      for (const c of chapterElMap) {
+        if (!c.el.classList.contains(hiddenClass)) {
+          c.el.classList.add(hiddenClass);
+        }
+      }
+    }, {passive: true});
+  }
+
+  /**
+   * @private
+   */
+  deletePreviousChapters_() {
+    this.chaptersEventManager_.removeAll();
+    shaka.util.Dom.removeAllChildren(this.chaptersContainer_);
+  }
 };
 
 
+/**
+ * @const {string}
+ * @private
+ */
+shaka.ui.SeekBar.Transparent_Image_ =
+    'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>';
+
+
 /**
  * @implements {shaka.extern.IUISeekBar.Factory}
  * @export

package/ui/text_selection.js

@@ -135,7 +135,8 @@ shaka.ui.TextSelection = class extends shaka.ui.SettingsMenu {
         this.player.isTextTrackVisible(),
         this.currentSelection,
         this.localization,
-        this.controls.getConfig().trackLabelFormat);
+        this.controls.getConfig().trackLabelFormat,
+        this.controls.getConfig().showAudioChannelCountVariants);
 
     // Add the Off button
     const offButton = shaka.util.Dom.createButton();

package/ui/ui.js

@@ -229,6 +229,8 @@ shaka.ui.Overlay = class {
         buffered: 'rgba(255, 255, 255, 0.54)',
         played: 'rgb(255, 255, 255)',
         adBreaks: 'rgb(255, 204, 0)',
+        chapterMarks: 'rgb(27, 27, 27)',
+        chapterLabels: 'rgb(255, 255, 255)',
       },
       volumeBarColors: {
         base: 'rgba(255, 255, 255, 0.54)',
@@ -245,10 +247,14 @@ shaka.ui.Overlay = class {
       keyboardSeekDistance: 5,
       keyboardLargeSeekDistance: 60,
       fullScreenElement: this.videoContainer_,
+      preferDocumentPictureInPicture: true,
+      showAudioChannelCountVariants: true,
     };
 
-    // Check AirPlay support
-    if (window.WebKitPlaybackTargetAvailabilityEvent) {
+    // eslint-disable-next-line no-restricted-syntax
+    if ('remote' in HTMLMediaElement.prototype) {
+      config.overflowMenuButtons.push('remote');
+    } else if (window.WebKitPlaybackTargetAvailabilityEvent) {
       config.overflowMenuButtons.push('airplay');
     }
 
@@ -422,8 +428,7 @@ shaka.ui.Overlay = class {
    */
   static async setupUIandAutoLoad_(container, video, canvas) {
     // Create the UI
-    const player = new shaka.Player(
-        shaka.util.Dom.asHTMLMediaElement(video));
+    const player = new shaka.Player();
     const ui = new shaka.ui.Overlay(player,
         shaka.util.Dom.asHTMLElement(container),
         shaka.util.Dom.asHTMLMediaElement(video));
@@ -486,6 +491,8 @@ shaka.ui.Overlay = class {
         shaka.log.error('Error auto-loading asset', e);
       }
     }
+
+    await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
   }
 };