@clockworkdog/cogs-client-react 2.6.0 → 2.8.0

package/README.md

@@ -1,10 +1,10 @@
-# COGS Client React library
+# COGS SDK - React
 
 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/)
+## [Documentation](https://clockwork-dog.github.io/cogs-sdk/react/)
 
 ## Add to your project
 
@@ -22,7 +22,7 @@ yarn add @clockworkdog/cogs-client-react
 
 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.
+See the [CogsPluginManifestJson documentation](https://clockwork-dog.github.io/cogs-sdk/javascript/interfaces/CogsPluginManifestJson.html) for more information on the manifest format.
 
 e.g.
 

package/dist/components/Hint.d.ts

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

package/dist/components/Hint.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Hint;
 const react_1 = __importDefault(require("react"));
 const useHint_1 = __importDefault(require("../hooks/useHint"));
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
@@ -11,4 +12,3 @@ function Hint({ connection: customConnection, }) {
     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

@@ -1,5 +1,5 @@
 import { CogsConnection } from '@clockworkdog/cogs-client';
-import React from 'react';
+import React, { ReactNode } from 'react';
 export default function Images({ className, style, connection: customConnection, fullscreen, }: {
     className?: string;
     style?: React.CSSProperties;
@@ -7,4 +7,4 @@ export default function Images({ className, style, connection: customConnection,
     fullscreen?: boolean | {
         style: React.CSSProperties;
     };
-}): JSX.Element | null;
+}): ReactNode;

package/dist/components/Images.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Images;
 const react_1 = __importDefault(require("react"));
 const useImages_1 = __importDefault(require("../hooks/useImages"));
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
@@ -20,4 +21,3 @@ function Images({ className, style, connection: customConnection, fullscreen, })
     });
     return (react_1.default.createElement(react_1.default.Fragment, null, fullscreen ? (react_1.default.createElement("div", { style: { position: 'absolute', zIndex: 2, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle } }, imageElements)) : (imageElements)));
 }
-exports.default = Images;

package/dist/components/RtspVideo.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 export interface RtspVideoProps {
     uri: string;
     websocketHostname?: string;
@@ -11,4 +11,4 @@ export interface RtspVideoProps {
  * websocket on the same hostname as COGS is running, but can be configured by passing in custom
  * websocket details.
  */
-export default function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live, ...rest }: RtspVideoProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>): JSX.Element | null;
+export default function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live, ...rest }: RtspVideoProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>): ReactNode;

package/dist/components/RtspVideo.js

@@ -15,17 +15,28 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RtspVideo;
 const cogs_client_1 = require("@clockworkdog/cogs-client");
 const react_1 = __importStar(require("react"));
 const usePageVisibility_1 = __importDefault(require("../hooks/usePageVisibility"));
@@ -68,4 +79,3 @@ function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live,
     }, [uri, isVisible, rtspStreamer, videoRef, live]);
     return react_1.default.createElement("video", { ref: videoRefCallback, autoPlay: true, ...rest });
 }
-exports.default = RtspVideo;

package/dist/components/Timer.d.ts

@@ -6,4 +6,4 @@ export default function Timer({ className, style, connection: customConnection,
     connection?: CogsConnection<any>;
     separator?: string;
     center?: boolean;
-}): JSX.Element;
+}): React.ReactNode;

package/dist/components/Timer.js

@@ -15,17 +15,28 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Timer;
 const react_1 = __importStar(require("react"));
 const useCogsMessage_1 = __importDefault(require("../hooks/useCogsMessage"));
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
@@ -84,4 +95,3 @@ function Timer({ className, style, connection: customConnection, separator = ':'
         react_1.default.createElement("span", null, separator),
         react_1.default.createElement("span", { style: center ? { flexBasis: 0, flexGrow: 1, textAlign: 'left' } : undefined }, seconds)));
 }
-exports.default = Timer;

package/dist/components/VideoContainer.d.ts

