@clockworkdog/cogs-client-react 3.0.0-alpha.5 → 3.0.0-alpha.7

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,30 @@
+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();
+    // Create and attach new surface manager
+    useEffect(() => {
+        const sm = new SurfaceManager(cogsConnection.getAssetUrl);
+        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.5",
+  "version": "3.0.0-alpha.7",
   "keywords": [],
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
     "prerelease": "yarn npm publish --access public --tag=next"
   },
   "dependencies": {
-    "@clockworkdog/cogs-client": "^3.0.0-alpha.5"
+    "@clockworkdog/cogs-client": "^3.0.0-alpha.7"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",