@clockworkdog/cogs-client-react 3.0.0-alpha.13 → 3.0.0-alpha.15

package/dist/components/MediaSurface.js

@@ -1,14 +1,20 @@
-import { SurfaceManager } from '@clockworkdog/cogs-client';
+import { MediaPreloader, 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 volumeRef = useRef(cogsConnection.mediaConfig?.globalVolume);
+    const mediaPreloaderRef = useRef(null);
     const [surfaceElem, setSurfaceElem] = useState(null);
     // Keep updated list of audio outputs
     const audioOutputs = useRef({});
     useEffect(() => {
         async function updateAudioOutputs() {
             const audioOutputs = {};
+            if (!navigator?.mediaDevices) {
+                // `navigator.mediaDevices` is undefined on COGS AV <= 4.5 because of secure origin permissions
+                return;
+            }
             const devices = await navigator.mediaDevices.enumerateDevices();
             const outputs = devices.filter((device) => device.kind === 'audiooutput');
             outputs.forEach((output) => {
@@ -16,12 +22,22 @@ 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(() => {
-        const sm = new SurfaceManager((url) => cogsConnection.getAssetUrl(url), (outputLabel) => audioOutputs.current[outputLabel] ?? '');
+        const constructURL = (url) => cogsConnection.getAssetUrl(url);
+        const preloader = new MediaPreloader(constructURL);
+        mediaPreloaderRef.current = preloader;
+        const files = cogsConnection.mediaConfig?.files;
+        if (files) {
+            preloader.setState(files);
+        }
+        const sm = new SurfaceManager(constructURL, (outputLabel) => audioOutputs.current[outputLabel] ?? '', {}, preloader);
+        if (volumeRef.current !== undefined) {
+            sm.volume = volumeRef.current;
+        }
         surfaceManagerRef.current = sm;
         surfaceElem?.replaceChildren(sm.element);
         return () => {
@@ -32,14 +48,25 @@ export function MediaSurface({ cogsConnection }) {
     }, [surfaceElem, cogsConnection.getAssetUrl]);
     // Listen to messages
     useEffect(() => {
-        function updateSurfaceState({ message }) {
-            if (message.type === 'media_state' && message.media_strategy === 'state' && surfaceManagerRef.current) {
+        function handleMessages({ message }) {
+            const preloader = mediaPreloaderRef.current;
+            const manager = surfaceManagerRef.current;
+            if (message.type === 'media_state' && message.media_strategy === 'state' && manager) {
                 surfaceStateRef.current = message.state;
-                surfaceManagerRef.current.setState(message.state);
+                manager.setState(message.state);
+            }
+            if (message.type === 'media_config_update') {
+                volumeRef.current = message.globalVolume;
+                if (preloader) {
+                    preloader.setState(message.files);
+                }
+                if (manager) {
+                    manager.volume = message.globalVolume;
+                }
             }
         }
-        cogsConnection.addEventListener('message', updateSurfaceState);
-        return () => cogsConnection.removeEventListener('message', updateSurfaceState);
+        cogsConnection.addEventListener('message', handleMessages);
+        return () => cogsConnection.removeEventListener('message', handleMessages);
     }, [cogsConnection]);
     return React.createElement("div", { className: "media-surface", ref: setSurfaceElem });
 }

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