@webitel/ui-sdk 26.4.86 → 26.4.88

package/src/components/_shared/settings-panel/settings-panel.vue

@@ -0,0 +1,71 @@
+<template>
+	<wt-popover class="settings-panel">
+		<template #activator="{ toggle }">
+			<media-button class="settings-panel__button" @click="toggle">
+				<wt-icon-btn
+					icon="plyr-settings"
+					:size="ComponentSize.SM"
+				/>
+			</media-button>
+		</template>
+
+		<speed-settings
+			:model-value="modelValue.playbackRate"
+			@update:model-value="handlePlaybackRateUpdate"
+		/>
+	</wt-popover>
+</template>
+
+<script setup lang="ts">
+import { ComponentSize } from '../../../enums';
+import WtPopover from '../../wt-popover/wt-popover.vue';
+import SpeedSettings from './components/speed-settings/speed-settings.vue';
+
+export interface MediaSettings {
+	playbackRate: number;
+}
+
+interface Props {
+	modelValue: MediaSettings;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: () => ({
+		playbackRate: 1,
+	}),
+});
+
+const emit = defineEmits<{
+	'update:modelValue': [
+		value: MediaSettings,
+	];
+}>();
+
+function handlePlaybackRateUpdate(playbackRate: number) {
+	emit('update:modelValue', {
+		...props.modelValue,
+		playbackRate,
+	});
+}
+</script>
+
+<style scoped>
+.settings-panel {
+  display: flex;
+}
+
+/*
+* @author @Oleksandr Palonnyi
+*
+* [WTEL-9163](https://webitel.atlassian.net/browse/WTEL-9163)
+*
+* comment link - https://webitel.atlassian.net/browse/WTEL-9163?focusedCommentId=759364
+*/
+.settings-panel__button {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+  margin: 0 calc(var(--spacing-2xs) * -1);
+  padding: 0 var(--spacing-2xs);
+}
+</style>

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

@@ -42,7 +42,7 @@
 
       <wt-icon
         v-if="icon"
-        :class="{ 'wt-button__icon--hidden': showLoader }"  
+        :class="{ 'wt-button__icon--hidden': showLoader }"
         :icon="icon"
         :icon-prefix="iconPrefix"
         :size="iconButtonSizeMap[size]"
