@clockworkdog/cogs-client-react 2.6.0 → 2.7.0
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 +2 -2
- package/dist/components/Hint.d.ts +2 -2
- package/dist/components/Hint.js +1 -1
- package/dist/components/Images.d.ts +2 -2
- package/dist/components/Images.js +1 -1
- package/dist/components/RtspVideo.d.ts +2 -2
- package/dist/components/RtspVideo.js +18 -8
- package/dist/components/Timer.d.ts +1 -1
- package/dist/components/Timer.js +18 -8
- package/dist/components/VideoContainer.d.ts +2 -2
- package/dist/components/VideoContainer.js +18 -8
- package/dist/hooks/useAudioClips.js +1 -1
- package/dist/hooks/useCogsConfig.js +1 -1
- package/dist/hooks/useCogsEvent.js +1 -1
- package/dist/hooks/useCogsEvents.js +2 -1
- package/dist/hooks/useCogsMessage.js +1 -1
- package/dist/hooks/useCogsStateValue.js +1 -1
- package/dist/hooks/useCogsStateValues.js +1 -1
- package/dist/hooks/useHint.js +4 -2
- package/dist/hooks/useImages.js +1 -1
- package/dist/hooks/useIsAudioPlaying.js +1 -1
- package/dist/hooks/useIsConnected.js +1 -1
- package/dist/hooks/usePageVisibility.js +1 -1
- package/dist/hooks/usePreloadedUrl.js +1 -1
- package/dist/hooks/useShowPhase.js +1 -1
- package/dist/hooks/useWhenShowReset.js +1 -1
- package/dist/providers/CogsConnectionProvider.d.ts +2 -2
- package/dist/providers/CogsConnectionProvider.js +25 -16
- package/package.json +38 -38
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ Use this library to create custom content for your COGS Media Master or COGS Plu
|
|
|
4
4
|
|
|
5
5
|
We recommend using the [`cogs-client` Create React App template](https://github.com/clockwork-dog/cra-template-cogs-client) to get started or follow this guide to add `@clockworkdog/cogs-client-react` to your existing project.
|
|
6
6
|
|
|
7
|
-
## [Documentation](https://clockwork-dog.github.io/cogs-
|
|
7
|
+
## [Documentation](https://clockwork-dog.github.io/cogs-sdk/react/)
|
|
8
8
|
|
|
9
9
|
## Add to your project
|
|
10
10
|
|
|
@@ -22,7 +22,7 @@ yarn add @clockworkdog/cogs-client-react
|
|
|
22
22
|
|
|
23
23
|
1. Create a `cogs-plugin-manifest.js` file in the public folder of your project.
|
|
24
24
|
|
|
25
|
-
See the [CogsPluginManifestJson documentation](https://clockwork-dog.github.io/cogs-
|
|
25
|
+
See the [CogsPluginManifestJson documentation](https://clockwork-dog.github.io/cogs-sdk/javascript/interfaces/CogsPluginManifestJson.html) for more information on the manifest format.
|
|
26
26
|
|
|
27
27
|
e.g.
|
|
28
28
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { CogsConnection } from '@clockworkdog/cogs-client';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
3
|
export default function Hint({ connection: customConnection, }: {
|
|
4
4
|
connection?: CogsConnection<any>;
|
|
5
|
-
}):
|
|
5
|
+
}): ReactNode;
|
package/dist/components/Hint.js
CHANGED
|
@@ -3,6 +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.default = Hint;
|
|
6
7
|
const react_1 = __importDefault(require("react"));
|
|
7
8
|
const useHint_1 = __importDefault(require("../hooks/useHint"));
|
|
8
9
|
const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
|
|
@@ -11,4 +12,3 @@ function Hint({ connection: customConnection, }) {
|
|
|
11
12
|
const hint = (0, useHint_1.default)(connection);
|
|
12
13
|
return hint ? react_1.default.createElement(react_1.default.Fragment, null, hint) : null;
|
|
13
14
|
}
|
|
14
|
-
exports.default = Hint;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CogsConnection } from '@clockworkdog/cogs-client';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { ReactNode } from 'react';
|
|
3
3
|
export default function Images({ className, style, connection: customConnection, fullscreen, }: {
|
|
4
4
|
className?: string;
|
|
5
5
|
style?: React.CSSProperties;
|
|
@@ -7,4 +7,4 @@ export default function Images({ className, style, connection: customConnection,
|
|
|
7
7
|
fullscreen?: boolean | {
|
|
8
8
|
style: React.CSSProperties;
|
|
9
9
|
};
|
|
10
|
-
}):
|
|
10
|
+
}): ReactNode;
|
|
@@ -3,6 +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.default = Images;
|
|
6
7
|
const react_1 = __importDefault(require("react"));
|
|
7
8
|
const useImages_1 = __importDefault(require("../hooks/useImages"));
|
|
8
9
|
const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
|
|
@@ -20,4 +21,3 @@ function Images({ className, style, connection: customConnection, fullscreen, })
|
|
|
20
21
|
});
|
|
21
22
|
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)));
|
|
22
23
|
}
|
|
23
|
-
exports.default = Images;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
export interface RtspVideoProps {
|
|
3
3
|
uri: string;
|
|
4
4
|
websocketHostname?: string;
|
|
@@ -11,4 +11,4 @@ export interface RtspVideoProps {
|
|
|
11
11
|
* websocket on the same hostname as COGS is running, but can be configured by passing in custom
|
|
12
12
|
* websocket details.
|
|
13
13
|
*/
|
|
14
|
-
export default function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live, ...rest }: RtspVideoProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>):
|
|
14
|
+
export default function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live, ...rest }: RtspVideoProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>): ReactNode;
|
|
@@ -15,17 +15,28 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
25
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
37
|
};
|
|
28
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
exports.default = RtspVideo;
|
|
29
40
|
const cogs_client_1 = require("@clockworkdog/cogs-client");
|
|
30
41
|
const react_1 = __importStar(require("react"));
|
|
31
42
|
const usePageVisibility_1 = __importDefault(require("../hooks/usePageVisibility"));
|
|
@@ -68,4 +79,3 @@ function RtspVideo({ uri, websocketHostname, websocketPort, websocketPath, live,
|
|
|
68
79
|
}, [uri, isVisible, rtspStreamer, videoRef, live]);
|
|
69
80
|
return react_1.default.createElement("video", { ref: videoRefCallback, autoPlay: true, ...rest });
|
|
70
81
|
}
|
|
71
|
-
exports.default = RtspVideo;
|
package/dist/components/Timer.js
CHANGED
|
@@ -15,17 +15,28 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
25
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
37
|
};
|
|
28
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
exports.default = Timer;
|
|
29
40
|
const react_1 = __importStar(require("react"));
|
|
30
41
|
const useCogsMessage_1 = __importDefault(require("../hooks/useCogsMessage"));
|
|
31
42
|
const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
|
|
@@ -84,4 +95,3 @@ function Timer({ className, style, connection: customConnection, separator = ':'
|
|
|
84
95
|
react_1.default.createElement("span", null, separator),
|
|
85
96
|
react_1.default.createElement("span", { style: center ? { flexBasis: 0, flexGrow: 1, textAlign: 'left' } : undefined }, seconds)));
|
|
86
97
|
}
|
|
87
|
-
exports.default = Timer;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CogsVideoPlayer } from '@clockworkdog/cogs-client';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { ReactNode } from 'react';
|
|
3
3
|
export default function VideoContainer({ className, style, videoPlayer: customVideoPlayer, fullscreen, }: {
|
|
4
4
|
className?: string;
|
|
5
5
|
style?: React.CSSProperties;
|
|
@@ -7,4 +7,4 @@ export default function VideoContainer({ className, style, videoPlayer: customVi
|
|
|
7
7
|
fullscreen?: boolean | {
|
|
8
8
|
style: React.CSSProperties;
|
|
9
9
|
};
|
|
10
|
-
}):
|
|
10
|
+
}): ReactNode;
|
|
@@ -15,14 +15,25 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
25
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.default = VideoContainer;
|
|
26
37
|
const react_1 = __importStar(require("react"));
|
|
27
38
|
const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
|
|
28
39
|
function VideoContainer({ className, style, videoPlayer: customVideoPlayer, fullscreen, }) {
|
|
@@ -39,4 +50,3 @@ function VideoContainer({ className, style, videoPlayer: customVideoPlayer, full
|
|
|
39
50
|
? { position: 'absolute', zIndex: 1, top: 0, left: 0, width: '100vw', height: '100vh', ...fullscreenCustomStyle }
|
|
40
51
|
: { position: 'relative', ...style } }));
|
|
41
52
|
}
|
|
42
|
-
exports.default = VideoContainer;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = useAudioClips;
|
|
3
4
|
const react_1 = require("react");
|
|
4
5
|
function useAudioClips(audioPlayer) {
|
|
5
6
|
const [audioClips, setAudioClips] = (0, react_1.useState)({});
|
|
@@ -10,4 +11,3 @@ function useAudioClips(audioPlayer) {
|
|
|
10
11
|
}, [audioPlayer]);
|
|
11
12
|
return audioClips;
|
|
12
13
|
}
|
|
13
|
-
exports.default = useAudioClips;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = useCogsConfig;
|
|
3
4
|
const react_1 = require("react");
|
|
4
5
|
function useCogsConfig(connection) {
|
|
5
6
|
const [config, setConfig] = (0, react_1.useState)(connection.config);
|
|
@@ -11,4 +12,3 @@ function useCogsConfig(connection) {
|
|
|
11
12
|
}, [connection]);
|
|
12
13
|
return config;
|
|
13
14
|
}
|
|
14
|
-
exports.default = useCogsConfig;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = useCogsEvent;
|
|
3
4
|
const react_1 = require("react");
|
|
4
5
|
function useCogsEvent(connection, eventName, handleEvent) {
|
|
5
6
|
(0, react_1.useEffect)(() => {
|
|
@@ -12,4 +13,3 @@ function useCogsEvent(connection, eventName, handleEvent) {
|
|
|
12
13
|
return () => connection.removeEventListener('event', listener);
|
|
13
14
|
}, [connection, eventName, handleEvent]);
|
|
14
15
|
}
|
|
15
|
-
exports.default = useCogsEvent;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = useCogsEvents;
|
|
3
4
|
const react_1 = require("react");
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
4
6
|
function useCogsEvents(connection, handleEvent) {
|
|
5
7
|
(0, react_1.useEffect)(() => {
|
|
6
8
|
const listener = (event) => handleEvent(event);
|
|
@@ -8,4 +10,3 @@ function useCogsEvents(connection, handleEvent) {
|
|
|
8
10
|
return () => connection.removeEventListener('event', listener);
|
|
9
11
|
}, [connection, handleEvent]);
|
|
10
12
|
}
|
|
11
|
-
exports.default = useCogsEvents;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = useCogsMessage;
|
|
3
4
|
const react_1 = require("react");
|
|
4
5
|
function useCogsMessage(connection, handleMessage) {
|
|
5
6
|
(0, react_1.useEffect)(() => {
|
|
@@ -10,4 +11,3 @@ function useCogsMessage(connection, handleMessage) {
|
|
|
10
11
|
return () => connection.removeEventListener('message', listener);
|
|
11
12
|
}, [connection, handleMessage]);
|
|
12
13
|
}
|
|
13
|
-
exports.default = useCogsMessage;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = useCogsStateValue;
|
|
3
4
|
const react_1 = require("react");
|
|
4
5
|
function useCogsStateValue(connection, stateName) {
|
|
5
6
|
const [value, setValue] = (0, react_1.useState)(connection.state[stateName]);
|
|
@@ -15,4 +16,3 @@ function useCogsStateValue(connection, stateName) {
|
|
|
15
16
|
}, [connection, stateName]);
|
|
16
17
|
return value;
|
|
17
18
|
}
|
|
18
|
-
exports.default = useCogsStateValue;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = useCogsInputPortValues;
|
|
3
4
|
const react_1 = require("react");
|
|
4
5
|
function useCogsInputPortValues(connection) {
|
|
5
6
|
const [value, setValue] = (0, react_1.useState)(connection.state);
|
|
@@ -11,4 +12,3 @@ function useCogsInputPortValues(connection) {
|
|
|
11
12
|
}, [connection]);
|
|
12
13
|
return value;
|
|
13
14
|
}
|
|
14
|
-
exports.default = useCogsInputPortValues;
|
package/dist/hooks/useHint.js
CHANGED
|
@@ -3,13 +3,15 @@ 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.default = useHint;
|
|
6
7
|
const react_1 = require("react");
|
|
7
8
|
const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
|
|
8
9
|
function useHint(connection) {
|
|
9
10
|
const [hint, setHint] = (0, react_1.useState)('');
|
|
10
11
|
(0, useCogsMessage_1.default)(connection, (0, react_1.useCallback)((message) => {
|
|
11
|
-
message.type === 'text_hints_update'
|
|
12
|
+
if (message.type === 'text_hints_update') {
|
|
13
|
+
setHint(message.lastSentHint);
|
|
14
|
+
}
|
|
12
15
|
}, []));
|
|
13
16
|
return hint || null;
|
|
14
17
|
}
|
|
15
|
-
exports.default = useHint;
|
package/dist/hooks/useImages.js
CHANGED
|
@@ -3,6 +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.default = useImages;
|
|
6
7
|
const react_1 = require("react");
|
|
7
8
|
const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
|
|
8
9
|
function useImages(connection) {
|
|
@@ -30,4 +31,3 @@ function useImages(connection) {
|
|
|
30
31
|
}, []));
|
|
31
32
|
return images;
|
|
32
33
|
}
|
|
33
|
-
exports.default = useImages;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = useIsAudioPlaying;
|
|
3
4
|
const react_1 = require("react");
|
|
4
5
|
const CogsConnectionProvider_1 = require("../providers/CogsConnectionProvider");
|
|
5
6
|
function useIsAudioPlaying(customAudioPlayer) {
|
|
@@ -12,4 +13,3 @@ function useIsAudioPlaying(customAudioPlayer) {
|
|
|
12
13
|
}, [audioPlayer]);
|
|
13
14
|
return isAudioPlaying;
|
|
14
15
|
}
|
|
15
|
-
exports.default = useIsAudioPlaying;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = useIsConnected;
|
|
3
4
|
const react_1 = require("react");
|
|
4
5
|
function useIsConnected(connection) {
|
|
5
6
|
const [isConnected, setConnected] = (0, react_1.useState)(connection.isConnected);
|
|
@@ -18,4 +19,3 @@ function useIsConnected(connection) {
|
|
|
18
19
|
}, [connection]);
|
|
19
20
|
return isConnected;
|
|
20
21
|
}
|
|
21
|
-
exports.default = useIsConnected;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = usePageVisibility;
|
|
3
4
|
const react_1 = require("react");
|
|
4
5
|
/**
|
|
5
6
|
* Uses the Page Visibility API to detect if the page is currently visible to the user.
|
|
@@ -15,4 +16,3 @@ function usePageVisibility() {
|
|
|
15
16
|
});
|
|
16
17
|
return isVisible;
|
|
17
18
|
}
|
|
18
|
-
exports.default = usePageVisibility;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.default = usePreloadedUrl;
|
|
3
4
|
const cogs_client_1 = require("@clockworkdog/cogs-client");
|
|
4
5
|
const react_1 = require("react");
|
|
5
6
|
function usePreloadedUrl(url) {
|
|
@@ -9,4 +10,3 @@ function usePreloadedUrl(url) {
|
|
|
9
10
|
}, [url]);
|
|
10
11
|
return preloadedUrl;
|
|
11
12
|
}
|
|
12
|
-
exports.default = usePreloadedUrl;
|
|
@@ -3,6 +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.default = useShowPhase;
|
|
6
7
|
const react_1 = require("react");
|
|
7
8
|
const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
|
|
8
9
|
function useShowPhase(connection) {
|
|
@@ -14,4 +15,3 @@ function useShowPhase(connection) {
|
|
|
14
15
|
}, []));
|
|
15
16
|
return status;
|
|
16
17
|
}
|
|
17
|
-
exports.default = useShowPhase;
|
|
@@ -3,6 +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.default = useWhenShowReset;
|
|
6
7
|
const react_1 = require("react");
|
|
7
8
|
const useCogsMessage_1 = __importDefault(require("./useCogsMessage"));
|
|
8
9
|
function useWhenShowReset(connection, whenReset) {
|
|
@@ -12,4 +13,3 @@ function useWhenShowReset(connection, whenReset) {
|
|
|
12
13
|
}
|
|
13
14
|
}, [whenReset]));
|
|
14
15
|
}
|
|
15
|
-
exports.default = useWhenShowReset;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CogsAudioPlayer, CogsConnection, CogsPluginManifest, CogsVideoPlayer } from '@clockworkdog/cogs-client';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { ReactNode } from 'react';
|
|
3
3
|
/**
|
|
4
4
|
* Create a persistent connection to COGS which can be accessed with `useCogsConnection()`
|
|
5
5
|
* @param audioPlayer Creates a `CogsAudioPlayer` than can be accessed with `useAudioPlayer()`
|
|
@@ -55,7 +55,7 @@ export default function CogsConnectionProvider<Manifest extends CogsPluginManife
|
|
|
55
55
|
children: React.ReactNode;
|
|
56
56
|
audioPlayer?: boolean;
|
|
57
57
|
videoPlayer?: boolean;
|
|
58
|
-
}):
|
|
58
|
+
}): ReactNode | null;
|
|
59
59
|
/**
|
|
60
60
|
* Get the connection from `<CogsConnectionProvider>`
|
|
61
61
|
*/
|
|
@@ -15,17 +15,31 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
25
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.
|
|
36
|
+
exports.default = CogsConnectionProvider;
|
|
37
|
+
exports.useCogsConnection = useCogsConnection;
|
|
38
|
+
exports.useAudioPlayer = useAudioPlayer;
|
|
39
|
+
exports.useVideoPlayer = useVideoPlayer;
|
|
27
40
|
const cogs_client_1 = require("@clockworkdog/cogs-client");
|
|
28
41
|
const react_1 = __importStar(require("react"));
|
|
42
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
29
43
|
const CogsConnectionContext = react_1.default.createContext({
|
|
30
44
|
useCogsConnection: (customConnection) => {
|
|
31
45
|
if (!customConnection) {
|
|
@@ -95,7 +109,7 @@ const CogsConnectionContext = react_1.default.createContext({
|
|
|
95
109
|
* ```
|
|
96
110
|
*/
|
|
97
111
|
function CogsConnectionProvider({ manifest, hostname, port, children, audioPlayer, videoPlayer, }) {
|
|
98
|
-
const connectionRef = (0, react_1.useRef)();
|
|
112
|
+
const connectionRef = (0, react_1.useRef)(undefined);
|
|
99
113
|
const [, forceRender] = (0, react_1.useState)({});
|
|
100
114
|
(0, react_1.useEffect)(() => {
|
|
101
115
|
const connection = new cogs_client_1.CogsConnection(manifest, { hostname, port });
|
|
@@ -106,13 +120,13 @@ function CogsConnectionProvider({ manifest, hostname, port, children, audioPlaye
|
|
|
106
120
|
connection.close();
|
|
107
121
|
};
|
|
108
122
|
}, [manifest, hostname, port]);
|
|
109
|
-
const audioPlayerRef = (0, react_1.useRef)();
|
|
123
|
+
const audioPlayerRef = (0, react_1.useRef)(undefined);
|
|
110
124
|
(0, react_1.useEffect)(() => {
|
|
111
125
|
if (audioPlayer && !audioPlayerRef.current && connectionRef.current) {
|
|
112
126
|
audioPlayerRef.current = new cogs_client_1.CogsAudioPlayer(connectionRef.current);
|
|
113
127
|
}
|
|
114
128
|
}, [audioPlayer]);
|
|
115
|
-
const videoPlayerRef = (0, react_1.useRef)();
|
|
129
|
+
const videoPlayerRef = (0, react_1.useRef)(undefined);
|
|
116
130
|
(0, react_1.useEffect)(() => {
|
|
117
131
|
if (videoPlayer && !videoPlayerRef.current && connectionRef.current) {
|
|
118
132
|
videoPlayerRef.current = new cogs_client_1.CogsVideoPlayer(connectionRef.current);
|
|
@@ -123,32 +137,27 @@ function CogsConnectionProvider({ manifest, hostname, port, children, audioPlaye
|
|
|
123
137
|
return null;
|
|
124
138
|
}
|
|
125
139
|
const value = {
|
|
126
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
127
140
|
useCogsConnection: (customConnection) => customConnection !== null && customConnection !== void 0 ? customConnection : connectionRef.current,
|
|
128
141
|
useAudioPlayer: (customAudioPlayer) => { var _a; return (_a = customAudioPlayer !== null && customAudioPlayer !== void 0 ? customAudioPlayer : audioPlayerRef.current) !== null && _a !== void 0 ? _a : null; },
|
|
129
142
|
useVideoPlayer: (customVideoPlayer) => { var _a; return (_a = customVideoPlayer !== null && customVideoPlayer !== void 0 ? customVideoPlayer : videoPlayerRef.current) !== null && _a !== void 0 ? _a : null; },
|
|
130
143
|
};
|
|
131
144
|
return react_1.default.createElement(CogsConnectionContext.Provider, { value: value }, children);
|
|
132
145
|
}
|
|
133
|
-
exports.default = CogsConnectionProvider;
|
|
134
146
|
/**
|
|
135
147
|
* Get the connection from `<CogsConnectionProvider>`
|
|
136
148
|
*/
|
|
137
149
|
function useCogsConnection(customConnection) {
|
|
138
150
|
return (0, react_1.useContext)(CogsConnectionContext).useCogsConnection(customConnection);
|
|
139
151
|
}
|
|
140
|
-
exports.useCogsConnection = useCogsConnection;
|
|
141
152
|
/**
|
|
142
153
|
* Get the audio player from `<CogsConnectionProvider audioPlayer>`
|
|
143
154
|
*/
|
|
144
155
|
function useAudioPlayer(customAudioPlayer) {
|
|
145
156
|
return (0, react_1.useContext)(CogsConnectionContext).useAudioPlayer(customAudioPlayer);
|
|
146
157
|
}
|
|
147
|
-
exports.useAudioPlayer = useAudioPlayer;
|
|
148
158
|
/**
|
|
149
159
|
* Get the video player from `<CogsConnectionProvider videoPlayer>`
|
|
150
160
|
*/
|
|
151
161
|
function useVideoPlayer(customVideoPlayer) {
|
|
152
162
|
return (0, react_1.useContext)(CogsConnectionContext).useVideoPlayer(customVideoPlayer);
|
|
153
163
|
}
|
|
154
|
-
exports.useVideoPlayer = useVideoPlayer;
|
package/package.json
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clockworkdog/cogs-client-react",
|
|
3
|
-
"
|
|
4
|
-
"main": "dist/index.js",
|
|
5
|
-
"scripts": {
|
|
6
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
7
|
-
"lint": "yarn lint:json && yarn lint:ts",
|
|
8
|
-
"lint:json": "prettier --list-different .eslintrc *.json",
|
|
9
|
-
"lint:ts": "eslint --ext .js,.ts --ignore-path .gitignore .",
|
|
10
|
-
"build": "tsc",
|
|
11
|
-
"watch-build": "tsc -w",
|
|
12
|
-
"build-docs": "typedoc --out docs --name @clockworkdog/cogs-client-react src/index.ts",
|
|
13
|
-
"release": "yarn publish --access public"
|
|
14
|
-
},
|
|
15
|
-
"keywords": [],
|
|
3
|
+
"description": "React components and hooks to connect to COGS to build a custom Media Master",
|
|
16
4
|
"author": "Clockwork Dog <info@clockwork.dog>",
|
|
5
|
+
"homepage": "https://github.com/clockwork-dog/cogs-sdk/tree/main/packages/react",
|
|
6
|
+
"version": "2.7.0",
|
|
7
|
+
"keywords": [],
|
|
17
8
|
"license": "MIT",
|
|
18
|
-
"devDependencies": {
|
|
19
|
-
"@types/node": "18",
|
|
20
|
-
"@types/react": "^17.0.0",
|
|
21
|
-
"@types/react-dom": "^17.0.0",
|
|
22
|
-
"@typescript-eslint/eslint-plugin": "^4.12.0",
|
|
23
|
-
"@typescript-eslint/parser": "^4.12.0",
|
|
24
|
-
"eslint": "^7.17.0",
|
|
25
|
-
"eslint-config-prettier": "^7.1.0",
|
|
26
|
-
"eslint-plugin-prettier": "^3.3.1",
|
|
27
|
-
"eslint-plugin-react": "^7.22.0",
|
|
28
|
-
"eslint-plugin-react-hooks": "^4.2.0",
|
|
29
|
-
"prettier": "^2.2.1",
|
|
30
|
-
"typedoc": "^0.25.7",
|
|
31
|
-
"typescript": "^5.1.6"
|
|
32
|
-
},
|
|
33
|
-
"dependencies": {
|
|
34
|
-
"@clockworkdog/cogs-client": "~2.5"
|
|
35
|
-
},
|
|
36
|
-
"description": "React components and hooks to connect to COGS to build a custom Media Master",
|
|
37
9
|
"repository": {
|
|
38
10
|
"type": "git",
|
|
39
|
-
"url": "git+https://github.com/clockwork-dog/cogs-
|
|
11
|
+
"url": "git+https://github.com/clockwork-dog/cogs-sdk.git"
|
|
40
12
|
},
|
|
41
13
|
"bugs": {
|
|
42
|
-
"url": "https://github.com/clockwork-dog/cogs-
|
|
14
|
+
"url": "https://github.com/clockwork-dog/cogs-sdk/issues"
|
|
43
15
|
},
|
|
44
|
-
"homepage": "https://cogs.show",
|
|
45
16
|
"files": [
|
|
46
17
|
"dist/**/*"
|
|
47
18
|
],
|
|
19
|
+
"main": "dist/index.js",
|
|
20
|
+
"scripts": {
|
|
21
|
+
"test": "yarn types && yarn lint",
|
|
22
|
+
"types": "tsc --noEmit",
|
|
23
|
+
"lint": "eslint .",
|
|
24
|
+
"build": "tsc",
|
|
25
|
+
"watch-build": "tsc -w",
|
|
26
|
+
"build-docs": "typedoc --out ../../docs/react --name @clockworkdog/cogs-client-react src/index.ts",
|
|
27
|
+
"release": "yarn npm publish --access public"
|
|
28
|
+
},
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@clockworkdog/cogs-client": "^2.7.0"
|
|
31
|
+
},
|
|
48
32
|
"peerDependencies": {
|
|
49
|
-
"react": "^18.
|
|
50
|
-
"react-dom": "^18.
|
|
33
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
34
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@eslint/js": "^9.17.0",
|
|
38
|
+
"@types/node": "^22.10.2",
|
|
39
|
+
"@types/react": "^19.0.1",
|
|
40
|
+
"@types/react-dom": "^19.0.2",
|
|
41
|
+
"eslint": "^9.17.0",
|
|
42
|
+
"eslint-config-prettier": "^9.1.0",
|
|
43
|
+
"eslint-plugin-prettier": "^5.2.1",
|
|
44
|
+
"eslint-plugin-react": "^7.37.2",
|
|
45
|
+
"eslint-plugin-react-hooks": "^5.1.0",
|
|
46
|
+
"globals": "^15.13.0",
|
|
47
|
+
"prettier": "^3.4.2",
|
|
48
|
+
"typedoc": "^0.27.5",
|
|
49
|
+
"typescript": "~5.7.2",
|
|
50
|
+
"typescript-eslint": "^8.18.1"
|
|
51
51
|
}
|
|
52
|
-
}
|
|
52
|
+
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2023 Clockwork Dog
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|