fix: resolve global property conflicts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgeek/vue3-video-player",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

src/dashboard/fullscreen.vue

@@ -2,11 +2,11 @@
   <div v-if="!disable" class="vue-core-video-player-control">
     <div v-if="!fullscreen" class="btn-control btn-fullscreen" @click="enterFullscreen">
       <svg xmlns="http://www.w3.org/2000/svg" width="28" height="20" viewBox="0 0 28 20"><g fill="#fff"><g data-name="6 7"><g data-name="4 1"><path data-name="7" d="M16 0h10v2H16z"/><path data-name="8" d="M26 0h2v6h-2z"/></g><g data-name="5 1"><path data-name="9" d="M18 18h10v2H18z"/><path data-name="10" d="M26 14h2v6h-2z"/></g></g><g data-name="6 8"><g data-name="4 1"><path data-name="7" d="M12 20H2v-2h10z"/><path data-name="8" d="M2 20H0v-6h2z"/></g><g data-name="5 1"><path data-name="9" d="M10 2H0V0h10z"/><path data-name="10" d="M2 6H0V0h2z"/></g></g></g></svg>
-      <div class="tips">{{$t('dashboard.btn.fullscreen')}}</div>
+      <div class="tips">{{$tvvp('dashboard.btn.fullscreen')}}</div>
     </div>
     <div v-if="fullscreen" class="btn-control btn-off-fullscreen" @click="cancelFullscreen">
       <svg   xmlns="http://www.w3.org/2000/svg" width="25" height="18" viewBox="0 0 25 18"><g fill="#fff"><g data-name="6 9"><g data-name="4 1"><path data-name="7" d="M15 5h10v2H15z"/><path data-name="8" d="M15 0h2v6h-2z"/></g><g data-name="5 1"><path data-name="9" d="M15 12h10v2H15z"/><path data-name="10" d="M15 12h2v6h-2z"/></g></g><g data-name="6 10"><g data-name="4 1"><path data-name="7" d="M10 14H0v-2h10z"/><path data-name="8" d="M10 18H8v-6h2z"/></g><g data-name="5 1"><path data-name="9" d="M10 6H0V4h10z"/><path data-name="10" d="M10 6H8V0h2z"/></g></g></g></svg>
-      <span class="tips">{{$t('dashboard.btn.exitFullscreen')}}</span>
+      <span class="tips">{{$tvvp('dashboard.btn.exitFullscreen')}}</span>
     </div>
   </div>
 </template>

src/dashboard/picture-in-picture.vue

@@ -2,7 +2,7 @@
   <div class="vue-core-video-player-control" v-if="show" @click="requestPictureInPicture">
     <div class="btn-control btn-pip" >
       <svg xmlns="http://www.w3.org/2000/svg" width="28" height="16" viewBox="0 0 28 16"><g data-name="6 13"><g data-name="5 1" fill="#fff"><path data-name="9" d="M18 14h10v2H18z"/><path data-name="10" d="M26 9h2v6h-2z"/></g></g><g data-name="6 14" fill="#fff"><g data-name="4 1"><path data-name="7" d="M12 16H2v-2h10z"/><path data-name="8" d="M2 16H0V6h2z"/></g><path data-name="41" d="M28 2H0V0h28z"/></g></svg>
-      <div class="tips">{{$t('dashboard.btn.pip')}}</div>
+      <div class="tips">{{$tvvp('dashboard.btn.pip')}}</div>
     </div>
   </div>
 </template>

src/dashboard/play-pause-control.vue

@@ -2,11 +2,11 @@
   <div class="vue-core-video-player-control">
     <div v-if="isPlaying" class="btn-control btn-pause" @click="pause">
       <svg xmlns="http://www.w3.org/2000/svg" width="36" height="48" viewBox="0 0 36 48"><g transform="translate(-950 -398)"><rect width="12" height="48" transform="translate(950 398)" fill="#fff"/><rect width="12" height="48" transform="translate(974 398)" fill="#fff"/></g></svg>
-      <span class="tips">{{$t('dashboard.btn.pause')}}</span>
+      <span class="tips">{{$tvvp('dashboard.btn.pause')}}</span>
     </div>
     <div v-else class="btn-control btn-play" @click="play" >
       <svg xmlns="http://www.w3.org/2000/svg" width="41" height="47" viewBox="0 0 41 47"><path d="M23.5,0,47,41H0Z" transform="translate(41) rotate(90)" fill="#fff"/></svg>
