@webitel/ui-sdk 26.4.78 → 26.6.2

package/src/modules/CallSession/modules/VideoCall/video-call.vue

@@ -1,10 +1,14 @@
 <template>
   <wt-vidstack-player
-    :class="[!props.static && `video-call-position--${props.position}`]"
-    :hide-video-display-panel="props.hideVideoDisplayPanel"
-    :size="props.size"
+    ref="playerRef"
+    :class="[
+      !props.static && !isPiP && `video-call-position--${props.position}`,
+      isPiP && 'video-call--pip',
+    ]"
+    :hide-video-display-panel="isPiP || props.hideVideoDisplayPanel"
+    :size="isPiP ? ComponentSize.MD : props.size"
     :stream="mainStream"
-    :static="props.static"
+    :static="isPiP || props.static"
     :username="props.username"
     :hide-controls-panel="props.hideControlsPanel"
     :mirror-video="!showSenderScreen"
@@ -26,6 +30,17 @@
     <template #content="{ size: innerSize }">
       <slot :size="innerSize" name="content" />
 
+      <div
+        v-if="isPiP && props['receiver:mic:enabled'] === false"
+        class="video-call--pip__mic-indicator"
+      >
+        <wt-icon
+          :size="ComponentSize.SM"
+          icon="mic-muted"
+          color="on-dark"
+        />
+      </div>
+
       <slot v-if="!mainStream" :size="innerSize" name="overlay">
         <div class="video-call-overlay">
           <div
@@ -72,6 +87,7 @@
         <screenshot-box
           :size="innerSize"
           :src="props['screenshot:src']"
+          :style="pipContentSizeStyle"
           @close="emit(`action:${VideoCallAction.CloseScreenshot}`)"
           @zoom="emit(`action:${VideoCallAction.ZoomScreenshot}`)"
         />
@@ -91,6 +107,7 @@
         <template v-else-if="showSenderScreen">
           <wt-vidstack-player
             :class="`video-call-sender--${innerSize}`"
+            :style="pipContentSizeStyle"
             :stream="props['sender:stream']"
             autoplay
             class="video-call-sender"
@@ -133,6 +150,7 @@
         @[VideoCallAction.Settings]="(payload, options) => emit(emitKeys[VideoCallAction.Settings], payload, options)"
         @[VideoCallAction.Chat]="(payload, options) => emit(emitKeys[VideoCallAction.Chat], payload, options)"
         @[VideoCallAction.Hangup]="(payload, options) => emit(emitKeys[VideoCallAction.Hangup], payload, options)"
+
       />
     </template>
   </wt-vidstack-player>
@@ -143,9 +161,8 @@
   lang="ts"
 >
 import { WtVidstackPlayer } from '@webitel/ui-sdk/components';
