1. 1 : /**
  2. 2 :  * @file big-play-button.js
  3. 3 :  */
  4. 4 : import Button from './button.js';
  5. 5 : import Component from './component.js';
  6. 6 : import {isPromise, silencePromise} from './utils/promise';
  7. 7 : import * as browser from './utils/browser.js';
  8. 8 : 
  9. 9 : /**
  10. 10 :  * The initial play button that shows before the video has played. The hiding of the
  11. 11 :  * `BigPlayButton` get done via CSS and `Player` states.
  12. 12 :  *
  13. 13 :  * @extends Button
  14. 14 :  */
  15. 15 : class BigPlayButton extends Button {
  16. 16 :   constructor(player, options) {
  17. 17 :     super(player, options);
  18. 18 : 
  19. 19 :     this.mouseused_ = false;
  20. 20 : 
  21. 21 :     this.on('mousedown', (e) => this.handleMouseDown(e));
  22. 22 :   }
  23. 23 : 
  24. 24 :   /**
  25. 25 :    * Builds the default DOM `className`.
  26. 26 :    *
  27. 27 :    * @return {string}
  28. 28 :    *         The DOM `className` for this object. Always returns 'vjs-big-play-button'.
  29. 29 :    */
  30. 30 :   buildCSSClass() {
  31. 31 :     return 'vjs-big-play-button';
  32. 32 :   }
  33. 33 : 
  34. 34 :   /**
  35. 35 :    * This gets called when a `BigPlayButton` "clicked". See {@link ClickableComponent}
  36. 36 :    * for more detailed information on what a click can be.
  37. 37 :    *
  38. 38 :    * @param {EventTarget~Event} event
  39. 39 :    *        The `keydown`, `tap`, or `click` event that caused this function to be
  40. 40 :    *        called.
  41. 41 :    *
  42. 42 :    * @listens tap
  43. 43 :    * @listens click
  44. 44 :    */
  45. 45 :   handleClick(event) {
  46. 46 :     const playPromise = this.player_.play();
  47. 47 : 
  48. 48 :     // exit early if clicked via the mouse
  49. 49 :     if (this.mouseused_ && event.clientX && event.clientY) {
  50. 50 :       const sourceIsEncrypted = this.player_.usingPlugin('eme') &&
  51. 51 :                                 this.player_.eme.sessions &&
  52. 52 :                                 this.player_.eme.sessions.length > 0;
  53. 53 : 
  54. 54 :       silencePromise(playPromise);
  55. 55 :       if (this.player_.tech(true) &&
  56. 56 :          // We've observed a bug in IE and Edge when playing back DRM content where
  57. 57 :          // calling .focus() on the video element causes the video to go black,
  58. 58 :          // so we avoid it in that specific case
  59. 59 :          !((browser.IE_VERSION || browser.IS_EDGE) && sourceIsEncrypted)) {
  60. 60 :         this.player_.tech(true).focus();
  61. 61 :       }
  62. 62 :       return;
  63. 63 :     }
  64. 64 : 
  65. 65 :     const cb = this.player_.getChild('controlBar');
  66. 66 :     const playToggle = cb && cb.getChild('playToggle');
  67. 67 : 
  68. 68 :     if (!playToggle) {
  69. 69 :       this.player_.tech(true).focus();
  70. 70 :       return;
  71. 71 :     }
  72. 72 : 
  73. 73 :     const playFocus = () => playToggle.focus();
  74. 74 : 
  75. 75 :     if (isPromise(playPromise)) {
  76. 76 :       playPromise.then(playFocus, () => {});
  77. 77 :     } else {
  78. 78 :       this.setTimeout(playFocus, 1);
  79. 79 :     }
  80. 80 :   }
  81. 81 : 
  82. 82 :   handleKeyDown(event) {
  83. 83 :     this.mouseused_ = false;
  84. 84 : 
  85. 85 :     super.handleKeyDown(event);
  86. 86 :   }
  87. 87 : 
  88. 88 :   handleMouseDown(event) {
  89. 89 :     this.mouseused_ = true;
  90. 90 :   }
  91. 91 : }
  92. 92 : 
  93. 93 : /**
  94. 94 :  * The text that should display over the `BigPlayButton`s controls. Added to for localization.
  95. 95 :  *
  96. 96 :  * @type {string}
  97. 97 :  * @private
  98. 98 :  */
  99. 99 : BigPlayButton.prototype.controlText_ = 'Play Video';
  100. 100 : 
  101. 101 : Component.registerComponent('BigPlayButton', BigPlayButton);
  102. 102 : export default BigPlayButton;