@hopecloud/jetstream-player 0.1.0

package/.idea/hcc-jetstream-player.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/hcc-jetstream-player.iml" filepath="$PROJECT_DIR$/.idea/hcc-jetstream-player.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@hopecloud/jetstream-player",
+  "version": "0.1.0",
+  "description": "Embeddable player for Jetstream videos",
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.2"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './useEmbedPlayerMethods';
+export * from './useEmbedPlayerEvents';

package/src/useEmbedPlayerEvents.ts

@@ -0,0 +1,47 @@
+type VideoMethod = 'play' | 'pause';
+
+interface VideoMessage {
+    msg: string;
+    src: string;
+}
+
+const videoMethods: { [key: string]: string } = {
+    play: 'play',
+    pause: 'pause',
+};
+
+let playerInstance: any;
+let linkHref = '';
+
+export const setEmbedPlayerEvents = (player: any, link: string): void => {
+    playerInstance = player;
+    linkHref = link;
+
+    playerInstance?.videoJsPlayer?.on('ended', () => {
+        const message: VideoMessage = {
+            msg: 'onEnded',
+            src: linkHref,
+        };
+        window.parent.postMessage(message, '*');
+    });
+
+    for (const event of ['pause', 'play']) {
+        playerInstance?.videoJsPlayer?.on(event, () => {
+            const message: VideoMessage = {
+                msg: `${event}Video`,
+                src: linkHref,
+            };
+            window.parent.postMessage(message, '*');
+        });
+    }
+};
+
+window.addEventListener('message', ({ data }: MessageEvent<VideoMethod>) => {
+    const method = videoMethods[data];
+
+    if (method) {
+        (playerInstance?.videoJsPlayer as any)?.[method]();
+    } else {
+        console.warn(`Non-available video method: ${data}`);
+    }
+});

package/src/useEmbedPlayerMethods.ts

@@ -0,0 +1,62 @@
+interface IAccumulator {
+    iframesWithEmbedVideo: HTMLIFrameElement[];
+    allIframes: HTMLIFrameElement[];
+    embedVideosSrc: string[];
+}
+
+interface IFrameMessage {
+    msg: string;
+    src: string;
+}
+
+let iframesWithEmbedVideo: HTMLIFrameElement[] = [];
+let allIframes: HTMLIFrameElement[] = [];
+let embedVideosSrc: string[] = [];
+
+document.addEventListener('DOMContentLoaded', () => {
+    ({ iframesWithEmbedVideo, allIframes, embedVideosSrc } = Array.from(document.querySelectorAll('iframe')).reduce<IAccumulator>((acc, iframe) => {
+        const { src } = iframe;
+        const iframeOrigin = new URL(src).origin;
+
+        // Check if iframe has embed player origin
+        if (iframeOrigin.includes('jstre')) {
+            acc.iframesWithEmbedVideo.push(iframe);
+            acc.embedVideosSrc.push(src);
+        }
+        acc.allIframes.push(iframe);
+        return acc;
+    }, { iframesWithEmbedVideo: [], allIframes: [], embedVideosSrc: [] }));
+});
+
+export const embedPlayer = new Proxy({
+    play: (index: number) => {},
+    pause: (index: number) => {}
+}, {
+    get(target, prop) {
+        return (index: number) => {
+            const method = prop.toString();
+            iframesWithEmbedVideo[index].contentWindow?.postMessage(method, '*');
+        };
+    }
+});
+
+type CallbackType = (index: number) => void;
+
+const callbacks: { [key: string]: CallbackType } = {};
+
+export const onEnded = (callback: CallbackType) => {
+    callbacks.onEnded = callback;
+};
+export const playVideo = (callback: CallbackType) => {
+    callbacks.playVideo = callback;
+};
+export const pauseVideo = (callback: CallbackType) => {
+    callbacks.pauseVideo = callback;
+};
+
+window.addEventListener('message', (event: MessageEvent<IFrameMessage>) => {
+    const index = embedVideosSrc.findIndex((e) => e === event.data.src);
+    if (event.data.msg in callbacks) {
+        callbacks[event.data.msg](index);
+    }
+});

package/tsconfig.json

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