@@ -166,7 +166,7 @@ watch(
 
 <style>
 .wt-button {
-	position: relative;
+  position: relative;
 }
 
 .p-button--with-badge {
@@ -177,9 +177,9 @@ watch(
   display: contents;
 }
 
-/* 
+/*
 	@author HlukhovYe
-	Hides the icon instantly when the loader is shown. 
+	Hides the icon instantly when the loader is shown.
 */
 .wt-button__icon--hidden {
   opacity: 0;

package/src/components/wt-player/src/components/buttons/play-button.vue

@@ -1,6 +1,6 @@
 <template>
   <media-play-button class="play-button">
-    <wt-icon icon="plyr-play"  type="play" class="play-icon" size="sm"/>
+    <wt-icon icon="plyr-play"  type="play" class="play-icon" size="sm" />
     <wt-icon icon="plyr-pause" type="pause" class="pause-icon" size="sm" />
   </media-play-button>
 </template>

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

@@ -0,0 +1,163 @@
+<template>
+  <div class="speed-settings">
+    <div class="speed-settings__controls">
+      <wt-button
+        :size="ComponentSize.SM"
+        :disabled="modelValue <= minSpeed"
+        class="speed-settings__step-button"
+        variant="outlined"
+        color="secondary"
+        @click="handleDecrease"
+      >
+        <template #default>
+          <wt-icon icon="minus" :size="ComponentSize.SM" />
+        </template>
+      </wt-button>
+
+      <span class="speed-settings__label">{{ formattedSpeed }}</span>
+
+      <wt-button
+        :size="ComponentSize.SM"
+        :disabled="modelValue >= maxSpeed"
+        class="speed-settings__step-button"
+        variant="outlined"
+        color="secondary"
+        @click="handleIncrease"
+      >
+        <template #default>
+          <wt-icon icon="plus" :size="ComponentSize.SM" />
+        </template>
+      </wt-button>
+    </div>
+
+    <wt-slider
+      class="speed-settings__slider"
+      :model-value="modelValue"
+      :min="minSpeed"
+      :max="maxSpeed"
+      :step="speedStep"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+
+    <div class="speed-settings__presets">
+      <wt-button
+        v-for="speedPreset in speedPresets"
+        :key="speedPreset.speed"
+        :size="ComponentSize.SM"
+        variant="outlined"
+        class="speed-settings__preset-button"
+        color="secondary"
+        @click="$emit('update:modelValue', speedPreset.speed)"
+      >
+        <template #default>
+          <wt-icon :icon="speedPreset.icon" :size="ComponentSize.SM" />
+        </template>
+      </wt-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { ComponentSize } from '../../../../../enums';
+import WtButton from '../../../../wt-button/wt-button.vue';
+import WtIcon from '../../../../wt-icon/wt-icon.vue';
+import WtSlider from '../../../../wt-slider/wt-slider.vue';
+
+interface Props {
+	modelValue?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: 1,
+});
+
+const emit = defineEmits<{
+	'update:modelValue': [
+		value: number,
+	];
+}>();
+
+const minSpeed = 0.25;
+const maxSpeed = 3;
+const speedStep = 0.25;
+const speedPresets = [
+	{
+		speed: 0.5,
+		icon: 'playback-0.50',
+	},
+	{
+		speed: 0.75,
+		icon: 'playback-0.75',
+	},
+	{
+		speed: 1,
+		icon: 'playback-1.00',
+	},
+	{
+		speed: 1.5,
+		icon: 'playback-1.50',
+	},
+	{
+		speed: 1.75,
+		icon: 'playback-1.75',
+	},
+];
+
+const formattedSpeed = computed(() => `${props.modelValue.toFixed(2)}x`);
+
+function handleDecrease() {
+	const decreasedSpeed = parseFloat((props.modelValue - speedStep).toFixed(2));
+	const clampedSpeed = Math.max(minSpeed, decreasedSpeed);
+	emit('update:modelValue', clampedSpeed);
+}
+
+function handleIncrease() {
+	const increasedSpeed = parseFloat((props.modelValue + speedStep).toFixed(2));
+	const clampedSpeed = Math.min(maxSpeed, increasedSpeed);
+	emit('update:modelValue', clampedSpeed);
+}
+</script>
+
+<style scoped>
+.speed-settings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  min-width: 192px;
+}
+.speed-settings__step-button {
+  min-width: 0;
+  padding: var(--spacing-xs);
+}
+
+.speed-settings__controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+
+.speed-settings__label {
+  font-weight: 600;
+  font-size: var(--font-size-lg, 1rem);
+  text-align: center;
+  flex: 1;
+}
+
+.speed-settings__slider {
+  width: 100%;
+}
+
+.speed-settings__presets {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+}
+
+.speed-settings__preset-button {
+  min-width: 0;
+  padding: var(--spacing-xs);
+}
+</style>

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

@@ -5,6 +5,7 @@
 		:src="normalizedSrcObject"
 		:loop="props.loop"
 		:autoplay="autoplay"
+    :playback-rate="playbackRate"
     @ended="handleEnded"
 	>
 
@@ -18,6 +19,21 @@
 			<mute-button v-if="!props.hideMuteButton" />
 			<volume-slider v-if="!props.hideVolumeSlider" />
 
+			<wt-popover v-if="!props.hideSettings" class="settings-popover">
+				<template #activator="{ toggle }">
+					<media-button class="settings-button" @click="toggle">
+						<wt-icon-btn
+							icon="plyr-settings"
+							:size="ComponentSize.SM"
+						/>
+					</media-button>
+				</template>
+
+				<speed-settings
+					v-model:model-value="playbackRate"
+				/>
+			</wt-popover>
+
 			<media-button
 				v-if="props.download"
 				class="download-button"
@@ -25,7 +41,7 @@
 			>
 				<wt-icon-btn
 					icon="plyr-download"
-					size="sm"
+					:size="ComponentSize.SM"
 				/>
 			</media-button>
 
@@ -36,7 +52,7 @@
 			>
 				<wt-icon-btn
 					icon="close"
-					size="sm"
+					:size="ComponentSize.SM"
 				/>
 			</media-button>
 
@@ -50,14 +66,16 @@
 >
 import 'vidstack/bundle';
 import type { MediaSrc } from 'vidstack';
-import { computed, toRefs } from 'vue';
-
+import { ref, toRefs, watch } from 'vue';
+import { ComponentSize } from '../../enums';
+import WtPopover from '../wt-popover/wt-popover.vue';
 import TimeGroup from '../wt-vidstack-player/components/panels/playback-controls-panel/components/time-group.vue';
 import { useVidstackSrc } from '../wt-vidstack-player/composables/useVidstackSrc';
 import MuteButton from './src/components/buttons/mute-button.vue';
 import PlayButton from './src/components/buttons/play-button.vue';
 import TimeSlider from './src/components/sliders/time-slider.vue';
 import VolumeSlider from './src/components/sliders/volume-slider.vue';
+import SpeedSettings from './src/components/speed-settings/speed-settings.vue';
 
 interface Props {
 	/**
@@ -117,6 +135,12 @@ interface Props {
 	 * @default false
 	 */
 	hideMuteButton?: boolean;
+	/**
+	 * Hide settings button
+	 * @type {boolean}
+	 * @default false
+	 */
+	hideSettings?: boolean;
 	/**
 	 * Shows close button
 	 * @type {boolean}
@@ -141,6 +165,7 @@ const props = withDefaults(defineProps<Props>(), {
 	invertTime: true,
 	hideVolumeSlider: false,
 	hideMuteButton: false,
+	hideSettings: false,
 	resetVolume: false,
 	closable: true,
 	position: 'sticky',
@@ -151,6 +176,8 @@ const emit = defineEmits<{
 	close: [];
 }>();
 
+const playbackRate = ref(1);
+
 const { src: srcRef } = toRefs(props);
 
 const { normalizedSrcObject } = useVidstackSrc({
@@ -183,6 +210,17 @@ function handleEnded(event: Event) {
 	const player = event.target as HTMLMediaElement;
 	player.currentTime = 0;
 }
+
+function resetPlayerSettings() {
+	playerSettings.value.playbackRate = 1;
+}
+
+watch(
+	() => props.src,
+	() => {
+		resetPlayerSettings();
+	},
+);
 </script>
 
 <style scoped>
@@ -204,8 +242,13 @@ function handleEnded(event: Event) {
 	gap: var(--spacing-sm);
 }
 
+.settings-popover {
+  display: flex;
+}
+
 .close-button,
-.download-button {
+.download-button,
+.settings-button {
 	display: flex;
 	align-items: center;
 	cursor: pointer;

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

@@ -71,3 +71,9 @@ defineExpose({
 	hide,
 });
 </script>
+
+<style>
+.p-popover {
+  box-shadow: var(--elevation-5);
+}
+</style>

package/src/locale/es/es.js

@@ -255,15 +255,15 @@ export default {
 				[WebitelMediaExporterExportStatus.Failed]: 'Error',
 			},
 		},
-	},
-	importCSV: 'Importar CSV',
-	CSV: {
-		skipHeaders: 'Omitir encabezados',
-		charSet: 'Conjunto de caracteres',
-		separator: 'Separador',
-		CSVColumn: 'Columna CSV',
-		fieldName: 'Nombre del campo',
-		clearMember: 'Eliminar miembro',
+		importCSV: 'Importar CSV',
+		CSV: {
+			skipHeaders: 'Omitir encabezados',
+			charSet: 'Conjunto de caracteres',
+			separator: 'Separador',
+			CSVColumn: 'Columna CSV',
+			fieldName: 'Nombre del campo',
+			clearMember: 'Eliminar miembro',
+		},
 	},
 	channel: {
 		state: {

package/src/locale/kz/kz.js

@@ -260,15 +260,15 @@ export default {
 				[WebitelMediaExporterExportStatus.Failed]: 'Қате',
 			},
 		},
-	},
-	importCSV: 'CSV импорттау',
-	CSV: {
-		skipHeaders: 'Тақырыптарды өткізіп жіберу',
-		charSet: 'Таңбалар жиыны',
-		separator: 'Бөлгіш',
-		CSVColumn: 'CSV бағаны',
-		fieldName: 'Өріс атауы',
-		clearMember: 'Мүшені тазалау',
+		importCSV: 'CSV импорттау',
+		CSV: {
+			skipHeaders: 'Тақырыптарды өткізіп жіберу',
+			charSet: 'Таңбалар жиыны',
+			separator: 'Бөлгіш',
+			CSVColumn: 'CSV бағаны',
+			fieldName: 'Өріс атауы',
+			clearMember: 'Мүшені тазалау',
+		},
 	},
 	channel: {
 		state: {

package/src/locale/pl/pl.js

@@ -260,15 +260,15 @@ export default {
 				[WebitelMediaExporterExportStatus.Failed]: 'Błąd',
 			},
 		},
-	},
-	importCSV: 'Importuj CSV',
-	CSV: {
-		skipHeaders: 'Pomiń nagłówki',
-		charSet: 'Zestaw znaków',
-		separator: 'Separator',
-		CSVColumn: 'Kolumna CSV',
-		fieldName: 'Nazwa pola',
-		clearMember: 'Wyczyść członka',
+		importCSV: 'Importuj CSV',
+		CSV: {
+			skipHeaders: 'Pomiń nagłówki',
+			charSet: 'Zestaw znaków',
+			separator: 'Separator',
+			CSVColumn: 'Kolumna CSV',
+			fieldName: 'Nazwa pola',
+			clearMember: 'Wyczyść członka',
+		},
 	},
 	channel: {
 		state: {

package/src/locale/ro/ro.js

@@ -260,15 +260,15 @@ export default {
 				[WebitelMediaExporterExportStatus.Failed]: 'Eroare',
 			},
 		},
-	},
-	importCSV: 'Importă CSV',
-	CSV: {
-		skipHeaders: 'Omite anteturile',
-		charSet: 'Set de caractere',
-		separator: 'Separator',
-		CSVColumn: 'Coloană CSV',
-		fieldName: 'Nume câmp',
-		clearMember: 'Șterge membrul',
+		importCSV: 'Importă CSV',
+		CSV: {
+			skipHeaders: 'Omite anteturile',
+			charSet: 'Set de caractere',
+			separator: 'Separator',
+			CSVColumn: 'Coloană CSV',
+			fieldName: 'Nume câmp',
+			clearMember: 'Șterge membrul',
+		},
 	},
 	channel: {
 		state: {

package/src/locale/ru/ru.js

@@ -256,15 +256,15 @@ export default {
 				[WebitelMediaExporterExportStatus.Failed]: 'Ошибка',
 			},
 		},
-	},
-	importCSV: 'Импорт CSV',
-	CSV: {
-		skipHeaders: 'Пропустить заголовки',
-		charSet: 'Кодировка',
-		separator: 'Разделитель',
-		CSVColumn: 'Столбец CSV',
-		fieldName: 'Имя поля',
-		clearMember: 'Очистить участника',
+		importCSV: 'Импорт CSV',
+		CSV: {
+			skipHeaders: 'Пропустить заголовки',
+			charSet: 'Кодировка',
+			separator: 'Разделитель',
+			CSVColumn: 'Столбец CSV',
+			fieldName: 'Имя поля',
+			clearMember: 'Очистить участника',
+		},
 	},
 	channel: {
 		state: {

package/src/locale/uk/uk.js

@@ -255,15 +255,15 @@ export default {
 				[WebitelMediaExporterExportStatus.Failed]: 'Помилка',
 			},
 		},
-	},
-	importCSV: 'Імпорт CSV',
-	CSV: {
-		skipHeaders: 'Пропустити заголовки',
-		charSet: 'Кодування',
-		separator: 'Розділювач',
-		CSVColumn: 'Стовпець CSV',
-		fieldName: 'Назва поля',
-		clearMember: 'Очистити учасника',
+		importCSV: 'Імпорт CSV',
+		CSV: {
+			skipHeaders: 'Пропустити заголовки',
+			charSet: 'Кодування',
+			separator: 'Розділювач',
+			CSVColumn: 'Стовпець CSV',
+			fieldName: 'Назва поля',
+			clearMember: 'Очистити учасника',
+		},
 	},
 	channel: {
 		state: {

package/src/locale/uz/uz.js

@@ -261,15 +261,15 @@ export default {
 				[WebitelMediaExporterExportStatus.Failed]: 'Xatolik',
 			},
 		},
-	},
-	importCSV: 'CSV import qilish',
-	CSV: {
-		skipHeaders: 'Sarlavhalarni o‘tkazib yuborish',
-		charSet: 'Belgilar to‘plami',
-		separator: 'Ajratgich',
-		CSVColumn: 'CSV ustuni',
-		fieldName: 'Maydon nomi',
-		clearMember: 'A’zoni tozalash',
+		importCSV: 'CSV import qilish',
+		CSV: {
+			skipHeaders: 'Sarlavhalarni o‘tkazib yuborish',
+			charSet: 'Belgilar to‘plami',
+			separator: 'Ajratgich',
+			CSVColumn: 'CSV ustuni',
+			fieldName: 'Maydon nomi',
+			clearMember: 'A’zoni tozalash',
+		},
 	},
 	channel: {
 		state: {

package/src/locale/vi/vi.js

@@ -260,15 +260,15 @@ export default {
 				[WebitelMediaExporterExportStatus.Failed]: 'Lỗi',
 			},
 		},
-	},
-	importCSV: 'Nhập CSV',
-	CSV: {
-		skipHeaders: 'Bỏ qua tiêu đề',
-		charSet: 'Bộ ký tự',
-		separator: 'Dấu phân cách',
-		CSVColumn: 'Cột CSV',
-		fieldName: 'Tên trường',
-		clearMember: 'Xóa thành viên',
+		importCSV: 'Nhập CSV',
+		CSV: {
+			skipHeaders: 'Bỏ qua tiêu đề',
+			charSet: 'Bộ ký tự',
+			separator: 'Dấu phân cách',
+			CSVColumn: 'Cột CSV',
+			fieldName: 'Tên trường',
+			clearMember: 'Xóa thành viên',
+		},
 	},
 	channel: {
 		state: {

package/types/components/_shared/settings-panel/settings-panel.vue.d.ts

@@ -0,0 +1,15 @@
+export interface MediaSettings {
+    playbackRate: number;
+}
+interface Props {
+    modelValue: MediaSettings;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: MediaSettings) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: MediaSettings) => any;
+}>, {
+    modelValue: MediaSettings;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/components/wt-player/src/components/speed-settings/speed-settings.vue.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    modelValue?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
+}>, {
+    modelValue: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/components/wt-player/wt-player.vue.d.ts

@@ -58,6 +58,12 @@ interface Props {
      * @default false
      */
     hideMuteButton?: boolean;
+    /**
+     * Hide settings button
+     * @type {boolean}
+     * @default false
+     */
+    hideSettings?: boolean;
     /**
      * Shows close button
      * @type {boolean}
@@ -87,6 +93,7 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     resetOnEnd: boolean;
     hideVolumeSlider: boolean;
     hideMuteButton: boolean;
+    hideSettings: boolean;
     position: string;
     invertTime: boolean;
     resetVolume: boolean;