-import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, isRef, onBeforeUnmount, type Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import { WtIcon } from '../../../../components';
 import {
 	RecordingIndicator,
@@ -156,6 +173,8 @@ import { ComponentSize, WtApplication } from '../../../../enums';
 import { convertDuration } from '../../../../scripts';
 import type { ResultCallbacks } from '../../../../types';
 import type { ScreenshotStatus } from '../../types';
+import { useDocumentPiP } from './composables/useDocumentPiP';
+import { useReceiverLiveStream } from './composables/useReceiverLiveStream';
 import { VideoCallAction } from './enums/VideoCallAction.enum';
 
 const props = withDefaults(
@@ -187,6 +206,9 @@ const props = withDefaults(
 		hideVideoDisplayPanel?: boolean;
 		hideAvatar?: boolean;
 		resizable?: boolean;
+		hideSenderOnHold?: boolean;
+
+		isPipMode?: boolean;
 
 		actions: VideoCallAction[];
 		username?: string;
@@ -256,6 +278,61 @@ const emitKeys = {
 
 const { t } = useI18n();
 
+const playerRef = ref<InstanceType<typeof WtVidstackPlayer> | null>(null);
+
+/** `defineExpose({ rootEl })` on `WtVidstackPlayer` passes a Ref — DOM is ready after stream + Vidstack upgrade. */
+const getVideoCallPlayerHostElement = (): HTMLElement | null => {
+	const inst = playerRef.value as unknown as {
+		rootEl?: HTMLElement | Ref<HTMLElement | null> | null;
+		$el?: HTMLElement | null;
+	} | null;
+	if (!inst) return null;
+	const rootEl = inst.rootEl;
+	const exposedElement = isRef(rootEl) ? rootEl.value : (rootEl ?? null);
+	return exposedElement ?? inst.$el ?? null;
+};
+
+const { isPiP, enterPiP, onPiPResize } = useDocumentPiP(
+	getVideoCallPlayerHostElement,
+);
+
+/**
+ * @author @Oleksandr Palionnyi
+ *
+ * [WTEL-9414](https://webitel.atlassian.net/browse/WTEL-9414)
+ *
+ * Sender preview dimensions relative to the main player, taken from Figma design (256×171 / 1366×912).
+ * https://webitel.atlassian.net/browse/WTEL-9542?focusedCommentId=754891
+ */
+const SENDER_WIDTH_RATIO = 256 / 1366;
+const SENDER_ASPECT_RATIO = 171 / 256;
+
+const pipContentSize = ref<{
+	width: number;
+	height: number;
+} | null>(null);
+
+onPiPResize((rect) => {
+	const width = rect.width * SENDER_WIDTH_RATIO;
+	pipContentSize.value = {
+		width,
+		height: width * SENDER_ASPECT_RATIO,
+	};
+});
+
+watch(isPiP, (active) => {
+	if (!active) pipContentSize.value = null;
+});
+
+const pipContentSizeStyle = computed(() => {
+	if (!pipContentSize.value) return '';
+
+	return {
+		width: `${pipContentSize.value.width}px`,
+		height: `${pipContentSize.value.height}px`,
+	};
+});
+
 const receiverStream = computed(() => props['receiver:stream']);
 const senderStream = computed(() => props['sender:stream']);
 
@@ -290,6 +367,12 @@ const bothStreamsAvailable = computed(
 	() => !!receiverStream.value && !!senderStream.value,
 );
 
+const receiverStreamLiveForMain = useReceiverLiveStream(
+	receiverStream,
+	receiverVideoEnabled,
+	isOnHold,
+);
+
 const showReceiverOverlay = computed(
 	() =>
 		(!receiverStream.value &&
@@ -320,13 +403,22 @@ const mainStream = computed(() => {
 		return senderStream.value;
 	}
 
-	return receiverStream.value ?? senderStream.value;
+	return receiverStreamLiveForMain.value ?? senderStream.value;
 });
 
 const showSenderScreen = computed(() => {
-	if (!isOnHold.value) return bothStreamsAvailable.value;
-
-	return !props.hideSenderOnHold && senderStream.value && receiverStream.value;
+	if (isOnHold.value) {
+		return (
+			!props.hideSenderOnHold && !!senderStream.value && !!receiverStream.value
+		);
+	}
+	if (!bothStreamsAvailable.value) {
+		return false;
+	}
+	if (!receiverVideoEnabled.value) {
+		return true;
+	}
+	return receiverStreamLiveForMain.value != null;
 });
 
 const showSenderMutedScreen = computed(() => {
@@ -363,8 +455,36 @@ watch(
 	},
 );
 
+/**
+ * @author @Oleksandr Palionnyi
+ *
+ * [WTEL-9414](https://webitel.atlassian.net/browse/WTEL-9414)
+ *
+ * Document PiP: call `requestWindow()` only when `mainStream` and a usable player host exist.
+ * `flush: 'post'` runs after DOM updates so Vidstack / WC upgrade can finish before we read `rootEl`.
+ * Stop the watcher only once `enterPiP` succeeds (`isPiP`), so gesture/API failures can retry on later ticks.
+ */
+const stopAutoDocumentPiP = watch(
+	[
+		mainStream,
+		playerRef,
+	],
+	async () => {
+		if (!props.isPipMode) return;
+		if (!mainStream.value || !playerRef.value || isPiP.value) return;
+		if (!getVideoCallPlayerHostElement()) return;
+		await enterPiP();
+		if (isPiP.value) stopAutoDocumentPiP();
+	},
+	{
+		flush: 'post',
+		immediate: true,
+	},
+);
+
 onBeforeUnmount(() => {
 	stopHoldTimer();
+	stopAutoDocumentPiP();
 });
 
 const receiverVideoMutedIconSizes = {
@@ -385,6 +505,46 @@ const senderVideoMutedIconSizes = {
   flex: 0 0 auto;
 }
 
+.video-call--pip.wt-vidstack-player {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 0;
+}
+
+.video-call--pip :deep(.wt-vidstack-player__player:not(.video-call-sender *)),
+.video-call--pip :deep(.wt-vidstack-player__provider:not(.video-call-sender *)),
+.video-call--pip :deep(.wt-vidstack-player:not(.video-call-sender)),
+.video-call--pip :deep(video:not(.video-call-sender *)) {
+  border-radius: 0;
+}
+
+.video-call--pip__mic-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: var(--spacing-sm);
+  left: var(--spacing-sm);
+  z-index: 1;
+  padding: var(--spacing-xs);
+  background: var(--p-player-head-line-hover-background);
+  border-radius: var(--p-player-wrapper-sm-border-radius);
+}
+
+/* Placeholder occupies original layout space while element lives in PiP window */
+.video-call--pip-active {
+  background: var(--p-player-wrapper-background, #000);
+  border-radius: inherit;
+}
+
+
 .video-call-position--left-bottom.wt-vidstack-player--sm {
   top: unset;
   bottom: var(--spacing-sm);
@@ -533,10 +693,6 @@ const senderVideoMutedIconSizes = {
   height: var(--p-player-cam-preview-sm-height);
 }
 
-.video-call-sender--md :deep(video) {
-  border-radius: var(--p-player-cam-preview-md-border-radius);
-}
-
 .video-call-sender--md.video-call-sender--muted {
   border-radius: var(--p-player-cam-preview-md-border-radius);
 }
@@ -549,10 +705,6 @@ const senderVideoMutedIconSizes = {
   height: var(--p-player-cam-preview-md-height);
 }
 
-.video-call-sender--lg :deep(video) {
-  border-radius: var(--p-player-cam-preview-lg-border-radius);
-}
-
 .video-call-sender--lg.video-call-sender--muted {
   border-radius: var(--p-player-cam-preview-lg-border-radius);
 }

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

@@ -34,7 +34,9 @@ type __VLS_Slots = {} & {
 } & {
     content?: (props: typeof __VLS_32) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<Props, {
+    rootEl: Readonly<import("vue").ShallowRef<HTMLElement>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     "change-size": (args_0: ComponentSize) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{

package/types/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/bridgeCustomElements.d.ts

@@ -0,0 +1 @@
+export declare const bridgeCustomElements: (root: Element, targetWindow: Window) => void;

package/types/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/copyStyles.d.ts

@@ -0,0 +1 @@
+export declare const copyStyles: (targetWindow: Window) => void;

package/types/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/domTraversal.d.ts

@@ -0,0 +1 @@
+export declare const domTraversal: (root: Element | ShadowRoot, visit: (el: Element) => void) => void;

package/types/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/index.d.ts

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

package/types/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/mediaCollection.d.ts

@@ -0,0 +1,2 @@
+export declare const safePlay: (el: HTMLMediaElement) => void;
+export declare const collectMedia: (root: Element) => HTMLMediaElement[];

package/types/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/mediaPlayback.d.ts

@@ -0,0 +1,3 @@
+import type { MediaSnapshot } from '../../types/types';
+export declare const requestVidstackPlayback: (root: Element) => void;
+export declare const resumePlayback: (root: Element, snapshot: MediaSnapshot[]) => void;

package/types/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/mediaSnapshot.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @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';
+export declare const snapshotMedia: (root: Element, snapshot: MediaSnapshot[]) => void;
+export declare const restoreMedia: (snapshot: MediaSnapshot[]) => void;
+export declare const restoreStreams: (snapshot: MediaSnapshot[]) => void;

package/types/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/playbackRetry.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @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';
+export declare const createPlaybackRetry: (snapshot: MediaSnapshot[]) => {
+    retryPlayback: (root: Element, durationMs?: number) => void;
+    stopPlaybackRetry: () => void;
+};

package/types/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/useDocumentPiP.d.ts

@@ -0,0 +1,8 @@
+export declare function useDocumentPiP(getElement: () => HTMLElement | null | undefined): {
+    isPiP: import("vue").Ref<boolean, boolean>;
+    isSupported: import("vue").ComputedRef<boolean>;
+    enterPiP: (width?: number, height?: number) => Promise<void>;
+    exitPiP: () => void;
+    armFirstGestureResume: (w?: Window) => void;
+    onPiPResize: (callback: import("../../types/types").PiPResizeCallback) => () => boolean;
+};

package/types/modules/CallSession/modules/VideoCall/composables/useDocumentPiP/usePiPResizeObserver.d.ts

@@ -0,0 +1,6 @@
+import type { PiPResizeCallback } from '../../types/types';
+export declare function usePiPResizeObserver(): {
+    startPiPResizeObserver: (element: HTMLElement) => void;
+    stopPiPResizeObserver: () => void;
+    onPiPResize: (callback: PiPResizeCallback) => () => boolean;
+};

package/types/modules/CallSession/modules/VideoCall/composables/useReceiverLiveStream.d.ts

@@ -0,0 +1,49 @@
+import { type ComputedRef } 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 declare function useReceiverLiveStream(receiverStream: ComputedRef<MediaStream | null | undefined>, videoEnabled: ComputedRef<boolean | undefined>, isOnHold: ComputedRef<boolean>): import("vue").Ref<{
+    readonly active: boolean;
+    readonly id: string;
+    onaddtrack: (this: MediaStream, ev: MediaStreamTrackEvent) => any;
+    onremovetrack: (this: MediaStream, ev: MediaStreamTrackEvent) => any;
+    addTrack: (track: MediaStreamTrack) => void;
+    clone: () => MediaStream;
+    getAudioTracks: () => MediaStreamTrack[];
+    getTrackById: (trackId: string) => MediaStreamTrack | null;
+    getTracks: () => MediaStreamTrack[];
+    getVideoTracks: () => MediaStreamTrack[];
+    removeTrack: (track: MediaStreamTrack) => void;
+    addEventListener: {
+        <K extends keyof MediaStreamEventMap>(type: K, listener: (this: MediaStream, ev: MediaStreamEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    };
+    removeEventListener: {
+        <K extends keyof MediaStreamEventMap>(type: K, listener: (this: MediaStream, ev: MediaStreamEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    };
+    dispatchEvent: (event: Event) => boolean;
+}, MediaStream | {
+    readonly active: boolean;
+    readonly id: string;
+    onaddtrack: (this: MediaStream, ev: MediaStreamTrackEvent) => any;
+    onremovetrack: (this: MediaStream, ev: MediaStreamTrackEvent) => any;
+    addTrack: (track: MediaStreamTrack) => void;
+    clone: () => MediaStream;
+    getAudioTracks: () => MediaStreamTrack[];
+    getTrackById: (trackId: string) => MediaStreamTrack | null;
+    getTracks: () => MediaStreamTrack[];
+    getVideoTracks: () => MediaStreamTrack[];
+    removeTrack: (track: MediaStreamTrack) => void;
+    addEventListener: {
+        <K extends keyof MediaStreamEventMap>(type: K, listener: (this: MediaStream, ev: MediaStreamEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    };
+    removeEventListener: {
+        <K extends keyof MediaStreamEventMap>(type: K, listener: (this: MediaStream, ev: MediaStreamEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    };
+    dispatchEvent: (event: Event) => boolean;
+}>;

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

@@ -0,0 +1,14 @@
+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;

package/types/modules/CallSession/modules/VideoCall/video-call.vue.d.ts

@@ -23,21 +23,23 @@ type __VLS_Props = {
     hideVideoDisplayPanel?: boolean;
     hideAvatar?: boolean;
     resizable?: boolean;
+    hideSenderOnHold?: boolean;
+    isPipMode?: boolean;
     actions: VideoCallAction[];
     username?: string;
     'actions:settings:pressed'?: boolean;
     'actions:settings:disabled'?: boolean;
     'actions:chat:pressed'?: boolean;
 };
-declare var __VLS_17: {
+declare var __VLS_18: {
     size: ComponentSize;
-}, __VLS_19: {
+}, __VLS_25: {
     size: ComponentSize;
 };
 type __VLS_Slots = {} & {
-    content?: (props: typeof __VLS_17) => any;
+    content?: (props: typeof __VLS_18) => any;
 } & {
-    overlay?: (props: typeof __VLS_19) => any;
+    overlay?: (props: typeof __VLS_25) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "change-size": (size: ComponentSize) => any;