@webitel/ui-sdk 25.10.69 → 25.10.71

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

@@ -1,5 +1,8 @@
 <template>
-  <media-controls-group class="screen-sharing-control-panel" :class="`screen-sharing-control-panel--${size}`">
+  <media-controls-group
+    class="screen-sharing-control-panel controls-group"
+    :class="`screen-sharing-control-panel--${size}`"
+  >
     <div
       class="screen-sharing-control-panel__actions"
     >
@@ -10,7 +13,7 @@
         color="secondary"
         :size="size"
         :icon="screenShotIcon"
-        @click="makeScreenshot"
+        @click="emit('make-screenshot')"
       />
 
       <wt-button
@@ -20,7 +23,7 @@
         color="secondary"
         :size="size"
         :icon="recordIcon"
-        @click="toggleRecordAction"
+        @click="emit('toggle-record')"
       />
 
       <wt-button
@@ -52,25 +55,28 @@
 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";
 
-type ScreenshotStatus = 'done' | 'error'
-
 interface Props {
   session: WtVidstackPlayerSession
+  screenshotStatus: ScreenshotStatus | null
 }
+
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
   'close-session': [],
+  'make-screenshot': [],
+  'toggle-record': [],
 }>()
 
 const {size} = inject('size');
-const screenshotStatus = ref<ScreenshotStatus | null>(null)
 
 const recordIcon = computed(() => (props.session.recordings ? 'record-stop' : 'record-start'));
