@clockworkdog/cogs-client-react 0.14.1 → 0.16.2

package/README.md

@@ -22,14 +22,14 @@ Import the library
 
 ```ts
 import { CogsConnection, AudioPlayer } from '@clockworkdog/cogs-client';
-import { Background, Video, Timer, Hint, useIsConnected, useIsAudioPlaying } from '@clockworkdog/cogs-client-react';
+import { Video, Timer, Hint, useIsConnected, useIsAudioPlaying } from '@clockworkdog/cogs-client-react';
 ```
 
 or
 
 ```js
 const { CogsConnection, AudioPlayer } = require('@clockworkdog/cogs-client');
-const { Background, Video, Hint, Timer, useIsConnected, useIsAudioPlaying } = require('@clockworkdog/cogs-client-react');
+const { Video, Hint, Timer, useIsConnected, useIsAudioPlaying } = require('@clockworkdog/cogs-client-react');
 ```
 
 then
@@ -45,7 +45,6 @@ function MyComponent() {
 
   return (
     <div>
-      <Backgound connection={cogsConnection} />
       <div>Connected: {isConnected}</div>
       <div>Audio playing: {isAudioPlaying}</div>
       <div style={{ fontSize: 100 }}>
@@ -69,6 +68,20 @@ When developing locally you should connect to COGS in "simulator" mode by append
 
 For example, with your custom content hosted on port 3000, http://localhost:3000?simulator=true&t=media_master&name=Timer+screen will connect as the simulator for `Timer screen`.
 
+#### Chrome permissions
+
+Chrome's autoplay security settings mean that you will need to interact with the page before audio or video will play. You can disable this warning when developing by pressing `ℹ️` in Chrome's URL bar, opening `Site settings`, and setting `Sound` to `Allow`.
+
+## Using `create-react-app`
+
+We suggest you use [our `create-react-app` template](https://www.npmjs.com/package/@clockworkdog/cra-template-cogs-client).
+
+Or, if you're using `create-react-app` for your project, you'll need to configure the build to work with a relative path, as when accessed by a Media Master your project will not be served from the root path. This can be achieved by adding the following to your `package.json`:
+
+```
+"homepage": ".",
+```
+
 ## Release process
 
 1. Create a new commit with a bumped version number in `package.json`.

package/dist/components/{Background.d.ts → Images.d.ts}

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

package/dist/components/Images.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const cogs_client_1 = require("@clockworkdog/cogs-client");
+const react_1 = __importDefault(require("react"));
+const useImages_1 = __importDefault(require("../hooks/useImages"));
+function Images({ className, style, connection, fullscreen, }) {
+    const images = 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: {
+            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)));
+}
+exports.default = Images;
+//# sourceMappingURL=Images.js.map

package/dist/components/Images.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Images.js","sourceRoot":"","sources":["../../src/components/Images.tsx"],"names":[],"mappings":";;;;;AAAA,2DAAqE;AACrE,kDAA0B;AAC1B,mEAA2C;AAE3C,SAAwB,MAAM,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,UAAU,EACV,UAAU,GAMX;IACC,MAAM,MAAM,GAAG,mBAAS,CAAC,UAAU,CAAC,CAAC;IAErC,MAAM,qBAAqB,GAAG,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5F,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACjD,uCACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,KAAK,EACV,GAAG,EAAE,sBAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,EACzB,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,KAAK,EAAE;YACL,SAAS,EAAE,KAAK,CAAC,GAAG;YACpB,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAC/F,GAAG,KAAK;SACT,GACD,CACH,CAAC,CAAC;IAEH,OAAO,CACL,8DACG,UAAU,CAAC,CAAC,CAAC,CACZ,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,qBAAqB,EAAE,IACxH,aAAa,CACV,CACP,CAAC,CAAC,CAAC,CACF,aAAa,CACd,CACA,CACJ,CAAC;AACJ,CAAC;AAxCD,yBAwCC"}

package/dist/components/Timer.js

@@ -38,48 +38,39 @@ function formatTime(time, countingUp) {
     return { minutes, seconds };
 }
 function Timer({ className, style, connection, separator = ':', center, }) {
+    var _a, _b, _c, _d, _e, _f;
     const [timerElapsed, setTimerElapsed] = react_1.useState(0);
-    const [timerStartedAt, setTimerStartedAt] = react_1.useState(0);
-    const [timerTotalMillis, setTimerTotalMillis] = react_1.useState(0);
-    const [timerTicking, setTimerTicking] = react_1.useState(false);
-    const updateTimer = react_1.useCallback(() => {
+    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 = timerTicking ? Date.now() - timerStartedAt : 0;
         setTimerElapsed(timerElapsed);
     }, [timerTicking, timerStartedAt]);
-    const startTimer = react_1.useCallback((durationMillis) => {
-        setTimerStartedAt(Date.now());
-        setTimerTotalMillis(durationMillis);
-        setTimerTicking(true);
-        setTimerElapsed(0);
-    }, []);
-    react_1.useEffect(() => {
-        if (timerTicking) {
-            updateTimer();
+    const updateTimerState = react_1.useCallback((timerState) => {
+        setTimerTotalMillis(timerState.durationMillis);
+        setTimerTicking(timerState.ticking);
+        if (timerState.ticking) {
+            setTimerStartedAt(timerState.startedAt);
+            setTimerElapsed(0);
         }
-    }, [timerTicking, updateTimer]);
-    const stopTimer = react_1.useCallback((durationMillis) => {
-        setTimerTotalMillis(durationMillis);
-        setTimerTicking(false);
     }, []);
+    // Deal with starting/stopping the visual ticking of the timer
     react_1.useEffect(() => {
         if (timerTicking) {
-            const ticker = setInterval(updateTimer, 100);
+            updateTimerElapsed();
+            const ticker = setInterval(updateTimerElapsed, 100);
             return () => {
                 clearInterval(ticker);
             };
         }
         return;
-    }, [timerTicking, updateTimer]);
+    }, [timerTicking, updateTimerElapsed]);
     useCogsMessage_1.default(connection, react_1.useCallback((message) => {
         if (message.type === 'adjustable_timer_update') {
-            if (message.ticking) {
-                startTimer(message.durationMillis);
-            }
-            else {
-                stopTimer(message.durationMillis);
-            }
+            updateTimerState({ startedAt: Date.now(), ticking: message.ticking, durationMillis: message.durationMillis });
         }
-    }, [startTimer, stopTimer]));
+    }, [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 },

package/dist/components/Timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timer.js","sourceRoot":"","sources":["../../src/components/Timer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Timer.js","sourceRoot":"","sources":["../../src/components/Timer.tsx"],"names":[],"mappings":"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"}

package/dist/components/Video.d.ts

@@ -8,7 +8,7 @@ export interface VideoClip {
     loop: boolean;
     fit: MediaObjectFit;
 }
-export default function Video({ className, style, connection, fullscreen, onStopped, }: {
+export default function Video({ className, style, connection, fullscreen, onStopped, getCachedAsset }: {
     className?: string;
     style?: React.CSSProperties;
     connection: CogsConnection;
@@ -16,4 +16,5 @@ export default function Video({ className, style, connection, fullscreen, onStop
         style: React.CSSProperties;
     };
     onStopped?: () => void;
+    getCachedAsset?: (assetUrl: string) => string | undefined;
 }): JSX.Element | null;

package/dist/components/Video.js

@@ -26,7 +26,8 @@ const cogs_client_1 = require("@clockworkdog/cogs-client");
 const react_1 = __importStar(require("react"));
 const useCogsMessage_1 = __importDefault(require("../hooks/useCogsMessage"));
 const VideoClipState_1 = __importDefault(require("../types/VideoClipState"));
-function Video({ className, style, connection, fullscreen, onStopped, }) {
+function Video({ className, style, connection, fullscreen, onStopped, getCachedAsset }) {
+    var _a;
     const [globalVolume, setGlobalVolume] = react_1.useState(1);
     const [videoClip, setVideoClip] = react_1.useState(null);
     useCogsMessage_1.default(connection, react_1.useCallback((message) => {
@@ -96,7 +97,7 @@ function Video({ className, style, connection, fullscreen, onStopped, }) {
             objectFit: videoClip.fit,
             ...(fullscreen ? { width: '100%', height: '100%' } : {}),
             ...style,
-        }, src: videoClip.src, onEnded: notifyVideoStopped }));
+        }, src: (_a = (getCachedAsset && getCachedAsset(videoClip.src))) !== null && _a !== void 0 ? _a : videoClip.src, onEnded: notifyVideoStopped }));
     const fullscreenCustomStyle = typeof fullscreen === 'object' ? fullscreen.style : undefined;
     return fullscreen ? (react_1.default.createElement("div", { style: { position: 'absolute', zIndex: 1, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle } }, video)) : (video);
 }

package/dist/components/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../src/components/Video.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../src/components/Video.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/useCogsConfig.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 function useCogsConfig(connection) {
     const [config, setConfig] = react_1.useState(connection.config);
     react_1.useEffect(() => {
-        const listener = () => setConfig(connection.config);
+        const listener = (event) => setConfig(event.detail);
         connection.addEventListener('config', listener);
         return () => connection.removeEventListener('config', listener);
     }, [connection]);

package/dist/hooks/useCogsConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCogsConfig.js","sourceRoot":"","sources":["../../src/hooks/useCogsConfig.ts"],"names":[],"mappings":";;AACA,iCAA4C;AAI5C,8DAA8D;AAC9D,SAAwB,aAAa,CAAyC,UAAsB;IAClG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAQ,CAAyB,UAAU,CAAC,MAAM,CAAC,CAAC;IAEhF,iBAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACpD,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,MAAM,CAAC;AAChB,CAAC;AAVD,gCAUC"}
+{"version":3,"file":"useCogsConfig.js","sourceRoot":"","sources":["../../src/hooks/useCogsConfig.ts"],"names":[],"mappings":";;AACA,iCAA4C;AAI5C,8DAA8D;AAC9D,SAAwB,aAAa,CAAyC,UAAsB;IAClG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAQ,CAAyB,UAAU,CAAC,MAAM,CAAC,CAAC;IAEhF,iBAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACzF,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,MAAM,CAAC;AAChB,CAAC;AAVD,gCAUC"}

package/dist/hooks/useCogsInputPortValue.d.ts

@@ -1,4 +1,4 @@
 import { CogsConnection } from '@clockworkdog/cogs-client';
 declare type InputPortsType<Connection> = Connection extends CogsConnection<infer Types> ? Types['inputPorts'] : never;
-export default function useCogsOutputPortValue<Connection extends CogsConnection<any>, PortName extends keyof NonNullable<InputPortsType<Connection>>>(connection: Connection, portName: PortName): NonNullable<InputPortsType<Connection>>[PortName];
+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,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-function useCogsOutputPortValue(connection, portName) {
+function useCogsInputPortValue(connection, portName) {
     const [value, setValue] = react_1.useState(connection.inputPortValues[portName]);
     react_1.useEffect(() => {
         const listener = (event) => {
@@ -14,5 +14,5 @@ function useCogsOutputPortValue(connection, portName) {
     }, [connection, portName]);
     return value;
 }
-exports.default = useCogsOutputPortValue;
+exports.default = useCogsInputPortValue;
 //# sourceMappingURL=useCogsInputPortValue.js.map

package/dist/hooks/useCogsInputPortValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCogsInputPortValue.js","sourceRoot":"","sources":["../../src/hooks/useCogsInputPortValue.ts"],"names":[],"mappings":";;AACA,iCAA4C;AAI5C,SAAwB,sBAAsB,CAI5C,UAAsB,EAAE,QAAkB;IAC1C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAQ,CAAoD,UAAU,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5H,iBAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,CAAC,KAA2D,EAAE,EAAE;YAC/E,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,SAAS,EAAE;gBACxC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;aAClC;QACH,CAAC,CAAC;QAEF,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACjD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,OAAO,KAAK,CAAC;AACf,CAAC;AAnBD,yCAmBC"}
+{"version":3,"file":"useCogsInputPortValue.js","sourceRoot":"","sources":["../../src/hooks/useCogsInputPortValue.ts"],"names":[],"mappings":";;AACA,iCAA4C;AAI5C,SAAwB,qBAAqB,CAI3C,UAAsB,EAAE,QAAkB;IAC1C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAQ,CAAoD,UAAU,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5H,iBAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,CAAC,KAA2D,EAAE,EAAE;YAC/E,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,SAAS,EAAE;gBACxC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;aAClC;QACH,CAAC,CAAC;QAEF,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACjD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,OAAO,KAAK,CAAC;AACf,CAAC;AAnBD,wCAmBC"}

package/dist/hooks/useCogsInputPortValues.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 function useCogsInputPortValues(connection) {
     const [value, setValue] = react_1.useState(connection.inputPortValues);
     react_1.useEffect(() => {
-        const listener = () => setValue(connection.inputPortValues);
+        const listener = (event) => setValue(event.detail);
         connection.addEventListener('updates', listener);
         return () => connection.removeEventListener('updates', listener);
     }, [connection]);

package/dist/hooks/useCogsInputPortValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCogsInputPortValues.js","sourceRoot":"","sources":["../../src/hooks/useCogsInputPortValues.ts"],"names":[],"mappings":";;AACA,iCAA4C;AAI5C,8DAA8D;AAC9D,SAAwB,sBAAsB,CAAyC,UAAsB;IAC3G,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAQ,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAE/D,iBAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;QAC5D,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACjD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,KAAK,CAAC;AACf,CAAC;AAVD,yCAUC"}
+{"version":3,"file":"useCogsInputPortValues.js","sourceRoot":"","sources":["../../src/hooks/useCogsInputPortValues.ts"],"names":[],"mappings":";;AACA,iCAA4C;AAI5C,8DAA8D;AAC9D,SAAwB,sBAAsB,CAAyC,UAAsB;IAC3G,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,gBAAQ,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAE/D,iBAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,CAAC,KAA8C,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC5F,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACjD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,KAAK,CAAC;AACf,CAAC;AAVD,yCAUC"}

package/dist/hooks/useCogsMessage.d.ts

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

package/dist/hooks/useCogsMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCogsMessage.js","sourceRoot":"","sources":["../../src/hooks/useCogsMessage.ts"],"names":[],"mappings":";;AACA,iCAAkC;AAElC,SAAwB,cAAc,CAAC,UAA0B,EAAE,aAAmD;IACpH,iBAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,CAAC,KAAqC,EAAE,EAAE;YACzD,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACjD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;AAClC,CAAC;AATD,iCASC"}
+{"version":3,"file":"useCogsMessage.js","sourceRoot":"","sources":["../../src/hooks/useCogsMessage.ts"],"names":[],"mappings":";;AACA,iCAAkC;AAElC,SAAwB,cAAc,CACpC,UAA0B,EAC1B,aAAmC;IAEnC,iBAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,CAAC,KAAqB,EAAE,EAAE;YACzC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QACjD,OAAO,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACnE,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;AAClC,CAAC;AAZD,iCAYC"}

package/dist/hooks/useHint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHint.js","sourceRoot":"","sources":["../../src/hooks/useHint.ts"],"names":[],"mappings":";;;;;AACA,iCAA8C;AAC9C,sEAA8C;AAE9C,SAAwB,OAAO,CAAC,UAA0B;IACxD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,gBAAQ,CAAC,EAAE,CAAC,CAAC;IAErC,wBAAc,CACZ,UAAU,EACV,mBAAW,CAAC,CAAC,OAAO,EAAE,EAAE;QACtB,OAAO,CAAC,IAAI,KAAK,mBAAmB,IAAI,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IACxE,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,OAAO,IAAI,IAAI,IAAI,CAAC;AACtB,CAAC;AAXD,0BAWC"}
+{"version":3,"file":"useHint.js","sourceRoot":"","sources":["../../src/hooks/useHint.ts"],"names":[],"mappings":";;;;;AACA,iCAA8C;AAC9C,sEAA8C;AAE9C,SAAwB,OAAO,CAAC,UAA0B;IACxD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,gBAAQ,CAAC,EAAE,CAAC,CAAC;IAErC,wBAAc,CACZ,UAAU,EACV,mBAAW,CAAC,CAAC,OAA0B,EAAE,EAAE;QACzC,OAAO,CAAC,IAAI,KAAK,mBAAmB,IAAI,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IACxE,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,OAAO,IAAI,IAAI,IAAI,CAAC;AACtB,CAAC;AAXD,0BAWC"}

package/dist/hooks/useImages.d.ts

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

package/dist/hooks/useImages.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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) => {
+        switch (message.type) {
+            case 'image_show':
+                {
+                    const newImage = { file: message.file, fit: message.fit };
+                    setImages((images) => (message.hideOthers ? [newImage] : [...images, newImage]));
+                }
+                break;
+            case 'image_hide':
+                if (message.file) {
+                    setImages((images) => images.filter(({ file }) => file !== message.file));
+                }
+                else {
+                    setImages([]);
+                }
+                break;
+        }
+    }, []));
+    return images;
+}
+exports.default = useImages;
+//# sourceMappingURL=useImages.js.map

package/dist/hooks/useImages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImages.js","sourceRoot":"","sources":["../../src/hooks/useImages.ts"],"names":[],"mappings":";;;;;AACA,iCAA8C;AAC9C,sEAA8C;AAI9C,SAAwB,SAAS,CAAC,UAA0B;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAQ,CAAU,EAAE,CAAC,CAAC;IAElD,wBAAc,CACZ,UAAU,EACV,mBAAW,CAAC,CAAC,OAA0B,EAAE,EAAE;QACzC,QAAQ,OAAO,CAAC,IAAI,EAAE;YACpB,KAAK,YAAY;gBACf;oBACE,MAAM,QAAQ,GAAG,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC;oBAC1D,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;iBAClF;gBACD,MAAM;YACR,KAAK,YAAY;gBACf,IAAI,OAAO,CAAC,IAAI,EAAE;oBAChB,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;iBAC3E;qBAAM;oBACL,SAAS,CAAC,EAAE,CAAC,CAAC;iBACf;gBACD,MAAM;SACT;IACH,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC;AAzBD,4BAyBC"}

package/dist/hooks/useShowPhase.d.ts

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

package/dist/hooks/{useBackground.js → useShowPhase.js}

@@ -5,13 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
-function useBackground(connection) {
-    const [background, setBackground] = react_1.useState(null);
+function useShowPhase(connection) {
+    const [status, setStatus] = react_1.useState(connection.showPhase);
     useCogsMessage_1.default(connection, react_1.useCallback((message) => {
-        var _a;
-        message.type === 'media_config_update' && setBackground((_a = message.background) !== null && _a !== void 0 ? _a : null);
+        if (message.type === 'show_phase') {
+            setStatus(message.phase);
+        }
     }, []));
-    return background;
+    return status;
 }
-exports.default = useBackground;
-//# sourceMappingURL=useBackground.js.map
+exports.default = useShowPhase;
+//# sourceMappingURL=useShowPhase.js.map

package/dist/hooks/useShowPhase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShowPhase.js","sourceRoot":"","sources":["../../src/hooks/useShowPhase.ts"],"names":[],"mappings":";;;;;AACA,iCAA8C;AAC9C,sEAA8C;AAE9C,SAAwB,YAAY,CAAC,UAA0B;IAC7D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,gBAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IAE3D,wBAAc,CACZ,UAAU,EACV,mBAAW,CAAC,CAAC,OAA0B,EAAE,EAAE;QACzC,IAAI,OAAO,CAAC,IAAI,KAAK,YAAY,EAAE;YACjC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC;AAbD,+BAaC"}

package/dist/hooks/useWhenShowReset.d.ts

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

package/dist/hooks/useWhenShowReset.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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) => {
+        if (message.type === 'show_reset') {
+            whenReset();
+        }
+    }, [whenReset]));
+}
+exports.default = useWhenShowReset;
+//# sourceMappingURL=useWhenShowReset.js.map

