diff --git a/src/js/constants.js b/src/js/constants.js index db5b5d84e..7d9eee15a 100644 --- a/src/js/constants.js +++ b/src/js/constants.js @@ -252,6 +252,21 @@ export const StreamTypes = { UNKNOWN: 'unknown', }; +/** + * @type {{ + * HIGH: 'high'; + * MEDIUM: 'medium'; + * LOW: 'low'; + * OFF: 'off'; + * }} + */ +export const VolumeLevels = { + HIGH: 'high', + MEDIUM: 'medium', + LOW: 'low', + OFF: 'off', +}; + /** * @type {{ * INLINE: 'inline'; diff --git a/src/js/media-store/request-map.js b/src/js/media-store/request-map.js index aacbc4591..c3dad30d1 100644 --- a/src/js/media-store/request-map.js +++ b/src/js/media-store/request-map.js @@ -37,7 +37,7 @@ import { getSubtitleTracks, toggleSubtitleTracks } from './util.js'; * } & { * mediaPreviewTime: number; * mediaPreviewImage: string; - * mediaPreviewCoords: [string,string,string,string] + * mediaPreviewCoords: [number,number,number,number] * }} MediaState */ @@ -101,8 +101,8 @@ export const requestMap = { : undefined; const url = new URL(cue.text, base); const previewCoordsStr = new URLSearchParams(url.hash).get('#xywh'); - mediaPreviewCoords = /** @type {[string, string, string, string]} */ ( - previewCoordsStr.split(',') + mediaPreviewCoords = /** @type {[number, number, number, number]} */ ( + previewCoordsStr.split(',').map(numStr => +numStr) ); mediaPreviewImage = url.href; } diff --git a/src/js/media-store/state-mediator.js b/src/js/media-store/state-mediator.js index 32c162c7c..ef4169671 100644 --- a/src/js/media-store/state-mediator.js +++ b/src/js/media-store/state-mediator.js @@ -24,11 +24,11 @@ import { import { getTextTracksList } from '../utils/captions.js'; /** - * @typedef {'on-demand'|'live'|'unknown'} StreamTypeValue + * @typedef {StreamTypes[keyof StreamTypes]} StreamTypeValue */ /** - * @typedef {'unavailable'|'unsupported'} AvailabilityTypeValue + * @typedef {AvailabilityStates[keyof AvailabilityStates]} AvailabilityTypeValue */ /** diff --git a/src/js/react/media-store.tsx b/src/js/react/media-store.tsx index 576575c5a..fb33386d2 100644 --- a/src/js/react/media-store.tsx +++ b/src/js/react/media-store.tsx @@ -9,7 +9,13 @@ import type { MediaStateOwner, MediaStore, } from '../media-store/media-store'; -import { MediaUIEvents, MediaUIProps } from '../constants'; +import { + MediaUIEvents, + MediaUIProps, + AvailabilityStates, + StreamTypes, + VolumeLevels, +} from '../constants'; /** * @description A lookup object for all well-defined action types that can be dispatched @@ -39,9 +45,14 @@ import { MediaUIEvents, MediaUIProps } from '../constants'; export { MediaState }; +export { AvailabilityStates, StreamTypes, VolumeLevels }; + const { REGISTER_MEDIA_STATE_RECEIVER, UNREGISTER_MEDIA_STATE_RECEIVER, + // NOTE: These generic state change requests are not currently supported (CJP) + MEDIA_SHOW_TEXT_TRACKS_REQUEST, + MEDIA_HIDE_TEXT_TRACKS_REQUEST, ...StateChangeRequests } = MediaUIEvents; @@ -212,9 +223,9 @@ export const useMediaRef = () => { /** * @description This is the primary way to associate a component with the `MediaStore` provided * by {@link MediaProvider|``} to be used as the target for entering fullscreen. - * To associate the media component, use `useMediaRef` just + * To associate the media component, use `useMediaFullscreenRef` just * like you would {@link https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref|useRef}. - * Unlike `useRef`, however, "under the hood" `useMediaRef` is actually a + * Unlike `useRef`, however, "under the hood" `useMediaFullscreenRef` is actually a * {@link https://react.dev/reference/react-dom/components/common#ref-callback|ref callback} function. * * @example