@webitel/ui-sdk 25.12.32 → 25.12.34

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

@@ -1,49 +1,62 @@
 <template>
   <wt-vidstack-player
     :stream="mainStream"
-    :static-position="props.position === 'static'"
+    :static="props.static"
+    :size="props.size"
+    :class="`video-call-position--${props.position}`"
     class="video-call"
+    hide-background
     autoplay
     muted
+    @change-size="(payload) => emit('change-size', payload)"
   >
-    <template #content="{ size }">
+    <template #content="{ size: innerSize }">
       <div
-        :class="`video-call-content--${size}`"
+        :class="`video-call-content--${innerSize}`"
         class="video-call-content"
       >
         <template v-if="!props['receiver:stream'] && !props['sender:video:enabled']">
           <div
-            :class="`video-call-sender--${size}`"
+            :class="`video-call-sender--${innerSize}`"
             class="video-call-sender video-call-sender--muted"
           >
-            <wt-icon :size="receiverVideoMutedIconSizes[size]" icon="video-cam-off--filled" />
+            <wt-icon :size="receiverVideoMutedIconSizes[innerSize]" icon="video-cam-off--filled" />
           </div>
         </template>
 
-        <template v-if="!props['receiver:stream'] && !props['receiver:video:enabled']">
-          <div
-            :class="`video-call-receiver--${size}`"
-            class="video-call-receiver video-call-receiver--muted"
-          >
-            <wt-icon :size="receiverVideoMutedIconSizes[size]" icon="video-cam-off--filled" />
-          </div>
-        </template>
-
-        <template v-else-if="props['receiver:stream']">
-          <wt-vidstack-player
-            :stream="props['receiver:stream']"
-            :resizable="false"
-            :class="`video-call-receiver--${size}`"
-            hide-display-panel
-            static-position
-            autoplay
-            muted
-            class="video-call-receiver"
+        <div class="video-call-content-wrapper">
+          <screenshot-box
+            :src="props['screenshot:src']"
+            :size="innerSize"
+            @zoom="emit(`action:${VideoCallAction.ZoomScreenshot}`)"
+            @close="emit(`action:${VideoCallAction.CloseScreenshot}`)"
           />
-        </template>
+
+          <template v-if="!props['receiver:stream'] && !props['receiver:video:enabled']">
+            <div
+              :class="`video-call-receiver--${innerSize}`"
+              class="video-call-receiver video-call-receiver--muted"
+            >
+              <wt-icon :size="senderVideoMutedIconSizes[innerSize]" icon="video-cam-off--filled" />
+            </div>
+          </template>
+
+          <template v-else-if="props['receiver:stream']">
+            <wt-vidstack-player
+              :stream="props['receiver:stream']"
+              :resizable="false"
+              :class="`video-call-receiver--${innerSize}`"
+              hide-display-panel
+              static-position
+              autoplay
+              muted
+              class="video-call-receiver"
+            />
+          </template>
+        </div>
 
         <div
-          :class="`video-call__indicator--${size}`"
+          :class="`video-call__indicator--${innerSize}`"
           class="video-call__indicator"
         >
           <recording-indicator
@@ -78,37 +91,46 @@
 
 <script setup lang="ts">
 import {WtVidstackPlayer} from '@webitel/ui-sdk/components';
-import {computed } from 'vue';
+import {computed} from 'vue';
 
 import {WtIcon} from "../../../../components";
-import {RecordingIndicator, VideoCallControlsPanel} from "../../../../components/wt-vidstack-player/components";
+import {
+  RecordingIndicator,
+  ScreenshotBox,
+  VideoCallControlsPanel
+} from "../../../../components/wt-vidstack-player/components";
 import {ComponentSize} from "../../../../enums";
-import { ResultCallbacks } from '../../../../types';
+import {ResultCallbacks} from '../../../../types';
 import {ScreenshotStatus} from '../../types';
-import { VideoCallAction } from './enums/VideoCallAction.enum';
+import {VideoCallAction} from './enums/VideoCallAction.enum';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   'sender:stream'?: MediaStream | null;
-  
+
   'sender:mic:enabled'?: boolean;
   'sender:mic:accessed'?: boolean;
-  
+
   'sender:video:enabled'?: boolean;
   'sender:video:accessed'?: boolean;
-  
+
   'receiver:stream'?: MediaStream | null;
   'receiver:mic:enabled'?: boolean;
   'receiver:video:enabled'?: boolean;
