@hopecloud/jetstream-player 0.3.5 → 1.0.0

package/dist/index.d.ts

@@ -1,23 +1,2 @@
-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;
-    seekTo(seconds: number): void;
-    playNext(): void;
-    playPrev(): void;
-    isMuted(): Promise<boolean>;
-    isPaused(): Promise<boolean>;
-    getVideoCurrentTime(): Promise<number>;
-    getDuration(): Promise<number>;
-    dispose(): void;
-}
+export { JetStreamPlayer } from './player';
+export { EventKey, EventMap, GettersEvents, JetStreamPlayerOptions, PlayerCommand, PlayerEvent, eventsMap, gettersEvents, } from './player.type';

package/dist/index.js

@@ -1,114 +1,2 @@
-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,
-            });
-        });
-    }
-    play() {
-        this.dispatch({
-            name: 'play',
-        });
-    }
-    pause() {
-        this.dispatch({
-            name: 'pause',
-        });
-    }
-    mute() {
-        this.dispatch({
-            name: 'mute',
-        });
-    }
-    unmute() {
-        this.dispatch({
-            name: 'unmute',
-        });
-    }
-    seekTo(seconds) {
-        this.dispatch({
-            name: 'seekTo',
-            params: seconds,
-        });
-    }
-    playNext() {
-        this.dispatch({
-            name: 'play-next',
-        });
-    }
-    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 = {};
-    }
-}
+export { JetStreamPlayer } from './player';
+export { eventsMap, gettersEvents, } from './player.type';

package/dist/player.d.ts

@@ -0,0 +1,23 @@
+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;
+    seekTo(seconds: number): void;
+    playNext(): void;
+    playPrev(): void;
+    isMuted(): Promise<boolean>;
+    isPaused(): Promise<boolean>;
+    getVideoCurrentTime(): Promise<number>;
+    getDuration(): Promise<number>;
+    dispose(): void;
+}

package/dist/player.js

@@ -0,0 +1,114 @@
+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,
+            });
+        });
+    }
+    play() {
+        this.dispatch({
+            name: 'play',
+        });
+    }
+    pause() {
+        this.dispatch({
+            name: 'pause',
+        });
+    }
+    mute() {
+        this.dispatch({
+            name: 'mute',
+        });
+    }
+    unmute() {
+        this.dispatch({
+            name: 'unmute',
+        });
+    }
+    seekTo(seconds) {
+        this.dispatch({
+            name: 'seekTo',
+            params: seconds,
+        });
+    }
+    playNext() {
+        this.dispatch({
+            name: 'play-next',
+        });
+    }
+    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 = {};
+    }
+}

package/package.json

