@webitel/ui-sdk 26.2.126 → 26.2.127

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.2.126",
+	"version": "26.2.127",
 	"private": false,
 	"scripts": {
 		"make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run biome:format:all || true) && npm run publish-lib",

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

@@ -2,7 +2,7 @@
 	<media-player
 		class="wt-player"
 		:class="`wt-player--position-${props.position}`"
-		:src="normalizedSrc"
+		:src="normalizedSrcObject"
 		:loop="props.loop"
 		:autoplay="autoplay"
     @ended="handleEnded"
@@ -49,10 +49,11 @@
 	lang="ts"
 >
 import 'vidstack/bundle';
-import type { AudioMimeType, MediaSrc } from 'vidstack';
-import { computed, useTemplateRef } from 'vue';
+import type { MediaSrc } from 'vidstack';
+import { computed, toRefs } from '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';
@@ -135,31 +136,13 @@ const emit = defineEmits<{
 	initialized: []; // is needed?
 	close: [];
 }>();
-const normalizedSrc = computed(() => {
-	if (!props.src?.type) return props.src;
 
-	const type = handleVidstackUnsupportedAudioTypes(props.src.type);
+const { src: srcRef } = toRefs(props);
 
-	return {
-		src: props.src.src,
-		type,
-	};
+const { normalizedSrcObject } = useVidstackSrc({
+	src: srcRef,
 });
 
-/**
- * https://webitel.atlassian.net/browse/WTEL-8723?focusedCommentId=733255
- * 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 downloadMedia() {
 	const src = typeof props.src === 'string' ? props.src : props.src?.src;
 

package/src/components/wt-vidstack-player/composables/useVidstackSrc.ts

@@ -0,0 +1,111 @@
+import {
+	isAudioSrc as vidstackNativeIsAudioCheck,
+	isVideoSrc as vidstackNativeIsVideoCheck,
+} from 'vidstack';
+import { computed, toRef } from 'vue';
+
+export const useVidstackSrc = ({ src, type, stream }) => {
+	const srcRef = toRef(src);
+	const typeRef = toRef(type);
+	const streamRef = toRef(stream);
+
+	const normalizedType = computed(() => {
+		if (streamRef.value) return 'video/object';
+
+		return typeRef.value || srcRef.value?.type;
+	});
+
+	const normalizedSrcValue = computed(() => {
+		if (streamRef.value) return streamRef.value;
+
+		return typeof srcRef.value === 'string' ? srcRef.value : srcRef.value?.src;
+	});
+
+	const normalizedSrcObject = computed(() => {
+		return normalizeVidstackMediaSrc({
+			src: normalizedSrcValue.value,
+			type: normalizedType.value,
+		});
+	});
+
+	return {
+		normalizedSrcObject,
+	};
+};
+
+/**
+ * https://webitel.atlassian.net/browse/WTEL-8723?focusedCommentId=733255
+ * https://github.com/vidstack/player/issues/1453
+ *
+ * vidstack doesn't recognize some audio/video types as audio/video,
+ * so we need to normalize them to default audio/video formats
+ *
+ * for instance, type: "audio/wav" won't be recognized as audio by vidstack,
+ * so we need to fallback it to "audio/mp3"
+ */
+export function normalizeVidstackMediaSrc({
+	src,
+	type,
+}: {
+	src: string | unknown; // "string" for url, "unknown" for JS objects like MediaStream or Blob
+	type: string;
+}) {
+	// if vidstack parses src and type correctly, no need to normalize
+	if (
+		vidstackNativeIsAudioCheck({
+			src,
+			type,
+		}) ||
+		vidstackNativeIsVideoCheck({
+			src,
+			type,
+		})
+	) {
+		return {
+			src,
+			type,
+		};
+	}
+
+	// handle "video/object" or "audio/object" types
+	if (
+		isObjectSrcType({
+			src,
+			type,
+		})
+	) {
+		return {
+			src,
+			type,
+		};
+	}
+
+	// normalize to default audio format, if vidstack doesn't recognize this type as audio
+	if (type.includes('audio')) {
+		return {
+			src,
+			type: 'audio/mp3',
+		};
+	}
+
+	// normalize to default video format, if vidstack doesn't recognize this type as video
+	if (type.includes('video')) {
+		return {
+			src,
+			type: 'video/mp4',
+		};
+	}
+
+	// unknown. hz, ebites' sami
+	return {
+		src,
+		type,
+	};
+}
+
+/**
+ * "video/object" or "audio/object" types represent JS objects like MediaStream or file Blob
+ */
+function isObjectSrcType({ src, type }: { src: unknown; type: string }) {
+	return type.includes('/object');
+}

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

@@ -13,7 +13,7 @@
       ref="player"
       :autoplay="props.autoplay"
       :muted="props.muted"
-      :src="normalizedSrc"
+      :src="normalizedSrcObject"
       class="wt-vidstack-player__player"
       cross-origin
       playsinline
@@ -48,18 +48,15 @@
 <script lang="ts" setup>
 import 'vidstack/player';
 import 'vidstack/player/ui';
-import { computed, provide, ref } from 'vue';
+import type { MediaSrc } from 'vidstack';
+import { computed, provide, ref, toRefs } from 'vue';
 
 import { ComponentSize } from '../../enums';
 import { VideoLayout } from './components';
+import { useVidstackSrc } from './composables/useVidstackSrc';
 
 interface Props {
-	src?:
-		| string
-		| {
-				src: string;
-				type?: string;
-		  };
+	src?: MediaSrc;
 	mime?: string;
 	autoplay?: boolean;
 	muted?: boolean;
@@ -114,39 +111,12 @@ provide('size', {
 	changeSize,
 });
 
-const normalizedType = computed(() => {
-	// https://vidstack.io/docs/wc/player/core-concepts/loading/?styling=css#source-types
-	if (props.mime) return props.mime;
+const { src: srcRef, type: typeRef, stream: streamRef } = toRefs(props);
 
-	if (typeof props.src === 'string') {
-		if (props.src.includes('media')) return 'audio/mp3';
-		if (props.src.includes('mp3')) return 'audio/mp3';
-		if (props.src.includes('ogg') || props.src.includes('oga'))
-			return 'audio/ogg';
-	}
-
-	return 'video/mp4';
-});
-
-const normalizedSrc = computed(() => {
-	if (props.stream) {
-		return {
-			src: props.stream,
-			type: 'video/object',
-		};
-	}
-
-	if (typeof props.src === 'string') {
-		return {
-			src: props.src,
-			type: normalizedType.value,
-		};
-	}
-
-	return {
-		src: props.src?.src || null,
-		type: props.src?.type || normalizedType.value,
-	};
+const { normalizedSrcObject } = useVidstackSrc({
+	src: srcRef,
+	type: typeRef,
+	stream: streamRef,
 });
 
 const onCanPlay = (ev: Event) => {

package/types/components/wt-vidstack-player/composables/useVidstackSrc.d.ts

@@ -0,0 +1,27 @@
+export declare const useVidstackSrc: ({ src, type, stream }: {
+    src: any;
+    type: any;
+    stream: any;
+}) => {
+    normalizedSrcObject: import("vue").ComputedRef<{
+        src: unknown;
+        type: string;
+    }>;
+};
+/**
+ * https://webitel.atlassian.net/browse/WTEL-8723?focusedCommentId=733255
+ * https://github.com/vidstack/player/issues/1453
+ *
+ * vidstack doesn't recognize some audio/video types as audio/video,
+ * so we need to normalize them to default audio/video formats
+ *
+ * for instance, type: "audio/wav" won't be recognized as audio by vidstack,
+ * so we need to fallback it to "audio/mp3"
+ */
+export declare function normalizeVidstackMediaSrc({ src, type, }: {
+    src: string | unknown;
+    type: string;
+}): {
+    src: unknown;
+    type: string;
+};

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

@@ -1,11 +1,9 @@
 import 'vidstack/player';
 import 'vidstack/player/ui';
+import type { MediaSrc } from 'vidstack';
 import { ComponentSize } from '../../enums';
 interface Props {
-    src?: string | {
-        src: string;
-        type?: string;
-    };
+    src?: MediaSrc;
     mime?: string;
     autoplay?: boolean;
     muted?: boolean;

package/dist/time-group-CkVy2t63.js

@@ -1,25 +0,0 @@
-import { defineComponent as p, createElementBlock as t, openBlock as o, Fragment as i, createElementVNode as n, createTextVNode as s } from "vue";
-import { _ as d } from "./install-In0YqDcO.js";
-const a = { class: "time-group" }, u = {
-  key: 0,
-  type: "current",
-  remainder: ""
-}, l = /* @__PURE__ */ p({
-  __name: "time-group",
-  props: {
-    countdown: { type: Boolean, default: !1 }
-  },
-  setup(r) {
-    const m = r;
-    return (c, e) => (o(), t("div", a, [
-      m.countdown ? (o(), t("media-time", u)) : (o(), t(i, { key: 1 }, [
-        e[0] || (e[0] = n("media-time", { type: "current" }, null, -1)),
-        e[1] || (e[1] = s(" / ", -1)),
-        e[2] || (e[2] = n("media-time", { type: "duration" }, null, -1))
-      ], 64))
-    ]));
-  }
-}), y = /* @__PURE__ */ d(l, [["__scopeId", "data-v-c80a48e6"]]);
-export {
-  y as T
-};

package/dist/wt-player-CrLSS40S.js

@@ -1,138 +0,0 @@
-import { resolveComponent as f, createElementBlock as a, openBlock as l, createVNode as o, defineComponent as u, computed as k, normalizeClass as B, createElementVNode as _, createBlock as z, createCommentVNode as p } from "vue";
-import { T as C } from "./time-group-CkVy2t63.js";
-import { _ as r, E as y } from "./install-In0YqDcO.js";
-import { _ as w } from "./wt-slider.vue_vue_type_script_setup_true_lang-DlaRDHxo.js";
-const E = {}, T = { class: "mute-button" };
-function x(s, d) {
-  const e = f("wt-icon");
-  return l(), a("media-mute-button", T, [
-    o(e, {
-      type: "mute",
-      icon: "plyr-muted",
-      class: "mute-icon",
-      size: "sm"
-    }),
-    o(e, {
-      type: "volume",
-      icon: "plyr-volume",
-      class: "volume-icon",
-      size: "sm"
-    })
-  ]);
-}
-const V = /* @__PURE__ */ r(E, [["render", x], ["__scopeId", "data-v-8394e2c8"]]), S = { class: "play-button" }, g = /* @__PURE__ */ u({
-  __name: "play-button",
-  setup(s) {
-    return (d, e) => (l(), a("media-play-button", S, [
-      o(y, {
-        icon: "plyr-play",
-        type: "play",
-        class: "play-icon",
-        size: "sm"
-      }),
-      o(y, {
-        icon: "plyr-pause",
-        type: "pause",
-        class: "pause-icon",
-        size: "sm"
-      })
-    ]));
-  }
-}), I = /* @__PURE__ */ r(g, [["__scopeId", "data-v-e79e3bf5"]]), M = { class: "time-slider media-slider" }, N = /* @__PURE__ */ u({
-  __name: "time-slider",
-  setup(s) {
-    return (d, e) => (l(), a("media-time-slider", M, [
-      o(w, { class: "time-slider__slider" })
-    ]));
-  }
-}), O = /* @__PURE__ */ r(N, [["__scopeId", "data-v-e57a9871"]]), P = { class: "volume-slider media-slider" }, A = /* @__PURE__ */ u({
-  __name: "volume-slider",
-  setup(s) {
-    return (d, e) => (l(), a("media-volume-slider", P, [
-      o(w, { class: "volume-slider__slider" })
-    ]));
-  }
-}), F = /* @__PURE__ */ r(A, [["__scopeId", "data-v-b92a4daf"]]), G = ["src", "loop", "autoplay"], U = { class: "controls-group" }, j = /* @__PURE__ */ u({
-  __name: "wt-player",
-  props: {
-    src: {},
-    id: {},
-    autoplay: { type: Boolean, default: !0 },
-    loop: { type: Boolean, default: !1 },
-    download: { type: [String, Function, Boolean], default: () => (s) => s.replace("/stream", "/download") },
-    resetOnEnd: { type: Boolean, default: !1 },
-    countdownTimeMode: { type: Boolean },
-    hideVolumeSlider: { type: Boolean, default: !1 },
-    closable: { type: Boolean, default: !0 },
-    position: { default: "sticky" }
-  },
-  emits: ["initialized", "close"],
-  setup(s, { emit: d }) {
-    const e = s, v = k(() => {
-      if (!e.src?.type) return e.src;
-      const t = b(e.src.type);
-      return {
-        src: e.src.src,
-        type: t
-      };
-    });
-    function b(t) {
-      return [
-        "audio/wav"
-      ].includes(t) ? "audio/mp3" : t;
-    }
-    function $() {
-      const t = typeof e.src == "string" ? e.src : e.src?.src, n = typeof e.download == "function" ? e.download(t) : e.download, i = e.src?.type.split("/").pop(), m = e.id || "unknown", c = document.createElement("a");
-      c.style.display = "none", c.href = n, c.download = `${m}.${i}`, document.body.appendChild(c), c.click(), document.body.removeChild(c);
-    }
-    function h(t) {
-      if (!e.resetOnEnd) return;
-      const n = t.target;
-      n.currentTime = 0;
-    }
-    return (t, n) => {
-      const i = f("wt-icon-btn");
-      return l(), a("media-player", {
-        class: B(["wt-player", `wt-player--position-${e.position}`]),
-        src: v.value,
-        loop: e.loop,
-        autoplay: s.autoplay,
-        onEnded: h
-      }, [
-        n[1] || (n[1] = _("media-provider", null, null, -1)),
-        _("media-controls-group", U, [
-          o(I),
-          o(O),
-          o(C, {
-            countdown: e.countdownTimeMode
-          }, null, 8, ["countdown"]),
-          o(V),
-          e.hideVolumeSlider ? p("", !0) : (l(), z(F, { key: 0 })),
-          e.download ? (l(), a("media-button", {
-            key: 1,
-            class: "download-button",
-            onClick: $
-          }, [
-            o(i, {
-              icon: "plyr-download",
-              size: "sm"
-            })
-          ])) : p("", !0),
-          e.closable ? (l(), a("media-button", {
-            key: 2,
-            class: "close-button",
-            onClick: n[0] || (n[0] = (m) => t.$emit("close"))
-          }, [
-            o(i, {
-              icon: "close",
-              size: "sm"
-            })
-          ])) : p("", !0)
-        ])
-      ], 42, G);
-    };
-  }
-}), K = /* @__PURE__ */ r(j, [["__scopeId", "data-v-efd4654a"]]);
-export {
-  K as default
-};