@webitel/ui-sdk 26.4.78 → 26.6.2

package/package.json

@@ -1,9 +1,8 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.4.78",
+	"version": "26.6.2",
 	"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",
 		"dev": "npm run docs:dev",
 		"build": "vite build",
 		"test:unit": "vitest run",
@@ -173,6 +172,15 @@
 		"npm": "11",
 		"node": "v24"
 	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/webitel/webitel-ui-sdk"
+	},
+	"keywords": [
+		"webitel",
+		"ui-sdk"
+	],
+	"author": "webitel",
 	"exports": {
 		".": {
 			"types": "./types/install.d.ts",

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

@@ -96,8 +96,12 @@ const emit = defineEmits<{
 	];
 }>();
 
-// const player = useTemplateRef<MediaPlayerElement>('player');
 const rootEl = useTemplateRef<HTMLElement>('root');
+
+defineExpose({
+	rootEl,
+});
+
 const size = ref(props.size || ComponentSize.SM);
 const fullscreen = ref(false);
 
@@ -138,10 +142,50 @@ const rootClasses = computed(() => [
 	props.hideBackground && 'wt-vidstack-player--hide-background',
 ]);
 
+/**
+ * @author @Palonnyi Oleksandr
+ * Document Picture-in-Picture (PiP) autoplay support.
+ * [WTEL-9414](https://webitel.atlassian.net/browse/WTEL-9414)
+ *
+ * When the player moves into a PiP window, Vidstack re-initialises inside a
+ * new Document context.  Its internal request manager can then block autoplay
+ * even for muted media.  To work around this we locate the native `<video>`
+ * and call `play()` on it directly — the browser always permits muted autoplay.
+ *
+ * `findNativeVideoElement` is needed because `querySelector('video')` does not cross
+ * shadow-DOM boundaries; Vidstack renders `<video>` inside `<media-provider>`'s
+ * shadow root, so we walk the tree manually and pierce each shadow root we meet.
+ * Technique: https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot
+ */
+const findNativeVideoElement = (
+	root: Element | ShadowRoot,
+): HTMLVideoElement | null => {
+	if (root instanceof HTMLVideoElement) return root;
+
+	const shadowChildren =
+		root instanceof Element && root.shadowRoot
+			? Array.from(root.shadowRoot.children)
+			: [];
+	const lightChildren = Array.from(root.children ?? []);
+
+	for (const child of [
+		...shadowChildren,
+		...lightChildren,
+	]) {
+		const found = findNativeVideoElement(child);
+		if (found) return found;
+	}
+
+	return null;
+};
+
 const onCanPlay = (ev: Event) => {
 	if (!props.autoplay) return;
-
-	(ev.target as HTMLMediaElement)?.play();
+	const video = findNativeVideoElement(ev.target as Element);
+	const playPromise = (video ?? (ev.target as HTMLMediaElement)).play?.();
+	if (playPromise && typeof playPromise.catch === 'function') {
+		playPromise.catch(() => {});
+	}
 };
 </script>
 

package/src/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/bridgeCustomElements.ts

@@ -0,0 +1,32 @@
+/**
+ * @author @PalonnyiOleksandr
+ *
+ * [WTEL-9414](https://webitel.atlassian.net/browse/WTEL-9414)
+ *
+ * Registers custom elements from the main window into the Document PiP window.
+ * Walks the source DOM tree, collects all hyphenated tag names, and defines
+ * any missing constructors in the target window's custom element registry.
+ */
+import { domTraversal } from './domTraversal';
+
+export const bridgeCustomElements = (root: Element, targetWindow: Window) => {
+	const tags = new Set<string>();
+	domTraversal(root, (el) => {
+		const tag = el.tagName.toLowerCase();
+		if (tag.includes('-')) tags.add(tag);
+	});
+
+	for (const tag of tags) {
+		const customElementConstructor = window.customElements.get(tag);
+		if (!customElementConstructor || targetWindow.customElements.get(tag))
+			continue;
+		try {
+			targetWindow.customElements.define(
+				tag,
+				customElementConstructor as CustomElementConstructor,
+			);
+		} catch (err) {
+			console.warn('[document PiP] custom element bridge failed', tag, err);
+		}
+	}
+};

package/src/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/copyStyles.ts

@@ -0,0 +1,18 @@
+export const copyStyles = (targetWindow: Window) => {
+	for (const sheet of Array.from(document.styleSheets)) {
+		try {
+			const style = targetWindow.document.createElement('style');
+			style.textContent = Array.from(sheet.cssRules)
+				.map((r) => r.cssText)
+				.join('');
+			targetWindow.document.head.appendChild(style);
+		} catch {
+			if (sheet.href) {
+				const link = targetWindow.document.createElement('link');
+				link.rel = 'stylesheet';
+				link.href = sheet.href;
+				targetWindow.document.head.appendChild(link);
+			}
+		}
+	}
+};

package/src/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/domTraversal.ts

@@ -0,0 +1,16 @@
+export const domTraversal = (
+	root: Element | ShadowRoot,
+	visit: (el: Element) => void,
+) => {
+	if (root instanceof Element) {
+		visit(root);
+		if (root.shadowRoot) {
+			for (const child of root.shadowRoot.children) {
+				domTraversal(child, visit);
+			}
+		}
+	}
+	for (const child of root.children) {
+		domTraversal(child, visit);
+	}
+};

package/src/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/index.ts

@@ -0,0 +1 @@
+export { useDocumentPiP } from './useDocumentPiP';

package/src/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/mediaCollection.ts

@@ -0,0 +1,13 @@
+import { domTraversal } from './domTraversal';
+
+export const safePlay = (el: HTMLMediaElement) => {
+	void el.play().catch(() => {});
+};
+
+export const collectMedia = (root: Element): HTMLMediaElement[] => {
+	const list: HTMLMediaElement[] = [];
+	domTraversal(root, (el) => {
+		if (el instanceof HTMLMediaElement) list.push(el);
+	});
+	return list;
+};

package/src/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/mediaPlayback.ts

@@ -0,0 +1,22 @@
+import { MediaRemoteControl } from 'vidstack';
+
+import type { MediaSnapshot } from '../../types/types';
+import { domTraversal } from './domTraversal';
+import { collectMedia, safePlay } from './mediaCollection';
+import { restoreStreams } from './mediaSnapshot';
+
+export const requestVidstackPlayback = (root: Element) => {
+	domTraversal(root, (el) => {
+		if (el.tagName.toLowerCase() !== 'media-player') return;
+		const remote = new MediaRemoteControl();
+		remote.setTarget(el);
+		remote.mute();
+		remote.play();
+	});
+};
+
+export const resumePlayback = (root: Element, snapshot: MediaSnapshot[]) => {
+	restoreStreams(snapshot);
+	collectMedia(root).forEach(safePlay);
+	requestVidstackPlayback(root);
+};

package/src/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/mediaSnapshot.ts

@@ -0,0 +1,43 @@
+/**
+ * @author @PalonnyiOleksandr
+ *
+ * [WTEL-9414](https://webitel.atlassian.net/browse/WTEL-9414)
+ *
+ * Snapshot utilities for media elements inside Document PiP window.
+ * `snapshotMedia` captures current muted state and srcObject of all media
+ * elements, then forces mute to prevent autoplay policy violations.
+ * `restoreMedia` reverts muted state and re-attaches lost streams.
+ * `restoreStreams` re-attaches srcObject without touching muted state,
+ * used during playback retry polling.
+ */
+import type { MediaSnapshot } from '../../types/types';
+
+import { collectMedia } from './mediaCollection';
+
+export const snapshotMedia = (root: Element, snapshot: MediaSnapshot[]) => {
+	const items = collectMedia(root).map((el) => ({
+		el,
+		muted: el.muted,
+		srcObject: el.srcObject instanceof MediaStream ? el.srcObject : null,
+	}));
+	snapshot.splice(0, snapshot.length, ...items);
+	for (const { el } of snapshot) {
+		el.muted = true;
+		el.setAttribute('muted', '');
+		el.defaultMuted = true;
+	}
+};
+
+export const restoreMedia = (snapshot: MediaSnapshot[]) => {
+	for (const { el, muted, srcObject } of snapshot) {
+		el.muted = muted;
+		if (!el.srcObject && srcObject) el.srcObject = srcObject;
+	}
+	snapshot.splice(0);
+};
+
+export const restoreStreams = (snapshot: MediaSnapshot[]) => {
+	for (const { el, srcObject } of snapshot) {
+		if (!el.srcObject && srcObject) el.srcObject = srcObject;
+	}
+};

package/src/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/playbackRetry.ts

@@ -0,0 +1,81 @@
+/**
+ * @author @PalonnyiOleksandr
+ *
+ * [WTEL-9414](https://webitel.atlassian.net/browse/WTEL-9414)
+ *
+ * Polling retry mechanism for media playback inside Document PiP window.
+ * Restores streams from snapshot, mutes and plays all media elements until
+ * all are ready or the timeout expires. Triggers vidstack playback after an
+ * initial delay and re-kicks it periodically when any element stays stalled,
+ * throttled to once per 1500 ms to avoid redundant calls.
+ *
+ * Background: browsers block autoplay until the user interacts with the page,
+ * which caused the video to freeze after opening PiP. Since the video must
+ * play immediately without any extra clicks, this retry loop works around that
+ * by muting elements (which bypasses the autoplay restriction) and
+ * re-attempting playback until all media is running.
+ *
+ * link to explanation - https://webitel.atlassian.net/browse/WTEL-9414?focusedCommentId=754533
+ */
+import type { MediaSnapshot } from '../../types/types';
+
+import { collectMedia, safePlay } from './mediaCollection';
+import { requestVidstackPlayback } from './mediaPlayback';
+import { restoreStreams } from './mediaSnapshot';
+
+export const createPlaybackRetry = (snapshot: MediaSnapshot[]) => {
+	let retryTimer: number | null = null;
+	let vidstackDelayTimer: number | null = null;
+
+	const stopPlaybackRetry = () => {
+		if (retryTimer !== null) {
+			clearInterval(retryTimer);
+			retryTimer = null;
+		}
+		if (vidstackDelayTimer !== null) {
+			clearTimeout(vidstackDelayTimer);
+			vidstackDelayTimer = null;
+		}
+	};
+
+	const retryPlayback = (root: Element, durationMs = 10000) => {
+		stopPlaybackRetry();
+		const started = performance.now();
+		let lastVidstackKick = 0;
+
+		vidstackDelayTimer = window.setTimeout(() => {
+			vidstackDelayTimer = null;
+			requestVidstackPlayback(root);
+			lastVidstackKick = performance.now();
+		}, 800);
+
+		retryTimer = window.setInterval(() => {
+			restoreStreams(snapshot);
+
+			const media = collectMedia(root);
+			if (!media.length) return;
+
+			for (const el of media) {
+				el.muted = true;
+				if (el.paused || el.readyState === 0) safePlay(el);
+			}
+
+			const hasStalled = media.some((el) => el.paused || el.readyState === 0);
+			const now = performance.now();
+			if (hasStalled && now - lastVidstackKick > 1500) {
+				requestVidstackPlayback(root);
+				lastVidstackKick = now;
+			}
+
+			const allReady = media.every((el) => !el.paused && el.readyState > 0);
+			if (allReady || now - started > durationMs) {
+				stopPlaybackRetry();
+			}
+		}, 200);
+	};
+
+	return {
+		retryPlayback,
+		stopPlaybackRetry,
+	};
+};

package/src/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/useDocumentPiP.ts

@@ -0,0 +1,146 @@
+import { computed, onUnmounted, ref } from 'vue';
+
+import type { DocumentPiPWindow, MediaSnapshot } from '../../types/types';
+
+import { bridgeCustomElements } from './bridgeCustomElements';
+import { copyStyles } from './copyStyles';
+import { collectMedia, safePlay } from './mediaCollection';
+import { resumePlayback } from './mediaPlayback';
+import { restoreMedia, restoreStreams, snapshotMedia } from './mediaSnapshot';
+import { createPlaybackRetry } from './playbackRetry';
+import { usePiPResizeObserver } from './usePiPResizeObserver';
+
+export function useDocumentPiP(
+	getElement: () => HTMLElement | null | undefined,
+) {
+	const isPiP = ref(false);
+	const isSupported = computed(() => 'documentPictureInPicture' in window);
+
+	let pipWindow: Window | null = null;
+	let movedEl: HTMLElement | null = null;
+	let originalParent: Node | null = null;
+	let originalNextSibling: Node | null = null;
+
+	const mediaSnapshot: MediaSnapshot[] = [];
+	const { retryPlayback, stopPlaybackRetry } =
+		createPlaybackRetry(mediaSnapshot);
+
+	const { startPiPResizeObserver, stopPiPResizeObserver, onPiPResize } =
+		usePiPResizeObserver();
+
+	const armFirstGestureResume = (w?: Window) => {
+		const target = w ?? pipWindow;
+		if (!target || target.closed) return;
+
+		const kick = () => {
+			if (movedEl) resumePlayback(movedEl, mediaSnapshot);
+			target.document.removeEventListener('pointerdown', kick, true);
+			target.document.removeEventListener('keydown', kick, true);
+		};
+		target.document.addEventListener('pointerdown', kick, true);
+		target.document.addEventListener('keydown', kick, true);
+	};
+
+	const restoreElement = () => {
+		if (!movedEl || !originalParent) {
+			mediaSnapshot.splice(0);
+			movedEl = null;
+			originalParent = null;
+			originalNextSibling = null;
+			return;
+		}
+
+		if (
+			originalNextSibling &&
+			originalNextSibling.parentNode === originalParent
+		) {
+			originalParent.insertBefore(movedEl, originalNextSibling);
+		}
+
+		restoreMedia(mediaSnapshot);
+		resumePlayback(movedEl, mediaSnapshot);
+
+		movedEl = null;
+		originalParent = null;
+		originalNextSibling = null;
+	};
+
+	const onPiPWindowClose = () => {
+		stopPlaybackRetry();
+		stopPiPResizeObserver();
+		restoreElement();
+		pipWindow = null;
+		isPiP.value = false;
+	};
+
+	const enterPiP = async (width = 480, height = 320) => {
+		if (!isSupported.value || isPiP.value) return;
+
+		const el = getElement();
+		if (!el) return;
+
+		const api = (window as DocumentPiPWindow).documentPictureInPicture;
+		let win: Window;
+		try {
+			win = await api.requestWindow({
+				width,
+				height,
+			});
+		} catch {
+			return;
+		}
+
+		pipWindow = win;
+
+		copyStyles(win);
+		win.document.body.style.cssText =
+			'margin:0;overflow:hidden;width:100%;height:100%;';
+		bridgeCustomElements(el, win);
+
+		originalParent = el.parentNode;
+		originalNextSibling = el.nextSibling;
+		movedEl = el;
+
+		snapshotMedia(el, mediaSnapshot);
+		win.document.body.appendChild(el);
+
+		restoreStreams(mediaSnapshot);
+		collectMedia(el).forEach(safePlay);
+
+		retryPlayback(el);
+		armFirstGestureResume(win);
+
+		isPiP.value = true;
+		win.addEventListener('pagehide', onPiPWindowClose);
+		startPiPResizeObserver(el);
+	};
+
+	const exitPiP = () => {
+		if (!isPiP.value) return;
+
+		stopPlaybackRetry();
+		stopPiPResizeObserver();
+		restoreElement();
+
+		if (pipWindow && !pipWindow.closed) {
+			pipWindow.removeEventListener('pagehide', onPiPWindowClose);
+			pipWindow.close();
+		}
+
+		pipWindow = null;
+		isPiP.value = false;
+	};
+
+	onUnmounted(() => {
+		if (isPiP.value) exitPiP();
+	});
+
+	return {
+		isPiP,
+		isSupported,
+		enterPiP,
+		exitPiP,
+		armFirstGestureResume,
+		onPiPResize,
+	};
+}

package/src/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/usePiPResizeObserver.ts

@@ -0,0 +1,30 @@
+import type { PiPResizeCallback } from '../../types/types';
+
+export function usePiPResizeObserver() {
+	const resizeCallbacks = new Set<PiPResizeCallback>();
+	let pipResizeObserver: ResizeObserver | null = null;
+
+	const startPiPResizeObserver = (element: HTMLElement) => {
+		pipResizeObserver?.disconnect();
+		pipResizeObserver = new ResizeObserver(([entry]) => {
+			for (const callback of resizeCallbacks) callback(entry.contentRect);
+		});
+		pipResizeObserver.observe(element);
+	};
+
+	const stopPiPResizeObserver = () => {
+		pipResizeObserver?.disconnect();
+		pipResizeObserver = null;
+	};
+
+	const onPiPResize = (callback: PiPResizeCallback) => {
+		resizeCallbacks.add(callback);
+		return () => resizeCallbacks.delete(callback);
+	};
+
+	return {
+		startPiPResizeObserver,
+		stopPiPResizeObserver,
+		onPiPResize,
+	};
+}

package/src/modules/CallSession/modules/VideoCall/composables/useReceiverLiveStream.ts

@@ -0,0 +1,64 @@
+import { type ComputedRef, ref, watch } from 'vue';
+
+/**
+ * Tracks whether the receiver's stream has a live video track.
+ * Reacts to track additions, unmute, and ended events on the stream.
+ * Returns null when stream is absent, video is disabled, or call is on hold.
+ */
+export function useReceiverLiveStream(
+	receiverStream: ComputedRef<MediaStream | null | undefined>,
+	videoEnabled: ComputedRef<boolean | undefined>,
+	isOnHold: ComputedRef<boolean>,
+) {
+	const liveStream = ref<MediaStream | null>(null);
+
+	watch(
+		[
+			receiverStream,
+			videoEnabled,
+			isOnHold,
+		],
+		([stream, videoOn, onHold], _, onCleanup) => {
+			liveStream.value = null;
+
+			if (!stream || !videoOn || onHold) return;
+
+			const refresh = () => {
+				const hasLiveVideo = stream
+					.getVideoTracks()
+					.some((t) => t.readyState === 'live');
+				liveStream.value = hasLiveVideo ? stream : null;
+			};
+
+			const onAddTrack = ({ track }: MediaStreamTrackEvent) => {
+				if (track.kind === 'video') {
+					track.addEventListener('unmute', refresh);
+					track.addEventListener('ended', refresh);
+				}
+				refresh();
+			};
+
+			stream.getVideoTracks().forEach((t) => {
+				t.addEventListener('unmute', refresh);
+				t.addEventListener('ended', refresh);
+			});
+
+			stream.addEventListener('addtrack', onAddTrack);
+
+			refresh();
+
+			onCleanup(() => {
+				stream.removeEventListener('addtrack', onAddTrack);
+				stream.getVideoTracks().forEach((t) => {
+					t.removeEventListener('unmute', refresh);
+					t.removeEventListener('ended', refresh);
+				});
+			});
+		},
+		{
+			immediate: true,
+		},
+	);
+
+	return liveStream;
+}

package/src/modules/CallSession/modules/VideoCall/types/types.ts

@@ -0,0 +1,17 @@
+export type DocumentPiPWindow = Window &
+	typeof globalThis & {
+		documentPictureInPicture: {
+			requestWindow: (opts: {
+				width: number;
+				height: number;
+			}) => Promise<Window>;
+		};
+	};
+
+export type MediaSnapshot = {
+	el: HTMLMediaElement;
+	muted: boolean;
+	srcObject: MediaStream | null;
+};
+
+export type PiPResizeCallback = (rect: DOMRectReadOnly) => void;