@clockworkdog/cogs-client-react 2.7.0 → 2.8.1

package/README.md

@@ -1,4 +1,4 @@
-# COGS Client React library
+# COGS SDK - React
 
 Use this library to create custom content for your COGS Media Master or COGS Plugin
 

package/dist/hooks/useCogsConfig.js

@@ -5,9 +5,10 @@ const react_1 = require("react");
 function useCogsConfig(connection) {
     const [config, setConfig] = (0, react_1.useState)(connection.config);
     (0, react_1.useEffect)(() => {
+        // Use the latest config in case it has changed before this useEffect ran
+        setConfig(connection.config);
         const listener = (event) => setConfig(event.config);
         connection.addEventListener('config', listener);
-        setConfig(connection.config); // Use the latest config in case is has changed before this useEffect ran
         return () => connection.removeEventListener('config', listener);
     }, [connection]);
     return config;

package/dist/hooks/useCogsMediaConfig.d.ts

@@ -0,0 +1,2 @@
+import { CogsConnection, MediaClientConfig } from '@clockworkdog/cogs-client';
+export default function useCogsMediaConfig<MediaConfigExtra>(connection: CogsConnection<any>): (MediaClientConfig & MediaConfigExtra) | null;

package/dist/hooks/useCogsMediaConfig.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useCogsMediaConfig;
+const react_1 = require("react");
+function useCogsMediaConfig(connection) {
+    const [mediaConfig, setMediaConfig] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        // Use the latest config in case it has changed before this useEffect ran
+        setMediaConfig(connection.mediaConfig);
+        const listener = ({ mediaConfig }) => {
+            setMediaConfig(mediaConfig);
+        };
+        connection.addEventListener('mediaConfig', listener);
+        return () => connection.removeEventListener('mediaConfig', listener);
+    }, [connection]);
+    return mediaConfig;
+}

package/dist/hooks/useCogsStateValue.js

