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 <code>'cubemap'</code>.
  252. * Defaults to <code>'equirectangular'</code>.
  253. * @property {boolean} setupMediaSession
  254. * If true, MediaSession controls will be managed by the UI. It will also use
  255. * the ID3 APIC and TIT2 as image and title in Media Session, and ID3 APIC
  256. * will also be used to change video poster.
  257. * Defaults to true.
  258. * @property {boolean} preferVideoFullScreenInVisionOS
  259. * If true, we will use the fullscreen API of the video element itself if it
  260. * is available in Vision OS. This is useful to be able to access 3D
  261. * experiences that are only allowed with the fullscreen of the video element
  262. * itself.
  263. * Defaults to false.
  264. * @property {boolean} showAudioCodec
  265. * Show the audio codec if the language has more than one audio codec.
  266. * Defaults to true.
  267. * @property {boolean} showVideoCodec
  268. * Show the video codec if the resolution has more than one video codec.
  269. * Defaults to true.
  270. * @exportDoc
  271. */
  272. shaka.extern.UIConfiguration;
  273. /**
  274. * Interface for UI elements. UI elements should inherit from the concrete base
  275. * class shaka.ui.Element. The members defined in this extern's constructor are
  276. * all available from the base class, and are defined here to keep the compiler
  277. * from renaming them.
  278. *
  279. * @extends {shaka.util.IReleasable}
  280. * @interface
  281. * @exportDoc
  282. */
  283. shaka.extern.IUIElement = class {
  284. /**
  285. * @param {!HTMLElement} parent
  286. * @param {!shaka.ui.Controls} controls
  287. */
  288. constructor(parent, controls) {
  289. /**
  290. * @protected {HTMLElement}
  291. * @exportDoc
  292. */
  293. this.parent;
  294. /**
  295. * @protected {shaka.ui.Controls}
  296. * @exportDoc
  297. */
  298. this.controls;
  299. /**
  300. * @protected {shaka.util.EventManager}
  301. * @exportDoc
  302. */
  303. this.eventManager;
  304. /**
  305. * @protected {shaka.ui.Localization}
  306. * @exportDoc
  307. */
  308. this.localization;
  309. /**
  310. * @protected {shaka.Player}
  311. * @exportDoc
  312. */
  313. this.player;
  314. /**
  315. * @protected {HTMLMediaElement}
  316. * @exportDoc
  317. */
  318. this.video;
  319. /**
  320. * @protected {shaka.extern.IAdManager}
  321. * @exportDoc
  322. */
  323. this.adManager;
  324. /**
  325. * @protected {shaka.extern.IAd}
  326. * @exportDoc
  327. */
  328. this.ad;
  329. }
  330. /**
  331. * @override
  332. */
  333. release() {}
  334. };
  335. /**
  336. * A factory for creating a UI element.
  337. *
  338. * @interface
  339. * @exportDoc
  340. */
  341. shaka.extern.IUIElement.Factory = class {
  342. /**
  343. * @param {!HTMLElement} rootElement
  344. * @param {!shaka.ui.Controls} controls
  345. * @return {!shaka.extern.IUIElement}
  346. */
  347. create(rootElement, controls) {}
  348. };
  349. /**
  350. * Interface for UI range elements. UI range elements should inherit from the
  351. * concrete base class shaka.ui.RangeElement. The members defined in this
  352. * extern's constructor are all available from the base class, and are defined
  353. * here to keep the compiler from renaming them.
  354. *
  355. * @extends {shaka.extern.IUIElement}
  356. * @interface
  357. * @exportDoc
  358. */
  359. shaka.extern.IUIRangeElement = class {
  360. /**
  361. * @param {!HTMLElement} parent
  362. * @param {!shaka.ui.Controls} controls
  363. * @param {!Array<string>} containerClassNames
  364. * @param {!Array<string>} barClassNames
  365. */
  366. constructor(parent, controls, containerClassNames, barClassNames) {
  367. /**
  368. * @protected {!HTMLElement}
  369. * @exportDoc
  370. */
  371. this.container;
  372. /**
  373. * @protected {!HTMLInputElement}
  374. * @exportDoc
  375. */
  376. this.bar;
  377. }
  378. /**
  379. * @param {number} min
  380. * @param {number} max
  381. */
  382. setRange(min, max) {}
  383. /**
  384. * Called when user interaction begins.
  385. * To be overridden by subclasses.
  386. */
  387. onChangeStart() {}
  388. /**
  389. * Called when a new value is set by user interaction.
  390. * To be overridden by subclasses.
  391. */
  392. onChange() {}
  393. /**
  394. * Called when user interaction ends.
  395. * To be overridden by subclasses.
  396. */
  397. onChangeEnd() {}
  398. /** @return {number} */
  399. getValue() {}
  400. /** @param {number} value */
  401. setValue(value) {}
  402. /** @param {number} value */
  403. changeTo(value) {}
  404. };
  405. /**
  406. * Interface for UI settings menus. UI settings menus should inherit from the
  407. * concrete base class shaka.ui.SettingsMenu. The members defined in this
  408. * extern's constructor are all available from the base class, and are defined
  409. * here to keep the compiler from renaming them.
  410. *
  411. * @extends {shaka.extern.IUIElement}
  412. * @interface
  413. * @exportDoc
  414. */
  415. shaka.extern.IUISettingsMenu = class {
  416. /**
  417. * @param {!HTMLElement} parent
  418. * @param {!shaka.ui.Controls} controls
  419. * @param {string} iconText
  420. */
  421. constructor(parent, controls, iconText) {
  422. /**
  423. * @protected {!HTMLButtonElement}
  424. * @exportDoc
  425. */
  426. this.button;
  427. /**
  428. * @protected {!HTMLElement}
  429. * @exportDoc
  430. */
  431. this.icon;
  432. /**
  433. * @protected {!HTMLElement}
  434. * @exportDoc
  435. */
  436. this.nameSpan;
  437. /**
  438. * @protected {!HTMLElement}
  439. * @exportDoc
  440. */
  441. this.currentSelection;
  442. /**
  443. * @protected {!HTMLElement}
  444. * @exportDoc
  445. */
  446. this.menu;
  447. /**
  448. * @protected {!HTMLButtonElement}
  449. * @exportDoc
  450. */
  451. this.backButton;
  452. /**
  453. * @protected {!HTMLElement}
  454. * @exportDoc
  455. */
  456. this.backSpan;
  457. }
  458. };
  459. /**
  460. * Interface for SeekBars. SeekBars should inherit from the concrete base
  461. * class shaka.ui.Element. If you do not need to totally rebuild the
  462. * SeekBar, you should consider using shaka.ui.RangeElement or
  463. * shaka.ui.SeekBar as your base class.
  464. *
  465. * @extends {shaka.extern.IUIRangeElement}
  466. * @interface
  467. * @exportDoc
  468. */
  469. shaka.extern.IUISeekBar = class {
  470. /** @return {number} */
  471. getValue() {}
  472. /** @param {number} value */
  473. setValue(value) {}
  474. /**
  475. * Called by Controls on a timer to update the state of the seek bar.
  476. * Also called internally when the user interacts with the input element.
  477. */
  478. update() {}
  479. /** @return {boolean} */
  480. isShowing() {}
  481. };
  482. /**
  483. * A factory for creating a SeekBar element.
  484. *
  485. * @interface
  486. * @exportDoc
  487. */
  488. shaka.extern.IUISeekBar.Factory = class {
  489. /**
  490. * @param {!HTMLElement} rootElement
  491. * @param {!shaka.ui.Controls} controls
  492. * @return {!shaka.extern.IUISeekBar}
  493. */
  494. create(rootElement, controls) {}
  495. };
  496. /**
  497. * @interface
  498. * @exportDoc
  499. */
  500. shaka.extern.IUIPlayButton = class {
  501. /**
  502. * @param {!HTMLElement} parent
  503. * @param {!shaka.ui.Controls} controls
  504. */
  505. constructor(parent, controls) {
  506. /**
  507. * @protected {!HTMLButtonElement}
  508. * @exportDoc
  509. */
  510. this.button;
  511. }
  512. /** @return {boolean} */
  513. isPaused() {}
  514. /** @return {boolean} */
  515. isEnded() {}
  516. };