Source: ui/externs/ui.js

  1. /*! @license
  2. * Shaka Player
  3. * Copyright 2016 Google LLC
  4. * SPDX-License-Identifier: Apache-2.0
  5. */
  6. /**
  7. * @externs
  8. * @suppress {duplicate} To prevent compiler errors with the namespace
  9. * being declared both here and by goog.provide in the library.
  10. */
  11. /** @namespace */
  12. var shaka = {};
  13. /** @namespace */
  14. shaka.extern = {};
  15. /**
  16. * @typedef {{
  17. * base: string,
  18. * buffered: string,
  19. * played: string,
  20. * adBreaks: string
  21. * }}
  22. *
  23. * @property {string} base
  24. * The CSS background color applied to the base of the seek bar, on top of
  25. * which the buffer level and playback position are shown.
  26. * @property {string} buffered
  27. * The CSS background color applied to the portion of the seek bar showing
  28. * what has been buffered ahead of the playback position.
  29. * @property {string} played
  30. * The CSS background color applied to the portion of the seek bar showing
  31. * what has been played already.
  32. * @property {string} adBreaks
  33. * The CSS background color applied to the portion of the seek bar showing
  34. * when the ad breaks are scheduled to occur on the timeline.
  35. * @exportDoc
  36. */
  37. shaka.extern.UISeekBarColors;
  38. /**
  39. * @typedef {{
  40. * base: string,
  41. * level: string
  42. * }}
  43. *
  44. * @property {string} base
  45. * The CSS background color applied to the base of the volume bar, on top of
  46. * which the volume level is shown.
  47. * @property {string} level
  48. * The CSS background color applied to the portion of the volume bar showing
  49. * the volume level.
  50. * @exportDoc
  51. */
  52. shaka.extern.UIVolumeBarColors;
  53. /**
  54. * @description
  55. * The UI's configuration options.
  56. *
  57. * @typedef {{
  58. * controlPanelElements: !Array<string>,
  59. * overflowMenuButtons: !Array<string>,
  60. * contextMenuElements: !Array<string>,
  61. * statisticsList: !Array<string>,
  62. * adStatisticsList: !Array<string>,
  63. * playbackRates: !Array<number>,
  64. * fastForwardRates: !Array<number>,
  65. * rewindRates: !Array<number>,
  66. * addSeekBar: boolean,
  67. * addBigPlayButton: boolean,
  68. * customContextMenu: boolean,
  69. * castReceiverAppId: string,
  70. * castAndroidReceiverCompatible: boolean,
  71. * clearBufferOnQualityChange: boolean,
  72. * showUnbufferedStart: boolean,
  73. * seekBarColors: shaka.extern.UISeekBarColors,
  74. * volumeBarColors: shaka.extern.UIVolumeBarColors,
  75. * trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat,
  76. * textTrackLabelFormat: shaka.ui.Overlay.TrackLabelFormat,
  77. * fadeDelay: number,
  78. * closeMenusDelay: number,
  79. * doubleClickForFullscreen: boolean,
  80. * singleClickForPlayAndPause: boolean,
  81. * enableKeyboardPlaybackControls: boolean,
  82. * enableFullscreenOnRotation: boolean,
  83. * forceLandscapeOnFullscreen: boolean,
  84. * enableTooltips: boolean,
  85. * keyboardSeekDistance: number,
  86. * keyboardLargeSeekDistance: number,
  87. * fullScreenElement: HTMLElement,
  88. * preferDocumentPictureInPicture: boolean,
  89. * showAudioChannelCountVariants: boolean,
  90. * seekOnTaps: boolean,
  91. * tapSeekDistance: number,
  92. * refreshTickInSeconds: number,
  93. * displayInVrMode: boolean,
  94. * defaultVrProjectionMode: string,
  95. * setupMediaSession: boolean,
  96. * preferVideoFullScreenInVisionOS: boolean,
  97. * showAudioCodec: boolean,
  98. * showVideoCodec: boolean
  99. * }}
  100. *
  101. * @property {!Array<string>} controlPanelElements
  102. * The ordered list of control panel elements of the UI.
  103. * @property {!Array<string>} overflowMenuButtons
  104. * The ordered list of the overflow menu buttons.
  105. * @property {!Array<string>} contextMenuElements
  106. * The ordered list of buttons in the context menu.
  107. * @property {!Array<string>} statisticsList
  108. * The ordered list of statistics present in the statistics container.
  109. * @property {!Array<string>} adStatisticsList
  110. * The ordered list of ad statistics present in the ad statistics container.
  111. * @property {!Array<number>} playbackRates
  112. * The ordered list of rates for playback selection.
  113. * @property {!Array<number>} fastForwardRates
  114. * The ordered list of rates for fast forward selection.
  115. * @property {!Array<number>} rewindRates
  116. * The ordered list of rates for rewind selection.
  117. * @property {boolean} addSeekBar
  118. * Whether or not a seek bar should be part of the UI.
  119. * @property {boolean} addBigPlayButton
  120. * Whether or not a big play button in the center of the video
  121. * should be part of the UI.
  122. * @property {boolean} customContextMenu
  123. * Whether or not a custom context menu replaces the default.
  124. * @property {string} castReceiverAppId
  125. * Receiver app id to use for the Chromecast support.
  126. * @property {boolean} castAndroidReceiverCompatible
  127. * Indicates if the app is compatible with an Android Cast Receiver.
  128. * @property {boolean} clearBufferOnQualityChange
  129. * Only applicable if the resolution selection is part of the UI.
  130. * Whether buffer should be cleared when changing resolution
  131. * via UI. Clearing buffer would result in immediate change of quality,
  132. * but playback may flicker/stall for a sec as the content in new
  133. * resolution is being buffered. Not clearing the buffer will mean
  134. * we play the content in the previously selected resolution that we
  135. * already have buffered before switching to the new resolution.
  136. * @property {boolean} showUnbufferedStart
  137. * If true, color any unbuffered region at the start of the seek bar as
  138. * unbuffered (using the "base" color). If false, color any unbuffered region
  139. * at the start of the seek bar as played (using the "played" color).
  140. * <br>
  141. * A value of false matches the default behavior of Chrome's native controls
  142. * and Shaka Player v3.0+.
  143. * <br>
  144. * A value of true matches the default behavior of Shaka Player v2.5.
  145. * <br>
  146. * Defaults to false.
  147. * @property {shaka.extern.UISeekBarColors} seekBarColors
  148. * The CSS colors applied to the seek bar. This allows you to override the
  149. * colors used in the linear gradient constructed in JavaScript, since you
  150. * cannot easily do this in pure CSS.
  151. * @property {shaka.extern.UIVolumeBarColors} volumeBarColors
  152. * The CSS colors applied to the volume bar. This allows you to override the
  153. * colors used in the linear gradient constructed in JavaScript, since you
  154. * cannot do this in pure CSS.
  155. * @property {shaka.ui.Overlay.TrackLabelFormat} trackLabelFormat
  156. * An enum that determines what is shown in the labels for audio variant
  157. * selection.
  158. * LANGUAGE means that only the language of the item is shown.
  159. * ROLE means that only the role of the item is shown.
  160. * LANGUAGE_ROLE means both language and role are shown, or just language if
  161. * there is no role.
  162. * LABEL means the non-standard DASH "label" attribute or the standard DASH
  163. * "Label" element or the HLS "NAME" attribute are shown.
  164. * Defaults to LANGUAGE.
  165. * @property {shaka.ui.Overlay.TrackLabelFormat} textTrackLabelFormat
  166. * An enum that determines what is shown in the labels for text track
  167. * selection.
  168. * LANGUAGE means that only the language of the item is shown.
  169. * ROLE means that only the role of the item is shown.
  170. * LANGUAGE_ROLE means both language and role are shown, or just language if
  171. * there is no role.
  172. * LABEL means the non-standard DASH "label" attribute or the standard DASH
  173. * "Label" element or the HLS "NAME" attribute are shown.
  174. * Defaults to LANGUAGE.
  175. * @property {number} fadeDelay
  176. * The delay (in seconds) before fading out the controls once the user stops
  177. * interacting with them. We recommend setting this to 3 on your cast
  178. * receiver UI.
  179. * Defaults to 0.
  180. * @property {number} closeMenusDelay
  181. * The delay (in seconds) before close the opened menus when the UI is hidden.
  182. * Defaults to 2.
  183. * @property {boolean} doubleClickForFullscreen
  184. * Whether or not double-clicking on the UI should cause it to enter
  185. * fullscreen.
  186. * Defaults to true.
  187. * @property {boolean} singleClickForPlayAndPause
  188. * Whether or not clicking on the video should cause it to play or pause.
  189. * It does not work in VR mode.
  190. * Defaults to true.
  191. * @property {boolean} enableKeyboardPlaybackControls
  192. * Whether or not playback controls via keyboard is enabled, such as seek
  193. * forward, seek backward, jump to the beginning/end of the video.
  194. * Defaults to true.
  195. * @property {boolean} enableFullscreenOnRotation
  196. * Whether or not to enter/exit fullscreen mode when the screen is rotated.
  197. * Defaults to true.
  198. * @property {boolean} forceLandscapeOnFullscreen
  199. * Whether or not the device should rotate to landscape mode when the video
  200. * enters fullscreen. Note that this behavior is based on an experimental
  201. * browser API, and may not work on all platforms.
  202. * Defaults to true.
  203. * @property {boolean} enableTooltips
  204. * Whether or not buttons in the control panel display tooltips that contain
  205. * information about their function.
  206. * Defaults to false.
  207. * @property {number} keyboardSeekDistance
  208. * The time interval, in seconds, to seek when the user presses the left or
  209. * right keyboard keys when the video is selected. If less than or equal to 0,
  210. * no seeking will occur.
  211. * Defaults to 5 seconds.
  212. * @property {number} keyboardLargeSeekDistance
  213. * The time interval, in seconds, to seek when the user presses the page up or
  214. * page down keyboard keys when the video is selected. If less than or equal
  215. * to 0, no seeking will occur.
  216. * Defaults to 60 seconds.
  217. * @property {HTMLElement} fullScreenElement
  218. * DOM element on which fullscreen will be done.
  219. * Defaults to Shaka Player Container.
  220. * @property {boolean} preferDocumentPictureInPicture
  221. * Indicates whether the Document Picture in Picture API is preferred or the
  222. * Video Element Picture in Picture API is preferred.
  223. * Changing this property in mid-playback may produce undesired behavior if
  224. * you are already in PiP.
  225. * Defaults to true.
  226. * @property {boolean} showAudioChannelCountVariants
  227. * Indicates whether the combination of language and channel count should be
  228. * displayed or if, on the contrary, only the language should be displayed
  229. * regardless of the channel count.
  230. * Defaults to true.
  231. * @property {boolean} seekOnTaps
  232. * Indicates whether or not a fast-forward and rewind tap button that seeks
  233. * video some seconds.
  234. * Defaults to true if the browser <code>navigator.maxTouchPoints > 0</code>
  235. * is true.
  236. * @property {number} tapSeekDistance
  237. * The time interval, in seconds, to seek when the user presses the left or
  238. * right part of the video. If less than or equal to 0,
  239. * no seeking will occur.
  240. * Defaults to 10 seconds.
  241. * @property {number} refreshTickInSeconds
  242. * The time interval, in seconds, to update the seek bar.
  243. * Defaults to 0.125 seconds.
  244. * @property {boolean} displayInVrMode
  245. * If true, the content will be treated as VR.
  246. * If false, it will only be treated as VR if we automatically detect it as
  247. * such. (See the Enabling VR section in docs/tutorials/ui.md)
  248. * Defaults to false.
  249. * @property {string} defaultVrProjectionMode
  250. * Indicate the default VR projection mode.
  251. * Possible values: <code>'equirectangular'</code> or
  252. * <code>'halfequirectangular'</code> or <code>'cubemap'</code>.
  253. * Defaults to <code>'equirectangular'</code>.
  254. * @property {boolean} setupMediaSession
  255. * If true, MediaSession controls will be managed by the UI. It will also use
  256. * the ID3 APIC and TIT2 as image and title in Media Session, and ID3 APIC
  257. * will also be used to change video poster.
  258. * Defaults to true.
  259. * @property {boolean} preferVideoFullScreenInVisionOS
  260. * If true, we will use the fullscreen API of the video element itself if it
  261. * is available in Vision OS. This is useful to be able to access 3D
  262. * experiences that are only allowed with the fullscreen of the video element
  263. * itself.
  264. * Defaults to false.
  265. * @property {boolean} showAudioCodec
  266. * Show the audio codec if the language has more than one audio codec.
  267. * Defaults to true.
  268. * @property {boolean} showVideoCodec
  269. * Show the video codec if the resolution has more than one video codec.
  270. * Defaults to true.
  271. * @exportDoc
  272. */
  273. shaka.extern.UIConfiguration;
  274. /**
  275. * Interface for UI elements. UI elements should inherit from the concrete base
  276. * class shaka.ui.Element. The members defined in this extern's constructor are
  277. * all available from the base class, and are defined here to keep the compiler
  278. * from renaming them.
  279. *
  280. * @extends {shaka.util.IReleasable}
  281. * @interface
  282. * @exportDoc
  283. */
  284. shaka.extern.IUIElement = class {
  285. /**
  286. * @param {!HTMLElement} parent
  287. * @param {!shaka.ui.Controls} controls
  288. */
  289. constructor(parent, controls) {
  290. /**
  291. * @protected {HTMLElement}
  292. * @exportDoc
  293. */
  294. this.parent;
  295. /**
  296. * @protected {shaka.ui.Controls}
  297. * @exportDoc
  298. */
  299. this.controls;
  300. /**
  301. * @protected {shaka.util.EventManager}
  302. * @exportDoc
  303. */
  304. this.eventManager;
  305. /**
  306. * @protected {shaka.ui.Localization}
  307. * @exportDoc
  308. */
  309. this.localization;
  310. /**
  311. * @protected {shaka.Player}
  312. * @exportDoc
  313. */
  314. this.player;
  315. /**
  316. * @protected {HTMLMediaElement}
  317. * @exportDoc
  318. */
  319. this.video;
  320. /**
  321. * @protected {shaka.extern.IAdManager}
  322. * @exportDoc
  323. */
  324. this.adManager;
  325. /**
  326. * @protected {shaka.extern.IAd}
  327. * @exportDoc
  328. */
  329. this.ad;
  330. }
  331. /**
  332. * @override
  333. */
  334. release() {}
  335. };
  336. /**
  337. * A factory for creating a UI element.
  338. *
  339. * @interface
  340. * @exportDoc
  341. */
  342. shaka.extern.IUIElement.Factory = class {
  343. /**
  344. * @param {!HTMLElement} rootElement
  345. * @param {!shaka.ui.Controls} controls
  346. * @return {!shaka.extern.IUIElement}
  347. */
  348. create(rootElement, controls) {}
  349. };
  350. /**
  351. * Interface for UI range elements. UI range elements should inherit from the
  352. * concrete base class shaka.ui.RangeElement. The members defined in this
  353. * extern's constructor are all available from the base class, and are defined
  354. * here to keep the compiler from renaming them.
  355. *
  356. * @extends {shaka.extern.IUIElement}
  357. * @interface
  358. * @exportDoc
  359. */
  360. shaka.extern.IUIRangeElement = class {
  361. /**
  362. * @param {!HTMLElement} parent
  363. * @param {!shaka.ui.Controls} controls
  364. * @param {!Array<string>} containerClassNames
  365. * @param {!Array<string>} barClassNames
  366. */
  367. constructor(parent, controls, containerClassNames, barClassNames) {
  368. /**
  369. * @protected {!HTMLElement}
  370. * @exportDoc
  371. */
  372. this.container;
  373. /**
  374. * @protected {!HTMLInputElement}
  375. * @exportDoc
  376. */
  377. this.bar;
  378. }
  379. /**
  380. * @param {number} min
  381. * @param {number} max
  382. */
  383. setRange(min, max) {}
  384. /**
  385. * Called when user interaction begins.
  386. * To be overridden by subclasses.
  387. */
  388. onChangeStart() {}
  389. /**
  390. * Called when a new value is set by user interaction.
  391. * To be overridden by subclasses.
  392. */
  393. onChange() {}
  394. /**
  395. * Called when user interaction ends.
  396. * To be overridden by subclasses.
  397. */
  398. onChangeEnd() {}
  399. /** @return {number} */
  400. getValue() {}
  401. /** @param {number} value */
  402. setValue(value) {}
  403. /** @param {number} value */
  404. changeTo(value) {}
  405. };
  406. /**
  407. * Interface for UI settings menus. UI settings menus should inherit from the
  408. * concrete base class shaka.ui.SettingsMenu. The members defined in this
  409. * extern's constructor are all available from the base class, and are defined
  410. * here to keep the compiler from renaming them.
  411. *
  412. * @extends {shaka.extern.IUIElement}
  413. * @interface
  414. * @exportDoc
  415. */
  416. shaka.extern.IUISettingsMenu = class {
  417. /**
  418. * @param {!HTMLElement} parent
  419. * @param {!shaka.ui.Controls} controls
  420. * @param {string} iconText
  421. */
  422. constructor(parent, controls, iconText) {
  423. /**
  424. * @protected {!HTMLButtonElement}
  425. * @exportDoc
  426. */
  427. this.button;
  428. /**
  429. * @protected {!HTMLElement}
  430. * @exportDoc
  431. */
  432. this.icon;
  433. /**
  434. * @protected {!HTMLElement}
  435. * @exportDoc
  436. */
  437. this.nameSpan;
  438. /**
  439. * @protected {!HTMLElement}
  440. * @exportDoc
  441. */
  442. this.currentSelection;
  443. /**
  444. * @protected {!HTMLElement}
  445. * @exportDoc
  446. */
  447. this.menu;
  448. /**
  449. * @protected {!HTMLButtonElement}
  450. * @exportDoc
  451. */
  452. this.backButton;
  453. /**
  454. * @protected {!HTMLElement}
  455. * @exportDoc
  456. */
  457. this.backSpan;
  458. }
  459. };
  460. /**
  461. * Interface for SeekBars. SeekBars should inherit from the concrete base
  462. * class shaka.ui.Element. If you do not need to totally rebuild the
  463. * SeekBar, you should consider using shaka.ui.RangeElement or
  464. * shaka.ui.SeekBar as your base class.
  465. *
  466. * @extends {shaka.extern.IUIRangeElement}
  467. * @interface
  468. * @exportDoc
  469. */
  470. shaka.extern.IUISeekBar = class {
  471. /** @return {number} */
  472. getValue() {}
  473. /** @param {number} value */
  474. setValue(value) {}
  475. /**
  476. * Called by Controls on a timer to update the state of the seek bar.
  477. * Also called internally when the user interacts with the input element.
  478. */
  479. update() {}
  480. /** @return {boolean} */
  481. isShowing() {}
  482. };
  483. /**
  484. * A factory for creating a SeekBar element.
  485. *
  486. * @interface
  487. * @exportDoc
  488. */
  489. shaka.extern.IUISeekBar.Factory = class {
  490. /**
  491. * @param {!HTMLElement} rootElement
  492. * @param {!shaka.ui.Controls} controls
  493. * @return {!shaka.extern.IUISeekBar}
  494. */
  495. create(rootElement, controls) {}
  496. };
  497. /**
  498. * @interface
  499. * @exportDoc
  500. */
  501. shaka.extern.IUIPlayButton = class {
  502. /**
  503. * @param {!HTMLElement} parent
  504. * @param {!shaka.ui.Controls} controls
  505. */
  506. constructor(parent, controls) {
  507. /**
  508. * @protected {!HTMLButtonElement}
  509. * @exportDoc
  510. */
  511. this.button;
  512. }
  513. /** @return {boolean} */
  514. isPaused() {}
  515. /** @return {boolean} */
  516. isEnded() {}
  517. };