@@ -1,5 +1,5 @@
 import { CogsVideoPlayer } from '@clockworkdog/cogs-client';
-import React from 'react';
+import React, { ReactNode } from 'react';
 export default function VideoContainer({ className, style, videoPlayer: customVideoPlayer, fullscreen, }: {
     className?: string;
     style?: React.CSSProperties;
@@ -7,4 +7,4 @@ export default function VideoContainer({ className, style, videoPlayer: customVi
     fullscreen?: boolean | {
         style: React.CSSProperties;
     };
-}): JSX.Element | null;
+}): ReactNode;

package/dist/components/VideoContainer.js

@@ -15,14 +15,25 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = VideoContainer;
 const react_1 = __importStar(require("react"));
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
 function VideoContainer({ className, style, videoPlayer: customVideoPlayer, fullscreen, }) {
@@ -39,4 +50,3 @@ function VideoContainer({ className, style, videoPlayer: customVideoPlayer, full
             ? { position: 'absolute', zIndex: 1, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle }
             : { position: 'relative', ...style } }));
 }
-exports.default = VideoContainer;

package/dist/hooks/useAudioClips.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useAudioClips;
 const react_1 = require("react");
 function useAudioClips(audioPlayer) {
     const [audioClips, setAudioClips] = (0, react_1.useState)({});
@@ -10,4 +11,3 @@ function useAudioClips(audioPlayer) {
     }, [audioPlayer]);
     return audioClips;
 }
-exports.default = useAudioClips;

package/dist/hooks/useCogsConfig.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useCogsConfig;
 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;
 }
-exports.default = useCogsConfig;

package/dist/hooks/useCogsEvent.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useCogsEvent;
 const react_1 = require("react");
 function useCogsEvent(connection, eventName, handleEvent) {
     (0, react_1.useEffect)(() => {
@@ -12,4 +13,3 @@ function useCogsEvent(connection, eventName, handleEvent) {
         return () => connection.removeEventListener('event', listener);
     }, [connection, eventName, handleEvent]);
 }
-exports.default = useCogsEvent;

package/dist/hooks/useCogsEvents.js

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

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/useCogsMessage.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useCogsMessage;
 const react_1 = require("react");
 function useCogsMessage(connection, handleMessage) {
     (0, react_1.useEffect)(() => {
@@ -10,4 +11,3 @@ function useCogsMessage(connection, handleMessage) {
         return () => connection.removeEventListener('message', listener);
     }, [connection, handleMessage]);
 }
-exports.default = useCogsMessage;

package/dist/hooks/useCogsStateValue.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useCogsStateValue;
 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) {
@@ -15,4 +18,3 @@ function useCogsStateValue(connection, stateName) {
     }, [connection, stateName]);
     return value;
 }
-exports.default = useCogsStateValue;

package/dist/hooks/useCogsStateValues.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useCogsInputPortValues;
 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);
@@ -11,4 +13,3 @@ function useCogsInputPortValues(connection) {
     }, [connection]);
     return value;
 }
-exports.default = useCogsInputPortValues;

package/dist/hooks/useHint.js

@@ -3,13 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useHint;
 const react_1 = require("react");
 const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
 function useHint(connection) {
     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);
+        if (message.type === 'text_hints_update') {
+            setHint(message.lastSentHint);
+        }
     }, []));
     return hint || null;
 }
-exports.default = useHint;

package/dist/hooks/useImages.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useImages;
 const react_1 = require("react");
 const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
 function useImages(connection) {
@@ -30,4 +31,3 @@ function useImages(connection) {
     }, []));
     return images;
 }
-exports.default = useImages;

package/dist/hooks/useIsAudioPlaying.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useIsAudioPlaying;
 const react_1 = require("react");
 const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
 function useIsAudioPlaying(customAudioPlayer) {
@@ -12,4 +13,3 @@ function useIsAudioPlaying(customAudioPlayer) {
     }, [audioPlayer]);
     return isAudioPlaying;
 }
-exports.default = useIsAudioPlaying;

