@clockworkdog/cogs-client-react 1.5.7 → 2.0.0

package/README.md

@@ -1,6 +1,8 @@
 # COGS Client React library
 
-Create content for your COGS Media Master
+Use this library to create custom content for your COGS Media Master or COGS Plugin
+
+We recommend using the [`cogs-client` Create React App template](https://github.com/clockwork-dog/cra-template-cogs-client) to get started or follow this guide to add `@clockworkdog/cogs-client-react` to your existing project.
 
 ## [Documentation](https://clockwork-dog.github.io/cogs-client-react-lib/)
 
@@ -18,7 +20,27 @@ yarn add @clockworkdog/cogs-client-react
 
 ## Usage
 
-Import the library
+1. Create a `cogs-plugin-manifest.js` file in the public folder of your project.
+
+See the [CogsPluginManifestJson documentation](https://clockwork-dog.github.io/cogs-client-lib/interfaces/CogsPluginManifestJson.html) for more information on the manifest format.
+
+e.g.
+
+```js
+module.exports =
+  /**
+   * @type {const}
+   * @satisfies {import("@clockworkdog/cogs-client").CogsPluginManifest}
+   */
+  ({
+    name: 'My Plugin',
+    description: 'My Plugin description',
+    version: '1.0.0',
+    // etc.
+  });
+```
+
+2. Import the library
 
 ```ts
 import {
@@ -46,19 +68,21 @@ const {
 } = require('@clockworkdog/cogs-client-react');
 ```
 
-then
+3. Instantiate `<CogsConnectionProvider>` with the manifest
 
 ```tsx
+import manifest from './public/cogs-plugin-manifest.js'; // For Typescript requires `"allowJs": true` in `tsconfig.json`
+
 function App() {
   return (
-    <CogsConnectionProvider audioPlayer videoPlayer>
+    <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
       <MyComponent />
     </CogsConnectionProvider>
   );
 }
 
 function MyComponent() {
-  const cogsConnection = useCogsConnection();
+  const cogsConnection = useCogsConnection<typeof manifest>();
   const isConnected = useIsConnected(cogsConnection);
 
   const audioPlayer = useAudioPlayer();

package/dist/components/Hint.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CogsConnection } from '@clockworkdog/cogs-client';
-export default function Hint({ connection: customConnection }: {
-    connection: CogsConnection;
+export default function Hint({ connection: customConnection, }: {
+    connection: CogsConnection<any>;
 }): JSX.Element | null;

package/dist/components/Hint.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const useHint_1 = __importDefault(require("../hooks/useHint"));
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
-function Hint({ connection: customConnection }) {
-    const providerConnection = CogsConnectionProvider_1.useCogsConnection();
+function Hint({ connection: customConnection, }) {
+    const providerConnection = (0, CogsConnectionProvider_1.useCogsConnection)();
     const connection = customConnection !== null && customConnection !== void 0 ? customConnection : providerConnection;
-    const hint = useHint_1.default(connection);
+    const hint = (0, useHint_1.default)(connection);
     return hint ? react_1.default.createElement(react_1.default.Fragment, null, hint) : null;
 }
 exports.default = Hint;

package/dist/components/Images.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 export default function Images({ className, style, connection: customConnection, fullscreen, }: {
     className?: string;
     style?: React.CSSProperties;
-    connection: CogsConnection;
+    connection: CogsConnection<any>;
     fullscreen?: boolean | {
         style: React.CSSProperties;
     };

package/dist/components/Images.js

@@ -8,11 +8,11 @@ const react_1 = __importDefault(require("react"));
 const useImages_1 = __importDefault(require("../hooks/useImages"));
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
 function Images({ className, style, connection: customConnection, fullscreen, }) {
-    const providerConnection = CogsConnectionProvider_1.useCogsConnection();
+    const providerConnection = (0, CogsConnectionProvider_1.useCogsConnection)();
     const connection = customConnection !== null && customConnection !== void 0 ? customConnection : providerConnection;
-    const images = useImages_1.default(connection);
+    const images = (0, useImages_1.default)(connection);
     const fullscreenCustomStyle = typeof fullscreen === 'object' ? fullscreen.style : undefined;
-    const imageElements = images.map((image, index) => (react_1.default.createElement("img", { className: className, key: index, src: cogs_client_1.assetUrl(image.file), alt: image.file, style: {
+    const imageElements = images.map((image, index) => (react_1.default.createElement("img", { className: className, key: index, src: (0, cogs_client_1.assetUrl)(image.file), alt: image.file, style: {
             objectFit: image.fit,
             ...(fullscreen ? { width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 } : {}),
             ...style,

package/dist/components/RtspVideo.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -35,19 +39,19 @@ function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live,
     // This is needed because the stream will "pause" when the page looses focus and start playback when it
     // becomes visible again. This will essentially cause a delay to be introduced into the stream when loosing
     // page focus. To fix this, we simply stop and restart the stream when the page visibility changes.
-    const isVisible = usePageVisibility_1.default();
+    const isVisible = (0, usePageVisibility_1.default)();
     // For the video ref we actually use state so useEffect runs when the video ref changes
-    const [videoRef, setVideoRef] = react_1.useState(null);
-    const videoRefCallback = react_1.useCallback((newRef) => setVideoRef(newRef), []);
+    const [videoRef, setVideoRef] = (0, react_1.useState)(null);
+    const videoRefCallback = (0, react_1.useCallback)((newRef) => setVideoRef(newRef), []);
     // Get the RTSP streamer from the COGS provider
-    const rtspStreamer = react_1.useMemo(() => new cogs_client_1.CogsRtspStreamer({
+    const rtspStreamer = (0, react_1.useMemo)(() => new cogs_client_1.CogsRtspStreamer({
         hostname: websocketHostname,
         port: websocketPort,
         path: websocketPath,
     }), [websocketHostname, websocketPath, websocketPort]);
     // An effect which runs when the video element, page visibility, or URIs change
     // This will start playback of the camera stream in the given element
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         // Nothing to do if we don't yet have a video element yet or if the page isn't visible
         if (!videoRef || !rtspStreamer || !isVisible) {
             return;
@@ -62,6 +66,6 @@ function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live,
             pipeline.close();
         };
     }, [uri, isVisible, rtspStreamer, videoRef, live]);
-    return react_1.default.createElement("video", Object.assign({ ref: videoRefCallback, autoPlay: true }, rest));
+    return react_1.default.createElement("video", { ref: videoRefCallback, autoPlay: true, ...rest });
 }
 exports.default = RtspVideo;

package/dist/components/Timer.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 export default function Timer({ className, style, connection: customConnection, separator, center, }: {
     className?: string;
     style?: React.CSSProperties;
-    connection: CogsConnection;
+    connection: CogsConnection<any>;
     separator?: string;
     center?: boolean;
 }): JSX.Element;

package/dist/components/Timer.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -40,17 +44,17 @@ function formatTime(time, countingUp) {
 }
 function Timer({ className, style, connection: customConnection, separator = ':', center, }) {
     var _a, _b, _c, _d, _e, _f;
-    const providerConnection = CogsConnectionProvider_1.useCogsConnection();
+    const providerConnection = (0, CogsConnectionProvider_1.useCogsConnection)();
     const connection = customConnection !== null && customConnection !== void 0 ? customConnection : providerConnection;
-    const [timerElapsed, setTimerElapsed] = react_1.useState(0);
-    const [timerStartedAt, setTimerStartedAt] = react_1.useState((_b = (_a = connection.timerState) === null || _a === void 0 ? void 0 : _a.startedAt) !== null && _b !== void 0 ? _b : 0);
-    const [timerTotalMillis, setTimerTotalMillis] = react_1.useState((_d = (_c = connection.timerState) === null || _c === void 0 ? void 0 : _c.durationMillis) !== null && _d !== void 0 ? _d : 0);
-    const [timerTicking, setTimerTicking] = react_1.useState((_f = (_e = connection.timerState) === null || _e === void 0 ? void 0 : _e.ticking) !== null && _f !== void 0 ? _f : false);
-    const updateTimerElapsed = react_1.useCallback(() => {
+    const [timerElapsed, setTimerElapsed] = (0, react_1.useState)(0);
+    const [timerStartedAt, setTimerStartedAt] = (0, react_1.useState)((_b = (_a = connection.timerState) === null || _a === void 0 ? void 0 : _a.startedAt) !== null && _b !== void 0 ? _b : 0);
+    const [timerTotalMillis, setTimerTotalMillis] = (0, react_1.useState)((_d = (_c = connection.timerState) === null || _c === void 0 ? void 0 : _c.durationMillis) !== null && _d !== void 0 ? _d : 0);
+    const [timerTicking, setTimerTicking] = (0, react_1.useState)((_f = (_e = connection.timerState) === null || _e === void 0 ? void 0 : _e.ticking) !== null && _f !== void 0 ? _f : false);
+    const updateTimerElapsed = (0, react_1.useCallback)(() => {
         const timerElapsed = timerTicking ? Date.now() - timerStartedAt : 0;
         setTimerElapsed(timerElapsed);
     }, [timerTicking, timerStartedAt]);
-    const updateTimerState = react_1.useCallback((timerState) => {
+    const updateTimerState = (0, react_1.useCallback)((timerState) => {
         setTimerTotalMillis(timerState.durationMillis);
         setTimerTicking(timerState.ticking);
         if (timerState.ticking) {
@@ -59,7 +63,7 @@ function Timer({ className, style, connection: customConnection, separator = ':'
         }
     }, []);
     // Deal with starting/stopping the visual ticking of the timer
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (timerTicking) {
             updateTimerElapsed();
             const ticker = setInterval(updateTimerElapsed, 100);
@@ -69,7 +73,7 @@ function Timer({ className, style, connection: customConnection, separator = ':'
         }
         return;
     }, [timerTicking, updateTimerElapsed]);
-    useCogsMessage_1.default(connection, react_1.useCallback((message) => {
+    (0, useCogsMessage_1.default)(connection, (0, react_1.useCallback)((message) => {
         if (message.type === 'adjustable_timer_update') {
             updateTimerState({ startedAt: Date.now(), ticking: message.ticking, durationMillis: message.durationMillis });
         }

package/dist/components/VideoContainer.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -22,10 +26,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
 function VideoContainer({ className, style, videoPlayer: customVideoPlayer, fullscreen, }) {
-    const containerRef = react_1.useRef(null);
-    const providerVideoPlayer = CogsConnectionProvider_1.useVideoPlayer();
+    const containerRef = (0, react_1.useRef)(null);
+    const providerVideoPlayer = (0, CogsConnectionProvider_1.useVideoPlayer)();
     const videoPlayer = customVideoPlayer !== null && customVideoPlayer !== void 0 ? customVideoPlayer : providerVideoPlayer;
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (videoPlayer && containerRef.current) {
             videoPlayer.setParentElement(containerRef.current);
             return () => videoPlayer.resetParentElement();

package/dist/hooks/useAudioClips.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 function useAudioClips(audioPlayer) {
-    const [audioClips, setAudioClips] = react_1.useState({});
-    react_1.useEffect(() => {
+    const [audioClips, setAudioClips] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
         const listener = (event) => setAudioClips(event.detail.clips);
         audioPlayer.addEventListener('state', listener);
         return () => audioPlayer.removeEventListener('state', listener);

package/dist/hooks/useCogsConfig.d.ts

@@ -1,4 +1,2 @@
 import { CogsConnection } from '@clockworkdog/cogs-client';
-declare type ConfigType<Connection> = Connection extends CogsConnection<infer Types> ? Types['config'] : never;
-export default function useCogsConfig<Connection extends CogsConnection<any>>(connection: Connection): ConfigType<Connection>;
-export {};
+export default function useCogsConfig<Connection extends CogsConnection<any>>(connection: Connection): Connection['config'];

package/dist/hooks/useCogsConfig.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useCogsConfig(connection) {
-    const [config, setConfig] = react_1.useState(connection.config);
-    react_1.useEffect(() => {
-        const listener = (event) => setConfig(event.detail);
+    const [config, setConfig] = (0, react_1.useState)(connection.config);
+    (0, react_1.useEffect)(() => {
+        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);

package/dist/hooks/useCogsEvent.d.ts

@@ -1,4 +1,5 @@
-import { CogsConnection, EventKeyValue } from '@clockworkdog/cogs-client';
-declare type InputEventType<Connection> = Connection extends CogsConnection<infer Types> ? NonNullable<Types['inputEvents']> : never;
-export default function useCogsEvent<Connection extends CogsConnection<any>, EventKey extends keyof InputEventType<Connection>>(connection: Connection, eventKey: EventKey, handleEvent: (event: EventKeyValue<Pick<InputEventType<Connection>, EventKey>>['value']) => void): void;
-export {};
+import { CogsConnection, CogsIncomingEventTypes, ManifestTypes } from '@clockworkdog/cogs-client';
+import { ManifestFromConnection } from '../utils/types';
+export default function useCogsEvent<Connection extends CogsConnection<any>, EventName extends string & ManifestTypes.EventNameFromCogs<ManifestFromConnection<Connection>>>(connection: Connection, eventName: EventName, handleEvent: (event: Extract<CogsIncomingEventTypes<ManifestTypes.EventFromCogs<ManifestFromConnection<Connection>>>, {
+    name: EventName;
+}>) => void): void;

package/dist/hooks/useCogsEvent.js

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function useCogsEvent(connection, eventKey, handleEvent) {
-    react_1.useEffect(() => {
+function useCogsEvent(connection, eventName, handleEvent) {
+    (0, react_1.useEffect)(() => {
         const listener = (event) => {
-            if (event.detail.key === eventKey) {
-                handleEvent(event.detail.value);
+            if (event.name === eventName) {
+                handleEvent(event.value);
             }
         };
         connection.addEventListener('event', listener);
         return () => connection.removeEventListener('event', listener);
-    }, [connection, eventKey, handleEvent]);
+    }, [connection, eventName, handleEvent]);
 }
 exports.default = useCogsEvent;

package/dist/hooks/useCogsEvents.d.ts

@@ -1,4 +1,3 @@
-import { CogsConnection, EventKeyValue } from '@clockworkdog/cogs-client';
-declare type InputEventType<Connection> = Connection extends CogsConnection<infer Types> ? NonNullable<Types['inputEvents']> : never;
-export default function useCogsEvents<Connection extends CogsConnection<any>, Event extends EventKeyValue<InputEventType<Connection>>>(connection: Connection, handleEvent: (event: Event) => void): void;
-export {};
+import { CogsConnection, CogsIncomingEvent, ManifestTypes } from '@clockworkdog/cogs-client';
+import { ManifestFromConnection } from '../utils/types';
+export default function useCogsEvents<Connection extends CogsConnection<any>>(connection: Connection, handleEvent: (event: CogsIncomingEvent<ManifestTypes.EventFromCogs<ManifestFromConnection<Connection>>>) => void): void;

package/dist/hooks/useCogsEvents.js

@@ -1,10 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useCogsEvents(connection, handleEvent) {
-    react_1.useEffect(() => {
-        const listener = (event) => handleEvent(event.detail);
+    (0, react_1.useEffect)(() => {
+        const listener = (event) => handleEvent(event);
         connection.addEventListener('event', listener);
         return () => connection.removeEventListener('event', listener);
     }, [connection, handleEvent]);

package/dist/hooks/useCogsMessage.d.ts

@@ -1,2 +1,2 @@
 import { CogsClientMessage, CogsConnection } from '@clockworkdog/cogs-client';
-export default function useCogsMessage<T extends CogsClientMessage = CogsClientMessage>(connection: CogsConnection, handleMessage: (message: T) => void): void;
+export default function useCogsMessage<Connection extends CogsConnection<any>>(connection: Connection, handleMessage: (message: CogsClientMessage) => void): void;

package/dist/hooks/useCogsMessage.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 function useCogsMessage(connection, handleMessage) {
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const listener = (event) => {
-            handleMessage(event.detail);
+            handleMessage(event.message);
         };
         connection.addEventListener('message', listener);
         return () => connection.removeEventListener('message', listener);

package/dist/hooks/useCogsStateValue.d.ts

@@ -0,0 +1,3 @@
+import { CogsConnection, ManifestTypes } from '@clockworkdog/cogs-client';
+import { ManifestFromConnection } from '../utils/types';
+export default function useCogsStateValue<Connection extends CogsConnection<any>, Name extends string & ManifestTypes.StateName<ManifestFromConnection<Connection>>>(connection: Connection, stateName: Name): ManifestTypes.StateValue<ManifestFromConnection<Connection>, Name>;

package/dist/hooks/useCogsStateValue.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useCogsStateValue(connection, stateName) {
+    const [value, setValue] = (0, react_1.useState)(connection.state[stateName]);
+    (0, react_1.useEffect)(() => {
+        const listener = ({ state }) => {
+            const value = state[stateName];
+            if (value !== undefined) {
+                setValue(value);
+            }
+        };
+        connection.addEventListener('state', listener);
+        return () => connection.removeEventListener('state', listener);
+    }, [connection, stateName]);
+    return value;
+}
+exports.default = useCogsStateValue;

package/dist/hooks/useCogsStateValues.d.ts

@@ -0,0 +1,2 @@
+import { CogsConnection } from '@clockworkdog/cogs-client';
+export default function useCogsInputPortValues<Connection extends CogsConnection<any>>(connection: Connection): Connection['state'];

package/dist/hooks/useCogsStateValues.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useCogsInputPortValues(connection) {
+    const [value, setValue] = (0, react_1.useState)(connection.state);
+    (0, react_1.useEffect)(() => {
+        setValue(connection.state);
+        const listener = () => setValue(connection.state);
+        connection.addEventListener('state', listener);
+        return () => connection.removeEventListener('state', listener);
+    }, [connection]);
+    return value;
+}
+exports.default = useCogsInputPortValues;

package/dist/hooks/useHint.d.ts

@@ -1,2 +1,2 @@
 import { CogsConnection } from '@clockworkdog/cogs-client';
-export default function useHint(connection: CogsConnection): string | null;
+export default function useHint<Connection extends CogsConnection<any>>(connection: Connection): string | null;

package/dist/hooks/useHint.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
 function useHint(connection) {
-    const [hint, setHint] = react_1.useState('');
-    useCogsMessage_1.default(connection, react_1.useCallback((message) => {
+    const [hint, setHint] = (0, react_1.useState)('');
+    (0, useCogsMessage_1.default)(connection, (0, react_1.useCallback)((message) => {
         message.type === 'text_hints_update' && setHint(message.lastSentHint);
     }, []));
     return hint || null;

package/dist/hooks/useImages.d.ts

@@ -1,6 +1,6 @@
 import { CogsConnection, MediaObjectFit } from '@clockworkdog/cogs-client';
-export declare type Image = {
+export type Image = {
     file: string;
     fit: MediaObjectFit;
 };
-export default function useImages(connection: CogsConnection): Image[];
+export default function useImages<Connection extends CogsConnection<any>>(connection: Connection): Image[];

package/dist/hooks/useImages.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
 function useImages(connection) {
-    const [images, setImages] = react_1.useState([]);
-    useCogsMessage_1.default(connection, react_1.useCallback((message) => {
+    const [images, setImages] = (0, react_1.useState)([]);
+    (0, useCogsMessage_1.default)(connection, (0, react_1.useCallback)((message) => {
         switch (message.type) {
             case 'image_show':
                 {

package/dist/hooks/useIsAudioPlaying.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 function useIsAudioPlaying(audioPlayer) {
-    const [isAudioPlaying, setAudioPlaying] = react_1.useState(false);
-    react_1.useEffect(() => {
+    const [isAudioPlaying, setAudioPlaying] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         const listener = (event) => setAudioPlaying(event.detail.isPlaying);
         audioPlayer.addEventListener('state', listener);
         return () => audioPlayer.removeEventListener('state', listener);

package/dist/hooks/useIsConnected.d.ts

@@ -1,2 +1,2 @@
 import { CogsConnection } from '@clockworkdog/cogs-client';
-export default function useIsConnected(connection: CogsConnection): boolean;
+export default function useIsConnected<Connection extends CogsConnection<any>>(connection: Connection): boolean;

package/dist/hooks/useIsConnected.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 function useIsConnected(connection) {
-    const [isConnected, setConnected] = react_1.useState(connection.isConnected);
-    react_1.useEffect(() => {
+    const [isConnected, setConnected] = (0, react_1.useState)(connection.isConnected);
+    (0, react_1.useEffect)(() => {
         // The connection may have opened in between the useState initialization above
         // and this useEffect logic running so use the latest state from the connection
         setConnected(connection.isConnected);

package/dist/hooks/usePageVisibility.js

@@ -5,9 +5,9 @@ const react_1 = require("react");
  * Uses the Page Visibility API to detect if the page is currently visible to the user.
  */
 function usePageVisibility() {
-    const [isVisible, setIsVisible] = react_1.useState(() => !document.hidden);
-    const onVisibilityChange = react_1.useCallback(() => setIsVisible(!document.hidden), []);
-    react_1.useEffect(() => {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(() => !document.hidden);
+    const onVisibilityChange = (0, react_1.useCallback)(() => setIsVisible(!document.hidden), []);
+    (0, react_1.useEffect)(() => {
         document.addEventListener('visibilitychange', onVisibilityChange, false);
         return () => {
             document.removeEventListener('visibilitychange', onVisibilityChange);

package/dist/hooks/usePreloadedUrl.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const cogs_client_1 = require("@clockworkdog/cogs-client");
 const react_1 = require("react");
 function usePreloadedUrl(url) {
-    const [preloadedUrl, setPreloadedUrl] = react_1.useState();
-    react_1.useEffect(() => {
-        cogs_client_1.preloadUrl(url).then((url) => setPreloadedUrl(url));
+    const [preloadedUrl, setPreloadedUrl] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        (0, cogs_client_1.preloadUrl)(url).then((url) => setPreloadedUrl(url));
     }, [url]);
     return preloadedUrl;
 }

package/dist/hooks/useShowPhase.d.ts

@@ -1,2 +1,2 @@
 import { CogsConnection, ShowPhase } from '@clockworkdog/cogs-client';
-export default function useShowPhase(connection: CogsConnection): ShowPhase;
+export default function useShowPhase<Connection extends CogsConnection<any>>(connection: Connection): ShowPhase;

package/dist/hooks/useShowPhase.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
 function useShowPhase(connection) {
-    const [status, setStatus] = react_1.useState(connection.showPhase);
-    useCogsMessage_1.default(connection, react_1.useCallback((message) => {
+    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);
         }

package/dist/hooks/useWhenShowReset.d.ts

@@ -1,2 +1,2 @@
 import { CogsConnection } from '@clockworkdog/cogs-client';
-export default function useWhenShowReset(connection: CogsConnection, whenReset: () => void): void;
+export default function useWhenShowReset<Connection extends CogsConnection<any>>(connection: Connection, whenReset: () => void): void;

package/dist/hooks/useWhenShowReset.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
 function useWhenShowReset(connection, whenReset) {
-    useCogsMessage_1.default(connection, react_1.useCallback((message) => {
+    (0, useCogsMessage_1.default)(connection, (0, react_1.useCallback)((message) => {
         if (message.type === 'show_reset') {
             whenReset();
         }

package/dist/index.d.ts

@@ -2,8 +2,9 @@ export { default as CogsConnectionProvider, useCogsConnection, useAudioPlayer, u
 export { default as useIsConnected } from './hooks/useIsConnected';
 export { default as useCogsConfig } from './hooks/useCogsConfig';
 export { default as useCogsEvent } from './hooks/useCogsEvent';
-export { default as useCogsInputPortValue } from './hooks/useCogsInputPortValue';
-export { default as useCogsInputPortValues } from './hooks/useCogsInputPortValues';
+export { default as useCogsEvents } from './hooks/useCogsEvents';
+export { default as useCogsStateValue } from './hooks/useCogsStateValue';
+export { default as useCogsStateValues } from './hooks/useCogsStateValues';
 export { default as useCogsMessage } from './hooks/useCogsMessage';
 export { default as usePreloadedUrl } from './hooks/usePreloadedUrl';
 export { default as useShowPhase } from './hooks/useShowPhase';

package/dist/index.js

@@ -3,7 +3,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.useCogsInputPortValues = exports.useCogsInputPortValue = 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.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; } });
@@ -16,10 +16,12 @@ var useCogsConfig_1 = require("./hooks/useCogsConfig");
 Object.defineProperty(exports, "useCogsConfig", { enumerable: true, get: function () { return __importDefault(useCogsConfig_1).default; } });
 var useCogsEvent_1 = require("./hooks/useCogsEvent");
 Object.defineProperty(exports, "useCogsEvent", { enumerable: true, get: function () { return __importDefault(useCogsEvent_1).default; } });
-var useCogsInputPortValue_1 = require("./hooks/useCogsInputPortValue");
-Object.defineProperty(exports, "useCogsInputPortValue", { enumerable: true, get: function () { return __importDefault(useCogsInputPortValue_1).default; } });
-var useCogsInputPortValues_1 = require("./hooks/useCogsInputPortValues");
-Object.defineProperty(exports, "useCogsInputPortValues", { enumerable: true, get: function () { return __importDefault(useCogsInputPortValues_1).default; } });
+var useCogsEvents_1 = require("./hooks/useCogsEvents");
+Object.defineProperty(exports, "useCogsEvents", { enumerable: true, get: function () { return __importDefault(useCogsEvents_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");
+Object.defineProperty(exports, "useCogsStateValues", { enumerable: true, get: function () { return __importDefault(useCogsStateValues_1).default; } });
 var useCogsMessage_1 = require("./hooks/useCogsMessage");
 Object.defineProperty(exports, "useCogsMessage", { enumerable: true, get: function () { return __importDefault(useCogsMessage_1).default; } });
 var usePreloadedUrl_1 = require("./hooks/usePreloadedUrl");

package/dist/providers/CogsConnectionProvider.d.ts

@@ -1,6 +1,5 @@
-import { CogsAudioPlayer, CogsConnection, CogsVideoPlayer } from '@clockworkdog/cogs-client';
+import { CogsAudioPlayer, CogsConnection, CogsPluginManifest, CogsVideoPlayer } from '@clockworkdog/cogs-client';
 import React from 'react';
-declare type CogsConnectionCustomTypes<Connection> = Connection extends CogsConnection<infer T> ? T : never;
 /**
  * Create a persistent connection to COGS which can be accessed with `useCogsConnection()`
  * @param audioPlayer Creates a `CogsAudioPlayer` than can be accessed with `useAudioPlayer()`
@@ -14,6 +13,8 @@ declare type CogsConnectionCustomTypes<Connection> = Connection extends CogsConn
  * *Example:*
  *
  * ```jsx
+ * import manifest from './cogs-plugin-manifest.js';
+ *
  * function MyComponent() {
  *   const cogsConnection = useCogsConnection();
  *   const numberOfPlayers = useCogsConfig(cogsConnection)['Number of players'];
@@ -22,7 +23,7 @@ declare type CogsConnectionCustomTypes<Connection> = Connection extends CogsConn
  * }
  *
  * function App() {
- *   return <CogsConnectionProvider audioPlayer videoPlayer>
+ *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
  *     <MyComponent />
  *   <CogsConnectionProvider/>;
  * }
@@ -31,25 +32,24 @@ declare type CogsConnectionCustomTypes<Connection> = Connection extends CogsConn
  * or with Typescript:
  *
  * ```tsx
- * type CogsProjectDataTypes = {
- *   config: { 'Number of players': number }
- * };
+ * import manifest from './cogs-plugin-manifest.js'; // Requires `"allowJs": true` in `tsconfig.json`
  *
  * function MyComponent() {
- *   const cogsConnection = useCogsConnection<CogsProjectDataTypes>();
+ *   const cogsConnection = useCogsConnection<typeof manifest>();
  *   const numberOfPlayers = useCogsConfig(cogsConnection)['Number of players'];
  *
  *   return <div>Players: {numberOfPlayers}</div>;
  * }
  *
  * function App() {
- *   return <CogsConnectionProvider audioPlayer videoPlayer>
+ *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
  *     <MyComponent />
  *   <CogsConnectionProvider/>;
  * }
  * ```
  */
-export default function CogsConnectionProvider({ hostname, port, children, audioPlayer, videoPlayer, }: {
+export default function CogsConnectionProvider<Manifest extends CogsPluginManifest>({ manifest, hostname, port, children, audioPlayer, videoPlayer, }: {
+    manifest: Manifest;
     hostname?: string;
     port?: number;
     children: React.ReactNode;
@@ -59,13 +59,12 @@ export default function CogsConnectionProvider({ hostname, port, children, audio
 /**
  * Get the connection from `<CogsConnectionProvider>`
  */
-export declare function useCogsConnection<CustomTypes extends CogsConnectionCustomTypes<CogsConnection>>(): CogsConnection<CustomTypes>;
+export declare function useCogsConnection<Manifest extends CogsPluginManifest>(): CogsConnection<Manifest>;
 /**
  * Get the audio player from `<CogsConnectionProvider audioPlayer>`
  */
-export declare function useAudioPlayer(): CogsAudioPlayer | null;
+export declare function useAudioPlayer<Manifest extends CogsPluginManifest>(): CogsAudioPlayer | null;
 /**
  * Get the video player from `<CogsConnectionProvider audioPlayer>`
  */
-export declare function useVideoPlayer(): CogsVideoPlayer | null;
-export {};
+export declare function useVideoPlayer<Manifest extends CogsPluginManifest>(): CogsVideoPlayer | null;

package/dist/providers/CogsConnectionProvider.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -23,9 +27,15 @@ exports.useVideoPlayer = exports.useAudioPlayer = exports.useCogsConnection = vo
 const cogs_client_1 = require("@clockworkdog/cogs-client");
 const react_1 = __importStar(require("react"));
 const CogsConnectionContext = react_1.default.createContext({
-    useCogsConnection: () => undefined,
-    useAudioPlayer: () => undefined,
-    useVideoPlayer: () => undefined,
+    useCogsConnection: () => {
+        throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
+    },
+    useAudioPlayer: () => {
+        throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
+    },
+    useVideoPlayer: () => {
+        throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
+    },
 });
 /**
  * Create a persistent connection to COGS which can be accessed with `useCogsConnection()`
@@ -40,6 +50,8 @@ const CogsConnectionContext = react_1.default.createContext({
  * *Example:*
  *
  * ```jsx
+ * import manifest from './cogs-plugin-manifest.js';
+ *
  * function MyComponent() {
  *   const cogsConnection = useCogsConnection();
  *   const numberOfPlayers = useCogsConfig(cogsConnection)['Number of players'];
@@ -48,7 +60,7 @@ const CogsConnectionContext = react_1.default.createContext({
  * }
  *
  * function App() {
- *   return <CogsConnectionProvider audioPlayer videoPlayer>
+ *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
  *     <MyComponent />
  *   <CogsConnectionProvider/>;
  * }
@@ -57,44 +69,42 @@ const CogsConnectionContext = react_1.default.createContext({
  * or with Typescript:
  *
  * ```tsx
- * type CogsProjectDataTypes = {
- *   config: { 'Number of players': number }
- * };
+ * import manifest from './cogs-plugin-manifest.js'; // Requires `"allowJs": true` in `tsconfig.json`
  *
  * function MyComponent() {
- *   const cogsConnection = useCogsConnection<CogsProjectDataTypes>();
+ *   const cogsConnection = useCogsConnection<typeof manifest>();
  *   const numberOfPlayers = useCogsConfig(cogsConnection)['Number of players'];
  *
  *   return <div>Players: {numberOfPlayers}</div>;
  * }
  *
  * function App() {
- *   return <CogsConnectionProvider audioPlayer videoPlayer>
+ *   return <CogsConnectionProvider manifest={manifest} audioPlayer videoPlayer>
  *     <MyComponent />
  *   <CogsConnectionProvider/>;
  * }
  * ```
  */
-function CogsConnectionProvider({ hostname, port, children, audioPlayer, videoPlayer, }) {
-    const connectionRef = react_1.useRef();
-    const [, forceRender] = react_1.useState({});
-    react_1.useEffect(() => {
-        const connection = new cogs_client_1.CogsConnection({ hostname, port });
+function CogsConnectionProvider({ manifest, hostname, port, children, audioPlayer, videoPlayer, }) {
+    const connectionRef = (0, react_1.useRef)();
+    const [, forceRender] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        const connection = new cogs_client_1.CogsConnection(manifest, { hostname, port });
         connectionRef.current = connection;
         forceRender({});
         return () => {
             connectionRef.current = undefined;
             connection.close();
         };
-    }, [hostname, port]);
-    const audioPlayerRef = react_1.useRef();
-    react_1.useEffect(() => {
+    }, [manifest, hostname, port]);
+    const audioPlayerRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
         if (audioPlayer && !audioPlayerRef.current && connectionRef.current) {
             audioPlayerRef.current = new cogs_client_1.CogsAudioPlayer(connectionRef.current);
         }
     }, [audioPlayer]);
-    const videoPlayerRef = react_1.useRef();
-    react_1.useEffect(() => {
+    const videoPlayerRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
         if (videoPlayer && !videoPlayerRef.current && connectionRef.current) {
             videoPlayerRef.current = new cogs_client_1.CogsVideoPlayer(connectionRef.current);
         }
@@ -116,20 +126,20 @@ exports.default = CogsConnectionProvider;
  * Get the connection from `<CogsConnectionProvider>`
  */
 function useCogsConnection() {
-    return react_1.useContext(CogsConnectionContext).useCogsConnection();
+    return (0, react_1.useContext)(CogsConnectionContext).useCogsConnection();
 }
 exports.useCogsConnection = useCogsConnection;
 /**
  * Get the audio player from `<CogsConnectionProvider audioPlayer>`
  */
 function useAudioPlayer() {
-    return react_1.useContext(CogsConnectionContext).useAudioPlayer();
+    return (0, react_1.useContext)(CogsConnectionContext).useAudioPlayer();
 }
 exports.useAudioPlayer = useAudioPlayer;
 /**
  * Get the video player from `<CogsConnectionProvider audioPlayer>`
  */
 function useVideoPlayer() {
-    return react_1.useContext(CogsConnectionContext).useVideoPlayer();
+    return (0, react_1.useContext)(CogsConnectionContext).useVideoPlayer();
 }
 exports.useVideoPlayer = useVideoPlayer;

package/dist/utils/types.d.ts

@@ -0,0 +1,2 @@
+import { CogsConnection } from '@clockworkdog/cogs-client';
+export type ManifestFromConnection<Connection> = Connection extends CogsConnection<infer Manifest> ? Manifest : never;

package/dist/utils/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clockworkdog/cogs-client-react",
-  "version": "v1.5.7",
+  "version": "v2.0.0",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -16,6 +16,7 @@
   "author": "Clockwork Dog <info@clockwork.dog>",
   "license": "MIT",
   "devDependencies": {
+    "@types/node": "18",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
@@ -27,10 +28,10 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^2.2.1",
     "typedoc": "^0.21.4",
-    "typescript": "^4.1.3"
+    "typescript": "^5.1.6"
   },
   "dependencies": {
-    "@clockworkdog/cogs-client": "^1.5.6"
+    "@clockworkdog/cogs-client": "^2.0.0"
   },
   "description": "React components and hooks to connect to COGS to build a custom Media Master",
   "repository": {

package/dist/hooks/useCogsInputPortValue.d.ts

@@ -1,4 +0,0 @@
-import { CogsConnection } from '@clockworkdog/cogs-client';
-declare type InputPortsType<Connection> = Connection extends CogsConnection<infer Types> ? Types['inputPorts'] : never;
-export default function useCogsInputPortValue<Connection extends CogsConnection<any>, PortName extends keyof NonNullable<InputPortsType<Connection>>>(connection: Connection, portName: PortName): NonNullable<InputPortsType<Connection>>[PortName];
-export {};

package/dist/hooks/useCogsInputPortValue.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-function useCogsInputPortValue(connection, portName) {
-    const [value, setValue] = react_1.useState(connection.inputPortValues[portName]);
-    react_1.useEffect(() => {
-        const listener = (event) => {
-            if (event.detail[portName] !== undefined) {
-                setValue(event.detail[portName]);
-            }
-        };
-        connection.addEventListener('updates', listener);
-        return () => connection.removeEventListener('updates', listener);
-    }, [connection, portName]);
-    return value;
-}
-exports.default = useCogsInputPortValue;

package/dist/hooks/useCogsInputPortValues.d.ts

@@ -1,4 +0,0 @@
-import { CogsConnection } from '@clockworkdog/cogs-client';
-declare type InputPortsType<Connection> = Connection extends CogsConnection<infer Types> ? Types['inputPorts'] : never;
-export default function useCogsInputPortValues<Connection extends CogsConnection<any>>(connection: Connection): InputPortsType<Connection>;
-export {};

package/dist/hooks/useCogsInputPortValues.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function useCogsInputPortValues(connection) {
-    const [value, setValue] = react_1.useState(connection.inputPortValues);
-    react_1.useEffect(() => {
-        const listener = () => setValue(connection.inputPortValues);
-        connection.addEventListener('updates', listener);
-        return () => connection.removeEventListener('updates', listener);
-    }, [connection]);
-    return value;
-}
-exports.default = useCogsInputPortValues;