@webitel/ui-sdk 26.8.21 → 26.8.22

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

@@ -24,7 +24,7 @@
     @update:expanded-rows="expandedRows = $event"
     @column-resize-end="columnResize"
     @column-reorder="columnReorder"
-    @row-reorder="({ dragIndex, dropIndex }) => emit('reorder:row', { oldIndex: dragIndex, newIndex: dropIndex })"
+    @row-reorder="onRowReorder"
   >
     <p-column
       v-if="rowExpansion"
@@ -230,7 +230,7 @@ import {
 import { useI18n } from 'vue-i18n';
 import { getNextSortOrder } from '../../scripts/sortQueryAdapters.js';
 import { useTableColumnDrag } from '../_internals/composables';
-import type { WtTableHeader } from './types/WtTable';
+import type { WtTableHeader, WtTableRow } from './types/WtTable';
 
 const DEFAULT_ITEM_SIZE = 40;
 
@@ -242,7 +242,7 @@ interface Props extends DataTableProps {
 	/**
 	 * 'List of data, represented by table. '
 	 */
-	data?: Array<unknown>;
+	data?: WtTableRow[];
 	/**
 	 * 'If true, draws sorting arrows and sends sorting events at header click. Draws a sorting arrow by "sort": "asc"/"desc" header value. '
 	 */
@@ -281,7 +281,7 @@ interface Props extends DataTableProps {
 	/**
 	 * 'If true, restrict sprecific row reorder.'
 	 */
-	isRowReorderDisabled?: (row) => boolean;
+	isRowReorderDisabled?: (row: WtTableRow) => boolean;
 	rowExpansion?: boolean;
 	rowClass?: () => string;
 	rowStyle?: () => {
@@ -331,9 +331,21 @@ const emit = defineEmits([
 	'column-reorder',
 ]);
 
+const onRowReorder = ({
+	dragIndex,
+	dropIndex,
+}: {
+	dragIndex: number;
+	dropIndex: number;
+}) =>
+	emit('reorder:row', {
+		oldIndex: dragIndex,
+		newIndex: dropIndex,
+	});
+
 const table = useTemplateRef('table');
 const tableKey = ref(0);
-const expandedRows = ref([]);
+const expandedRows = ref<WtTableRow[]>([]);
 
 const { addTableDragListener, removeTableDragListener } = useTableColumnDrag(
 	table,
@@ -351,7 +363,8 @@ const excludeColumnsFromReorder = [
 const _selected = computed(() => {
 	// _isSelected for backwards compatibility
 	return props.selectable
-		? props.selected || props.data.filter((item) => item._isSelected)
+		? props.selected ||
+				props.data.filter((item: WtTableRow) => item._isSelected)
 		: [];
 });
 
@@ -363,17 +376,21 @@ const dataHeaders = computed(() => {
 				text:
 					typeof header.locale === 'string'
 						? t(header.locale)
-						: t(...header.locale),
+						: t(
+								...(header.locale as [
+									string,
+								]),
+							),
 			};
 		return header;
 	});
 });
 
-const isColumnHidden = (col) => {
+const isColumnHidden = (col: WtTableHeader) => {
 	return col.show === false;
 };
 
-const columnStyle = (col) => {
+const columnStyle = (col: WtTableHeader) => {
 	const baseWidth = 140;
 
 	return {
@@ -405,14 +422,14 @@ const sortField = computed(() => {
 	return sortedCol?.field ?? null;
 });
 
-const sort = ({ sortField }) => {
+const sort = ({ sortField }: { sortField: string }) => {
 	const col = dataHeaders.value.find((header) => header.field === sortField);
-	if (!isColSortable(col)) return;
+	if (!col || !isColSortable(col)) return;
 	const nextSort = getNextSortOrder(col.sort);
 	emit('sort', col, nextSort);
 };
 
-const isColSortable = ({ sort }) => {
+const isColSortable = ({ sort }: Pick<WtTableHeader, 'sort'>) => {
 	/*       --sortable = sortable && col.sort === undefined cause there may be some columns we don't want to sort
             strict check for  === undefined is used because col.sort = null is sort order too (actualu, without sort)
             so we need to check if this property is present
@@ -437,18 +454,18 @@ const selectAll = () => {
 		// Because allSelected recomputes after each change
 
 		if (isAllSelected.value) {
-			props.data.forEach((item) => {
+			props.data.forEach((item: WtTableRow) => {
 				item._isSelected = false;
 			});
 		} else {
-			props.data.forEach((item) => {
+			props.data.forEach((item: WtTableRow) => {
 				item._isSelected = true;
 			});
 		}
 	}
 };
 
-const handleSelection = (row, select) => {
+const handleSelection = (row: WtTableRow, select: boolean) => {
 	if (props.selected) {
 		if (select) {
 			emit('update:selected', [
@@ -467,7 +484,7 @@ const handleSelection = (row, select) => {
 	}
 };
 
-const columnResize = ({ element }) => {
+const columnResize = ({ element }: { element: HTMLElement }) => {
 	// getting column name by custom attribute due Primevue does not provide it
 	const field = element.getAttribute('data-column-field');
 
@@ -484,27 +501,29 @@ const columnResize = ({ element }) => {
 };
 
 const columnReorder = () => {
-	const containerEl = table.value.$el.querySelector(
+	const containerEl = table.value?.$el?.querySelector(
 		'.p-datatable-table-container',
 	);
-	const containerElScrollLeft = containerEl.scrollLeft;
-	const newOrder = table.value.d_columnOrder.filter(
-		(col) => !excludeColumnsFromReorder.includes(col),
+	const containerElScrollLeft = containerEl?.scrollLeft;
+	const newOrder = table.value?.d_columnOrder.filter(
+		(col: string) => !excludeColumnsFromReorder.includes(col),
 	);
 	tableKey.value += 1;
 	emit('column-reorder', newOrder);
 	nextTick(() => {
 		addTableDragListener();
-		table.value.$el.querySelector('.p-datatable-table-container').scrollLeft =
-			containerElScrollLeft;
+		const container = table.value?.$el?.querySelector(
+			'.p-datatable-table-container',
+		);
+		if (container) container.scrollLeft = containerElScrollLeft;
 	});
 };
 
-const isRowExpanded = (row) => {
+const isRowExpanded = (row: WtTableRow) => {
 	return expandedRows.value.some((r) => r?.id === row?.id);
 };
 
-const toggleRow = (row) => {
+const toggleRow = (row: WtTableRow) => {
 	const index = expandedRows.value.findIndex((r) => r.id === row.id);
 	if (index !== -1) {
 		expandedRows.value.splice(index, 1);

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

@@ -126,11 +126,9 @@ function shownColLabel({ text, locale }: Header): string | undefined {
 	if (!text && locale)
 		return typeof locale === 'string'
 			? t(locale)
-			: t(
-					...(locale as [
-						string,
-						...unknown[],
-					]),
+			: (t as (key: string, ...args: unknown[]) => string)(
+					String(locale[0]),
+					...locale.slice(1),
 				);
 	return text;
 }

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

@@ -52,16 +52,13 @@
 
 <script setup lang="ts">
 import type { TextareaProps } from 'primevue/textarea';
-import {
-	computed,
-	defineModel,
-	onMounted,
-	ref,
-	useSlots,
-	useTemplateRef,
-} from 'vue';
+import { computed, onMounted, ref, toRef, useSlots, useTemplateRef } from 'vue';
 import { ComponentSize, MessageVariant } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import type {
+	CompatCustomValidator,
+	VuelidateFieldLike,
+} from '../../mixins/validationMixin/vuelidate/useVuelidateValidation';
 
 /**
  * @emits {string} input - Fires when textarea value changes. Emits value
@@ -128,16 +125,13 @@ interface Props extends /* @vue-ignore */ TextareaProps {
 	/**
 	 * Validation rules
 	 */
-	v?: unknown;
+	v?: VuelidateFieldLike;
 	/**
 	 * Custom validators array
 	 * @type {Array<{name: string, text: string}>}
 	 * @default []
 	 */
-	customValidators?: Array<{
-		name: string;
-		text: string;
-	}>;
+	customValidators?: CompatCustomValidator[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -179,8 +173,8 @@ const hasLabel = computed(() => {
 
 const { isValidation, invalid, validationText, validationTextColor } =
 	useValidation({
-		v: props.v,
-		customValidators: props.customValidators,
+		v: toRef(props, 'v'),
+		customValidators: toRef(props, 'customValidators'),
 	});
 
 const handleKeypress = (event: KeyboardEvent) => {

package/src/components/wt-time-input/wt-time-input.vue

@@ -15,6 +15,10 @@
 
 <script setup lang="ts">
 import type { SuperCompatibleRegleFieldStatus } from '@regle/core';
+import type {
+	CompatCustomValidator,
+	VuelidateFieldLike,
+} from '../../mixins/validationMixin/vuelidate/useVuelidateValidation';
 
 interface WtTimeInputProps {
 	/**
@@ -52,7 +56,7 @@ interface WtTimeInputProps {
 	/**
 	 * Vuelidate validation object
 	 */
-	v?: Record<string, unknown>;
+	v?: VuelidateFieldLike;
 	/**
 	 * Regle validation object
 	 */
@@ -60,10 +64,10 @@ interface WtTimeInputProps {
 	/**
 	 * Custom validators for vuelidate
 	 */
-	customValidators?: unknown[];
+	customValidators?: CompatCustomValidator[];
 }
 
-const props = withDefaults(defineProps<WtTimeInputProps>(), {
+withDefaults(defineProps<WtTimeInputProps>(), {
 	label: '',
 	name: '',
 	maxValue: undefined,
@@ -73,7 +77,6 @@ const props = withDefaults(defineProps<WtTimeInputProps>(), {
 	labelProps: () => ({}),
 	hideInputInfo: false,
 	v: null,
-	regleValidation: null,
 	customValidators: () => [],
 });
 

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

@@ -77,6 +77,10 @@ import { computed, nextTick, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ComponentSize, MessageVariant } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import type {
+	CompatCustomValidator,
+	VuelidateFieldLike,
+} from '../../mixins/validationMixin/vuelidate/useVuelidateValidation';
 
 // const SEC_IN_DAY = 60 * 60 * 24;
 const SEC_IN_HOUR = 60 * 60;
@@ -118,7 +122,7 @@ interface WtTimepickerProps {
 	/**
 	 * Vuelidate validation object
 	 */
-	v?: Record<string, unknown>;
+	v?: VuelidateFieldLike;
 	/**
 	 * Regle validation object
 	 */
@@ -126,7 +130,7 @@ interface WtTimepickerProps {
 	/**
 	 * Custom validators for vuelidate
 	 */
-	customValidators?: unknown[];
+	customValidators?: CompatCustomValidator[];
 }
 
 const props = withDefaults(defineProps<WtTimepickerProps>(), {
@@ -139,7 +143,6 @@ const props = withDefaults(defineProps<WtTimepickerProps>(), {
 	noLabel: false,
 	required: false,
 	v: null,
-	regleValidation: null,
 	customValidators: () => [],
 });
 

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

@@ -47,8 +47,8 @@ const severityToIconColorMap: Record<string, string> = {
 	secondary: MessageColor.SECONDARY,
 };
 
-const getIconColor = (message) =>
-	`fill: var(--p-toast-${severityToIconColorMap[message.severity]}-icon-color)`;
+const getIconColor = (message: { severity?: string }) =>
+	`fill: var(--p-toast-${message.severity ? severityToIconColorMap[message.severity] : ''}-icon-color)`;
 </script>
 
 <style>

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

@@ -60,6 +60,7 @@
 import deepEqual from 'deep-equal';
 import { computed } from 'vue';
 
+import type { WtTreeNode } from '../wt-tree-line/types/wt-tree-node';
 import WtTreeLine from '../wt-tree-line/wt-tree-line.vue';
 import { WtTreeMode } from './types/WtTreeMode';
 
@@ -106,13 +107,13 @@ const emit = defineEmits<{
 }>();
 
 const allData = computed(() => {
-	const result = [];
+	const result: WtTreeNode[] = [];
 
-	const getNestedItems = (item: unknown) => {
+	const getNestedItems = (item: WtTreeNode) => {
 		result.push(item);
 
 		if (item[props.childrenProp]) {
-			item[props.childrenProp].forEach((child: unknown) => {
+			item[props.childrenProp].forEach((child: WtTreeNode) => {
 				getNestedItems(child);
 			});
 		}
@@ -125,11 +126,11 @@ const allData = computed(() => {
 	return result;
 });
 
-const selectElement = (item: unknown) => {
+const selectElement = (item: WtTreeNode) => {
 	emit('update:modelValue', props.itemData ? item[props.itemData] : item);
 };
 
-const compareSelectElement = (item: unknown) => {
+const compareSelectElement = (item: WtTreeNode) => {
 	if (props.itemData) {
 		return item[props.itemData] === props.modelValue;
 	}

package/src/components/wt-tree-line/types/wt-tree-node.ts

@@ -0,0 +1,6 @@
+/**
+ * TODO(types): every field the tree reads (`itemLabel`, `itemData`,
+ * `childrenProp`, `searchedProp`) is a prop-driven runtime key.
+ */
+// biome-ignore lint/suspicious/noExplicitAny: see TODO above
+export type WtTreeNode = any;

package/src/components/wt-tree-line/wt-tree-line.vue

@@ -13,7 +13,7 @@
         :icon="lastChild ? 'tree-corner' : 'tree-cross'"
       />
       <wt-icon-btn
-        v-if="data[childrenProp] && data[childrenProp].length"
+        v-if="children.length"
         :icon="collapsed ? 'plus' : 'minus'"
         @click="collapsed = !collapsed"
       />
@@ -25,7 +25,7 @@
       :root-data="rootData || data"
       :nested-level="nestedLevel"
       :active="displayActiveState"
-      :has-children="!!(data[childrenProp] && data[childrenProp].length)"
+      :has-children="!!children.length"
       :selected-parent="selectedParent"
     />
     <div
@@ -48,7 +48,7 @@
   <wt-expand-transition v-show="!collapsed">
     <div>
       <wt-tree-line
-        v-for="(child, index) in data[childrenProp]"
+        v-for="(child, index) in children"
         :key="index"
         :model-value="modelValue"
         :data="child"
@@ -57,9 +57,9 @@
         :item-data="itemData"
         :nested-level="nestedLevel + 1"
         :selected-parent="isSelected || selectedParent"
-        :next-element="!!data[childrenProp][index + 1]"
+        :next-element="!!children[index + 1]"
         :nested-icons="displayIcons"
-        :last-child="index === data[childrenProp].length - 1"
+        :last-child="index === children.length - 1"
         :multiple="multiple"
         :allow-parent="allowParent"
         :root-data="rootData || data"
@@ -86,11 +86,12 @@ import { computed, onMounted, ref, watch } from 'vue';
 
 import WtExpandTransition from '../transitions/wt-expand-transition.vue';
 import type { WtTreeNestedIcons } from './types/wt-tree-nested-icons.ts';
+import type { WtTreeNode } from './types/wt-tree-node.ts';
 
 const props = withDefaults(
 	defineProps<{
-		modelValue: null | unknown | unknown[];
-		data: unknown;
+		modelValue: WtTreeNode | WtTreeNode[] | null;
+		data: WtTreeNode;
 		itemLabel?: string | undefined;
 		itemData?: string | undefined;
 		childrenProp?: string;
@@ -105,7 +106,7 @@ const props = withDefaults(
 		 * 'It's a key in data object, which contains field what display searched elements. By this field, table will be opened to elements with this field value. '
 		 */
 		searchedProp?: string;
-		rootData?: unknown;
+		rootData?: WtTreeNode;
 	}>(),
 	{
 		nestedLevel: 0,
@@ -124,6 +125,15 @@ const emit = defineEmits<{
 	(e: 'update:modelValue', value: unknown): void;
 }>();
 
+// typed explicitly: the component renders itself, so inference would be circular
+defineSlots<{
+	'item-prefix'(props: Record<string, unknown>): unknown;
+}>();
+
+const children = computed<WtTreeNode[]>(
+	() => props.data?.[props.childrenProp] ?? [],
+);
+
 const label = computed(() =>
 	props.itemLabel ? props.data[props.itemLabel] : props.data,
 );
@@ -181,9 +191,9 @@ const displayActiveState = computed(() => {
 });
 
 const toggleSelectionWithChildren = (
-	node: unknown,
+	node: WtTreeNode,
 	select: boolean,
-	result: unknown[],
+	result: WtTreeNode[],
 ) => {
 	const value = props.itemData ? node[props.itemData] : node;
 
@@ -208,10 +218,14 @@ const toggleSelectionWithChildren = (
 		}
 };
 
-const deselectParents = (node: unknown, root: unknown, result: unknown[]) => {
+const deselectParents = (
+	node: WtTreeNode,
+	root: WtTreeNode,
+	result: WtTreeNode[],
+) => {
 	const findAndDeselect = (
-		current: unknown,
-		parent: unknown | null,
+		current: WtTreeNode,
+		parent: WtTreeNode | null,
 	): boolean => {
 		if (current === node) {
 			if (parent) {
@@ -265,7 +279,7 @@ const setMultipleModelValue = () => {
 	if (props.itemData) {
 		existingIndex = props.modelValue.indexOf(props.data[props.itemData]);
 	} else {
-		existingIndex = props.modelValue.findIndex((item) =>
+		existingIndex = props.modelValue.findIndex((item: WtTreeNode) =>
 			deepEqual(item, props.data),
 		);
 	}
@@ -325,7 +339,7 @@ const onOpenParent = () => {
 	openParent();
 };
 
-const hasSearchedElement = (data: Record<string, unknown>, nestedLevel = 0) => {
+const hasSearchedElement = (data: WtTreeNode, nestedLevel = 0) => {
 	// Check if the object itself has searched
 	if (data[props.searchedProp] && nestedLevel) return true;
 

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

@@ -14,7 +14,7 @@
             ]"
             :style="col.width ? `min-width:${col.width}` : ''"
             class="wt-tree-table-th typo-body-1"
-            @click="sort(col, key)"
+            @click="sort(col)"
           >
             <div
               class="wt-tree-table-th__content"
@@ -77,8 +77,8 @@
             />
           </template>
           <template
-            v-for="(col, headerKey) of dataHeaders"
-            :key="headerKey"
+            v-for="col of dataHeaders"
+            :key="col.value"
             #[col.value]="{ item }"
           >
             <slot
@@ -104,6 +104,7 @@ import { getNextSortOrder } from '../../scripts/sortQueryAdapters';
 import { useWtTable } from '../_internals/composables/useWtTable/useWtTable';
 import WtCheckbox from '../wt-checkbox/wt-checkbox.vue';
 import type { WtTableHeader } from '../wt-table/types/WtTable';
+import type { WtTreeNode } from '../wt-tree-line/types/wt-tree-node';
 import WtTreeTableRow from '../wt-tree-table-row/wt-tree-table-row.vue';
 
 const props = withDefaults(
@@ -151,14 +152,14 @@ const emit = defineEmits([
 	'update:selected',
 ]);
 
-const checkHasChildItems = (item: Record<string, unknown>) => {
+const checkHasChildItems = (item: WtTreeNode) => {
 	return item[props.childrenProp] && Array.isArray(item[props.childrenProp]);
 };
 
-const getSelectedValue = (items: Record<string, unknown>[]) => {
-	const selected = [];
+const getSelectedValue = (items: WtTreeNode[]) => {
+	const selected: WtTreeNode[] = [];
 
-	const pushSelectedElement = (item: Record<string, unknown>) => {
+	const pushSelectedElement = (item: WtTreeNode) => {
 		if (item._isSelected) {
 			return [
 				item,
@@ -175,10 +176,10 @@ const getSelectedValue = (items: Record<string, unknown>[]) => {
 	return selected;
 };
 
-const getAllNestedElements = (item: Record<string, unknown>) => {
-	const nested = [];
+const getAllNestedElements = (items: WtTreeNode[]) => {
+	const nested: WtTreeNode[] = [];
 
-	const pushElement = (item: Record<string, unknown>) => {
+	const pushElement = (item: WtTreeNode) => {
 		nested.push(item);
 
 		if (checkHasChildItems(item)) {
@@ -186,12 +187,12 @@ const getAllNestedElements = (item: Record<string, unknown>) => {
 		}
 	};
 
-	item.forEach(pushElement);
+	items.forEach(pushElement);
 
 	return nested;
 };
 
-const selectedElements = computed<Record<string, unknown>[]>(() => {
+const selectedElements = computed<WtTreeNode[]>(() => {
 	// _isSelected for backwards compatibility
 	return props.selected || getSelectedValue(props.data);
 });
@@ -222,11 +223,8 @@ const sort = (col: WtTableHeader) => {
 	emit('sort', col, nextSort);
 };
 
-const changeSelectItem = (
-	items: Record<string, unknown>[],
-	selected: boolean,
-) => {
-	items.forEach((item) => {
+const changeSelectItem = (items: WtTreeNode[], selected: boolean) => {
+	items.forEach((item: WtTreeNode) => {
 		item._isSelected = selected;
 
 		if (checkHasChildItems(item)) {
@@ -261,7 +259,7 @@ const selectAll = () => {
 	}
 };
 
-const handleSelection = (row, select) => {
+const handleSelection = (row: WtTreeNode, select: boolean) => {
 	if (props.selected) {
 		if (select) {
 			emit('update:selected', [

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

@@ -5,7 +5,7 @@
   >
     <td
       v-for="(col, headerKey) of dataHeaders"
-      :key="headerKey"
+      :key="col.value"
       class="wt-tree-table-td typo-body-1"
     >
       <div class="wt-tree-table-td__content">
@@ -79,8 +79,8 @@
       "
     >
       <template
-        v-for="(col, headerKey) of dataHeaders"
-        :key="headerKey"
+        v-for="col of dataHeaders"
+        :key="col.value"
         #[col.value]="{ item }"
       >
         <slot
@@ -108,6 +108,7 @@ import { computed, onMounted, ref } from 'vue';
 import WtCheckbox from '../wt-checkbox/wt-checkbox.vue';
 import WtIconBtn from '../wt-icon-btn/wt-icon-btn.vue';
 import type { WtTableHeader } from '../wt-table/types/WtTable';
+import type { WtTreeNode } from '../wt-tree-line/types/wt-tree-node';
 
 const props = withDefaults(
 	defineProps<{
@@ -149,6 +150,10 @@ const emit = defineEmits([
 	'expanded-collapse',
 ]);
 
+// typed explicitly: the row renders itself, so inference would be circular
+// biome-ignore lint/suspicious/noExplicitAny: slot payloads vary per column
+defineSlots<Record<string, (props: Record<string, any>) => unknown>>();
+
 const collapsed = ref(true);
 const lineCount = computed(() => {
 	return props.nestingLevel;
@@ -166,7 +171,7 @@ const openCollapse = () => {
 	emit('expanded-collapse');
 };
 
-const hasSearchedElement = (data: Record<string, unknown>, nestedLevel = 0) => {
+const hasSearchedElement = (data: WtTreeNode, nestedLevel = 0) => {
 	// Check if the object itself has searched
 	if (data[props.searchedProp] && nestedLevel) return true;
 

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

@@ -18,11 +18,10 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
 import WtIconBtn from '../../../wt-icon-btn/wt-icon-btn.vue';
-import type { WtVidstackPlayerSizeProvider } from '../../types/WtVidstackPlayerSizeProvider';
+import { useVidstackPlayerSize } from '../../composables/useVidstackPlayerSize';
 
-const { fullscreen } = inject<WtVidstackPlayerSizeProvider>('size');
+const { fullscreen } = useVidstackPlayerSize();
 
 const emit = defineEmits<{
 	toggle: [

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

@@ -25,11 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
-
-import type { WtVidstackPlayerSizeProvider } from '../../types/WtVidstackPlayerSizeProvider';
-
-const { size } = inject<WtVidstackPlayerSizeProvider>('size');
+const { size } = useVidstackPlayerSize();
 </script>
 
 <style scoped>.play-button {