package/dist/hooks/useIsConnected.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useIsConnected;
 const react_1 = require("react");
 function useIsConnected(connection) {
     const [isConnected, setConnected] = (0, react_1.useState)(connection.isConnected);
@@ -18,4 +19,3 @@ function useIsConnected(connection) {
     }, [connection]);
     return isConnected;
 }
-exports.default = useIsConnected;

package/dist/hooks/usePageVisibility.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = usePageVisibility;
 const react_1 = require("react");
 /**
  * Uses the Page Visibility API to detect if the page is currently visible to the user.
@@ -15,4 +16,3 @@ function usePageVisibility() {
     });
     return isVisible;
 }
-exports.default = usePageVisibility;

package/dist/hooks/usePreloadedUrl.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = usePreloadedUrl;
 const cogs_client_1 = require("@clockworkdog/cogs-client");
 const react_1 = require("react");
 function usePreloadedUrl(url) {
@@ -9,4 +10,3 @@ function usePreloadedUrl(url) {
     }, [url]);
     return preloadedUrl;
 }
-exports.default = usePreloadedUrl;

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;
 }
-exports.default = useShowPhase;

package/dist/hooks/useWhenShowReset.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useWhenShowReset;
 const react_1 = require("react");
 const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
 function useWhenShowReset(connection, whenReset) {
@@ -12,4 +13,3 @@ function useWhenShowReset(connection, whenReset) {
         }
     }, [whenReset]));
 }
-exports.default = useWhenShowReset;

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,5 +1,5 @@
 import { CogsAudioPlayer, CogsConnection, CogsPluginManifest, CogsVideoPlayer } from '@clockworkdog/cogs-client';
-import React from 'react';
+import React, { ReactNode } from 'react';
 /**
  * Create a persistent connection to COGS which can be accessed with `useCogsConnection()`
  * @param audioPlayer Creates a `CogsAudioPlayer` than can be accessed with `useAudioPlayer()`
@@ -55,7 +55,7 @@ export default function CogsConnectionProvider<Manifest extends CogsPluginManife
     children: React.ReactNode;
     audioPlayer?: boolean;
     videoPlayer?: boolean;
-}): JSX.Element | null;
+}): ReactNode | null;
 /**
  * Get the connection from `<CogsConnectionProvider>`
  */

package/dist/providers/CogsConnectionProvider.js

