@clockworkdog/cogs-client-react 3.0.0-alpha.14 → 3.0.0-alpha.16

package/dist/components/MediaSurface.js

@@ -11,7 +11,7 @@ export function MediaSurface({ cogsConnection }) {
     useEffect(() => {
         async function updateAudioOutputs() {
             const audioOutputs = {};
-            if (!navigator.mediaDevices) {
+            if (!navigator?.mediaDevices) {
                 // `navigator.mediaDevices` is undefined on COGS AV <= 4.5 because of secure origin permissions
                 return;
             }
@@ -22,8 +22,8 @@ export function MediaSurface({ cogsConnection }) {
             });
         }
         updateAudioOutputs();
-        navigator.mediaDevices.addEventListener('devicechange', updateAudioOutputs);
-        return () => navigator.mediaDevices.removeEventListener('devicechange', updateAudioOutputs);
+        navigator?.mediaDevices?.addEventListener('devicechange', updateAudioOutputs);
+        return () => navigator?.mediaDevices?.removeEventListener('devicechange', updateAudioOutputs);
     }, []);
     // Create and attach new surface manager
     useEffect(() => {

package/dist/hooks/useIsAudioPlaying.d.ts

@@ -1,2 +1 @@
-import { CogsAudioPlayer } from '@clockworkdog/cogs-client';
-export default function useIsAudioPlaying(customAudioPlayer?: CogsAudioPlayer | null): boolean;
+export declare function useIsAudioPlaying(): boolean;

package/dist/hooks/useIsAudioPlaying.js

@@ -1,12 +1,21 @@
 import { useEffect, useState } from 'react';
-import { useAudioPlayer } from '../providers/CogsConnectionProvider';
-export default function useIsAudioPlaying(customAudioPlayer) {
+import { useCogsConnection } from '../providers/CogsConnectionProvider';
+import { getStateAtTime } from '@clockworkdog/cogs-client';
+export function useIsAudioPlaying() {
     const [isAudioPlaying, setAudioPlaying] = useState(false);
-    const audioPlayer = useAudioPlayer(customAudioPlayer ?? undefined);
+    const cogsConnection = useCogsConnection();
+    // Listen to messages
     useEffect(() => {
-        const listener = (event) => setAudioPlaying(event.detail.isPlaying);
-        audioPlayer?.addEventListener('state', listener);
-        return () => audioPlayer?.removeEventListener('state', listener);
-    }, [audioPlayer]);
+        function handleMessages({ message }) {
+            if (message.type === 'media_state' && message.media_strategy === 'state') {
+                const audioPlaybackRates = Object.values(message.state)
+                    .filter((clip) => clip.type === 'audio')
+                    .map((clip) => getStateAtTime(clip, Date.now())?.rate);
+                setAudioPlaying(audioPlaybackRates.some((rate) => rate !== 0));
+            }
+        }
+        cogsConnection.addEventListener('message', handleMessages);
+        return () => cogsConnection.removeEventListener('message', handleMessages);
+    }, [cogsConnection]);
     return isAudioPlaying;
 }

package/dist/hooks/useIsVideoPlaying.d.ts

@@ -0,0 +1 @@
+export declare function useIsVideoPlaying(): boolean;

package/dist/hooks/useIsVideoPlaying.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { getStateAtTime } from '@clockworkdog/cogs-client';
+import { useCogsConnection } from '..';
+export function useIsVideoPlaying() {
+    const [isVideoPlaying, setVideoPlaying] = useState(false);
+    const cogsConnection = useCogsConnection();
+    // Listen to messages
+    useEffect(() => {
+        function handleMessages({ message }) {
+            if (message.type === 'media_state' && message.media_strategy === 'state') {
+                const videoPlaybackRates = Object.values(message.state)
+                    .filter((clip) => clip.type === 'video')
+                    .map((clip) => getStateAtTime(clip, Date.now())?.rate);
+                setVideoPlaying(videoPlaybackRates.some((rate) => rate !== 0));
+            }
+        }
+        cogsConnection.addEventListener('message', handleMessages);
+        return () => cogsConnection.removeEventListener('message', handleMessages);
+    }, [cogsConnection]);
+    return isVideoPlaying;
+}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as CogsConnectionProvider, useCogsConnection, useAudioPlayer, useVideoPlayer } from './providers/CogsConnectionProvider';
+export { default as CogsConnectionProvider, useCogsConnection } from './providers/CogsConnectionProvider';
 export { MediaSurface, MediaSurfaceProps } from './components/MediaSurface';
 export { default as useIsConnected } from './hooks/useIsConnected';
 export { default as useCogsConfig } from './hooks/useCogsConfig';
@@ -12,11 +12,8 @@ export { default as usePreloadedUrl } from './hooks/usePreloadedUrl';
 export { default as useShowPhase } from './hooks/useShowPhase';
 export { default as useWhenShowReset } from './hooks/useWhenShowReset';
 export * from './utils/types';
-export { default as useAudioClips } from './hooks/useAudioClips';
-export { default as useIsAudioPlaying } from './hooks/useIsAudioPlaying';
-export { default as VideoContainer } from './components/VideoContainer';
+export { useIsAudioPlaying } from './hooks/useIsAudioPlaying';
+export { useIsVideoPlaying } from './hooks/useIsVideoPlaying';
 export { default as useHint } from './hooks/useHint';
 export { default as Hint } from './components/Hint';
 export { default as Timer } from './components/Timer';
-export { default as useImages, Image } from './hooks/useImages';
-export { default as Images } from './components/Images';

package/dist/index.js

@@ -1,5 +1,5 @@
 // Utilities
-export { default as CogsConnectionProvider, useCogsConnection, useAudioPlayer, useVideoPlayer } from './providers/CogsConnectionProvider';
+export { default as CogsConnectionProvider, useCogsConnection } from './providers/CogsConnectionProvider';
 export { MediaSurface } from './components/MediaSurface';
 export { default as useIsConnected } from './hooks/useIsConnected';
 export { default as useCogsConfig } from './hooks/useCogsConfig';
@@ -13,16 +13,10 @@ export { default as usePreloadedUrl } from './hooks/usePreloadedUrl';
 export { default as useShowPhase } from './hooks/useShowPhase';
 export { default as useWhenShowReset } from './hooks/useWhenShowReset';
 export * from './utils/types';
-// Audio
-export { default as useAudioClips } from './hooks/useAudioClips';
-export { default as useIsAudioPlaying } from './hooks/useIsAudioPlaying';
-// Video
-export { default as VideoContainer } from './components/VideoContainer';
+export { useIsAudioPlaying } from './hooks/useIsAudioPlaying';
+export { useIsVideoPlaying } from './hooks/useIsVideoPlaying';
 // Hints
 export { default as useHint } from './hooks/useHint';
 export { default as Hint } from './components/Hint';
 // Timer
 export { default as Timer } from './components/Timer';
-// Images
-export { default as useImages } from './hooks/useImages';
-export { default as Images } from './components/Images';

package/dist/providers/CogsConnectionProvider.d.ts

@@ -1,14 +1,7 @@
-import { CogsAudioPlayer, CogsConnection, CogsPluginManifest, CogsVideoPlayer, ManifestTypes } from '@clockworkdog/cogs-client';
+import { CogsConnection, CogsPluginManifest, ManifestTypes } from '@clockworkdog/cogs-client';
 import React, { ReactNode } from 'react';
 /**
  * Create a persistent connection to COGS which can be accessed with `useCogsConnection()`
- * @param audioPlayer Creates a `CogsAudioPlayer` than can be accessed with `useAudioPlayer()`
- *
- * Note: If unset, the audio player will remain active.
- *
- * @param videoPlayer Creates a `CogsVideoPlayer` than can be accessed with `useVideoPlayer()`
- *
- * Note: If unset, the video player will remain active.
  *
  * *Example:*
  *
@@ -23,7 +16,7 @@ import React, { ReactNode } from 'react';
  * }
  *
  * function App() {
- *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
+ *   return <CogsConnectionProvider manifest={manifest}>
  *     <MyComponent />
  *   <CogsConnectionProvider/>;
  * }
@@ -42,7 +35,7 @@ import React, { ReactNode } from 'react';
  * }
  *
  * function App() {
- *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
+ *   return <CogsConnectionProvider manifest={manifest}>
  *     <MyComponent />
  *   <CogsConnectionProvider/>;
  * }
@@ -52,13 +45,11 @@ export default function CogsConnectionProvider<Manifest extends CogsPluginManife
     [key: string]: unknown;
 } = {
     [key: string]: unknown;
-}>({ manifest, hostname, port, children, audioPlayer, videoPlayer, initialClientState, initialDataStoreData, }: {
+}>({ manifest, hostname, port, children, initialClientState, initialDataStoreData, }: {
     manifest: Manifest;
     hostname?: string;
     port?: number;
     children: React.ReactNode;
-    audioPlayer?: boolean;
-    videoPlayer?: boolean;
     initialClientState?: Partial<ManifestTypes.StateAsObject<Manifest, {
         writableFromClient: true;
     }>>;
@@ -68,11 +59,3 @@ export default function CogsConnectionProvider<Manifest extends CogsPluginManife
  * Get the connection from `<CogsConnectionProvider>`
  */
 export declare function useCogsConnection<Manifest extends CogsPluginManifest>(customConnection?: CogsConnection<Manifest>): CogsConnection<Manifest>;
-/**
- * Get the audio player from `<CogsConnectionProvider audioPlayer>`
- */
-export declare function useAudioPlayer<Manifest extends CogsPluginManifest>(customAudioPlayer?: CogsAudioPlayer): CogsAudioPlayer | null;
-/**
- * Get the video player from `<CogsConnectionProvider videoPlayer>`
- */
-export declare function useVideoPlayer<Manifest extends CogsPluginManifest>(customVideoPlayer?: CogsVideoPlayer): CogsVideoPlayer | null;

package/dist/providers/CogsConnectionProvider.js

@@ -1,4 +1,4 @@
-import { CogsAudioPlayer, CogsConnection, CogsVideoPlayer } from '@clockworkdog/cogs-client';
+import { CogsConnection } from '@clockworkdog/cogs-client';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const CogsConnectionContext = React.createContext({
@@ -8,28 +8,9 @@ const CogsConnectionContext = React.createContext({
         }
         return customConnection;
     },
-    useAudioPlayer: (customAudioPlayer) => {
-        if (!customAudioPlayer) {
-            throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
-        }
-        return customAudioPlayer;
-    },
-    useVideoPlayer: (customVideoPlayer) => {
-        if (!customVideoPlayer) {
-            throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
-        }
-        return customVideoPlayer;
-    },
 });
 /**
  * Create a persistent connection to COGS which can be accessed with `useCogsConnection()`
- * @param audioPlayer Creates a `CogsAudioPlayer` than can be accessed with `useAudioPlayer()`
- *
- * Note: If unset, the audio player will remain active.
- *
- * @param videoPlayer Creates a `CogsVideoPlayer` than can be accessed with `useVideoPlayer()`
- *
- * Note: If unset, the video player will remain active.
  *
  * *Example:*
  *
@@ -44,7 +25,7 @@ const CogsConnectionContext = React.createContext({
  * }
  *
  * function App() {
- *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
+ *   return <CogsConnectionProvider manifest={manifest}>
  *     <MyComponent />
  *   <CogsConnectionProvider/>;
  * }
@@ -63,13 +44,13 @@ const CogsConnectionContext = React.createContext({
  * }
  *
  * function App() {
- *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
+ *   return <CogsConnectionProvider manifest={manifest}>
  *     <MyComponent />
  *   <CogsConnectionProvider/>;
  * }
  * ```
  */
-export default function CogsConnectionProvider({ manifest, hostname, port, children, audioPlayer, videoPlayer, initialClientState, initialDataStoreData, }) {
+export default function CogsConnectionProvider({ manifest, hostname, port, children, initialClientState, initialDataStoreData, }) {
     const connectionRef = useRef(undefined);
     const [, forceRender] = useState({});
     useEffect(() => {
@@ -81,26 +62,12 @@ export default function CogsConnectionProvider({ manifest, hostname, port, child
             connection.close();
         };
     }, [manifest, hostname, port, initialClientState, initialDataStoreData]);
-    const audioPlayerRef = useRef(undefined);
-    useEffect(() => {
-        if (audioPlayer && !audioPlayerRef.current && connectionRef.current) {
-            audioPlayerRef.current = new CogsAudioPlayer(connectionRef.current);
-        }
-    }, [audioPlayer]);
-    const videoPlayerRef = useRef(undefined);
-    useEffect(() => {
-        if (videoPlayer && !videoPlayerRef.current && connectionRef.current) {
-            videoPlayerRef.current = new CogsVideoPlayer(connectionRef.current);
-        }
-    }, [videoPlayer]);
     if (!connectionRef.current) {
         // Do not render if the `useEffect`s above have not run
         return null;
     }
     const value = {
         useCogsConnection: (customConnection) => customConnection ?? connectionRef.current,
-        useAudioPlayer: (customAudioPlayer) => customAudioPlayer ?? audioPlayerRef.current ?? null,
-        useVideoPlayer: (customVideoPlayer) => customVideoPlayer ?? videoPlayerRef.current ?? null,
     };
     return React.createElement(CogsConnectionContext.Provider, { value: value }, children);
 }
@@ -110,15 +77,3 @@ export default function CogsConnectionProvider({ manifest, hostname, port, child
 export function useCogsConnection(customConnection) {
     return useContext(CogsConnectionContext).useCogsConnection(customConnection);
 }
-/**
- * Get the audio player from `<CogsConnectionProvider audioPlayer>`
- */
-export function useAudioPlayer(customAudioPlayer) {
-    return useContext(CogsConnectionContext).useAudioPlayer(customAudioPlayer);
-}
-/**
- * Get the video player from `<CogsConnectionProvider videoPlayer>`
- */
-export function useVideoPlayer(customVideoPlayer) {
-    return useContext(CogsConnectionContext).useVideoPlayer(customVideoPlayer);
-}

package/package.json

@@ -3,7 +3,7 @@
   "description": "React components and hooks to connect to COGS to build a custom Media Master",
   "author": "Clockwork Dog <info@clockwork.dog>",
   "homepage": "https://github.com/clockwork-dog/cogs-sdk/tree/main/packages/react",
-  "version": "3.0.0-alpha.14",
+  "version": "3.0.0-alpha.16",
   "keywords": [],
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
     "prerelease": "yarn npm publish --access public --tag=next"
   },
   "dependencies": {
-    "@clockworkdog/cogs-client": "^3.0.0-alpha.14"
+    "@clockworkdog/cogs-client": "^3.0.0-alpha.16"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/dist/components/Images.d.ts

@@ -1,10 +0,0 @@
-import { CogsConnection } from '@clockworkdog/cogs-client';
-import React, { ReactNode } from 'react';
-export default function Images({ className, style, connection: customConnection, fullscreen, }: {
-    className?: string;
-    style?: React.CSSProperties;
-    connection?: CogsConnection<any>;
-    fullscreen?: boolean | {
-        style: React.CSSProperties;
-    };
-}): ReactNode;

package/dist/components/Images.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import useImages from '../hooks/useImages';
-import { useCogsConnection } from '../providers/CogsConnectionProvider';
-export default function Images({ className, style, connection: customConnection, fullscreen, }) {
-    const connection = useCogsConnection(customConnection);
-    const images = useImages(connection);
-    const fullscreenCustomStyle = typeof fullscreen === 'object' ? fullscreen.style : undefined;
-    const imageElements = images.map((image, index) => (React.createElement("img", { className: className, key: index, src: connection.getAssetUrl?.(image.file), alt: image.file, style: {
-            objectFit: image.fit,
-            ...(fullscreen ? { width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 } : {}),
-            ...style,
-        } })));
-    return (React.createElement(React.Fragment, null, fullscreen ? (React.createElement("div", { style: { position: 'absolute', zIndex: 2, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle } }, imageElements)) : (imageElements)));
-}

package/dist/components/VideoContainer.d.ts

@@ -1,10 +0,0 @@
-import { CogsVideoPlayer } from '@clockworkdog/cogs-client';
-import React, { ReactNode } from 'react';
-export default function VideoContainer({ className, style, videoPlayer: customVideoPlayer, fullscreen, }: {
-    className?: string;
-    style?: React.CSSProperties;
-    videoPlayer?: CogsVideoPlayer | null;
-    fullscreen?: boolean | {
-        style: React.CSSProperties;
-    };
-}): ReactNode;

package/dist/components/VideoContainer.js

@@ -1,16 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { useVideoPlayer } from '../providers/CogsConnectionProvider';
-export default function VideoContainer({ className, style, videoPlayer: customVideoPlayer, fullscreen, }) {
-    const containerRef = useRef(null);
-    const videoPlayer = useVideoPlayer(customVideoPlayer ?? undefined);
-    useEffect(() => {
-        if (videoPlayer && containerRef.current) {
-            videoPlayer.setParentElement(containerRef.current);
-            return () => videoPlayer.resetParentElement();
-        }
-    }, [videoPlayer]);
-    const fullscreenCustomStyle = typeof fullscreen === 'object' ? fullscreen.style : style;
-    return (React.createElement("div", { ref: containerRef, className: className, style: fullscreen
-            ? { position: 'absolute', zIndex: 1, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle }
-            : { position: 'relative', ...style } }));
-}

package/dist/hooks/useAudioClips.d.ts

@@ -1,4 +0,0 @@
-import { AudioClip, CogsAudioPlayer } from '@clockworkdog/cogs-client';
-export default function useAudioClips(audioPlayer: CogsAudioPlayer | null): {
-    [path: string]: AudioClip;
-};

package/dist/hooks/useAudioClips.js

@@ -1,10 +0,0 @@
-import { useEffect, useState } from 'react';
-export default function useAudioClips(audioPlayer) {
-    const [audioClips, setAudioClips] = useState({});
-    useEffect(() => {
-        const listener = (event) => setAudioClips(event.detail.clips);
-        audioPlayer?.addEventListener('state', listener);
-        return () => audioPlayer?.removeEventListener('state', listener);
-    }, [audioPlayer]);
-    return audioClips;
-}

package/dist/hooks/useImages.d.ts

@@ -1,6 +0,0 @@
-import { CogsConnection, MediaObjectFit } from '@clockworkdog/cogs-client';
-export type Image = {
-    file: string;
-    fit: MediaObjectFit;
-};
-export default function useImages<Connection extends CogsConnection<any>>(connection: Connection): Image[];

package/dist/hooks/useImages.js

@@ -1,27 +0,0 @@
-import { useCallback, useState } from 'react';
-import useCogsMessage from './useCogsMessage';
-export default function useImages(connection) {
-    const [images, setImages] = useState([]);
-    useCogsMessage(connection, useCallback((message) => {
-        switch (message.type) {
-            case 'image_show':
-                {
-                    const newImage = { file: message.file, fit: message.fit };
-                    setImages((images) => (message.hideOthers ? [newImage] : [...images, newImage]));
-                }
-                break;
-            case 'image_hide':
-                if (message.file) {
-                    setImages((images) => images.filter(({ file }) => file !== message.file));
-                }
-                else {
-                    setImages([]);
-                }
-                break;
-            case 'image_set_fit':
-                setImages((images) => images.map((image) => (!message.file || message.file === image.file ? { ...image, fit: message.fit } : image)));
-                break;
-        }
-    }, []));
-    return images;
-}