Source: ui/seek_bar.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.SeekBar');
  10. goog.require('shaka.ads.Utils');
  11. goog.require('shaka.net.NetworkingEngine');
  12. goog.require('shaka.ui.Locales');
  13. goog.require('shaka.ui.Localization');
  14. goog.require('shaka.ui.RangeElement');
  15. goog.require('shaka.ui.Utils');
  16. goog.require('shaka.util.Dom');
  17. goog.require('shaka.util.Error');
  18. goog.require('shaka.util.Mp4Parser');
  19. goog.require('shaka.util.Networking');
  20. goog.require('shaka.util.Timer');
  21. goog.requireType('shaka.ui.Controls');
  24. /**
  25.  * @extends {shaka.ui.RangeElement}
  26.  * @implements {shaka.extern.IUISeekBar}
  27.  * @final
  28.  * @export
  29.  */
  30. shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
  31.   /**
  32.    * @param {!HTMLElement} parent
  33.    * @param {!shaka.ui.Controls} controls
  34.    */
  35.   constructor(parent, controls) {
  36.     super(parent, controls,
  37.         [
  38.           'shaka-seek-bar-container',
  39.         ],
  40.         [
  41.           'shaka-seek-bar',
  42.           'shaka-no-propagation',
  43.           'shaka-show-controls-on-mouse-over',
  44.         ]);
  46.     /** @private {!HTMLElement} */
  47.     this.adMarkerContainer_ = shaka.util.Dom.createHTMLElement('div');
  48.     this.adMarkerContainer_.classList.add('shaka-ad-markers');
  49.     // Insert the ad markers container as a first child for proper
  50.     // positioning.
  51.     this.container.insertBefore(
  52.         this.adMarkerContainer_, this.container.childNodes[0]);
  55.     /** @private {!shaka.extern.UIConfiguration} */
  56.     this.config_ = this.controls.getConfig();
  58.     /**
  59.      * This timer is used to introduce a delay between the user scrubbing across
  60.      * the seek bar and the seek being sent to the player.
  61.      *
  62.      * @private {shaka.util.Timer}
  63.      */
  64.     this.seekTimer_ = new shaka.util.Timer(() => {
  65.       let newCurrentTime = this.getValue();
  66.       if (!this.player.isLive()) {
  67.         if (newCurrentTime == this.video.duration) {
  68.           newCurrentTime -= 0.001;
  69.         }
  70.       }
  71.       this.video.currentTime = newCurrentTime;
  72.     });
  75.     /**
  76.      * The timer is activated for live content and checks if
  77.      * new ad breaks need to be marked in the current seek range.
  78.      *
  79.      * @private {shaka.util.Timer}
  80.      */
  81.     this.adBreaksTimer_ = new shaka.util.Timer(() => {
  82.       this.markAdBreaks_();
  83.     });
  86.     /**
  87.      * When user is scrubbing the seek bar - we should pause the video - see
  88.      * https://github.com/google/shaka-player/pull/2898#issuecomment-705229215
  89.      * but will conditionally pause or play the video after scrubbing
  90.      * depending on its previous state
  91.      *
  92.      * @private {boolean}
  93.      */
  94.     this.wasPlaying_ = false;
  97.     /** @private {!HTMLElement} */
  98.     this.thumbnailContainer_ = shaka.util.Dom.createHTMLElement('div');
  99.     this.thumbnailContainer_.id = 'shaka-player-ui-thumbnail-container';
  101.     /** @private {!HTMLImageElement} */
  102.     this.thumbnailImage_ = /** @type {!HTMLImageElement} */ (
  103.       shaka.util.Dom.createHTMLElement('img'));
  104.     this.thumbnailImage_.id = 'shaka-player-ui-thumbnail-image';
  105.     this.thumbnailImage_.draggable = false;
  107.     /** @private {!HTMLElement} */
  108.     this.thumbnailTimeContainer_ = shaka.util.Dom.createHTMLElement('div');
  109.     this.thumbnailTimeContainer_.id =
  110.         'shaka-player-ui-thumbnail-time-container';
  112.     /** @private {!HTMLElement} */
  113.     this.thumbnailTime_ = shaka.util.Dom.createHTMLElement('div');
  114.     this.thumbnailTime_.id = 'shaka-player-ui-thumbnail-time';
  115.     this.thumbnailTimeContainer_.appendChild(this.thumbnailTime_);
  117.     this.thumbnailContainer_.appendChild(this.thumbnailImage_);
  118.     this.thumbnailContainer_.appendChild(this.thumbnailTimeContainer_);
  119.     this.container.appendChild(this.thumbnailContainer_);
  121.     this.timeContainer_ = shaka.util.Dom.createHTMLElement('div');
  122.     this.timeContainer_.id = 'shaka-player-ui-time-container';
  123.     this.container.appendChild(this.timeContainer_);
  125.     /**
  126.      * @private {?shaka.extern.Thumbnail}
  127.      */
  128.     this.lastThumbnail_ = null;
  130.     /**
  131.      * @private {?shaka.net.NetworkingEngine.PendingRequest}
  132.      */
  133.     this.lastThumbnailPendingRequest_ = null;
  135.     /**
  136.      * True if the bar is moving due to touchscreen or keyboard events.
  137.      *
  138.      * @private {boolean}
  139.      */
  140.     this.isMoving_ = false;
  142.     /**
  143.      * The timer is activated to hide the thumbnail.
  144.      *
  145.      * @private {shaka.util.Timer}
  146.      */
  147.     this.hideThumbnailTimer_ = new shaka.util.Timer(() => {
  148.       this.hideThumbnail_();
  149.     });
  151.     /** @private {!Array<!shaka.extern.AdCuePoint>} */
  152.     this.adCuePoints_ = [];
  154.     this.eventManager.listen(this.bar, 'input', () => {
  155.       this.controls.hideSettingsMenus();
  156.     });
  158.     this.eventManager.listen(this.localization,
  159.         shaka.ui.Localization.LOCALE_UPDATED,
  160.         () => this.updateAriaLabel_());
  162.     this.eventManager.listen(this.localization,
  163.         shaka.ui.Localization.LOCALE_CHANGED,
  164.         () => this.updateAriaLabel_());
  166.     this.eventManager.listen(
  167.         this.adManager, shaka.ads.Utils.AD_STARTED, () => {
  168.           if (!this.shouldBeDisplayed_()) {
  169.             shaka.ui.Utils.setDisplay(this.container, false);
  170.           }
  171.         });
  173.     this.eventManager.listen(
  174.         this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
  175.           if (this.shouldBeDisplayed_()) {
  176.             shaka.ui.Utils.setDisplay(this.container, true);
  177.           }
  178.         });
  180.     this.eventManager.listen(
  181.         this.adManager, shaka.ads.Utils.CUEPOINTS_CHANGED, (e) => {
  182.           this.adCuePoints_ = (e)['cuepoints'];
  183.           this.onAdCuePointsChanged_();
  184.         });
  186.     this.eventManager.listen(
  187.         this.player, 'unloading', () => {
  188.           this.adCuePoints_ = [];
  189.           this.onAdCuePointsChanged_();
  190.           if (this.lastThumbnailPendingRequest_) {
  191.             this.lastThumbnailPendingRequest_.abort();
  192.             this.lastThumbnailPendingRequest_ = null;
  193.           }
  194.           this.lastThumbnail_ = null;
  195.           this.hideThumbnail_();
  196.           this.hideTime_();
  197.         });
  199.     this.eventManager.listen(this.bar, 'mousemove', (event) => {
  200.       if (this.controls.anySettingsMenusAreOpen()) {
  201.         this.hideTime_();
  202.         this.hideThumbnail_();
  203.         return;
  204.       }
  205.       const value = this.getValueFromPosition(event.clientX);
  206.       const rect = this.bar.getBoundingClientRect();
  207.       // Pixels from the left of the range element
  208.       const mousePosition = Math.max(0, event.clientX - rect.left);
  209.       if (!this.player.getImageTracks().length) {
  210.         this.hideThumbnail_();
  211.         this.showTime_(mousePosition, value);
  212.         return;
  213.       }
  214.       this.hideTime_();
  215.       this.showThumbnail_(mousePosition, value);
  216.     });
  218.     this.eventManager.listen(this.container, 'mouseleave', () => {
  219.       this.hideTime_();
  220.       this.hideThumbnailTimer_.stop();
  221.       this.hideThumbnailTimer_.tickAfter(/* seconds= */ 0.25);
  222.     });
  224.     // Initialize seek state and label.
  225.     this.setValue(this.video.currentTime);
  226.     this.update();
  227.     this.updateAriaLabel_();
  229.     if (this.ad) {
  230.       // There was already an ad.
  231.       shaka.ui.Utils.setDisplay(this.container, false);
  232.     }
  233.   }
  235.   /** @override */
  236.   release() {
  237.     if (this.seekTimer_) {
  238.       this.seekTimer_.stop();
  239.       this.seekTimer_ = null;
  240.       this.adBreaksTimer_.stop();
  241.       this.adBreaksTimer_ = null;
  242.     }
  244.     super.release();
  245.   }
  247.   /**
  248.    * Called by the base class when user interaction with the input element
  249.    * begins.
  250.    *
  251.    * @override
  252.    */
  253.   onChangeStart() {
  254.     this.wasPlaying_ = !this.video.paused;
  255.     this.controls.setSeeking(true);
  256.     this.video.pause();
  257.     this.hideThumbnailTimer_.stop();
  258.     this.isMoving_ = true;
  259.   }
  261.   /**
  262.    * Update the video element's state to match the input element's state.
  263.    * Called by the base class when the input element changes.
  264.    *
  265.    * @override
  266.    */
  267.   onChange() {
  268.     if (!this.video.duration) {
  269.       // Can't seek yet.  Ignore.
  270.       return;
  271.     }
  273.     // Update the UI right away.
  274.     this.update();
  276.     // We want to wait until the user has stopped moving the seek bar for a
  277.     // little bit to reduce the number of times we ask the player to seek.
  278.     //
  279.     // To do this, we will start a timer that will fire in a little bit, but if
  280.     // we see another seek bar change, we will cancel that timer and re-start
  281.     // it.
  282.     //
  283.     // Calling |start| on an already pending timer will cancel the old request
  284.     // and start the new one.
  285.     this.seekTimer_.tickAfter(/* seconds= */ 0.125);
  287.     if (this.player.getImageTracks().length &&
  288.         !this.controls.anySettingsMenusAreOpen()) {
  289.       const min = parseFloat(this.bar.min);
  290.       const max = parseFloat(this.bar.max);
  291.       const rect = this.bar.getBoundingClientRect();
  292.       const value = Math.round(this.getValue());
  293.       const scale = (max - min) / rect.width;
  294.       const position = (value - min) / scale;
  295.       this.showThumbnail_(position, value);
  296.     } else {
  297.       this.hideThumbnail_();
  298.     }
  299.   }
  301.   /**
  302.    * Called by the base class when user interaction with the input element
  303.    * ends.
  304.    *
  305.    * @override
  306.    */
  307.   onChangeEnd() {
  308.     // They just let go of the seek bar, so cancel the timer and manually
  309.     // call the event so that we can respond immediately.
  310.     this.seekTimer_.tickNow();
  311.     this.controls.setSeeking(false);
  313.     if (this.wasPlaying_) {
  314.       this.video.play();
  315.     }
  317.     if (this.isMoving_) {
  318.       this.isMoving_ = false;
  319.       this.hideThumbnailTimer_.stop();
  320.       this.hideThumbnailTimer_.tickAfter(/* seconds= */ 0.25);
  321.     }
  322.   }
  324.   /**
  325.    * @override
  326.    */
  327.   isShowing() {
  328.     // It is showing by default, so it is hidden if shaka-hidden is in the list.
  329.     return !this.container.classList.contains('shaka-hidden');
  330.   }
  332.   /**
  333.    * @override
  334.    */
  335.   update() {
  336.     const colors = this.config_.seekBarColors;
  337.     const currentTime = this.getValue();
  338.     const bufferedLength = this.video.buffered.length;
  339.     const bufferedStart = bufferedLength ? this.video.buffered.start(0) : 0;
  340.     const bufferedEnd =
  341.         bufferedLength ? this.video.buffered.end(bufferedLength - 1) : 0;
  343.     const seekRange = this.player.seekRange();
  344.     const seekRangeSize = seekRange.end - seekRange.start;
  346.     this.setRange(seekRange.start, seekRange.end);
  348.     if (!this.shouldBeDisplayed_()) {
  349.       shaka.ui.Utils.setDisplay(this.container, false);
  350.     } else {
  351.       shaka.ui.Utils.setDisplay(this.container, true);
  353.       const clampedBufferStart = Math.max(bufferedStart, seekRange.start);
  354.       const clampedBufferEnd = Math.min(bufferedEnd, seekRange.end);
  355.       const clampedCurrentTime = Math.min(
  356.           Math.max(currentTime, seekRange.start),
  357.           seekRange.end);
  359.       const bufferStartDistance = clampedBufferStart - seekRange.start;
  360.       const bufferEndDistance = clampedBufferEnd - seekRange.start;
  361.       const playheadDistance = clampedCurrentTime - seekRange.start;
  363.       // NOTE: the fallback to zero eliminates NaN.
  364.       const bufferStartFraction = (bufferStartDistance / seekRangeSize) || 0;
  365.       const bufferEndFraction = (bufferEndDistance / seekRangeSize) || 0;
  366.       const playheadFraction = (playheadDistance / seekRangeSize) || 0;
  368.       const unbufferedColor =
  369.           this.config_.showUnbufferedStart ? colors.base : colors.played;
  371.       const gradient = [
  372.         'to right',
  373.         this.makeColor_(unbufferedColor, bufferStartFraction),
  374.         this.makeColor_(colors.played, bufferStartFraction),
  375.         this.makeColor_(colors.played, playheadFraction),
  376.         this.makeColor_(colors.buffered, playheadFraction),
  377.         this.makeColor_(colors.buffered, bufferEndFraction),
  378.         this.makeColor_(colors.base, bufferEndFraction),
  379.       ];
  380.       this.container.style.background =
  381.           'linear-gradient(' + gradient.join(',') + ')';
  382.     }
  383.   }
  385.   /**
  386.    * @private
  387.    */
  388.   markAdBreaks_() {
  389.     if (!this.adCuePoints_.length) {
  390.       this.adMarkerContainer_.style.background = 'transparent';
  391.       this.adBreaksTimer_.stop();
  392.       return;
  393.     }
  395.     const seekRange = this.player.seekRange();
  396.     const seekRangeSize = seekRange.end - seekRange.start;
  397.     const gradient = ['to right'];
  398.     let pointsAsFractions = [];
  399.     const adBreakColor = this.config_.seekBarColors.adBreaks;
  400.     let postRollAd = false;
  401.     for (const point of this.adCuePoints_) {
  402.       // Post-roll ads are marked as starting at -1 in CS IMA ads.
  403.       if (point.start == -1 && !point.end) {
  404.         postRollAd = true;
  405.         continue;
  406.       }
  407.       // Filter point within the seek range. For points with no endpoint
  408.       // (client side ads) check that the start point is within range.
  409.       if ((!point.end && point.start >= seekRange.start) ||
  410.           (typeof point.end == 'number' && point.end > seekRange.start)) {
  411.         const startDist =
  412.             Math.max(point.start, seekRange.start) - seekRange.start;
  413.         const startFrac = (startDist / seekRangeSize) || 0;
  414.         // For points with no endpoint assume a 1% length: not too much,
  415.         // but enough to be visible on the timeline.
  416.         let endFrac = startFrac + 0.01;
  417.         if (point.end) {
  418.           const endDist = point.end - seekRange.start;
  419.           endFrac = (endDist / seekRangeSize) || 0;
  420.         }
  422.         pointsAsFractions.push({
  423.           start: startFrac,
  424.           end: endFrac,
  425.         });
  426.       }
  427.     }
  429.     pointsAsFractions = pointsAsFractions.sort((a, b) => {
  430.       return a.start - b.start;
  431.     });
  433.     for (const point of pointsAsFractions) {
  434.       gradient.push(this.makeColor_('transparent', point.start));
  435.       gradient.push(this.makeColor_(adBreakColor, point.start));
  436.       gradient.push(this.makeColor_(adBreakColor, point.end));
  437.       gradient.push(this.makeColor_('transparent', point.end));
  438.     }
  440.     if (postRollAd) {
  441.       gradient.push(this.makeColor_('transparent', 0.99));
  442.       gradient.push(this.makeColor_(adBreakColor, 0.99));
  443.     }
  444.     this.adMarkerContainer_.style.background =
  445.             'linear-gradient(' + gradient.join(',') + ')';
  446.   }
  449.   /**
  450.    * @param {string} color
  451.    * @param {number} fraction
  452.    * @return {string}
  453.    * @private
  454.    */
  455.   makeColor_(color, fraction) {
  456.     return color + ' ' + (fraction * 100) + '%';
  457.   }
  460.   /**
  461.    * @private
  462.    */
  463.   onAdCuePointsChanged_() {
  464.     const action = () => {
  465.       this.markAdBreaks_();
  466.       const seekRange = this.player.seekRange();
  467.       const seekRangeSize = seekRange.end - seekRange.start;
  468.       const minSeekBarWindow =
  469.           shaka.ui.SeekBar.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR_;
  470.       // Seek range keeps changing for live content and some of the known
  471.       // ad breaks might not be in the seek range now, but get into
  472.       // it later.
  473.       // If we have a LIVE seekable content, keep checking for ad breaks
  474.       // every second.
  475.       if (this.player.isLive() && seekRangeSize > minSeekBarWindow) {
  476.         this.adBreaksTimer_.tickEvery(/* seconds= */ 0.25);
  477.       }
  478.     };
  479.     if (this.player.isFullyLoaded()) {
  480.       action();
  481.     } else {
  482.       this.eventManager.listenOnce(this.player, 'loaded', action);
  483.     }
  484.   }
  487.   /**
  488.    * @return {boolean}
  489.    * @private
  490.    */
  491.   shouldBeDisplayed_() {
  492.     // The seek bar should be hidden when the seek window's too small or
  493.     // there's an ad playing.
  494.     const seekRange = this.player.seekRange();
  495.     const seekRangeSize = seekRange.end - seekRange.start;
  497.     if (this.player.isLive() &&
  498.         (seekRangeSize < shaka.ui.SeekBar.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR_ ||
  499.         !isFinite(seekRangeSize))) {
  500.       return false;
  501.     }
  503.     return this.ad == null || !this.ad.isLinear();
  504.   }
  506.   /** @private */
  507.   updateAriaLabel_() {
  508.     this.bar.ariaLabel = this.localization.resolve(shaka.ui.Locales.Ids.SEEK);
  509.   }
  511.   /** @private */
  512.   showTime_(pixelPosition, value) {
  513.     const offsetTop = -10;
  514.     const width = this.timeContainer_.clientWidth;
  515.     const height = 20;
  516.     this.timeContainer_.style.width = 'auto';
  517.     this.timeContainer_.style.height = height + 'px';
  518.     this.timeContainer_.style.top = -(height - offsetTop) + 'px';
  519.     const leftPosition = Math.min(this.bar.offsetWidth - width,
  520.         Math.max(0, pixelPosition - (width / 2)));
  521.     this.timeContainer_.style.left = leftPosition + 'px';
  522.     this.timeContainer_.style.right = '';
  523.     this.timeContainer_.style.visibility = 'visible';
  524.     const seekRange = this.player.seekRange();
  525.     if (this.player.isLive()) {
  526.       const totalSeconds = seekRange.end - value;
  527.       if (totalSeconds < 1) {
  528.         this.timeContainer_.textContent =
  529.             this.localization.resolve(shaka.ui.Locales.Ids.LIVE);
  530.         this.timeContainer_.style.left = '';
  531.         this.timeContainer_.style.right = '0px';
  532.       } else {
  533.         this.timeContainer_.textContent =
  534.             '-' + this.timeFormatter_(totalSeconds);
  535.       }
  536.     } else {
  537.       const totalSeconds = value - seekRange.start;
  538.       this.timeContainer_.textContent = this.timeFormatter_(totalSeconds);
  539.     }
  540.   }
  543.   /**
  544.    * @private
  545.    */
  546.   async showThumbnail_(pixelPosition, value) {
  547.     if (value < 0) {
  548.       value = 0;
  549.     }
  550.     const seekRange = this.player.seekRange();
  551.     const playerValue = Math.max(Math.ceil(seekRange.start),
  552.         Math.min(Math.floor(seekRange.end), value));
  553.     if (this.player.isLive()) {
  554.       const totalSeconds = seekRange.end - value;
  555.       if (totalSeconds < 1) {
  556.         this.thumbnailTime_.textContent =
  557.             this.localization.resolve(shaka.ui.Locales.Ids.LIVE);
  558.       } else {
  559.         this.thumbnailTime_.textContent =
  560.             '-' + this.timeFormatter_(totalSeconds);
  561.       }
  562.     } else {
  563.       this.thumbnailTime_.textContent = this.timeFormatter_(value);
  564.     }
  565.     const thumbnail =
  566.         await this.player.getThumbnails(/* trackId= */ null, playerValue);
  567.     if (!thumbnail || !thumbnail.uris || !thumbnail.uris.length) {
  568.       this.hideThumbnail_();
  569.       this.showTime_(pixelPosition, value);
  570.       return;
  571.     }
  572.     if (thumbnail.width < thumbnail.height) {
  573.       this.thumbnailContainer_.classList.add('portrait-thumbnail');
  574.     } else {
  575.       this.thumbnailContainer_.classList.remove('portrait-thumbnail');
  576.     }
  577.     const offsetTop = -10;
  578.     const width = this.thumbnailContainer_.clientWidth;
  579.     let height = Math.floor(width * 9 / 16);
  580.     this.thumbnailContainer_.style.height = height + 'px';
  581.     this.thumbnailContainer_.style.top = -(height - offsetTop) + 'px';
  582.     const leftPosition = Math.min(this.bar.offsetWidth - width,
  583.         Math.max(0, pixelPosition - (width / 2)));
  584.     this.thumbnailContainer_.style.left = leftPosition + 'px';
  585.     this.thumbnailContainer_.style.visibility = 'visible';
  586.     let uri = thumbnail.uris[0].split('#xywh=')[0];
  587.     if (!this.lastThumbnail_ ||
  588.         uri !== this.lastThumbnail_.uris[0].split('#xywh=')[0] ||
  589.         thumbnail.startByte != this.lastThumbnail_.startByte ||
  590.         thumbnail.endByte != this.lastThumbnail_.endByte) {
  591.       this.lastThumbnail_ = thumbnail;
  592.       if (this.lastThumbnailPendingRequest_) {
  593.         this.lastThumbnailPendingRequest_.abort();
  594.         this.lastThumbnailPendingRequest_ = null;
  595.       }
  596.       if (thumbnail.codecs == 'mjpg' || uri.startsWith('offline:')) {
  597.         this.thumbnailImage_.src = shaka.ui.SeekBar.Transparent_Image_;
  598.         try {
  599.           const requestType = shaka.net.NetworkingEngine.RequestType.SEGMENT;
  600.           const type =
  601.               shaka.net.NetworkingEngine.AdvancedRequestType.MEDIA_SEGMENT;
  602.           const request = shaka.util.Networking.createSegmentRequest(
  603.               thumbnail.uris,
  604.               thumbnail.startByte,
  605.               thumbnail.endByte,
  606.               this.player.getConfiguration().streaming.retryParameters);
  607.           this.lastThumbnailPendingRequest_ = this.player.getNetworkingEngine()
  608.               .request(requestType, request, {type});
  609.           const response = await this.lastThumbnailPendingRequest_.promise;
  610.           this.lastThumbnailPendingRequest_ = null;
  611.           if (thumbnail.codecs == 'mjpg') {
  612.             const parser = new shaka.util.Mp4Parser()
  613.                 .box('mdat', shaka.util.Mp4Parser.allData((data) => {
  614.                   const blob = new Blob([data], {type: 'image/jpeg'});
  615.                   uri = URL.createObjectURL(blob);
  616.                 }));
  617.             parser.parse(response.data, /* partialOkay= */ false);
  618.           } else {
  619.             const mimeType = thumbnail.mimeType || 'image/jpeg';
  620.             const blob = new Blob([response.data], {type: mimeType});
  621.             uri = URL.createObjectURL(blob);
  622.           }
  623.         } catch (error) {
  624.           if (error.code == shaka.util.Error.Code.OPERATION_ABORTED) {
  625.             return;
  626.           }
  627.           throw error;
  628.         }
  629.       }
  630.       try {
  631.         this.thumbnailContainer_.removeChild(this.thumbnailImage_);
  632.       } catch (e) {
  633.         // The image is not a child
  634.       }
  635.       this.thumbnailImage_ = /** @type {!HTMLImageElement} */ (
  636.         shaka.util.Dom.createHTMLElement('img'));
  637.       this.thumbnailImage_.id = 'shaka-player-ui-thumbnail-image';
  638.       this.thumbnailImage_.draggable = false;
  639.       this.thumbnailImage_.src = uri;
  640.       this.thumbnailImage_.onload = () => {
  641.         if (uri.startsWith('blob:')) {
  642.           URL.revokeObjectURL(uri);
  643.         }
  644.       };
  645.       this.thumbnailContainer_.insertBefore(this.thumbnailImage_,
  646.           this.thumbnailContainer_.firstChild);
  647.     }
  648.     const scale = width / thumbnail.width;
  649.     if (thumbnail.imageHeight) {
  650.       this.thumbnailImage_.height = thumbnail.imageHeight;
  651.     } else if (!thumbnail.sprite) {
  652.       this.thumbnailImage_.style.height = '100%';
  653.       this.thumbnailImage_.style.objectFit = 'contain';
  654.     }
  655.     if (thumbnail.imageWidth) {
  656.       this.thumbnailImage_.width = thumbnail.imageWidth;
  657.     } else if (!thumbnail.sprite) {
  658.       this.thumbnailImage_.style.width = '100%';
  659.       this.thumbnailImage_.style.objectFit = 'contain';
  660.     }
  661.     this.thumbnailImage_.style.left = '-' + scale * thumbnail.positionX + 'px';
  662.     this.thumbnailImage_.style.top = '-' + scale * thumbnail.positionY + 'px';
  663.     this.thumbnailImage_.style.transform = 'scale(' + scale + ')';
  664.     this.thumbnailImage_.style.transformOrigin = 'left top';
  665.     // Update container height and top
  666.     height = Math.floor(width * thumbnail.height / thumbnail.width);
  667.     this.thumbnailContainer_.style.height = height + 'px';
  668.     this.thumbnailContainer_.style.top = -(height - offsetTop) + 'px';
  669.   }
  672.   /**
  673.    * @private
  674.    */
  675.   hideThumbnail_() {
  676.     this.thumbnailContainer_.style.visibility = 'hidden';
  677.   }
  680.   /**
  681.    * @private
  682.    */
  683.   hideTime_() {
  684.     this.timeContainer_.style.visibility = 'hidden';
  685.   }
  688.   /**
  689.    * @param {number} totalSeconds
  690.    * @private
  691.    */
  692.   timeFormatter_(totalSeconds) {
  693.     return shaka.ui.Utils.buildTimeString(totalSeconds, totalSeconds >= 3600);
  694.   }
  695. };
  698. /**
  699.  * @const {string}
  700.  * @private
  701.  */
  702. shaka.ui.SeekBar.Transparent_Image_ =
  703.     'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>';
  706. /**
  707.  * @const {number}
  708.  * @private
  709.  */
  710. shaka.ui.SeekBar.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR_ = 5; // seconds
  713. /**
  714.  * @implements {shaka.extern.IUISeekBar.Factory}
  715.  * @export
  716.  */
  718. shaka.ui.SeekBar.Factory = class {
  719.   /**
  720.    * Creates a shaka.ui.SeekBar. Use this factory to register the default
  721.    * SeekBar when needed
  722.    *
  723.    * @override
  724.    */
  725.   create(rootElement, controls) {
  726.     return new shaka.ui.SeekBar(rootElement, controls);
  727.   }
  728. };