@hopecloud/jetstream-player 0.2.8 → 0.2.9

package/docs/guide/getting-started.md

@@ -9,7 +9,6 @@ You can try Jetstrem player API directly in your browser on [StackBlitz](https:/
 If you want to use the library in your project, you need to perform the following steps:
 
 - Installation
-- Initialization of Player instance and methods
 - Initialization `JetstreamPlayer` with iframe
 
 ## Installation
@@ -20,32 +19,14 @@ Jetstrem player API can be installed in an existing project via npm.
 npm i @hopecloud/jetstream-player
 ```
 
-Once installed, you will be able to import the required methods or variables from the library into your component
+Once installed, you will be able to import `JetstreamPlayer` clas from the library into your component
 
 ```
-import { JetstreamPlayer, onEnded, initPlayerMethods, embedVideosSrc } from '@hopecloud/jetstream-player';
+import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 ```
-## Initialization of Player instance and methods
 
-In order for the library to be able to interact with all the embedded windows on your component, you need to grab all the iframes from the web page. To do this, you need to import and call a special function `initPlayerMethods`. This function under the hood grabs and sorts all the iframes present on the web page and determines which player exactly you want to interact with. Also inside the library, the function creates the `JetstreamPlayer` class, which we need to initialize our player and call the necessary methods.
-
-```
-import { initPlayerMethods, JetstreamPlayer } from '@hopecloud/jetstream-player';
-```
-
-### Important ☝️⬇️
-
-The `initPlayerMethods` function should be called 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 call this function inside the [onMounted](https://vuejs.org/api/composition-api-lifecycle.html#onmounted) lifecycle hook. The function will be executed when the template is fully loaded.
-
-```
-onMounted(() => {
-  initPlayerMethods();
-});
-```
-
-## Initialization `JetstreamPlayer` with iframe
-
-As mentioned earlier, the library creates a `JetstreamPlayer` class in which we have methods `play`, `pause`, etc.
+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.
 
 ```
 class JetstreamPlayer {
@@ -63,9 +44,11 @@ class JetstreamPlayer {
 }
 ```
 
+## Initialization `JetstreamPlayer` with iframe
+
 ### Important ☝️⬇️
 
-In order to connect our iframe with `JetstreamPlayer` class, we need to 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.
+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"`
 
@@ -91,15 +74,23 @@ 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.
+
+```
+onMounted(() => {
+  player = new JetstreamPlayer('#iframe1');
+});
+```
+
 After that, we can access the `player` variable and call the methods available in the `JetstreamPlayer` class.
-Please note that for DOM loading purposes, we do the assignment inside the [onMounted](https://vuejs.org/api/composition-api-lifecycle.html#onmounted) lifecycle hook, along with the `initPlayerMethods` function we mentioned earlier.
 
 ```
 setup() {
   let player: JetstreamPlayer | null;
   
   onMounted(() => {
-    initPlayerMethods();
     player = new JetstreamPlayer('#iframe1');
   })
 

package/docs/usage/player-events.md

@@ -10,73 +10,98 @@
 
 This list is not exhaustive. New events can be added as needed.
 
-In order to use these events, it is enough to import them from library.
+In order to use these events, it is enough to import `JetstreamPlayer` class which contains these methods.
 
 ```
-import { onEnded, playVideo, pauseVideo } from '@hopecloud/jetstream-player';
+import { JetstreamPlayer } from '@hopecloud/jetstream-player';
+
+setup() {
+  let player: JetstreamPlayer | null;
+  
+  onMounted(() => {
+    player = new JetstreamPlayer('#iframe1');
+    
+    player.onEnded(() => {
+      console.log('Video is ENDED');
+    })
+    
+    ...
+  })
+}
 ```
 
-These events are `callbacks` that act as **listeners**. That is, if a certain video or video in the **playlist** ends, the event `onEnded` will fire and transmit the **index** of the embedded window. Let's consider each event separately.
+### 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, and we will get index `1` _(the playlist is the second iframe in our component)_.
+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:
 
 ```
-import { JetstreamPlayer, initPlayerMethods, onEnded } from '@hopecloud/jetstream-player';
+import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
-setup() {  
+setup() { 
+  const players = [];
+ 
   onMounted(() => {
-    initPlayerMethods();
-  })
-  
-  onEnded((index) => {
-    console.log(`VIDEO ${index} ENDED`);
-    // Will console 'VIDEO 1 ENDED'
+    players.push(new JetstreamPlayer('#iframe1'));
+    players.push(new JetstreamPlayer('#iframe2'));
+
+    players[1]?.onEnded(() => {
+      console.log('Video 2 is ENDED');
+    });
   });
 }
 ```
 
 ## `playVideo()` 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 and we will get index `0`.
+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:
 
 ```
-import { initPlayerMethods, playVideo } from '@hopecloud/jetstream-player';
+import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
-setup() {  
+setup() { 
+  const players = [];
+ 
   onMounted(() => {
-    initPlayerMethods();
-  })
-  
-  playVideo((index) => {
-    console.log(`VIDEO ${index} IS PLAYING`);
-    // Will console 'VIDEO 0 IS PLAYING'
+    players.push(new JetstreamPlayer('#iframe1'));
+    players.push(new JetstreamPlayer('#iframe2'));
+
+    players[0]?.playVideo(() => {
+      console.log('Video 1 is PLAYING');
+    });
   });
 }
 ```
 
 ## `pauseVideo()` 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, and we will get index `1`.
+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:
 
 ```
-import { initPlayerMethods, pauseVideo } from '@hopecloud/jetstream-player';
+import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
-setup() {  
+setup() { 
+  const players = [];
+ 
   onMounted(() => {
-    initPlayerMethods();
-  })
-  
-  pauseVideo((index) => {
-    console.log(`VIDEO ${index} PAUSED`);
-    // Will console 'VIDEO 1 PAUSED'
+    players.push(new JetstreamPlayer('#iframe1'));
+    players.push(new JetstreamPlayer('#iframe2'));
+
+    players[1]?.pauseVideo(() => {
+      console.log('Video 2 is PAUSED');
+    });
   });
 }
 ```

package/docs/usage/player-methods.md

@@ -6,6 +6,7 @@
 
 - `play()`
 - `pause()`
+- `seekTo()`
 - `playNext()`
 - `playPrevious()`
 
@@ -20,7 +21,6 @@ setup() {
   let player: JetstreamPlayer | null;
   
   onMounted(() => {
-    initPlayerMethods();
     player = new JetstreamPlayer('#iframe1');
   })
 
@@ -43,17 +43,73 @@ setup() {
 
 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.
 
-### Important ☝️⬇️
+### 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.
+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.
 
+## `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.
+
+
+```
+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.
+We are able to interact with playlist programmatically in the same way as pressing `playNext` or `playPrevious` within the playlist itself.
+
+```
+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

@@ -11,7 +11,6 @@ setup() {
   let player: JetstreamPlayer | null;
   
   onMounted(() => {
-    initPlayerMethods();
     player = new JetstreamPlayer('#iframe1');
   })
 
@@ -41,7 +40,6 @@ setup() {
   let secondPlayer: JetstreamPlayer | null;
   
   onMounted(() => {
-    initPlayerMethods();
     firstPlayer = new JetstreamPlayer('#iframe1');
     secondPlayer = new JetstreamPlayer('#iframe2');
   })
@@ -63,27 +61,21 @@ setup() {
 
 ### Recommended method
 
-Instead, we can use a simpler method. We can grab all players into an `array`. To do this, we need to import the `embedVideosSrc` variable from the library. This variable is an array that contains all `src` of iframes from our page. This variable will help us create our array of players
-
-```
-import { embedVideosSrc } from '@hopecloud/jetstream-player';
-```
+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 
 
 ```
-import { JetstreamPlayer, initPlayerMethods, embedVideosSrc } from '@hopecloud/jetstream-player';
+import { JetstreamPlayer } from '@hopecloud/jetstream-player';
 
 setup() {
   const players = [];
   
   onMounted(() => {
-    initPlayerMethods();
-    embedVideosSrc.forEach((src, index) => {
-      players.push(new JetstreamPlayer(`#iframe${index + 1}`));
-    });
+    players.push(new JetstreamPlayer('#iframe1'));
+    players.push(new JetstreamPlayer('#iframe2'));
   });
 
   const playEmbedVideo = (index) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hopecloud/jetstream-player",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Embeddable player for Jetstream videos",
   "scripts": {
     "build": "tsc",