@webitel/ui-sdk 25.10.51 → 25.10.53

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

package/types/components/index.d.ts

@@ -71,6 +71,7 @@ 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 WtTypeExtensionValueInput from './on-demand/wt-type-extension-value-input/wt-type-extension-value-input.vue';
+import WtVidstackPlayer from './wt-vidstack-player/wt-vidstack-player.vue';
 declare namespace Components {
     export { WtActionBar };
     export { WtImage };
@@ -143,5 +144,6 @@ declare namespace Components {
     export { WtStartPage };
     export { WtSelectionPopup };
     export { WtDisplayChipItems };
+    export { WtVidstackPlayer };
 }
-export { WtActionBar, WtAppHeader, WtAppNavigator, WtAvatar, WtBadge, WtBreadcrumb, WtButton, WtButtonSelect, WtCheckbox, WtChip, WtConfirmDialog, WtContextMenu, WtCopyAction, WtDatepicker, WtDisplayChipItems, WtDivider, WtDualPanel, WtDummy, WtEmpty, WtErrorPage, WtExpansionPanel, WtFiltersPanelWrapper, WtHeaderActions, WtHeadline, WtHint, WtIcon, WtIconAction, WtIconBtn, WtImage, WtIndicator, WtInput, WtInputInfo, WtIntersectionObserver, WtItemLink, WtLabel, WtLoadBar, WtLoader, WtLogo, WtNavigationBar, WtNavigationMenu, WtNotification, WtNotificationsBar, WtPageHeader, WtPageWrapper, WtPagination, WtPlayer, WtPopover, WtPopup, WtProgressBar, WtRadio, WtReplaceTransition, WtRoundedAction, WtSearchBar, WtSelect, WtSelectionPopup, WtSlider, WtStartPage, WtStatusSelect, WtStepper, WtSwitcher, WtTable, WtTableActions, WtTableColumnSelect, WtTabs, WtTagsInput, WtTextarea, WtTimeInput, WtTimepicker, WtTooltip, WtTree, WtTreeTable, WtTypeExtensionValueInput };
+export { WtActionBar, WtAppHeader, WtAppNavigator, WtAvatar, WtBadge, WtBreadcrumb, WtButton, WtButtonSelect, WtCheckbox, WtChip, WtConfirmDialog, WtContextMenu, WtCopyAction, WtDatepicker, WtDisplayChipItems, WtDivider, WtDualPanel, WtDummy, WtEmpty, WtErrorPage, WtExpansionPanel, WtFiltersPanelWrapper, WtHeaderActions, WtHeadline, WtHint, WtIcon, WtIconAction, WtIconBtn, WtImage, WtIndicator, WtInput, WtInputInfo, WtIntersectionObserver, WtItemLink, WtLabel, WtLoadBar, WtLoader, WtLogo, WtNavigationBar, WtNavigationMenu, WtNotification, WtNotificationsBar, WtPageHeader, WtPageWrapper, WtPagination, WtPlayer, WtPopover, WtPopup, WtProgressBar, WtRadio, WtReplaceTransition, WtRoundedAction, WtSearchBar, WtSelect, WtSelectionPopup, WtSlider, WtStartPage, WtStatusSelect, WtStepper, WtSwitcher, WtTable, WtTableActions, WtTableColumnSelect, WtTabs, WtTagsInput, WtTextarea, WtTimeInput, WtTimepicker, WtTooltip, WtTree, WtTreeTable, WtTypeExtensionValueInput, WtVidstackPlayer };

package/types/components/wt-image/wt-image.vue.d.ts

@@ -23,6 +23,7 @@ type __VLS_Props = {
     overlayIcon?: string;
     overlayIconPrefix?: string;
 };
+declare const emit: (event: "click", ...args: any[]) => void;
 declare const width: import("vue").ComputedRef<string | number>;
 declare const height: import("vue").ComputedRef<string | number>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
@@ -35,10 +36,19 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     IconColor: typeof IconColor;
+    emit: typeof emit;
     width: typeof width;
     height: typeof height;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (...args: any[]) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (...args: any[]) => any;
+}>, {}, {}, {}, {}, 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 & {

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

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    title?: string;
+    username?: string;
+    closable?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "close-player": () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onClose-player"?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/types/components/wt-vidstack-player/components/panels/media-control-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-control-panel/components/buttons/play-button.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/media-control-panel/components/sliders/time-slider.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/media-control-panel/components/time-group.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/media-control-panel/media-control-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/video-display-panel/video-display-panel.vue.d.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    title?: string;
+    username?: string;
+    closable?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: () => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    primaryIcon: string;
+    secondaryIcon: string;
+    color?: string;
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (value: boolean) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,25 @@
+import 'vidstack/player';
+import 'vidstack/player/ui';
+interface Props {
+    src: string | {
+        src: string;
+        type?: string;
+    };
+    mime?: string;
+    autoplay?: boolean;
+    title?: string;
+    username?: string;
+    closable?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClose?: () => any;
+}>, {
+    title: string;
+    username: string;
+    autoplay: boolean;
+    mime: string;
+    closable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/types/install.d.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';