@@ -1,8 +1,29 @@
 {
   "name": "@hopecloud/jetstream-player",
-  "version": "0.3.5",
+  "version": "1.0.0",
   "description": "JetStream Embed Player API",
   "type": "module",
+  "author": {
+    "email": "code@deepvision.team",
+    "name": "DeepVision Code"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/deeepvision/hcc-jetstream-player"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsc",
     "pack": "npm run build && npm pack",
@@ -13,8 +34,6 @@
     "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-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",

package/.eslintrc.cjs

@@ -1,32 +0,0 @@
-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

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

package/docs/.vitepress/config.ts

@@ -1,54 +0,0 @@
-
-export default {
-  title: "Jetstream player API",
-  description: "Documentation of embed jetstream player API",
-  themeConfig: {
-    nav: [
-      {
-        text: 'Guide',
-        link: '/guide/'
-      },
-      {
-        text: 'Usage',
-        link: '/usage/using-multiple-iframes'
-      },
-    ],
-
-    sidebar: [
-      {
-        text: 'Introduction',
-        items: [
-          {
-            text: 'What is Jetstream player API?',
-            link: '/guide/',
-          },
-          {
-            text: 'Getting Started',
-            link: '/guide/getting-started',
-          },
-        ]
-      },
-      {
-        text: 'Examples of use',
-        items: [
-          {
-            text: 'Using multiple iframes',
-            link: '/usage/using-multiple-iframes',
-          },
-          {
-            text: 'Jetstream player API methods',
-            link: '/usage/player-methods',
-          },
-          {
-            text: 'Jetstream player API events',
-            link: '/usage/player-events',
-          },
-        ]
-      }
-    ],
-
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/deeepvision/hcc-jetstream-player' }
-    ]
-  }
-};

package/docs/guide/getting-started.md

@@ -1,111 +0,0 @@
-# Getting Started
-
-## Try It Online
-
-You can try Jetstrem player API directly in your browser on [StackBlitz](https://stackblitz.com/edit/hcc-jetstream-player-demo?file=src%2Fcomponents%2FVideoSandbox.vue).
-
-## How to use?
-
-If you want to use the library in your project, you need to perform the following steps:
-
-- Installation
-- Initialization `JetstreamPlayer` with iframe
-
-## Installation
-
-Jetstrem player API can be installed in an existing project via npm.
-
-```js
-npm i @hopecloud/jetstream-player
-```
-
-Once installed, you will be able to import `JetstreamPlayer` clas from the library into your component
-
-```js
-import { JetstreamPlayer } from '@hopecloud/jetstream-player';
-```
-
-Inside of `JetstreamPlayer` class there are methods `play`, `pause`, etc.
-You can find all available [methods](../usage/player-methods) and [events](../usage/player-events) in the following sections.
-
-```js
-class JetstreamPlayer {
-    iframe;
-    constructor(selector) {
-        this.iframe = document.querySelector(selector);
-    }
-    play() {
-        this.iframe.contentWindow?.postMessage('play', '*');
-    }
-    pause() {
-        this.iframe.contentWindow?.postMessage('pause', '*');
-    }
-    ...
-}
-```
-
-## Initialization `JetstreamPlayer` with iframe
-
-### Important ☝️⬇️
-
-In order to connect our iframe with `JetstreamPlayer` class, we need determines which player exactly you want to interact with. We should somehow distinguish between embedded windows in our template. Since we can have **_one_** or **_many_** iframes, we **strongly recommend** to assign a separate `id` to each iframe.
-
-For example `id="iframe1"`, `id="iframe2"`
-
-```html
-<div style="display: block; position:relative; max-width: 100%; width: 100%;">
-  <div style="padding-top: 56.25%;">
-    <iframe
-        id="iframe1"
-        allow="autoplay; encrypted-media"
-        allowfullscreen
-        style="position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 20px;"
-        src="https://dev.jstre.am/embed/jsv:fEccZ5231KM/jsp:Ov2URVCKycR"
-    ></iframe>
-  </div>
-</div>
-```
-
-Since the iframe already has the specified `id`, we can create a variable _(array of variables)_ to bind the `JetstreamPlayer` with our iframe.
-
-```js
-let player: JetstreamPlayer | null;
-
-player = new JetstreamPlayer('#iframe1');
-```
-
-### Pay attention ☝️⬇️
-
-Initialization must occur when all DOM elements are loaded. Therefore, in our [Vue.js example](https://stackblitz.com/edit/hcc-jetstream-player-demo?file=src%2Fcomponents%2FVideoSandbox.vue), we initialize our players inside the [onMounted](https://vuejs.org/api/composition-api-lifecycle.html#onmounted) lifecycle hook. Thus the player is initialized when template is fully loaded.
-
-```js
-onMounted(() => {
-  player = new JetstreamPlayer('#iframe1');
-});
-```
-
-After that, we can access the `player` variable and call the methods available in the `JetstreamPlayer` class.
-
-```js
-setup() {
-  let player: JetstreamPlayer | null;
-  
-  onMounted(() => {
-    player = new JetstreamPlayer('#iframe1');
-  })
-
-  const playVideo = () => {
-    player.play();
-  }
-  
-  const pauseVideo = () => {
-    player.pause();
-  }
-
-  return {
-   playVideo,
-   pauseVideo,
-  }
-}
-```
-

package/docs/guide/index.md

@@ -1,11 +0,0 @@
-# What is Jetstream player API?
-
-## Short description
-
-**Jetstream player API** is a library that allows you to control an embedded video player from the outside of `iframe` and subscribe to events of that player. As you know, videos are embedded in a website through an `iframe` tag. As a user, you can play and stop the video by clicking a button within the iframe itself. But how about playing/stopping the video programmatically and receiving events directly from the player?
-
-Since our embed video player is a separate service that uses the `video.js`  under the hood, we cannot do this directly. Modern browsers don't allow this to be done, including due to `CORS` policy. Therefore, in this library, we use `postMessage()` methods that send directly to the player and where these methods are processed. On its side, embed player has its own methods that it also sends and that can be caught where it is used.
-
-Thus, we can interact with player and subscribe to the events of the required video or playlist.
-
-This library is adapted to work with [Vue.js](https://vuejs.org/) / [React](https://react.dev/) framework components. Just want to try it out? Skip to the [Quickstart](./getting-started).

package/docs/index.md

@@ -1,23 +0,0 @@
----
-# https://github.com/deeepvision/hcc-jetstream-player
-layout: home
-
-hero:
-  name: "Jetstrem Player API"
-  text: "Documentation of embed Jetstream Player"
-  tagline: 
-  actions:
-    - theme: brand
-      text: Get started
-      link: /guide/index
-    - theme: alt
-      text: View on GitHub
-      link: https://github.com/deeepvision/hcc-jetstream-player
-
-features:
-  - title: Convenience
-    details: No need to write special methods in the component. All the necessary methods are in the library
-  - title: Ease of use
-    details: All you need is to import the library
----
-

package/docs/usage/player-events.md

@@ -1,131 +0,0 @@
-# Jetstrem player API events
-
-## `Embed player` available events
-
-### Next events are available in this version of the library:
-
-- `onEnded()`
-- `onPlayVideo()`
-- `onPauseVideo()`
-- `onVolumeChange()`
-
-This list is not exhaustive. New events can be added as needed.
-
-In order to use these events, it is enough to import `JetstreamPlayer` class which contains these methods.
-
-```js
-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 ☝️⬇️
-
-These events are `callbacks` that act as **listeners**.
-In order to subscribe to events, all DOM elements must be loaded. That's why we put this listener in the [onMounted](https://vuejs.org/api/composition-api-lifecycle.html#onmounted) hook.
-Otherwise, events may not work.
-
-
-## `onEnded()` event
-
-This event is called when a video or a video in a playlist ends. For example, if your component has two iframes, the first is a video and the second is a playlist. If some video ends in the playlist, `onEnded()` event will be triggered.
-
-### 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]?.onEnded(() => {
-      console.log('Video 2 is ENDED');
-    });
-  });
-},
-```
-
-## `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.
-
-### 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[0]?.onPlayVideo(() => {
-      console.log('Video 1 is PLAYING');
-    });
-  });
-},
-```
-
-## `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.
-
-### 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]?.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