package/dist/hooks/useWhenShowReset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWhenShowReset.js","sourceRoot":"","sources":["../../src/hooks/useWhenShowReset.ts"],"names":[],"mappings":";;;;;AACA,iCAAoC;AACpC,sEAA8C;AAE9C,SAAwB,gBAAgB,CAAC,UAA0B,EAAE,SAAqB;IACxF,wBAAc,CACZ,UAAU,EACV,mBAAW,CACT,CAAC,OAA0B,EAAE,EAAE;QAC7B,IAAI,OAAO,CAAC,IAAI,KAAK,YAAY,EAAE;YACjC,SAAS,EAAE,CAAC;SACb;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CACF,CAAC;AACJ,CAAC;AAZD,mCAYC"}

package/dist/index.d.ts

@@ -6,11 +6,13 @@ export { default as useCogsInputPortValue } from './hooks/useCogsInputPortValue'
 export { default as useCogsInputPortValues } from './hooks/useCogsInputPortValues';
 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 { default as useAudioClips } from './hooks/useAudioClips';
 export { default as useIsAudioPlaying } from './hooks/useIsAudioPlaying';
-export { default as useBackground } from './hooks/useBackground';
-export { default as Background } from './components/Background';
 export { default as useHint } from './hooks/useHint';
 export { default as Hint } from './components/Hint';
 export { default as Timer } from './components/Timer';
 export { default as Video } from './components/Video';
