@webitel/ui-sdk 24.2.58 → 24.2.60

package/package.json

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

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

@@ -73,7 +73,7 @@
 
 <script setup>
 import {
-  ref, computed, useSlots, onMounted,
+  ref, computed, useSlots, onMounted, toRefs,
 } from 'vue';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
 
@@ -180,11 +180,15 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue', 'input', 'keyup']);
 
 const slots = useSlots();
+
+// https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3
+const { v, customValidators } = toRefs(props);
+
 const {
   isValidation,
   invalid,
   validationText,
-} = useValidation({ v: props.v, customValidators: props.customValidators });
+} = useValidation({ v, customValidators });
 
 // toggles password <-> text at showPassword
 const inputType = ref('');

package/src/components/wt-player/_variables.scss

@@ -3,7 +3,8 @@
   --plyr-audio-control-color: var(--icon-color);
   --plyr-audio-control-color-hover: var(--icon-btn-hover-color);
   --plyr-audio-controls-background: var(--content-wrapper-color);
-  --plyr-control-icon-size: var(--icon-md-size);
+  --plyr-controls-icon-size: var(--icon-sm-size);
+  --plyr-controls-icon-padding: var(--spacing-2xs);
   --plyr-audio-control-background-hover: transparent;
   --plyr-audio-progress-buffered-background: var(--dp-14-surface-color); // loaded color
   --wt-player-audio-progress-background: var(--wt-slider-background-color); // not played color

package/src/components/wt-player/scripts/__tests__/createPlyrURL.spec.js

@@ -0,0 +1,31 @@
+import createPlyrURL from '../createPlyrURL';
+
+describe('createPlyrURL', () => {
+  it('baseURL equals to "/"', () => {
+    const baseURL = '/';
+    const iconURL = '/img/plyr.svg';
+    expect(createPlyrURL(baseURL))
+    .toBe(iconURL);
+  });
+
+  it('baseURL starts with "/"', () => {
+    const baseURL = '/workspace';
+    const iconURL = '/workspace/img/plyr.svg';
+    expect(createPlyrURL(baseURL))
+    .toBe(iconURL);
+  });
+
+  it('baseURL starts and ends with "/"', () => {
+    const baseURL = '/workspace/';
+    const iconURL = '/workspace/img/plyr.svg';
+    expect(createPlyrURL(baseURL))
+    .toBe(iconURL);
+  });
+
+  it('Empty baseURL', () => {
+    const baseURL = '';
+    const iconURL = '/img/plyr.svg';
+    expect(createPlyrURL(baseURL))
+    .toBe(iconURL);
+  });
+});

package/src/components/wt-player/scripts/createPlyrURL.js

@@ -0,0 +1,11 @@
+function createPlyrURL(baseURL) {
+  // Check if baseURL is exactly "/" and adjust it to an empty string
+  let normalizedBaseURL = baseURL === "/" ? "" : baseURL;
+
+  // Ensure there is no trailing slash in normalizedBaseURL to prevent double slashes
+  normalizedBaseURL = normalizedBaseURL.endsWith('/') ? normalizedBaseURL.slice(0, -1) : normalizedBaseURL;
+
+  // Construct iconUrl
+  return `${normalizedBaseURL}/img/plyr.svg`;
+}
+export default createPlyrURL;

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

@@ -27,6 +27,7 @@
 <script>
 import Plyr from 'plyr';
 import 'plyr/src/sass/plyr.scss';
+import createPlyrURL from './scripts/createPlyrURL';
 
 export default {
   name: 'WtPlayer',
@@ -104,6 +105,7 @@ export default {
     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 || import.meta.env.BASE_URL;
+      const iconUrl = createPlyrURL(baseURL);
       if (this.player) this.player.destroy();
       const controls = [
         'play-large', 'play', 'progress', 'current-time',
@@ -117,7 +119,7 @@ export default {
         loadSprite: false,
         resetOnEnd: this.resetOnEnd,
         invertTime: this.invertTime,
-        iconUrl: `${baseURL}img/plyr.svg`,
+        iconUrl,
         controls,
         loop: {
           active: this.loop,
@@ -184,6 +186,15 @@ export default {
       box-shadow: var(--elevation-10);
     }
 
+    .plyr__controls .plyr__control {
+      padding: var(--plyr-controls-icon-padding);
+
+      svg {
+        height: var(--plyr-controls-icon-size);
+        width: var(--plyr-controls-icon-size);
+      }
+    }
+
     .plyr__control--overlaid svg {
       left: 0; // reset plyr style for video "play" button icon
     }