@hopecloud/jetstream-player 1.0.10 → 1.0.12

package/dist/iframe-pip-plugin.d.ts

@@ -0,0 +1,8 @@
+export declare class IFramePiPPlugin {
+    containerSelector: string;
+    iframe: HTMLIFrameElement;
+    private observer;
+    constructor(containerSelector: string, iframe: HTMLIFrameElement);
+    init(): void;
+    destory(): void;
+}

package/dist/iframe-pip-plugin.js

@@ -0,0 +1,42 @@
+export class IFramePiPPlugin {
+    containerSelector;
+    iframe;
+    observer = null;
+    constructor(containerSelector, iframe) {
+        this.containerSelector = containerSelector;
+        this.iframe = iframe;
+    }
+    init() {
+        if (!this.iframe || !this.containerSelector)
+            return;
+        const parent = document.querySelector(this.containerSelector);
+        if (!parent) {
+            throw new Error('Selector of iframe not found');
+        }
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (!entry.isIntersecting) {
+                    const height = parent.getBoundingClientRect().height + 'px';
+                    this.iframe.classList.add('pip-active');
+                    parent.style.height = `${height}px`;
+                }
+                else {
+                    this.iframe.classList.remove('pip-active');
+                    parent.style.removeProperty('height');
+                }
+            });
+        }, {
+            root: window.document,
+            rootMargin: '0px',
+            threshold: 0,
+        });
+        console.log('Loging:', this.observer, parent);
+        this.observer.observe(this.iframe);
+    }
+    destory() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+}

package/dist/main.css

@@ -0,0 +1,7 @@
+.pip-active {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 330px;
+  height: 180px;
+}

package/dist/player.d.ts

@@ -3,6 +3,7 @@ export declare class JetStreamPlayer {
     private iframe;
     private options;
     private registeredEvents;
+    private iFramePiP;
     constructor(el: string, options: JetStreamPlayerOptions);
     private registerEvents;
     private subscribeEventHandler;

package/dist/player.js

@@ -1,9 +1,11 @@
 import { IFrameBuilder } from './iframe-builder';
+import { IFramePiPPlugin } from './iframe-pip-plugin';
 import { denormalizeEventData, normalizeEventData } from './utils';
 export class JetStreamPlayer {
     iframe = null;
     options;
     registeredEvents = {};
+    iFramePiP = null;
     constructor(el, options) {
         this.options = options;
         const iframeBuilder = new IFrameBuilder({
@@ -13,14 +15,17 @@ export class JetStreamPlayer {
             height: this.options.height,
         });
         this.iframe = iframeBuilder.iframe;
-        iframeBuilder.insertIframe(this.iframe);
         if (this.iframe) {
+            iframeBuilder.insertIframe(this.iframe);
             this.iframe.addEventListener('load', () => {
                 this.registerEvents();
                 this.subscribeToRegisteredEvents();
             }, {
                 once: true,
             });
+            if (typeof this.options.sticky !== 'undefined' && this.options.sticky) {
+                this.iFramePiP = new IFramePiPPlugin(el, this.iframe);
+            }
         }
     }
     registerEvents() {
@@ -125,5 +130,6 @@ export class JetStreamPlayer {
     dispose() {
         window.removeEventListener('message', this.subscribeEventHandler.bind(this));
         this.registeredEvents = {};
+        this.iFramePiP?.destory();
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hopecloud/jetstream-player",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "JetStream Embed Player API",
   "type": "module",
   "author": {
@@ -25,7 +25,9 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc",
+    "clean": "rimraf dist/",
+    "copy-files": "copyfiles -u 1 src/main.css dist/",
+    "build": "npm run clean && tsc && npm run copy-files",
     "pack": "npm run build && npm pack",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
@@ -37,9 +39,11 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
+    "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "prettier": "3.2.5",
+    "rimraf": "^5.0.5",
     "typescript": "^5.4.2",
     "vitepress": "1.0.0-rc.45"
   }