+export { default as useImages } from './hooks/useImages';
+export { default as Images } from './components/Images';

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.Video = exports.Timer = exports.Hint = exports.useHint = exports.Background = exports.useBackground = exports.useIsAudioPlaying = exports.useAudioClips = exports.usePreloadedUrl = exports.useCogsMessage = exports.useCogsInputPortValues = exports.useCogsInputPortValue = exports.useCogsEvent = exports.useCogsConfig = exports.useIsConnected = exports.useCogsConnection = exports.CogsConnectionProvider = void 0;
+exports.Images = exports.useImages = exports.Video = exports.Timer = exports.Hint = exports.useHint = exports.useIsAudioPlaying = exports.useAudioClips = exports.useWhenShowReset = exports.useShowPhase = exports.usePreloadedUrl = exports.useCogsMessage = exports.useCogsInputPortValues = exports.useCogsInputPortValue = exports.useCogsEvent = exports.useCogsConfig = exports.useIsConnected = 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; } });
@@ -22,16 +22,15 @@ 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; } });
 // 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; } });
-// Background
-var useBackground_1 = require("./hooks/useBackground");
-Object.defineProperty(exports, "useBackground", { enumerable: true, get: function () { return __importDefault(useBackground_1).default; } });
-var Background_1 = require("./components/Background");
-Object.defineProperty(exports, "Background", { enumerable: true, get: function () { return __importDefault(Background_1).default; } });
 // Hints
 var useHint_1 = require("./hooks/useHint");
 Object.defineProperty(exports, "useHint", { enumerable: true, get: function () { return __importDefault(useHint_1).default; } });
