@webitel/ui-sdk 24.6.56 → 24.6.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.6.56",
+  "version": "24.6.57",
   "private": false,
   "scripts": {
     "dev": "vite",

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

@@ -41,6 +41,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideDuration: {
+      type: Boolean,
+      default: false,
+    },
     download: {
       type: [String, Function, Boolean],
       default: () => (url) => url.replace('/stream', '/download'),
@@ -107,11 +111,17 @@ export default {
       const baseURL = this.$baseURL || process.env.BASE_URL || import.meta.env.BASE_URL;
       const iconUrl = createPlyrURL(baseURL);
       if (this.player) this.player.destroy();
-      const controls = [
+
+      const defaultControls = [
         'play-large', 'play', 'progress', 'current-time',
-        'mute', 'volume', 'captions', 'settings', 'pip',
-        'airplay', 'fullscreen',
+        'duration', 'mute', 'volume', 'captions', 'settings',
+        'pip', 'airplay', 'fullscreen',
       ];
+
+      const controls = this.hideDuration
+        ? defaultControls.filter(control => control !== 'duration')
+        : defaultControls;
+
       if (this.download) controls.push('download');
       this.player = new Plyr(this.$refs.player, {
         // this.player = new Plyr('.wt-player__player', {
@@ -137,8 +147,9 @@ export default {
       this.player.muted = false;
     },
     setupDownload() {
-      if (!this.download) this.setupPlayer();
-      else if (typeof this.download === 'string') {
+      if (!this.download) {
+        this.setupPlayer();
+      } else if (typeof this.download === 'string') {
         this.player.download = this.download;
       } else if (typeof this.download === 'function') {
         this.player.download = this.download(this.src);
@@ -188,13 +199,15 @@ export default {
       box-shadow: var(--elevation-10);
     }
 
-    .plyr__controls .plyr__control {
+    .plyr__controls > .plyr__control,
+    .plyr__controls > .plyr__controls__item > .plyr__control {
       padding: var(--plyr-controls-icon-padding);
+    }
 
-      svg {
-        width: var(--plyr-controls-icon-size);
-        height: var(--plyr-controls-icon-size);
-      }
+    .plyr__controls > .plyr__control > svg,
+    .plyr__controls > .plyr__controls__item > .plyr__control > svg {
+      width: var(--plyr-controls-icon-size);
+      height: var(--plyr-controls-icon-size);
     }
 
     .plyr__control--overlaid svg {