@webitel/ui-sdk 25.12.26 → 25.12.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.12.26",
+  "version": "25.12.28",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -56,7 +56,7 @@
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^13.0.0",
     "@webitel/api-services": "^0.0.81",
-    "@webitel/styleguide": "^24.12.83",
+    "@webitel/styleguide": "^24.12.84",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

package/src/components/wt-button/wt-button.vue

@@ -35,8 +35,7 @@
 
 <script lang="ts" setup>
 import type { ButtonProps } from 'primevue';
-import {computed, defineEmits, defineProps, ref, useAttrs, watch} from 'vue';
-import {useStore} from "vuex";
+import { computed, defineEmits, defineProps, inject,ref, useAttrs, watch } from 'vue';
 
 import { ButtonColor, ButtonVariant, ComponentSize,  } from '../../enums';
 
@@ -81,9 +80,34 @@ const emit = defineEmits(['click']);
 const attrs = useAttrs();
 
 const showLoader = ref(false);
-const store = useStore();
 
-const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
+// @Ler24
+// Compatibility mode for Vuex (old mode) and when there is no Vuex in project (new mode)
+const store = ref(null);
+
+const initStore = async () => {
+  try {
+    const vuex = await import('vuex');
+    store.value = vuex.useStore();
+  } catch (e) {
+    store.value = null;
+  }
+}
+initStore();
+
+const injectDarkMode = inject('darkMode');
+
+const darkMode = computed(() => {
+  if (injectDarkMode?.value) {
+    return injectDarkMode.value;
+  }
+
+  if (store?.value?.getters) {
+    return store?.value?.getters['appearance/DARK_MODE'] ?? false;
+  }
+
+  return false;
+});
 
 /**
  * @author: @Opelsandr Palonnyi

package/src/components/wt-vidstack-player/components/{panels/media-control-panel/components/buttons → buttons}/fullscreen-button.vue

@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import {defineEmits} from "vue";
 
-import WtIconBtn from '../../../../../../wt-icon-btn/wt-icon-btn.vue';
+import WtIconBtn from '../../../wt-icon-btn/wt-icon-btn.vue';
 
 const emit = defineEmits<{
   'toggle': [value: boolean];

package/src/components/wt-vidstack-player/components/{panels/media-control-panel/media-control-panel.vue → controls-group/controls-group.vue}

@@ -1,12 +1,10 @@
 <template>
   <media-controls-group
-    class="media-control-panel controls-group"
-    :class="`media-control-panel--${size}`"
+    class="controls-group"
+    :class="`controls-group--${size}`"
   >
-    <div class="media-control-panel__actions">
-      <play-button />
-      <time-slider />
-      <time-group />
+    <div class="controls-group__actions">
+      <slot />
     </div>
   </media-controls-group>
 </template>
@@ -14,27 +12,32 @@
 <script setup lang="ts">
 import {inject} from "vue";
 
-import PlayButton from "./components/buttons/play-button.vue";
-import TimeSlider from "./components/sliders/time-slider.vue";
-import TimeGroup from "./components/time-group.vue";
-
 const { size } = inject('size');
 
 </script>
 
 <style scoped lang="scss">
-.media-control-panel {
+.controls-group {
   display: flex;
   justify-content: center;
+  max-width: fit-content;
+  align-self: center;
 
   &--sm {
-    .media-control-panel__actions {
+    width: 100%;
+    max-width: 100%;
+
+    .controls-group__actions {
       border-top-left-radius: 0 !important;
       border-top-right-radius: 0 !important;
       gap: calc(var(--p-player-control-bar-sm-gap) * 2);
     }
   }
 
+  &--md {
+    align-self: center;
+  }
+
   &__actions {
     width: 100%;
     display: flex;

package/src/components/wt-vidstack-player/components/index.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';

package/src/components/wt-vidstack-player/components/layouts/video-layout.vue

@@ -4,28 +4,20 @@
     :class="`video-layout--${size}`"
   >
     <video-display-panel
+      v-if="!props.hideDisplayPanel"
       :title="props.title"
       :username="props.username"
       :closable="props.closable"
       @close="emit('close-player')"
     />
 
-    <wt-loader size="sm" color="on-dark"/>
+    <wt-loader size="sm" color="on-dark" />
 
-    <template v-if="props.mode === 'media'">
-      <media-control-panel />
-    </template>
+    <slot name="content" />
 
-    <template v-if="props.mode === 'stream'">
-      <screen-sharing-control-panel
-        :session="props.session"
-        :screenshot-status="props.screenshotStatus"
-        :screenshot-is-loading="screenshotIsLoading"
-        @close-session="emit('close-session')"
-        @make-screenshot="emit('make-screenshot')"
-        @toggle-record="emit('toggle-record')"
-      />
-    </template>
+    <slot name="controls-panel">
+      <media-controls-panel />
+    </slot>
   </media-controls>
 </template>
 
@@ -33,23 +25,16 @@
 import {defineEmits, inject} from "vue";
 
 import WtLoader from "../../../wt-loader/wt-loader.vue";
-import {ScreenshotStatus} from "../../types/ScreenshotStatus";
-import {WtVidstakPlayerControlsMode} from "../../types/WtVidstackPlayerControlsMode";
-import {WtVidstackPlayerSession} from "../../types/WtVidstackPlayerSession";
-import MediaControlPanel from "../panels/media-control-panel/media-control-panel.vue";
-import ScreenSharingControlPanel from "../panels/screen-sharing-control-panel/screen-sharing-control-panel.vue";
+import {MediaControlsPanel} from "../index";
 import VideoDisplayPanel from "../panels/video-display-panel/video-display-panel.vue";
 
-const { size } = inject('size');
+const {size} = inject('size');
 
 const props = defineProps<{
   title?: string;
   username?: string;
   closable?: boolean;
-  mode: WtVidstakPlayerControlsMode;
-  session: WtVidstackPlayerSession
-  screenshotStatus: ScreenshotStatus
-  screenshotIsLoading: boolean
+  hideDisplayPanel?: boolean
 }>();
 
 const emit = defineEmits<{
@@ -62,15 +47,11 @@ const emit = defineEmits<{
 
 <style scoped lang="scss">
 .video-layout {
+  position: relative;
+
   &--sm {
     border-radius: var(--p-player-wrapper-sm-border-radius);
   }
-
-  &--md {
-    .media-control-panel {
-      border-radius: var(--p-player-control-bar-md-border-radius);
-    }
-  }
 }
 
 .controls {
@@ -85,12 +66,6 @@ const emit = defineEmits<{
   transition: all var(--transition) ease-out;
 }
 
-.controls-group {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
 .wt-loader {
   display: flex;
   align-items: center;

package/src/components/wt-vidstack-player/components/panels/media-controls-panel/components/buttons/fullscreen-button.vue

@@ -0,0 +1,40 @@
+<template>
+  <media-fullscreen-button
+    class="fullscreen-button"
+    @media-enter-fullscreen-request="toggleFullScreenRequest(true)"
+    @media-exit-fullscreen-request="toggleFullScreenRequest(false)"
+  >
+    <wt-icon-btn
+      icon="player-enter-fullscreen"
+      color="on-dark"
+      class="fullscreen-button__enter"
+    />
+    <wt-icon-btn
+      icon="player-exit-fullscreen"
+      color="on-dark"
+      class="fullscreen-button__exit"
+    />
+  </media-fullscreen-button>
+</template>
+
+<script setup lang="ts">
+import {defineEmits} from "vue";
+
+import WtIconBtn from '../../../../../../wt-icon-btn/wt-icon-btn.vue';
+
+const emit = defineEmits<{
+  'toggle': [value: boolean];
+}>();
+
+const toggleFullScreenRequest = (val: boolean) => {
+  emit('toggle', val)
+}
+</script>
+
+<style scoped>
+.fullscreen-button[data-active] .fullscreen-button__enter,
+.fullscreen-button:not([data-active]) .fullscreen-button__exit {
+  display: none;
+}
+
+</style>

package/src/components/wt-vidstack-player/components/panels/media-controls-panel/components/buttons/play-button.vue

@@ -0,0 +1,42 @@
+<template>
+  <media-play-button class="play-button">
+    <wt-button
+      :size="size"
+      variant="outlined"
+      color="secondary"
+      icon="play"
+      type="play"
+      rounded
+      contains-icon
+      class="play-button__play-icon"
+    />
+
+    <wt-button
+      :size="size"
+      variant="outlined"
+      color="secondary"
+      icon="pause"
+      type="pause"
+      rounded
+      contains-icon
+      class="play-button__pause-icon"
+    />
+  </media-play-button>
+</template>
+
+<script setup lang="ts">
+import {inject} from "vue";
+
+const {size} = inject('size');
+</script>
+
+<style scoped>
+.play-button {
+  cursor: pointer;
+}
+
+.play-button[data-paused] .play-button__pause-icon,
+.play-button:not([data-paused]) .play-button__play-icon {
+  display: none;
+}
+</style>

package/src/components/wt-vidstack-player/components/panels/{media-control-panel → media-controls-panel}/components/sliders/time-slider.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import WtSlider from "../../../../../../wt-slider/wt-slider.vue";
+import WtSlider from "../../../../../../../components/wt-slider/wt-slider.vue";
 
 </script>
 

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

@@ -0,0 +1,20 @@
+<template>
+  <controls-group class="media-control-panel">
+    <play-button />
+
+    <time-slider />
+
+    <time-group />
+  </controls-group>
+</template>
+
+<script setup lang="ts">
+import {ControlsGroup} from "../../../../../components/wt-vidstack-player/components";
+import PlayButton from "./components/buttons/play-button.vue";
+import TimeSlider from "./components/sliders/time-slider.vue";
+import TimeGroup from "./components/time-group.vue";
+
+</script>
+
+<style scoped lang="scss">
+</style>

package/src/components/wt-vidstack-player/components/panels/screen-sharing-controls-panel/screen-sharing-controls-panel.vue

@@ -0,0 +1,89 @@
+<template>
+  <controls-group class="screen-sharing-controls-panel">
+    <wt-button
+      rounded
+      contains-icon
+      variant="outlined"
+      color="secondary"
+      :loading="props.screenshotIsLoading"
+      :size="size"
+      :icon="screenShotIcon"
+      @click="makeScreenshot"
+    />
+
+    <wt-button
+      rounded
+      contains-icon
+      variant="outlined"
+      color="secondary"
+      :size="size"
+      :icon="recordIcon"
+      @click="emit('toggle-record')"
+    />
+
+    <wt-button
+      icon="sharing-end"
+      class="screen-sharing-control-panel__sharing-end"
+      color="error"
+      variant="outlined"
+      :size="size"
+      rounded
+      contains-icon
+      @click="closeSession"
+    />
+  </controls-group>
+</template>
+
+<script setup lang="ts">
+import {computed, defineEmits, inject} from 'vue';
+
+import {ControlsGroup} 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 {size} = inject('size');
+
+const recordIcon = computed(() => (props.session.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 closeSession = () => {
+  emit('close-session')
+};
+
+const makeScreenshot = () => {
+  emit('make-screenshot')
+};
+</script>
+
+<style scoped lang="scss">
+.screen-sharing-controls-panel {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+</style>
+
+

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>