core-player · ManhNguyen98 · Sep 10, 2021
diff --git a/src/dashboard/controls.vue b/src/dashboard/controls.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="vcp-controls">
     <div class="playback-control">
-      <play-pause-cntrol />
-      <time-span />
+      <play-pause-cntrol :playerKey="playerKey"/>
+      <time-span :playerKey="playerKey"/>
     </div>
     <div class="setting-control">
-      <volume-control :muted="muted" />
-      <picture-in-picture />
-      <settings-control />
-      <fullscreen-control />
+      <volume-control :muted="muted" :playerKey="playerKey"/>
+      <picture-in-picture :playerKey="playerKey"/>
+      <settings-control :playerKey="playerKey"/>
+      <fullscreen-control :playerKey="playerKey"/>
     </div>
   </div>
 </template>
@@ -33,7 +33,11 @@ export default {
   },
   props: {
     visible: Boolean,
-    muted: Boolean
+    muted: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   }
 }
 </script>

diff --git a/src/dashboard/dashboard.vue b/src/dashboard/dashboard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vcp-dashboard" autoplay v-show="show" ref="dashboard">
-    <Progress />
-    <Controls :muted="muted" />
+    <Progress :playerKey="playerKey"/>
+    <Controls :muted="muted" :playerKey="playerKey"/>
   </div>
 </template>
 
