@clockworkdog/cogs-client 2.4.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 +6 -6
- package/dist/AudioPlayer.js +1 -0
- package/dist/CogsConnection.d.ts +0 -8
- package/dist/CogsConnection.js +7 -39
- package/dist/VideoPlayer.js +4 -2
- package/dist/browser/index.js +1485 -1725
- package/dist/helpers/urls.d.ts +1 -7
- package/dist/helpers/urls.js +8 -11
- package/dist/index.js +17 -7
- package/dist/types/CogsClientMessage.d.ts +0 -1
- package/dist/types/CogsPluginManifest.d.ts +2 -0
- package/package.json +39 -39
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Create content for your COGS Media Master
|
|
4
4
|
|
|
5
|
-
## [Documentation](https://clockwork-dog.github.io/cogs-
|
|
5
|
+
## [Documentation](https://clockwork-dog.github.io/cogs-sdk/javascript/)
|
|
6
6
|
|
|
7
7
|
## Add to your project
|
|
8
8
|
|
|
@@ -32,7 +32,7 @@ yarn add @clockworkdog/cogs-client
|
|
|
32
32
|
|
|
33
33
|
### Create a `cogs-plugin-manifest.js` file
|
|
34
34
|
|
|
35
|
-
See [
|
|
35
|
+
See [CogsPluginManifestJson](https://clockwork-dog.github.io/cogs-sdk/javascript/interfaces/CogsPluginManifestJson.html) for details of what to include.
|
|
36
36
|
|
|
37
37
|
If using Typescript set `"allowJs": true` in your `tsconfig.json`.
|
|
38
38
|
|
|
@@ -107,7 +107,7 @@ import { CogsConnection, CogsAudioPlayer } from '@clockworkdog/cogs-client';
|
|
|
107
107
|
|
|
108
108
|
### Connect to COGS
|
|
109
109
|
|
|
110
|
-
Initialize a [CogsConnection](https://clockwork-dog.github.io/cogs-
|
|
110
|
+
Initialize a [CogsConnection](https://clockwork-dog.github.io/cogs-sdk/javascript/classes/CogsConnection.html) with the manifest you created above.
|
|
111
111
|
|
|
112
112
|
```ts
|
|
113
113
|
let connected = false;
|
|
@@ -152,14 +152,14 @@ You can save arbitrary data to COGS which will be restored when reconnecting wit
|
|
|
152
152
|
```ts
|
|
153
153
|
const cogsConnection = new CogsConnection(manifest, {
|
|
154
154
|
// Initial items in the store
|
|
155
|
-
'my-key': { foo: 0, bar: '' }
|
|
155
|
+
'my-key': { foo: 0, bar: '' },
|
|
156
156
|
});
|
|
157
157
|
|
|
158
158
|
// Update the store
|
|
159
159
|
cogsConnection.store.setItems({ 'my-key': { foo: 1, bar: 'two' } });
|
|
160
160
|
|
|
161
161
|
// Get item from data store
|
|
162
|
-
cogsConnection.store.items.getItem('my-key')
|
|
162
|
+
cogsConnection.store.items.getItem('my-key');
|
|
163
163
|
|
|
164
164
|
// Listen for data changes
|
|
165
165
|
cogsConnection.store.addEventListener('item', ({ key, value }) => {
|
|
@@ -182,7 +182,7 @@ Add `audio` to `cogs-plugin-manifest.js`:
|
|
|
182
182
|
}
|
|
183
183
|
```
|
|
184
184
|
|
|
185
|
-
Add [CogsAudioPlayer](https://clockwork-dog.github.io/cogs-
|
|
185
|
+
Add [CogsAudioPlayer](https://clockwork-dog.github.io/cogs-sdk/javascript/classes/CogsAudioPlayer.html) to your page:
|
|
186
186
|
|
|
187
187
|
```ts
|
|
188
188
|
const audioPlayer = new CogsAudioPlayer(cogsConnection);
|
package/dist/AudioPlayer.js
CHANGED
|
@@ -5,6 +5,7 @@ const DEBUG = false;
|
|
|
5
5
|
// Check an iOS-only property (See https://developer.mozilla.org/en-US/docs/Web/API/Navigator#non-standard_properties)
|
|
6
6
|
const IS_IOS = typeof navigator.standalone !== 'undefined';
|
|
7
7
|
class AudioPlayer {
|
|
8
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8
9
|
constructor(cogsConnection) {
|
|
9
10
|
this.cogsConnection = cogsConnection;
|
|
10
11
|
this.eventTarget = new EventTarget();
|
package/dist/CogsConnection.d.ts
CHANGED
|
@@ -20,14 +20,6 @@ export default class CogsConnection<Manifest extends CogsPluginManifest, DataT e
|
|
|
20
20
|
get showPhase(): ShowPhase;
|
|
21
21
|
private _timerState;
|
|
22
22
|
get timerState(): TimerState | null;
|
|
23
|
-
/**
|
|
24
|
-
* Track the support for HTTP/2 assets on the client and server side
|
|
25
|
-
* Client side is dictated by the environment we're connecting from (and the media cogs-av-box version)
|
|
26
|
-
* Server side is dictated by the COGS version which added the HTTP/2 assets server itself
|
|
27
|
-
*/
|
|
28
|
-
private clientSupportsHttp2Assets;
|
|
29
|
-
private serverSupportsHttp2Assets;
|
|
30
|
-
get supportsHttp2Assets(): boolean;
|
|
31
23
|
/**
|
|
32
24
|
* Return asset URLs using the information about the client and server support for HTTP/2
|
|
33
25
|
*/
|
package/dist/CogsConnection.js
CHANGED
|
@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.CogsIncomingEvent = exports.CogsStateChangedEvent = exports.CogsConfigChangedEvent = exports.CogsMessageEvent = exports.CogsConnectionCloseEvent = exports.CogsConnectionOpenEvent = void 0;
|
|
7
|
-
const compare_versions_1 = require("compare-versions");
|
|
8
7
|
const ShowPhase_1 = __importDefault(require("./types/ShowPhase"));
|
|
9
8
|
const reconnecting_websocket_1 = __importDefault(require("reconnecting-websocket"));
|
|
10
9
|
const urls_1 = require("./helpers/urls");
|
|
@@ -22,15 +21,12 @@ class CogsConnection {
|
|
|
22
21
|
get timerState() {
|
|
23
22
|
return this._timerState ? { ...this._timerState } : null;
|
|
24
23
|
}
|
|
25
|
-
get supportsHttp2Assets() {
|
|
26
|
-
return this.clientSupportsHttp2Assets && this.serverSupportsHttp2Assets;
|
|
27
|
-
}
|
|
28
24
|
/**
|
|
29
25
|
* Return asset URLs using the information about the client and server support for HTTP/2
|
|
30
26
|
*/
|
|
31
27
|
getAssetUrl(path) {
|
|
32
28
|
var _a, _b;
|
|
33
|
-
return `${(0, urls_1.assetUrl)(path
|
|
29
|
+
return `${(0, urls_1.assetUrl)(path)}?${(_b = (_a = this.urlParams) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''}`;
|
|
34
30
|
}
|
|
35
31
|
get selectedAudioOutput() {
|
|
36
32
|
return this._selectedAudioOutput;
|
|
@@ -43,13 +39,6 @@ class CogsConnection {
|
|
|
43
39
|
this.currentState = {}; // Received on open connection - TODO: set initial state from manifest?
|
|
44
40
|
this._showPhase = ShowPhase_1.default.Setup;
|
|
45
41
|
this._timerState = null;
|
|
46
|
-
/**
|
|
47
|
-
* Track the support for HTTP/2 assets on the client and server side
|
|
48
|
-
* Client side is dictated by the environment we're connecting from (and the media cogs-av-box version)
|
|
49
|
-
* Server side is dictated by the COGS version which added the HTTP/2 assets server itself
|
|
50
|
-
*/
|
|
51
|
-
this.clientSupportsHttp2Assets = false;
|
|
52
|
-
this.serverSupportsHttp2Assets = false;
|
|
53
42
|
/**
|
|
54
43
|
* Cached audio outputs use to look up the device/sink ID when a different device label is requested
|
|
55
44
|
*/
|
|
@@ -57,7 +46,7 @@ class CogsConnection {
|
|
|
57
46
|
this._selectedAudioOutput = '';
|
|
58
47
|
this.currentState = { ...initialClientState };
|
|
59
48
|
this.store = new DataStore_1.default(initialDataStoreData !== null && initialDataStoreData !== void 0 ? initialDataStoreData : {});
|
|
60
|
-
const { useReconnectingWebsocket, path, pathParams
|
|
49
|
+
const { useReconnectingWebsocket, path, pathParams } = websocketParametersFromUrl(document.location.href);
|
|
61
50
|
// Store the URL parameters for use in asset URLs
|
|
62
51
|
// and add screen dimensions which COGS can use to determine the best asset quality to serve
|
|
63
52
|
//
|
|
@@ -69,13 +58,9 @@ class CogsConnection {
|
|
|
69
58
|
this.urlParams.set('screenPixelRatio', window.devicePixelRatio.toString());
|
|
70
59
|
const socketUrl = `ws://${hostname}:${port}${path}?${this.urlParams}`;
|
|
71
60
|
this.websocket = useReconnectingWebsocket ? new reconnecting_websocket_1.default(socketUrl) : new WebSocket(socketUrl);
|
|
72
|
-
this.clientSupportsHttp2Assets = !!supportsHttp2Assets;
|
|
73
61
|
this.websocket.onopen = () => {
|
|
74
62
|
this.currentConfig = {}; // Received on open connection
|
|
75
63
|
this.currentState = {}; // Received on open connection
|
|
76
|
-
// Reset this flag as we might have just connected to an old COGS version which doesn't support HTTP/2
|
|
77
|
-
// The flag will be set when COGS sends a "cogs_environment" message
|
|
78
|
-
this.serverSupportsHttp2Assets = false;
|
|
79
64
|
this.dispatchEvent(new CogsConnectionOpenEvent());
|
|
80
65
|
this.setState(this.currentState); // TODO: Remove this because you should set it manually...??
|
|
81
66
|
};
|
|
@@ -110,9 +95,6 @@ class CogsConnection {
|
|
|
110
95
|
case 'show_phase':
|
|
111
96
|
this._showPhase = message.phase;
|
|
112
97
|
break;
|
|
113
|
-
case 'cogs_environment':
|
|
114
|
-
this.serverSupportsHttp2Assets = message.http2AssetsServer;
|
|
115
|
-
break;
|
|
116
98
|
case 'media_config_update':
|
|
117
99
|
for (const optionName of ['preferOptimizedAudio', 'preferOptimizedVideo', 'preferOptimizedImages']) {
|
|
118
100
|
const optionEnabled = message[optionName];
|
|
@@ -227,66 +209,52 @@ class CogsConnection {
|
|
|
227
209
|
}
|
|
228
210
|
exports.default = CogsConnection;
|
|
229
211
|
function websocketParametersFromUrl(url) {
|
|
230
|
-
var _a, _b, _c, _d, _e
|
|
212
|
+
var _a, _b, _c, _d, _e;
|
|
231
213
|
const parsedUrl = new URL(url);
|
|
232
214
|
const pathParams = new URLSearchParams(parsedUrl.searchParams);
|
|
233
215
|
const localClientId = pathParams.get('local_id');
|
|
234
216
|
const isSimulator = pathParams.get('simulator') === 'true';
|
|
235
217
|
const display = (_a = pathParams.get('display')) !== null && _a !== void 0 ? _a : '';
|
|
236
218
|
const pluginId = parsedUrl.pathname.startsWith('/plugin/') ? decodeURIComponent(parsedUrl.pathname.split('/')[2]) : undefined;
|
|
237
|
-
// Allow explicitly disabling HTTP/2 assets. This is useful in situations where we know the self-signed certificate cannot be
|
|
238
|
-
// supported such as the native mobile app
|
|
239
|
-
const disableHttp2Assets = ((_b = pathParams.get('http2Assets')) !== null && _b !== void 0 ? _b : '') === 'false';
|
|
240
219
|
if (localClientId) {
|
|
241
|
-
const type = (
|
|
220
|
+
const type = (_b = pathParams.get('t')) !== null && _b !== void 0 ? _b : '';
|
|
242
221
|
pathParams.delete('local_id');
|
|
243
222
|
return {
|
|
244
223
|
path: `/local/${encodeURIComponent(localClientId)}`,
|
|
245
224
|
pathParams: new URLSearchParams({ t: type }),
|
|
246
225
|
useReconnectingWebsocket: true,
|
|
247
|
-
supportsHttp2Assets: !disableHttp2Assets,
|
|
248
226
|
};
|
|
249
227
|
}
|
|
250
228
|
else if (isSimulator) {
|
|
251
|
-
const
|
|
252
|
-
pathParams.delete('http2Assets');
|
|
253
|
-
const name = (_e = pathParams.get('name')) !== null && _e !== void 0 ? _e : '';
|
|
229
|
+
const name = (_c = pathParams.get('name')) !== null && _c !== void 0 ? _c : '';
|
|
254
230
|
pathParams.delete('simulator');
|
|
255
231
|
pathParams.delete('name');
|
|
256
232
|
return {
|
|
257
233
|
path: `/simulator/${encodeURIComponent(name)}`,
|
|
258
234
|
pathParams,
|
|
259
235
|
useReconnectingWebsocket: true,
|
|
260
|
-
supportsHttp2Assets: !disableHttp2Assets && supportsHttp2Assets,
|
|
261
236
|
};
|
|
262
237
|
}
|
|
263
238
|
else if (display) {
|
|
264
|
-
const displayIdIndex = (
|
|
239
|
+
const displayIdIndex = (_d = pathParams.get('displayIdIndex')) !== null && _d !== void 0 ? _d : '';
|
|
265
240
|
pathParams.delete('display');
|
|
266
241
|
pathParams.delete('displayIdIndex');
|
|
267
242
|
return {
|
|
268
243
|
path: `/display/${encodeURIComponent(display)}/${encodeURIComponent(displayIdIndex)}`,
|
|
269
|
-
supportsHttp2Assets: !disableHttp2Assets,
|
|
270
244
|
};
|
|
271
245
|
}
|
|
272
246
|
else if (pluginId) {
|
|
273
247
|
return {
|
|
274
248
|
path: `/plugin/${encodeURIComponent(pluginId)}`,
|
|
275
249
|
useReconnectingWebsocket: true,
|
|
276
|
-
supportsHttp2Assets: !disableHttp2Assets,
|
|
277
250
|
};
|
|
278
251
|
}
|
|
279
252
|
else {
|
|
280
|
-
const serial = (
|
|
253
|
+
const serial = (_e = pathParams.get('serial')) !== null && _e !== void 0 ? _e : '';
|
|
281
254
|
pathParams.delete('serial');
|
|
282
|
-
// Check if cogs-box-av is a version which added support for ignoring HTTP/2 self-signed certificates
|
|
283
|
-
const firmwareVersion = ((_h = pathParams.get('f')) !== null && _h !== void 0 ? _h : '').replace(/^v/, '');
|
|
284
|
-
const isCogsBoxAvDevBuild = firmwareVersion === '0.0.0'; // We assume dev firmware builds have HTTP/2 assets support - Added in 2024-03
|
|
285
|
-
const supportsHttp2Assets = isCogsBoxAvDevBuild || ((0, compare_versions_1.validate)(firmwareVersion) && (0, compare_versions_1.satisfies)(firmwareVersion, '>=4.9.0'));
|
|
286
255
|
return {
|
|
287
256
|
path: `/client/${encodeURIComponent(serial)}`,
|
|
288
257
|
pathParams,
|
|
289
|
-
supportsHttp2Assets: !disableHttp2Assets && supportsHttp2Assets,
|
|
290
258
|
};
|
|
291
259
|
}
|
|
292
260
|
}
|
package/dist/VideoPlayer.js
CHANGED
|
@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const VideoState_1 = require("./types/VideoState");
|
|
4
4
|
const DEFAULT_PARENT_ELEMENT = document.body;
|
|
5
5
|
class VideoPlayer {
|
|
6
|
-
constructor(
|
|
6
|
+
constructor(
|
|
7
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8
|
+
cogsConnection, parentElement = DEFAULT_PARENT_ELEMENT) {
|
|
7
9
|
this.cogsConnection = cogsConnection;
|
|
8
10
|
this.eventTarget = new EventTarget();
|
|
9
11
|
this.globalVolume = 1;
|
|
@@ -262,7 +264,7 @@ class VideoPlayer {
|
|
|
262
264
|
loop: (_d = (_c = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _c === void 0 ? void 0 : _c.loop) !== null && _d !== void 0 ? _d : false,
|
|
263
265
|
volume: ((_e = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _e === void 0 ? void 0 : _e.muted)
|
|
264
266
|
? 0
|
|
265
|
-
: (_g = (_f = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _f === void 0 ? void 0 : _f.volume) !== null && _g !== void 0 ? _g : 0,
|
|
267
|
+
: ((_g = (_f = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _f === void 0 ? void 0 : _f.volume) !== null && _g !== void 0 ? _g : 0),
|
|
266
268
|
}
|
|
267
269
|
: undefined,
|
|
268
270
|
};
|