@@ -5,6 +5,8 @@ const react_1 = require("react");
 function useCogsStateValue(connection, stateName) {
     const [value, setValue] = (0, react_1.useState)(connection.state[stateName]);
     (0, react_1.useEffect)(() => {
+        // Use the latest state in case it has changed before this useEffect ran
+        setValue(connection.state[stateName]);
         const listener = ({ state }) => {
             const value = state[stateName];
             if (value !== undefined) {

package/dist/hooks/useCogsStateValues.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 function useCogsInputPortValues(connection) {
     const [value, setValue] = (0, react_1.useState)(connection.state);
     (0, react_1.useEffect)(() => {
+        // Use the latest state in case it has changed before this useEffect ran
         setValue(connection.state);
         const listener = () => setValue(connection.state);
         connection.addEventListener('state', listener);

package/dist/hooks/useShowPhase.js

@@ -1,17 +1,15 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = useShowPhase;
 const react_1 = require("react");
-const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
 function useShowPhase(connection) {
     const [status, setStatus] = (0, react_1.useState)(connection.showPhase);
-    (0, useCogsMessage_1.default)(connection, (0, react_1.useCallback)((message) => {
-        if (message.type === 'show_phase') {
-            setStatus(message.phase);
-        }
-    }, []));
+    (0, react_1.useEffect)(() => {
+        // Use the latest show phase in case it has changed before this useEffect ran
+        setStatus(connection.showPhase);
+        const listener = () => setStatus(connection.showPhase);
+        connection.addEventListener('showPhase', listener);
+        return () => connection.removeEventListener('showPhase', listener);
+    }, [connection]);
     return status;
 }

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { default as useIsConnected } from './hooks/useIsConnected';
 export { default as useCogsConfig } from './hooks/useCogsConfig';
 export { default as useCogsEvent } from './hooks/useCogsEvent';
 export { default as useCogsEvents } from './hooks/useCogsEvents';
+export { default as useCogsMediaConfig } from './hooks/useCogsMediaConfig';
 export { default as useCogsStateValue } from './hooks/useCogsStateValue';
 export { default as useCogsStateValues } from './hooks/useCogsStateValues';
 export { default as useCogsMessage } from './hooks/useCogsMessage';

package/dist/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Images = exports.useImages = exports.Timer = exports.Hint = exports.useHint = exports.VideoContainer = exports.RtspVideo = exports.useIsAudioPlaying = exports.useAudioClips = exports.useWhenShowReset = exports.useShowPhase = exports.usePreloadedUrl = exports.useCogsMessage = exports.useCogsStateValues = exports.useCogsStateValue = exports.useCogsEvents = exports.useCogsEvent = exports.useCogsConfig = exports.useIsConnected = exports.useVideoPlayer = exports.useAudioPlayer = exports.useCogsConnection = exports.CogsConnectionProvider = void 0;
+exports.Images = exports.useImages = exports.Timer = exports.Hint = exports.useHint = exports.VideoContainer = exports.RtspVideo = exports.useIsAudioPlaying = exports.useAudioClips = exports.useWhenShowReset = exports.useShowPhase = exports.usePreloadedUrl = exports.useCogsMessage = exports.useCogsStateValues = exports.useCogsStateValue = exports.useCogsMediaConfig = exports.useCogsEvents = exports.useCogsEvent = exports.useCogsConfig = exports.useIsConnected = exports.useVideoPlayer = exports.useAudioPlayer = exports.useCogsConnection = exports.CogsConnectionProvider = void 0;
 // Utilities
 var CogsConnectionProvider_1 = require("./providers/CogsConnectionProvider");
 Object.defineProperty(exports, "CogsConnectionProvider", { enumerable: true, get: function () { return __importDefault(CogsConnectionProvider_1).default; } });
@@ -32,6 +32,8 @@ var useCogsEvent_1 = require("./hooks/useCogsEvent");
 Object.defineProperty(exports, "useCogsEvent", { enumerable: true, get: function () { return __importDefault(useCogsEvent_1).default; } });
 var useCogsEvents_1 = require("./hooks/useCogsEvents");
 Object.defineProperty(exports, "useCogsEvents", { enumerable: true, get: function () { return __importDefault(useCogsEvents_1).default; } });
+var useCogsMediaConfig_1 = require("./hooks/useCogsMediaConfig");
+Object.defineProperty(exports, "useCogsMediaConfig", { enumerable: true, get: function () { return __importDefault(useCogsMediaConfig_1).default; } });
 var useCogsStateValue_1 = require("./hooks/useCogsStateValue");
 Object.defineProperty(exports, "useCogsStateValue", { enumerable: true, get: function () { return __importDefault(useCogsStateValue_1).default; } });
 var useCogsStateValues_1 = require("./hooks/useCogsStateValues");

package/dist/providers/CogsConnectionProvider.d.ts

@@ -1,4 +1,4 @@
-import { CogsAudioPlayer, CogsConnection, CogsPluginManifest, CogsVideoPlayer } 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()`
@@ -48,13 +48,21 @@ import React, { ReactNode } from 'react';
  * }
  * ```
  */
-export default function CogsConnectionProvider<Manifest extends CogsPluginManifest>({ manifest, hostname, port, children, audioPlayer, videoPlayer, }: {
+export default function CogsConnectionProvider<Manifest extends CogsPluginManifest, DataT extends {
+    [key: string]: unknown;
+} = {
+    [key: string]: unknown;
+}>({ 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;
+    }>>;
+    initialDataStoreData?: DataT;
 }): ReactNode | null;
 /**
  * Get the connection from `<CogsConnectionProvider>`

package/dist/providers/CogsConnectionProvider.js

@@ -108,18 +108,18 @@ const CogsConnectionContext = react_1.default.createContext({
  * }
  * ```
  */
-function CogsConnectionProvider({ manifest, hostname, port, children, audioPlayer, videoPlayer, }) {
+function CogsConnectionProvider({ manifest, hostname, port, children, audioPlayer, videoPlayer, initialClientState, initialDataStoreData, }) {
     const connectionRef = (0, react_1.useRef)(undefined);
     const [, forceRender] = (0, react_1.useState)({});
     (0, react_1.useEffect)(() => {
-        const connection = new cogs_client_1.CogsConnection(manifest, { hostname, port });
+        const connection = new cogs_client_1.CogsConnection(manifest, { hostname, port }, initialClientState, initialDataStoreData);
         connectionRef.current = connection;
         forceRender({});
         return () => {
             connectionRef.current = undefined;
             connection.close();
         };
-    }, [manifest, hostname, port]);
+    }, [manifest, hostname, port, initialClientState, initialDataStoreData]);
     const audioPlayerRef = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(() => {
         if (audioPlayer && !audioPlayerRef.current && connectionRef.current) {

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": "2.7.0",
+  "version": "2.8.1",
   "keywords": [],
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "release": "yarn npm publish --access public"
   },
   "dependencies": {
-    "@clockworkdog/cogs-client": "^2.7.0"
+    "@clockworkdog/cogs-client": "^2.8.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",