@clockworkdog/cogs-client 2.3.0 → 2.5.0

package/README.md

@@ -112,7 +112,7 @@ Initialize a [CogsConnection](https://clockwork-dog.github.io/cogs-client-lib/in
 ```ts
 let connected = false;
 
-import manifest from './cogs-plugin-manifest.js'; // Requires `"allowJs": true` in `tsconfig.json`
+import * as manifest from './cogs-plugin-manifest.js'; // Requires `"allowJs": true` in `tsconfig.json`
 
 const cogsConnection = new CogsConnection(manifest);
 cogsConnection.addEventListener('open', () => {
@@ -147,6 +147,29 @@ function sendPortUpdateToCogs() {
 }
 ```
 
+You can save arbitrary data to COGS which will be restored when reconnecting with COGS:
+
+```ts
+const cogsConnection = new CogsConnection(manifest, {
+  // Initial items in the store
+  'my-key': { foo: 0, bar: '' }
+});
+
+// Update the store
+cogsConnection.store.setItems({ 'my-key': { foo: 1, bar: 'two' } });
+
+// Get item from data store
+cogsConnection.store.items.getItem('my-key')
+
+// Listen for data changes
+cogsConnection.store.addEventListener('item', ({ key, value }) => {
+  console.log(key, 'item changed:', value);
+});
+cogsConnection.store.addEventListener('items', ({ items }) => {
+  console.log('items changed:', items);
+});
+```
+
 ### Support audio actions
 
 Add `audio` to `cogs-plugin-manifest.js`:

package/dist/CogsConnection.d.ts

@@ -5,7 +5,10 @@ import AllMediaClipStatesMessage from './types/AllMediaClipStatesMessage';
 import { CogsPluginManifest, PluginManifestEventJson } from './types/CogsPluginManifest';
 import * as ManifestTypes from './types/ManifestTypes';
 import { DeepReadonly } from './types/utils';
-export default class CogsConnection<Manifest extends CogsPluginManifest> {
+import DataStore from './DataStore';
+export default class CogsConnection<Manifest extends CogsPluginManifest, DataT extends {
+    [key: string]: unknown;
+} = Record<never, never>> {
     readonly manifest: Manifest;
     private websocket;
     private eventTarget;
@@ -17,14 +20,6 @@ export default class CogsConnection<Manifest extends CogsPluginManifest> {
     get showPhase(): ShowPhase;
     private _timerState;
     get timerState(): TimerState | null;
-    /**
-     * Track the support for HTTP/2 assets on the client and server side
-     * Client side is dictated by the environment we're connecting from (and the media cogs-av-box version)
-     * Server side is dictated by the COGS version which added the HTTP/2 assets server itself
-     */
-    private clientSupportsHttp2Assets;
-    private serverSupportsHttp2Assets;
-    get supportsHttp2Assets(): boolean;
     /**
      * Return asset URLs using the information about the client and server support for HTTP/2
      */
@@ -35,6 +30,10 @@ export default class CogsConnection<Manifest extends CogsPluginManifest> {
     private audioOutputs;
     private _selectedAudioOutput;
     get selectedAudioOutput(): string;
+    /**
+     * Stores data in COGS
+     */
+    store: DataStore<DataT>;
     /**
      * URL parameters use for the websocket connection and asset URLs
      */
@@ -44,7 +43,7 @@ export default class CogsConnection<Manifest extends CogsPluginManifest> {
         port?: number;
     }, initialClientState?: Partial<ManifestTypes.StateAsObject<Manifest, {
         writableFromClient: true;
-    }>> | undefined);
+    }>>, initialDataStoreData?: DataT);
     get isConnected(): boolean;
     close(): void;
     sendEvent<EventName extends ManifestTypes.EventNameToCogs<Manifest>>(eventName: EventName, ...[eventValue]: ManifestTypes.EventToCogsAsObject<Manifest>[EventName] extends undefined ? [] : [ManifestTypes.EventToCogsAsObject<Manifest>[EventName]]): void;
@@ -55,6 +54,7 @@ export default class CogsConnection<Manifest extends CogsPluginManifest> {
     sendInitialMediaClipStates(allMediaClipStates: AllMediaClipStatesMessage): void;
     sendMediaClipState(mediaClipState: MediaClipStateMessage): void;
     sendAudioOutputs(audioOutputs: MediaDeviceInfo[]): void;
+    private sendDataStoreItems;
     /**
      * Show or hide the plugin window.
      * @param visible Whether to show or hide the window

package/dist/CogsConnection.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CogsIncomingEvent = exports.CogsStateChangedEvent = exports.CogsConfigChangedEvent = exports.CogsMessageEvent = exports.CogsConnectionCloseEvent = exports.CogsConnectionOpenEvent = void 0;
-const compare_versions_1 = require("compare-versions");
 const ShowPhase_1 = __importDefault(require("./types/ShowPhase"));
 const reconnecting_websocket_1 = __importDefault(require("reconnecting-websocket"));
 const urls_1 = require("./helpers/urls");
+const DataStore_1 = __importDefault(require("./DataStore"));
 class CogsConnection {
     get config() {
         return { ...this.currentConfig };
@@ -21,20 +21,17 @@ class CogsConnection {
     get timerState() {
         return this._timerState ? { ...this._timerState } : null;
     }
-    get supportsHttp2Assets() {
-        return this.clientSupportsHttp2Assets && this.serverSupportsHttp2Assets;
-    }
     /**
      * Return asset URLs using the information about the client and server support for HTTP/2
      */
     getAssetUrl(path) {
         var _a, _b;
-        return `${(0, urls_1.assetUrl)(path, this.supportsHttp2Assets)}?${(_b = (_a = this.urlParams) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''}`;
+        return `${(0, urls_1.assetUrl)(path)}?${(_b = (_a = this.urlParams) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''}`;
     }
     get selectedAudioOutput() {
         return this._selectedAudioOutput;
     }
-    constructor(manifest, { hostname = document.location.hostname, port = urls_1.COGS_SERVER_PORT } = {}, initialClientState = undefined) {
+    constructor(manifest, { hostname = document.location.hostname, port = urls_1.COGS_SERVER_PORT } = {}, initialClientState, initialDataStoreData) {
         var _a;
         this.manifest = manifest;
         this.eventTarget = new EventTarget();
@@ -42,20 +39,14 @@ class CogsConnection {
         this.currentState = {}; // Received on open connection - TODO: set initial state from manifest?
         this._showPhase = ShowPhase_1.default.Setup;
         this._timerState = null;
-        /**
-         * Track the support for HTTP/2 assets on the client and server side
-         * Client side is dictated by the environment we're connecting from (and the media cogs-av-box version)
-         * Server side is dictated by the COGS version which added the HTTP/2 assets server itself
-         */
-        this.clientSupportsHttp2Assets = false;
-        this.serverSupportsHttp2Assets = false;
         /**
          * Cached audio outputs use to look up the device/sink ID when a different device label is requested
          */
         this.audioOutputs = undefined;
         this._selectedAudioOutput = '';
         this.currentState = { ...initialClientState };
-        const { useReconnectingWebsocket, path, pathParams, supportsHttp2Assets } = websocketParametersFromUrl(document.location.href);
+        this.store = new DataStore_1.default(initialDataStoreData !== null && initialDataStoreData !== void 0 ? initialDataStoreData : {});
+        const { useReconnectingWebsocket, path, pathParams } = websocketParametersFromUrl(document.location.href);
         // Store the URL parameters for use in asset URLs
         // and add screen dimensions which COGS can use to determine the best asset quality to serve
         //
@@ -67,13 +58,9 @@ class CogsConnection {
         this.urlParams.set('screenPixelRatio', window.devicePixelRatio.toString());
         const socketUrl = `ws://${hostname}:${port}${path}?${this.urlParams}`;
         this.websocket = useReconnectingWebsocket ? new reconnecting_websocket_1.default(socketUrl) : new WebSocket(socketUrl);
-        this.clientSupportsHttp2Assets = !!supportsHttp2Assets;
         this.websocket.onopen = () => {
             this.currentConfig = {}; // Received on open connection
             this.currentState = {}; // Received on open connection
-            // Reset this flag as we might have just connected to an old COGS version which doesn't support HTTP/2
-            // The flag will be set when COGS sends a "cogs_environment" message
-            this.serverSupportsHttp2Assets = false;
             this.dispatchEvent(new CogsConnectionOpenEvent());
             this.setState(this.currentState); // TODO: Remove this because you should set it manually...??
         };
@@ -108,9 +95,6 @@ class CogsConnection {
                             case 'show_phase':
                                 this._showPhase = message.phase;
                                 break;
-                            case 'cogs_environment':
-                                this.serverSupportsHttp2Assets = message.http2AssetsServer;
-                                break;
                             case 'media_config_update':
                                 for (const optionName of ['preferOptimizedAudio', 'preferOptimizedVideo', 'preferOptimizedImages']) {
                                     const optionEnabled = message[optionName];
@@ -122,6 +106,9 @@ class CogsConnection {
                                     }
                                 }
                                 break;
+                            case 'data_store_items':
+                                this.store.handleDataStoreItemsMessage(message);
+                                break;
                         }
                         this.dispatchEvent(new CogsMessageEvent(message));
                     }
@@ -134,6 +121,10 @@ class CogsConnection {
                 console.error('Unable to parse incoming data from server', data, e);
             }
         };
+        // Tell COGS when any data store items change
+        this.store.addEventListener('items', (event) => {
+            this.sendDataStoreItems(event.items);
+        });
         // Send a list of audio outputs to COGS and keep it up to date
         {
             const refreshAudioOutputs = async () => {
@@ -190,6 +181,11 @@ class CogsConnection {
             this.websocket.send(JSON.stringify({ audioOutputs }));
         }
     }
+    sendDataStoreItems(partialItems) {
+        if (this.isConnected) {
+            this.websocket.send(JSON.stringify({ dataStoreItems: partialItems }));
+        }
+    }
     /**
      * Show or hide the plugin window.
      * @param visible Whether to show or hide the window
@@ -213,66 +209,52 @@ class CogsConnection {
 }
 exports.default = CogsConnection;
 function websocketParametersFromUrl(url) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e;
     const parsedUrl = new URL(url);
     const pathParams = new URLSearchParams(parsedUrl.searchParams);
     const localClientId = pathParams.get('local_id');
     const isSimulator = pathParams.get('simulator') === 'true';
     const display = (_a = pathParams.get('display')) !== null && _a !== void 0 ? _a : '';
     const pluginId = parsedUrl.pathname.startsWith('/plugin/') ? decodeURIComponent(parsedUrl.pathname.split('/')[2]) : undefined;
-    // Allow explicitly disabling HTTP/2 assets. This is useful in situations where we know the self-signed certificate cannot be
-    // supported such as the native mobile app
-    const disableHttp2Assets = ((_b = pathParams.get('http2Assets')) !== null && _b !== void 0 ? _b : '') === 'false';
     if (localClientId) {
-        const type = (_c = pathParams.get('t')) !== null && _c !== void 0 ? _c : '';
+        const type = (_b = pathParams.get('t')) !== null && _b !== void 0 ? _b : '';
         pathParams.delete('local_id');
         return {
             path: `/local/${encodeURIComponent(localClientId)}`,
             pathParams: new URLSearchParams({ t: type }),
             useReconnectingWebsocket: true,
-            supportsHttp2Assets: !disableHttp2Assets,
         };
     }
     else if (isSimulator) {
-        const supportsHttp2Assets = ((_d = pathParams.get('http2Assets')) !== null && _d !== void 0 ? _d : '') === 'true';
-        pathParams.delete('http2Assets');
-        const name = (_e = pathParams.get('name')) !== null && _e !== void 0 ? _e : '';
+        const name = (_c = pathParams.get('name')) !== null && _c !== void 0 ? _c : '';
         pathParams.delete('simulator');
         pathParams.delete('name');
         return {
             path: `/simulator/${encodeURIComponent(name)}`,
             pathParams,
             useReconnectingWebsocket: true,
-            supportsHttp2Assets: !disableHttp2Assets && supportsHttp2Assets,
         };
     }
     else if (display) {
-        const displayIdIndex = (_f = pathParams.get('displayIdIndex')) !== null && _f !== void 0 ? _f : '';
+        const displayIdIndex = (_d = pathParams.get('displayIdIndex')) !== null && _d !== void 0 ? _d : '';
         pathParams.delete('display');
         pathParams.delete('displayIdIndex');
         return {
             path: `/display/${encodeURIComponent(display)}/${encodeURIComponent(displayIdIndex)}`,
-            supportsHttp2Assets: !disableHttp2Assets,
         };
     }
     else if (pluginId) {
         return {
             path: `/plugin/${encodeURIComponent(pluginId)}`,
             useReconnectingWebsocket: true,
-            supportsHttp2Assets: !disableHttp2Assets,
         };
     }
     else {
-        const serial = (_g = pathParams.get('serial')) !== null && _g !== void 0 ? _g : '';
+        const serial = (_e = pathParams.get('serial')) !== null && _e !== void 0 ? _e : '';
         pathParams.delete('serial');
-        // Check if cogs-box-av is a version which added support for ignoring HTTP/2 self-signed certificates
-        const firmwareVersion = ((_h = pathParams.get('f')) !== null && _h !== void 0 ? _h : '').replace(/^v/, '');
-        const isCogsBoxAvDevBuild = firmwareVersion === '0.0.0'; // We assume dev firmware builds have HTTP/2 assets support - Added in 2024-03
-        const supportsHttp2Assets = isCogsBoxAvDevBuild || ((0, compare_versions_1.validate)(firmwareVersion) && (0, compare_versions_1.satisfies)(firmwareVersion, '>=4.9.0'));
         return {
             path: `/client/${encodeURIComponent(serial)}`,
             pathParams,
-            supportsHttp2Assets: !disableHttp2Assets && supportsHttp2Assets,
         };
     }
 }

package/dist/DataStore.d.ts

@@ -0,0 +1,41 @@
+import { DataStoreItemsClientMessage } from './types/CogsClientMessage';
+/**
+ * A simple key-value store for storing data in COGS
+ *
+ * When reconnected the data will be restored.
+ */
+export default class DataStore<ItemsT extends {
+    [key: string]: unknown;
+} = {
+    [key: string]: unknown;
+}> {
+    #private;
+    private _items;
+    constructor(defaultItems: ItemsT);
+    handleDataStoreItemsMessage(message: DataStoreItemsClientMessage): void;
+    get items(): Readonly<typeof this._items>;
+    getItem(key: string): unknown | undefined;
+    setItems(partialItems: Partial<ItemsT>): this;
+    addEventListener<K extends keyof DataStoreEventMap>(type: K, listener: (event: DataStoreEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof DataStoreEventMap>(type: K, listener: (event: DataStoreEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    private dispatchEvent;
+}
+export declare class DataStoreItemEvent extends Event {
+    readonly key: string;
+    readonly value: unknown;
+    readonly _cogsConnectionEventType = "item";
+    constructor(key: string, value: unknown);
+}
+export declare class DataStoreItemsEvent extends Event {
+    readonly items: {
+        [key: string]: unknown;
+    };
+    readonly _cogsConnectionEventType = "item";
+    constructor(items: {
+        [key: string]: unknown;
+    });
+}
+export interface DataStoreEventMap {
+    item: DataStoreItemEvent;
+    items: DataStoreItemsEvent;
+}

package/dist/DataStore.js

@@ -0,0 +1,70 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DataStore_eventTarget;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataStoreItemsEvent = exports.DataStoreItemEvent = void 0;
+/**
+ * A simple key-value store for storing data in COGS
+ *
+ * When reconnected the data will be restored.
+ */
+class DataStore {
+    constructor(defaultItems) {
+        _DataStore_eventTarget.set(this, new EventTarget());
+        this._items = { ...defaultItems };
+    }
+    handleDataStoreItemsMessage(message) {
+        this._items = { ...this._items, ...message.items };
+        Object.entries(message.items).forEach(([key, value]) => {
+            this.dispatchEvent(new DataStoreItemEvent(key, value));
+        });
+        this.dispatchEvent(new DataStoreItemsEvent(message.items));
+    }
+    get items() {
+        return this._items;
+    }
+    getItem(key) {
+        return this._items[key];
+    }
+    setItems(partialItems) {
+        this._items = { ...this._items, ...partialItems };
+        Object.entries(partialItems).forEach(([key, value]) => {
+            this.dispatchEvent(new DataStoreItemEvent(key, value));
+        });
+        this.dispatchEvent(new DataStoreItemsEvent(partialItems));
+        return this;
+    }
+    // Type-safe listeners
+    addEventListener(type, listener, options) {
+        __classPrivateFieldGet(this, _DataStore_eventTarget, "f").addEventListener(type, listener, options);
+    }
+    removeEventListener(type, listener, options) {
+        __classPrivateFieldGet(this, _DataStore_eventTarget, "f").removeEventListener(type, listener, options);
+    }
+    dispatchEvent(event) {
+        __classPrivateFieldGet(this, _DataStore_eventTarget, "f").dispatchEvent(event);
+    }
+}
+_DataStore_eventTarget = new WeakMap();
+exports.default = DataStore;
+class DataStoreItemEvent extends Event {
+    constructor(key, value) {
+        super('item');
+        this.key = key;
+        this.value = value;
+        this._cogsConnectionEventType = 'item';
+    }
+}
+exports.DataStoreItemEvent = DataStoreItemEvent;
+class DataStoreItemsEvent extends Event {
+    constructor(items) {
+        super('items');
+        this.items = items;
+        this._cogsConnectionEventType = 'item';
+    }
+}
+exports.DataStoreItemsEvent = DataStoreItemsEvent;