@webitel/ui-sdk 26.4.55 → 26.4.56

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.4.55",
+	"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,5 +1,6 @@
 <template>
   <div
+    ref="root"
     :class="rootClasses"
     class="wt-vidstack-player"
   >
@@ -48,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';
@@ -96,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);
 
@@ -104,6 +106,10 @@ const changeSize = (value) => {
 	emit('change-size', value);
 };
 
+const enterFullscreen = () => {
+	rootEl.value?.requestFullscreen();
+};
+
 /** @author liza-pohranichna
  * options: [sm, md, lg]
  */
@@ -111,6 +117,7 @@ provide('size', {
 	size,
 	fullscreen,
 	changeSize,
+	enterFullscreen,
 });
 
 const { src: srcRef, mime: typeRef, stream: streamRef } = toRefs(props);
@@ -265,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 {
@@ -276,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;

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