@@ -26,14 +26,21 @@ export default {
   },
   props: {
     controls: [Boolean, String],
-    muted: Boolean
+    muted: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   data () {
     return {
       show: true
     }
   },
   mixins: [coreMixins],
+  created () {
+    this._playerKey = this.playerKey
+  },
   methods: {
     showDashboard (delay) {
       window.clearTimeout(this._hideTimeout)

diff --git a/src/dashboard/fullscreen.vue b/src/dashboard/fullscreen.vue
@@ -20,7 +20,14 @@ export default {
   name: 'Fullscreen',
   mixins: [coreMixins],
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
+  },
+  created () {
+    this._playerKey = this.playerKey
   },
   data () {
     return {

diff --git a/src/dashboard/mobile-controls.vue b/src/dashboard/mobile-controls.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="vcp-controls">
     <div class="playback-control">
-      <time-span />
+      <time-span :playerKey="playerKey"/>
     </div>
     <div class="setting-control">
-      <picture-in-picture />
-      <settings-control />
-      <fullscreen-control />
+      <picture-in-picture :playerKey="playerKey"/>
+      <settings-control :playerKey="playerKey"/>
+      <fullscreen-control :playerKey="playerKey"/>
     </div>
   </div>
 </template>
@@ -27,7 +27,11 @@ export default {
   },
   props: {
     visible: Boolean,
-    muted: Boolean
+    muted: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   }
 }
 </script>

diff --git a/src/dashboard/mobile-dashboard.vue b/src/dashboard/mobile-dashboard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="vcp-m-dashboard" autoplay v-show="show" ref="dashboard">
-    <MobileControls :muted="muted" />
-    <Progress />
+    <MobileControls :muted="muted" :playerKey="playerKey"/>
+    <Progress :playerKey="playerKey"/>
   </div>
 </template>
 
@@ -26,14 +26,21 @@ export default {
   },
   props: {
     controls: [Boolean, String],
-    muted: Boolean
+    muted: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   data () {
     return {
       show: true
     }
   },
   mixins: [coreMixins],
+  created () {
+    this._playerKey = this.playerKey
+  },
   methods: {
     showDashboard (delay) {
       window.clearTimeout(this._hideTimeout)

diff --git a/src/dashboard/picture-in-picture.vue b/src/dashboard/picture-in-picture.vue
@@ -26,7 +26,11 @@ export default {
   name: 'PictureInPicture',
   mixins: [coreMixins],
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   data () {
     return {
@@ -37,6 +41,7 @@ export default {
     if ((_isSupportPIP)) {
       this.show = true
     }
+    this._playerKey = this.playerKey
   },
   methods: {
     requestPictureInPicture () {

diff --git a/src/dashboard/play-pause-control.vue b/src/dashboard/play-pause-control.vue
@@ -18,7 +18,14 @@ export default {
   name: 'PlayPauseControl',
   mixins: [coreMixins],
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
+  },
+  created () {
+    this._playerKey = this.playerKey
   }
 }
 </script>

diff --git a/src/dashboard/progress.vue b/src/dashboard/progress.vue
@@ -18,16 +18,23 @@ import { drag } from '../helper/dom'
 export default {
   name: 'Progress',
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   mixins: [coreMixins],
+  created () {
+    this._playerKey = this.playerKey
+  },
   data () {
     return {
       progress: 0.00,
       bufferProgress: 0.00
     }
   },
-  created () {
+  beforeMount () {
     this.on(EVENTS.TIMEUPDATE, () => {
       if (this._dragEl) {
         return

diff --git a/src/dashboard/settings.vue b/src/dashboard/settings.vue
@@ -10,13 +10,13 @@
             {{$t('dashboard.settings.autoplay')}}
           </span>
           <div class="item-control">
-            <widgets-switch ref="autoplaySwitch" @change="changeAutoplaySettings"></widgets-switch>
+            <widgets-switch :playerKey="playerKey" ref="autoplaySwitch" @change="changeAutoplaySettings"></widgets-switch>
           </div>
         </li>
         <li>
           <span class="item-name" >{{$t('dashboard.settings.loop')}}</span>
           <div class="item-control">
-            <widgets-switch ref="loopSwitch" @change="changeLoopSettings"></widgets-switch>
+            <widgets-switch :playerKey="playerKey" ref="loopSwitch" @change="changeLoopSettings"></widgets-switch>
           </div>
         </li>
         <li>
@@ -31,7 +31,7 @@
           <div class="item-control" v-if="resolution" @click="showResolutionPanel">
             <span>{{resolution}}</span>
             <svg xmlns="http://www.w3.org/2000/svg" width="5.963" height="11.568" viewBox="0 0 5.963 11.568"><path data-name="4" d="M.809.616l3.9 5-3.9 5.368" fill="none" stroke="#fff" stroke-width="2"/></svg>
-           </div>
+          </div>
         </li>
       </ul>
       <ul class="resolution-list animated fadeInRight" v-show="resolutionListPanel">
@@ -64,12 +64,19 @@ import coreMixins from '../mixins'
 export default {
   name: 'Settings',
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   mixins: [coreMixins],
   components: {
     'widgets-switch': SettingSwitch
   },
+  created () {
+    this._playerKey = this.playerKey
+  },
   data () {
     return {
       autoplay: false,

diff --git a/src/dashboard/time-span.vue b/src/dashboard/time-span.vue
@@ -14,16 +14,23 @@ import { secondsToTime } from '../helper/util'
 export default {
   name: 'TimeSpan',
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   mixins: [coreMixins],
+  created () {
+    this._playerKey = this.playerKey
+  },
   data () {
     return {
       currentTime: '00:00:00',
       duration: '--:--:--'
     }
   },
-  created () {
+  beforeMount () {
     this.on(EVENTS.TIMEUPDATE, () => {
       const currentTime = this.$player.getCurrentTime()
       if (!currentTime) {

diff --git a/src/dashboard/volume.vue b/src/dashboard/volume.vue
@@ -26,9 +26,16 @@ export default {
   name: 'Volume',
   props: {
     visible: Boolean,
-    muted: Boolean
+    muted: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   mixins: [coreMixins],
+  created () {
+    this._playerKey = this.playerKey
+  },
   data () {
     return {
       panelShow: false,

diff --git a/src/layers/cover-layer.vue b/src/layers/cover-layer.vue
@@ -12,14 +12,21 @@ export default {
   name: 'CoverLayer',
   mixins: [coreMixins],
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   data () {
     return {
       cover: 'data:image/gif;base64,R0lGODlhAgACAIAAADMzMwAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMEQ4MDk3RDgzRTUxMUVBOEFBNkNFRTA4ODA0RDY3OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMEQ4MDk3RTgzRTUxMUVBOEFBNkNFRTA4ODA0RDY3OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIwRDgwOTdCODNFNTExRUE4QUE2Q0VFMDg4MDRENjc4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIwRDgwOTdDODNFNTExRUE4QUE2Q0VFMDg4MDRENjc4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAIAAgAAAgKEUQA7',
       show: false
     }
   },
+  created () {
+    this._playerKey = this.playerKey
+  },
   mounted () {
     this.on(EVENTS.LIFECYCLE_INITING, () => {
       const { cover } = this.$player.config

diff --git a/src/layers/error-layer.vue b/src/layers/error-layer.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="vcp-layer error-layer" v-show="show">
    <div class="error-icon">
-     <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 200 200"><g transform="translate(-963 -1663)"><circle data-name="11" cx="100" cy="100" r="100" transform="translate(963 1663)" fill="#ff5e5c"/><g data-name="46" transform="translate(1006 1727)" fill="#fff" stroke="#fff" stroke-width="3"><rect width="120" height="73" rx="2" stroke="none"/><rect x="1.5" y="1.5" width="117" height="70" rx=".5" fill="none"/></g><g data-name="12" transform="translate(1108 1743)" fill="#fff" stroke="#ff5a52" stroke-width="2"><circle cx="6" cy="6" r="6" stroke="none"/><circle cx="6" cy="6" r="5" fill="none"/></g><path data-name="1" fill="none" stroke="#fff" stroke-width="3" d="M1057.5 1728.5l30-22"/><path data-name="2" fill="none" stroke="#fff" stroke-width="3" d="M1036.5 1697.5l22 30"/><path data-name="48" d="M1018 1737h80a4 4 0 0 1 4 4v45a5 5 0 0 1-5 5h-78a5 5 0 0 1-5-5v-45a4 4 0 0 1 4-4z" fill="#2785f2"/><g data-name="4" fill="#ff584c"><path data-name="49" d="M1108 1757h3v2h-3z"/><path data-name="50" d="M1113 1757h3v2h-3z"/><path data-name="51" d="M1118 1757h3v2h-3z"/></g><g data-name="5" fill="#ff584c"><path data-name="49" d="M1108 1760h3v2h-3z"/><path data-name="50" d="M1113 1760h3v2h-3z"/><path data-name="51" d="M1118 1760h3v2h-3z"/></g></g></svg>
-   </div>
-   <div class="error-msg-wrap">
-     <h2>{{$t('layers.error.title')}}</h2>
-     <p class="error-msg">{{errMsg}}</p>
-   </div>
+    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 200 200"><g transform="translate(-963 -1663)"><circle data-name="11" cx="100" cy="100" r="100" transform="translate(963 1663)" fill="#ff5e5c"/><g data-name="46" transform="translate(1006 1727)" fill="#fff" stroke="#fff" stroke-width="3"><rect width="120" height="73" rx="2" stroke="none"/><rect x="1.5" y="1.5" width="117" height="70" rx=".5" fill="none"/></g><g data-name="12" transform="translate(1108 1743)" fill="#fff" stroke="#ff5a52" stroke-width="2"><circle cx="6" cy="6" r="6" stroke="none"/><circle cx="6" cy="6" r="5" fill="none"/></g><path data-name="1" fill="none" stroke="#fff" stroke-width="3" d="M1057.5 1728.5l30-22"/><path data-name="2" fill="none" stroke="#fff" stroke-width="3" d="M1036.5 1697.5l22 30"/><path data-name="48" d="M1018 1737h80a4 4 0 0 1 4 4v45a5 5 0 0 1-5 5h-78a5 5 0 0 1-5-5v-45a4 4 0 0 1 4-4z" fill="#2785f2"/><g data-name="4" fill="#ff584c"><path data-name="49" d="M1108 1757h3v2h-3z"/><path data-name="50" d="M1113 1757h3v2h-3z"/><path data-name="51" d="M1118 1757h3v2h-3z"/></g><g data-name="5" fill="#ff584c"><path data-name="49" d="M1108 1760h3v2h-3z"/><path data-name="50" d="M1113 1760h3v2h-3z"/><path data-name="51" d="M1118 1760h3v2h-3z"/></g></g></svg>
+  </div>
+  <div class="error-msg-wrap">
+    <h2>{{$t('layers.error.title')}}</h2>
+    <p class="error-msg">{{errMsg}}</p>
+  </div>
   </div>
 </template>
 
@@ -19,7 +19,14 @@ export default {
   name: 'CoverLayer',
   mixins: [coreMixins],
   props: {
-    dsiable: Boolean
+    dsiable: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
+  },
+  created () {
+    this._playerKey = this.playerKey
   },
   data () {
     return {

diff --git a/src/layers/layers.vue b/src/layers/layers.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="vue-core-video-player-layers">
-    <cover-layer></cover-layer>
-    <logo-layer></logo-layer>
-    <title-layer></title-layer>
-    <play-pause-layer></play-pause-layer>
-    <loading-layer></loading-layer>
-    <error-layer></error-layer>
+    <cover-layer :playerKey="playerKey"></cover-layer>
+    <logo-layer :playerKey="playerKey"></logo-layer>
+    <title-layer :playerKey="playerKey"></title-layer>
+    <play-pause-layer :playerKey="playerKey"></play-pause-layer>
+    <loading-layer :playerKey="playerKey"></loading-layer>
+    <error-layer :playerKey="playerKey"></error-layer>
   </div>
 </template>
 
@@ -28,7 +28,11 @@ export default {
     ErrorLayer
   },
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   }
 }
 </script>