@clockworkdog/cogs-client-react 2.11.0 → 2.11.2

package/dist/components/Hint.js

@@ -1,14 +1,8 @@
-"use strict";
-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");
-function Hint({ connection: customConnection, }) {
-    const connection = (0, CogsConnectionProvider_1.useCogsConnection)(customConnection);
-    const hint = (0, useHint_1.default)(connection);
-    return hint ? react_1.default.createElement(react_1.default.Fragment, null, hint) : null;
+import React from 'react';
+import useHint from '../hooks/useHint';
+import { useCogsConnection } from '../providers/CogsConnectionProvider';
+export default function Hint({ connection: customConnection, }) {
+    const connection = useCogsConnection(customConnection);
+    const hint = useHint(connection);
+    return hint ? React.createElement(React.Fragment, null, hint) : null;
 }

package/dist/components/Images.js

@@ -1,23 +1,14 @@
-"use strict";
-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");
-function Images({ className, style, connection: customConnection, fullscreen, }) {
-    const connection = (0, CogsConnectionProvider_1.useCogsConnection)(customConnection);
-    const images = (0, useImages_1.default)(connection);
+import React from 'react';
+import useImages from '../hooks/useImages';
+import { useCogsConnection } from '../providers/CogsConnectionProvider';
+export default function Images({ className, style, connection: customConnection, fullscreen, }) {
+    const connection = useCogsConnection(customConnection);
+    const images = useImages(connection);
     const fullscreenCustomStyle = typeof fullscreen === 'object' ? fullscreen.style : undefined;
-    const imageElements = images.map((image, index) => {
-        var _a;
-        return (react_1.default.createElement("img", { className: className, key: index, src: (_a = connection.getAssetUrl) === null || _a === void 0 ? void 0 : _a.call(connection, image.file), alt: image.file, style: {
-                objectFit: image.fit,
-                ...(fullscreen ? { width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 } : {}),
-                ...style,
-            } }));
-    });
-    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)));
+    const imageElements = images.map((image, index) => (React.createElement("img", { className: className, key: index, src: connection.getAssetUrl?.(image.file), alt: image.file, style: {
+            objectFit: image.fit,
+            ...(fullscreen ? { width: '100%', height: '100%', position: 'absolute', top: 0, left: 0 } : {}),
+            ...style,
+        } })));
+    return (React.createElement(React.Fragment, null, fullscreen ? (React.createElement("div", { style: { position: 'absolute', zIndex: 2, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle } }, imageElements)) : (imageElements)));
 }

package/dist/components/Timer.js

