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