@hopecloud/jetstream-player 0.3.3 → 0.3.5

package/.eslintrc.cjs

@@ -0,0 +1,32 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+};

package/.prettierignore

@@ -0,0 +1,2 @@
+tsconfig.json
+package.json

package/dist/index.d.ts

@@ -1,21 +1,23 @@
-type CallbackType = () => void;
-export declare class JetstreamPlayer {
-    iframe: HTMLIFrameElement;
-    callbacks: {
-        [key: string]: CallbackType;
-    };
-    constructor(selector: string);
+import { JetStreamPlayerOptions } from './player.type';
+export declare class JetStreamPlayer {
+    private iframe;
+    private options;
+    private registeredEvents;
+    constructor(el: string | HTMLIFrameElement, options: JetStreamPlayerOptions);
+    private registerEventHandler;
+    private registerEvents;
+    private dispatch;
+    private getterDispatch;
     play(): void;
     pause(): void;
     mute(): void;
     unmute(): void;
-    isMuted(): Promise<unknown>;
-    playNext(): void;
-    playPrevious(): void;
     seekTo(seconds: number): void;
-    onEnded: (callback: CallbackType) => void;
-    onPlayVideo: (callback: CallbackType) => void;
-    onPauseVideo: (callback: CallbackType) => void;
-    onVolumeChange: (callback: CallbackType) => void;
+    playNext(): void;
+    playPrev(): void;
+    isMuted(): Promise<boolean>;
+    isPaused(): Promise<boolean>;
+    getVideoCurrentTime(): Promise<number>;
+    getDuration(): Promise<number>;
+    dispose(): void;
 }
-export {};

package/dist/index.js

@@ -1,60 +1,114 @@
-export class JetstreamPlayer {
-    iframe;
-    callbacks = {};
-    constructor(selector) {
-        this.iframe = document.querySelector(selector);
-        window.addEventListener('message', (event) => {
-            if (event.data.src && this.iframe.src.includes(event.data.src.split('/').find(substr => (substr.startsWith('jsv:') || substr.startsWith('jspl:'))))) {
-                if (event.data.msg in this.callbacks) {
-                    this.callbacks[event.data.msg]();
-                }
+import { denormalizeEventData, normalizeEventData } from './utils';
+export class JetStreamPlayer {
+    iframe = null;
+    options;
+    registeredEvents = {};
+    constructor(el, options) {
+        this.iframe =
+            typeof el === 'string'
+                ? document.querySelector(el)
+                : el;
+        this.options = options;
+        this.registerEvents();
+    }
+    registerEventHandler(event) {
+        const data = normalizeEventData(event);
+        const targetEvent = data.target;
+        if (event.source === this.iframe.contentWindow) {
+            if (targetEvent in this.registeredEvents) {
+                this.registeredEvents[targetEvent](data.target);
+            }
+        }
+    }
+    registerEvents() {
+        if (!this.options.events ||
+            (this.options.events && Object.keys(this.options.events).length < 0)) {
+            return;
+        }
+        Object.entries(this.options.events).forEach(([eventName, cb]) => {
+            if (!(eventName in this.registeredEvents)) {
+                this.registeredEvents[eventName] = cb;
             }
         });
+        window.addEventListener('message', this.registerEventHandler.bind(this));
+    }
+    dispatch(event) {
+        if (!this.iframe || !this.iframe.contentWindow) {
+            throw new Error('iframe is not provided or parent window not found!');
+        }
+        this.iframe.contentWindow.postMessage(denormalizeEventData(event), '*');
+    }
+    getterDispatch(getterEvent) {
+        return new Promise((resolve) => {
+            this.dispatch(getterEvent);
+            window.addEventListener('message', (event) => {
+                const data = normalizeEventData(event);
+                if (data.type === getterEvent.name) {
+                    resolve(data.target);
+                }
+            }, {
+                once: true,
+            });
+        });
     }
-    /* Methods */
     play() {
-        this.iframe.contentWindow?.postMessage('play', '*');
+        this.dispatch({
+            name: 'play',
+        });
     }
     pause() {
-        this.iframe.contentWindow?.postMessage('pause', '*');
+        this.dispatch({
+            name: 'pause',
+        });
     }
     mute() {
-        this.iframe.contentWindow?.postMessage('mute', '*');
+        this.dispatch({
+            name: 'mute',
+        });
     }
     unmute() {
-        this.iframe.contentWindow?.postMessage('unmute', '*');
+        this.dispatch({
+            name: 'unmute',
+        });
     }
-    isMuted() {
-        return new Promise((resolve, reject) => {
-            this.iframe.contentWindow?.postMessage('isMuted', '*');
-            window.addEventListener('message', (event) => {
-                if (event.data.type === 'isMuted') {
-                    resolve(event.data.value);
-                }
-            });
+    seekTo(seconds) {
+        this.dispatch({
+            name: 'seekTo',
+            params: seconds,
         });
     }
     playNext() {
-        this.iframe.contentWindow?.postMessage('playNext', '*');
+        this.dispatch({
+            name: 'play-next',
+        });
     }
-    playPrevious() {
-        this.iframe.contentWindow?.postMessage('playPrevious', '*');
+    playPrev() {
+        this.dispatch({
+            name: 'play-prev',
+        });
+    }
+    isMuted() {
+        return this.getterDispatch({
+            name: 'isMuted',
+        });
+    }
+    isPaused() {
+        return this.getterDispatch({
+            name: 'isPaused',
+        });
+    }
+    getVideoCurrentTime() {
+        return this.getterDispatch({
+            name: 'getVideoCurrentTime',
+        });
+    }
+    getDuration() {
+        return this.getterDispatch({
+            name: 'getDuration',
+        });
+    }
+    dispose() {
+        window.removeEventListener('message', this.registerEventHandler);
+        this.registeredEvents = {};
     }
-    seekTo(seconds) {
-        this.iframe.contentWindow?.postMessage({ method: 'seekTo', param: seconds }, '*');
-    }
-    /* #Methods */
-    /* Events */
-    onEnded = (callback) => {
-        this.callbacks.onEnded = callback;
-    };
-    onPlayVideo = (callback) => {
-        this.callbacks.onPlayVideo = callback;
-    };
-    onPauseVideo = (callback) => {
-        this.callbacks.onPauseVideo = callback;
-    };
-    onVolumeChange = (callback) => {
-        this.callbacks.onVolumeChange = callback;
-    };
 }

package/dist/player.type.d.ts

@@ -0,0 +1,31 @@
+export declare const eventsMap: {
+    readonly ready: "onReady";
+    readonly timeupdate: "onTimeUpdate";
+    readonly play: "onPlay";
+    readonly pause: "onPause";
+    readonly loadedmetadata: "onLoadedMetadata";
+    readonly ended: "onEnded";
+    readonly volumechange: "onVolumeChange";
+    readonly error: "onError";
+};
+export declare const gettersEvents: {
+    readonly 'is-muted': "isMuted";
+    readonly 'get-video-current-time': "getVideoCurrentTime";
+    readonly 'get-duration': "getDuration";
+    readonly 'is-paused': "isPaused";
+};
+export type EventMap = typeof eventsMap;
+export type EventKey = keyof EventMap;
+export type GettersEvents = keyof typeof gettersEvents;
+export type PlayerEvent = {
+    type: EventKey | GettersEvents;
+    target?: unknown;
+};
+export type PlayerCommand = {
+    name: 'play' | 'pause' | 'mute' | 'unmute' | 'isMuted' | 'seekTo' | 'getVideoCurrentTime' | 'getDuration' | 'isPaused' | 'play-next' | 'play-prev';
+    params?: unknown;
+};
+export type JetStreamPlayerOptions = {
+    sticky?: boolean;
+    events?: Partial<Record<EventKey, (target?: unknown) => void>>;
+};

package/dist/player.type.js

@@ -0,0 +1,16 @@
+export const eventsMap = {
+    ready: 'onReady',
+    timeupdate: 'onTimeUpdate',
+    play: 'onPlay',
+    pause: 'onPause',
+    loadedmetadata: 'onLoadedMetadata',
+    ended: 'onEnded',
+    volumechange: 'onVolumeChange',
+    error: 'onError',
+};
+export const gettersEvents = {
+    'is-muted': 'isMuted',
+    'get-video-current-time': 'getVideoCurrentTime',
+    'get-duration': 'getDuration',
+    'is-paused': 'isPaused',
+};

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const normalizeEventData: <T = unknown>({ data, }: MessageEvent<string>) => T;
+export declare const denormalizeEventData: <T = unknown>(data: T) => string;

package/dist/utils.js

@@ -0,0 +1,6 @@
+export const normalizeEventData = ({ data, }) => {
+    return JSON.parse(data);
+};
+export const denormalizeEventData = (data) => {
+    return JSON.stringify(data);
+};

package/docs/.vitepress/config.ts

@@ -1,6 +1,5 @@
-import { defineConfig } from 'vitepress'
 
-export default defineConfig({
+export default {
   title: "Jetstream player API",
   description: "Documentation of embed jetstream player API",
   themeConfig: {
@@ -52,4 +51,4 @@ export default defineConfig({
       { icon: 'github', link: 'https://github.com/deeepvision/hcc-jetstream-player' }
     ]
   }
-})
+};

package/docs/usage/player-events.md

@@ -5,8 +5,9 @@
 ### Next events are available in this version of the library:
 
 - `onEnded()`
-- `playVideo()`
-- `pauseVideo()`
+- `onPlayVideo()`
+- `onPauseVideo()`
+- `onVolumeChange()`
 
 This list is not exhaustive. New events can be added as needed.
 
@@ -17,17 +18,17 @@ import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
 setup() {
   let player: JetstreamPlayer | null;
-  
+
   onMounted(() => {
     player = new JetstreamPlayer('#iframe1');
-    
+
     player.onEnded(() => {
       console.log('Video is ENDED');
-    })
-    
+    });
+
     ...
-  })
-}
+  });
+},
 ```
 
 ### Pay attention ☝️⬇️
@@ -46,9 +47,9 @@ This event is called when a video or a video in a playlist ends. For example, if
 ```js
 import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
-setup() { 
+setup() {
   const players = [];
- 
+
   onMounted(() => {
     players.push(new JetstreamPlayer('#iframe1'));
     players.push(new JetstreamPlayer('#iframe2'));
@@ -57,10 +58,10 @@ setup() {
       console.log('Video 2 is ENDED');
     });
   });
-}
+},
 ```
 
-## `playVideo()` event 
+## `onPlayVideo()` event
 
 This event is a listener that fires when any video or playlist on your page starts playing. If your page has one or more embedded iframes and a video starts playing in the first window, event will be triggered for first player.
 
@@ -69,21 +70,21 @@ This event is a listener that fires when any video or playlist on your page star
 ```js
 import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
-setup() { 
+setup() {
   const players = [];
- 
+
   onMounted(() => {
     players.push(new JetstreamPlayer('#iframe1'));
     players.push(new JetstreamPlayer('#iframe2'));
 
-    players[0]?.playVideo(() => {
+    players[0]?.onPlayVideo(() => {
       console.log('Video 1 is PLAYING');
     });
   });
-}
+},
 ```
 
-## `pauseVideo()` event
+## `onPauseVideo()` event
 
 This event is a listener that fires when any video or playlist on your page paused. If your page has one or more embedded iframes and a video paused in the second window, event will be triggered for second player.
 
@@ -92,16 +93,39 @@ This event is a listener that fires when any video or playlist on your page paus
 ```js
 import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
-setup() { 
+setup() {
   const players = [];
- 
+
   onMounted(() => {
     players.push(new JetstreamPlayer('#iframe1'));
     players.push(new JetstreamPlayer('#iframe2'));
 
-    players[1]?.pauseVideo(() => {
+    players[1]?.onPauseVideo(() => {
       console.log('Video 2 is PAUSED');
     });
   });
-}
+},
+```
+
+## `onVolumeChange()` event
+
+This event is a listener that fires when any video or playlist on your page change volume. If your page has one or more embedded iframes and a video paused in the second window, event will be triggered for second player.
+
+### Example of use:
+
+```js
+import { JetstreamPlayer } from '@hopecloud/jetstream-player';
+
+setup() {
+  const players = [];
+
+  onMounted(() => {
+    players.push(new JetstreamPlayer('#iframe1'));
+    players.push(new JetstreamPlayer('#iframe2'));
+
+    players[1]?.onVolumeChange(() => {
+      console.log('Video 2 was changed volume');
+    });
+  });
+},
 ```

package/docs/usage/player-methods.md

@@ -7,7 +7,9 @@
 - `play()`
 - `pause()`
 - `seekTo()`
-- `playNext()`
+- `mute()`
+- `unmute()`
+- `isMuted()`
 - `playPrevious()`
 
 This list is not exhaustive. New methods can be added to the library as needed.
@@ -19,24 +21,24 @@ import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
 setup() {
   let player: JetstreamPlayer | null;
-  
+
   onMounted(() => {
     player = new JetstreamPlayer('#iframe1');
-  })
+  });
 
   const playVideo = () => {
     player.play();
-  }
-  
+  };
+
   const pauseVideo = () => {
     player.pause();
-  }
+  };
 
   return {
-   playVideo,
-   pauseVideo,
-  }
-}
+    playVideo,
+    pauseVideo,
+  };
+},
 ```
 
 ## `play()` `pause()` methods
@@ -53,6 +55,75 @@ Modern browsers don't provide an opportunity to avoid this setting. Therefore, f
 
 If the video or playlist has **sound settings off** `(muted)`, then all methods work in normal mode.
 
+## `mute()` method
+Mute function set media volume to silent.
+
+```js
+import { JetstreamPlayer } from '@hopecloud/jetstream-player';
+
+setup() {
+  let player: JetstreamPlayer | null;
+
+  onMounted(() => {
+    player = new JetstreamPlayer('#iframe1');
+  });
+
+  const muteVideo = () => {
+    player.mute();
+  };
+
+  return {
+    muteVideo,
+  };
+},
+```
+
+## `unmute()` method
+Cancel volume mute.
+
+```js
+import { JetstreamPlayer } from '@hopecloud/jetstream-player';
+
+setup() {
+  let player: JetstreamPlayer | null;
+
+  onMounted(() => {
+    player = new JetstreamPlayer('#iframe1');
+  });
+
+  const unmuteVideo = () => {
+    player.unmute();
+  };
+
+  return {
+    unmuteVideo,
+  };
+},
+```
+
+## `isMuted()` method
+Returns `true` if the player volume is muted, `false` if not.
+
+```js
+import { JetstreamPlayer } from '@hopecloud/jetstream-player';
+
+setup() {
+  let player: JetstreamPlayer | null;
+
+  onMounted(() => {
+    player = new JetstreamPlayer('#iframe1');
+  });
+
+  const isMutedVideo = () => {
+    player.isMuted();
+  };
+
+  return {
+    isMutedVideo,
+  };
+},
+```
+
 ## `seekTo(seconds: Number)` method
 
 Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (playing), the player will play the video.
@@ -69,19 +140,19 @@ import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
 setup() {
   let player: JetstreamPlayer | null;
-  
+
   onMounted(() => {
     player = new JetstreamPlayer('#iframe1');
-  })
+  });
 
   const seekTo = () => {
     player.seekTo(45); // Set time on 45 second
-  }
+  };
 
   return {
-   seekTo
-  }
-}
+    seekTo
+  };
+},
 ```
 
 ## `playNext()` `playPrevious()` methods
@@ -94,10 +165,10 @@ import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
 setup() {
   let playlistPlayer: JetstreamPlayer | null;
-  
+
   onMounted(() => {
     playlistPlayer = new JetstreamPlayer('#iframe1');
-  })
+  });
 
   const playNextVideo = () => {
     playlistPlayer.playNext();
@@ -108,8 +179,8 @@ setup() {
   };
 
   return {
-   playNextVideo,
-   playPreviousVideo,
-  }
-}
+    playNextVideo,
+    playPreviousVideo,
+  };
+}.
 ```

package/package.json

@@ -1,17 +1,27 @@
 {
   "name": "@hopecloud/jetstream-player",
-  "version": "0.3.3",
-  "description": "Embeddable player for Jetstream videos",
+  "version": "0.3.5",
+  "description": "JetStream Embed Player API",
+  "type": "module",
   "scripts": {
     "build": "tsc",
     "pack": "npm run build && npm pack",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:preview": "vitepress preview docs",
+    "lint": "eslint \"src/**/*.ts\"",
+    "lint:fix": "eslint \"src/**/*.ts\" --fix",
+    "publish:next": "npm version patch -m \"release: %s\""
   },
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "devDependencies": {
-    "typescript": "^5.0.4",
-    "vitepress": "^1.0.0-alpha.65"
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "3.2.5",
+    "typescript": "^5.4.2",
+    "vitepress": "1.0.0-rc.45"
   }
 }

package/prettier.config.mjs

@@ -0,0 +1,7 @@
+/** @type {import("prettier").Config} */
+export default {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+};

package/tsconfig.json

@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
+    "target": "ESNext",
+    "module": "ESNext",
     "strict": true,
     "esModuleInterop": true,
+    "allowJs": true,
+    "moduleResolution": "Bundler",
     "declaration": true,
-    "outDir": "./dist",
+    "outDir": "./dist"
   },
   "exclude": ["node_modules"],
-  "include": [
-    "src/**/*.ts"
-  ]
+  "include": ["src/**/*.ts"]
 }