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.AdManager');
  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.thumbnailTime_ = shaka.util.Dom.createHTMLElement('div');
  110.     this.thumbnailTime_.id = 'shaka-player-ui-thumbnail-time';
  112.     this.thumbnailContainer_.appendChild(this.thumbnailImage_);
  113.     this.thumbnailContainer_.appendChild(this.thumbnailTime_);
  114.     this.container.appendChild(this.thumbnailContainer_);
  116.     /**
  117.      * @private {?shaka.extern.Thumbnail}
  118.      */
  119.     this.lastThumbnail_ = null;
  121.     /**
  122.      * @private {?shaka.net.NetworkingEngine.PendingRequest}
  123.      */
  124.     this.lastThumbnailPendingRequest_ = null;
  126.     /**
  127.      * True if the bar is moving due to touchscreen or keyboard events.
  128.      *
  129.      * @private {boolean}
  130.      */
  131.     this.isMoving_ = false;
  133.     /**
  134.      * The timer is activated to hide the thumbnail.
  135.      *
  136.      * @private {shaka.util.Timer}
  137.      */
  138.     this.hideThumbnailTimer_ = new shaka.util.Timer(() => {
  139.       this.hideThumbnail_();
  140.     });
  142.     /** @private {!Array.<!shaka.extern.AdCuePoint>} */
  143.     this.adCuePoints_ = [];
  145.     this.eventManager.listen(this.localization,
  146.         shaka.ui.Localization.LOCALE_UPDATED,
  147.         () => this.updateAriaLabel_());
  149.     this.eventManager.listen(this.localization,
  150.         shaka.ui.Localization.LOCALE_CHANGED,
  151.         () => this.updateAriaLabel_());
  153.     this.eventManager.listen(
  154.         this.adManager, shaka.ads.AdManager.AD_STARTED, () => {
  155.           if (!this.shouldBeDisplayed_()) {
  156.             shaka.ui.Utils.setDisplay(this.container, false);
  157.           }
  158.         });
  160.     this.eventManager.listen(
  161.         this.adManager, shaka.ads.AdManager.AD_STOPPED, () => {
  162.           if (this.shouldBeDisplayed_()) {
  163.             shaka.ui.Utils.setDisplay(this.container, true);
  164.           }
  165.         });
  167.     this.eventManager.listen(
  168.         this.adManager, shaka.ads.AdManager.CUEPOINTS_CHANGED, (e) => {
  169.           this.adCuePoints_ = (e)['cuepoints'];
  170.           this.onAdCuePointsChanged_();
  171.         });
  173.     this.eventManager.listen(
  174.         this.player, 'unloading', () => {
  175.           this.adCuePoints_ = [];
  176.           this.onAdCuePointsChanged_();
  177.           if (this.lastThumbnailPendingRequest_) {
  178.             this.lastThumbnailPendingRequest_.abort();
  179.             this.lastThumbnailPendingRequest_ = null;
  180.           }
  181.           this.lastThumbnail_ = null;
  182.           this.hideThumbnail_();
  183.         });
  185.     this.eventManager.listen(this.bar, 'mousemove', (event) => {
  186.       if (!this.player.getImageTracks().length) {
  187.         this.hideThumbnail_();
  188.         return;
  189.       }
  190.       const rect = this.bar.getBoundingClientRect();
  191.       const min = parseFloat(this.bar.min);
  192.       const max = parseFloat(this.bar.max);
  193.       // Pixels from the left of the range element
  194.       const mousePosition = event.clientX - rect.left;
  195.       // Pixels per unit value of the range element.
  196.       const scale = (max - min) / rect.width;
  197.       // Mouse position in units, which may be outside the allowed range.
  198.       const value = Math.round(min + scale * mousePosition);
  199.       // Show Thumbnail
  200.       this.showThumbnail_(mousePosition, value);
  201.     });
  203.     this.eventManager.listen(this.container, 'mouseleave', () => {
  204.       this.hideThumbnailTimer_.stop();
  205.       this.hideThumbnailTimer_.tickAfter(/* seconds= */ 0.25);
  206.     });
  208.     // Initialize seek state and label.
  209.     this.setValue(this.video.currentTime);
  210.     this.update();
  211.     this.updateAriaLabel_();
  213.     if (this.ad) {
  214.       // There was already an ad.
  215.       shaka.ui.Utils.setDisplay(this.container, false);
  216.     }
  217.   }
  219.   /** @override */
  220.   release() {
  221.     if (this.seekTimer_) {
  222.       this.seekTimer_.stop();
  223.       this.seekTimer_ = null;
  224.       this.adBreaksTimer_.stop();
  225.       this.adBreaksTimer_ = null;
  226.     }
  228.     super.release();
  229.   }
  231.   /**
  232.    * Called by the base class when user interaction with the input element
  233.    * begins.
  234.    *
  235.    * @override
  236.    */
  237.   onChangeStart() {
  238.     this.wasPlaying_ = !this.video.paused;
  239.     this.controls.setSeeking(true);
  240.     this.video.pause();
  241.     this.hideThumbnailTimer_.stop();
  242.     this.isMoving_ = true;
  243.   }
  245.   /**
  246.    * Update the video element's state to match the input element's state.
  247.    * Called by the base class when the input element changes.
  248.    *
  249.    * @override
  250.    */
  251.   onChange() {
  252.     if (!this.video.duration) {
  253.       // Can't seek yet.  Ignore.
  254.       return;
  255.     }
  257.     // Update the UI right away.
  258.     this.update();
  260.     // We want to wait until the user has stopped moving the seek bar for a
  261.     // little bit to reduce the number of times we ask the player to seek.
  262.     //
  263.     // To do this, we will start a timer that will fire in a little bit, but if
  264.     // we see another seek bar change, we will cancel that timer and re-start
  265.     // it.
  266.     //
  267.     // Calling |start| on an already pending timer will cancel the old request
  268.     // and start the new one.
  269.     this.seekTimer_.tickAfter(/* seconds= */ 0.125);
  271.     if (this.player.getImageTracks().length) {
  272.       const min = parseFloat(this.bar.min);
  273.       const max = parseFloat(this.bar.max);
  274.       const rect = this.bar.getBoundingClientRect();
  275.       const value = Math.round(this.getValue());
  276.       const scale = (max - min) / rect.width;
  277.       const position = (value - min) / scale;
  278.       this.showThumbnail_(position, value);
  279.     } else {
  280.       this.hideThumbnail_();
  281.     }
  282.   }
  284.   /**
  285.    * Called by the base class when user interaction with the input element
  286.    * ends.
  287.    *
  288.    * @override
  289.    */
  290.   onChangeEnd() {
  291.     // They just let go of the seek bar, so cancel the timer and manually
  292.     // call the event so that we can respond immediately.
  293.     this.seekTimer_.tickNow();
  294.     this.controls.setSeeking(false);
  296.     if (this.wasPlaying_) {
  297.       this.video.play();
  298.     }
  300.     if (this.isMoving_) {
  301.       this.isMoving_ = false;
  302.       this.hideThumbnailTimer_.stop();
  303.       this.hideThumbnailTimer_.tickAfter(/* seconds= */ 0.25);
  304.     }
  305.   }
  307.   /**
  308.    * @override
  309.   */
  310.   isShowing() {
  311.     // It is showing by default, so it is hidden if shaka-hidden is in the list.
  312.     return !this.container.classList.contains('shaka-hidden');
  313.   }
  315.   /**
  316.    * @override
  317.    */
  318.   update() {
  319.     const colors = this.config_.seekBarColors;
  320.     const currentTime = this.getValue();
  321.     const bufferedLength = this.video.buffered.length;
  322.     const bufferedStart = bufferedLength ? this.video.buffered.start(0) : 0;
  323.     const bufferedEnd =
  324.         bufferedLength ? this.video.buffered.end(bufferedLength - 1) : 0;
  326.     const seekRange = this.player.seekRange();
  327.     const seekRangeSize = seekRange.end - seekRange.start;
  329.     this.setRange(seekRange.start, seekRange.end);
  331.     if (!this.shouldBeDisplayed_()) {
  332.       shaka.ui.Utils.setDisplay(this.container, false);
  333.     } else {
  334.       shaka.ui.Utils.setDisplay(this.container, true);
  336.       if (bufferedLength == 0) {
  337.         this.container.style.background = colors.base;
  338.       } else {
  339.         const clampedBufferStart = Math.max(bufferedStart, seekRange.start);
  340.         const clampedBufferEnd = Math.min(bufferedEnd, seekRange.end);
  341.         const clampedCurrentTime = Math.min(
  342.             Math.max(currentTime, seekRange.start),
  343.             seekRange.end);
  345.         const bufferStartDistance = clampedBufferStart - seekRange.start;
  346.         const bufferEndDistance = clampedBufferEnd - seekRange.start;
  347.         const playheadDistance = clampedCurrentTime - seekRange.start;
  349.         // NOTE: the fallback to zero eliminates NaN.
  350.         const bufferStartFraction = (bufferStartDistance / seekRangeSize) || 0;
  351.         const bufferEndFraction = (bufferEndDistance / seekRangeSize) || 0;
  352.         const playheadFraction = (playheadDistance / seekRangeSize) || 0;
  354.         const unbufferedColor =
  355.             this.config_.showUnbufferedStart ? colors.base : colors.played;
  357.         const gradient = [
  358.           'to right',
  359.           this.makeColor_(unbufferedColor, bufferStartFraction),
  360.           this.makeColor_(colors.played, bufferStartFraction),
  361.           this.makeColor_(colors.played, playheadFraction),
  362.           this.makeColor_(colors.buffered, playheadFraction),
  363.           this.makeColor_(colors.buffered, bufferEndFraction),
  364.           this.makeColor_(colors.base, bufferEndFraction),
  365.         ];
  366.         this.container.style.background =
  367.             'linear-gradient(' + gradient.join(',') + ')';
  368.       }
  369.     }
  370.   }
  372.   /**
  373.    * @private
  374.    */
  375.   markAdBreaks_() {
  376.     if (!this.adCuePoints_.length) {
  377.       this.adMarkerContainer_.style.background = 'transparent';
  378.       return;
  379.     }
  381.     const seekRange = this.player.seekRange();
  382.     const seekRangeSize = seekRange.end - seekRange.start;
  383.     const gradient = ['to right'];
  384.     const pointsAsFractions = [];
  385.     const adBreakColor = this.config_.seekBarColors.adBreaks;
  386.     let postRollAd = false;
  387.     for (const point of this.adCuePoints_) {
  388.       // Post-roll ads are marked as starting at -1 in CS IMA ads.
  389.       if (point.start == -1 && !point.end) {
  390.         postRollAd = true;
  391.       }
  392.       // Filter point within the seek range. For points with no endpoint
  393.       // (client side ads) check that the start point is within range.
  394.       if (point.start >= seekRange.start && point.start < seekRange.end) {
  395.         if (point.end && point.end > seekRange.end) {
  396.           continue;
  397.         }
  399.         const startDist = point.start - seekRange.start;
  400.         const startFrac = (startDist / seekRangeSize) || 0;
  401.         // For points with no endpoint assume a 1% length: not too much,
  402.         // but enough to be visible on the timeline.
  403.         let endFrac = startFrac + 0.01;
  404.         if (point.end) {
  405.           const endDist = point.end - seekRange.start;
  406.           endFrac = (endDist / seekRangeSize) || 0;
  407.         }
  409.         pointsAsFractions.push({
  410.           start: startFrac,
  411.           end: endFrac,
  412.         });
  413.       }
  414.     }
  416.     for (const point of pointsAsFractions) {
  417.       gradient.push(this.makeColor_('transparent', point.start));
  418.       gradient.push(this.makeColor_(adBreakColor, point.start));
  419.       gradient.push(this.makeColor_(adBreakColor, point.end));
  420.       gradient.push(this.makeColor_('transparent', point.end));
  421.     }
  423.     if (postRollAd) {
  424.       gradient.push(this.makeColor_('transparent', 0.99));
  425.       gradient.push(this.makeColor_(adBreakColor, 0.99));
  426.     }
  427.     this.adMarkerContainer_.style.background =
  428.             'linear-gradient(' + gradient.join(',') + ')';
  429.   }
  432.   /**
  433.    * @param {string} color
  434.    * @param {number} fract
  435.    * @return {string}
  436.    * @private
  437.    */
  438.   makeColor_(color, fract) {
  439.     return color + ' ' + (fract * 100) + '%';
  440.   }
  443.   /**
  444.    * @private
  445.    */
  446.   onAdCuePointsChanged_() {
  447.     this.markAdBreaks_();
  448.     const seekRange = this.player.seekRange();
  449.     const seekRangeSize = seekRange.end - seekRange.start;
  450.     const minSeekBarWindow = shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR;
  451.     // Seek range keeps changing for live content and some of the known
  452.     // ad breaks might not be in the seek range now, but get into
  453.     // it later.
  454.     // If we have a LIVE seekable content, keep checking for ad breaks
  455.     // every second.
  456.     if (this.player.isLive() && seekRangeSize > minSeekBarWindow) {
  457.       this.adBreaksTimer_.tickEvery(1);
  458.     }
  459.   }
  462.   /**
  463.    * @return {boolean}
  464.    * @private
  465.    */
  466.   shouldBeDisplayed_() {
  467.     // The seek bar should be hidden when the seek window's too small or
  468.     // there's an ad playing.
  469.     const seekRange = this.player.seekRange();
  470.     const seekRangeSize = seekRange.end - seekRange.start;
  472.     if (this.player.isLive() &&
  473.         seekRangeSize < shaka.ui.Constants.MIN_SEEK_WINDOW_TO_SHOW_SEEKBAR) {
  474.       return false;
  475.     }
  477.     return this.ad == null || !this.ad.isLinear();
  478.   }
  480.   /** @private */
  481.   updateAriaLabel_() {
  482.     this.bar.ariaLabel = this.localization.resolve(shaka.ui.Locales.Ids.SEEK);
  483.   }
  486.   /**
  487.    * @private
  488.    */
  489.   async showThumbnail_(pixelPosition, value) {
  490.     const thumbnailTrack = this.getThumbnailTrack_();
  491.     if (!thumbnailTrack) {
  492.       this.hideThumbnail_();
  493.       return;
  494.     }
  495.     if (value < 0) {
  496.       value = 0;
  497.     }
  498.     const seekRange = this.player.seekRange();
  499.     const playerValue = Math.max(Math.ceil(seekRange.start),
  500.         Math.min(Math.floor(seekRange.end), value));
  501.     const thumbnail =
  502.         await this.player.getThumbnails(thumbnailTrack.id, playerValue);
  503.     if (!thumbnail || !thumbnail.uris.length) {
  504.       this.hideThumbnail_();
  505.       return;
  506.     }
  507.     if (this.player.isLive()) {
  508.       const totalSeconds = seekRange.end - value;
  509.       if (totalSeconds < 1) {
  510.         this.thumbnailTime_.textContent =
  511.             this.localization.resolve(shaka.ui.Locales.Ids.LIVE);
  512.       } else {
  513.         this.thumbnailTime_.textContent =
  514.             '-' + this.timeFormatter_(totalSeconds);
  515.       }
  516.     } else {
  517.       this.thumbnailTime_.textContent = this.timeFormatter_(value);
  518.     }
  519.     const offsetTop = -10;
  520.     const width = this.thumbnailContainer_.clientWidth;
  521.     let height = Math.floor(width * 9 / 16);
  522.     this.thumbnailContainer_.style.height = height + 'px';
  523.     this.thumbnailContainer_.style.top = -(height - offsetTop) + 'px';
  524.     const leftPosition = Math.min(this.bar.offsetWidth - width,
  525.         Math.max(0, pixelPosition - (width / 2)));
  526.     this.thumbnailContainer_.style.left = leftPosition + 'px';
  527.     this.thumbnailContainer_.style.visibility = 'visible';
  528.     let uri = thumbnail.uris[0].split('#xywh=')[0];
  529.     if (!this.lastThumbnail_ ||
  530.         uri !== this.lastThumbnail_.uris[0].split('#xywh=')[0] ||
  531.         thumbnail.segment.getStartByte() !=
  532.             this.lastThumbnail_.segment.getStartByte() ||
  533.         thumbnail.segment.getEndByte() !=
  534.             this.lastThumbnail_.segment.getEndByte()) {
  535.       this.lastThumbnail_ = thumbnail;
  536.       if (this.lastThumbnailPendingRequest_) {
  537.         this.lastThumbnailPendingRequest_.abort();
  538.         this.lastThumbnailPendingRequest_ = null;
  539.       }
  540.       if (thumbnailTrack.codecs == 'mjpg' || uri.startsWith('offline:')) {
  541.         this.thumbnailImage_.src = shaka.ui.SeekBar.Transparent_Image_;
  542.         try {
  543.           const requestType = shaka.net.NetworkingEngine.RequestType.SEGMENT;
  544.           const type =
  545.               shaka.net.NetworkingEngine.AdvancedRequestType.MEDIA_SEGMENT;
  546.           const request = shaka.util.Networking.createSegmentRequest(
  547.               thumbnail.segment.getUris(),
  548.               thumbnail.segment.getStartByte(),
  549.               thumbnail.segment.getEndByte(),
  550.               this.player.getConfiguration().streaming.retryParameters);
  551.           this.lastThumbnailPendingRequest_ = this.player.getNetworkingEngine()
  552.               .request(requestType, request, {type});
  553.           const response = await this.lastThumbnailPendingRequest_.promise;
  554.           this.lastThumbnailPendingRequest_ = null;
  555.           if (thumbnailTrack.codecs == 'mjpg') {
  556.             const parser = new shaka.util.Mp4Parser()
  557.                 .box('mdat', shaka.util.Mp4Parser.allData((data) => {
  558.                   const blob = new Blob([data], {type: 'image/jpeg'});
  559.                   uri = URL.createObjectURL(blob);
  560.                 }));
  561.             parser.parse(response.data, /* partialOkay= */ false);
  562.           } else {
  563.             const mimeType = thumbnailTrack.mimeType || 'image/jpeg';
  564.             const blob = new Blob([response.data], {type: mimeType});
  565.             uri = URL.createObjectURL(blob);
  566.           }
  567.         } catch (error) {
  568.           if (error.code == shaka.util.Error.Code.OPERATION_ABORTED) {
  569.             return;
  570.           }
  571.           throw error;
  572.         }
  573.       }
  574.       try {
  575.         this.thumbnailContainer_.removeChild(this.thumbnailImage_);
  576.       } catch (e) {
  577.         // The image is not a child
  578.       }
  579.       this.thumbnailImage_ = /** @type {!HTMLImageElement} */ (
  580.         shaka.util.Dom.createHTMLElement('img'));
  581.       this.thumbnailImage_.id = 'shaka-player-ui-thumbnail-image';
  582.       this.thumbnailImage_.draggable = false;
  583.       this.thumbnailImage_.src = uri;
  584.       this.thumbnailImage_.onload = () => {
  585.         if (uri.startsWith('blob:')) {
  586.           URL.revokeObjectURL(uri);
  587.         }
  588.       };
  589.       this.thumbnailContainer_.insertBefore(this.thumbnailImage_,
  590.           this.thumbnailContainer_.firstChild);
  591.     }
  592.     const scale = width / thumbnail.width;
  593.     if (thumbnail.imageHeight) {
  594.       this.thumbnailImage_.height = thumbnail.imageHeight;
  595.     } else if (!thumbnail.sprite) {
  596.       this.thumbnailImage_.style.height = '100%';
  597.       this.thumbnailImage_.style.objectFit = 'contain';
  598.     }
  599.     if (thumbnail.imageWidth) {
  600.       this.thumbnailImage_.width = thumbnail.imageWidth;
  601.     } else if (!thumbnail.sprite) {
  602.       this.thumbnailImage_.style.width = '100%';
  603.       this.thumbnailImage_.style.objectFit = 'contain';
  604.     }
  605.     this.thumbnailImage_.style.left = '-' + scale * thumbnail.positionX + 'px';
  606.     this.thumbnailImage_.style.top = '-' + scale * thumbnail.positionY + 'px';
  607.     this.thumbnailImage_.style.transform = 'scale(' + scale + ')';
  608.     this.thumbnailImage_.style.transformOrigin = 'left top';
  609.     // Update container height and top
  610.     height = Math.floor(width * thumbnail.height / thumbnail.width);
  611.     this.thumbnailContainer_.style.height = height + 'px';
  612.     this.thumbnailContainer_.style.top = -(height - offsetTop) + 'px';
  613.   }
  616.   /**
  617.    * @return {?shaka.extern.Track} The thumbnail track.
  618.    * @private
  619.    */
  620.   getThumbnailTrack_() {
  621.     const imageTracks = this.player.getImageTracks();
  622.     if (!imageTracks.length) {
  623.       return null;
  624.     }
  625.     const mimeTypesPreference = [
  626.       'image/avif',
  627.       'image/webp',
  628.       'image/jpeg',
  629.       'image/png',
  630.       'image/svg+xml',
  631.     ];
  632.     for (const mimeType of mimeTypesPreference) {
  633.       const estimatedBandwidth = this.player.getStats().estimatedBandwidth;
  634.       const bestOptions = imageTracks.filter((track) => {
  635.         return track.mimeType.toLowerCase() === mimeType &&
  636.             track.bandwidth < estimatedBandwidth * 0.01;
  637.       }).sort((a, b) => {
  638.         return b.bandwidth - a.bandwidth;
  639.       });
  640.       if (bestOptions && bestOptions.length) {
  641.         return bestOptions[0];
  642.       }
  643.     }
  644.     const mjpgTrack = imageTracks.find((track) => {
  645.       return track.mimeType == 'application/mp4' && track.codecs == 'mjpg';
  646.     });
  647.     return mjpgTrack || imageTracks[0];
  648.   }
  651.   /**
  652.    * @private
  653.    */
  654.   hideThumbnail_() {
  655.     this.thumbnailContainer_.style.visibility = 'hidden';
  656.     this.thumbnailTime_.textContent = '';
  657.   }
  660.   /**
  661.    * @param {number} totalSeconds
  662.    * @private
  663.    */
  664.   timeFormatter_(totalSeconds) {
  665.     const secondsNumber = Math.round(totalSeconds);
  666.     const hours = Math.floor(secondsNumber / 3600);
  667.     let minutes = Math.floor((secondsNumber - (hours * 3600)) / 60);
  668.     let seconds = secondsNumber - (hours * 3600) - (minutes * 60);
  669.     if (seconds < 10) {
  670.       seconds = '0' + seconds;
  671.     }
  672.     if (hours > 0) {
  673.       if (minutes < 10) {
  674.         minutes = '0' + minutes;
  675.       }
  676.       return hours + ':' + minutes + ':' + seconds;
  677.     } else {
  678.       return minutes + ':' + seconds;
  679.     }
  680.   }
  681. };
  684. /**
  685.  * @const {string}
  686.  * @private
  687.  */
  688. shaka.ui.SeekBar.Transparent_Image_ =
  689.     'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>';
  692. /**
  693.  * @implements {shaka.extern.IUISeekBar.Factory}
  694.  * @export
  695.  */
  697. shaka.ui.SeekBar.Factory = class {
  698.   /**
  699.    * Creates a shaka.ui.SeekBar. Use this factory to register the default
  700.    * SeekBar when needed
  701.    *
  702.    * @override
  703.    */
  704.   create(rootElement, controls) {
  705.     return new shaka.ui.SeekBar(rootElement, controls);
  706.   }
  707. };