@webitel/ui-sdk 25.12.39 → 25.12.41

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

@@ -3,8 +3,10 @@
     :stream="mainStream"
     :static="props.static"
     :size="props.size"
-    :class="`video-call-position--${props.position}`"
+    :class="[!props.static && `video-call-position--${props.position}`]"
     :username="props.username"
+    :resizable="props.resizable"
+    :hide-header="props.hideHeader"
     class="video-call"
     hide-background
     autoplay
@@ -12,59 +14,55 @@
     @change-size="(payload) => emit('change-size', payload)"
   >
     <template #content="{ size: innerSize }">
+      <slot name="content" :size="innerSize" />
+
+      <slot name="overlay" :size="innerSize">
+        <div class="video-call-overlay"></div>
+      </slot>
+
       <div
-        :class="`video-call-content--${innerSize}`"
-        class="video-call-content"
+        :class="`video-call-content-wrapper--${innerSize}`"
+        class="video-call-content-wrapper"
       >
-        <template v-if="props['receiver:stream'] && !props['sender:video:enabled']">
+        <screenshot-box
+          :src="props['screenshot:src']"
+          :size="innerSize"
+          @zoom="emit(`action:${VideoCallAction.ZoomScreenshot}`)"
+          @close="emit(`action:${VideoCallAction.CloseScreenshot}`)"
+        />
+
+        <template v-if="props['receiver:stream'] && !props['receiver:video:enabled']">
           <div
-            :class="`video-call-sender--${innerSize}`"
-            class="video-call-sender video-call-sender--muted"
+            :class="`video-call-receiver--${innerSize}`"
+            class="video-call-receiver video-call-receiver--muted"
           >
-            <wt-icon :size="receiverVideoMutedIconSizes[innerSize]" icon="video-cam-off--filled" />
+            <wt-icon :size="senderVideoMutedIconSizes[innerSize]" icon="video-cam-off--filled" />
           </div>
         </template>
 
-        <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 v-else-if="props['receiver:stream']">
+          <wt-vidstack-player
+            :stream="props['receiver:stream']"
+            :resizable="false"
+            :class="`video-call-receiver--${innerSize}`"
+            hide-header
+            hide-controls-panel
+            static
+            autoplay
+            muted
+            class="video-call-receiver"
           />
+        </template>
+      </div>
 
-          <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
-              autoplay
-              muted
-              class="video-call-receiver"
-            />
-          </template>
-        </div>
-
-        <div
-          :class="`video-call__indicator--${innerSize}`"
-          class="video-call__indicator"
-        >
-          <recording-indicator
-            v-if="props.recordings"
-            :recording="props.recordings"
-          />
-        </div>
+      <div
+        :class="`video-call__indicator--${innerSize}`"
+        class="video-call__indicator"
+      >
+        <recording-indicator
+          v-if="props.recordings"
+          :recording="props.recordings"
+        />
       </div>
     </template>
 
