@webitel/ui-sdk 26.2.115 → 26.2.117

package/src/components/wt-player/src/components/sliders/volume-slide.vue

@@ -0,0 +1,41 @@
+<template>
+  <media-volume-slider class="volume-slider media-slider">
+    <wt-slider class="volume-slider__slider" />
+  </media-volume-slider>
+</template>
+
+<script
+  lang="ts"
+  setup
+>
+import WtSlider from '../../../../wt-slider/wt-slider.vue';
+</script>
+
+<style scoped>
+.volume-slider {
+  display: inline-flex;
+  align-items: center;
+  width: 15%;
+  padding: var(--spacing-xs) 0;
+  cursor: pointer;
+}
+
+.volume-slider:deep(.p-slider-handle) {
+  transform: scale(1.5);
+}
+
+.volume-slider__slider {
+  width: 100%;
+}
+
+.volume-slider:deep(.p-slider-range) {
+  /* set vidstach slider variable to primevue component @author liza-pohrsnichna */
+  width: var(--slider-fill, 0%) !important;
+}
+
+.volume-slider:deep(.p-slider-handle) {
+  /*set vidstach slider variable to primevue component @author liza-pohrsnichna */
+  transition: transform ease var(--transition);
+  inset-inline-start: var(--slider-fill, 0%) !important;
+}
+</style>

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

@@ -3,33 +3,44 @@
 		ref="player"
 		class="wt-player"
 		:class="`wt-player--position-${position}`"
-		:src="src"
+		:src="normalizedSrc"
 		:loop="loop"
 		:autoplay="autoplay"
 	>
-		<media-provider></media-provider>
-		<media-plyr-layout
-			:controls="controls"
-			:download="download"
-			custom-icons
-		>
-			<wt-icon icon="plyr-airplay" slot="airplay-icon" />
-			<wt-icon icon="plyr-captions-off" slot="captions-off-icon" />
-			<wt-icon icon="plyr-captions-on" slot="captions-on-icon" />
-			<wt-icon icon="plyr-download" slot="download-icon" />
-			<wt-icon icon="plyr-enter-fullscreen" slot="enter-fullscreen-icon" />
-			<wt-icon icon="plyr-pip" slot="enter-pip-icon" />
-			<wt-icon icon="plyr-exit-fullscreen" slot="exit-fullscreen-icon" />
-			<wt-icon icon="plyr-pip" slot="exit-pip-icon" />
-			<wt-icon icon="plyr-fast-forward" slot="fast-forward-icon" />
-			<wt-icon icon="plyr-muted" slot="muted-icon" />
-			<wt-icon icon="plyr-pause" slot="pause-icon" />
-			<wt-icon icon="plyr-play" slot="play-icon" />
-			<wt-icon icon="plyr-restart" slot="restart-icon" />
-			<wt-icon icon="plyr-rewind" slot="rewind-icon" />
-			<wt-icon icon="plyr-settings" slot="settings-icon" />
-			<wt-icon icon="plyr-volume" slot="volume-icon" />
-		</media-plyr-layout>
+
+		<media-provider />
+
+		<media-controls-group class="controls-group">
+
+			<play-button />
+			<time-slider />
+			<time-group />
+			<mute-button />
+			<volume-slide />
+
+			<media-button
+				v-if="props.download"
+				class="download-button"
+				@click="downloadMedia"
+			>
+				<wt-icon-btn
+					icon="plyr-download"
+					size="sm"
+				/>
+			</media-button>
+
+			<media-button
+				v-if="props.closable"
+				class="close-button"
+				@click="$emit('close')"
+			>
+				<wt-icon-btn
+					icon="close"
+					size="sm"
+				/>
+			</media-button>
+
+		</media-controls-group>
 	</media-player>
 </template>
 
@@ -38,18 +49,27 @@
 	lang="ts"
 >
 import 'vidstack/bundle';
-
-import type { PlyrControl } from 'vidstack';
+import type { MediaSrc, PlyrControl } from 'vidstack';
 import { computed, onMounted, watch } from 'vue';
 
 import WtIcon from '../wt-icon/wt-icon.vue';
+import TimeGroup from '../wt-vidstack-player/components/panels/media-controls-panel/components/time-group.vue';
+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 VolumeSlide from './src/components/sliders/volume-slide.vue';
 
 interface Props {
 	/**
-	 * Media source URL
+	 * vidstack media src
+	 * @type {MediaSrc}
+	 */
+	src?: MediaSrc;
+	/**
+	 * Media id
 	 * @type {string}
 	 */
-	src?: string;
+	id?: string;
 	/**
 	 * Autoplay media on load
 	 * @type {boolean}
@@ -119,175 +139,91 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-	initialized: []; // todo
-	close: []; // todo
+	initialized: []; // is needed?
+	close: [];
 }>();
 
-const controls = computed<PlyrControl[]>(() => {
-	/**
-	 * order matters!
-	 */
-	let baseControls: PlyrControl[] = [
-		'play',
-		'progress',
-		'mute+volume',
-		'download',
-		'fullscreen',
-		'settings',
-	];
-	if (props.hideDuration) {
-		baseControls = baseControls.filter((control) => control !== 'duration');
-	}
-	if (!props.download) {
-		baseControls = baseControls.filter((control) => control !== 'download');
-	}
-	return baseControls;
-});
+const normalizedSrc = computed(() => {
+	if (!props.src?.type) return props.src;
 
-// todo??
-watch(
-	() => props.src,
-	() => {
-		setupDownload();
-	},
-);
-// todo??
-watch(
-	() => props.download,
-	() => {
-		setupDownload();
-	},
-);
+	const type = handleVidstackUnsupportedAudioTypes(props.src.type);
 
-onMounted(() => {
-	// this.setupPlayer();
+	return {
+		src: props.src.src,
+		type,
+	};
 });
 
-async function setupPlayer() {
-	if (props.resetVolume) makeVolumeReset();
-	if (props.download) setupDownload();
-
-	if (props.closable) appendCloseIcon();
-	emit('initialized', player.value);
+// https://github.com/vidstack/player/issues/1453
+function handleVidstackUnsupportedAudioTypes(mimeType: string): AudioMimeType {
+	const unsupportedTypes = [
+		'audio/wav',
+	];
+	return unsupportedTypes.includes(mimeType)
+		? 'audio/mp3'
+		: (mimeType as AudioMimeType);
 }
 
-function makeVolumeReset() {
-	if (player.value) {
-		player.value.volume = 1;
-		player.value.muted = false;
-	}
-}
+function downloadMedia() {
+	const src = typeof props.src === 'string' ? props.src : props.src?.src;
 
-function setupDownload() {
-	if (!props.download) {
-		setupPlayer();
-	} else if (player.value) {
-		if (typeof props.download === 'string') {
-			player.value.download = props.download;
-		} else if (typeof props.download === 'function') {
-			player.value.download = props.download(props.src || '');
-		}
-	}
-}
+	const url =
+		typeof props.download === 'function' ? props.download(src) : props.download;
 
-function appendCloseIcon() {
-	// Note: $refs would need to be accessed via template refs in Composition API
-	// const plyrControls = playerRef.value?.plyr?.elements?.controls;
-	// const closeIcon = closeIconRef.value?.$el;
-	// if (plyrControls) {
-	// 	plyrControls.append(closeIcon);
-	// }
+	const ext = props.src?.type.split('/').pop();
+
+	const filename = props.id || 'unknown';
+
+	// download with [a] tag el
+	const link = document.createElement('a');
+	link.style.display = 'none';
+	link.href = url;
+	link.download = `${filename}.${ext}`;
+	document.body.appendChild(link);
+	link.click();
+	document.body.removeChild(link);
 }
 </script>
 
 <style scoped>
 .wt-player {
-	bottom: 60px;
-}
-
-.wt-player--position-sticky {
-	position: sticky;
-	z-index: 2;
-}
-
-.wt-player--position-relative {
-	position: relative;
-	bottom: unset;
-}
-
-.wt-player--position-static {
-	position: static;
-}
-
-.wt-player :deep(.plyr) {
+	width: auto;
+	max-width: 100%;
 	box-shadow: var(--elevation-10);
 	border-radius: var(--border-radius);
-	max-width: 100%;
-}
-
-.wt-player :deep(.plyr__controls > .plyr__control),
-.wt-player :deep(.plyr__controls > .plyr__controls__item > .plyr__control) {
-	padding: var(--plyr-controls-icon-padding);
-}
-
-.wt-player :deep(.plyr__controls > .plyr__control > svg),
-.wt-player :deep(.plyr__controls > .plyr__controls__item > .plyr__control > svg) {
-	width: var(--plyr-controls-icon-size);
-	height: var(--plyr-controls-icon-size);
+	background: var(--wt-popup-background-color);
+	z-index: 2;
 }
 
-.wt-player :deep(.plyr__control--overlaid svg) {
-	left: 0;
-	/* reset plyr style for video "play" button icon */
+.controls-group {
+	padding: var(--spacing-sm);
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-self: center;
+	gap: var(--spacing-sm);
 }
 
-.wt-player :deep(.plyr__progress input),
-.wt-player :deep(.plyr__volume input) {
+.close-button,
+.download-button {
+	display: flex;
+	align-items: center;
 	cursor: pointer;
 }
 
-.wt-player :deep(.plyr__progress__buffer) {
-	background: var(--wt-player-audio-progress-background);
+.wt-player--position-fixed {
+	position: fixed;
 }
 
-.wt-player :deep(.plyr__progress input)::-webkit-slider-thumb,
-.wt-player :deep(.plyr__volume input)::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	transition: var(--transition);
-	border: var(--wt-slider-border);
-	border-radius: var(--wt-slider-pointer-radius);
-	background: var(--wt-slider-pointer-background-color);
-}
-
-.wt-player :deep(.plyr__progress input)::-webkit-slider-runnable-track,
-.wt-player :deep(.plyr__volume input)::-webkit-slider-runnable-track {
-	-webkit-appearance: none;
-}
-
-.wt-player :deep(.plyr__progress input)::-moz-range-thumb,
-.wt-player :deep(.plyr__volume input)::-moz-range-thumb {
-	-moz-appearance: none;
-	transition: var(--transition);
-	border: var(--wt-slider-border);
-	border-color: var(--wt-slider-pointer-border-color);
-	border-radius: var(--wt-slider-pointer-radius);
-	background: var(--wt-slider-pointer-background-color);
-	width: var(--wt-slider-pointer-size);
-	height: var(--wt-slider-pointer-size);
-}
-
-.wt-player :deep(.plyr__progress input)::-moz-range-track,
-.wt-player :deep(.plyr__volume input)::-moz-range-track {
-	-moz-appearance: none;
+.wt-player--position-sticky {
+	position: sticky;
 }
 
-.wt-player :deep(.plyr__progress input)::-ms-thumb,
-.wt-player :deep(.plyr__volume input)::-ms-thumb {
-	appearance: none;
+.wt-player--position-relative {
+	position: relative;
 }
 
-.wt-player :deep(.plyr__progress input)::-ms-track,
-.wt-player :deep(.plyr__volume input)::-ms-track {
-	appearance: none;
+.wt-player--position-static {
+	position: static;
 }
 </style>

package/src/components/wt-vidstack-player/components/panels/media-controls-panel/components/sliders/time-slider.vue

@@ -4,7 +4,10 @@
   </media-time-slider>
 </template>
 
-<script lang="ts" setup>
+<script
+  lang="ts"
+  setup
+>
 import WtSlider from '../../../../../../../components/wt-slider/wt-slider.vue';
 </script>
 
@@ -29,12 +32,12 @@ import WtSlider from '../../../../../../../components/wt-slider/wt-slider.vue';
 }
 
 .time-slider:deep(.p-slider-range) {
-  /* set vidstach slider variable to primeview component @author liza-pohrsnichna */
+  /* set vidstach slider variable to primevue component @author liza-pohrsnichna */
   width: var(--slider-fill, 0%) !important;
 }
 
 .time-slider:deep(.p-slider-handle) {
-  /*set vidstach slider variable to primeview component @author liza-pohrsnichna */
+  /*set vidstach slider variable to primevue component @author liza-pohrsnichna */
   transition: transform ease var(--transition);
   inset-inline-start: var(--slider-fill, 0%) !important;
 }

package/src/components/wt-vidstack-player/components/panels/media-controls-panel/components/time-group.vue

@@ -6,7 +6,8 @@
   </div>
 </template>
 
-<style  scoped>.time-group {
+<style  scoped>
+.time-group {
 font-family: 'Montserrat', monospace;
   font-size: 12px;
   font-weight: 400;

package/types/components/wt-player/src/components/buttons/mute-button.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/components/wt-player/src/components/sliders/time-slider.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/components/wt-player/src/components/sliders/volume-slide.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, 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

@@ -1,10 +1,16 @@
 import 'vidstack/bundle';
+import type { MediaSrc } from 'vidstack';
 interface Props {
     /**
-     * Media source URL
+     * vidstack media src
+     * @type {MediaSrc}
+     */
+    src?: MediaSrc;
+    /**
+     * Media id
      * @type {string}
      */
-    src?: string;
+    id?: string;
     /**
      * Autoplay media on load
      * @type {boolean}

package/dist/wt-player-C01Lo5pu.js

@@ -1,134 +0,0 @@
-import { defineComponent as y, computed as m, watch as r, onMounted as w, createElementBlock as v, openBlock as B, normalizeClass as g, createElementVNode as s, createVNode as o } from "vue";
-import { E as e, _ as x } from "./install-oaxyJuzb.js";
-const V = ["src", "loop", "autoplay"], _ = ["controls", "download"], b = /* @__PURE__ */ y({
-  __name: "wt-player",
-  props: {
-    src: {},
-    autoplay: { type: Boolean, default: !0 },
-    loop: { type: Boolean, default: !1 },
-    hideDuration: { type: Boolean, default: !1 },
-    download: { type: [String, Function, Boolean], default: () => (t) => t.replace("/stream", "/download") },
-    resetOnEnd: { type: Boolean, default: !1 },
-    invertTime: { type: Boolean, default: !0 },
-    resetVolume: { type: Boolean, default: !1 },
-    closable: { type: Boolean, default: !0 },
-    position: { default: "sticky" }
-  },
-  emits: ["initialized", "close"],
-  setup(t, { emit: c }) {
-    const l = t, p = c, d = m(() => {
-      let n = [
-        "play",
-        "progress",
-        "mute+volume",
-        "download",
-        "fullscreen",
-        "settings"
-      ];
-      return l.hideDuration && (n = n.filter((a) => a !== "duration")), l.download || (n = n.filter((a) => a !== "download")), n;
-    });
-    r(
-      () => l.src,
-      () => {
-        i();
-      }
-    ), r(
-      () => l.download,
-      () => {
-        i();
-      }
-    ), w(() => {
-    });
-    async function u() {
-      l.resetVolume && f(), l.download && i(), l.closable, p("initialized", player.value);
-    }
-    function f() {
-      player.value && (player.value.volume = 1, player.value.muted = !1);
-    }
-    function i() {
-      l.download ? player.value && (typeof l.download == "string" ? player.value.download = l.download : typeof l.download == "function" && (player.value.download = l.download(l.src || ""))) : u();
-    }
-    return (n, a) => (B(), v("media-player", {
-      ref: "player",
-      class: g(["wt-player", `wt-player--position-${t.position}`]),
-      src: t.src,
-      loop: t.loop,
-      autoplay: t.autoplay
-    }, [
-      a[0] || (a[0] = s("media-provider", null, null, -1)),
-      s("media-plyr-layout", {
-        controls: d.value,
-        download: t.download,
-        "custom-icons": ""
-      }, [
-        o(e, {
-          icon: "plyr-airplay",
-          slot: "airplay-icon"
-        }),
-        o(e, {
-          icon: "plyr-captions-off",
-          slot: "captions-off-icon"
-        }),
-        o(e, {
-          icon: "plyr-captions-on",
-          slot: "captions-on-icon"
-        }),
-        o(e, {
-          icon: "plyr-download",
-          slot: "download-icon"
-        }),
-        o(e, {
-          icon: "plyr-enter-fullscreen",
-          slot: "enter-fullscreen-icon"
-        }),
-        o(e, {
-          icon: "plyr-pip",
-          slot: "enter-pip-icon"
-        }),
-        o(e, {
-          icon: "plyr-exit-fullscreen",
-          slot: "exit-fullscreen-icon"
-        }),
-        o(e, {
-          icon: "plyr-pip",
-          slot: "exit-pip-icon"
-        }),
-        o(e, {
-          icon: "plyr-fast-forward",
-          slot: "fast-forward-icon"
-        }),
-        o(e, {
-          icon: "plyr-muted",
-          slot: "muted-icon"
-        }),
-        o(e, {
-          icon: "plyr-pause",
-          slot: "pause-icon"
-        }),
-        o(e, {
-          icon: "plyr-play",
-          slot: "play-icon"
-        }),
-        o(e, {
-          icon: "plyr-restart",
-          slot: "restart-icon"
-        }),
-        o(e, {
-          icon: "plyr-rewind",
-          slot: "rewind-icon"
-        }),
-        o(e, {
-          icon: "plyr-settings",
-          slot: "settings-icon"
-        }),
-        o(e, {
-          icon: "plyr-volume",
-          slot: "volume-icon"
-        })
-      ], 8, _)
-    ], 10, V));
-  }
-}), E = /* @__PURE__ */ x(b, [["__scopeId", "data-v-0789b80f"]]);
-export {
-  E as default
-};