@@ -1,45 +1,6 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = 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];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-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");
+import React, { useCallback, useEffect, useState } from 'react';
+import useCogsMessage from '../hooks/useCogsMessage';
+import { useCogsConnection } from '../providers/CogsConnectionProvider';
 function formatTime(time, countingUp) {
     const negative = time < 0;
     // Flip things for negative times
@@ -53,18 +14,17 @@ function formatTime(time, countingUp) {
     const seconds = String((roundedTime / 1000) % 60).padStart(2, '0');
     return { minutes, seconds };
 }
-function Timer({ className, style, connection: customConnection, separator = ':', center, }) {
-    var _a, _b, _c, _d, _e, _f;
-    const connection = (0, CogsConnectionProvider_1.useCogsConnection)(customConnection);
-    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)(() => {
+export default function Timer({ className, style, connection: customConnection, separator = ':', center, }) {
+    const connection = useCogsConnection(customConnection);
+    const [timerElapsed, setTimerElapsed] = useState(0);
+    const [timerStartedAt, setTimerStartedAt] = useState(connection.timerState?.startedAt ?? 0);
+    const [timerTotalMillis, setTimerTotalMillis] = useState(connection.timerState?.durationMillis ?? 0);
+    const [timerTicking, setTimerTicking] = useState(connection.timerState?.ticking ?? false);
+    const updateTimerElapsed = useCallback(() => {
         const timerElapsed = timerTicking ? Date.now() - timerStartedAt : 0;
         setTimerElapsed(timerElapsed);
     }, [timerTicking, timerStartedAt]);
-    const updateTimerState = (0, react_1.useCallback)((timerState) => {
+    const updateTimerState = useCallback((timerState) => {
         setTimerTotalMillis(timerState.durationMillis);
         setTimerTicking(timerState.ticking);
         if (timerState.ticking) {
@@ -73,7 +33,7 @@ function Timer({ className, style, connection: customConnection, separator = ':'
         }
     }, []);
     // Deal with starting/stopping the visual ticking of the timer
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (timerTicking) {
             updateTimerElapsed();
             const ticker = setInterval(updateTimerElapsed, 100);
@@ -83,15 +43,15 @@ function Timer({ className, style, connection: customConnection, separator = ':'
         }
         return;
     }, [timerTicking, updateTimerElapsed]);
-    (0, useCogsMessage_1.default)(connection, (0, react_1.useCallback)((message) => {
+    useCogsMessage(connection, useCallback((message) => {
         if (message.type === 'adjustable_timer_update') {
             updateTimerState({ startedAt: Date.now(), ticking: message.ticking, durationMillis: message.durationMillis });
         }
     }, [updateTimerState]));
     const time = timerTicking ? timerTotalMillis - timerElapsed : timerTotalMillis;
     const { minutes, seconds } = formatTime(time, false);
-    return (react_1.default.createElement("div", { className: className, style: center ? { display: 'flex', justifyContent: 'center', ...style } : style },
-        react_1.default.createElement("span", { style: center ? { flexBasis: 0, flexGrow: 1, textAlign: 'right' } : undefined }, minutes),
-        react_1.default.createElement("span", null, separator),
-        react_1.default.createElement("span", { style: center ? { flexBasis: 0, flexGrow: 1, textAlign: 'left' } : undefined }, seconds)));
+    return (React.createElement("div", { className: className, style: center ? { display: 'flex', justifyContent: 'center', ...style } : style },
+        React.createElement("span", { style: center ? { flexBasis: 0, flexGrow: 1, textAlign: 'right' } : undefined }, minutes),
+        React.createElement("span", null, separator),
+        React.createElement("span", { style: center ? { flexBasis: 0, flexGrow: 1, textAlign: 'left' } : undefined }, seconds)));
 }

package/dist/components/VideoContainer.js

@@ -1,52 +1,16 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = 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];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-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, }) {
-    const containerRef = (0, react_1.useRef)(null);
-    const videoPlayer = (0, CogsConnectionProvider_1.useVideoPlayer)(customVideoPlayer !== null && customVideoPlayer !== void 0 ? customVideoPlayer : undefined);
-    (0, react_1.useEffect)(() => {
+import React, { useEffect, useRef } from 'react';
+import { useVideoPlayer } from '../providers/CogsConnectionProvider';
+export default function VideoContainer({ className, style, videoPlayer: customVideoPlayer, fullscreen, }) {
+    const containerRef = useRef(null);
+    const videoPlayer = useVideoPlayer(customVideoPlayer ?? undefined);
+    useEffect(() => {
         if (videoPlayer && containerRef.current) {
             videoPlayer.setParentElement(containerRef.current);
             return () => videoPlayer.resetParentElement();
         }
     }, [videoPlayer]);
     const fullscreenCustomStyle = typeof fullscreen === 'object' ? fullscreen.style : style;
-    return (react_1.default.createElement("div", { ref: containerRef, className: className, style: fullscreen
+    return (React.createElement("div", { ref: containerRef, className: className, style: fullscreen
             ? { position: 'absolute', zIndex: 1, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle }
             : { position: 'relative', ...style } }));
 }

package/dist/hooks/useAudioClips.js

@@ -1,13 +1,10 @@
-"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)({});
-    (0, react_1.useEffect)(() => {
+import { useEffect, useState } from 'react';
+export default function useAudioClips(audioPlayer) {
+    const [audioClips, setAudioClips] = useState({});
+    useEffect(() => {
         const listener = (event) => setAudioClips(event.detail.clips);
-        audioPlayer === null || audioPlayer === void 0 ? void 0 : audioPlayer.addEventListener('state', listener);
-        return () => audioPlayer === null || audioPlayer === void 0 ? void 0 : audioPlayer.removeEventListener('state', listener);
+        audioPlayer?.addEventListener('state', listener);
+        return () => audioPlayer?.removeEventListener('state', listener);
     }, [audioPlayer]);
     return audioClips;
 }

package/dist/hooks/useCogsConfig.js

@@ -1,10 +1,7 @@
-"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)(() => {
+import { useEffect, useState } from 'react';
+export default function useCogsConfig(connection) {
+    const [config, setConfig] = useState(connection.config);
+    useEffect(() => {
         // Use the latest config in case it has changed before this useEffect ran
         setConfig(connection.config);
         const listener = (event) => setConfig(event.config);

package/dist/hooks/useCogsEvent.js

@@ -1,9 +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)(() => {
+import { useEffect } from 'react';
+export default function useCogsEvent(connection, eventName, handleEvent) {
+    useEffect(() => {
         const listener = (event) => {
             if (event.name === eventName) {
                 handleEvent(event.value, eventName);

package/dist/hooks/useCogsEvents.js

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

package/dist/hooks/useCogsMediaConfig.js

@@ -1,10 +1,7 @@
-"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)(() => {
+import { useEffect, useState } from 'react';
+export default function useCogsMediaConfig(connection) {
+    const [mediaConfig, setMediaConfig] = useState(null);
+    useEffect(() => {
         // Use the latest config in case it has changed before this useEffect ran
         setMediaConfig(connection.mediaConfig);
         const listener = ({ mediaConfig }) => {

package/dist/hooks/useCogsMessage.js

@@ -1,9 +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)(() => {
+import { useEffect } from 'react';
+export default function useCogsMessage(connection, handleMessage) {
+    useEffect(() => {
         const listener = (event) => {
             handleMessage(event.message);
         };

package/dist/hooks/useCogsStateValue.js

@@ -1,10 +1,7 @@
-"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)(() => {
+import { useEffect, useState } from 'react';
+export default function useCogsStateValue(connection, stateName) {
+    const [value, setValue] = useState(connection.state[stateName]);
+    useEffect(() => {
         // Use the latest state in case it has changed before this useEffect ran
         setValue(connection.state[stateName]);
         const listener = ({ state }) => {

package/dist/hooks/useCogsStateValues.js

@@ -1,10 +1,7 @@
-"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)(() => {
+import { useEffect, useState } from 'react';
+export default function useCogsInputPortValues(connection) {
+    const [value, setValue] = useState(connection.state);
+    useEffect(() => {
         // Use the latest state in case it has changed before this useEffect ran
         setValue(connection.state);
         const listener = () => setValue(connection.state);

package/dist/hooks/useHint.js

@@ -1,14 +1,8 @@
-"use strict";
-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) => {
+import { useCallback, useState } from 'react';
+import useCogsMessage from './useCogsMessage';
+export default function useHint(connection) {
+    const [hint, setHint] = useState('');
+    useCogsMessage(connection, useCallback((message) => {
         if (message.type === 'text_hints_update') {
             setHint(message.lastSentHint);
         }

package/dist/hooks/useImages.js

@@ -1,14 +1,8 @@
-"use strict";
-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) {
-    const [images, setImages] = (0, react_1.useState)([]);
-    (0, useCogsMessage_1.default)(connection, (0, react_1.useCallback)((message) => {
+import { useCallback, useState } from 'react';
+import useCogsMessage from './useCogsMessage';
+export default function useImages(connection) {
+    const [images, setImages] = useState([]);
+    useCogsMessage(connection, useCallback((message) => {
         switch (message.type) {
             case 'image_show':
                 {

package/dist/hooks/useIsAudioPlaying.js

@@ -1,15 +1,12 @@
-"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) {
-    const [isAudioPlaying, setAudioPlaying] = (0, react_1.useState)(false);
-    const audioPlayer = (0, CogsConnectionProvider_1.useAudioPlayer)(customAudioPlayer !== null && customAudioPlayer !== void 0 ? customAudioPlayer : undefined);
-    (0, react_1.useEffect)(() => {
+import { useEffect, useState } from 'react';
+import { useAudioPlayer } from '../providers/CogsConnectionProvider';
+export default function useIsAudioPlaying(customAudioPlayer) {
+    const [isAudioPlaying, setAudioPlaying] = useState(false);
+    const audioPlayer = useAudioPlayer(customAudioPlayer ?? undefined);
+    useEffect(() => {
         const listener = (event) => setAudioPlaying(event.detail.isPlaying);
-        audioPlayer === null || audioPlayer === void 0 ? void 0 : audioPlayer.addEventListener('state', listener);
-        return () => audioPlayer === null || audioPlayer === void 0 ? void 0 : audioPlayer.removeEventListener('state', listener);
+        audioPlayer?.addEventListener('state', listener);
+        return () => audioPlayer?.removeEventListener('state', listener);
     }, [audioPlayer]);
     return isAudioPlaying;
 }

package/dist/hooks/useIsConnected.js

@@ -1,10 +1,7 @@
-"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);
-    (0, react_1.useEffect)(() => {
+import { useEffect, useState } from 'react';
+export default function useIsConnected(connection) {
+    const [isConnected, setConnected] = useState(connection.isConnected);
+    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/usePreloadedUrl.js

@@ -1,12 +1,9 @@
-"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) {
-    const [preloadedUrl, setPreloadedUrl] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        (0, cogs_client_1.preloadUrl)(url).then((url) => setPreloadedUrl(url));
+import { preloadUrl } from '@clockworkdog/cogs-client';
+import { useEffect, useState } from 'react';
+export default function usePreloadedUrl(url) {
+    const [preloadedUrl, setPreloadedUrl] = useState();
+    useEffect(() => {
+        preloadUrl(url).then((url) => setPreloadedUrl(url));
     }, [url]);
     return preloadedUrl;
 }

package/dist/hooks/useShowPhase.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = useShowPhase;
-const react_1 = require("react");
-function useShowPhase(connection) {
-    const [status, setStatus] = (0, react_1.useState)(connection.showPhase);
-    (0, react_1.useEffect)(() => {
+import { useEffect, useState } from 'react';
+export default function useShowPhase(connection) {
+    const [status, setStatus] = useState(connection.showPhase);
+    useEffect(() => {
         // Use the latest show phase in case it has changed before this useEffect ran
         setStatus(connection.showPhase);
         const listener = () => setStatus(connection.showPhase);

package/dist/hooks/useWhenShowReset.js

@@ -1,13 +1,7 @@
-"use strict";
-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) {
-    (0, useCogsMessage_1.default)(connection, (0, react_1.useCallback)((message) => {
+import { useCallback } from 'react';
+import useCogsMessage from './useCogsMessage';
+export default function useWhenShowReset(connection, whenReset) {
+    useCogsMessage(connection, useCallback((message) => {
         if (message.type === 'show_reset') {
             whenReset();
         }

package/dist/index.js

@@ -1,70 +1,27 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = 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];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-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.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; } });
-Object.defineProperty(exports, "useCogsConnection", { enumerable: true, get: function () { return CogsConnectionProvider_1.useCogsConnection; } });
-Object.defineProperty(exports, "useAudioPlayer", { enumerable: true, get: function () { return CogsConnectionProvider_1.useAudioPlayer; } });
-Object.defineProperty(exports, "useVideoPlayer", { enumerable: true, get: function () { return CogsConnectionProvider_1.useVideoPlayer; } });
-var useIsConnected_1 = require("./hooks/useIsConnected");
-Object.defineProperty(exports, "useIsConnected", { enumerable: true, get: function () { return __importDefault(useIsConnected_1).default; } });
-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 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");
-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");
-Object.defineProperty(exports, "usePreloadedUrl", { enumerable: true, get: function () { return __importDefault(usePreloadedUrl_1).default; } });
-var useShowPhase_1 = require("./hooks/useShowPhase");
-Object.defineProperty(exports, "useShowPhase", { enumerable: true, get: function () { return __importDefault(useShowPhase_1).default; } });
-var useWhenShowReset_1 = require("./hooks/useWhenShowReset");
-Object.defineProperty(exports, "useWhenShowReset", { enumerable: true, get: function () { return __importDefault(useWhenShowReset_1).default; } });
-__exportStar(require("./utils/types"), exports);
+export { default as CogsConnectionProvider, useCogsConnection, useAudioPlayer, useVideoPlayer } from './providers/CogsConnectionProvider';
+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';
+export { default as usePreloadedUrl } from './hooks/usePreloadedUrl';
+export { default as useShowPhase } from './hooks/useShowPhase';
+export { default as useWhenShowReset } from './hooks/useWhenShowReset';
+export * from './utils/types';
 // Audio
-var useAudioClips_1 = require("./hooks/useAudioClips");
-Object.defineProperty(exports, "useAudioClips", { enumerable: true, get: function () { return __importDefault(useAudioClips_1).default; } });
-var useIsAudioPlaying_1 = require("./hooks/useIsAudioPlaying");
-Object.defineProperty(exports, "useIsAudioPlaying", { enumerable: true, get: function () { return __importDefault(useIsAudioPlaying_1).default; } });
+export { default as useAudioClips } from './hooks/useAudioClips';
+export { default as useIsAudioPlaying } from './hooks/useIsAudioPlaying';
 // Video
-var VideoContainer_1 = require("./components/VideoContainer");
-Object.defineProperty(exports, "VideoContainer", { enumerable: true, get: function () { return __importDefault(VideoContainer_1).default; } });
+export { default as VideoContainer } from './components/VideoContainer';
 // Hints
-var useHint_1 = require("./hooks/useHint");
-Object.defineProperty(exports, "useHint", { enumerable: true, get: function () { return __importDefault(useHint_1).default; } });
-var Hint_1 = require("./components/Hint");
-Object.defineProperty(exports, "Hint", { enumerable: true, get: function () { return __importDefault(Hint_1).default; } });
+export { default as useHint } from './hooks/useHint';
+export { default as Hint } from './components/Hint';
 // Timer
-var Timer_1 = require("./components/Timer");
-Object.defineProperty(exports, "Timer", { enumerable: true, get: function () { return __importDefault(Timer_1).default; } });
+export { default as Timer } from './components/Timer';
 // Images
-var useImages_1 = require("./hooks/useImages");
-Object.defineProperty(exports, "useImages", { enumerable: true, get: function () { return __importDefault(useImages_1).default; } });
-var Images_1 = require("./components/Images");
-Object.defineProperty(exports, "Images", { enumerable: true, get: function () { return __importDefault(Images_1).default; } });
+export { default as useImages } from './hooks/useImages';
+export { default as Images } from './components/Images';

package/dist/providers/CogsConnectionProvider.js

@@ -1,46 +1,7 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = 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];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-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 = CogsConnectionProvider;
-exports.useCogsConnection = useCogsConnection;
-exports.useAudioPlayer = useAudioPlayer;
-exports.useVideoPlayer = useVideoPlayer;
-const cogs_client_1 = require("@clockworkdog/cogs-client");
-const react_1 = __importStar(require("react"));
+import { CogsAudioPlayer, CogsConnection, CogsVideoPlayer } from '@clockworkdog/cogs-client';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const CogsConnectionContext = react_1.default.createContext({
+const CogsConnectionContext = React.createContext({
     useCogsConnection: (customConnection) => {
         if (!customConnection) {
             throw new Error('Ensure <CogsConnectionProvider> has been added to your React app');
@@ -108,11 +69,11 @@ const CogsConnectionContext = react_1.default.createContext({
  * }
  * ```
  */
-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 }, initialClientState, initialDataStoreData);
+export default function CogsConnectionProvider({ manifest, hostname, port, children, audioPlayer, videoPlayer, initialClientState, initialDataStoreData, }) {
+    const connectionRef = useRef(undefined);
+    const [, forceRender] = useState({});
+    useEffect(() => {
+        const connection = new CogsConnection(manifest, { hostname, port }, initialClientState, initialDataStoreData);
         connectionRef.current = connection;
         forceRender({});
         return () => {
@@ -120,16 +81,16 @@ function CogsConnectionProvider({ manifest, hostname, port, children, audioPlaye
             connection.close();
         };
     }, [manifest, hostname, port, initialClientState, initialDataStoreData]);
-    const audioPlayerRef = (0, react_1.useRef)(undefined);
-    (0, react_1.useEffect)(() => {
+    const audioPlayerRef = useRef(undefined);
+    useEffect(() => {
         if (audioPlayer && !audioPlayerRef.current && connectionRef.current) {
-            audioPlayerRef.current = new cogs_client_1.CogsAudioPlayer(connectionRef.current);
+            audioPlayerRef.current = new CogsAudioPlayer(connectionRef.current);
         }
     }, [audioPlayer]);
-    const videoPlayerRef = (0, react_1.useRef)(undefined);
-    (0, react_1.useEffect)(() => {
+    const videoPlayerRef = useRef(undefined);
+    useEffect(() => {
         if (videoPlayer && !videoPlayerRef.current && connectionRef.current) {
-            videoPlayerRef.current = new cogs_client_1.CogsVideoPlayer(connectionRef.current);
+            videoPlayerRef.current = new CogsVideoPlayer(connectionRef.current);
         }
     }, [videoPlayer]);
     if (!connectionRef.current) {
@@ -137,27 +98,27 @@ function CogsConnectionProvider({ manifest, hostname, port, children, audioPlaye
         return null;
     }
     const value = {
-        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; },
+        useCogsConnection: (customConnection) => customConnection ?? connectionRef.current,
+        useAudioPlayer: (customAudioPlayer) => customAudioPlayer ?? audioPlayerRef.current ?? null,
+        useVideoPlayer: (customVideoPlayer) => customVideoPlayer ?? videoPlayerRef.current ?? null,
     };
-    return react_1.default.createElement(CogsConnectionContext.Provider, { value: value }, children);
+    return React.createElement(CogsConnectionContext.Provider, { value: value }, children);
 }
 /**
  * Get the connection from `<CogsConnectionProvider>`
  */
-function useCogsConnection(customConnection) {
-    return (0, react_1.useContext)(CogsConnectionContext).useCogsConnection(customConnection);
+export function useCogsConnection(customConnection) {
+    return useContext(CogsConnectionContext).useCogsConnection(customConnection);
 }
 /**
  * Get the audio player from `<CogsConnectionProvider audioPlayer>`
  */
-function useAudioPlayer(customAudioPlayer) {
-    return (0, react_1.useContext)(CogsConnectionContext).useAudioPlayer(customAudioPlayer);
+export function useAudioPlayer(customAudioPlayer) {
+    return useContext(CogsConnectionContext).useAudioPlayer(customAudioPlayer);
 }
 /**
  * Get the video player from `<CogsConnectionProvider videoPlayer>`
  */
-function useVideoPlayer(customVideoPlayer) {
-    return (0, react_1.useContext)(CogsConnectionContext).useVideoPlayer(customVideoPlayer);
+export function useVideoPlayer(customVideoPlayer) {
+    return useContext(CogsConnectionContext).useVideoPlayer(customVideoPlayer);
 }

package/dist/utils/types.js

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

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