@@ -127,6 +125,8 @@ const props = withDefaults(defineProps<{
   static?: boolean;
   position?: 'left-bottom' | 'right-bottom';
   size?: ComponentSize
+  hideHeader?: boolean
+  resizable?: boolean;
 
   actions: VideoCallAction[];
   username: string;
@@ -153,12 +153,6 @@ const mainStream = computed(() => {
   return props['receiver:stream'] || props['sender:stream'];
 })
 
-const receiverVideoMutedIconSizes = {
-  [ComponentSize.SM]: ComponentSize.MD,
-  [ComponentSize.MD]: ComponentSize.LG,
-  [ComponentSize.LG]: ComponentSize.XXL,
-}
-
 const senderVideoMutedIconSizes = {
   [ComponentSize.SM]: ComponentSize.MD,
   [ComponentSize.MD]: ComponentSize['4XL'],
@@ -168,6 +162,8 @@ const senderVideoMutedIconSizes = {
 
 <style lang="scss" scoped>
 .video-call {
+  flex: 0 0 auto;
+
   &-position {
     &--left-bottom {
       &.wt-vidstack-player {
@@ -204,6 +200,17 @@ const senderVideoMutedIconSizes = {
     }
   }
 
+  &-overlay {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    background: var(--p-player-wrapper-background);
+  }
+
   &-content {
     height: 100%;
     padding: var(--p-player-counter-position-padding-sm);
@@ -220,27 +227,24 @@ const senderVideoMutedIconSizes = {
     }
 
     &-wrapper {
+      position: absolute;
       display: flex;
       flex-direction: column;
       gap: var(--p-player-control-bar-sm-gap);
-    }
-  }
 
-  &-sender {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: -1;
-    background: var(--p-player-wrapper-background);
+      &--sm {
+        left: var(--p-player-counter-position-padding-sm);
+        bottom: calc(var(--p-player-counter-position-padding-sm) + var(--p-player-control-bar-sm-height));
+      }
 
-    &--sm {
-      &.video-call-sender--muted {
-        padding-bottom: var(--p-player-control-bar-sm-height);
+      &--md {
+        left: var(--p-player-counter-position-padding-md);
+        bottom: var(--p-player-counter-position-padding-md);
+      }
+
+      &--lg {
+        left: var(--p-player-counter-position-padding-lg);
+        bottom: var(--p-player-counter-position-padding-lg);
       }
     }
   }
@@ -318,7 +322,8 @@ const senderVideoMutedIconSizes = {
     justify-content: flex-end;
 
     &--sm {
-      position: relative;
+      right: var(--p-player-counter-position-padding-sm);
+      bottom: calc(var(--p-player-counter-position-padding-sm) + var(--p-player-control-bar-sm-height));
     }
 
     &--md {

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

@@ -2,7 +2,8 @@ type __VLS_Props = {
     title?: string;
     username?: string;
     closable?: boolean;
-    hideDisplayPanel?: boolean;
+    hideHeader?: boolean;
+    hideControlsPanel?: boolean;
 };
 declare var __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {

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

@@ -16,7 +16,8 @@ interface Props {
     static?: boolean;
     stream?: MediaStream;
     size?: ComponentSize;
-    hideDisplayPanel?: boolean;
+    hideHeader?: boolean;
+    hideControlsPanel?: boolean;
     hideBackground?: boolean;
 }
 declare var __VLS_24: {

package/types/locale/en/en.d.ts

@@ -63,6 +63,7 @@ declare const _default: {
         group: string;
         dateTime: string;
         updatedBy: () => "Edited";
+        check: string;
     };
     vocabulary: {
         apply: string;
@@ -106,6 +107,7 @@ declare const _default: {
         expireAt: string;
         destination: string;
         utilizationProgress: string;
+        settings: string;
     };
     date: {
         sec: string;

package/types/locale/es/es.d.ts

@@ -68,6 +68,7 @@ declare namespace _default {
         export let group: string;
         export let dateTime: string;
         export function updatedBy(): string;
+        export let check: string;
     }
     export namespace vocabulary {
         let apply: string;
@@ -111,6 +112,7 @@ declare namespace _default {
         let expireAt: string;
         let destination: string;
         let utilizationProgress: string;
+        let settings: string;
     }
     export namespace date {
         let sec: string;
@@ -582,7 +584,8 @@ declare namespace _default {
         export namespace headerActions {
             export let account: string;
             export let docs: string;
-            export let settings: string;
+            let settings_1: string;
+            export { settings_1 as settings };
             let logout_1: string;
             export { logout_1 as logout };
             export let buildVersion: string;

package/types/locale/i18n.d.ts

@@ -64,6 +64,7 @@ declare const _default: import("vue-i18n").I18n<{
             group: string;
             dateTime: string;
             updatedBy: () => "Edited";
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -107,6 +108,7 @@ declare const _default: import("vue-i18n").I18n<{
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -842,6 +844,7 @@ declare const _default: import("vue-i18n").I18n<{
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -885,6 +888,7 @@ declare const _default: import("vue-i18n").I18n<{
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -1747,6 +1751,7 @@ declare const _default: import("vue-i18n").I18n<{
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -1790,6 +1795,7 @@ declare const _default: import("vue-i18n").I18n<{
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -2654,6 +2660,7 @@ declare const _default: import("vue-i18n").I18n<{
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -2697,6 +2704,7 @@ declare const _default: import("vue-i18n").I18n<{
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -3559,6 +3567,7 @@ declare const _default: import("vue-i18n").I18n<{
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -3602,6 +3611,7 @@ declare const _default: import("vue-i18n").I18n<{
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -4466,6 +4476,7 @@ declare const _default: import("vue-i18n").I18n<{
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -4509,6 +4520,7 @@ declare const _default: import("vue-i18n").I18n<{
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -5373,6 +5385,7 @@ declare const _default: import("vue-i18n").I18n<{
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -5416,6 +5429,7 @@ declare const _default: import("vue-i18n").I18n<{
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -6280,6 +6294,7 @@ declare const _default: import("vue-i18n").I18n<{
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -6323,6 +6338,7 @@ declare const _default: import("vue-i18n").I18n<{
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -7187,6 +7203,7 @@ declare const _default: import("vue-i18n").I18n<{
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -7230,6 +7247,7 @@ declare const _default: import("vue-i18n").I18n<{
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;

package/types/locale/index.d.ts

@@ -74,6 +74,7 @@ export declare const messages: {
             group: string;
             dateTime: string;
             updatedBy: () => "Edited";
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -117,6 +118,7 @@ export declare const messages: {
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -852,6 +854,7 @@ export declare const messages: {
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -895,6 +898,7 @@ export declare const messages: {
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -1757,6 +1761,7 @@ export declare const messages: {
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -1800,6 +1805,7 @@ export declare const messages: {
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -2664,6 +2670,7 @@ export declare const messages: {
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -2707,6 +2714,7 @@ export declare const messages: {
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -3569,6 +3577,7 @@ export declare const messages: {
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -3612,6 +3621,7 @@ export declare const messages: {
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -4476,6 +4486,7 @@ export declare const messages: {
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -4519,6 +4530,7 @@ export declare const messages: {
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -5383,6 +5395,7 @@ export declare const messages: {
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -5426,6 +5439,7 @@ export declare const messages: {
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -6290,6 +6304,7 @@ export declare const messages: {
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -6333,6 +6348,7 @@ export declare const messages: {
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;
@@ -7197,6 +7213,7 @@ export declare const messages: {
             group: string;
             dateTime: string;
             updatedBy: () => string;
+            check: string;
         };
         vocabulary: {
             apply: string;
@@ -7240,6 +7257,7 @@ export declare const messages: {
             expireAt: string;
             destination: string;
             utilizationProgress: string;
+            settings: string;
         };
         date: {
             sec: string;

package/types/locale/kz/kz.d.ts

@@ -68,6 +68,7 @@ declare namespace _default {
         export let group: string;
         export let dateTime: string;
         export function updatedBy(): string;
+        export let check: string;
     }
     export namespace vocabulary {
         let apply: string;
@@ -111,6 +112,7 @@ declare namespace _default {
         let expireAt: string;
         let destination: string;
         let utilizationProgress: string;
+        let settings: string;
     }
     export namespace date {
         let sec: string;
@@ -582,7 +584,8 @@ declare namespace _default {
         export namespace headerActions {
             export let account: string;
             export let docs: string;
-            export let settings: string;
+            let settings_1: string;
+            export { settings_1 as settings };
             let logout_1: string;
             export { logout_1 as logout };
             export let buildVersion: string;

package/types/locale/pl/pl.d.ts

@@ -68,6 +68,7 @@ declare namespace _default {
         export let group: string;
         export let dateTime: string;
         export function updatedBy(): string;
+        export let check: string;
     }
     export namespace vocabulary {
         let apply: string;
@@ -111,6 +112,7 @@ declare namespace _default {
         let expireAt: string;
         let destination: string;
         let utilizationProgress: string;
+        let settings: string;
     }
     export namespace date {
         let sec: string;
@@ -582,7 +584,8 @@ declare namespace _default {
         export namespace headerActions {
             export let account: string;
             export let docs: string;
-            export let settings: string;
+            let settings_1: string;
+            export { settings_1 as settings };
             let logout_1: string;
             export { logout_1 as logout };
             export let buildVersion: string;

package/types/locale/ro/ro.d.ts

@@ -68,6 +68,7 @@ declare namespace _default {
         export let group: string;
         export let dateTime: string;
         export function updatedBy(): string;
+        export let check: string;
     }
     export namespace vocabulary {
         let apply: string;
@@ -111,6 +112,7 @@ declare namespace _default {
         let expireAt: string;
         let destination: string;
         let utilizationProgress: string;
+        let settings: string;
     }
     export namespace date {
         let sec: string;
@@ -582,7 +584,8 @@ declare namespace _default {
         export namespace headerActions {
             export let account: string;
             export let docs: string;
-            export let settings: string;
+            let settings_1: string;
+            export { settings_1 as settings };
             let logout_1: string;
             export { logout_1 as logout };
             export let buildVersion: string;

package/types/locale/ru/ru.d.ts

@@ -66,6 +66,7 @@ declare namespace _default {
         export let group: string;
         export let dateTime: string;
         export function updatedBy(): string;
+        export let check: string;
     }
     export namespace vocabulary {
         let apply: string;
@@ -109,6 +110,7 @@ declare namespace _default {
         let expireAt: string;
         let destination: string;
         let utilizationProgress: string;
+        let settings: string;
     }
     export namespace date {
         let sec: string;
@@ -580,7 +582,8 @@ declare namespace _default {
         export namespace headerActions {
             export let account: string;
             export let docs: string;
-            export let settings: string;
+            let settings_1: string;
+            export { settings_1 as settings };
             let logout_1: string;
             export { logout_1 as logout };
             export let buildVersion: string;

package/types/locale/uk/uk.d.ts

@@ -66,6 +66,7 @@ declare namespace _default {
         export let group: string;
         export let dateTime: string;
         export function updatedBy(): string;
+        export let check: string;
     }
     export namespace vocabulary {
         let apply: string;
@@ -109,6 +110,7 @@ declare namespace _default {
         let expireAt: string;
         let destination: string;
         let utilizationProgress: string;
+        let settings: string;
     }
     export namespace date {
         let sec: string;
@@ -580,7 +582,8 @@ declare namespace _default {
         export namespace headerActions {
             export let account: string;
             export let docs: string;
-            export let settings: string;
+            let settings_1: string;
+            export { settings_1 as settings };
             let logout_1: string;
             export { logout_1 as logout };
             export let buildVersion: string;