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

Comparing version 1.0.0-beta9 to 1.1.0

package.json

 {
   "name": "@byteark/byteark-player-vue",
-  "version": "1.0.0-beta9",
+  "version": "1.1.0",
   "main": "dist/@byteark/byteark-player-vue.umd.js",
@@ -13,25 +13,31 @@ "description": "ByteArk Player Container for Vue.js",
   "scripts": {
-    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "deploy": "gh-pages -d example/dist",
+    "lint": "vue-cli-service lint",
     "make": "vue-cli-service build --target lib --name @byteark/byteark-player-vue ./src/main.js",
-    "lint": "vue-cli-service lint"
+    "predeploy": "cd example && yarn install && yarn build",
+    "prepublish": "yarn make",
+    "serve": "vue-cli-service serve"
   },
-  "dependencies": {
-    "core-js": "^3.6.5"
-  },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-plugin-router": "~4.4.0",
-    "@vue/cli-plugin-vuex": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "@vue/eslint-config-airbnb": "^5.0.2",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
+    "@babel/core": "^7.14.6",
+    "@babel/eslint-parser": "^7.14.7",
+    "@vue/cli-plugin-babel": "~4.5.13",
+    "@vue/cli-plugin-eslint": "~4.5.13",
+    "@vue/cli-service": "~4.5.13",
+    "@vue/eslint-config-airbnb": "^5.3.0",
+    "core-js": "^3.6.5",
+    "eslint": "^7.29.0",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^4.12.0",
+    "gh-pages": "^3.2.3",
+    "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue": "^2.6.14",
+    "vue-template-compiler": "^2.6.14"
   },