-      <span class="tips">{{$t('dashboard.btn.play')}}</span>
+      <span class="tips">{{$tvvp('dashboard.btn.play')}}</span>
     </div>
   </div>
 </template>

src/dashboard/settings.vue

@@ -7,27 +7,27 @@
       <ul class="current-panel" v-show="currentPanel">
         <li>
           <span class="item-name">
-            {{$t('dashboard.settings.autoplay')}}
+            {{$tvvp('dashboard.settings.autoplay')}}
           </span>
           <div class="item-control">
             <widgets-switch ref="autoplaySwitch" @change="changeAutoplaySettings"></widgets-switch>
           </div>
         </li>
         <li>
-          <span class="item-name" >{{$t('dashboard.settings.loop')}}</span>
+          <span class="item-name" >{{$tvvp('dashboard.settings.loop')}}</span>
           <div class="item-control">
             <widgets-switch ref="loopSwitch" @change="changeLoopSettings"></widgets-switch>
           </div>
         </li>
         <li>
-          <span class="item-name">{{$t('dashboard.settings.speed')}}</span>
+          <span class="item-name">{{$tvvp('dashboard.settings.speed')}}</span>
           <div class="item-control" @click="showSpeedPanel">
             <span>{{speed}}x</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>
         </li>
         <li v-show="medias.length > 1">
-          <span class="item-name">{{$t('dashboard.settings.resolution')}}</span>
+          <span class="item-name">{{$tvvp('dashboard.settings.resolution')}}</span>
           <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>
@@ -37,14 +37,14 @@
       <ul class="resolution-list animated fadeInRight" v-show="resolutionListPanel">
         <li @click="backCurrentPanel">
           <svg xmlns="http://www.w3.org/2000/svg" width="5.963" height="11.568" viewBox="0 0 5.963 11.568"><path data-name="5" d="M5.154.616l-3.9 5 3.9 5.368" fill="none" stroke="#fff" stroke-width="2"/></svg>
-          {{$t('dashboard.btn.back')}}
+          {{$tvvp('dashboard.btn.back')}}
         </li>
         <li v-for="(item, index) in medias" :key="index" @click="setResolution(item)">{{ item.resolution }}</li>
       </ul>
       <ul class="speed-list animated fadeInRight" v-if="speedListPanel">
         <li @click="backCurrentPanel">
           <svg xmlns="http://www.w3.org/2000/svg" width="5.963" height="11.568" viewBox="0 0 5.963 11.568"><path data-name="5" d="M5.154.616l-3.9 5 3.9 5.368" fill="none" stroke="#fff" stroke-width="2"/></svg>
-          {{$t('dashboard.btn.back')}}
+          {{$tvvp('dashboard.btn.back')}}
         </li>
         <li @click="setSpeed" data-val="0.5">0.5x</li>
         <li @click="setSpeed" data-val="1">1x</li>

src/directives/i18n.js

@@ -1,7 +1,7 @@
 import { i18n } from '../helper'
 
 export function setupI18nDirective (app) {
-  app.directive('t', {
+  app.directive('tvvp', {
     beforeMount: function (el, binding) {
       el.innerText = i18n.t(binding.value)
     }

src/index.js

@@ -7,7 +7,7 @@ import { setupDirectives } from './directives'
 const Vue3VideoPlayerPlugin = {
   install (app, options = {}) {
     i18n.setLocale(options.lang)
-    app.config.globalProperties.$t = function (expression) {
+    app.config.globalProperties.$tvvp = function (expression) {
       return i18n.t(expression)
     }
     setupDirectives(app)

src/layers/error-layer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vcp-layer error-layer" v-show="show">
    <div class="error-msg-wrap">
-     <h2>{{$t('layers.error.title')}}</h2>
+     <h2>{{$tvvp('layers.error.title')}}</h2>
      <p class="error-msg">{{errMsg}}</p>
    </div>
   </div>

src/layers/loading-layer.vue

@@ -12,7 +12,7 @@
           <circle class="path" stroke="url(#grad)" stroke-width="10" fill="none" stroke-linecap="round" cx="40" cy="40" r="30"></circle>
         </svg>
       </div>
-      <p>{{$t('layers.loading.msg')}}</p>
+      <p>{{$tvvp('layers.loading.msg')}}</p>
     </div>
   </div>
 </template>

src/plugins/i18n.js

@@ -2,7 +2,7 @@ import { i18n } from '../helper'
 
 const VuePluginI18n = {
   install (Vue) {
-    Vue.prototype.$t = function (expression) {
+    Vue.prototype.$tvvp = function (expression) {
       return i18n.t(expression)
     }
   }