@hopecloud/jetstream-player 1.0.4 → 1.0.6

package/dist/iframe-builder.d.ts

@@ -0,0 +1,8 @@
+import { IFrameBuilderOpt } from './player.type';
+export declare class IFrameBuilder {
+    options: IFrameBuilderOpt;
+    iframe: HTMLIFrameElement | null;
+    constructor(options: IFrameBuilderOpt);
+    private generateIframe;
+    insertIframe(): void;
+}

package/dist/iframe-builder.js

@@ -0,0 +1,40 @@
+export class IFrameBuilder {
+    options;
+    iframe = null;
+    constructor(options) {
+        this.options = options;
+        const generatedIframe = this.generateIframe();
+        if (generatedIframe) {
+            this.iframe = this.generateIframe();
+        }
+    }
+    generateIframe() {
+        // TODO: Improve src validation
+        if (this.options.src === '') {
+            console.error(`iframe src ${this.options.src} not incorrect.`);
+            return null;
+        }
+        const iframe = document.createElement('iframe');
+        iframe.allow =
+            'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
+        iframe.allowFullscreen = true;
+        iframe.frameBorder = '0';
+        iframe.src = this.options.src;
+        iframe.width = this.options.width || '480px';
+        iframe.height = this.options.height || '270px';
+        return iframe;
+    }
+    insertIframe() {
+        if (!this.iframe) {
+            return;
+        }
+        const div = document.querySelector(this.options.selector);
+        if (div) {
+            div.innerHTML = '';
+            div.appendChild(this.iframe);
+        }
+        else {
+            console.error(`Div with id "${this.options.selector}" not found.`);
+        }
+    }
+}

package/dist/player.d.ts

@@ -3,9 +3,10 @@ export declare class JetStreamPlayer {
     private iframe;
     private options;
     private registeredEvents;
-    constructor(el: string | HTMLIFrameElement, options: JetStreamPlayerOptions);
-    private playerEventListener;
+    constructor(el: string, options: JetStreamPlayerOptions);
     private registerEvents;
+    private subscribeEventHandler;
+    private subscribeToRegisteredEvents;
     private dispatch;
     private getterDispatch;
     play(): void;

package/dist/player.js

@@ -1,24 +1,21 @@
+import { IFrameBuilder } from './iframe-builder';
 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;
+        const { iframe, insertIframe } = new IFrameBuilder({
+            selector: el,
+            src: this.options.src,
+            width: this.options.width,
+            height: this.options.height,
+        });
+        this.iframe = iframe;
+        insertIframe();
         this.registerEvents();
-    }
-    playerEventListener(event) {
-        const data = normalizeEventData(event);
-        const eventType = data.type;
-        if (event.source === this.iframe.contentWindow) {
-            if (eventType in this.registeredEvents) {
-                this.registeredEvents[eventType](data.value);
-            }
-        }
+        this.subscribeToRegisteredEvents();
     }
     registerEvents() {
         if (!this.options.events ||
@@ -30,7 +27,19 @@ export class JetStreamPlayer {
                 this.registeredEvents[eventName] = cb;
             }
         });
-        window.addEventListener('message', this.playerEventListener.bind(this));
+    }
+    subscribeEventHandler(event) {
+        if (event.source !== this.iframe.contentWindow) {
+            return;
+        }
+        const data = normalizeEventData(event);
+        const eventType = data.type;
+        if (eventType in this.registeredEvents) {
+            this.registeredEvents[eventType](data.value);
+        }
+    }
+    subscribeToRegisteredEvents() {
+        window.addEventListener('message', this.subscribeEventHandler.bind(this));
     }
     dispatch(event) {
         if (!this.iframe || !this.iframe.contentWindow) {
@@ -108,7 +117,7 @@ export class JetStreamPlayer {
         });
     }
     dispose() {
-        window.removeEventListener('message', this.playerEventListener.bind(this));
+        window.removeEventListener('message', this.subscribeEventHandler.bind(this));
         this.registeredEvents = {};
     }
 }

package/dist/player.type.d.ts

@@ -10,7 +10,13 @@ export type PlayerCommand = {
     name: PlayerCommandEvent | PlayerGetterEvents;
     params?: unknown;
 };
+export type IFrameBuilderOpt = {
+    selector: string;
+    src: string;
+    width?: string;
+    height?: string;
+};
 export type JetStreamPlayerOptions = {
     sticky?: boolean;
     events?: Partial<Record<PlayerEvents, (value?: unknown) => void>>;
-};
+} & IFrameBuilderOpt;

package/dist/utils.js

@@ -1,8 +1,6 @@
 export const normalizeEventData = (event) => {
-    console.log('normalize:', event.data);
     return JSON.parse(event.data);
 };
 export const denormalizeEventData = (data) => {
-    console.log('denormalize:', data);
     return JSON.stringify(data);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hopecloud/jetstream-player",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "JetStream Embed Player API",
   "type": "module",
   "author": {
@@ -32,7 +32,7 @@
     "docs:preview": "vitepress preview docs",
     "lint": "eslint \"src/**/*.ts\"",
     "lint:fix": "eslint \"src/**/*.ts\" --fix",
-    "publish:next": "npm version patch -m \"release: %s\""
+    "version:next": "npm version patch -m \"release: %s\""
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.2.0",