@webitel/ui-sdk 26.6.8 → 26.6.10

package/src/components/_shared/settings-panel/settings-panel.vue

@@ -0,0 +1,62 @@
+<template>
+	<wt-popover class="settings-panel">
+		<template #activator="{ toggle }">
+			<media-button class="settings-panel__button" @click="toggle">
+				<wt-icon-btn
+					icon="plyr-settings"
+					:size="ComponentSize.SM"
+				/>
+			</media-button>
+		</template>
+
+		<speed-settings
+			:model-value="modelValue.playbackRate"
+			@update:model-value="handlePlaybackRateUpdate"
+		/>
+	</wt-popover>
+</template>
+
+<script setup lang="ts">
+import { WtPopover } from '../../../components';
+import { ComponentSize } from '../../../enums';
+import SpeedSettings from './components/speed-settings/speed-settings.vue';
+
+export interface MediaSettings {
+	playbackRate: number;
+}
+
+interface Props {
+	modelValue: MediaSettings;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: () => ({
+		playbackRate: 1,
+	}),
+});
+
+const emit = defineEmits<{
+	'update:modelValue': [
+		value: MediaSettings,
+	];
+}>();
+
+function handlePlaybackRateUpdate(playbackRate: number) {
+	emit('update:modelValue', {
+		...props.modelValue,
+		playbackRate,
+	});
+}
+</script>
+
+<style scoped>
+.settings-panel {
+	display: flex;
+}
+
+.settings-panel__button {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+}
+</style>

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

@@ -42,7 +42,7 @@
 
       <wt-icon
         v-if="icon"
-        :class="{ 'wt-button__icon--hidden': showLoader }"  
+        :class="{ 'wt-button__icon--hidden': showLoader }"
         :icon="icon"
         :icon-prefix="iconPrefix"
         :size="iconButtonSizeMap[size]"
