Fix/wt player duration [WTEL-4110]

docs/pages/webitel-ui/components/wt-expansion-panel/Readme.md

@@ -1,4 +1,5 @@
 <script setup>
+import ExampleExpansionPanelDifferentSizes from './examples/example-expansion-panel-different-sizes.vue';
 </script>
 
 # WtExpansionPanel

package.json

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

src/components/transitions/wt-expand-transition.vue

@@ -1,72 +1,13 @@
 <template>
-  <transition
-    name="expand"
-    @after-enter="afterEnter"
-    @enter="enter"
-    @leave="leave"
-  >
+  <transition-expand>
     <slot />
-  </transition>
+  </transition-expand>
 </template>
 
-<script>
-/* eslint-disable no-param-reassign */
-// https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
-export default {
-  name: 'WtExpandTransition',
-  methods: {
-    afterEnter(element) {
-      element.style.height = 'auto';
-    },
-    enter(element) {
-      const { width } = getComputedStyle(element);
-      element.style.width = width;
-      element.style.position = 'absolute';
-      element.style.visibility = 'hidden';
-      element.style.height = 'auto';
-
-      const { height } = getComputedStyle(element);
-      element.style.width = null;
-      element.style.position = null;
-      element.style.visibility = null;
-      element.style.height = 0;
-
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      // eslint-disable-next-line no-unused-expressions
-      getComputedStyle(element).height;
-
-      // eslint-disable-next-line no-return-assign
-      requestAnimationFrame(() => element.style.height = height);
-    },
-    leave(element) {
-      const { height } = getComputedStyle(element);
-      element.style.height = height;
-      // eslint-disable-next-line no-unused-expressions
-      getComputedStyle(element).height;
-
-      // eslint-disable-next-line no-return-assign
-      requestAnimationFrame(() => element.style.height = 0);
-    },
-  },
-};
+<script setup>
+import { TransitionExpand } from '@morev/vue-transitions';
 </script>
 
 <style lang="scss">
-.expand-enter-active,
-.expand-leave-active {
-  transition: height var(--transition);
-  overflow: hidden;
-}
 
-.expand-enter,
-.expand-leave-to {
-  height: 0;
-}
-/*
-  // expand animation optimization
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
- */
 </style>

src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -36,6 +36,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+import WtExpandTransition from '../transitions/wt-expand-transition.vue';
 
 const props = defineProps({
   size: {

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

@@ -109,8 +109,8 @@ export default {
       if (this.player) this.player.destroy();
       const controls = [
         'play-large', 'play', 'progress', 'current-time',
-        'mute', 'volume', 'captions', 'settings', 'pip',
-        'airplay', 'fullscreen',
+        'duration', 'mute', 'volume', 'captions', 'settings',
+        'pip', 'airplay', 'fullscreen'
       ];
       if (this.download) controls.push('download');
       this.player = new Plyr(this.$refs.player, {
@@ -186,13 +186,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 {
-        height: var(--plyr-controls-icon-size);
-        width: var(--plyr-controls-icon-size);
-      }
+    .plyr__controls > .plyr__control > svg,
+    .plyr__controls > .plyr__controls__item > .plyr__control > svg {
+      height: var(--plyr-controls-icon-size);
+      width: var(--plyr-controls-icon-size);
     }
 
     .plyr__control--overlaid svg {