+  "resolutions": {
+    "ssri": "^8.0.1",
+    "is-svg": "^4.2.2"
+  },
   "files": [
@@ -38,0 +44,0 @@ "dist"

README.md

@@ -6,12 +6,17 @@ # ByteArk Player Container for Vue.js
 Table of Contents
-* [Demo](#demo)
-* [Features](#features)
-* [Installation](#installation)
-* [Usages](#usages)
-* [Options prop](#options-prop)
-    * [Source Object](#source-object)
-* [Callback Props](#callback-props)
-* [Advanced Usages](#advance-usages)
-    * [Controlling Players](#controlling-players)
-    * [Request Media/Encryption with credentials](#request-media-encryption-with-credentials)
+- [ByteArk Player Container for Vue.js](#byteark-player-container-for-vuejs)
+  - [Demo](#demo)
+  - [Features](#features)
+  - [Installation](#installation)
+  - [Compatibility](#compatibility)
+  - [Usage](#usage)
+  - [Options prop](#options-prop)
+    - [Source Object](#source-object)
+  - [Event Handling](#event-handling)
+  - [Advanced Props](#advanced-props)
+  - [Advanced Usages](#advanced-usages)
+    - [Controlling Players](#controlling-players)
+    - [Using VideoJS Plugins](#using-videojs-plugins)
+    - [Request Media/Encryption with credentials](#request-mediaencryption-with-credentials)
+  - [License](#license)
 
@@ -29,2 +34,12 @@ ## Demo
 
+## Compatibility
+
+Since Vue 3 is not backward compatible, please make sure to install the correct ByteArk Player Container version based on your Vue version.
+
+| Vue Version | Package Version |
+|-------------|-----------------|
+| 2.x         | 1.x             |
+| 3.x         | 2.x             |
+
+
 ## Installation
@@ -43,3 +58,3 @@
 
-Include and register `ByteArkPlayerContainer` in your project.
+1. Include and register `ByteArkPlayerContainer` in your project.
 
@@ -81,3 +96,3 @@ ```vue
 
-Include stylesheet in your project
+2. Include stylesheet in your project
 
@@ -94,64 +109,43 @@ ```vue
 
-Use `fill` mode if you want the video to be displayed on a fixed-size container.
-
-```vue
-<template>
-  <ByteArkPlayerContainer
-    :options="playerOptions" />
-</template>
-
-<script>
-import ByteArkPlayerContainer from '@byteark/byteark-player-vue';
-
-export default {
-  components: {
-    ByteArkPlayerContainer,
-  },
-  data() {
-    return {
-      playerOptions: {
-        autoplay: true,
-        fill: true,
-        aspectRatio: '16:9',
-        poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg',
-        sources: {
-          src: 'https://video.example.com/path/to/video/playlist.m3u8',
-          type: 'application/x-mpegURL',
-          // Optional
-          title: 'Video Title',
-          videoId: 'RI2PimuHxDXw',
-          poster: 'https://qoder.byteark.com/images/video-frames/1/GU/cg/1GUcgd3XwsmD-large.jpg',
-        },
-      },
-    };
-  },
-};
-</script>
+In case that you want to display videos inside a fix-sized container, use fill layout mode by passing `fill: true` in the player options.
 ```
+playerOptions: {
+  ...options,
+  fill: true,
+},
+```
 
 ## Options prop
 
-You have to pass options into `ByteArkPlayerContainer` 
+You have to pass `options` object to `ByteArkPlayerContainer`
 
-Additional properties will be passed to the player.
+| Name         | Type         | Default | Description                                                                  |
+|--------------|--------------|---------|------------------------------------------------------------------------------|
+| autoplay     | Boolean      | true    | Autoplay the video after the player is created.                              |
+| aspectRatio  | String       | '16:9'  | Use with fluid layout mode, to inform expected video's aspect ratio          |
+| controls     | Boolean      | true    | Show the controls bar.                                                       |
+| customClass  | String       | -       | Custom class name to be applied to the video container.                      |
+| fill         | Boolean      | false   | Use fill layout mode.                                                        |
+| fluid        | Boolean      | true    | Use fluid layout mode.                                                       |
+| loop         | Boolean      | -       | Replay the video after ending                                                |
+| muted        | Boolean      | -       | Play the video without sounds.                                               |
+| playbackRate | Number       | 1.0     | Playback speed. 1.0 means original speed.                                    |
+| playsinline  | Boolean      | true    | Should be true so custom controls available on all platforms, including iOS. |
+| poster       | String       | -       | Image to show before playing the video.                                      |
+| preload      | String       | -       | Preload the video before playing. (none / metadata / auto)                   |
+| responsive   | Boolean      | -       | Auto show/hide controls depending on the screen size.                        |
+| sources      | Object/Array | -       | Source of videos (See [Source Object](#source-object))                       |
+| seekButtons  | Boolean      | false   | Show 10 seconds seek buttons and allow double-tap to seek on mobile.         |
+| volume       | Number       | -       | Video's volume between 0 and 1.                                              |
+| plugins      | Array        | -       | Videojs's plugins                                                            |
 
-| Name                 | Type           | Default | Description                                                                  |
-|----------------------|----------------|---------|------------------------------------------------------------------------------|
-| autoplay             | Boolean        | true    | Autoplay the video after the player is created.                              |
-| aspectRatio          | String         | '16:9'  | Use with fluid layout mode, to inform expected video's aspect ratio          |
-| controls             | Boolean        | true    | Show the controls bar.                                                       |
-| customClass          | String         | -       | Custom class name to be applied to the video container.                      |
-| fill                 | Boolean        | false   | Use fill layout mode.                                                        |
-| fluid                | Boolean        | true    | Use fluid layout mode.                                                       |
-| loop                 | Boolean        | -       | Replay the video after ending                                                |
-| muted                | Boolean        | -       | Play the video without sounds.                                               |
-| playerVersion        | String         | 'v1'    | Version of the player.                                                       |
-| playbackRate         | Number         | 1.0     | Playback speed. 1.0 means original speed.                                    |
-| playsinline          | Boolean        | true    | Should be true so custom controls available on all platforms, including iOS. |
-| poster               | String         | -       | Image to show before playing the video.                                      |
-| preload              | String         | -       | Preload the video before playing. (none / metadata / auto)                   |
-| responsive           | Boolean        | -       | Auto show/hide controls depending on the screen size.                        |
-| sources              | Object/Array   | -       | Source of videos (See [Source Object](#source-object))                                       |
-| volume               | Number         | -       | Video's volume between 0 and 1.                                              |
+The following 4 properties can also be added to `options` for an advanced usage.
 
+| Name                      | Type     | Description                                                                     |
+|---------------------------|----------|---------------------------------------------------------------------------------|
+| playerVersion             | String   | Custom version of the player. (default: 'v1')                                   |
+| playerEndpoint            | String   | Endpoint to the video player (without version part and ending slash).           |
+| playerJsFileName          | String   | File name of player's JS. (default: 'byteark-player.min.js')                    |
+| playerCssFileName         | String   | File name of player's CSS. (default: 'byteark-player.min.css')                  |
+
 You can also use other props not listed here,
@@ -175,26 +169,47 @@ but appear as [VideoJS's options](https://docs.videojs.com/tutorial-options.html#playbackrates).
 
-## 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 | `({ code, message })` | Callback function to be called when there're 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, currentTime)`           | When the video played or the user hit play.      (Value of currentTime is a number in seconds) |
+| pause                   | `(player, currentTime)`           | When the video played or the user hit pause.     (Value of currentTime is a number in seconds) |
+| ended⁕                  | `(player)`                        | When the video ended.                                                       |
+| timeupdate              | `(player, currentTime)`           | When the current playback time changed.          (Value of currentTime is a number in seconds) |
+| seeking                 | `(player, currentTime)`           | When the the user seeked the video.              (Value of currentTime is a number in seconds) |
+| waiting                 | `(player)`                        | When the player is waiting for the video.                                   |
+| fullscreenchange        | `(player, isFullscreen)`          | When the user entered or exited the full screen mode.   (Value of isFullscreen is True or False) |
+| volumechange            | `(player, volume)`                | When the user adjusted the volume.     (Value of volume is between 0 - 1)       |
+| ratechange              | `(player, playbackSpeed)`         | When the user adjusted the playback speed.     (Value of playbackSpeed is a number)  |
+| enterpictureinpicture   | `(player)`                        | When the user entered Picture-in-Picture mode.                                   |
+| leavepictureinpicture   | `(player)`                        | When the user 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
 
-We also provide some ways to custom the appearance of the video placeholder,
-and some advanced behaviours.
+We also provide ways to customize the player functions and behaviours by passing the following props to the player.
 
 | Name                      | Type     | Description                                                                     |
 |---------------------------|----------|---------------------------------------------------------------------------------|
-| createPlaceholderFunction | Function | Custom video placeholder. This function should return a React component.        |
 | createPlayerFunction      | Function | Custom video instance. This function should return a VideoJS's player instance. |
-| playerEndpoint            | String   | Endpoint to the video player (without version part).                            |
-| playerJsFileName          | String   | File name of player's JS.                                                       |
-| playerCssFileName         | String   | File name of player's CSS.                                                      |
+| lazyload                  | Boolean  | The player loads its asset files once it got rendered on the webpage. By passing this prop, the player then loads its asset files once the user clicked on the player instead. |
+| 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.          |
 
-## Advance Usages
+```vue
+<template>
+  <ByteArkPlayerContainer
+    :options="options"
+    lazyload />
+</template>
+```
+## Advanced Usages
 
@@ -209,3 +224,15 @@ ### Controlling Players
   <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" />
@@ -239,5 +266,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, currentTime) {
+      this.doSomething();
+    },
+    onPause(playerInstance, currentTime) {
+      this.doSomething();
+    },
+    onVideoEnded(playerInstance) {
+      this.doSomething();
+    },
+    onTimeUpdated(playerInstance, currentTime) {
+      this.doSomething();
+    },
+    onVideoSeeked(playerInstance, currentTime) {
+      this.doSomething();
+    },
+    onPlayerWaiting(playerInstance) {
+      this.doSomething();
+    },
+    onToggleFullScreen(playerInstance, isFullscreen) {
+      this.doSomething();
+    },
+    onVolumeChange(playerInstance, volume) {
+      this.doSomething();
+    },
+    onPlaybackSpeedChanged(playerInstance, playbackSpeed) {
+      this.doSomething();
+    },
+    onPIPEntered(playerInstance) {
+      this.doSomething();
+    },
+    onPIPExited(playerInstance) {
+      this.doSomething();
+    },
   },
@@ -254,3 +321,3 @@ };
   <ByteArkPlayerContainer
-    :onReady="onReady"
+    @ready="onReady"
     :options="playerOptions" />
@@ -295,4 +362,4 @@ </template>
   <ByteArkPlayerContainer
-    :onReady="onReady"
-    :options="playerOptions" />
+          @ready="onReady"
+          :options="playerOptions" />
 </template>
@@ -299,0 +366,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1401243

increased by9.43%

Dependency count

0

decreased by-100%

Lines of code

11495

increased by9.26%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

398

increased by20.24%

Worsened metrics

Dev dependency count

15

increased by15.38%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedcore-js@^3.6.5

• - Removedcore-js@3.40.0(transitive)