@webitel/ui-sdk 26.4.54 → 26.4.56

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.4.54",
+	"version": "26.4.56",
 	"private": false,
 	"scripts": {
 		"make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run biome:format:all || true) && npm run publish-lib",

package/src/components/wt-vidstack-player/components/buttons/fullscreen-button.vue

@@ -1,8 +1,8 @@
 <template>
-  <media-fullscreen-button
+  <div
     class="fullscreen-button"
-    @media-enter-fullscreen-request="emit('toggle', true)"
-    @media-exit-fullscreen-request="emit('toggle', false)"
+    :class="{ 'fullscreen-button--active': fullscreen }"
+    @click="emit('toggle', !fullscreen)"
   >
     <wt-icon-btn
       icon="player-enter-fullscreen"
@@ -14,13 +14,15 @@
       color="on-dark"
       class="fullscreen-button__exit"
     />
-  </media-fullscreen-button>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { defineEmits } from 'vue';
-
+import { inject } from 'vue';
 import WtIconBtn from '../../../wt-icon-btn/wt-icon-btn.vue';
+import type { WtVidstackPlayerSizeProvider } from '../../types/WtVidstackPlayerSizeProvider';
+
+const { fullscreen } = inject<WtVidstackPlayerSizeProvider>('size');
 
 const emit = defineEmits<{
 	toggle: [
@@ -29,7 +31,15 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style scoped>.fullscreen-button[data-active] .fullscreen-button__enter,
-.fullscreen-button:not([data-active]) .fullscreen-button__exit {
-display: none;
-}</style>
+<style scoped>
+.fullscreen-button {
+  display: inline-flex;
+  padding: 0;
+  cursor: pointer;
+}
+
+.fullscreen-button--active .fullscreen-button__enter,
+.fullscreen-button:not(.fullscreen-button--active) .fullscreen-button__exit {
+  display: none;
+}
+</style>

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

@@ -58,7 +58,7 @@ import type { WtVidstackPlayerSizeProvider } from '../../../types/WtVidstackPlay
 import FullscreenButton from '../../buttons/fullscreen-button.vue';
 import ToggleButton from '../../toggle-button.vue';
 
-const { size, fullscreen, changeSize } =
+const { size, fullscreen, changeSize, enterFullscreen } =
 	inject<WtVidstackPlayerSizeProvider>('size');
 
 const toggleIcon = computed(() =>
@@ -81,6 +81,7 @@ const handleFullscreen = (value: boolean) => {
 		if (size.value !== ComponentSize.LG) {
 			fullscreen.value = true;
 			changeSize(ComponentSize.LG);
+			enterFullscreen();
 		}
 	} else if (size.value === ComponentSize.LG) {
 		exitFullscreen();

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

@@ -6,4 +6,5 @@ export interface WtVidstackPlayerSizeProvider {
 	size: Ref<ComponentSize>;
 	fullscreen: Ref<boolean>;
 	changeSize: (value: ComponentSize) => void;
+	enterFullscreen: () => void;
 }

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

@@ -1,13 +1,8 @@
 <template>
   <div
-    :class="[
-      `wt-vidstack-player--${size}`,
-      `wt-vidstack-player-video-object-fit--${props.videoObjectFit}`,
-      fullscreen && `wt-vidstack-player--fullscreen`,
-      stretch && `wt-vidstack-player--stretch`,
-      props.static && 'wt-vidstack-player--static',
-      props.hideBackground && 'wt-vidstack-player--hide-background'
-    ]" class="wt-vidstack-player"
+    ref="root"
+    :class="rootClasses"
+    class="wt-vidstack-player"
   >
     <media-player
       ref="player"
@@ -54,7 +49,7 @@
 import 'vidstack/player';
 import 'vidstack/player/ui';
 import type { MediaSrc } from 'vidstack';
-import { computed, provide, ref, toRefs } from 'vue';
+import { computed, provide, ref, toRefs, useTemplateRef } from 'vue';
 
 import { ComponentSize } from '../../enums';
 import { VideoLayout } from './components';
@@ -78,6 +73,7 @@ interface Props {
 	hideExpand?: boolean;
 	stretch?: boolean;
 	videoObjectFit?: 'cover' | 'contain';
+	mirrorVideo?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -101,6 +97,7 @@ const emit = defineEmits<{
 }>();
 
 // const player = useTemplateRef<MediaPlayerElement>('player');
+const rootEl = useTemplateRef<HTMLElement>('root');
 const size = ref(props.size || ComponentSize.SM);
 const fullscreen = ref(false);
 
@@ -109,6 +106,10 @@ const changeSize = (value) => {
 	emit('change-size', value);
 };
 
+const enterFullscreen = () => {
+	rootEl.value?.requestFullscreen();
+};
+
 /** @author liza-pohranichna
  * options: [sm, md, lg]
  */
@@ -116,6 +117,7 @@ provide('size', {
 	size,
 	fullscreen,
 	changeSize,
+	enterFullscreen,
 });
 
 const { src: srcRef, mime: typeRef, stream: streamRef } = toRefs(props);
@@ -126,6 +128,16 @@ const { normalizedSrcObject } = useVidstackSrc({
 	stream: streamRef,
 });
 
+const rootClasses = computed(() => [
+	`wt-vidstack-player--${size.value}`,
+	`wt-vidstack-player-video-object-fit--${props.videoObjectFit}`,
+	props.mirrorVideo && 'wt-vidstack-player--mirror-video',
+	fullscreen.value && 'wt-vidstack-player--fullscreen',
+	props.stretch && 'wt-vidstack-player--stretch',
+	props.static && 'wt-vidstack-player--static',
+	props.hideBackground && 'wt-vidstack-player--hide-background',
+]);
+
 const onCanPlay = (ev: Event) => {
 	if (!props.autoplay) return;
 
@@ -260,6 +272,7 @@ const onCanPlay = (ev: Event) => {
 .wt-vidstack-player--lg .wt-vidstack-player__player {
   display: flex;
   align-items: center;
+  min-height: 100%;
 }
 
 .wt-vidstack-player--lg .wt-vidstack-player__provider {
@@ -271,6 +284,10 @@ const onCanPlay = (ev: Event) => {
   border-radius: 0;
 }
 
+.wt-vidstack-player--fullscreen .wt-vidstack-player__provider :deep(video) {
+  border-radius: 0;
+}
+
 .wt-vidstack-player--static {
   position: relative;
   z-index: 1;
@@ -322,6 +339,10 @@ const onCanPlay = (ev: Event) => {
   object-fit: contain;
 }
 
+.wt-vidstack-player--mirror-video :deep(video) {
+  transform: scaleX(-1);
+}
+
 /*
  * @author Oleksandr Palonnyi
  * WTEL-9094: https://webitel.atlassian.net/browse/WTEL-9094

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

@@ -7,6 +7,7 @@
     :static="props.static"
     :username="props.username"
     :hide-controls-panel="props.hideControlsPanel"
+    :mirror-video="!showSenderScreen"
     autoplay
     class="video-call"
     hide-background
@@ -95,6 +96,7 @@
             class="video-call-sender"
             hide-controls-panel
             hide-video-display-panel
+            mirror-video
             static
           />
         </template>

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

@@ -4,4 +4,5 @@ export interface WtVidstackPlayerSizeProvider {
     size: Ref<ComponentSize>;
     fullscreen: Ref<boolean>;
     changeSize: (value: ComponentSize) => void;
+    enterFullscreen: () => void;
 }

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

@@ -20,6 +20,7 @@ interface Props {
     hideExpand?: boolean;
     stretch?: boolean;
     videoObjectFit?: 'cover' | 'contain';
+    mirrorVideo?: boolean;
 }
 declare var __VLS_26: {}, __VLS_29: {
     size: ComponentSize;