From f7996b7cb7f112085a0c9d941be2d62287a77dc9 Mon Sep 17 00:00:00 2001
From: ManhNguyen98 <nguyenthietmanh98@gmail.com>
Date: Fri, 10 Sep 2021 21:30:23 +0700
Subject: [PATCH] fix: Multiple instances on the same page

---
 src/dashboard/controls.vue           | 18 +++++++++++-------
 src/dashboard/dashboard.vue          | 13 ++++++++++---
 src/dashboard/fullscreen.vue         |  9 ++++++++-
 src/dashboard/mobile-controls.vue    | 14 +++++++++-----
 src/dashboard/mobile-dashboard.vue   | 13 ++++++++++---
 src/dashboard/picture-in-picture.vue |  7 ++++++-
 src/dashboard/play-pause-control.vue |  9 ++++++++-
 src/dashboard/progress.vue           | 11 +++++++++--
 src/dashboard/settings.vue           | 15 +++++++++++----
 src/dashboard/time-span.vue          | 11 +++++++++--
 src/dashboard/volume.vue             |  9 ++++++++-
 src/layers/cover-layer.vue           |  9 ++++++++-
 src/layers/error-layer.vue           | 21 ++++++++++++++-------
 src/layers/layers.vue                | 18 +++++++++++-------
 src/layers/loading-layer.vue         |  9 +++++++++
 src/layers/logo-layer.vue            |  9 ++++++++-
 src/layers/play-pause-layer.vue      |  9 ++++++++-
 src/layers/title-layer.vue           |  9 +++++++++
 src/mixins.js                        | 24 +++++++++++++++++-------
 src/vue-core-video-player.vue        | 15 +++++++++------
 20 files changed, 192 insertions(+), 60 deletions(-)

