@hopecloud/jetstream-player 0.3.4 → 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<boolean>;
-    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/package.json

@@ -1,17 +1,27 @@
 {
   "name": "@hopecloud/jetstream-player",
-  "version": "0.3.4",
-  "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"]
 }