@webitel/ui-sdk 25.12.27 → 25.12.28

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/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/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>
-
-