@byteark/byteark-player-vue - npm Package Compare versions

Comparing version 1.0.0-beta18 to 1.0.0-beta19

package.json

 {
   "name": "@byteark/byteark-player-vue",
-  "version": "1.0.0-beta18",
+  "version": "1.0.0-beta19",
   "main": "dist/@byteark/byteark-player-vue.umd.js",
@@ -5,0 +5,0 @@ "description": "ByteArk Player Container for Vue.js",

README.md

@@ -183,12 +183,28 @@ # ByteArk Player Container for Vue.js
 
-## Callback Props
+## Event Handling
 
-You can inject some behaviour directly to the ByteArk Player, and the VideoJS's instance.
+ByteArk Player emits events that you can use to trigger your custom functions.
 
-| Name                 | Type     | Callback Parameters   | Description                                                                 |
-|----------------------|----------|-----------------------|-----------------------------------------------------------------------------|
-| onPlayerCreated      | Function | `(player)`            | Callback function to be called when a player instance is created.           |
-| onPlayerLoadingError | Function | `(originalError)`     | Callback function to be called when there's an error about loading player.  |
-| onReady              | Function | `(player)`            | Callback function to be called when a player instance is ready.             |
+| Event Name              | Callback Parameters   | Trigger Condition                                                           |
+|-------------------------|-----------------------|-----------------------------------------------------------------------------|
+| created                 | `(player)`            | When the player instance was created.                                       |
+| error                   | `(originalError)`     | When there was an error while loading player.                               |
+| ready                   | `(player)`            | When the player instance was ready to play.                                 |
+| firstplay               | `(player)`            | When the video played for the first time.                                   |
+| play                    | `(player)`            | When the video played or the user hit play.                                 |
+| pause                   | `(player)`            | When the video played or the user hit pause.                                |
+| ended⁕                  | `(player)`            | When the video ended.                                                       |
+| timeupdate              | `(player)`            | When the current playback time changed.                                     |
+| seeking                 | `(player)`            | When the the user seeked the video.                                         |
+| waiting                 | `(player)`            | When the player is waiting for the video.                                   |
+| fullscreenchange        | `(player)`            | When the user entered or exited the full screen mode.                       |
+| volumechange            | `(player)`            | When the user adjusted the volume.                                          |
+| ratechange              | `(player)`            | When the user adjusted the playback speed.                                  |
+| enterpictureinpicture   | `(player)`            | When the entered Picture-in-Picture mode.                                   |
+| leavepictureinpicture   | `(player)`            | When the exited Picture-in-Picture mode.                                    |
 
+⁕ You are reminded that [HTML5 video element fires a pause event whenever the playback stops](https://www.w3.org/2010/05/video/mediaevents.html), including at the end of the content.
+  
+For an example of implementing these events, please see [Controlling Players Section](#controlling-players).
+
 ## Advanced Props
@@ -202,2 +218,4 @@
 | createPlayerFunction      | Function | Custom video instance. This function should return a VideoJS's player instance. |
+| onPlayerSetup             | Function | Inject your custom functions before creating a player instance.                 |
+| onPlayerSetupError        | Function | Inject your custom functions when there was an error during the setup.          |
 
@@ -214,3 +232,15 @@ ## Advance Usages
   <ByteArkPlayerContainer
-    @onReady="onReady"
+    @ready="onReady"
+    @firstplay="onFirstPlay"
+    @play="onPlay"
+    @pause="onPause"
+    @ended="onVideoEnded"
+    @timeupdate="onTimeUpdated"
+    @seeking="onVideoSeeked"
+    @waiting="onPlayerWaiting"
+    @fullscreenchange="onToggleFullScreen"
+    @volumechange="onVolumeChange"
+    @ratechange="onPlaybackSpeedChanged"
+    @enterpictureinpicture="onPIPEntered"
+    @leavepictureinpicture="onPIPExited"
     :options="playerOptions" />
@@ -244,5 +274,45 @@ <button @click.stop="playerInstance.play()">Play</button>
   methods: {
+    doSomething() {
+      // Do something...
+    },
     onReady(newPlayerInstance) {
       this.playerInstance = newPlayerInstance;
+      this.doSomething();
     },
+    onFirstPlay(playerInstance) {
+      this.doSomething();
+    },
+    onPlay(playerInstance) {
+      this.doSomething();
+    },
+    onPause(playerInstance) {
+      this.doSomething();
+    },
+    onVideoEnded(playerInstance) {
+      this.doSomething();
+    },
+    onTimeUpdated(playerInstance) {
+      this.doSomething();
+    },
+    onVideoSeeked(playerInstance) {
+      this.doSomething();
+    },
+    onPlayerWaiting(playerInstance) {
+      this.doSomething();
+    },
+    onToggleFullScreen(playerInstance) {
+      this.doSomething();
+    },
+    onVolumeChange(playerInstance) {
+      this.doSomething();
+    },
+    onPlaybackSpeedChanged(playerInstance) {
+      this.doSomething();
+    },
+    onPIPEntered(playerInstance) {
+      this.doSomething();
+    },
+    onPIPExited(playerInstance) {
+      this.doSomething();
+    },
   },
@@ -259,3 +329,3 @@ };
   <ByteArkPlayerContainer
-    @onReady="onReady"
+    @ready="onReady"
     :options="playerOptions" />
@@ -300,3 +370,3 @@ </template>
   <ByteArkPlayerContainer
-    @onReady="onReady"
+    @ready="onReady"
     :options="playerOptions" />
@@ -303,0 +373,0 @@ </template>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

410

increased by20.59%

Worsened metrics

Total package byte prevSize

16299

decreased by-98.74%

Number of package files

2

decreased by-80%

Lines of code

0

decreased by-100%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes