1. 1 : /**
  2. 2 :  * @file duration-display.js
  3. 3 :  */
  4. 4 : import TimeDisplay from './time-display';
  5. 5 : import Component from '../../component.js';
  6. 6 : 
  7. 7 : /**
  8. 8 :  * Displays the duration
  9. 9 :  *
  10. 10 :  * @extends Component
  11. 11 :  */
  12. 12 : class DurationDisplay extends TimeDisplay {
  13. 13 : 
  14. 14 :   /**
  15. 15 :    * Creates an instance of this class.
  16. 16 :    *
  17. 17 :    * @param { import('../../player').default } player
  18. 18 :    *        The `Player` that this class should be attached to.
  19. 19 :    *
  20. 20 :    * @param {Object} [options]
  21. 21 :    *        The key/value store of player options.
  22. 22 :    */
  23. 23 :   constructor(player, options) {
  24. 24 :     super(player, options);
  25. 25 : 
  26. 26 :     const updateContent = (e) => this.updateContent(e);
  27. 27 : 
  28. 28 :     // we do not want to/need to throttle duration changes,
  29. 29 :     // as they should always display the changed duration as
  30. 30 :     // it has changed
  31. 31 :     this.on(player, 'durationchange', updateContent);
  32. 32 : 
  33. 33 :     // Listen to loadstart because the player duration is reset when a new media element is loaded,
  34. 34 :     // but the durationchange on the user agent will not fire.
  35. 35 :     // @see [Spec]{@link https://www.w3.org/TR/2011/WD-html5-20110113/video.html#media-element-load-algorithm}
  36. 36 :     this.on(player, 'loadstart', updateContent);
  37. 37 : 
  38. 38 :     // Also listen for timeupdate (in the parent) and loadedmetadata because removing those
  39. 39 :     // listeners could have broken dependent applications/libraries. These
  40. 40 :     // can likely be removed for 7.0.
  41. 41 :     this.on(player, 'loadedmetadata', updateContent);
  42. 42 :   }
  43. 43 : 
  44. 44 :   /**
  45. 45 :    * Builds the default DOM `className`.
  46. 46 :    *
  47. 47 :    * @return {string}
  48. 48 :    *         The DOM `className` for this object.
  49. 49 :    */
  50. 50 :   buildCSSClass() {
  51. 51 :     return 'vjs-duration';
  52. 52 :   }
  53. 53 : 
  54. 54 :   /**
  55. 55 :    * Update duration time display.
  56. 56 :    *
  57. 57 :    * @param {Event} [event]
  58. 58 :    *        The `durationchange`, `timeupdate`, or `loadedmetadata` event that caused
  59. 59 :    *        this function to be called.
  60. 60 :    *
  61. 61 :    * @listens Player#durationchange
  62. 62 :    * @listens Player#timeupdate
  63. 63 :    * @listens Player#loadedmetadata
  64. 64 :    */
  65. 65 :   updateContent(event) {
  66. 66 :     const duration = this.player_.duration();
  67. 67 : 
  68. 68 :     this.updateTextNode_(duration);
  69. 69 :   }
  70. 70 : }
  71. 71 : 
  72. 72 : /**
  73. 73 :  * The text that is added to the `DurationDisplay` for screen reader users.
  74. 74 :  *
  75. 75 :  * @type {string}
  76. 76 :  * @private
  77. 77 :  */
  78. 78 : DurationDisplay.prototype.labelText_ = 'Duration';
  79. 79 : 
  80. 80 : /**
  81. 81 :  * The text that should display over the `DurationDisplay`s controls. Added to for localization.
  82. 82 :  *
  83. 83 :  * @type {string}
  84. 84 :  * @protected
  85. 85 :  *
  86. 86 :  * @deprecated in v7; controlText_ is not used in non-active display Components
  87. 87 :  */
  88. 88 : DurationDisplay.prototype.controlText_ = 'Duration';
  89. 89 : 
  90. 90 : Component.registerComponent('DurationDisplay', DurationDisplay);
  91. 91 : export default DurationDisplay;