-  
+
   'screenshot:status'?: ScreenshotStatus | null;
   'screenshot:loading'?: boolean;
-  
+  'screenshot:src'?: string;
+
   recordings?: boolean;
 
-  position?: 'static' | 'left' | 'right';
+  static?: boolean;
+  position?: 'left-bottom' | 'right-bottom';
+  size?: ComponentSize
 
   actions: VideoCallAction[];
-}>();
+}>(), {
+  position: 'right-bottom',
+});
 
 const emit = defineEmits<{
   (e: `action:${typeof VideoCallAction.Screenshot}`, payload?: unknown, options?: ResultCallbacks): void;
@@ -118,9 +140,11 @@ const emit = defineEmits<{
   (e: `action:${typeof VideoCallAction.Settings}`, payload?: unknown, options?: ResultCallbacks): void;
   (e: `action:${typeof VideoCallAction.Chat}`, payload?: unknown, options?: ResultCallbacks): void;
   (e: `action:${typeof VideoCallAction.Hangup}`, payload?: unknown, options?: ResultCallbacks): void;
+  (e: `action:${typeof VideoCallAction.ZoomScreenshot}`): void;
+  (e: `action:${typeof VideoCallAction.CloseScreenshot}`): void;
+  (e: `change-size`, size: ComponentSize): void;
 }>()
 
-
 const mainStream = computed(() => {
   if (!props['sender:video:enabled']) return null;
 
@@ -129,14 +153,54 @@ const mainStream = computed(() => {
 
 const receiverVideoMutedIconSizes = {
   [ComponentSize.SM]: ComponentSize.MD,
-  [ComponentSize.SM]: ComponentSize.LG,
-  [ComponentSize.SM]: ComponentSize.XXL,
+  [ComponentSize.MD]: ComponentSize.LG,
+  [ComponentSize.LG]: ComponentSize.XXL,
 }
 
+const senderVideoMutedIconSizes = {
+  [ComponentSize.SM]: ComponentSize.MD,
+  [ComponentSize.MD]: ComponentSize['4XL'],
+  [ComponentSize.LG]: ComponentSize['8XL'],
+}
 </script>
 
 <style lang="scss" scoped>
 .video-call {
+  &-position {
+    &--left-bottom {
+      &.wt-vidstack-player {
+        &--sm {
+          left: var(--spacing-sm);
+          bottom: var(--spacing-sm);
+          top: unset;
+        }
+        &--md {
+          top: unset;
+          left: var(--spacing-sm);
+          bottom: var(--spacing-sm);
+          max-width: var(--p-player-wrapper-md-width);
+          max-height: var(--p-player-wrapper-md-height);
+        }
+      }
+    }
+
+    &--right-bottom {
+      &.wt-vidstack-player {
+        &--sm {
+          top: unset;
+          right: var(--spacing-sm);
+          bottom: var(--spacing-sm);
+        }
+        &--md {
+          top: unset;
+          right: var(--spacing-sm);
+          bottom: var(--spacing-sm);
+          max-width: var(--p-player-wrapper-md-width);
+          max-height: var(--p-player-wrapper-md-height);
+        }
+      }
+    }
+  }
 
   &-content {
     height: 100%;
@@ -147,14 +211,20 @@ const receiverVideoMutedIconSizes = {
     position: absolute;
     left: 0;
     top: 0;
+    width: 100%;
 
     &--sm {
-      position: relative;
+      padding-bottom: calc(var(--p-player-control-bar-sm-height) + var(--p-player-counter-position-padding-sm));
+    }
+
+    &-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--p-player-control-bar-sm-gap);
     }
   }
 
   &-sender {
-    background: var(--p-player-wrapper-background);
     position: absolute;
     left: 0;
     top: 0;
@@ -163,6 +233,13 @@ const receiverVideoMutedIconSizes = {
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: -1;
+
+    &--sm {
+      &.video-call-sender--muted {
+        padding-bottom: var(--p-player-control-bar-sm-height);
+      }
+    }
   }
 
   &-receiver {
@@ -174,6 +251,8 @@ const receiverVideoMutedIconSizes = {
       align-items: center;
       justify-content: center;
       overflow: hidden;
+      border: 1px solid;
+      border-color: var(--p-player-wrapper-border-color);
     }
 
     &--sm {
@@ -231,12 +310,9 @@ const receiverVideoMutedIconSizes = {
 
   &__indicator {
     position: absolute;
-    width: 100%;
-    height: 100%;
     display: flex;
     align-items: end;
     justify-content: flex-end;
-    padding: var(--p-player-counter-position-padding-sm);
 
     &--sm {
       position: relative;

package/src/plugins/primevue/theme/extend/player/player.js

@@ -8,6 +8,20 @@ const generateCustomSharingPanelSizeCss = ({ size, dt }) => `
             border-radius: ${dt(`player-control-bar-${size}-border-radius`)};
             padding: ${dt(`player-control-bar-${size}-padding`)};
         }
+        
+        .screenshot-box--${size} {
+            width: ${dt(`player-screenshot-${size}-width`)};
+            height: ${dt(`player-screenshot-${size}-height`)};
+        }
+        
+        .screenshot-box .preview-img--${size} {
+            border-radius: ${dt(`player-screenshot-${size}-border-radius`)};
+        }
+        
+        .screenshot-box--${size} .close-btn {
+            top: ${dt(`player-screenshot-${size}-close-btn-gap`)};
+            right: ${dt(`player-screenshot-${size}-close-btn-gap`)};
+        }
 `;
 
 const playerCss = ({ dt }) => `

package/types/components/transitions/cases/wt-replace-transition.vue.d.ts

@@ -6,13 +6,13 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 declare const __VLS_component: import("vue").DefineComponent<{}, {
     pattern: string;
     mode: string;
-    appear: boolean;
     duration: string;
+    appear: boolean;
     $props: {
         readonly pattern?: string;
         readonly mode?: string;
-        readonly appear?: boolean;
         readonly duration?: string;
+        readonly appear?: boolean;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

package/types/components/transitions/wt-transition.vue.d.ts

@@ -6,13 +6,13 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 declare const __VLS_component: import("vue").DefineComponent<{}, {
     name: string;
     mode: string;
-    appear: boolean;
     duration: string;
+    appear: boolean;
     $props: {
         readonly name?: string;
         readonly mode?: string;
-        readonly appear?: boolean;
         readonly duration?: string;
+        readonly appear?: boolean;
     };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

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

@@ -4,3 +4,4 @@ export { default as MediaControlsPanel } from './panels/media-controls-panel/med
 export { default as ScreenSharingControlsPanel } from './panels/screen-sharing-controls-panel/screen-sharing-controls-panel.vue';
 export { default as VideoCallControlsPanel } from './panels/video-call-controls-panel/video-call-controls-panel.vue';
 export { default as RecordingIndicator } from './recording-indicator/recording-indicator.vue';
+export { default as ScreenshotBox } from './screenshot-box/screenshot-box.vue';

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

@@ -4,11 +4,11 @@ type __VLS_Props = {
     closable?: boolean;
     hideDisplayPanel?: boolean;
 };
-declare var __VLS_16: {}, __VLS_18: {};
+declare var __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
-    content?: (props: typeof __VLS_16) => any;
+    content?: (props: typeof __VLS_17) => any;
 } & {
-    'controls-panel'?: (props: typeof __VLS_18) => any;
+    'controls-panel'?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "close-player": () => any;

package/types/components/wt-vidstack-player/components/panels/video-call-controls-panel/video-call-controls-panel.vue.d.ts

@@ -1,5 +1,5 @@
-import { ScreenshotStatus } from '../../../../../modules/CallSession/types';
 import { VideoCallAction } from '../../../../../modules/CallSession/modules/VideoCall/enums/VideoCallAction.enum';
+import { ScreenshotStatus } from '../../../../../modules/CallSession/types';
 import { ResultCallbacks } from '../../../../../types';
 type __VLS_Props = {
     'actions': VideoCallAction[];

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

@@ -0,0 +1,13 @@
+import { ComponentSize } from "../../../../enums";
+type __VLS_Props = {
+    src?: string;
+    size: ComponentSize;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    zoom: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: () => any;
+    onZoom?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -13,15 +13,16 @@ interface Props {
     username?: string;
     closable?: boolean;
     resizable?: boolean;
-    staticPosition?: boolean;
+    static?: boolean;
     stream?: MediaStream;
-    componentSize?: keyof typeof ComponentSize;
+    size?: ComponentSize;
     hideDisplayPanel?: boolean;
+    hideBackground?: boolean;
 }
 declare var __VLS_24: {
-    size: "sm" | "XXXS" | "XXS" | "XS" | "SM" | "MD" | "LG" | "XL" | "XXL" | "XXXL";
+    size: ComponentSize;
 }, __VLS_26: {
-    size: "sm" | "XXXS" | "XXS" | "XS" | "SM" | "MD" | "LG" | "XL" | "XXL" | "XXXL";
+    size: ComponentSize;
 };
 type __VLS_Slots = {} & {
     'controls-panel'?: (props: typeof __VLS_24) => any;
@@ -30,8 +31,10 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
+    "change-size": (args_0: ComponentSize) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClose?: () => any;
+    "onChange-size"?: (args_0: ComponentSize) => any;
 }>, {
     title: string;
     username: string;
@@ -40,7 +43,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     closable: boolean;
     muted: boolean;
     resizable: boolean;
-    staticPosition: boolean;
+    static: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/types/enums/ComponentSize/ComponentSize.d.ts

@@ -8,5 +8,10 @@ export declare const ComponentSize: {
     readonly XL: "xl";
     readonly XXL: "2xl";
     readonly XXXL: "3xl";
+    readonly '4XL': "4xl";
+    readonly '5XL': "5xl";
+    readonly '6XL': "6xl";
+    readonly '7XL': "7xl";
+    readonly '8XL': "8xl";
 };
 export type ComponentSize = (typeof ComponentSize)[keyof typeof ComponentSize];

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

@@ -1,3 +1,3 @@
 export { default as ScreenSharing } from './modules/ScreenSharing/screen-sharing.vue';
-export { default as VideoCall } from './modules/VideoCall/video-call.vue';
 export { VideoCallAction } from './modules/VideoCall/enums/VideoCallAction.enum';
+export { default as VideoCall } from './modules/VideoCall/video-call.vue';

package/types/modules/CallSession/modules/VideoCall/enums/VideoCallAction.enum.d.ts

@@ -6,5 +6,7 @@ export declare const VideoCallAction: {
     readonly Settings: "settings";
     readonly Chat: "chat";
     readonly Hangup: "hangup";
+    readonly ZoomScreenshot: "zoom-screenshot";
+    readonly CloseScreenshot: "close-screenshot";
 };
 export type VideoCallAction = (typeof VideoCallAction)[keyof typeof VideoCallAction];

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

@@ -1,5 +1,5 @@
+import { ComponentSize } from "../../../../enums";
 import { ScreenshotStatus } from '../../types';
-import { ResultCallbacks } from '../../../../types';
 import { VideoCallAction } from './enums/VideoCallAction.enum';
 type __VLS_Props = {
     'sender:stream'?: MediaStream | null;
@@ -12,25 +12,20 @@ type __VLS_Props = {
     'receiver:video:enabled'?: boolean;
     'screenshot:status'?: ScreenshotStatus | null;
     'screenshot:loading'?: boolean;
+    'screenshot:src'?: string;
     recordings?: boolean;
-    position?: 'static' | 'left' | 'right';
+    static?: boolean;
+    position?: 'left-bottom' | 'right-bottom';
+    size?: ComponentSize;
     actions: VideoCallAction[];
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "action:screenshot": (payload?: unknown, options?: ResultCallbacks) => any;
-    "action:recordings": (payload?: unknown, options?: ResultCallbacks) => any;
-    "action:mic": (payload?: unknown, options?: ResultCallbacks) => any;
-    "action:video": (payload?: unknown, options?: ResultCallbacks) => any;
-    "action:settings": (payload?: unknown, options?: ResultCallbacks) => any;
-    "action:chat": (payload?: unknown, options?: ResultCallbacks) => any;
-    "action:hangup": (payload?: unknown, options?: ResultCallbacks) => any;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onAction:screenshot"?: (payload?: unknown, options?: ResultCallbacks) => any;
-    "onAction:recordings"?: (payload?: unknown, options?: ResultCallbacks) => any;
-    "onAction:mic"?: (payload?: unknown, options?: ResultCallbacks) => any;
-    "onAction:video"?: (payload?: unknown, options?: ResultCallbacks) => any;
-    "onAction:settings"?: (payload?: unknown, options?: ResultCallbacks) => any;
-    "onAction:chat"?: (payload?: unknown, options?: ResultCallbacks) => any;
-    "onAction:hangup"?: (payload?: unknown, options?: ResultCallbacks) => any;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    [x: `on${Capitalize<any>}`]: (...args: any) => any;
+}>, {
+    position: "left-bottom" | "right-bottom";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;