@@ -15,17 +15,31 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVideoPlayer = exports.useAudioPlayer = exports.useCogsConnection = void 0;
+exports.default = CogsConnectionProvider;
+exports.useCogsConnection = useCogsConnection;
+exports.useAudioPlayer = useAudioPlayer;
+exports.useVideoPlayer = useVideoPlayer;
 const cogs_client_1 = require("@clockworkdog/cogs-client");
 const react_1 = __importStar(require("react"));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const CogsConnectionContext = react_1.default.createContext({
     useCogsConnection: (customConnection) => {
         if (!customConnection) {
@@ -95,7 +109,7 @@ const CogsConnectionContext = react_1.default.createContext({
  * ```
  */
 function CogsConnectionProvider({ manifest, hostname, port, children, audioPlayer, videoPlayer, }) {
-    const connectionRef = (0, react_1.useRef)();
+    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 });
@@ -106,13 +120,13 @@ function CogsConnectionProvider({ manifest, hostname, port, children, audioPlaye
             connection.close();
         };
     }, [manifest, hostname, port]);
-    const audioPlayerRef = (0, react_1.useRef)();
+    const audioPlayerRef = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(() => {
         if (audioPlayer && !audioPlayerRef.current && connectionRef.current) {
             audioPlayerRef.current = new cogs_client_1.CogsAudioPlayer(connectionRef.current);
         }
     }, [audioPlayer]);
-    const videoPlayerRef = (0, react_1.useRef)();
+    const videoPlayerRef = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(() => {
         if (videoPlayer && !videoPlayerRef.current && connectionRef.current) {
             videoPlayerRef.current = new cogs_client_1.CogsVideoPlayer(connectionRef.current);
@@ -123,32 +137,27 @@ function CogsConnectionProvider({ manifest, hostname, port, children, audioPlaye
         return null;
     }
     const value = {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         useCogsConnection: (customConnection) => customConnection !== null && customConnection !== void 0 ? customConnection : connectionRef.current,
         useAudioPlayer: (customAudioPlayer) => { var _a; return (_a = customAudioPlayer !== null && customAudioPlayer !== void 0 ? customAudioPlayer : audioPlayerRef.current) !== null && _a !== void 0 ? _a : null; },
         useVideoPlayer: (customVideoPlayer) => { var _a; return (_a = customVideoPlayer !== null && customVideoPlayer !== void 0 ? customVideoPlayer : videoPlayerRef.current) !== null && _a !== void 0 ? _a : null; },
     };
     return react_1.default.createElement(CogsConnectionContext.Provider, { value: value }, children);
 }
-exports.default = CogsConnectionProvider;
 /**
  * Get the connection from `<CogsConnectionProvider>`
  */
 function useCogsConnection(customConnection) {
     return (0, react_1.useContext)(CogsConnectionContext).useCogsConnection(customConnection);
 }
-exports.useCogsConnection = useCogsConnection;
 /**
  * Get the audio player from `<CogsConnectionProvider audioPlayer>`
  */
 function useAudioPlayer(customAudioPlayer) {
     return (0, react_1.useContext)(CogsConnectionContext).useAudioPlayer(customAudioPlayer);
 }
-exports.useAudioPlayer = useAudioPlayer;
 /**
  * Get the video player from `<CogsConnectionProvider videoPlayer>`
  */
 function useVideoPlayer(customVideoPlayer) {
     return (0, react_1.useContext)(CogsConnectionContext).useVideoPlayer(customVideoPlayer);
 }
-exports.useVideoPlayer = useVideoPlayer;

package/package.json

@@ -1,52 +1,52 @@
 {
   "name": "@clockworkdog/cogs-client-react",
-  "version": "v2.6.0",
-  "main": "dist/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "yarn lint:json && yarn lint:ts",
-    "lint:json": "prettier --list-different .eslintrc *.json",
-    "lint:ts": "eslint --ext .js,.ts --ignore-path .gitignore .",
-    "build": "tsc",
-    "watch-build": "tsc -w",
-    "build-docs": "typedoc --out docs --name @clockworkdog/cogs-client-react src/index.ts",
-    "release": "yarn publish --access public"
-  },
-  "keywords": [],
+  "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.8.0",
+  "keywords": [],
   "license": "MIT",
-  "devDependencies": {
-    "@types/node": "18",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "prettier": "^2.2.1",
-    "typedoc": "^0.25.7",
-    "typescript": "^5.1.6"
-  },
-  "dependencies": {
-    "@clockworkdog/cogs-client": "~2.5"
-  },
-  "description": "React components and hooks to connect to COGS to build a custom Media Master",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/clockwork-dog/cogs-client-react-lib.git"
+    "url": "git+https://github.com/clockwork-dog/cogs-sdk.git"
   },
   "bugs": {
-    "url": "https://github.com/clockwork-dog/cogs-client-react-lib/issues"
+    "url": "https://github.com/clockwork-dog/cogs-sdk/issues"
   },
-  "homepage": "https://cogs.show",
   "files": [
     "dist/**/*"
   ],
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "yarn types && yarn lint",
+    "types": "tsc --noEmit",
+    "lint": "eslint .",
+    "build": "tsc",
+    "watch-build": "tsc -w",
+    "build-docs": "typedoc --out ../../docs/react --name @clockworkdog/cogs-client-react src/index.ts",
+    "release": "yarn npm publish --access public"
+  },
+  "dependencies": {
+    "@clockworkdog/cogs-client": "^2.8.0"
+  },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2",
+    "typedoc": "^0.27.5",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.18.1"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Clockwork Dog
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.