Source: ui/ui.js

  1. /*! @license
  2. * Shaka Player
  3. * Copyright 2016 Google LLC
  4. * SPDX-License-Identifier: Apache-2.0
  5. */
  6. goog.provide('shaka.ui.Overlay');
  7. goog.provide('shaka.ui.Overlay.FailReasonCode');
  8. goog.provide('shaka.ui.Overlay.TrackLabelFormat');
  9. goog.require('goog.asserts');
  10. goog.require('shaka.Player');
  11. goog.require('shaka.log');
  12. goog.require('shaka.polyfill');
  13. goog.require('shaka.ui.Controls');
  14. goog.require('shaka.util.ConfigUtils');
  15. goog.require('shaka.util.Dom');
  16. goog.require('shaka.util.FakeEvent');
  17. goog.require('shaka.util.IDestroyable');
  18. goog.require('shaka.util.Platform');
  19. /**
  20. * @implements {shaka.util.IDestroyable}
  21. * @export
  22. */
  23. shaka.ui.Overlay = class {
  24. /**
  25. * @param {!shaka.Player} player
  26. * @param {!HTMLElement} videoContainer
  27. * @param {!HTMLMediaElement} video
  28. * @param {?HTMLCanvasElement=} vrCanvas
  29. */
  30. constructor(player, videoContainer, video, vrCanvas = null) {
  31. /** @private {shaka.Player} */
  32. this.player_ = player;
  33. /** @private {HTMLElement} */
  34. this.videoContainer_ = videoContainer;
  35. /** @private {!shaka.extern.UIConfiguration} */
  36. this.config_ = this.defaultConfig_();
  37. // Make sure this container is discoverable and that the UI can be reached
  38. // through it.
  39. videoContainer['dataset']['shakaPlayerContainer'] = '';
  40. videoContainer['ui'] = this;
  41. // Tag the container for mobile platforms, to allow different styles.
  42. if (this.isMobile()) {
  43. videoContainer.classList.add('shaka-mobile');
  44. }
  45. /** @private {shaka.ui.Controls} */
  46. this.controls_ = new shaka.ui.Controls(
  47. player, videoContainer, video, vrCanvas, this.config_);
  48. // Run the initial setup so that no configure() call is required for default
  49. // settings.
  50. this.configure({});
  51. // If the browser's native controls are disabled, use UI TextDisplayer.
  52. if (!video.controls) {
  53. player.setVideoContainer(videoContainer);
  54. }
  55. videoContainer['ui'] = this;
  56. video['ui'] = this;
  57. }
  58. /**
  59. * @override
  60. * @export
  61. */
  62. async destroy() {
  63. if (this.controls_) {
  64. await this.controls_.destroy();
  65. }
  66. this.controls_ = null;
  67. if (this.player_) {
  68. await this.player_.destroy();
  69. }
  70. this.player_ = null;
  71. }
  72. /**
  73. * Detects if this is a mobile platform, in case you want to choose a
  74. * different UI configuration on mobile devices.
  75. *
  76. * @return {boolean}
  77. * @export
  78. */
  79. isMobile() {
  80. return shaka.util.Platform.isMobile();
  81. }
  82. /**
  83. * @return {!shaka.extern.UIConfiguration}
  84. * @export
  85. */
  86. getConfiguration() {
  87. const ret = this.defaultConfig_();
  88. shaka.util.ConfigUtils.mergeConfigObjects(
  89. ret, this.config_, this.defaultConfig_(),
  90. /* overrides= */ {}, /* path= */ '');
  91. return ret;
  92. }
  93. /**
  94. * @param {string|!Object} config This should either be a field name or an
  95. * object following the form of {@link shaka.extern.UIConfiguration}, where
  96. * you may omit any field you do not wish to change.
  97. * @param {*=} value This should be provided if the previous parameter
  98. * was a string field name.
  99. * @export
  100. */
  101. configure(config, value) {
  102. goog.asserts.assert(typeof(config) == 'object' || arguments.length == 2,
  103. 'String configs should have values!');
  104. // ('fieldName', value) format
  105. if (arguments.length == 2 && typeof(config) == 'string') {
  106. config = shaka.util.ConfigUtils.convertToConfigObject(config, value);
  107. }
  108. goog.asserts.assert(typeof(config) == 'object', 'Should be an object!');
  109. shaka.util.ConfigUtils.mergeConfigObjects(
  110. this.config_, config, this.defaultConfig_(),
  111. /* overrides= */ {}, /* path= */ '');
  112. // If a cast receiver app id has been given, add a cast button to the UI
  113. if (this.config_.castReceiverAppId &&
  114. !this.config_.overflowMenuButtons.includes('cast')) {
  115. this.config_.overflowMenuButtons.push('cast');
  116. }
  117. goog.asserts.assert(this.player_ != null, 'Should have a player!');
  118. this.controls_.configure(this.config_);
  119. this.controls_.dispatchEvent(new shaka.util.FakeEvent('uiupdated'));
  120. }
  121. /**
  122. * @return {shaka.ui.Controls}
  123. * @export
  124. */
  125. getControls() {
  126. return this.controls_;
  127. }
  128. /**
  129. * Enable or disable the custom controls.
  130. *
  131. * @param {boolean} enabled
  132. * @export
  133. */
  134. setEnabled(enabled) {
  135. this.controls_.setEnabledShakaControls(enabled);
  136. }
  137. /**
  138. * @return {!shaka.extern.UIConfiguration}
  139. * @private
  140. */
  141. defaultConfig_() {
  142. const config = {
  143. controlPanelElements: [
  144. 'play_pause',
  145. 'time_and_duration',
  146. 'spacer',
  147. 'mute',
  148. 'volume',
  149. 'fullscreen',
  150. 'overflow_menu',
  151. ],
  152. overflowMenuButtons: [
  153. 'captions',
  154. 'quality',
  155. 'language',
  156. 'chapter',
  157. 'picture_in_picture',
  158. 'cast',
  159. 'playback_rate',
  160. 'recenter_vr',
  161. 'toggle_stereoscopic',
  162. 'save_video_frame',
  163. ],
  164. statisticsList: [
  165. 'width',
  166. 'height',
  167. 'corruptedFrames',
  168. 'decodedFrames',
  169. 'droppedFrames',
  170. 'drmTimeSeconds',
  171. 'licenseTime',
  172. 'liveLatency',
  173. 'loadLatency',
  174. 'bufferingTime',
  175. 'manifestTimeSeconds',
  176. 'estimatedBandwidth',
  177. 'streamBandwidth',
  178. 'maxSegmentDuration',
  179. 'pauseTime',
  180. 'playTime',
  181. 'completionPercent',
  182. 'manifestSizeBytes',
  183. 'bytesDownloaded',
  184. 'nonFatalErrorCount',
  185. 'manifestPeriodCount',
  186. 'manifestGapCount',
  187. ],
  188. adStatisticsList: [
  189. 'loadTimes',
  190. 'averageLoadTime',
  191. 'started',
  192. 'playedCompletely',
  193. 'skipped',
  194. 'errors',
  195. ],
  196. contextMenuElements: [
  197. 'loop',
  198. 'picture_in_picture',
  199. 'save_video_frame',
  200. 'statistics',
  201. 'ad_statistics',
  202. ],
  203. playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
  204. fastForwardRates: [2, 4, 8, 1],
  205. rewindRates: [-1, -2, -4, -8],
  206. addSeekBar: true,
  207. addBigPlayButton: false,
  208. customContextMenu: false,
  209. castReceiverAppId: '',
  210. castAndroidReceiverCompatible: false,
  211. clearBufferOnQualityChange: true,
  212. showUnbufferedStart: false,
  213. seekBarColors: {
  214. base: 'rgba(255, 255, 255, 0.3)',
  215. buffered: 'rgba(255, 255, 255, 0.54)',
  216. played: 'rgb(255, 255, 255)',
  217. adBreaks: 'rgb(255, 204, 0)',
  218. },
  219. volumeBarColors: {
  220. base: 'rgba(255, 255, 255, 0.54)',
  221. level: 'rgb(255, 255, 255)',
  222. },
  223. trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
  224. textTrackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
  225. fadeDelay: 0,
  226. doubleClickForFullscreen: true,
  227. singleClickForPlayAndPause: true,
  228. enableKeyboardPlaybackControls: true,
  229. enableFullscreenOnRotation: true,
  230. forceLandscapeOnFullscreen: true,
  231. enableTooltips: false,
  232. keyboardSeekDistance: 5,
  233. keyboardLargeSeekDistance: 60,
  234. fullScreenElement: this.videoContainer_,
  235. preferDocumentPictureInPicture: true,
  236. showAudioChannelCountVariants: true,
  237. seekOnTaps: true,
  238. tapSeekDistance: 10,
  239. refreshTickInSeconds: 0.125,
  240. displayInVrMode: false,
  241. defaultVrProjectionMode: 'equirectangular',
  242. setupMediaSession: true,
  243. };
  244. // eslint-disable-next-line no-restricted-syntax
  245. if ('remote' in HTMLMediaElement.prototype) {
  246. config.overflowMenuButtons.push('remote');
  247. } else if (window.WebKitPlaybackTargetAvailabilityEvent) {
  248. config.overflowMenuButtons.push('airplay');
  249. }
  250. // On mobile, by default, hide the volume slide and the small play/pause
  251. // button and show the big play/pause button in the center.
  252. // This is in line with default styles in Chrome.
  253. if (this.isMobile()) {
  254. config.addBigPlayButton = true;
  255. config.controlPanelElements = config.controlPanelElements.filter(
  256. (name) => name != 'play_pause' && name != 'volume');
  257. }
  258. return config;
  259. }
  260. /**
  261. * @private
  262. */
  263. static async scanPageForShakaElements_() {
  264. // Install built-in polyfills to patch browser incompatibilities.
  265. shaka.polyfill.installAll();
  266. // Check to see if the browser supports the basic APIs Shaka needs.
  267. if (!shaka.Player.isBrowserSupported()) {
  268. shaka.log.error('Shaka Player does not support this browser. ' +
  269. 'Please see https://tinyurl.com/y7s4j9tr for the list of ' +
  270. 'supported browsers.');
  271. // After scanning the page for elements, fire a special "loaded" event for
  272. // when the load fails. This will allow the page to react to the failure.
  273. shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-load-failed',
  274. shaka.ui.Overlay.FailReasonCode.NO_BROWSER_SUPPORT);
  275. return;
  276. }
  277. // Look for elements marked 'data-shaka-player-container'
  278. // on the page. These will be used to create our default
  279. // UI.
  280. const containers = document.querySelectorAll(
  281. '[data-shaka-player-container]');
  282. // Look for elements marked 'data-shaka-player'. They will
  283. // either be used in our default UI or with native browser
  284. // controls.
  285. const videos = document.querySelectorAll(
  286. '[data-shaka-player]');
  287. // Look for elements marked 'data-shaka-player-canvas'
  288. // on the page. These will be used to create our default
  289. // UI.
  290. const canvases = document.querySelectorAll(
  291. '[data-shaka-player-canvas]');
  292. // Look for elements marked 'data-shaka-player-vr-canvas'
  293. // on the page. These will be used to create our default
  294. // UI.
  295. const vrCanvases = document.querySelectorAll(
  296. '[data-shaka-player-vr-canvas]');
  297. if (!videos.length && !containers.length) {
  298. // No elements have been tagged with shaka attributes.
  299. } else if (videos.length && !containers.length) {
  300. // Just the video elements were provided.
  301. for (const video of videos) {
  302. // If the app has already manually created a UI for this element,
  303. // don't create another one.
  304. if (video['ui']) {
  305. continue;
  306. }
  307. goog.asserts.assert(video.tagName.toLowerCase() == 'video',
  308. 'Should be a video element!');
  309. const container = document.createElement('div');
  310. const videoParent = video.parentElement;
  311. videoParent.replaceChild(container, video);
  312. container.appendChild(video);
  313. const {lcevcCanvas, vrCanvas} =
  314. shaka.ui.Overlay.findOrMakeSpecialCanvases_(
  315. container, canvases, vrCanvases);
  316. shaka.ui.Overlay.setupUIandAutoLoad_(
  317. container, video, lcevcCanvas, vrCanvas);
  318. }
  319. } else {
  320. for (const container of containers) {
  321. // If the app has already manually created a UI for this element,
  322. // don't create another one.
  323. if (container['ui']) {
  324. continue;
  325. }
  326. goog.asserts.assert(container.tagName.toLowerCase() == 'div',
  327. 'Container should be a div!');
  328. let currentVideo = null;
  329. for (const video of videos) {
  330. goog.asserts.assert(video.tagName.toLowerCase() == 'video',
  331. 'Should be a video element!');
  332. if (video.parentElement == container) {
  333. currentVideo = video;
  334. break;
  335. }
  336. }
  337. if (!currentVideo) {
  338. currentVideo = document.createElement('video');
  339. currentVideo.setAttribute('playsinline', '');
  340. container.appendChild(currentVideo);
  341. }
  342. const {lcevcCanvas, vrCanvas} =
  343. shaka.ui.Overlay.findOrMakeSpecialCanvases_(
  344. container, canvases, vrCanvases);
  345. try {
  346. // eslint-disable-next-line no-await-in-loop
  347. await shaka.ui.Overlay.setupUIandAutoLoad_(
  348. container, currentVideo, lcevcCanvas, vrCanvas);
  349. } catch (e) {
  350. // This can fail if, for example, not every player file has loaded.
  351. // Ad-block is a likely cause for this sort of failure.
  352. shaka.log.error('Error setting up Shaka Player', e);
  353. shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-load-failed',
  354. shaka.ui.Overlay.FailReasonCode.PLAYER_FAILED_TO_LOAD);
  355. return;
  356. }
  357. }
  358. }
  359. // After scanning the page for elements, fire the "loaded" event. This will
  360. // let apps know they can use the UI library programmatically now, even if
  361. // they didn't have any Shaka-related elements declared in their HTML.
  362. shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-loaded');
  363. }
  364. /**
  365. * @param {string} eventName
  366. * @param {shaka.ui.Overlay.FailReasonCode=} reasonCode
  367. * @private
  368. */
  369. static dispatchLoadedEvent_(eventName, reasonCode) {
  370. let detail = null;
  371. if (reasonCode != undefined) {
  372. detail = {
  373. 'reasonCode': reasonCode,
  374. };
  375. }
  376. const uiLoadedEvent = new CustomEvent(eventName, {detail});
  377. document.dispatchEvent(uiLoadedEvent);
  378. }
  379. /**
  380. * @param {!Element} container
  381. * @param {!Element} video
  382. * @param {!Element} lcevcCanvas
  383. * @param {!Element} vrCanvas
  384. * @private
  385. */
  386. static async setupUIandAutoLoad_(container, video, lcevcCanvas, vrCanvas) {
  387. // Create the UI
  388. const player = new shaka.Player();
  389. const ui = new shaka.ui.Overlay(player,
  390. shaka.util.Dom.asHTMLElement(container),
  391. shaka.util.Dom.asHTMLMediaElement(video),
  392. shaka.util.Dom.asHTMLCanvasElement(vrCanvas));
  393. // Attach Canvas used for LCEVC Decoding
  394. player.attachCanvas(/** @type {HTMLCanvasElement} */(lcevcCanvas));
  395. // Get and configure cast app id.
  396. let castAppId = '';
  397. // Get and configure cast Android Receiver Compatibility
  398. let castAndroidReceiverCompatible = false;
  399. // Cast receiver id can be specified on either container or video.
  400. // It should not be provided on both. If it was, we will use the last
  401. // one we saw.
  402. if (container['dataset'] &&
  403. container['dataset']['shakaPlayerCastReceiverId']) {
  404. castAppId = container['dataset']['shakaPlayerCastReceiverId'];
  405. castAndroidReceiverCompatible =
  406. container['dataset']['shakaPlayerCastAndroidReceiverCompatible'] ===
  407. 'true';
  408. } else if (video['dataset'] &&
  409. video['dataset']['shakaPlayerCastReceiverId']) {
  410. castAppId = video['dataset']['shakaPlayerCastReceiverId'];
  411. castAndroidReceiverCompatible =
  412. video['dataset']['shakaPlayerCastAndroidReceiverCompatible'] === 'true';
  413. }
  414. if (castAppId.length) {
  415. ui.configure({castReceiverAppId: castAppId,
  416. castAndroidReceiverCompatible: castAndroidReceiverCompatible});
  417. }
  418. if (shaka.util.Dom.asHTMLMediaElement(video).controls) {
  419. ui.getControls().setEnabledNativeControls(true);
  420. }
  421. // Get the source and load it
  422. // Source can be specified either on the video element:
  423. // <video src='foo.m2u8'></video>
  424. // or as a separate element inside the video element:
  425. // <video>
  426. // <source src='foo.m2u8'/>
  427. // </video>
  428. // It should not be specified on both.
  429. const src = video.getAttribute('src');
  430. if (src) {
  431. const sourceElem = document.createElement('source');
  432. sourceElem.setAttribute('src', src);
  433. video.appendChild(sourceElem);
  434. video.removeAttribute('src');
  435. }
  436. for (const elem of video.querySelectorAll('source')) {
  437. try { // eslint-disable-next-line no-await-in-loop
  438. await ui.getControls().getPlayer().load(elem.getAttribute('src'));
  439. break;
  440. } catch (e) {
  441. shaka.log.error('Error auto-loading asset', e);
  442. }
  443. }
  444. await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
  445. }
  446. /**
  447. * @param {!Element} container
  448. * @param {!NodeList.<!Element>} canvases
  449. * @param {!NodeList.<!Element>} vrCanvases
  450. * @return {{lcevcCanvas: !Element, vrCanvas: !Element}}
  451. * @private
  452. */
  453. static findOrMakeSpecialCanvases_(container, canvases, vrCanvases) {
  454. let lcevcCanvas = null;
  455. for (const canvas of canvases) {
  456. goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
  457. 'Should be a canvas element!');
  458. if (canvas.parentElement == container) {
  459. lcevcCanvas = canvas;
  460. break;
  461. }
  462. }
  463. if (!lcevcCanvas) {
  464. lcevcCanvas = document.createElement('canvas');
  465. lcevcCanvas.classList.add('shaka-canvas-container');
  466. container.appendChild(lcevcCanvas);
  467. }
  468. let vrCanvas = null;
  469. for (const canvas of vrCanvases) {
  470. goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
  471. 'Should be a canvas element!');
  472. if (canvas.parentElement == container) {
  473. vrCanvas = canvas;
  474. break;
  475. }
  476. }
  477. if (!vrCanvas) {
  478. vrCanvas = document.createElement('canvas');
  479. vrCanvas.classList.add('shaka-vr-canvas-container');
  480. container.appendChild(vrCanvas);
  481. }
  482. return {
  483. lcevcCanvas,
  484. vrCanvas,
  485. };
  486. }
  487. };
  488. /**
  489. * Describes what information should show up in labels for selecting audio
  490. * variants and text tracks.
  491. *
  492. * @enum {number}
  493. * @export
  494. */
  495. shaka.ui.Overlay.TrackLabelFormat = {
  496. 'LANGUAGE': 0,
  497. 'ROLE': 1,
  498. 'LANGUAGE_ROLE': 2,
  499. 'LABEL': 3,
  500. };
  501. /**
  502. * Describes the possible reasons that the UI might fail to load.
  503. *
  504. * @enum {number}
  505. * @export
  506. */
  507. shaka.ui.Overlay.FailReasonCode = {
  508. 'NO_BROWSER_SUPPORT': 0,
  509. 'PLAYER_FAILED_TO_LOAD': 1,
  510. };
  511. if (document.readyState == 'complete') {
  512. // Don't fire this event synchronously. In a compiled bundle, the "shaka"
  513. // namespace might not be exported to the window until after this point.
  514. (async () => {
  515. await Promise.resolve();
  516. shaka.ui.Overlay.scanPageForShakaElements_();
  517. })();
  518. } else {
  519. window.addEventListener('load', shaka.ui.Overlay.scanPageForShakaElements_);
  520. }