@clockworkdog/cogs-client-react 3.0.0-alpha.2 → 3.0.0-alpha.3

package/dist/components/VideoContainer.d.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,16 @@
+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

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

package/dist/hooks/useAudioClips.js

@@ -0,0 +1,10 @@
+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/useIsAudioPlaying.d.ts

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

package/dist/hooks/useIsAudioPlaying.js

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+import { useAudioPlayer } from '../providers/CogsConnectionProvider';
+export default function useIsAudioPlaying(customAudioPlayer) {
+    const [isAudioPlaying, setAudioPlaying] = useState(false);
+    const audioPlayer = useAudioPlayer(customAudioPlayer ?? undefined);
+    useEffect(() => {
+        const listener = (event) => setAudioPlaying(event.detail.isPlaying);
+        audioPlayer?.addEventListener('state', listener);
+        return () => audioPlayer?.removeEventListener('state', listener);
+    }, [audioPlayer]);
+    return isAudioPlaying;
+}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { default as CogsConnectionProvider, useCogsConnection } from './providers/CogsConnectionProvider';
+export { default as CogsConnectionProvider, useCogsConnection, useAudioPlayer, useVideoPlayer } from './providers/CogsConnectionProvider';
 export { default as useIsConnected } from './hooks/useIsConnected';
 export { default as useCogsConfig } from './hooks/useCogsConfig';
 export { default as useCogsEvent } from './hooks/useCogsEvent';
@@ -11,6 +11,9 @@ 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 { default as useHint } from './hooks/useHint';
 export { default as Hint } from './components/Hint';
 export { default as Timer } from './components/Timer';

package/dist/index.js

@@ -1,5 +1,5 @@
 // Utilities
-export { default as CogsConnectionProvider, useCogsConnection } from './providers/CogsConnectionProvider';
+export { default as CogsConnectionProvider, useCogsConnection, useAudioPlayer, useVideoPlayer } from './providers/CogsConnectionProvider';
 export { default as useIsConnected } from './hooks/useIsConnected';
 export { default as useCogsConfig } from './hooks/useCogsConfig';
 export { default as useCogsEvent } from './hooks/useCogsEvent';
@@ -12,6 +12,11 @@ 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';
 // Hints
 export { default as useHint } from './hooks/useHint';
 export { default as Hint } from './components/Hint';

package/dist/providers/CogsConnectionProvider.d.ts

@@ -1,14 +1,64 @@
-import { CogsConnection, CogsPluginManifest, ManifestTypes } from '@clockworkdog/cogs-client';
+import { CogsAudioPlayer, CogsConnection, CogsPluginManifest, CogsVideoPlayer, 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:*
+ *
+ * ```jsx
+ * import manifest from './cogs-plugin-manifest.js';
+ *
+ * function MyComponent() {
+ *   const cogsConnection = useCogsConnection();
+ *   const numberOfPlayers = useCogsConfig(cogsConnection)['Number of players'];
+ *
+ *   return <div>Players: {numberOfPlayers}</div>;
+ * }
+ *
+ * function App() {
+ *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
+ *     <MyComponent />
+ *   <CogsConnectionProvider/>;
+ * }
+ * ```
+ *
+ * or with Typescript:
+ *
+ * ```tsx
+ * import manifest from './cogs-plugin-manifest.js'; // Requires `"allowJs": true` in `tsconfig.json`
+ *
+ * function MyComponent() {
+ *   const cogsConnection = useCogsConnection<typeof manifest>();
+ *   const numberOfPlayers = useCogsConfig(cogsConnection)['Number of players'];
+ *
+ *   return <div>Players: {numberOfPlayers}</div>;
+ * }
+ *
+ * function App() {
+ *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
+ *     <MyComponent />
+ *   <CogsConnectionProvider/>;
+ * }
+ * ```
+ */
 export default function CogsConnectionProvider<Manifest extends CogsPluginManifest, DataT extends {
     [key: string]: unknown;
 } = {
     [key: string]: unknown;
-}>({ manifest, hostname, port, children, initialClientState, initialDataStoreData, }: {
+}>({ manifest, hostname, port, children, audioPlayer, videoPlayer, initialClientState, initialDataStoreData, }: {
     manifest: Manifest;
     hostname?: string;
     port?: number;
     children: React.ReactNode;
+    audioPlayer?: boolean;
+    videoPlayer?: boolean;
     initialClientState?: Partial<ManifestTypes.StateAsObject<Manifest, {
         writableFromClient: true;
     }>>;
@@ -18,3 +68,11 @@ 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 { CogsConnection } from '@clockworkdog/cogs-client';
+import { CogsAudioPlayer, CogsConnection, CogsVideoPlayer } 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,8 +8,68 @@ 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;
+    },
 });
-export default function CogsConnectionProvider({ manifest, hostname, port, children, initialClientState, initialDataStoreData, }) {
+/**
+ * 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:*
+ *
+ * ```jsx
+ * import manifest from './cogs-plugin-manifest.js';
+ *
+ * function MyComponent() {
+ *   const cogsConnection = useCogsConnection();
+ *   const numberOfPlayers = useCogsConfig(cogsConnection)['Number of players'];
+ *
+ *   return <div>Players: {numberOfPlayers}</div>;
+ * }
+ *
+ * function App() {
+ *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
+ *     <MyComponent />
+ *   <CogsConnectionProvider/>;
+ * }
+ * ```
+ *
+ * or with Typescript:
+ *
+ * ```tsx
+ * import manifest from './cogs-plugin-manifest.js'; // Requires `"allowJs": true` in `tsconfig.json`
+ *
+ * function MyComponent() {
+ *   const cogsConnection = useCogsConnection<typeof manifest>();
+ *   const numberOfPlayers = useCogsConfig(cogsConnection)['Number of players'];
+ *
+ *   return <div>Players: {numberOfPlayers}</div>;
+ * }
+ *
+ * function App() {
+ *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
+ *     <MyComponent />
+ *   <CogsConnectionProvider/>;
+ * }
+ * ```
+ */
+export default function CogsConnectionProvider({ manifest, hostname, port, children, audioPlayer, videoPlayer, initialClientState, initialDataStoreData, }) {
     const connectionRef = useRef(undefined);
     const [, forceRender] = useState({});
     useEffect(() => {
@@ -21,12 +81,26 @@ 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);
 }
@@ -36,3 +110,15 @@ 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.2",
+  "version": "3.0.0-alpha.3",
   "keywords": [],
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
     "prerelease": "yarn npm publish --access public --tag=next"
   },
   "dependencies": {
-    "@clockworkdog/cogs-client": "^3.0.0-alpha.2"
+    "@clockworkdog/cogs-client": "^3.0.0-alpha.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",