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