@clockworkdog/cogs-client-react 0.15.0 → 0.16.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -3
- package/dist/components/Video.d.ts +2 -1
- package/dist/components/Video.js +3 -2
- package/dist/components/Video.js.map +1 -1
- package/dist/hooks/useCogsConfig.js +1 -1
- package/dist/hooks/useCogsConfig.js.map +1 -1
- package/dist/hooks/useCogsInputPortValues.js +1 -1
- package/dist/hooks/useCogsInputPortValues.js.map +1 -1
- package/dist/hooks/useCogsMessage.d.ts +1 -1
- package/dist/hooks/useCogsMessage.js.map +1 -1
- package/dist/hooks/useHint.js.map +1 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.js +1 -6
- package/dist/index.js.map +1 -1
- package/dist/providers/CogsConnectionProvider.d.ts +1 -1
- package/dist/providers/CogsConnectionProvider.js +1 -1
- package/package.json +2 -2
- package/dist/components/Background.d.ts +0 -7
- package/dist/components/Background.js +0 -27
- package/dist/components/Background.js.map +0 -1
- package/dist/hooks/useBackground.d.ts +0 -2
- package/dist/hooks/useBackground.js +0 -17
- package/dist/hooks/useBackground.js.map +0 -1
package/README.md
CHANGED
|
@@ -22,14 +22,14 @@ Import the library
|
|
|
22
22
|
|
|
23
23
|
```ts
|
|
24
24
|
import { CogsConnection, AudioPlayer } from '@clockworkdog/cogs-client';
|
|
25
|
-
import {
|
|
25
|
+
import { Video, Timer, Hint, useIsConnected, useIsAudioPlaying } from '@clockworkdog/cogs-client-react';
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
or
|
|
29
29
|
|
|
30
30
|
```js
|
|
31
31
|
const { CogsConnection, AudioPlayer } = require('@clockworkdog/cogs-client');
|
|
32
|
-
const {
|
|
32
|
+
const { Video, Hint, Timer, useIsConnected, useIsAudioPlaying } = require('@clockworkdog/cogs-client-react');
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
then
|
|
@@ -45,7 +45,6 @@ function MyComponent() {
|
|
|
45
45
|
|
|
46
46
|
return (
|
|
47
47
|
<div>
|
|
48
|
-
<Backgound connection={cogsConnection} />
|
|
49
48
|
<div>Connected: {isConnected}</div>
|
|
50
49
|
<div>Audio playing: {isAudioPlaying}</div>
|
|
51
50
|
<div style={{ fontSize: 100 }}>
|
|
@@ -69,6 +68,20 @@ When developing locally you should connect to COGS in "simulator" mode by append
|
|
|
69
68
|
|
|
70
69
|
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`.
|
|
71
70
|
|
|
71
|
+
#### Chrome permissions
|
|
72
|
+
|
|
73
|
+
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`.
|
|
74
|
+
|
|
75
|
+
## Using `create-react-app`
|
|
76
|
+
|
|
77
|
+
We suggest you use [our `create-react-app` template](https://www.npmjs.com/package/@clockworkdog/cra-template-cogs-client).
|
|
78
|
+
|
|
79
|
+
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`:
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
"homepage": ".",
|
|
83
|
+
```
|
|
84
|
+
|
|
72
85
|
## Release process
|
|
73
86
|
|
|
74
87
|
1. Create a new commit with a bumped version number in `package.json`.
|
|
@@ -8,7 +8,7 @@ export interface VideoClip {
|
|
|
8
8
|
loop: boolean;
|
|
9
9
|
fit: MediaObjectFit;
|
|
10
10
|
}
|
|
11
|
-
export default function Video({ className, style, connection, fullscreen, onStopped, }: {
|
|
11
|
+
export default function Video({ className, style, connection, fullscreen, onStopped, getCachedAsset }: {
|
|
12
12
|
className?: string;
|
|
13
13
|
style?: React.CSSProperties;
|
|
14
14
|
connection: CogsConnection;
|
|
@@ -16,4 +16,5 @@ export default function Video({ className, style, connection, fullscreen, onStop
|
|
|
16
16
|
style: React.CSSProperties;
|
|
17
17
|
};
|
|
18
18
|
onStopped?: () => void;
|
|
19
|
+
getCachedAsset?: (assetUrl: string) => string | undefined;
|
|
19
20
|
}): JSX.Element | null;
|
package/dist/components/Video.js
CHANGED
|
@@ -26,7 +26,8 @@ const cogs_client_1 = require("@clockworkdog/cogs-client");
|
|
|
26
26
|
const react_1 = __importStar(require("react"));
|
|
27
27
|
const useCogsMessage_1 = __importDefault(require("../hooks/useCogsMessage"));
|
|
28
28
|
const VideoClipState_1 = __importDefault(require("../types/VideoClipState"));
|
|
29
|
-
function Video({ className, style, connection, fullscreen, onStopped, }) {
|
|
29
|
+
function Video({ className, style, connection, fullscreen, onStopped, getCachedAsset }) {
|
|
30
|
+
var _a;
|
|
30
31
|
const [globalVolume, setGlobalVolume] = react_1.useState(1);
|
|
31
32
|
const [videoClip, setVideoClip] = react_1.useState(null);
|
|
32
33
|
useCogsMessage_1.default(connection, react_1.useCallback((message) => {
|
|
@@ -96,7 +97,7 @@ function Video({ className, style, connection, fullscreen, onStopped, }) {
|
|
|
96
97
|
objectFit: videoClip.fit,
|
|
97
98
|
...(fullscreen ? { width: '100%', height: '100%' } : {}),
|
|
98
99
|
...style,
|
|
99
|
-
}, src: videoClip.src, onEnded: notifyVideoStopped }));
|
|
100
|
+
}, src: (_a = (getCachedAsset && getCachedAsset(videoClip.src))) !== null && _a !== void 0 ? _a : videoClip.src, onEnded: notifyVideoStopped }));
|
|
100
101
|
const fullscreenCustomStyle = typeof fullscreen === 'object' ? fullscreen.style : undefined;
|
|
101
102
|
return fullscreen ? (react_1.default.createElement("div", { style: { position: 'absolute', zIndex: 1, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle } }, video)) : (video);
|
|
102
103
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../src/components/Video.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,2DAAwG;AACxG,+CAAwE;AACxE,6EAAqD;AACrD,6EAAqD;AAUrD,SAAwB,KAAK,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,UAAU,EACV,UAAU,EACV,SAAS,
|
|
1
|
+
{"version":3,"file":"Video.js","sourceRoot":"","sources":["../../src/components/Video.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ const react_1 = require("react");
|
|
|
5
5
|
function useCogsConfig(connection) {
|
|
6
6
|
const [config, setConfig] = react_1.useState(connection.config);
|
|
7
7
|
react_1.useEffect(() => {
|
|
8
|
-
const listener = () => setConfig(
|
|
8
|
+
const listener = (event) => setConfig(event.detail);
|
|
9
9
|
connection.addEventListener('config', listener);
|
|
10
10
|
return () => connection.removeEventListener('config', listener);
|
|
11
11
|
}, [connection]);
|
|
@@ -1 +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,
|
|
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,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"}
|
|
@@ -5,7 +5,7 @@ const react_1 = require("react");
|
|
|
5
5
|
function useCogsInputPortValues(connection) {
|
|
6
6
|
const [value, setValue] = react_1.useState(connection.inputPortValues);
|
|
7
7
|
react_1.useEffect(() => {
|
|
8
|
-
const listener = () => setValue(
|
|
8
|
+
const listener = (event) => setValue(event.detail);
|
|
9
9
|
connection.addEventListener('updates', listener);
|
|
10
10
|
return () => connection.removeEventListener('updates', listener);
|
|
11
11
|
}, [connection]);
|
|
@@ -1 +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,
|
|
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,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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { CogsClientMessage, CogsConnection } from '@clockworkdog/cogs-client';
|
|
2
|
-
export default function useCogsMessage(connection: CogsConnection, handleMessage: (message:
|
|
2
|
+
export default function useCogsMessage<T extends CogsClientMessage = CogsClientMessage>(connection: CogsConnection, handleMessage: (message: T) => void): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCogsMessage.js","sourceRoot":"","sources":["../../src/hooks/useCogsMessage.ts"],"names":[],"mappings":";;AACA,iCAAkC;AAElC,SAAwB,cAAc,
|
|
1
|
+
{"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"}
|
|
@@ -1 +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,
|
|
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,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/index.d.ts
CHANGED
|
@@ -10,8 +10,6 @@ export { default as useShowPhase } from './hooks/useShowPhase';
|
|
|
10
10
|
export { default as useWhenShowReset } from './hooks/useWhenShowReset';
|
|
11
11
|
export { default as useAudioClips } from './hooks/useAudioClips';
|
|
12
12
|
export { default as useIsAudioPlaying } from './hooks/useIsAudioPlaying';
|
|
13
|
-
export { default as useBackground } from './hooks/useBackground';
|
|
14
|
-
export { default as Background } from './components/Background';
|
|
15
13
|
export { default as useHint } from './hooks/useHint';
|
|
16
14
|
export { default as Hint } from './components/Hint';
|
|
17
15
|
export { default as Timer } from './components/Timer';
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Images = exports.useImages = exports.Video = exports.Timer = exports.Hint = exports.useHint = exports.
|
|
6
|
+
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;
|
|
7
7
|
// Utilities
|
|
8
8
|
var CogsConnectionProvider_1 = require("./providers/CogsConnectionProvider");
|
|
9
9
|
Object.defineProperty(exports, "CogsConnectionProvider", { enumerable: true, get: function () { return __importDefault(CogsConnectionProvider_1).default; } });
|
|
@@ -31,11 +31,6 @@ var useAudioClips_1 = require("./hooks/useAudioClips");
|
|
|
31
31
|
Object.defineProperty(exports, "useAudioClips", { enumerable: true, get: function () { return __importDefault(useAudioClips_1).default; } });
|
|
32
32
|
var useIsAudioPlaying_1 = require("./hooks/useIsAudioPlaying");
|
|
33
33
|
Object.defineProperty(exports, "useIsAudioPlaying", { enumerable: true, get: function () { return __importDefault(useIsAudioPlaying_1).default; } });
|
|
34
|
-
// Background
|
|
35
|
-
var useBackground_1 = require("./hooks/useBackground");
|
|
36
|
-
Object.defineProperty(exports, "useBackground", { enumerable: true, get: function () { return __importDefault(useBackground_1).default; } });
|
|
37
|
-
var Background_1 = require("./components/Background");
|
|
38
|
-
Object.defineProperty(exports, "Background", { enumerable: true, get: function () { return __importDefault(Background_1).default; } });
|
|
39
34
|
// Hints
|
|
40
35
|
var useHint_1 = require("./hooks/useHint");
|
|
41
36
|
Object.defineProperty(exports, "useHint", { enumerable: true, get: function () { return __importDefault(useHint_1).default; } });
|
package/dist/index.js.map
CHANGED
|
@@ -1 +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;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,
|
|
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;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"}
|
|
@@ -46,7 +46,7 @@ export default function CogsConnectionProvider({ hostname, port, children, }: {
|
|
|
46
46
|
children: React.ReactNode;
|
|
47
47
|
}): JSX.Element | null;
|
|
48
48
|
/**
|
|
49
|
-
* Get the connection from `<
|
|
49
|
+
* Get the connection from `<CogsConnectionProvider>`
|
|
50
50
|
*/
|
|
51
51
|
export declare function useCogsConnection<CustomTypes extends CogsConnectionCustomTypes<CogsConnection>>(): CogsConnection<CustomTypes>;
|
|
52
52
|
export {};
|
|
@@ -90,7 +90,7 @@ function CogsConnectionProvider({ hostname, port, children, }) {
|
|
|
90
90
|
}
|
|
91
91
|
exports.default = CogsConnectionProvider;
|
|
92
92
|
/**
|
|
93
|
-
* Get the connection from `<
|
|
93
|
+
* Get the connection from `<CogsConnectionProvider>`
|
|
94
94
|
*/
|
|
95
95
|
function useCogsConnection() {
|
|
96
96
|
return react_1.useContext(CogsConnectionContext).useCogsConnection();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clockworkdog/cogs-client-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.3",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"typescript": "^4.1.3"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@clockworkdog/cogs-client": "^0.
|
|
33
|
+
"@clockworkdog/cogs-client": "^0.16.1"
|
|
34
34
|
},
|
|
35
35
|
"description": "React components and hooks to connect to COGS to build a custom Media Master",
|
|
36
36
|
"repository": {
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const useBackground_1 = __importDefault(require("../hooks/useBackground"));
|
|
8
|
-
function Background({ className, style, connection, }) {
|
|
9
|
-
var _a, _b, _c;
|
|
10
|
-
const background = useBackground_1.default(connection);
|
|
11
|
-
return (react_1.default.createElement("div", Object.assign({}, { className }, { style: {
|
|
12
|
-
zIndex: -1,
|
|
13
|
-
position: 'absolute',
|
|
14
|
-
top: 0,
|
|
15
|
-
bottom: 0,
|
|
16
|
-
left: 0,
|
|
17
|
-
right: 0,
|
|
18
|
-
backgroundColor: (background === null || background === void 0 ? void 0 : background.color) || 'transparent',
|
|
19
|
-
backgroundImage: ((_a = background === null || background === void 0 ? void 0 : background.image) === null || _a === void 0 ? void 0 : _a.file) ? `url("${background.image.file}")` : 'none',
|
|
20
|
-
backgroundRepeat: 'no-repeat',
|
|
21
|
-
backgroundPosition: 'center',
|
|
22
|
-
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',
|
|
23
|
-
...style,
|
|
24
|
-
} })));
|
|
25
|
-
}
|
|
26
|
-
exports.default = Background;
|
|
27
|
-
//# sourceMappingURL=Background.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 = require("react");
|
|
7
|
-
const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
|
|
8
|
-
function useBackground(connection) {
|
|
9
|
-
const [background, setBackground] = react_1.useState(null);
|
|
10
|
-
useCogsMessage_1.default(connection, react_1.useCallback((message) => {
|
|
11
|
-
var _a;
|
|
12
|
-
message.type === 'media_config_update' && setBackground((_a = message.background) !== null && _a !== void 0 ? _a : null);
|
|
13
|
-
}, []));
|
|
14
|
-
return background;
|
|
15
|
-
}
|
|
16
|
-
exports.default = useBackground;
|
|
17
|
-
//# sourceMappingURL=useBackground.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"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"}
|