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

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 { default as useIsConnected } from './hooks/useIsConnected';
 export { default as useCogsConfig } from './hooks/useCogsConfig';
 export { default as useCogsEvent } from './hooks/useCogsEvent';
@@ -11,9 +11,6 @@ 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, useAudioPlayer, useVideoPlayer } from './providers/CogsConnectionProvider';
+export { default as CogsConnectionProvider, useCogsConnection } 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,11 +12,6 @@ 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,64 +1,14 @@
-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:*
- *
- * ```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, 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 +18,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,68 +8,8 @@ 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:*
- *
- * ```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, }) {
+export default function CogsConnectionProvider({ manifest, hostname, port, children, initialClientState, initialDataStoreData, }) {
     const connectionRef = useRef(undefined);
     const [, forceRender] = useState({});
     useEffect(() => {
@@ -81,26 +21,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 +36,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.0",
+  "version": "3.0.0-alpha.2",
   "keywords": [],
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
     "prerelease": "yarn npm publish --access public --tag=next"
   },
   "dependencies": {
-    "@clockworkdog/cogs-client": "^3.0.0-alpha.0"
+    "@clockworkdog/cogs-client": "^3.0.0-alpha.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

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/useIsAudioPlaying.d.ts

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

package/dist/hooks/useIsAudioPlaying.js

@@ -1,12 +0,0 @@
-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;
-}