@@ -1,186 +0,0 @@
-# Jetstrem player API methods
-
-## `JetstreamPlayer` class available methods
-
-### Next methods are available in this version of the library:
-
-- `play()`
-- `pause()`
-- `seekTo()`
-- `mute()`
-- `unmute()`
-- `isMuted()`
-- `playPrevious()`
-
-This list is not exhaustive. New methods can be added to the library as needed.
-
-In order to use these methods, it is enough to import the `JetstreamPlayer`  class and call them as described in the previous section.
-
-```js
-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,
-  };
-},
-```
-
-## `play()` `pause()` methods
-
-The `play` or `pause` method can be called for a video as well as for a playlist. We are able to interact with our videos or playlists programmatically in the same way as pressing pause or play within the iframe itself.
-
-### Pay attention ☝️⬇️
-
-When the web page with our embedded windows is just loaded and there has been no user action _(click, play)_ and video has the `sound settings on`, the programmatic `play()` function **will not execute**!
-
-The `play()` function will not work due to [Autoplay policy in Chrome](https://developer.chrome.com/blog/autoplay/). The same behavior occurs with services **YouTube**, **Facebook**, etc.
-
-Modern browsers don't provide an opportunity to avoid this setting. Therefore, for the first time, an action on the user side is necessary _(click in the iframe window)_. After this action, all methods will work clearly.
-
-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.
-The function pass one parameter `seconds`. 
-
-The **seconds** parameter identifies the time to which the player should advance.
-The player will advance to that time if the player has already downloaded the portion of the video to which the user is seeking.
-
-The specified time must be shorter than video duration. If the user sets a time that exceeds video duration, nothing will happen.
-
-
-```js
-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
-  };
-},
-```
-
-## `playNext()` `playPrevious()` methods
-
-The `playNext` or `playPrevious` method can be called only for a **playlist**. Calling these methods for a simple video will do nothing.
-We are able to interact with playlist programmatically in the same way as pressing `playNext` or `playPrevious` within the playlist itself.
-
-```js
-import { JetstreamPlayer } from '@hopecloud/jetstream-player';
-
-setup() {
-  let playlistPlayer: JetstreamPlayer | null;
-
-  onMounted(() => {
-    playlistPlayer = new JetstreamPlayer('#iframe1');
-  });
-
-  const playNextVideo = () => {
-    playlistPlayer.playNext();
-  };
-
-  const playPreviousVideo = () => {
-    playlistPlayer.playPrevious();
-  };
-
-  return {
-    playNextVideo,
-    playPreviousVideo,
-  };
-}.
-```

package/docs/usage/using-multiple-iframes.md

@@ -1,98 +0,0 @@
-# Using multiple iframes
-
-## Two ways to use and assign a player for an iframe.
-
-We can embed one or more windows with our player on web page. If the iframe is one, then the use is very simple. As shown in the previous chapter, this can be done as follows 
-
-```js
-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,
-  }
-}
-```
-
-If we have many iframes, there is no need to create a separate variable for each player.
-#### Example of non-recommended use ⬇️
-
-```js
-import { JetstreamPlayer } from '@hopecloud/jetstream-player';
-
-setup() {
-  let firstPlayer: JetstreamPlayer | null;
-  let secondPlayer: JetstreamPlayer | null;
-  
-  onMounted(() => {
-    firstPlayer = new JetstreamPlayer('#iframe1');
-    secondPlayer = new JetstreamPlayer('#iframe2');
-  })
-
-  const playVideo = () => {
-    firstPlayer.play();
-  }
-  
-  const pauseVideo = () => {
-    secondPlayer.pause();
-  }
-
-  return {
-   playVideo,
-   pauseVideo,
-  }
-}
-```
-
-### Recommended method
-
-Instead, we can use a simpler method. We can grab all players into an `array`.
-
-All we need is to create an empty array `const players = [];` and push each player there.
-
-### Example 
-
-```js
-import { JetstreamPlayer } from '@hopecloud/jetstream-player';
-
-setup() {
-  const players = [];
-  
-  onMounted(() => {
-    players.push(new JetstreamPlayer('#iframe1'));
-    players.push(new JetstreamPlayer('#iframe2'));
-  });
-
-  const playEmbedVideo = (index) => {
-    players[index]?.play();
-  }
-
-  const pauseEmbedVideo = (index) => {
-    players[index]?.pause();
-  }
-
-  return {
-   playEmbedVideo,
-   pauseEmbedVideo,
-  }
-}
-```
-
-Now we can `play` and `stop` a video or playlist from an array by specifying an `index`.
-
-We used the same method in the [Stackblitz](https://stackblitz.com/edit/hcc-jetstream-player-demo?file=src%2Fcomponents%2FVideoSandbox.vue) sandbox.

package/prettier.config.mjs

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

package/tsconfig.json

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