@clockworkdog/cogs-client-react 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/components/MediaSurface.d.ts

@@ -0,0 +1,6 @@
+import { CogsConnection } from '@clockworkdog/cogs-client';
+import React from 'react';
+export interface MediaSurfaceProps {
+    cogsConnection: CogsConnection<any, any>;
+}
+export declare function MediaSurface({ cogsConnection }: MediaSurfaceProps): React.JSX.Element;

package/dist/components/MediaSurface.js

@@ -0,0 +1,45 @@
+import { SurfaceManager } from '@clockworkdog/cogs-client';
+import React, { useEffect, useRef, useState } from 'react';
+export function MediaSurface({ cogsConnection }) {
+    const surfaceManagerRef = useRef(undefined);
+    const surfaceStateRef = useRef(undefined);
+    const [surfaceElem, setSurfaceElem] = useState(null);
+    // Keep updated list of audio outputs
+    const audioOutputs = useRef({});
+    useEffect(() => {
+        async function updateAudioOutputs() {
+            const audioOutputs = {};
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            const outputs = devices.filter((device) => device.kind === 'audiooutput');
+            outputs.forEach((output) => {
+                audioOutputs[output.label] = output.deviceId;
+            });
+        }
+        updateAudioOutputs();
+        navigator.mediaDevices.addEventListener('devicechange', updateAudioOutputs);
+        return () => navigator.mediaDevices.removeEventListener('devicechange', updateAudioOutputs);
+    }, []);
+    // Create and attach new surface manager
+    useEffect(() => {
+        const sm = new SurfaceManager((url) => cogsConnection.getAssetUrl(url), (outputLabel) => audioOutputs.current[outputLabel]);
+        surfaceManagerRef.current = sm;
+        surfaceElem?.replaceChildren(sm.element);
+        return () => {
+            surfaceManagerRef.current?.setState({});
+            surfaceManagerRef.current = undefined;
+            surfaceElem?.replaceChildren( /* empty */);
+        };
+    }, [surfaceElem, cogsConnection.getAssetUrl]);
+    // Listen to messages
+    useEffect(() => {
+        function updateSurfaceState({ message }) {
+            if (message.type === 'media_state' && message.media_strategy === 'state' && surfaceManagerRef.current) {
+                surfaceStateRef.current = message.state;
+                surfaceManagerRef.current.setState(message.state);
+            }
+        }
+        cogsConnection.addEventListener('message', updateSurfaceState);
+        return () => cogsConnection.removeEventListener('message', updateSurfaceState);
+    }, [cogsConnection]);
+    return React.createElement("div", { className: "media-surface", ref: setSurfaceElem });
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as CogsConnectionProvider, useCogsConnection, useAudioPlayer, useVideoPlayer } from './providers/CogsConnectionProvider';
+export { MediaSurface, MediaSurfaceProps } from './components/MediaSurface';
 export { default as useIsConnected } from './hooks/useIsConnected';
 export { default as useCogsConfig } from './hooks/useCogsConfig';
 export { default as useCogsEvent } from './hooks/useCogsEvent';

package/dist/index.js

@@ -1,5 +1,6 @@
 // Utilities
 export { default as CogsConnectionProvider, useCogsConnection, useAudioPlayer, useVideoPlayer } from './providers/CogsConnectionProvider';
+export { MediaSurface } from './components/MediaSurface';
 export { default as useIsConnected } from './hooks/useIsConnected';
 export { default as useCogsConfig } from './hooks/useCogsConfig';
 export { default as useCogsEvent } from './hooks/useCogsEvent';

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.1",
+  "version": "3.0.0-alpha.11",
   "keywords": [],
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
     "prerelease": "yarn npm publish --access public --tag=next"
   },
   "dependencies": {
-    "@clockworkdog/cogs-client": "^3.0.0-alpha.1"
+    "@clockworkdog/cogs-client": "^3.0.0-alpha.11"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",