@@ -40,6 +39,12 @@ Object.defineProperty(exports, "Hint", { enumerable: true, get: function () { re
 // Timer
 var Timer_1 = require("./components/Timer");
 Object.defineProperty(exports, "Timer", { enumerable: true, get: function () { return __importDefault(Timer_1).default; } });
+// Video
 var Video_1 = require("./components/Video");
 Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return __importDefault(Video_1).default; } });
+// 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; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,YAAY;AACZ,6EAA0G;AAAjG,iJAAA,OAAO,OAA0B;AAAE,2HAAA,iBAAiB,OAAA;AAC7D,yDAAmE;AAA1D,iIAAA,OAAO,OAAkB;AAClC,uDAAiE;AAAxD,+HAAA,OAAO,OAAiB;AACjC,qDAA+D;AAAtD,6HAAA,OAAO,OAAgB;AAChC,uEAAiF;AAAxE,+IAAA,OAAO,OAAyB;AACzC,yEAAmF;AAA1E,iJAAA,OAAO,OAA0B;AAC1C,yDAAmE;AAA1D,iIAAA,OAAO,OAAkB;AAClC,2DAAqE;AAA5D,mIAAA,OAAO,OAAmB;AAEnC,QAAQ;AACR,uDAAiE;AAAxD,+HAAA,OAAO,OAAiB;AACjC,+DAAyE;AAAhE,uIAAA,OAAO,OAAqB;AAErC,aAAa;AACb,uDAAiE;AAAxD,+HAAA,OAAO,OAAiB;AACjC,sDAAgE;AAAvD,yHAAA,OAAO,OAAc;AAE9B,QAAQ;AACR,2CAAqD;AAA5C,mHAAA,OAAO,OAAW;AAC3B,0CAAoD;AAA3C,6GAAA,OAAO,OAAQ;AAExB,QAAQ;AACR,4CAAsD;AAA7C,+GAAA,OAAO,OAAS;AACzB,4CAAsD;AAA7C,+GAAA,OAAO,OAAS"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,YAAY;AACZ,6EAA0G;AAAjG,iJAAA,OAAO,OAA0B;AAAE,2HAAA,iBAAiB,OAAA;AAC7D,yDAAmE;AAA1D,iIAAA,OAAO,OAAkB;AAClC,uDAAiE;AAAxD,+HAAA,OAAO,OAAiB;AACjC,qDAA+D;AAAtD,6HAAA,OAAO,OAAgB;AAChC,uEAAiF;AAAxE,+IAAA,OAAO,OAAyB;AACzC,yEAAmF;AAA1E,iJAAA,OAAO,OAA0B;AAC1C,yDAAmE;AAA1D,iIAAA,OAAO,OAAkB;AAClC,2DAAqE;AAA5D,mIAAA,OAAO,OAAmB;AACnC,qDAA+D;AAAtD,6HAAA,OAAO,OAAgB;AAChC,6DAAuE;AAA9D,qIAAA,OAAO,OAAoB;AAEpC,QAAQ;AACR,uDAAiE;AAAxD,+HAAA,OAAO,OAAiB;AACjC,+DAAyE;AAAhE,uIAAA,OAAO,OAAqB;AAErC,QAAQ;AACR,2CAAqD;AAA5C,mHAAA,OAAO,OAAW;AAC3B,0CAAoD;AAA3C,6GAAA,OAAO,OAAQ;AAExB,QAAQ;AACR,4CAAsD;AAA7C,+GAAA,OAAO,OAAS;AAEzB,QAAQ;AACR,4CAAsD;AAA7C,+GAAA,OAAO,OAAS;AAEzB,SAAS;AACT,+CAAyD;AAAhD,uHAAA,OAAO,OAAa;AAC7B,8CAAwD;AAA/C,iHAAA,OAAO,OAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clockworkdog/cogs-client-react",
-  "version": "0.14.1",
+  "version": "0.16.2",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -30,7 +30,7 @@
     "typescript": "^4.1.3"
   },
   "dependencies": {
-    "@clockworkdog/cogs-client": "^0.14.0"
+    "@clockworkdog/cogs-client": "^0.16.0"
   },
   "description": "React components and hooks to connect to COGS to build a custom Media Master",
   "repository": {

package/dist/components/Background.js

@@ -1,27 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const useBackground_1 = __importDefault(require("../hooks/useBackground"));
-function Background({ className, style, connection, }) {
-    var _a, _b, _c;
-    const background = useBackground_1.default(connection);
-    return (react_1.default.createElement("div", Object.assign({}, { className }, { style: {
-            zIndex: -1,
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'transparent',
-            backgroundImage: ((_a = background === null || background === void 0 ? void 0 : background.image) === null || _a === void 0 ? void 0 : _a.file) ? `url("${background.image.file}")` : 'none',
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'center',
-            backgroundSize: (_c = (_b = background === null || background === void 0 ? void 0 : background.image) === null || _b === void 0 ? void 0 : _b.fit) !== null && _c !== void 0 ? _c : 'auto',
-            ...style,
-        } })));
-}
-exports.default = Background;
-//# sourceMappingURL=Background.js.map

package/dist/components/Background.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Background.js","sourceRoot":"","sources":["../../src/components/Background.tsx"],"names":[],"mappings":";;;;;AACA,kDAA0B;AAC1B,2EAAmD;AAEnD,SAAwB,UAAU,CAAC,EACjC,SAAS,EACT,KAAK,EACL,UAAU,GAKX;;IACC,MAAM,UAAU,GAAG,uBAAa,CAAC,UAAU,CAAC,CAAC;IAE7C,OAAO,CACL,uDACM,EAAE,SAAS,EAAE,IACjB,KAAK,EAAE;YACL,MAAM,EAAE,CAAC,CAAC;YACV,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,eAAe,EAAE,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,KAAI,aAAa;YACnD,eAAe,EAAE,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,0CAAE,IAAI,EAAC,CAAC,CAAC,QAAQ,UAAU,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM;YACrF,gBAAgB,EAAE,WAAW;YAC7B,kBAAkB,EAAE,QAAQ;YAC5B,cAAc,EAAE,MAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,0CAAE,GAAG,mCAAI,MAAM;YAChD,GAAG,KAAK;SACT,IACD,CACH,CAAC;AACJ,CAAC;AA9BD,6BA8BC"}

package/dist/hooks/useBackground.d.ts

@@ -1,2 +0,0 @@
-import { BackgroundOptions, CogsConnection } from '@clockworkdog/cogs-client';
-export default function useBackground(connection: CogsConnection): BackgroundOptions | null;

package/dist/hooks/useBackground.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBackground.js","sourceRoot":"","sources":["../../src/hooks/useBackground.ts"],"names":[],"mappings":";;;;;AACA,iCAA8C;AAC9C,sEAA8C;AAE9C,SAAwB,aAAa,CAAC,UAA0B;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,gBAAQ,CAA2B,IAAI,CAAC,CAAC;IAE7E,wBAAc,CACZ,UAAU,EACV,mBAAW,CAAC,CAAC,OAAO,EAAE,EAAE;;QACtB,OAAO,CAAC,IAAI,KAAK,qBAAqB,IAAI,aAAa,CAAC,MAAA,OAAO,CAAC,UAAU,mCAAI,IAAI,CAAC,CAAC;IACtF,CAAC,EAAE,EAAE,CAAC,CACP,CAAC;IAEF,OAAO,UAAU,CAAC;AACpB,CAAC;AAXD,gCAWC"}