fix: improve types, add consts for well-defined values, export const …

…objects from react media store.
cjpillsbury · Apr 5, 2024 · 874ed4e · 874ed4e
1 parent 4e18759
commit 874ed4e
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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|`<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