@@ -166,7 +166,7 @@ watch(
 
 <style>
 .wt-button {
-	position: relative;
+  position: relative;
 }
 
 .p-button--with-badge {
@@ -177,9 +177,9 @@ watch(
   display: contents;
 }
 
-/* 
+/*
 	@author HlukhovYe
-	Hides the icon instantly when the loader is shown. 
+	Hides the icon instantly when the loader is shown.
 */
 .wt-button__icon--hidden {
   opacity: 0;

package/src/components/wt-player/src/components/buttons/play-button.vue

@@ -1,6 +1,6 @@
 <template>
   <media-play-button class="play-button">
-    <wt-icon icon="plyr-play"  type="play" class="play-icon" size="sm"/>
+    <wt-icon icon="plyr-play"  type="play" class="play-icon" size="sm" />
     <wt-icon icon="plyr-pause" type="pause" class="pause-icon" size="sm" />
   </media-play-button>
 </template>

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

@@ -5,6 +5,7 @@
 		:src="normalizedSrcObject"
 		:loop="props.loop"
 		:autoplay="autoplay"
+    :playback-rate="playerSettings.playbackRate"
     @ended="handleEnded"
 	>
 
@@ -18,6 +19,11 @@
 			<mute-button v-if="!props.hideMuteButton" />
 			<volume-slider v-if="!props.hideVolumeSlider" />
 
+			<settings-panel
+				v-if="!props.hideSettings"
+				v-model:model-value="playerSettings"
+			/>
+
 			<media-button
 				v-if="props.download"
 				class="download-button"
@@ -25,7 +31,7 @@
 			>
 				<wt-icon-btn
 					icon="plyr-download"
-					size="sm"
+					:size="ComponentSize.SM"
 				/>
 			</media-button>
 
@@ -36,7 +42,7 @@
 			>
 				<wt-icon-btn
 					icon="close"
-					size="sm"
+					:size="ComponentSize.SM"
 				/>
 			</media-button>
 
@@ -50,8 +56,11 @@
 >
 import 'vidstack/bundle';
 import type { MediaSrc } from 'vidstack';
-import { computed, toRefs } from 'vue';
-
+import { ref, toRefs } from 'vue';
+import { ComponentSize } from '../../enums';
+import SettingsPanel, {
+	type MediaSettings,
+} from '../_shared/settings-panel/settings-panel.vue';
 import TimeGroup from '../wt-vidstack-player/components/panels/playback-controls-panel/components/time-group.vue';
 import { useVidstackSrc } from '../wt-vidstack-player/composables/useVidstackSrc';
 import MuteButton from './src/components/buttons/mute-button.vue';
@@ -117,6 +126,12 @@ interface Props {
 	 * @default false
 	 */
 	hideMuteButton?: boolean;
+	/**
+	 * Hide settings button
+	 * @type {boolean}
+	 * @default false
+	 */
+	hideSettings?: boolean;
 	/**
 	 * Shows close button
 	 * @type {boolean}
@@ -141,6 +156,7 @@ const props = withDefaults(defineProps<Props>(), {
 	invertTime: true,
 	hideVolumeSlider: false,
 	hideMuteButton: false,
+	hideSettings: false,
 	resetVolume: false,
 	closable: true,
 	position: 'sticky',
@@ -151,6 +167,10 @@ const emit = defineEmits<{
 	close: [];
 }>();
 
+const playerSettings = ref<MediaSettings>({
+	playbackRate: 1,
+});
+
 const { src: srcRef } = toRefs(props);
 
 const { normalizedSrcObject } = useVidstackSrc({

package/src/modules/CSVExport/CSVExport.js

@@ -85,7 +85,12 @@ export default class CSVExport {
 				...params,
 				page,
 			});
-			if (!columns.length && items.length) columns = Object.keys(items[0]);
+			if (!columns.length && items.length) {
+				const keySet = new Set(items.flatMap(Object.keys));
+				columns = [
+					...keySet,
+				].filter((key) => !key.startsWith('_'));
+			}
 
 			const options = {
 				...CSVExport._getStringifyOptions(params.delimiter),

package/types/components/_shared/settings-panel/components/speed-settings/speed-settings.vue.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    modelValue?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: number) => any;
+}>, {
+    modelValue: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/components/_shared/settings-panel/settings-panel.vue.d.ts

@@ -0,0 +1,15 @@
+export interface MediaSettings {
+    playbackRate: number;
+}
+interface Props {
+    modelValue: MediaSettings;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: MediaSettings) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: MediaSettings) => any;
+}>, {
+    modelValue: MediaSettings;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -58,6 +58,12 @@ interface Props {
      * @default false
      */
     hideMuteButton?: boolean;
+    /**
+     * Hide settings button
+     * @type {boolean}
+     * @default false
+     */
+    hideSettings?: boolean;
     /**
      * Shows close button
      * @type {boolean}
@@ -87,6 +93,7 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     resetOnEnd: boolean;
     hideVolumeSlider: boolean;
     hideMuteButton: boolean;
+    hideSettings: boolean;
     position: string;
     invertTime: boolean;
     resetVolume: boolean;

package/dist/wt-display-chip-items-CxRvP3Ey.js

@@ -1,47 +0,0 @@
-import { defineComponent as _, computed as c, createElementBlock as t, openBlock as s, createCommentVNode as l, renderSlot as n, createVNode as d, toDisplayString as o, createTextVNode as f, unref as m, withCtx as u, Fragment as v, renderList as k } from "vue";
-import { af as C, ag as I, _ as g } from "./install-CrhatfOO.js";
-import { E as B, d as E } from "./displayText-Cbh4IOfM.js";
-const S = { class: "wt-display-chip-items" }, b = { key: 0 }, w = ["onClick"], F = /* @__PURE__ */ _({
-  __name: "wt-display-chip-items",
-  props: {
-    hideFirstItem: { type: Boolean },
-    useEmptySymbol: { type: Boolean },
-    title: {},
-    items: {}
-  },
-  setup(p) {
-    const e = p, h = c(() => e.items?.length ? e.items[0]?.name : e.useEmptySymbol ? B : ""), i = c(() => e.items?.length ? e.hideFirstItem ? e.items : e.items.slice(1) : []);
-    return (a, N) => (s(), t("div", S, [
-      e.title ? (s(), t("p", b, o(p.title) + ":", 1)) : l("", !0),
-      e.hideFirstItem ? l("", !0) : n(a.$slots, "first-item", { key: 1 }, () => [
-        f(o(m(E)(h.value)), 1)
-      ], !0),
-      d(m(C), null, {
-        activator: u(({ toggle: r }) => [
-          n(a.$slots, "activator", { toggle: r }, () => [
-            i.value.length ? (s(), t("div", {
-              key: 0,
-              onClick: r
-            }, [
-              d(m(I), null, {
-                default: u(() => [
-                  f(" +" + o(i.value.length), 1)
-                ], void 0, !0),
-                _: 1
-              })
-            ], 8, w)) : l("", !0)
-          ], !0)
-        ]),
-        default: u(() => [
-          n(a.$slots, "items", { items: i.value }, () => [
-            (s(!0), t(v, null, k(i.value, ({ name: r, id: y }) => (s(), t("div", { key: y }, o(r), 1))), 128))
-          ], !0)
-        ]),
-        _: 3
-      })
-    ]));
-  }
-}), V = /* @__PURE__ */ g(F, [["__scopeId", "data-v-4c67fbb7"]]);
-export {
-  V as default
-};

package/dist/wt-player-DB0Rpbiz.js

@@ -1,132 +0,0 @@
-import { resolveComponent as w, createElementBlock as l, openBlock as t, createVNode as o, defineComponent as p, toRefs as k, unref as z, normalizeClass as C, createElementVNode as _, createBlock as y, createCommentVNode as u } from "vue";
-import { u as E, T as V } from "./useVidstackSrc-6MX1IOwT.js";
-import { _ as i, E as f } from "./install-CrhatfOO.js";
-import { _ as b } from "./wt-slider.vue_vue_type_script_setup_true_lang-DlaRDHxo.js";
-const x = {}, S = { class: "mute-button" };
-function T(n, r) {
-  const e = w("wt-icon");
-  return t(), l("media-mute-button", S, [
-    o(e, {
-      type: "mute",
-      icon: "plyr-muted",
-      class: "mute-icon",
-      size: "sm"
-    }),
-    o(e, {
-      type: "volume",
-      icon: "plyr-volume",
-      class: "volume-icon",
-      size: "sm"
-    })
-  ]);
-}
-const M = /* @__PURE__ */ i(x, [["render", T], ["__scopeId", "data-v-45e5719d"]]), g = { class: "play-button" }, I = /* @__PURE__ */ p({
-  __name: "play-button",
-  setup(n) {
-    return (r, e) => (t(), l("media-play-button", g, [
-      o(f, {
-        icon: "plyr-play",
-        type: "play",
-        class: "play-icon",
-        size: "sm"
-      }),
-      o(f, {
-        icon: "plyr-pause",
-        type: "pause",
-        class: "pause-icon",
-        size: "sm"
-      })
-    ]));
-  }
-}), N = /* @__PURE__ */ i(I, [["__scopeId", "data-v-e79e3bf5"]]), O = { class: "time-slider media-slider" }, P = /* @__PURE__ */ p({
-  __name: "time-slider",
-  setup(n) {
-    return (r, e) => (t(), l("media-time-slider", O, [
-      o(b, { class: "time-slider__slider" })
-    ]));
-  }
-}), R = /* @__PURE__ */ i(P, [["__scopeId", "data-v-e57a9871"]]), j = { class: "volume-slider media-slider" }, F = /* @__PURE__ */ p({
-  __name: "volume-slider",
-  setup(n) {
-    return (r, e) => (t(), l("media-volume-slider", j, [
-      o(b, { class: "volume-slider__slider" })
-    ]));
-  }
-}), G = /* @__PURE__ */ i(F, [["__scopeId", "data-v-b92a4daf"]]), q = ["src", "loop", "autoplay"], A = { class: "controls-group" }, D = /* @__PURE__ */ p({
-  __name: "wt-player",
-  props: {
-    src: {},
-    id: {},
-    fileName: {},
-    autoplay: { type: Boolean, default: !0 },
-    loop: { type: Boolean, default: !1 },
-    download: { type: [String, Function, Boolean], default: () => (n) => n.replace("/stream", "/download") },
-    resetOnEnd: { type: Boolean, default: !1 },
-    countdownTimeMode: { type: Boolean },
-    hideVolumeSlider: { type: Boolean, default: !1 },
-    hideMuteButton: { type: Boolean, default: !1 },
-    closable: { type: Boolean, default: !0 },
-    position: { default: "sticky" },
-    invertTime: { type: Boolean, default: !0 },
-    resetVolume: { type: Boolean, default: !1 }
-  },
-  emits: ["initialized", "close"],
-  setup(n, { emit: r }) {
-    const e = n, { src: v } = k(e), { normalizedSrcObject: B } = E({
-      src: v
-    });
-    function h() {
-      const c = typeof e.src == "string" ? e.src : e.src?.src, s = typeof e.download == "function" ? e.download(c) : e.download, d = e.src?.type.split("/").pop(), m = e.fileName || e.id || "unknown", a = document.createElement("a");
-      a.style.display = "none", a.href = s, a.download = `${m}.${d}`, document.body.appendChild(a), a.click(), document.body.removeChild(a);
-    }
-    function $(c) {
-      if (!e.resetOnEnd) return;
-      const s = c.target;
-      s.currentTime = 0;
-    }
-    return (c, s) => {
-      const d = w("wt-icon-btn");
-      return t(), l("media-player", {
-        class: C(["wt-player", `wt-player--position-${e.position}`]),
-        src: z(B),
-        loop: e.loop,
-        autoplay: n.autoplay,
-        onEnded: $
-      }, [
-        s[1] || (s[1] = _("media-provider", null, null, -1)),
-        _("media-controls-group", A, [
-          o(N),
-          o(R),
-          o(V, {
-            countdown: e.countdownTimeMode
-          }, null, 8, ["countdown"]),
-          e.hideMuteButton ? u("", !0) : (t(), y(M, { key: 0 })),
-          e.hideVolumeSlider ? u("", !0) : (t(), y(G, { key: 1 })),
-          e.download ? (t(), l("media-button", {
-            key: 2,
-            class: "download-button",
-            onClick: h
-          }, [
-            o(d, {
-              icon: "plyr-download",
-              size: "sm"
-            })
-          ])) : u("", !0),
-          e.closable ? (t(), l("media-button", {
-            key: 3,
-            class: "close-button",
-            onClick: s[0] || (s[0] = (m) => c.$emit("close"))
-          }, [
-            o(d, {
-              icon: "close",
-              size: "sm"
-            })
-          ])) : u("", !0)
-        ])
-      ], 42, q);
-    };
-  }
-}), Q = /* @__PURE__ */ i(D, [["__scopeId", "data-v-f2c0e378"]]);
-export {
-  Q as default
-};