Source: ui/pip_button.js

  1. /*! @license
  2. * Shaka Player
  3. * Copyright 2016 Google LLC
  4. * SPDX-License-Identifier: Apache-2.0
  5. */
  6. goog.provide('shaka.ui.PipButton');
  7. goog.require('shaka.ui.ContextMenu');
  8. goog.require('shaka.ui.Controls');
  9. goog.require('shaka.ui.Element');
  10. goog.require('shaka.ui.Enums');
  11. goog.require('shaka.ui.Locales');
  12. goog.require('shaka.ui.Localization');
  13. goog.require('shaka.ui.OverflowMenu');
  14. goog.require('shaka.ui.Utils');
  15. goog.require('shaka.util.Dom');
  16. goog.require('shaka.util.FakeEvent');
  17. goog.requireType('shaka.ui.Controls');
  18. /**
  19. * @extends {shaka.ui.Element}
  20. * @final
  21. * @export
  22. */
  23. shaka.ui.PipButton = class extends shaka.ui.Element {
  24. /**
  25. * @param {!HTMLElement} parent
  26. * @param {!shaka.ui.Controls} controls
  27. */
  28. constructor(parent, controls) {
  29. super(parent, controls);
  30. /** @private {HTMLMediaElement} */
  31. this.localVideo_ = this.controls.getLocalVideo();
  32. const LocIds = shaka.ui.Locales.Ids;
  33. /** @private {!HTMLButtonElement} */
  34. this.pipButton_ = shaka.util.Dom.createButton();
  35. this.pipButton_.classList.add('shaka-pip-button');
  36. this.pipButton_.classList.add('shaka-tooltip');
  37. /** @private {!HTMLElement} */
  38. this.pipIcon_ = shaka.util.Dom.createHTMLElement('i');
  39. this.pipIcon_.classList.add('material-icons-round');
  40. this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
  41. this.pipButton_.appendChild(this.pipIcon_);
  42. const label = shaka.util.Dom.createHTMLElement('label');
  43. label.classList.add('shaka-overflow-button-label');
  44. label.classList.add('shaka-overflow-menu-only');
  45. this.pipNameSpan_ = shaka.util.Dom.createHTMLElement('span');
  46. this.pipNameSpan_.textContent =
  47. this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
  48. label.appendChild(this.pipNameSpan_);
  49. /** @private {!HTMLElement} */
  50. this.currentPipState_ = shaka.util.Dom.createHTMLElement('span');
  51. this.currentPipState_.classList.add('shaka-current-selection-span');
  52. label.appendChild(this.currentPipState_);
  53. this.pipButton_.appendChild(label);
  54. this.updateLocalizedStrings_();
  55. this.parent.appendChild(this.pipButton_);
  56. // Don't display the button if PiP is not supported or not allowed.
  57. // TODO: Can this ever change? Is it worth creating the button if the below
  58. // condition is true?
  59. if (!this.isPipAllowed_()) {
  60. shaka.ui.Utils.setDisplay(this.pipButton_, false);
  61. }
  62. this.eventManager.listen(
  63. this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  64. this.updateLocalizedStrings_();
  65. });
  66. this.eventManager.listen(
  67. this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  68. this.updateLocalizedStrings_();
  69. });
  70. this.eventManager.listen(this.pipButton_, 'click', () => {
  71. this.onPipClick_();
  72. });
  73. this.eventManager.listen(this.localVideo_, 'enterpictureinpicture', () => {
  74. this.onEnterPictureInPicture_();
  75. });
  76. this.eventManager.listen(this.localVideo_, 'leavepictureinpicture', () => {
  77. this.onLeavePictureInPicture_();
  78. });
  79. this.eventManager.listen(this.controls, 'caststatuschanged', (e) => {
  80. this.onCastStatusChange_(e);
  81. });
  82. this.eventManager.listen(this.player, 'trackschanged', () => {
  83. this.onTracksChanged_();
  84. });
  85. }
  86. /**
  87. * @return {boolean}
  88. * @private
  89. */
  90. isPipAllowed_() {
  91. return document.pictureInPictureEnabled &&
  92. !this.video.disablePictureInPicture;
  93. }
  94. /**
  95. * @return {!Promise}
  96. * @private
  97. */
  98. async onPipClick_() {
  99. try {
  100. if (!document.pictureInPictureElement) {
  101. // If you were fullscreen, leave fullscreen first.
  102. if (document.fullscreenElement) {
  103. document.exitFullscreen();
  104. }
  105. await this.video.requestPictureInPicture();
  106. } else {
  107. await document.exitPictureInPicture();
  108. }
  109. } catch (error) {
  110. this.controls.dispatchEvent(new shaka.util.FakeEvent(
  111. 'error', (new Map()).set('detail', error)));
  112. }
  113. }
  114. /** @private */
  115. onEnterPictureInPicture_() {
  116. const LocIds = shaka.ui.Locales.Ids;
  117. this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.EXIT_PIP;
  118. this.pipButton_.ariaLabel =
  119. this.localization.resolve(LocIds.EXIT_PICTURE_IN_PICTURE);
  120. this.currentPipState_.textContent =
  121. this.localization.resolve(LocIds.ON);
  122. }
  123. /** @private */
  124. onLeavePictureInPicture_() {
  125. const LocIds = shaka.ui.Locales.Ids;
  126. this.pipIcon_.textContent = shaka.ui.Enums.MaterialDesignIcons.PIP;
  127. this.pipButton_.ariaLabel =
  128. this.localization.resolve(LocIds.ENTER_PICTURE_IN_PICTURE);
  129. this.currentPipState_.textContent =
  130. this.localization.resolve(LocIds.OFF);
  131. }
  132. /**
  133. * @private
  134. */
  135. updateLocalizedStrings_() {
  136. const LocIds = shaka.ui.Locales.Ids;
  137. this.pipNameSpan_.textContent =
  138. this.localization.resolve(LocIds.PICTURE_IN_PICTURE);
  139. const ariaLabel = document.pictureInPictureElement ?
  140. LocIds.EXIT_PICTURE_IN_PICTURE :
  141. LocIds.ENTER_PICTURE_IN_PICTURE;
  142. this.pipButton_.ariaLabel = this.localization.resolve(ariaLabel);
  143. const currentPipState = document.pictureInPictureElement ?
  144. LocIds.ON : LocIds.OFF;
  145. this.currentPipState_.textContent =
  146. this.localization.resolve(currentPipState);
  147. }
  148. /**
  149. * @param {Event} e
  150. * @private
  151. */
  152. onCastStatusChange_(e) {
  153. const isCasting = e['newStatus'];
  154. if (isCasting) {
  155. // Picture-in-picture is not applicable if we're casting
  156. if (this.isPipAllowed_()) {
  157. shaka.ui.Utils.setDisplay(this.pipButton_, false);
  158. }
  159. } else {
  160. if (this.isPipAllowed_()) {
  161. shaka.ui.Utils.setDisplay(this.pipButton_, true);
  162. }
  163. }
  164. }
  165. /**
  166. * Display the picture-in-picture button only when the content contains video.
  167. * If it's displaying in picture-in-picture mode, and an audio only content is
  168. * loaded, exit the picture-in-picture display.
  169. * @return {!Promise}
  170. * @private
  171. */
  172. async onTracksChanged_() {
  173. if (!this.isPipAllowed_()) {
  174. shaka.ui.Utils.setDisplay(this.pipButton_, false);
  175. } else if (this.player && this.player.isAudioOnly()) {
  176. shaka.ui.Utils.setDisplay(this.pipButton_, false);
  177. if (document.pictureInPictureElement) {
  178. await document.exitPictureInPicture();
  179. }
  180. } else {
  181. shaka.ui.Utils.setDisplay(this.pipButton_, true);
  182. }
  183. }
  184. };
  185. /**
  186. * @implements {shaka.extern.IUIElement.Factory}
  187. * @final
  188. */
  189. shaka.ui.PipButton.Factory = class {
  190. /** @override */
  191. create(rootElement, controls) {
  192. return new shaka.ui.PipButton(rootElement, controls);
  193. }
  194. };
  195. shaka.ui.OverflowMenu.registerElement(
  196. 'picture_in_picture', new shaka.ui.PipButton.Factory());
  197. shaka.ui.Controls.registerElement(
  198. 'picture_in_picture', new shaka.ui.PipButton.Factory());
  199. shaka.ui.ContextMenu.registerElement(
  200. 'picture_in_picture', new shaka.ui.PipButton.Factory());