diff --git a/src/dashboard/controls.vue b/src/dashboard/controls.vue
index 6170d51..76bad35 100644
--- 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
index 834159a..a6fe66a 100644
--- 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,7 +26,11 @@ export default {
   },
   props: {
     controls: [Boolean, String],
-    muted: Boolean
+    muted: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   data () {
     return {
@@ -34,6 +38,9 @@ export default {
     }
   },
   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
index 0c8ab6a..d83faf4 100644
--- 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
index 89762af..def0846 100644
--- 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
index 41cad52..167041b 100644
--- 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,7 +26,11 @@ export default {
   },
   props: {
     controls: [Boolean, String],
-    muted: Boolean
+    muted: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   data () {
     return {
@@ -34,6 +38,9 @@ export default {
     }
   },
   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
index 609c58f..df4d872 100644
--- 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
index a695ecd..0847842 100644
--- 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
index 0980ac5..6bea558 100644
--- 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
index bb8b0d6..bdcc07b 100644
--- 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
index 592e42b..333bdaa 100644
--- 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
index 8cf8621..5752e8c 100644
--- 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
index dfe25fc..0538d2e 100644
--- a/src/layers/cover-layer.vue
+++ b/src/layers/cover-layer.vue
@@ -12,7 +12,11 @@ export default {
   name: 'CoverLayer',
   mixins: [coreMixins],
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
   },
   data () {
     return {
@@ -20,6 +24,9 @@ export default {
       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
index 3492ce6..69a8e4e 100644
--- 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
index e1bdae5..0ec4c39 100644
--- 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>
diff --git a/src/layers/loading-layer.vue b/src/layers/loading-layer.vue
index 8567366..693dcbe 100644
--- a/src/layers/loading-layer.vue
+++ b/src/layers/loading-layer.vue
@@ -26,6 +26,15 @@ const showTimeout = 600
 export default {
   name: 'LoadingLayer',
   mixins: [coreMixins],
+  props: {
+    playerKey: {
+      type: String,
+      default: ''
+    }
+  },
+  beforeMount () {
+    this._playerKey = this.playerKey
+  },
   data () {
     return {
       show: false
diff --git a/src/layers/logo-layer.vue b/src/layers/logo-layer.vue
index 8af7a38..7ef893a 100644
--- a/src/layers/logo-layer.vue
+++ b/src/layers/logo-layer.vue
@@ -14,7 +14,14 @@ export default {
   name: 'CoverLayer',
   mixins: [coreMixins],
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
+  },
+  created () {
+    this._playerKey = this.playerKey
   },
 
   data () {
diff --git a/src/layers/play-pause-layer.vue b/src/layers/play-pause-layer.vue
index 9189cf6..1bdc200 100644
--- a/src/layers/play-pause-layer.vue
+++ b/src/layers/play-pause-layer.vue
@@ -18,7 +18,14 @@ export default {
   name: 'PlayPauseLayer',
   mixins: [coreMixins],
   props: {
-    visible: Boolean
+    visible: Boolean,
+    playerKey: {
+      type: String,
+      default: ''
+    }
+  },
+  created () {
+    this._playerKey = this.playerKey
   },
   data () {
     return {
diff --git a/src/layers/title-layer.vue b/src/layers/title-layer.vue
index 337b849..c947241 100644
--- a/src/layers/title-layer.vue
+++ b/src/layers/title-layer.vue
@@ -11,12 +11,21 @@ import coreMixins from '../mixins'
 export default {
   name: 'CoverLayer',
   mixins: [coreMixins],
+  props: {
+    playerKey: {
+      type: String,
+      default: ''
+    }
+  },
   data () {
     return {
       title: '',
       show: false
     }
   },
+  created () {
+    this._playerKey = this.playerKey
+  },
   mounted () {
     this.on(EVENTS.LIFECYCLE_INITING, () => {
       const { title } = this.$player.config
diff --git a/src/mixins.js b/src/mixins.js
index d352bbd..ad77068 100644
--- a/src/mixins.js
+++ b/src/mixins.js
@@ -2,6 +2,7 @@ import ee from 'event-emitter'
 import EVENTS from './constants/EVENTS'
 import * as types from './helper/type'
 import { addClass, removeClass, registerFullScreenChangeListener } from './helper/dom'
+import { guid } from './helper/util'
 // import eventBus from './helper/eve'
 // import { getVideoCore } from './core'
 const _ee = ee()
@@ -12,10 +13,11 @@ const mixins = {
       show: false,
       fullscreen: false,
       isPlaying: false,
+      _playerKey: 'key-' + guid(),
       _coreID: ''
     }
   },
-  created () {
+  beforeMount () {
     this.on(EVENTS.LIFECYCLE_INITING, ($player) => {
       this.$player = $player
       this.$container = this.$player.$el
@@ -75,21 +77,26 @@ const mixins = {
       return (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement)
     },
     on (event, callback) {
+      let eventId
       if (types.isString(event)) {
-        this._events[event] = callback
-        _ee.on(event, callback)
+        eventId = this.eventID(event)
+        this._events[eventId] = callback
+        _ee.on(eventId, callback)
       } else if (Array.isArray(event)) {
         event.forEach((item) => {
-          this._events[item] = callback
-          _ee.on(item, callback)
+          eventId = this.eventID(item)
+          this._events[eventId] = callback
+          _ee.on(eventId, callback)
         })
       }
     },
     emit (event, res) {
-      _ee.emit(event, res)
+      const eventId = this.eventID(event)
+      _ee.emit(eventId, res)
     },
     off (event, callback) {
-      _ee.off(event, callback)
+      const eventId = this.eventID(event)
+      _ee.off(eventId, callback)
     },
     removeAllEvents () {
       for (let item in this._events) {
@@ -101,6 +108,9 @@ const mixins = {
     },
     removeClass (cls) {
       this.$container.classList.remove(cls)
+    },
+    eventID (event) {
+      return `${event}-${this._playerKey}`
     }
   },
   beforeDestroy () {
diff --git a/src/vue-core-video-player.vue b/src/vue-core-video-player.vue
index 23c1fa6..5162c81 100644
--- a/src/vue-core-video-player.vue
+++ b/src/vue-core-video-player.vue
@@ -7,9 +7,9 @@
       :loop="loop"
       :playsinline="playsinline"
       :src="source"></video>
-    <Layers />
-    <Dashboard v-if="!isMobile" :controls="controls" :muted="muted" />
-    <MobileDashboard v-if="isMobile" :controls="controls" :muted="muted" />
+    <Layers :playerKey="playerKey"/>
+    <Dashboard v-if="!isMobile" :controls="controls" :muted="muted" :playerKey="playerKey"/>
+    <MobileDashboard v-if="isMobile" :controls="controls" :muted="muted" :playerKey="playerKey"/>
   </div>
 </template>
 
@@ -21,7 +21,7 @@ import { EVENTS, DEFAULT_CONFIG } from './constants'
 import { parseMediaList } from './helper/media'
 import { initVideoCore } from './core'
 import coreMixins from './mixins'
-import { isMobile } from './helper/util.js'
+import { isMobile, guid } from './helper/util.js'
 import Dashboard from './dashboard/dashboard.vue'
 import MobileDashboard from './dashboard/mobile-dashboard.vue'
 import Layers from './layers/layers.vue'
@@ -71,10 +71,10 @@ export default {
       default: () => []
     }
   },
-
   data () {
     return {
-      isMobile: isMobile
+      isMobile: isMobile,
+      playerKey: 'key-' + guid()
     }
   },
 
@@ -105,6 +105,9 @@ export default {
       return url
     }
   },
+  created () {
+    this._playerKey = this.playerKey
+  },
   mounted () {
     // const self = this
     this.$player = this.videoCore = initVideoCore({