@webitel/ui-sdk 25.12.27 → 25.12.28

package/src/components/wt-vidstack-player/components/panels/video-call-controls-panel/video-call-controls-panel.vue

@@ -0,0 +1,134 @@
+<template>
+  <controls-group class="video-call-controls-panel">
+    <wt-button
+      v-if="props.screenshotCallback"
+      rounded
+      contains-icon
+      variant="outlined"
+      color="secondary"
+      :loading="props.screenshotIsLoading"
+      :size="size"
+      :icon="screenShotIcon"
+      @click="props.screenshotCallback"
+    />
+
+    <wt-button
+      v-if="props.recordingsCallback"
+      rounded
+      contains-icon
+      variant="outlined"
+      color="secondary"
+      :size="size"
+      :icon="recordIcon"
+      @click="props.recordingsCallback"
+    />
+
+    <wt-button
+      v-if="props.micCallback"
+      rounded
+      contains-icon
+      variant="outlined"
+      color="secondary"
+      :size="size"
+      :icon="microphoneIcon"
+      @click="props.micCallback"
+    />
+
+    <wt-button
+      v-if="props.videoCallback"
+      rounded
+      contains-icon
+      variant="outlined"
+      color="secondary"
+      :size="size"
+      :icon="videoCamIcon"
+      @click="props.videoCallback"
+    />
+
+    <wt-button
+      v-if="props.settingsCallback"
+      :size="size"
+      icon="settings"
+      variant="outlined"
+      color="secondary"
+      rounded
+      contains-icon
+      @click="props.settingsCallback"
+    />
+
+    <wt-button
+      v-if="props.chatCallback"
+      :size="size"
+      icon="chat"
+      variant="outlined"
+      color="secondary"
+      rounded
+      contains-icon
+      @click="props.chatCallback"
+    />
+
+    <wt-button
+      v-if="props.callStateCallback"
+      :size="size"
+      :icon="callStateIcon"
+      :color="callStateButtonColor"
+      rounded
+      contains-icon
+      @click="props.callStateCallback"
+    />
+  </controls-group>
+</template>
+
+<script setup lang="ts">
+import {computed, inject} from 'vue';
+
+import {ControlsGroup} from '../../../../../components/wt-vidstack-player/components'
+import {ScreenshotStatus} from '../../../../../modules/CallSession/types';
+
+interface Props {
+  recordings: boolean
+  isMicMuted: boolean
+  isVideoMuted: boolean
+  isCallStarted: boolean
+  screenshotIsLoading: boolean
+  screenshotStatus: ScreenshotStatus | null
+
+  screenshotCallback?: () => void
+  recordingsCallback?: () => void
+  micCallback?: () => void
+  videoCallback?: () => void
+  settingsCallback?: () => void
+  chatCallback?: () => void
+  callStateCallback?: () => void
+}
+
+const props = defineProps<Props>();
+
+const {size} = inject('size');
+
+const microphoneIcon = computed(() => (props.isMicMuted ? 'mic' : 'mic-muted'));
+const videoCamIcon = computed(() => (props.isVideoMuted ? 'video-cam' : 'video-cam-off'));
+const recordIcon = computed(() => (props.recordings ? 'record-stop' : 'record-start'));
+const screenShotIcon = computed(() => {
+  switch (props.screenshotStatus) {
+    case 'done':
+      return 'screenshot-done';
+    case 'error':
+      return 'screenshot-false';
+    default:
+      return 'screenshot';
+  }
+});
+const callStateIcon = computed(() => (props.isCallStarted ? 'call-end--filled' : 'call--filled'));
+const callStateButtonColor = computed(() => (props.isCallStarted ? 'error' : 'success'));
+</script>
+
+<style scoped lang="scss">
+.video-call-controls-panel {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+</style>
+
+

package/src/components/wt-vidstack-player/components/panels/video-display-panel/video-display-panel.vue

@@ -42,8 +42,8 @@ import {defineEmits, defineProps, inject, onBeforeUnmount, onMounted} from 'vue'
 import {ComponentSize} from "../../../../../enums";
 import WtAvatar from "../../../../wt-avatar/wt-avatar.vue";
 import WtIconBtn from "../../../../wt-icon-btn/wt-icon-btn.vue";
+import FullscreenButton from "../../buttons/fullscreen-button.vue";
 import ToggleButton from "../../toggle-button.vue";
-import FullscreenButton from "../media-control-panel/components/buttons/fullscreen-button.vue";
 
 const { size, changeSize } = inject('size');
 

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

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="recording-indicator"
+  >
+    <wt-indicator
+      color="error"
+      size="md"
+    />
+
+    <span class="recording-indicator__time">{{ durationTime }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, onMounted, ref} from 'vue';
+
+import convertDuration from '../../../../scripts/convertDuration';
+
+const secondsElapsed = ref(0);
+const timerId = ref<number | null>(null);
+
+const startTimer = () => {
+  secondsElapsed.value = 0;
+  stopTimer();
+  timerId.value = window.setInterval(() => {
+    secondsElapsed.value++;
+  }, 1000);
+}
+
+const stopTimer = () => {
+  if (timerId.value !== null) {
+    clearInterval(timerId.value);
+    timerId.value = null;
+  }
+}
+
+const durationTime = computed(() => convertDuration(secondsElapsed.value))
+
+onMounted(() => {
+  startTimer();
+})
+</script>
+
+<style lang="scss">
+@use '@webitel/styleguide/typography' as *;
+
+.recording-indicator {
+  background: var(--content-wrapper-color);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--p-player-counter-gap);
+  padding: var(--p-player-counter-padding);
+  border-radius: var(--p-player-counter-border-radius);
+  box-shadow: var(--elevation-10);
+
+  // Agreed with @Evgeniy Trahtenberg
+  width: 100px;
+
+  &__time {
+    @extend %typo-body-1;
+  }
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="wt-vidstack-player"
-    :class="[`wt-vidstack-player--${size}`]"
+    :class="{[`wt-vidstack-player--${size}`]: props.resizable}"
   >
     <media-player
       ref="player"
@@ -17,20 +17,23 @@
       <media-provider
         class="wt-vidstack-player__provider"
       ></media-provider>
+
       <video-layout
+        v-if="props.resizable"
         :closable="props.closable"
         :autoplay="props.autoplay"
         :title="props.title"
         :username="props.username"
-        :session="props.session"
-        :screenshot-status="props.screenshotStatus"
-        :screenshot-is-loading="screenshotIsLoading"
-        :mode="mode"
         @close-player="emit('close')"
-        @close-session="emit('close-session')"
-        @make-screenshot="emit('make-screenshot')"
-        @toggle-record="emit('toggle-record')"
-      />
+      >
+        <template #controls-panel>
+          <slot name="controls-panel" :size="size" />
+        </template>
+
+        <template #content>
+          <slot name="content" :size="size" />
+        </template>
+      </video-layout>
 
     </media-player>
   </div>
@@ -40,23 +43,11 @@
 import 'vidstack/player';
 import 'vidstack/player/ui';
 
-import type { MediaPlayerElement } from 'vidstack/elements';
-import {
-  computed,
-  defineEmits,
-  defineProps,
-  onBeforeUnmount,
-  onMounted,
-  provide,
-  ref,
-  useTemplateRef
-} from 'vue';
+import type {MediaPlayerElement} from 'vidstack/elements';
+import {computed, defineEmits, defineProps, onBeforeUnmount, onMounted, provide, ref, useTemplateRef} from 'vue';
 
 import {ComponentSize} from '../../enums';
-import VideoLayout from './components/layouts/video-layout.vue';
-import {ScreenshotStatus} from "./types/ScreenshotStatus";
-import {WtVidstakPlayerControlsMode} from "./types/WtVidstackPlayerControlsMode";
-import {WtVidstackPlayerSession} from "./types/WtVidstackPlayerSession";
+import {VideoLayout} from "./components";
 
 interface Props {
   src: string | { src: string; type?: string };
@@ -66,11 +57,8 @@ interface Props {
   title?: string;
   username?: string;
   closable?: boolean;
+  resizable?: boolean;
   stream?: MediaStream
-  mode: WtVidstakPlayerControlsMode;
-  session?: WtVidstackPlayerSession
-  screenshotStatus: ScreenshotStatus
-  screenshotIsLoading: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -80,14 +68,11 @@ const props = withDefaults(defineProps<Props>(), {
   title: '',
   username: '',
   closable: false,
-  mode: 'media',
+  resizable: true,
 });
 
 const emit = defineEmits<{
   'close': [],
-  'close-session': [],
-  'make-screenshot': [],
-  'toggle-record': [],
 }>()
 
 const player = useTemplateRef<MediaPlayerElement>('player');
@@ -100,8 +85,8 @@ const changeSize = (value) => {
 /** @author liza-pohranichna
  * options: [sm, md, lg]
  * lg-size is fullscreen
-*/
-provide('size', { size, changeSize });
+ */
+provide('size', {size, changeSize});
 
 const normalizedType = computed(() => { // https://vidstack.io/docs/wc/player/core-concepts/loading/?styling=css#source-types
   if (props.mime) return props.mime;
@@ -116,7 +101,7 @@ const normalizedType = computed(() => { // https://vidstack.io/docs/wc/player/co
 
 const playerSrc = computed(() => {
   if (typeof props.src === 'string') {
-    return { src: props.src, type: normalizedType.value };
+    return {src: props.src, type: normalizedType.value};
   }
   return {
     src: props.src?.src || '',
@@ -129,7 +114,7 @@ const playerSrc = computed(() => {
  * A brief delay ensures the internal <video> element is ready before playback starts.
  */
 onMounted(() => {
-  if (player.value && props.mode === 'stream' && props.stream) {
+  if (player.value && props.stream) {
     const videoEl = player.value.querySelector('video')
 
     videoEl.addEventListener("loadedmetadata", async () => {
@@ -162,8 +147,6 @@ onBeforeUnmount(() => {
   &__player {
     padding: 0;
     margin: 0;
-    min-width: 0;
-    width: 100%;
   }
 
   &--sm {
@@ -181,8 +164,7 @@ onBeforeUnmount(() => {
     .wt-vidstack-player__provider {
       display: block;
       height: 100%;
-      // Control bar sm height
-      padding-bottom: 48px;
+      padding-bottom: var(--p-player-control-bar-sm-height);
     }
   }
 
@@ -207,6 +189,7 @@ onBeforeUnmount(() => {
         display: flex;
         align-items: center;
       }
+
       &__provider {
         width: 100%;
         min-width: 0;

package/src/modules/CallSession/index.ts

@@ -0,0 +1,4 @@
+import ScreenSharing from './modules/ScreenSharing/screen-sharing.vue';
+import VideoCall from './modules/VideoCall/video-call.vue';
+
+export { ScreenSharing, VideoCall };

package/src/modules/CallSession/modules/ScreenSharing/screen-sharing.vue

@@ -0,0 +1,85 @@
+<template>
+  <wt-vidstack-player
+    v-bind="attrs"
+    class="screen-sharing"
+    autoplay
+    muted
+    closable
+  >
+    <template #content="{ size }">
+      <div
+        :class="`screen-sharing__indicator--${size}`"
+        class="screen-sharing__indicator"
+      >
+        <recording-indicator
+          v-if="props.session.recordings"
+          :recording="props.session.recordings"
+        />
+      </div>
+    </template>
+
+    <template #controls-panel>
+      <screen-sharing-controls-panel
+        :session="props.session"
+        :screenshot-status="props.screenshotStatus"
+        :screenshot-is-loading="props.screenshotIsLoading"
+        @close-session="emit('close-session')"
+        @make-screenshot="emit('make-screenshot')"
+        @toggle-record="emit('toggle-record')"
+      />
+    </template>
+  </wt-vidstack-player>
+</template>
+
+<script setup lang="ts">
+import {WtVidstackPlayer} from '@webitel/ui-sdk/components';
+import {defineEmits, useAttrs} from 'vue';
+
+import {RecordingIndicator,ScreenSharingControlsPanel} from "../../../../components/wt-vidstack-player/components";
+import {ScreenSharingSession, ScreenshotStatus} from '../../types';
+
+interface Props {
+  session: ScreenSharingSession
+  screenshotStatus: ScreenshotStatus | null
+  screenshotIsLoading: boolean
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'close-session': [],
+  'make-screenshot': [],
+  'toggle-record': [],
+}>()
+
+const attrs = useAttrs();
+</script>
+
+<style lang="scss" scoped>
+.screen-sharing {
+
+  &__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;
+    }
+
+    &--md {
+      right: var(--p-player-counter-position-padding-md);
+      bottom: var(--p-player-counter-position-padding-md);
+    }
+
+    &--lg {
+      right: var(--p-player-counter-position-padding-lg);
+      bottom: var(--p-player-counter-position-padding-lg);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,165 @@
+<template>
+  <wt-vidstack-player
+    :stream="mainStream"
+    class="video-call"
+    autoplay
+    muted
+  >
+    <template #content="{ size }">
+      <div
+        :class="`video-call-content--${size}`"
+        class="video-call-content"
+      >
+        <wt-vidstack-player
+          :stream="props.receiver"
+          :resizable="false"
+          :class="`video-call-receiver--${size}`"
+          static
+          autoplay
+          muted
+          class="receiver"
+        />
+
+        <div
+          :class="`video-call__indicator--${size}`"
+          class="video-call__indicator"
+        >
+          <recording-indicator
+            v-if="props.recordings"
+            :recording="props.recordings"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #controls-panel>
+      <video-call-controls-panel
+        :recordings="props.recordings"
+        :is-mic-muted="props.isMicMuted"
+        :is-video-muted="props.isVideoMuted"
+        :is-call-started="props.isCallStarted"
+        :screenshot-status="props.screenshotStatus"
+        :screenshot-is-loading="props.screenshotIsLoading"
+        :screenshot-callback="props.screenshotCallback"
+        :recordings-callback="props.recordingsCallback"
+        :mic-callback="props.micCallback"
+        :video-callback="props.videoCallback"
+        :settings-callback="props.settingsCallback"
+        :chat-callback="props.chatCallback"
+        :call-state-callback="props.callStateCallback"
+      />
+    </template>
+  </wt-vidstack-player>
+</template>
+
+<script setup lang="ts">
+import {WtVidstackPlayer} from '@webitel/ui-sdk/components';
+import {computed} from 'vue';
+
+import {RecordingIndicator, VideoCallControlsPanel} from "../../../../components/wt-vidstack-player/components";
+import {ScreenshotStatus} from '../../types';
+
+interface Props {
+  sender: MediaStream
+  receiver: MediaStream
+  isMicMuted: boolean
+  isVideoMuted: boolean
+  isCallStarted: boolean
+  recordings: boolean
+  screenshotStatus: ScreenshotStatus | null
+  screenshotIsLoading: boolean
+
+  screenshotCallback?: () => void
+  recordingsCallback?: () => void
+  micCallback?: () => void
+  videoCallback?: () => void
+  settingsCallback?: () => void
+  chatCallback?: () => void
+  callStateCallback?: () => void
+}
+
+const props = defineProps<Props>();
+
+const mainStream = computed(() => props.receiver || props.sender)
+</script>
+
+<style lang="scss" scoped>
+.video-call {
+
+  &-content {
+    height: 100%;
+    padding: var(--p-player-counter-position-padding-sm);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    &--sm {
+      position: relative;
+    }
+  }
+
+  &-receiver {
+    flex: 0 0 auto;
+
+    &--sm {
+      :deep(video) {
+        border-radius: var(--p-player-cam-preview-sm-border-radius);
+      }
+      width: var(--p-player-cam-preview-sm-width);
+      height: var(--p-player-cam-preview-sm-height);
+      position: relative;
+      right: 0;
+      bottom: 0;
+    }
+
+    &--md {
+      :deep(video) {
+        border-radius: var(--p-player-cam-preview-md-border-radius);
+      }
+      width: var(--p-player-cam-preview-md-width);
+      height: var(--p-player-cam-preview-md-height);
+      position: relative;
+      right: 0;
+      bottom: 0;
+    }
+
+    &--lg {
+      :deep(video) {
+        border-radius: var(--p-player-cam-preview-lg-border-radius);
+      }
+      width: var(--p-player-cam-preview-lg-width);
+      height: var(--p-player-cam-preview-lg-height);
+      position: relative;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  &__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;
+    }
+
+    &--md {
+      right: var(--p-player-counter-position-padding-md);
+      bottom: var(--p-player-counter-position-padding-md);
+    }
+
+    &--lg {
+      right: var(--p-player-counter-position-padding-lg);
+      bottom: var(--p-player-counter-position-padding-lg);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,7 @@
+export interface ScreenSharingSession {
+  close: () => void;
+  screenshot: () => void;
+  stopRecord: () => void;
+  startRecord: () => void;
+  recordings: boolean;
+}

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

@@ -0,0 +1,4 @@
+import { ScreenSharingSession } from './ScreenSharingSession';
+import { ScreenshotStatus } from './ScreenshotStatus';
+
+export { ScreenSharingSession, ScreenshotStatus };

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

@@ -1,10 +1,9 @@
 const generateCustomSharingPanelSizeCss = ({ size, dt }) => `
-        .screen-sharing-control-panel--${size}, .media-control-panel--${size} {
+        .controls-group--${size} {
             padding: ${dt(`player-control-bar-position-padding-${size}`)};
         }
         
-        .screen-sharing-control-panel--${size} .screen-sharing-control-panel__actions,
-         .media-control-panel--${size} .media-control-panel__actions {
+        .controls-group--${size} .controls-group__actions {
             gap: ${dt(`player-control-bar-${size}-gap`)};
             border-radius: ${dt(`player-control-bar-${size}-border-radius`)};
             padding: ${dt(`player-control-bar-${size}-padding`)};

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

@@ -0,0 +1,12 @@
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,6 @@
+export { default as ControlsGroup } from './controls-group/controls-group.vue';
+export { default as VideoLayout } from './layouts/video-layout.vue';
+export { default as MediaControlsPanel } from './panels/media-controls-panel/media-controls-panel.vue';
+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';