-const getScreenshotIcon = (status?: ScreenshotStatus) => {
-  switch (status) {
+
+const screenShotIcon = computed(() => {
+  switch (props.screenshotStatus) {
     case 'done':
       return 'screenshot-done';
     case 'error':
@@ -78,9 +84,7 @@ const getScreenshotIcon = (status?: ScreenshotStatus) => {
     default:
       return 'screenshot';
   }
-}
-
-const screenShotIcon = computed(() => getScreenshotIcon(screenshotStatus.value));
+});
 const isRecording = computed(() => props.session.recordings);
 
 const secondsElapsed = ref(0);
@@ -101,32 +105,7 @@ function stopTimer() {
   }
 }
 
-const toggleRecordAction = () => {
-  if (isRecording.value) {
-    props.session.stopRecord();
-  } else {
-    props.session.startRecord();
-  }
-};
-
-const makeScreenshot = async () => {
-  try {
-    await props.session.screenshot()
-    changeScreenshotStatus('done')
-  } catch {
-    changeScreenshotStatus('error')
-  }
-};
-
-const changeScreenshotStatus = (status: ScreenshotStatus) => {
-  screenshotStatus.value = status;
-  setTimeout(() => {
-    screenshotStatus.value = null;
-  }, 2000);
-}
-
 const closeSession = () => {
-  props.session.close()
   emit('close-session')
 };
 
@@ -152,8 +131,6 @@ watch(isRecording, (newVal) => {
   justify-content: center;
 
   &--sm {
-    padding: var(--p-player-control-bar-position-padding-sm);
-
     .screen-sharing-control-panel__actions {
       width: 100%;
       border-top-left-radius: 0 !important;
@@ -167,8 +144,6 @@ watch(isRecording, (newVal) => {
   }
 
   &--md {
-    padding: var(--p-player-control-bar-position-padding-md);
-
     .screen-sharing-control-panel__indicator {
       right: var(--p-player-counter-position-padding-md);
       bottom: var(--p-player-counter-position-padding-md);
@@ -176,8 +151,6 @@ watch(isRecording, (newVal) => {
   }
 
   &--lg {
-    padding: var(--p-player-control-bar-position-padding-lg);
-
     .screen-sharing-control-panel__indicator {
       right: var(--p-player-counter-position-padding-lg);
       bottom: var(--p-player-counter-position-padding-lg);

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

@@ -15,16 +15,16 @@
       </span>
     </div>
     <div class="video-display-panel__controls">
+      <fullscreen-button
+        @toggle="handleFullscreen"
+      />
       <toggle-button
         v-if="size !== ComponentSize.LG"
-        primary-icon="collapse"
-        secondary-icon="expand"
+        primary-icon="expand"
+        secondary-icon="collapse"
         color="on-dark"
         @toggle="handlePlayerSize"
       />
-      <fullscreen-button
-        @toggle="handleFullscreen"
-      />
       <wt-icon-btn
         v-if="props.closable"
         icon="close"
@@ -73,11 +73,10 @@ const handlePlayerSize = (value: boolean) => {
   display: flex;
   justify-content: space-between;
   padding: var(--p-player-headline-sm-padding);
-  background: var(--p-player-head-line-background);
+  background: var(--p-player-head-line-hover-background);
   color: var(--p-player-head-line-color);
   transition: all var(--transition) ease-in-out;
   backdrop-filter: blur(var(--p-player-head-line-blur));
-  opacity: 0;
 
   &__title {
     @extend %typo-body-1-bold;

package/src/components/wt-vidstack-player/types/ScreenshotStatus.ts

@@ -0,0 +1 @@
+export type ScreenshotStatus = 'done' | 'error';

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

@@ -23,9 +23,12 @@
         :title="props.title"
         :username="props.username"
         :session="props.session"
+        :screenshot-status="props.screenshotStatus"
         :mode="mode"
         @close-player="emit('close')"
         @close-session="emit('close-session')"
+        @make-screenshot="emit('make-screenshot')"
+        @toggle-record="emit('toggle-record')"
       />
 
     </media-player>
@@ -41,17 +44,16 @@ import {
   computed,
   defineEmits,
   defineProps,
-  nextTick,
   onBeforeUnmount,
   onMounted,
   provide,
   ref,
-  useTemplateRef,
-  watch
+  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";
 
@@ -66,6 +68,7 @@ interface Props {
   stream?: MediaStream
   mode: WtVidstakPlayerControlsMode;
   session?: WtVidstackPlayerSession
+  screenshotStatus: ScreenshotStatus
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -81,6 +84,8 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   'close': [],
   'close-session': [],
+  'make-screenshot': [],
+  'toggle-record': [],
 }>()
 
 const player = useTemplateRef<MediaPlayerElement>('player');
@@ -205,29 +210,15 @@ onBeforeUnmount(() => {
     }
   }
 }
-
-media-player[data-hocus] { // hover or focus within https://vidstack.io/docs/wc/player/components/core/player/?styling=css#player.attrs
-  .controls-group {
-    opacity: 1;
-  }
-
-  .video-display-panel {
-    background: var(--p-player-head-line-hover-background);
-
-    :deep(.video-display-panel) { // show panel buttons on hover
-      opacity: 1;
-    }
-  }
-}
 </style>
 
 <style lang="scss">
 .wt-vidstack-player {
   video {
     height: 100%;
-    object-fit: fill;width: 100%;
+    object-fit: contain;
+    width: 100%;
     min-width: 0;
-
   }
 }
 </style>

package/src/enums/index.ts

@@ -20,6 +20,7 @@ import { AuditorSections } from './WebitelApplications/AuditorSections';
 import { CrmSections } from './WebitelApplications/CrmSections';
 import { SupervisorSections } from './WebitelApplications/SupervisorSections';
 import WebitelApplications from './WebitelApplications/WebitelApplications.enum.js';
+import { WfmSections } from './WebitelApplications/WfmSections';
 import { WtApplication } from './WebitelApplications/WtApplication';
 import { WtObject } from './WtObject/WtObject';
 import { WtTypeExtensionFieldKind } from './WtTypeExtensionFieldKind/WtTypeExtensionFieldKind';
@@ -46,6 +47,7 @@ export {
   SupervisorSections,
   TypesExportedSettings,
   WebitelApplications,
+  WfmSections,
   WtApplication,
   WtObject,
   WtTypeExtensionFieldKind,

package/src/modules/Userinfo/v2/stores/accessStore.ts

@@ -129,7 +129,7 @@ export const createUserAccessStore = ({
       access: rawVisibilityAccess,
     }: CreateUserAccessStoreRawAccess) => {
       // Enable bypass mode if access data is null/undefined
-      bypassMode.value = rawVisibilityAccess === null;
+      // bypassMode.value = rawVisibilityAccess === null;
 
       globalAccess.value = makeGlobalAccessMap(rawGlobalAccess);
       scopeAccess.value = makeScopeAccessMap(rawScopeAccess);

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

@@ -1,5 +1,10 @@
 const generateCustomSharingPanelSizeCss = ({ size, dt }) => `
-        .screen-sharing-control-panel--${size} .screen-sharing-control-panel__actions {
+        .screen-sharing-control-panel--${size}, .media-control-panel--${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 {
             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/layouts/video-layout.vue.d.ts

@@ -1,3 +1,4 @@
+import { ScreenshotStatus } from "../../types/ScreenshotStatus";
 import { WtVidstakPlayerControlsMode } from "../../types/WtVidstackPlayerControlsMode";
 import { WtVidstackPlayerSession } from "../../types/WtVidstackPlayerSession";
 type __VLS_Props = {
@@ -6,12 +7,17 @@ type __VLS_Props = {
     closable?: boolean;
     mode: WtVidstakPlayerControlsMode;
     session: WtVidstackPlayerSession;
+    screenshotStatus: ScreenshotStatus;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "close-session": () => any;
+    "make-screenshot": () => any;
+    "toggle-record": () => any;
     "close-player": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onClose-session"?: () => any;
+    "onMake-screenshot"?: () => any;
+    "onToggle-record"?: () => any;
     "onClose-player"?: () => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,10 +1,16 @@
+import { ScreenshotStatus } from "../../../types/ScreenshotStatus";
 import { WtVidstackPlayerSession } from "../../../types/WtVidstackPlayerSession";
 interface Props {
     session: WtVidstackPlayerSession;
+    screenshotStatus: ScreenshotStatus | null;
 }
 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/components/wt-vidstack-player/types/ScreenshotStatus.d.ts

@@ -0,0 +1 @@
+export type ScreenshotStatus = 'done' | 'error';

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

@@ -1,5 +1,6 @@
 import 'vidstack/player';
 import 'vidstack/player/ui';
+import { ScreenshotStatus } from "./types/ScreenshotStatus";
 import { WtVidstakPlayerControlsMode } from "./types/WtVidstackPlayerControlsMode";
 import { WtVidstackPlayerSession } from "./types/WtVidstackPlayerSession";
 interface Props {
@@ -16,13 +17,18 @@ interface Props {
     stream?: MediaStream;
     mode: WtVidstakPlayerControlsMode;
     session?: WtVidstackPlayerSession;
+    screenshotStatus: ScreenshotStatus;
 }
 declare const _default: 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;

package/types/enums/index.d.ts

@@ -19,7 +19,8 @@ import { AuditorSections } from './WebitelApplications/AuditorSections';
 import { CrmSections } from './WebitelApplications/CrmSections';
 import { SupervisorSections } from './WebitelApplications/SupervisorSections';
 import WebitelApplications from './WebitelApplications/WebitelApplications.enum.js';
+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, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WtApplication, WtObject, WtTypeExtensionFieldKind, };
+export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ButtonVariant, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, IconAction, IconColor, ProcessingTableColumnType, ProviderIconType, QueueType, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WfmSections, WtApplication, WtObject, WtTypeExtensionFieldKind, };