@webitel/ui-sdk 25.12.27 → 25.12.29

package/src/scripts/prettifyTime.js

@@ -1,9 +1,13 @@
+import { FormatDateMode } from '../enums';
+import { formatDate } from '../utils';
+
 const prettifyTime = (time) => {
   let date;
   if (time instanceof Date) date = time;
   else if (typeof time === 'number') date = new Date(time);
   else date = new Date(+time);
-  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+  return formatDate(date, FormatDateMode.TIME);
 };
 
 export default prettifyTime;

package/src/utils/formatDate.ts

@@ -0,0 +1,48 @@
+import type { Locale } from 'date-fns/locale';
+import { enUS, es, kk, pl, ro, ru, uk, uz, vi } from 'date-fns/locale';
+import { formatInTimeZone } from 'date-fns-tz';
+
+import { FormatDateMode } from '../enums';
+import { TIMEZONE_STORAGE_KEY } from '../modules/Userinfo/v2/constants/UserSettingsConstants';
+
+const localeMap: Record<string, Locale> = {
+  en: enUS,
+  ru: ru,
+  uk: uk,
+  es: es,
+  kz: kk,
+  pl: pl,
+  ro: ro,
+  uz: uz,
+  vi: vi,
+};
+
+function getUserTimeZone(): string {
+  return (
+    localStorage.getItem(TIMEZONE_STORAGE_KEY) ||
+    Intl.DateTimeFormat().resolvedOptions().timeZone
+  );
+}
+
+function getUserLocale(): Locale {
+  const lang = localStorage.getItem('lang') || 'en';
+  return localeMap[lang] || enUS;
+}
+
+export function formatDate(
+  date: string | number | Date,
+  to: typeof FormatDateMode[keyof typeof FormatDateMode],
+): string {
+  const timeZone = getUserTimeZone();
+  const locale = getUserLocale();
+
+  // https://date-fns.org/v4.1.0/docs/format
+  const formatStaringMap = {
+    date: 'P', //MM/DD/YYYY  11/13/2025 | DD.MM.YYYY 13.11.2025
+    time: 'p', // 3:53 PM | 15:53
+    datetime: 'Ppp', // 11/13/2025, 3:53:00 PM | 13.11.2025, 15:53:00
+    datetimeShort: 'Pp', // 11/13/2025, 3:53 PM | 13.11.2025, 15:53
+  };
+
+  return formatInTimeZone(date, timeZone, formatStaringMap[to], { locale });
+}

package/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './displayText';
+export * from './formatDate';

package/types/components/wt-datepicker/wt-datepicker.vue.d.ts

@@ -9,9 +9,9 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
     value: string | number;
     required: boolean;
     label: string;
+    lang: string;
     placeholder: string;
     mode: string;
-    lang: string;
     clearable: boolean;
     v?: Record<string, any>;
     disabledDates?: Record<string, any>;
@@ -21,9 +21,9 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
         readonly value?: string | number;
         readonly required?: boolean;
         readonly label?: string;
+        readonly lang?: string;
         readonly placeholder?: string;
         readonly mode?: string;
-        readonly lang?: string;
         readonly clearable?: boolean;
         readonly v?: Record<string, any>;
         readonly disabledDates?: Record<string, any>;

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';

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

