@webitel/ui-sdk 25.10.51 → 25.10.52

package/src/components/index.js

@@ -70,6 +70,7 @@ import WtTimepicker from './wt-timepicker/wt-timepicker.vue';
 import WtTooltip from './wt-tooltip/wt-tooltip.vue';
 import WtTree from './wt-tree/wt-tree.vue';
 import WtTreeTable from './wt-tree-table/wt-tree-table.vue';
+import WtVidstackPlayer from './wt-vidstack-player/wt-vidstack-player.vue';
 
 const Components = {
   WtActionBar,
@@ -143,6 +144,7 @@ const Components = {
   WtStartPage,
   WtSelectionPopup,
   WtDisplayChipItems,
+  WtVidstackPlayer,
 };
 
 export {
@@ -218,6 +220,7 @@ export {
   WtTree,
   WtTreeTable,
   WtTypeExtensionValueInput,
+  WtVidstackPlayer,
 };
 
 export default Components;

package/src/components/wt-loader/wt-loader.vue

@@ -7,6 +7,7 @@
   <wt-spinner-loader
     v-else
     class="wt-loader"
+    :color="color"
     :size="size"
   />
 </template>

package/src/components/wt-popup/_mixins.scss

@@ -0,0 +1,31 @@
+  /** @author @liza-pohranichna
+  * need to reuse popup styles for MD size in player https://webitel.atlassian.net/browse/WTEL-7723
+ */
+
+@mixin popup-wrapper {
+  display: flex;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--popup-wrapper-z-index);
+  background: var(--wt-popup-shadow-color);
+}
+
+@mixin popup-container() {
+  display: flex;
+  flex-direction: column;
+  gap: var(--popup-sections-gap);
+  z-index: 1;
+  margin: var(--popup-padding);
+  box-shadow: var(--elevation-10);
+  border-radius: var(--border-radius);
+  background: var(--wt-popup-background-color);
+  padding: var(--popup-padding);
+  max-height: var(--popup-max-height);
+}
+
+

package/src/components/wt-popup/wt-popup.vue

@@ -177,18 +177,12 @@ watch(wrapperShown, (value) => {
 <style lang="scss" scoped>
 @use '@webitel/styleguide/typography' as *;
 @use '@webitel/styleguide/scroll' as *;
-
+@use 'mixins' as *;
 .wt-popup {
-  display: flex;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  justify-content: center;
-  align-items: center;
-  z-index: var(--popup-wrapper-z-index);
-  background: var(--wt-popup-shadow-color);
+  /** @author liza-pohranichna
+  * need to reuse popup-wrapper styles in player component https://webitel.atlassian.net/browse/WTEL-7723
+  */
+  @include popup-wrapper;
 
   &--size {
     &-xs {
@@ -218,16 +212,7 @@ watch(wrapperShown, (value) => {
 }
 
 .wt-popup__popup {
-  display: flex;
-  flex-direction: column;
-  gap: var(--popup-sections-gap);
-  z-index: 1;
-  margin: var(--popup-padding);
-  box-shadow: var(--elevation-10);
-  border-radius: var(--border-radius);
-  background: var(--wt-popup-background-color);
-  padding: var(--popup-padding);
-  max-height: var(--popup-max-height);
+  @include popup-container;
 }
 
 .wt-popup__header {
@@ -280,3 +265,4 @@ watch(wrapperShown, (value) => {
   }
 }
 </style>
+

package/src/components/wt-table/wt-table.vue

@@ -467,6 +467,11 @@ const virtualScroll = computed(() => {
   @extend %wt-scrollbar;
 }
 
+//style for virtual scroller
+.wt-table :deep(.p-virtualscroller) {
+  @extend %wt-scrollbar;
+}
+
 .wt-table__th__content {
   @extend %typo-body-1-bold;
   width: 0;

package/src/components/wt-vidstack-player/components/layouts/video-layout.vue

@@ -0,0 +1,112 @@
+<template>
+  <media-controls
+    class="video-layout controls"
+    :class="`video-layout--${size}`"
+  >
+    <video-display-panel
+      :title="props.title"
+      :username="props.username"
+      :closable="props.closable"
+      @close="emit('close-player')"
+    />
+
+    <wt-loader size="sm" color="on-dark"/>
+
+    <media-control-panel />
+  </media-controls>
+</template>
+
+<script setup lang="ts">
+import {defineEmits, inject} from "vue";
+
+import WtLoader from "../../../wt-loader/wt-loader.vue";
+import MediaControlPanel from "../panels/media-control-panel/media-control-panel.vue";
+import VideoDisplayPanel from "../panels/video-display-panel/video-display-panel.vue";
+
+const { size } = inject('size');
+
+const props = defineProps<{
+  title?: string;
+  username?: string;
+  closable?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'close-player': [],
+}>();
+
+</script>
+
+<style scoped lang="scss">
+.video-layout {
+
+  .video-display-panel {
+    opacity: 1;
+
+    :deep(.video-display-panel__controls) { // hide panel buttons
+      opacity: 0;
+      transition: all var(--transition) ease-out;
+    }
+  }
+
+  &--sm {
+    border-radius: var(--p-player-wrapper-sm-border-radius);
+  }
+
+  &--md {
+    //border-radius: var(--p-player-wrapper-md-border-radius);
+
+    .media-control-panel {
+      margin: var(--p-player-control-bar-md-padding);
+      width: calc(100% - (var(--p-player-control-bar-md-padding) * 2));
+      border-radius: var(--p-player-control-bar-md-border-radius);
+    }
+  }
+
+}
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  justify-content: space-between;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  transition: all var(--transition) ease-out;
+}
+
+.controls-group {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  opacity: 0;
+  transition: all var(--transition) ease-in-out;
+}
+
+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__controls) { // show panel buttons on hover
+      opacity: 1;
+    }
+  }
+}
+
+.wt-loader {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.video-layout:not([data-buffering]) .wt-loader {
+  display: none;
+}
+
+</style>

package/src/components/wt-vidstack-player/components/panels/media-control-panel/components/buttons/fullscreen-button.vue

@@ -0,0 +1,37 @@
+<template>
+  <media-fullscreen-button
+    class="fullscreen-button"
+    @media-enter-fullscreen-request="emit('toggle', true)"
+    @media-exit-fullscreen-request="emit('toggle', false)"
+  >
+    <wt-icon-btn
+      icon="player-enter-fullscreen"
+      color="on-dark"
+      class="fullscreen-button__enter"
+    />
+    <wt-icon-btn
+      icon="player-exit-fullscreen"
+      color="on-dark"
+      class="fullscreen-button__exit"
+    />
+  </media-fullscreen-button>
+</template>
+
+<script setup lang="ts">
+import {defineEmits} from "vue";
+
+import WtIconBtn from '../../../../../../wt-icon-btn/wt-icon-btn.vue';
+
+const emit = defineEmits<{
+  'toggle': [value: boolean];
+}>();
+
+</script>
+
+<style scoped>
+.fullscreen-button[data-active] .fullscreen-button__enter,
+.fullscreen-button:not([data-active]) .fullscreen-button__exit {
+  display: none;
+}
+
+</style>

package/src/components/wt-vidstack-player/components/panels/media-control-panel/components/buttons/play-button.vue

@@ -0,0 +1,21 @@
+<template>
+  <media-play-button class="play-button">
+    <wt-icon-btn icon="play" type="play" class="play-button__play-icon" />
+    <wt-icon-btn icon="pause" type="pause" class="play-button__pause-icon" />
+  </media-play-button>
+</template>
+
+<script setup lang="ts">
+import WtIconBtn from "../../../../../../wt-icon-btn/wt-icon-btn.vue";
+</script>
+
+<style scoped>
+.play-button {
+  cursor: pointer;
+}
+
+.play-button[data-paused] .play-button__pause-icon,
+.play-button:not([data-paused]) .play-button__play-icon {
+  display: none;
+}
+</style>

package/src/components/wt-vidstack-player/components/panels/media-control-panel/components/sliders/time-slider.vue

@@ -0,0 +1,31 @@
+<template>
+  <media-time-slider class="time-slider media-slider">
+    <wt-slider class="time-slider__slider" />
+  </media-time-slider>
+</template>
+
+<script setup lang="ts">
+import WtSlider from "../../../../../../wt-slider/wt-slider.vue";
+
+</script>
+
+<style scoped lang="scss">
+.time-slider {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+
+  &__slider {
+    width: 100%;
+  }
+
+  &:deep(.p-slider-range) { /* set vidstach slider variable to primeview component @author liza-pohrsnichna */
+    width: var(--slider-fill, 0%) !important;
+  }
+
+  &:deep(.p-slider-handle) { /*set vidstach slider variable to primeview component @author liza-pohrsnichna */
+    inset-inline-start: var(--slider-fill, 0%) !important;
+  }
+}
+
+</style>

package/src/components/wt-vidstack-player/components/panels/media-control-panel/components/time-group.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="time-group">
+    <media-time type="current" />
+    /
+    <media-time type="duration" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
+.time-group {
+  @extend %typo-body-2;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2xs);
+  color: var(--wt-player-video-control-bar-color);
+}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <media-controls-group
+    class="media-control-panel controls-group"
+    :class="`media-control-panel--${size}`"
+  >
+    <play-button />
+    <time-slider />
+    <time-group />
+  </media-controls-group>
+</template>
+
+<script setup lang="ts">
+import {inject} from "vue";
+
+import PlayButton from "./components/buttons/play-button.vue";
+import TimeSlider from "./components/sliders/time-slider.vue";
+import TimeGroup from "./components/time-group.vue";
+
+const { size } = inject('size');
+
+</script>
+
+<style scoped lang="scss">
+.media-control-panel {
+  padding: var(--p-player-control-bar-sm-padding);
+  background-color: var(--p-player-control-bar-background);
+  gap: var(--p-player-control-bar-sm-gap);
+
+  &--md {
+    padding: var(--p-player-control-bar-md-padding);
+    gap: var(--p-player-control-bar-md-gap);
+  }
+}
+</style>

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

@@ -0,0 +1,95 @@
+<template>
+  <media-controls-group
+    class="video-display-panel controls-group"
+    :class="`video-display-panel--${size}`"
+  >
+    <div class="video-display-panel__title">
+      <wt-avatar
+        v-if="props.username"
+        :username="props.username"
+      />
+      {{ props.title || props.username }}
+    </div>
+    <div class="video-display-panel__controls">
+      <toggle-button
+        v-if="size !== ComponentSize.LG"
+        primary-icon="collapse"
+        secondary-icon="expand"
+        color="on-dark"
+        @toggle="handlePlayerSize"
+      />
+      <fullscreen-button
+        @toggle="handleFullscreen"
+      />
+      <wt-icon-btn
+        v-if="props.closable"
+        icon="close"
+        color="on-dark"
+        @click="emit('close')"
+      />
+    </div>
+  </media-controls-group>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps, inject } from 'vue';
+
+import {ComponentSize} from "../../../../../enums";
+import WtAvatar from "../../../../wt-avatar/wt-avatar.vue";
+import WtIconBtn from "../../../../wt-icon-btn/wt-icon-btn.vue";
+import ToggleButton from "../../toggle-button.vue";
+import FullscreenButton from "../media-control-panel/components/buttons/fullscreen-button.vue";
+
+const { size, changeSize } = inject('size');
+
+const props = defineProps<{
+  title?: string;
+  username?: string;
+  closable?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'close': [],
+}>();
+
+const handleFullscreen = (value: boolean) => {
+  changeSize(value ? ComponentSize.LG : ComponentSize.SM);
+}
+
+const handlePlayerSize = (value: boolean) => {
+  changeSize(value ? ComponentSize.MD : ComponentSize.SM);
+}
+
+</script>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
+.video-display-panel {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--p-player-headline-sm-padding);
+  background: var(--p-player-head-line-background);
+  color: var(--p-player-head-line-color);
+  transition: all var(--transition) ease-in-out;
+
+  &__title {
+    @extend %typo-body-1-bold;
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: var(--p-player-headline-sm-gap);
+  }
+
+  &--md {
+    padding: var(--p-player-headline-md-padding);
+
+    .video-display-panel__controls {
+      gap: var(--p-player-headline-md-gap);
+    }
+  }
+}
+
+</style>

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

@@ -0,0 +1,54 @@
+<template>
+  <media-toggle-button
+    ref="toggleButton"
+    class="toggle-button"
+    :disabled="props.disabled"
+    @click="setToggleState"
+  >
+    <wt-icon-btn
+      :icon="props.primaryIcon"
+      :color="props.color"
+      :disabled="props.disabled"
+      class="toggle-button__primary"
+    />
+    <wt-icon-btn
+      :icon="props.secondaryIcon"
+      :color="props.color"
+      :disabled="props.disabled"
+      class="toggle-button__secondary"
+    />
+  </media-toggle-button>
+</template>
+
+<script setup lang="ts">
+import {defineEmits, defineProps, Ref, useTemplateRef} from 'vue';
+
+import WtIconBtn from "../../wt-icon-btn/wt-icon-btn.vue";
+
+const props = defineProps<{
+  primaryIcon: string;
+  secondaryIcon: string;
+  color?: string;
+  disabled?: boolean;
+}>();
+
+const toggleButton = useTemplateRef('toggleButton') as Ref<HTMLElement>;
+
+const emit = defineEmits<{
+  'toggle': [value: boolean];
+}>();
+
+const setToggleState = () => {
+  if (props.disabled) return;
+  emit('toggle', toggleButton.value.pressed);
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.toggle-button[data-pressed] .toggle-button__primary,
+.toggle-button:not([data-pressed]) .toggle-button__secondary {
+  display: none;
+}
+</style>

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

@@ -0,0 +1,156 @@
+<template>
+  <div
+    class="wt-vidstack-player"
+    :class="[`wt-vidstack-player--${size}`]"
+  >
+    <media-player
+      ref="player"
+      :src="playerSrc"
+      class="wt-vidstack-player__player"
+      cross-origin
+      plays-inline
+      @close="emit('close')"
+      @change-size="changeSize"
+    >
+      <media-provider></media-provider>
+      <video-layout
+        :closable="props.closable"
+        :autoplay="props.autoplay"
+        :title="props.title"
+        :username="props.username"
+        @close-player="emit('close')"
+      />
+
+    </media-player>
+  </div>
+</template>
+
+<script setup lang="ts">
+import 'vidstack/player';
+import 'vidstack/player/ui';
+
+import type { MediaPlayerElement } from 'vidstack/elements';
+import {computed, defineEmits, defineProps, provide, ref, useTemplateRef, watch} from 'vue';
+
+import { ComponentSize } from '../../enums';
+import VideoLayout from './components/layouts/video-layout.vue';
+
+interface Props {
+  src: string | { src: string; type?: string };
+  mime?: string;
+  autoplay?: boolean;
+  title?: string;
+  username?: string;
+  closable?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mime: 'video/mp4',
+  autoplay: false,
+  title: '',
+  username: '',
+  closable: false,
+});
+
+const emit = defineEmits<{
+  'close': [],
+}>()
+
+const player = useTemplateRef<MediaPlayerElement>('player');
+const size = ref(ComponentSize.SM);
+
+const changeSize = (value) => {
+  size.value = value;
+}
+
+/** @author liza-pohranichna
+ * options: [sm, md, lg]
+ * lg-size is fullscreen
+*/
+provide('size', { size, changeSize });
+
+const normalizedType = computed(() => { // https://vidstack.io/docs/wc/player/core-concepts/loading/?styling=css#source-types
+  if (props.mime) return props.mime;
+
+
+  if (props.src.includes('media')) return 'audio/mp3';
+  if (props.src.includes('mp3')) return 'audio/mp3';
+  if (props.src.includes('ogg') || props.src.includes('oga')) return 'audio/ogg';
+
+  return 'video/mp4';
+});
+
+const playerSrc = computed(() => {
+  if (typeof props.src === 'string') {
+    return { src: props.src, type: normalizedType.value };
+  }
+  return {
+    src: props.src?.src || '',
+    type: props.src?.type || normalizedType.value
+  };
+});
+
+
+</script>
+
+<style scoped lang="scss">
+@use '../wt-popup/mixins.scss' as *;
+
+.wt-vidstack-player {
+  transition: var(--transition);
+
+  .wt-vidstack-player__player {
+    padding: 0;
+    margin: 0;
+  }
+
+  &--sm {
+    position: fixed;
+    right: var(--spacing-md);
+    bottom: var(--spacing-md);
+    max-width: var(--p-player-wrapper-sm-width);
+    max-height: var(--p-player-wrapper-sm-height);
+    z-index: 100;
+    border-radius: var(--p-player-wrapper-sm-border-radius);
+    overflow: hidden;
+  }
+
+  &--md {
+    @include popup-wrapper;
+    /** @author liza-pohranichna
+    * need to use wt-popup styles for md size https://webitel.atlassian.net/browse/WTEL-7723 */
+
+    .wt-vidstack-player__player {
+      @include popup-container;
+      position: relative;
+      max-width: var(--p-player-wrapper-md-width);
+      padding: 0;
+      border-radius: var(--p-player-wrapper-md-border-radius);
+      overflow: hidden;
+    }
+  }
+
+  &--lg {
+    .wt-vidstack-player__player {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+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__controls) { // show panel buttons on hover
+      opacity: 1;
+    }
+  }
+}
+
+
+</style>

package/src/install.ts

@@ -1,6 +1,7 @@
 import 'vue-multiselect/dist/vue-multiselect.css';
 import '@webitel/styleguide/fonts';
 import 'plyr/src/sass/plyr.scss';
+import 'vidstack/bundle';
 import './css/main.scss';
 import './css/tailwind.css';
 import './assets/icons/sprite/index.js';