@clockworkdog/cogs-client 1.5.6 → 2.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Clockwork Dog
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -30,10 +30,61 @@ yarn add @clockworkdog/cogs-client
 
 ## Usage
 
-### Create a `cogs-plugin-manifest.json` file
+### Create a `cogs-plugin-manifest.js` file
 
 See [PluginManifestJson](https://clockwork-dog.github.io/cogs-client-lib/interfaces/PluginManifestJson.html) for details of what to include.
 
+If using Typescript set `"allowJs": true` in your `tsconfig.json`.
+
+Use the `@type {const}` JSDoc annotation to allow the manifest to be imported as a literal type and `@satisfies {import("@clockworkdog/cogs-client").PluginManifestJson}` to allow your editor to check the validity of the manifest.
+
+e.g.
+
+```js
+module.exports =
+  /**
+   * @type {const}
+   * @satisfies {import("@clockworkdog/cogs-client").PluginManifestJsonReadonly}
+   */
+  ({
+    name: 'Big Button',
+    icon: 'bullseye-pointer',
+    description: 'A big, colorful touchscreen button',
+    version: '1',
+    config: [
+      {
+        name: 'Color',
+        value: { type: 'string', default: 'red' },
+      },
+    ],
+    state: [
+      {
+        name: 'Enabled',
+        value: { type: 'boolean', default: false },
+        writableFromCogs: true,
+      },
+    ],
+    events: {
+      toCogs: [
+        {
+          name: 'Pressed',
+          value: { type: 'boolean' },
+        },
+      ],
+      fromCogs: [
+        {
+          name: 'Explosion',
+        },
+      ],
+    },
+    media: {
+      audio: true,
+      video: true,
+      images: true,
+    },
+  });
+```
+
 ### Import the library
 
 #### Browser
@@ -48,7 +99,7 @@ const { CogsConnection, CogsAudioPlayer } = COGS;
 const { CogsConnection, CogsAudioPlayer } = require('@clockworkdog/cogs-client');
 ```
 
-#### Typesript / ES6
+#### Typescript / ES6
 
 ```ts
 import { CogsConnection, CogsAudioPlayer } from '@clockworkdog/cogs-client';
@@ -56,35 +107,35 @@ import { CogsConnection, CogsAudioPlayer } from '@clockworkdog/cogs-client';
 
 ### Connect to COGS
 
+Initialize a [CogsConnection](https://clockwork-dog.github.io/cogs-client-lib/interfaces/CogsConnection.html) with the manifest you created above.
+
 ```ts
 let connected = false;
 
-const cogsConnection = new CogsConnection();
+import manifest from './cogs-plugin-manifest.js'; // Requires `"allowJs": true` in `tsconfig.json`
+
+const cogsConnection = new CogsConnection(manifest);
 cogsConnection.addEventListener('open', () => {
   connected = true;
 });
 cogsConnection.addEventListener('close', () => {
   connected = false;
 });
-cogsConnection.addEventListener('config', (event) => {
-  const config = event.detail;
-  // Handle new config.
-  // `config` is of type `{ [configKey: string]: number | string | boolean }`
+cogsConnection.addEventListener('config', ({ config }) => {
+  // Handle new config
+  // `config` is of type `{ [name: string]: number | string | boolean }`
 });
-cogsConnection.addEventListener('updates', (event) => {
-  const updates = event.detail;
-  // Handle input port updates.
-  // `updates` is of type `{ [portName: string]: number | string | boolean }`
+cogsConnection.addEventListener('state', ({ state }) => {
+  // Handle state updates
+  // `state` is of type `{ [name: string]: number | string | boolean }`
 });
-cogsConnection.addEventListener('event', (event) => {
-  const { key, value } = event.detail;
-  // Handle event. See 'types/Callback.ts`
-  // `key` is the event name.
-  // `value` is the type defined in COGS, one of `number | string | boolean | undefined`
+cogsConnection.addEventListener('event', ({ name, value }) => {
+  // Handle events from COGS
+  // `name` is the event name.
+  // `value` is of the type defined in manifest, one of `number | string | boolean | undefined`.
 });
-cogsConnection.addEventListener('message', (event) => {
-  const message = event.detail;
-  // Handle message. See `types/CogsClientMessage.ts`
+cogsConnection.addEventListener('message', ({ message }) => {
+  // Handle low-level COGS messages. See `types/CogsClientMessage.ts`
 });
 
 function sendEventToCogs() {
@@ -92,12 +143,30 @@ function sendEventToCogs() {
 }
 
 function sendPortUpdateToCogs() {
-  cogsConnection.setOutputPortValues({ port1: 100 });
+  cogsConnection.setState({ port1: 100 });
+}
+```
+
+### Support audio actions
+
+Add `audio` to `cogs-plugin-manifest.js`:
+
+```js
+{
+  media: {
+    audio: true;
+  }
 }
+```
+
+Add [CogsAudioPlayer](https://clockwork-dog.github.io/cogs-client-lib/classes/CogsAudioPlayer.html) to your page:
 
+```ts
 const audioPlayer = new CogsAudioPlayer(cogsConnection);
+
+// Optional
 audioPlayer.addEventListener('state', (audioState) => {
-  // Handle audio state. See `types/AudioState.ts`
+  // Handle audio state changes. See `types/AudioState.ts`
 });
 ```
 

package/dist/AudioPlayer.d.ts

@@ -1,7 +1,7 @@
 import CogsConnection from './CogsConnection';
 import { AudioState } from './types/AudioState';
 import MediaClipStateMessage from './types/MediaClipStateMessage';
-declare type EventTypes = {
+type EventTypes = {
     state: AudioState;
     audioClipState: MediaClipStateMessage;
 };
@@ -10,7 +10,7 @@ export default class AudioPlayer {
     private globalVolume;
     private audioClipPlayers;
     private sinkId;
-    constructor(cogsConnection: CogsConnection);
+    constructor(cogsConnection: CogsConnection<any>);
     setGlobalVolume(volume: number): void;
     playAudioClip(path: string, { playId, volume, fade, loop }: {
         playId: string;

package/dist/AudioPlayer.js

@@ -16,8 +16,7 @@ class AudioPlayer {
             cogsConnection.sendMediaClipState(detail);
         });
         // Listen for audio control messages
-        cogsConnection.addEventListener('message', (event) => {
-            const message = event.detail;
+        cogsConnection.addEventListener('message', ({ message }) => {
             switch (message.type) {
                 case 'media_config_update':
                     if (this.globalVolume !== message.globalVolume) {
@@ -408,7 +407,7 @@ class AudioPlayer {
     }
     createPlayer(path, config) {
         const player = new howler_1.Howl({
-            src: urls_1.assetUrl(path),
+            src: (0, urls_1.assetUrl)(path),
             autoplay: false,
             loop: false,
             volume: 1,

package/dist/CogsConnection.d.ts

@@ -1,57 +1,18 @@
-import { ConfigValue, EventKeyValue, EventValue, PortValue, ShowPhase } from './types/valueTypes';
+import ShowPhase from './types/ShowPhase';
 import CogsClientMessage from './types/CogsClientMessage';
 import MediaClipStateMessage from './types/MediaClipStateMessage';
 import AllMediaClipStatesMessage from './types/AllMediaClipStatesMessage';
-interface ConnectionEventListeners<CustomTypes extends {
-    config?: {
-        [configKey: string]: ConfigValue;
-    };
-    inputPorts?: {
-        [port: string]: PortValue;
-    };
-    inputEvents?: {
-        [key: string]: EventValue | null;
-    };
-}> {
-    open: undefined;
-    close: undefined;
-    message: CogsClientMessage;
-    config: CustomTypes['config'];
-    updates: Partial<CustomTypes['inputPorts']>;
-    event: CustomTypes['inputEvents'] extends {
-        [key: string]: EventValue | null;
-    } ? EventKeyValue<CustomTypes['inputEvents']> : Record<string, never>;
-}
-export declare type TimerState = Omit<Extract<CogsClientMessage, {
-    type: 'adjustable_timer_update';
-}>, 'type'> & {
-    startedAt: number;
-};
-export default class CogsConnection<CustomTypes extends {
-    config?: {
-        [configKey: string]: ConfigValue;
-    };
-    inputPorts?: {
-        [port: string]: PortValue;
-    };
-    outputPorts?: {
-        [port: string]: PortValue;
-    };
-    inputEvents?: {
-        [key: string]: EventValue | null;
-    };
-    outputEvents?: {
-        [key: string]: EventValue | null;
-    };
-} = Record<never, never>> {
+import { PluginManifestEventJson } from './types/PluginManifestJson';
+import * as ManifestTypes from './types/ManifestTypes';
+import { DeepReadonly } from './types/utils';
+export default class CogsConnection<Manifest extends ManifestTypes.PluginManifest> {
+    readonly manifest: Manifest;
     private websocket;
     private eventTarget;
     private currentConfig;
-    get config(): CustomTypes['config'];
-    private currentInputPortValues;
-    get inputPortValues(): CustomTypes['inputPorts'];
-    private currentOutputPortValues;
-    get outputPortValues(): CustomTypes['outputPorts'];
+    get config(): ManifestTypes.ConfigAsObject<Manifest>;
+    private currentState;
+    get state(): ManifestTypes.StateAsObject<Manifest>;
     private _showPhase;
     get showPhase(): ShowPhase;
     private _timerState;
@@ -62,14 +23,18 @@ export default class CogsConnection<CustomTypes extends {
     private audioOutputs;
     private _selectedAudioOutput;
     get selectedAudioOutput(): string;
-    constructor({ hostname, port }?: {
+    constructor(manifest: Manifest, { hostname, port }?: {
         hostname?: string;
         port?: number;
-    }, outputPortValues?: CustomTypes['outputPorts']);
+    }, initialClientState?: Partial<ManifestTypes.StateAsObject<Manifest, {
+        writableFromClient: true;
+    }>> | undefined);
     get isConnected(): boolean;
     close(): void;
-    sendEvent<EventName extends keyof CustomTypes['outputEvents']>(eventName: EventName, ...[eventValue]: CustomTypes['outputEvents'][EventName] extends null ? [] : [CustomTypes['outputEvents'][EventName]]): void;
-    setOutputPortValues(values: Partial<CustomTypes['outputPorts']>): void;
+    sendEvent<EventName extends ManifestTypes.EventToCogsKey<Manifest>>(eventName: EventName, ...[eventValue]: ManifestTypes.EventToCogsAsObject<Manifest>[EventName] extends undefined ? [] : [ManifestTypes.EventToCogsAsObject<Manifest>[EventName]]): void;
+    setState(values: Partial<ManifestTypes.StateAsObject<Manifest, {
+        writableFromClient: true;
+    }>>): void;
     getAudioSinkId(audioOutput: string): string | undefined;
     sendInitialMediaClipStates(allMediaClipStates: AllMediaClipStatesMessage): void;
     sendMediaClipState(mediaClipState: MediaClipStateMessage): void;
@@ -80,8 +45,50 @@ export default class CogsConnection<CustomTypes extends {
      * This is only relevant for plugins, not for Media Master content.
      */
     setPluginWindowVisible(visible: boolean): void;
-    addEventListener<EventName extends keyof ConnectionEventListeners<CustomTypes>, EventValue extends ConnectionEventListeners<CustomTypes>[EventName]>(type: EventName, listener: (ev: CustomEvent<EventValue>) => void, options?: boolean | AddEventListenerOptions): void;
-    removeEventListener<EventName extends keyof ConnectionEventListeners<CustomTypes>, EventValue extends ConnectionEventListeners<CustomTypes>[EventName]>(type: EventName, listener: (ev: CustomEvent<EventValue>) => void, options?: boolean | EventListenerOptions): void;
+    addEventListener<EventType extends CogsConnectionEvent<Manifest>['type']>(type: EventType, listener: (event: CogsConnectionEvent<Manifest> & {
+        type: EventType;
+    }) => void, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<EventType extends CogsConnectionEvent<Manifest>['type']>(type: EventType, listener: (event: Extract<CogsConnectionEvent<Manifest>, {
+        type: EventType;
+    }>) => void, options?: boolean | EventListenerOptions): void;
     private dispatchEvent;
 }
-export {};
+export type TimerState = Omit<Extract<CogsClientMessage, {
+    type: 'adjustable_timer_update';
+}>, 'type'> & {
+    startedAt: number;
+};
+export declare class CogsConnectionOpenEvent extends Event {
+    readonly type = "open";
+    constructor();
+}
+export declare class CogsConnectionCloseEvent extends Event {
+    readonly type = "close";
+    constructor();
+}
+export declare class CogsMessageEvent extends Event {
+    readonly message: CogsClientMessage;
+    readonly type = "message";
+    constructor(message: CogsClientMessage);
+}
+export declare class CogsConfigChangedEvent<CogsConfig> extends Event {
+    readonly config: CogsConfig;
+    readonly type = "config";
+    constructor(config: CogsConfig);
+}
+export declare class CogsStateChangedEvent<CogsState> extends Event {
+    readonly state: CogsState;
+    readonly type = "state";
+    constructor(state: CogsState);
+}
+export declare class CogsIncomingEvent<CogsEvent extends DeepReadonly<PluginManifestEventJson> | PluginManifestEventJson> extends Event {
+    readonly name: CogsEvent['name'];
+    readonly value: ManifestTypes.TypeFromCogsValueType<CogsEvent['value']>;
+    readonly type = "event";
+    constructor(name: CogsEvent['name'], value: ManifestTypes.TypeFromCogsValueType<CogsEvent['value']>);
+}
+/**
+ * Allows CogsIncomingEvent of each supported value type
+ */
+export type CogsIncomingEventTypes<CogsEvent extends DeepReadonly<PluginManifestEventJson> | PluginManifestEventJson> = CogsEvent extends unknown ? CogsIncomingEvent<CogsEvent> : never;
+export type CogsConnectionEvent<Manifest extends ManifestTypes.PluginManifest> = CogsConnectionOpenEvent | CogsConnectionCloseEvent | CogsMessageEvent | CogsConfigChangedEvent<ManifestTypes.ConfigAsObject<Manifest>> | CogsStateChangedEvent<Partial<ManifestTypes.StateAsObject<Manifest>>> | CogsIncomingEventTypes<ManifestTypes.EventsFromCogs<Manifest>>;

package/dist/CogsConnection.js

@@ -3,35 +3,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const valueTypes_1 = require("./types/valueTypes");
+exports.CogsIncomingEvent = exports.CogsStateChangedEvent = exports.CogsConfigChangedEvent = exports.CogsMessageEvent = exports.CogsConnectionCloseEvent = exports.CogsConnectionOpenEvent = void 0;
+const ShowPhase_1 = __importDefault(require("./types/ShowPhase"));
 const reconnecting_websocket_1 = __importDefault(require("reconnecting-websocket"));
 const urls_1 = require("./helpers/urls");
 class CogsConnection {
-    constructor({ hostname = document.location.hostname, port = urls_1.COGS_SERVER_PORT } = {}, outputPortValues = undefined) {
+    get config() {
+        return { ...this.currentConfig };
+    }
+    get state() {
+        return { ...this.currentState };
+    }
+    get showPhase() {
+        return this._showPhase;
+    }
+    get timerState() {
+        return this._timerState ? { ...this._timerState } : null;
+    }
+    get selectedAudioOutput() {
+        return this._selectedAudioOutput;
+    }
+    constructor(manifest, { hostname = document.location.hostname, port = urls_1.COGS_SERVER_PORT } = {}, initialClientState = undefined) {
         var _a;
+        this.manifest = manifest;
         this.eventTarget = new EventTarget();
         this.currentConfig = {}; // Received on open connection
-        this.currentInputPortValues = {}; // Received on open connection
-        this.currentOutputPortValues = {}; // Sent on open connection
-        this._showPhase = valueTypes_1.ShowPhase.Setup;
+        this.currentState = {}; // Received on open connection - TODO: set initial state from manifest?
+        this._showPhase = ShowPhase_1.default.Setup;
         this._timerState = null;
         /**
          * Cached audio outputs use to look up the device/sink ID when a different device label is requested
          */
         this.audioOutputs = undefined;
         this._selectedAudioOutput = '';
-        this.currentOutputPortValues = { ...outputPortValues };
+        this.currentState = { ...initialClientState };
         const { useReconnectingWebsocket, path, pathParams } = websocketParametersFromUrl(document.location.href);
         const socketUrl = `ws://${hostname}:${port}${path}${pathParams ? '?' + pathParams : ''}`;
         this.websocket = useReconnectingWebsocket ? new reconnecting_websocket_1.default(socketUrl) : new WebSocket(socketUrl);
         this.websocket.onopen = () => {
             this.currentConfig = {}; // Received on open connection
-            this.currentInputPortValues = {}; // Received on open connection
-            this.dispatchEvent('open', undefined);
-            this.setOutputPortValues(this.currentOutputPortValues);
+            this.currentState = {}; // Received on open connection
+            this.dispatchEvent(new CogsConnectionOpenEvent());
+            this.setState(this.currentState); // TODO: Remove this because you should set it manually...??
         };
         this.websocket.onclose = () => {
-            this.dispatchEvent('close', undefined);
+            this.dispatchEvent(new CogsConnectionCloseEvent());
         };
         this.websocket.onmessage = ({ data }) => {
             try {
@@ -39,29 +55,30 @@ class CogsConnection {
                 try {
                     if (parsed.config) {
                         this.currentConfig = parsed.config;
-                        this.dispatchEvent('config', this.currentConfig);
+                        this.dispatchEvent(new CogsConfigChangedEvent(this.currentConfig));
                     }
                     else if (parsed.updates) {
-                        this.currentInputPortValues = { ...this.currentInputPortValues, ...parsed.updates };
-                        this.dispatchEvent('updates', parsed.updates);
+                        this.currentState = { ...this.currentState, ...parsed.updates };
+                        this.dispatchEvent(new CogsStateChangedEvent(parsed.updates));
                     }
                     else if (parsed.event && parsed.event.key) {
-                        this.dispatchEvent('event', parsed.event);
+                        this.dispatchEvent(new CogsIncomingEvent(parsed.event.key, parsed.event.value));
                     }
                     else if (typeof parsed.message === 'object') {
-                        switch (parsed.message.type) {
+                        const message = parsed.message;
+                        switch (message.type) {
                             case 'adjustable_timer_update':
                                 this._timerState = {
                                     startedAt: Date.now(),
-                                    durationMillis: parsed.message.durationMillis,
-                                    ticking: parsed.message.ticking,
+                                    durationMillis: message.durationMillis,
+                                    ticking: message.ticking,
                                 };
                                 break;
                             case 'show_phase':
-                                this._showPhase = parsed.message.phase;
+                                this._showPhase = message.phase;
                                 break;
                         }
-                        this.dispatchEvent('message', parsed.message);
+                        this.dispatchEvent(new CogsMessageEvent(message));
                     }
                 }
                 catch (e) {
@@ -82,29 +99,11 @@ class CogsConnection {
                     this.audioOutputs = audioOutputs;
                 }
             };
-            this.addEventListener('open', refreshAudioOutputs);
+            this.eventTarget.addEventListener('open', refreshAudioOutputs);
             (_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.addEventListener('devicechange', refreshAudioOutputs);
             refreshAudioOutputs();
         }
     }
-    get config() {
-        return { ...this.currentConfig };
-    }
-    get inputPortValues() {
-        return { ...this.currentInputPortValues };
-    }
-    get outputPortValues() {
-        return { ...this.currentOutputPortValues };
-    }
-    get showPhase() {
-        return this._showPhase;
-    }
-    get timerState() {
-        return this._timerState ? { ...this._timerState } : null;
-    }
-    get selectedAudioOutput() {
-        return this._selectedAudioOutput;
-    }
     get isConnected() {
         return this.websocket.readyState === WebSocket.OPEN;
     }
@@ -121,8 +120,8 @@ class CogsConnection {
             }));
         }
     }
-    setOutputPortValues(values) {
-        this.currentOutputPortValues = { ...this.currentOutputPortValues, ...values };
+    setState(values) {
+        this.currentState = { ...this.currentState, ...values };
         if (this.isConnected) {
             this.websocket.send(JSON.stringify({ updates: values }));
         }
@@ -163,8 +162,8 @@ class CogsConnection {
     removeEventListener(type, listener, options) {
         this.eventTarget.removeEventListener(type, listener, options);
     }
-    dispatchEvent(type, detail) {
-        this.eventTarget.dispatchEvent(new CustomEvent(type, { detail }));
+    dispatchEvent(event) {
+        this.eventTarget.dispatchEvent(event);
     }
 }
 exports.default = CogsConnection;
@@ -206,3 +205,50 @@ function websocketParametersFromUrl(url) {
         return { path: `/client/${encodeURIComponent(serial)}`, pathParams };
     }
 }
+class CogsConnectionOpenEvent extends Event {
+    constructor() {
+        super('open');
+        this.type = 'open';
+    }
+}
+exports.CogsConnectionOpenEvent = CogsConnectionOpenEvent;
+class CogsConnectionCloseEvent extends Event {
+    constructor() {
+        super('close');
+        this.type = 'close';
+    }
+}
+exports.CogsConnectionCloseEvent = CogsConnectionCloseEvent;
+class CogsMessageEvent extends Event {
+    constructor(message) {
+        super('message');
+        this.message = message;
+        this.type = 'message';
+    }
+}
+exports.CogsMessageEvent = CogsMessageEvent;
+class CogsConfigChangedEvent extends Event {
+    constructor(config) {
+        super('config');
+        this.config = config;
+        this.type = 'config';
+    }
+}
+exports.CogsConfigChangedEvent = CogsConfigChangedEvent;
+class CogsStateChangedEvent extends Event {
+    constructor(state) {
+        super('state');
+        this.state = state;
+        this.type = 'state';
+    }
+}
+exports.CogsStateChangedEvent = CogsStateChangedEvent;
+class CogsIncomingEvent extends Event {
+    constructor(name, value) {
+        super('event');
+        this.name = name;
+        this.value = value;
+        this.type = 'event';
+    }
+}
+exports.CogsIncomingEvent = CogsIncomingEvent;

package/dist/RtspStreamer.js

@@ -33,7 +33,7 @@ class RtspStreamer {
             });
             // Restart stream on RTCP BYE (stream ended)
             pipeline.rtsp.onRtcp = (rtcp) => {
-                if (media_stream_library_browser_1.isRtcpBye(rtcp)) {
+                if ((0, media_stream_library_browser_1.isRtcpBye)(rtcp)) {
                     console.log('Video stream ended. Restarting.');
                     videoElement.pause();
                     setTimeout(startPipeline, 0);

package/dist/VideoPlayer.d.ts

@@ -2,7 +2,7 @@ import CogsConnection from './CogsConnection';
 import { VideoState } from './types/VideoState';
 import MediaClipStateMessage from './types/MediaClipStateMessage';
 import { MediaObjectFit } from '.';
-declare type EventTypes = {
+type EventTypes = {
     state: VideoState;
     videoClipState: MediaClipStateMessage;
 };
@@ -14,7 +14,7 @@ export default class VideoPlayer {
     private pendingClip?;
     private parentElement;
     private sinkId;
-    constructor(cogsConnection: CogsConnection, parentElement?: HTMLElement);
+    constructor(cogsConnection: CogsConnection<any>, parentElement?: HTMLElement);
     setParentElement(parentElement: HTMLElement): void;
     resetParentElement(): void;
     setGlobalVolume(globalVolume: number): void;

package/dist/VideoPlayer.js

@@ -15,8 +15,7 @@ class VideoPlayer {
             cogsConnection.sendMediaClipState(detail);
         });
         // Listen for video control messages
-        cogsConnection.addEventListener('message', (event) => {
-            const message = event.detail;
+        cogsConnection.addEventListener('message', ({ message }) => {
             switch (message.type) {
                 case 'media_config_update':
                     this.setGlobalVolume(message.globalVolume);
@@ -261,7 +260,8 @@ class VideoPlayer {
                     path: this.activeClip.path,
                     state: !((_b = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _b === void 0 ? void 0 : _b.paused) ? VideoState_1.ActiveVideoClipState.Playing : VideoState_1.ActiveVideoClipState.Paused,
                     loop: (_d = (_c = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _c === void 0 ? void 0 : _c.loop) !== null && _d !== void 0 ? _d : false,
-                    volume: ((_e = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _e === void 0 ? void 0 : _e.muted) ? 0
+                    volume: ((_e = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _e === void 0 ? void 0 : _e.muted)
+                        ? 0
                         : (_g = (_f = this.videoClipPlayers[this.activeClip.path].videoElement) === null || _f === void 0 ? void 0 : _f.volume) !== null && _g !== void 0 ? _g : 0,
                 }
                 : undefined,
@@ -284,7 +284,7 @@ class VideoPlayer {
     createVideoElement(path, config, { volume }) {
         const videoElement = document.createElement('video');
         videoElement.playsInline = true; // Required for iOS
-        videoElement.src = urls_1.assetUrl(path);
+        videoElement.src = (0, urls_1.assetUrl)(path);
         videoElement.autoplay = false;
         videoElement.loop = false;
         setVideoElementVolume(videoElement, volume * this.globalVolume);