@@ -1,24 +1,30 @@
-import { ScreenshotStatus } from "../../types/ScreenshotStatus";
-import { WtVidstakPlayerControlsMode } from "../../types/WtVidstackPlayerControlsMode";
-import { WtVidstackPlayerSession } from "../../types/WtVidstackPlayerSession";
 type __VLS_Props = {
     title?: string;
     username?: string;
     closable?: boolean;
-    mode: WtVidstakPlayerControlsMode;
-    session: WtVidstackPlayerSession;
-    screenshotStatus: ScreenshotStatus;
-    screenshotIsLoading: boolean;
+    hideDisplayPanel?: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_16: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    content?: (props: typeof __VLS_16) => any;
+} & {
+    'controls-panel'?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "close-player": () => any;
     "close-session": () => any;
     "make-screenshot": () => any;
     "toggle-record": () => any;
-    "close-player": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onClose-player"?: () => any;
     "onClose-session"?: () => any;
     "onMake-screenshot"?: () => any;
     "onToggle-record"?: () => any;
-    "onClose-player"?: () => any;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, 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/panels/media-controls-panel/components/buttons/fullscreen-button.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onToggle?: (value: boolean) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/types/components/wt-vidstack-player/components/panels/{screen-sharing-control-panel/screen-sharing-control-panel.vue.d.ts → screen-sharing-controls-panel/screen-sharing-controls-panel.vue.d.ts}

@@ -1,7 +1,6 @@
-import { ScreenshotStatus } from "../../../types/ScreenshotStatus";
-import { WtVidstackPlayerSession } from "../../../types/WtVidstackPlayerSession";
+import { ScreenSharingSession, ScreenshotStatus } from "../../../types";
 interface Props {
-    session: WtVidstackPlayerSession;
+    session: ScreenSharingSession;
     screenshotStatus: ScreenshotStatus | null;
     screenshotIsLoading: boolean;
 }

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

@@ -0,0 +1,18 @@
+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;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -1,8 +1,5 @@
 import 'vidstack/player';
 import 'vidstack/player/ui';
-import { ScreenshotStatus } from "./types/ScreenshotStatus";
-import { WtVidstakPlayerControlsMode } from "./types/WtVidstackPlayerControlsMode";
-import { WtVidstackPlayerSession } from "./types/WtVidstackPlayerSession";
 interface Props {
     src: string | {
         src: string;
@@ -14,29 +11,36 @@ interface Props {
     title?: string;
     username?: string;
     closable?: boolean;
+    resizable?: boolean;
     stream?: MediaStream;
-    mode: WtVidstakPlayerControlsMode;
-    session?: WtVidstackPlayerSession;
-    screenshotStatus: ScreenshotStatus;
-    screenshotIsLoading: boolean;
 }
-declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_24: {
+    size: "sm";
+}, __VLS_26: {
+    size: "sm";
+};
+type __VLS_Slots = {} & {
+    'controls-panel'?: (props: typeof __VLS_24) => any;
+} & {
+    content?: (props: typeof __VLS_26) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
-    "close-session": () => any;
-    "make-screenshot": () => any;
-    "toggle-record": () => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClose?: () => any;
-    "onClose-session"?: () => any;
-    "onMake-screenshot"?: () => any;
-    "onToggle-record"?: () => any;
 }>, {
     title: string;
-    mode: WtVidstakPlayerControlsMode;
     username: string;
     autoplay: boolean;
     mime: string;
     closable: boolean;
     muted: boolean;
+    resizable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/enums/FormatDateMode/FormatDateMode.d.ts

@@ -0,0 +1,6 @@
+export declare const FormatDateMode: {
+    readonly DATE: "date";
+    readonly TIME: "time";
+    readonly DATETIME: "datetime";
+    readonly DATETIME_SHORT: "datetimeShort";
+};

package/types/enums/index.d.ts

@@ -8,6 +8,7 @@ import { ChipColor } from './ChipColor/ChipColor';
 import { ComponentSize } from './ComponentSize/ComponentSize';
 import { CrudAction } from './CrudAction/CrudAction';
 import { EmptyCause } from './EmptyCause/EmptyCause';
+import { FormatDateMode } from './FormatDateMode/FormatDateMode';
 import IconAction from './IconAction/IconAction.enum.js';
 import { IconColor } from './IconColor/IconColor';
 import { ProcessingTableColumnType } from './ProcessingTableColumnType/ProcessingTableColumnType';
@@ -23,4 +24,4 @@ import { WfmSections } from './WebitelApplications/WfmSections';
 import { WtApplication } from './WebitelApplications/WtApplication';
 import { WtObject } from './WtObject/WtObject';
 import { WtTypeExtensionFieldKind } from './WtTypeExtensionFieldKind/WtTypeExtensionFieldKind';
-export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ButtonVariant, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, IconAction, IconColor, ProcessingTableColumnType, ProviderIconType, QueueType, QueueTypeName, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WfmSections, WtApplication, WtObject, WtTypeExtensionFieldKind, };
+export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ButtonVariant, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, FormatDateMode, IconAction, IconColor, ProcessingTableColumnType, ProviderIconType, QueueType, QueueTypeName, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WfmSections, WtApplication, WtObject, WtTypeExtensionFieldKind, };

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

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

package/types/modules/CallSession/modules/ScreenSharing/screen-sharing.vue.d.ts

@@ -0,0 +1,16 @@
+import { ScreenSharingSession, ScreenshotStatus } from '../../types';
+interface Props {
+    session: ScreenSharingSession;
+    screenshotStatus: ScreenshotStatus | null;
+    screenshotIsLoading: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "close-session": () => any;
+    "make-screenshot": () => any;
+    "toggle-record": () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onClose-session"?: () => any;
+    "onMake-screenshot"?: () => any;
+    "onToggle-record"?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,20 @@
+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;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

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

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

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

package/types/utils/formatDate.d.ts

@@ -0,0 +1,2 @@
+import { FormatDateMode } from '../enums';
+export declare function formatDate(date: string | number | Date, to: typeof FormatDateMode[keyof typeof FormatDateMode]): string;

package/types/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './displayText';
+export * from './formatDate';

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

@@ -1,195 +0,0 @@
-<template>
-  <media-controls-group
-    class="screen-sharing-control-panel controls-group"
-    :class="`screen-sharing-control-panel--${size}`"
-  >
-    <div
-      class="screen-sharing-control-panel__actions"
-    >
-      <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"
-      />
-    </div>
-
-    <div
-      v-if="isRecording" class="screen-sharing-control-panel__indicator"
-    >
-      <wt-indicator
-        color="error"
-        size="md"
-      />
-
-      <span class="screen-sharing-control-panel__time">{{ convertDuration(secondsElapsed) }}</span>
-    </div>
-  </media-controls-group>
-</template>
-
-<script setup lang="ts">
-import convertDuration from '@webitel/ui-sdk/src/scripts/convertDuration';
-import {computed, defineEmits, inject, onUnmounted, ref, watch} from 'vue';
-
-import {ScreenshotStatus} from "../../../types/ScreenshotStatus";
-import {WtVidstackPlayerSession} from "../../../types/WtVidstackPlayerSession";
-
-interface Props {
-  session: WtVidstackPlayerSession
-  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 isRecording = computed(() => props.session.recordings);
-
-const secondsElapsed = ref(0);
-const timerId = ref<number | null>(null);
-
-function startTimer() {
-  secondsElapsed.value = 0;
-  stopTimer();
-  timerId.value = window.setInterval(() => {
-    secondsElapsed.value++;
-  }, 1000);
-}
-
-function stopTimer() {
-  if (timerId.value !== null) {
-    clearInterval(timerId.value);
-    timerId.value = null;
-  }
-}
-
-const closeSession = () => {
-  emit('close-session')
-};
-
-const makeScreenshot = () => {
-  emit('make-screenshot')
-};
-
-onUnmounted(() => {
-  stopTimer();
-});
-
-watch(isRecording, (newVal) => {
-  if (newVal) {
-    startTimer();
-  } else {
-    stopTimer();
-  }
-});
-</script>
-
-<style scoped lang="scss">
-@use '@webitel/styleguide/typography' as *;
-
-.screen-sharing-control-panel {
-  position: relative;
-  display: flex;
-  justify-content: center;
-
-  &--sm {
-    .screen-sharing-control-panel__actions {
-      width: 100%;
-      border-top-left-radius: 0 !important;
-      border-top-right-radius: 0 !important;
-    }
-
-    .screen-sharing-control-panel__indicator {
-      right: var(--p-player-counter-position-padding-sm);
-      bottom: calc(100% + var(--p-player-counter-position-padding-sm));
-    }
-  }
-
-  &--md {
-    .screen-sharing-control-panel__indicator {
-      right: var(--p-player-counter-position-padding-md);
-      bottom: var(--p-player-counter-position-padding-md);
-    }
-  }
-
-  &--lg {
-    .screen-sharing-control-panel__indicator {
-      right: var(--p-player-counter-position-padding-lg);
-      bottom: var(--p-player-counter-position-padding-lg);
-    }
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--p-player-control-bar-background);
-    box-shadow: var(--elevation-10);
-  }
-
-  &__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);
-    position: absolute;
-
-    // Agreed with @Evgeniy Trahtenberg
-    width: 100px;
-  }
-
-  &__time {
-    @extend %typo-body-1;
-  }
-}
-</style>
-
-