@webitel/ui-sdk 1.0.25 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.25",
+  "version": "1.0.28",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-badge/wt-badge.vue

@@ -33,7 +33,7 @@ export default {
     border-radius: 50%;
 
     &--outside {
-      transform: translate(-100%, -100%);
+      transform: translate(100%, -100%);
     }
   }
 </style>

package/src/components/organisms/wt-player/wt-player.vue

@@ -1,13 +1,14 @@
 <template>
   <aside class="wt-player">
-    <audio
-      id="wt-player__player"
-      ref="audio"
+    <component
+      :is="playerType"
+      class="wt-player__player"
+      ref="player"
       :src="src"
       :autoplay="autoplay"
       controls
       v-on="listeners"
-    ></audio>
+    ></component>
 
     <!-- The "wt-icon-btn" component is append in to "audio" element by "setCloseIcon" method-->
     <wt-icon-btn
@@ -38,6 +39,24 @@ export default {
       type: [String, Function, Boolean],
       default: () => (url) => url.replace('/stream', '/download'),
     },
+    mime: {
+      type: String,
+      default: 'audio',
+    },
+    // plyr-specific options
+    resetOnEnd: {
+      type: Boolean,
+      default: false,
+    },
+    invertTime: {
+      type: Boolean,
+      default: true,
+    },
+    // plyr is caching volume settings so we should reset them at init
+    resetVolume: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     player: null,
@@ -62,26 +81,42 @@ export default {
         ...this.$listeners,
       };
     },
+    playerType() {
+      return this.mime.includes('video') ? 'video' : 'audio';
+    },
   },
 
   methods: {
-    setupPlayer() {
+    async setupPlayer() {
+      await this.$nextTick(); // test is failing to render component if element is passed to Plyr as Vue $ref
       const baseURL = this.$baseURL || process.env.BASE_URL;
-      if (this.player) this.player.restart();
+      if (this.player) this.player.destroy();
       const controls = ['play-large', 'play', 'progress', 'current-time',
         'mute', 'volume', 'captions', 'settings', 'pip',
         'airplay', 'fullscreen'];
       if (this.download) controls.push('download');
-      this.player = new Plyr('#wt-player__player', {
+      this.player = new Plyr(this.$refs.player, {
+      // this.player = new Plyr('.wt-player__player', {
         autoplay: this.autoplay,
         loadSprite: false,
+        resetOnEnd: this.resetOnEnd,
+        invertTime: this.invertTime,
         iconUrl: `${baseURL}img/plyr.svg`,
         controls,
         loop: {
           active: this.loop,
         },
       });
+
+      if (this.resetVolume) this.makeVolumeReset();
+      if (this.download) this.setupDownload();
+
       this.appendCloseIcon();
+      this.$emit('initialized', this.player);
+    },
+    makeVolumeReset() {
+      this.player.volume = 1;
+      this.player.muted = false;
     },
     setupDownload() {
       if (!this.download) this.setupPlayer();
@@ -92,7 +127,7 @@ export default {
       }
     },
     appendCloseIcon() {
-      const plyrControls = this.$refs.audio.plyr?.elements?.controls;
+      const plyrControls = this.$refs.player.plyr?.elements?.controls;
       const closeIcon = this.$refs['close-icon'].$el;
       if (plyrControls) {
         plyrControls.append(closeIcon);
@@ -111,6 +146,7 @@ export default {
   bottom: 60px;
 
   .plyr {
+    max-width: 100%; // prevents <video> container overflow
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
   }
@@ -125,6 +161,10 @@ export default {
     color: var(--text-primary-color);
   }
 
+  .plyr__control--overlaid svg {
+    left: 0; // reset plyr style for video "play" button icon
+  }
+
   //.plyr__control[role='menuitemradio']::before,
   //.plyr__control[role='menuitemradio']:hover::before {
   //  border: 2px solid var(--secondary-color);