@vuetify/nightly 3.9.2-master.2025-07-29 → 3.9.3-master.2025-07-30

package/lib/framework.d.ts

@@ -110,6 +110,7 @@ interface ThemeInstance {
     cycle: (themeArray?: string[]) => void;
     toggle: (themeArray?: [string, string]) => void;
     readonly isDisabled: boolean;
+    readonly isSystem: Readonly<Ref<boolean>>;
     readonly themes: Ref<Record<string, InternalThemeDefinition>>;
     readonly name: Readonly<Ref<string>>;
     readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;
@@ -2607,38 +2608,38 @@ declare module 'vue' {
     VApp: typeof import('vuetify/components')['VApp']
     VAlert: typeof import('vuetify/components')['VAlert']
     VAlertTitle: typeof import('vuetify/components')['VAlertTitle']
-    VAvatar: typeof import('vuetify/components')['VAvatar']
     VAppBar: typeof import('vuetify/components')['VAppBar']
     VAppBarNavIcon: typeof import('vuetify/components')['VAppBarNavIcon']
     VAppBarTitle: typeof import('vuetify/components')['VAppBarTitle']
     VAutocomplete: typeof import('vuetify/components')['VAutocomplete']
+    VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
+    VAvatar: typeof import('vuetify/components')['VAvatar']
     VBadge: typeof import('vuetify/components')['VBadge']
+    VBottomSheet: typeof import('vuetify/components')['VBottomSheet']
     VBanner: typeof import('vuetify/components')['VBanner']
     VBannerActions: typeof import('vuetify/components')['VBannerActions']
     VBannerText: typeof import('vuetify/components')['VBannerText']
-    VBottomNavigation: typeof import('vuetify/components')['VBottomNavigation']
-    VBottomSheet: typeof import('vuetify/components')['VBottomSheet']
-    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
-    VBtn: typeof import('vuetify/components')['VBtn']
-    VCheckbox: typeof import('vuetify/components')['VCheckbox']
-    VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
     VBtnToggle: typeof import('vuetify/components')['VBtnToggle']
     VBreadcrumbs: typeof import('vuetify/components')['VBreadcrumbs']
     VBreadcrumbsItem: typeof import('vuetify/components')['VBreadcrumbsItem']
     VBreadcrumbsDivider: typeof import('vuetify/components')['VBreadcrumbsDivider']
+    VBtn: typeof import('vuetify/components')['VBtn']
+    VBtnGroup: typeof import('vuetify/components')['VBtnGroup']
     VCarousel: typeof import('vuetify/components')['VCarousel']
     VCarouselItem: typeof import('vuetify/components')['VCarouselItem']
-    VChipGroup: typeof import('vuetify/components')['VChipGroup']
-    VCode: typeof import('vuetify/components')['VCode']
     VChip: typeof import('vuetify/components')['VChip']
-    VCombobox: typeof import('vuetify/components')['VCombobox']
+    VCheckbox: typeof import('vuetify/components')['VCheckbox']
+    VCheckboxBtn: typeof import('vuetify/components')['VCheckboxBtn']
     VCard: typeof import('vuetify/components')['VCard']
     VCardActions: typeof import('vuetify/components')['VCardActions']
     VCardItem: typeof import('vuetify/components')['VCardItem']
     VCardSubtitle: typeof import('vuetify/components')['VCardSubtitle']
     VCardText: typeof import('vuetify/components')['VCardText']
     VCardTitle: typeof import('vuetify/components')['VCardTitle']
+    VChipGroup: typeof import('vuetify/components')['VChipGroup']
+    VCode: typeof import('vuetify/components')['VCode']
     VColorPicker: typeof import('vuetify/components')['VColorPicker']
+    VCombobox: typeof import('vuetify/components')['VCombobox']
     VCounter: typeof import('vuetify/components')['VCounter']
     VDataTable: typeof import('vuetify/components')['VDataTable']
     VDataTableHeaders: typeof import('vuetify/components')['VDataTableHeaders']
@@ -2654,29 +2655,29 @@ declare module 'vue' {
     VDatePickerMonth: typeof import('vuetify/components')['VDatePickerMonth']
     VDatePickerMonths: typeof import('vuetify/components')['VDatePickerMonths']
     VDatePickerYears: typeof import('vuetify/components')['VDatePickerYears']
+    VDivider: typeof import('vuetify/components')['VDivider']
+    VEmptyState: typeof import('vuetify/components')['VEmptyState']
     VExpansionPanels: typeof import('vuetify/components')['VExpansionPanels']
     VExpansionPanel: typeof import('vuetify/components')['VExpansionPanel']
     VExpansionPanelText: typeof import('vuetify/components')['VExpansionPanelText']
     VExpansionPanelTitle: typeof import('vuetify/components')['VExpansionPanelTitle']
+    VFileInput: typeof import('vuetify/components')['VFileInput']
     VFab: typeof import('vuetify/components')['VFab']
-    VDivider: typeof import('vuetify/components')['VDivider']
-    VEmptyState: typeof import('vuetify/components')['VEmptyState']
+    VFooter: typeof import('vuetify/components')['VFooter']
     VField: typeof import('vuetify/components')['VField']
     VFieldLabel: typeof import('vuetify/components')['VFieldLabel']
-    VFileInput: typeof import('vuetify/components')['VFileInput']
-    VImg: typeof import('vuetify/components')['VImg']
     VIcon: typeof import('vuetify/components')['VIcon']
     VComponentIcon: typeof import('vuetify/components')['VComponentIcon']
     VSvgIcon: typeof import('vuetify/components')['VSvgIcon']
     VLigatureIcon: typeof import('vuetify/components')['VLigatureIcon']
     VClassIcon: typeof import('vuetify/components')['VClassIcon']
-    VInput: typeof import('vuetify/components')['VInput']
-    VKbd: typeof import('vuetify/components')['VKbd']
-    VInfiniteScroll: typeof import('vuetify/components')['VInfiniteScroll']
     VItemGroup: typeof import('vuetify/components')['VItemGroup']
     VItem: typeof import('vuetify/components')['VItem']
+    VInfiniteScroll: typeof import('vuetify/components')['VInfiniteScroll']
+    VImg: typeof import('vuetify/components')['VImg']
+    VInput: typeof import('vuetify/components')['VInput']
+    VKbd: typeof import('vuetify/components')['VKbd']
     VLabel: typeof import('vuetify/components')['VLabel']
-    VMessages: typeof import('vuetify/components')['VMessages']
     VList: typeof import('vuetify/components')['VList']
     VListGroup: typeof import('vuetify/components')['VListGroup']
     VListImg: typeof import('vuetify/components')['VListImg']
@@ -2686,71 +2687,75 @@ declare module 'vue' {
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
     VListSubheader: typeof import('vuetify/components')['VListSubheader']
-    VMenu: typeof import('vuetify/components')['VMenu']
-    VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
     VMain: typeof import('vuetify/components')['VMain']
-    VNumberInput: typeof import('vuetify/components')['VNumberInput']
+    VMessages: typeof import('vuetify/components')['VMessages']
+    VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
     VOtpInput: typeof import('vuetify/components')['VOtpInput']
+    VNumberInput: typeof import('vuetify/components')['VNumberInput']
+    VMenu: typeof import('vuetify/components')['VMenu']
+    VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
     VOverlay: typeof import('vuetify/components')['VOverlay']
     VPagination: typeof import('vuetify/components')['VPagination']
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
-    VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
-    VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
     VRating: typeof import('vuetify/components')['VRating']
-    VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
+    VRadioGroup: typeof import('vuetify/components')['VRadioGroup']
     VSelect: typeof import('vuetify/components')['VSelect']
     VSheet: typeof import('vuetify/components')['VSheet']
-    VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
+    VSlider: typeof import('vuetify/components')['VSlider']
     VSkeletonLoader: typeof import('vuetify/components')['VSkeletonLoader']
+    VSelectionControlGroup: typeof import('vuetify/components')['VSelectionControlGroup']
     VSlideGroup: typeof import('vuetify/components')['VSlideGroup']
     VSlideGroupItem: typeof import('vuetify/components')['VSlideGroupItem']
-    VSlider: typeof import('vuetify/components')['VSlider']
-    VSnackbar: typeof import('vuetify/components')['VSnackbar']
+    VSelectionControl: typeof import('vuetify/components')['VSelectionControl']
     VStepper: typeof import('vuetify/components')['VStepper']
     VStepperActions: typeof import('vuetify/components')['VStepperActions']
     VStepperHeader: typeof import('vuetify/components')['VStepperHeader']
     VStepperItem: typeof import('vuetify/components')['VStepperItem']
     VStepperWindow: typeof import('vuetify/components')['VStepperWindow']
     VStepperWindowItem: typeof import('vuetify/components')['VStepperWindowItem']
+    VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSwitch: typeof import('vuetify/components')['VSwitch']
+    VTable: typeof import('vuetify/components')['VTable']
     VSystemBar: typeof import('vuetify/components')['VSystemBar']
-    VTextField: typeof import('vuetify/components')['VTextField']
-    VTextarea: typeof import('vuetify/components')['VTextarea']
     VTab: typeof import('vuetify/components')['VTab']
     VTabs: typeof import('vuetify/components')['VTabs']
     VTabsWindow: typeof import('vuetify/components')['VTabsWindow']
     VTabsWindowItem: typeof import('vuetify/components')['VTabsWindowItem']
-    VTable: typeof import('vuetify/components')['VTable']
-    VToolbar: typeof import('vuetify/components')['VToolbar']
-    VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
-    VToolbarItems: typeof import('vuetify/components')['VToolbarItems']
+    VTextField: typeof import('vuetify/components')['VTextField']
+    VTextarea: typeof import('vuetify/components')['VTextarea']
+    VTimeline: typeof import('vuetify/components')['VTimeline']
+    VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
     VTimePicker: typeof import('vuetify/components')['VTimePicker']
     VTimePickerClock: typeof import('vuetify/components')['VTimePickerClock']
     VTimePickerControls: typeof import('vuetify/components')['VTimePickerControls']
-    VTreeview: typeof import('vuetify/components')['VTreeview']
-    VTreeviewItem: typeof import('vuetify/components')['VTreeviewItem']
-    VTreeviewGroup: typeof import('vuetify/components')['VTreeviewGroup']
+    VToolbar: typeof import('vuetify/components')['VToolbar']
+    VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
+    VToolbarItems: typeof import('vuetify/components')['VToolbarItems']
     VTooltip: typeof import('vuetify/components')['VTooltip']
     VWindow: typeof import('vuetify/components')['VWindow']
     VWindowItem: typeof import('vuetify/components')['VWindowItem']
+    VTreeview: typeof import('vuetify/components')['VTreeview']
+    VTreeviewItem: typeof import('vuetify/components')['VTreeviewItem']
+    VTreeviewGroup: typeof import('vuetify/components')['VTreeviewGroup']
     VConfirmEdit: typeof import('vuetify/components')['VConfirmEdit']
     VDataIterator: typeof import('vuetify/components')['VDataIterator']
     VDefaultsProvider: typeof import('vuetify/components')['VDefaultsProvider']
     VForm: typeof import('vuetify/components')['VForm']
+    VHover: typeof import('vuetify/components')['VHover']
     VContainer: typeof import('vuetify/components')['VContainer']
     VCol: typeof import('vuetify/components')['VCol']
     VRow: typeof import('vuetify/components')['VRow']
     VSpacer: typeof import('vuetify/components')['VSpacer']
-    VHover: typeof import('vuetify/components')['VHover']
     VLayout: typeof import('vuetify/components')['VLayout']
     VLayoutItem: typeof import('vuetify/components')['VLayoutItem']
     VLazy: typeof import('vuetify/components')['VLazy']
     VLocaleProvider: typeof import('vuetify/components')['VLocaleProvider']
     VNoSsr: typeof import('vuetify/components')['VNoSsr']
     VParallax: typeof import('vuetify/components')['VParallax']
-    VRadio: typeof import('vuetify/components')['VRadio']
     VRangeSlider: typeof import('vuetify/components')['VRangeSlider']
+    VRadio: typeof import('vuetify/components')['VRadio']
     VResponsive: typeof import('vuetify/components')['VResponsive']
+    VSparkline: typeof import('vuetify/components')['VSparkline']
     VSpeedDial: typeof import('vuetify/components')['VSpeedDial']
     VThemeProvider: typeof import('vuetify/components')['VThemeProvider']
     VValidation: typeof import('vuetify/components')['VValidation']
@@ -2771,27 +2776,22 @@ declare module 'vue' {
     VExpandTransition: typeof import('vuetify/components')['VExpandTransition']
     VExpandXTransition: typeof import('vuetify/components')['VExpandXTransition']
     VDialogTransition: typeof import('vuetify/components')['VDialogTransition']
-    VFooter: typeof import('vuetify/components')['VFooter']
-    VSparkline: typeof import('vuetify/components')['VSparkline']
     VSnackbarQueue: typeof import('vuetify/components')['VSnackbarQueue']
-    VTimeline: typeof import('vuetify/components')['VTimeline']
-    VTimelineItem: typeof import('vuetify/components')['VTimelineItem']
+    VColorInput: typeof import('vuetify/labs/components')['VColorInput']
+    VFileUpload: typeof import('vuetify/labs/components')['VFileUpload']
+    VFileUploadItem: typeof import('vuetify/labs/components')['VFileUploadItem']
     VCalendar: typeof import('vuetify/labs/components')['VCalendar']
     VCalendarDay: typeof import('vuetify/labs/components')['VCalendarDay']
     VCalendarHeader: typeof import('vuetify/labs/components')['VCalendarHeader']
     VCalendarInterval: typeof import('vuetify/labs/components')['VCalendarInterval']
     VCalendarIntervalEvent: typeof import('vuetify/labs/components')['VCalendarIntervalEvent']
     VCalendarMonthDay: typeof import('vuetify/labs/components')['VCalendarMonthDay']
-    VFileUpload: typeof import('vuetify/labs/components')['VFileUpload']
-    VFileUploadItem: typeof import('vuetify/labs/components')['VFileUploadItem']
-    VColorInput: typeof import('vuetify/labs/components')['VColorInput']
+    VIconBtn: typeof import('vuetify/labs/components')['VIconBtn']
     VStepperVertical: typeof import('vuetify/labs/components')['VStepperVertical']
     VStepperVerticalItem: typeof import('vuetify/labs/components')['VStepperVerticalItem']
     VStepperVerticalActions: typeof import('vuetify/labs/components')['VStepperVerticalActions']
     VPicker: typeof import('vuetify/labs/components')['VPicker']
     VPickerTitle: typeof import('vuetify/labs/components')['VPickerTitle']
-    VIconBtn: typeof import('vuetify/labs/components')['VIconBtn']
-    VHotkey: typeof import('vuetify/labs/components')['VHotkey']
     VPie: typeof import('vuetify/labs/components')['VPie']
     VPieSegment: typeof import('vuetify/labs/components')['VPieSegment']
     VPieTooltip: typeof import('vuetify/labs/components')['VPieTooltip']
@@ -2801,6 +2801,7 @@ declare module 'vue' {
     VDateInput: typeof import('vuetify/labs/components')['VDateInput']
     VMaskInput: typeof import('vuetify/labs/components')['VMaskInput']
     VPullToRefresh: typeof import('vuetify/labs/components')['VPullToRefresh']
+    VHotkey: typeof import('vuetify/labs/components')['VHotkey']
   }
   export interface GlobalDirectives {
     vClickOutside: typeof import('vuetify/directives')['ClickOutside']

package/lib/framework.js

@@ -109,7 +109,7 @@ export function createVuetify() {
     };
   });
 }
-export const version = "3.9.2-master.2025-07-29";
+export const version = "3.9.3-master.2025-07-30";
 createVuetify.version = version;
 
 // Vue's inject() can only be used in setup

package/lib/labs/VVideo/VVideo.css

@@ -196,7 +196,7 @@
   transition: 0.6s ease-in-out;
   transition-property: opacity, background-color;
 }
-.v-video-controls, .v-video-controls--pills > .v-video-control__pill {
+.v-video-controls--pills > .v-video-control__pill {
   box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
 }
 .v-video-controls:hover {

package/lib/labs/VVideo/VVideo.js

@@ -390,9 +390,9 @@ export const VVideo = genericComponent()({
         }, {
           default: () => [_createElementVNode("div", {
             "class": _normalizeClass(['v-video__overlay-fill', ...roundedContainerClasses.value])
-          }, [overlayPlayIcon])]
+          }, [props.variant === 'player' && overlayPlayIcon])]
         })]
-      }), _createVNode(VOverlay, _mergeProps({
+      }), props.variant === 'player' && _createVNode(VOverlay, _mergeProps({
         "key": "loading-overlay",
         "modelValue": state.value === 'loading' || waiting.value,
         "opacity": ".1"

package/lib/labs/VVideo/VVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"VVideo.js","names":["makeVVideoControlsProps","VVideoControls","VFadeTransition","VSpacer","VImg","VOverlay","VProgressCircular","VIconBtn","useDisplay","makeComponentProps","makeDensityProps","useDensity","makeDimensionProps","useDimension","useElevation","forwardRefs","useProxiedModel","useRounded","makeThemeProps","provideTheme","MaybeTransition","nextTick","onBeforeUnmount","onMounted","ref","shallowRef","toRef","watch","createRange","genericComponent","omit","pick","propsFactory","useRender","allowedVariants","makeVVideoProps","autoplay","Boolean","muted","eager","src","String","type","image","hideOverlay","noFullscreen","startAt","Number","variant","default","validator","v","includes","controlsTransition","Object","component","controlsVariant","controlsProps","rounded","Array","VVideo","name","inheritAttrs","props","emits","loaded","element","val","setup","_ref","attrs","emit","slots","themeClasses","densityClasses","dimensionStyles","elevationClasses","ssr","roundedForContainer","isArray","roundedForControls","at","roundedClasses","roundedContainerClasses","roundedControlsClasses","containerRef","videoRef","controlsRef","playing","progress","volume","fullscreen","waiting","triggered","startAfterLoad","state","duration","fullscreenEnabled","controlsList","onTimeupdate","currentTime","value","onTriggered","addEventListener","onVideoLoaded","startTime","setTimeout","onClick","onKeydown","e","ctrlKey","key","startsWith","preventDefault","target","tagName","step","shiftKey","Math","min","max","map","skipTo","toggleMuted","toggleFullscreen","play","pause","once","immediate","removeEventListener","focusSlider","container","closest","innerSlider","querySelector","focus","fullscreenExitShortcut","document","body","fullscreenElement","exitFullscreen","onFullscreenExit","requestFullscreen","onVideoClick","onDoubleClick","lastTap","onTouchend","now","performance","showControls","posterTransition","overlayProps","contained","persistent","contentClass","filterProps","hideVolume","hideFullscreen","density","controlsEventHandlers","onSkip","onClick:fullscreen","stopPropagation","controlslist","filter","join","loadingIndicator","_createVNode","color","height","overlayPlayIcon","_createElementVNode","_normalizeClass","class","_normalizeStyle","style","_mergeProps","onPlay","onPause","onWaiting","onPlaying","sources","header","controls","prepend","append","video"],"sources":["../../../src/labs/VVideo/VVideo.tsx"],"sourcesContent":["// Styles\nimport './VVideo.sass'\n\n// Components\nimport { makeVVideoControlsProps, VVideoControls } from './VVideoControls'\nimport { VFadeTransition } from '@/components/transitions'\nimport { VSpacer } from '@/components/VGrid/VSpacer'\nimport { VImg } from '@/components/VImg/VImg'\nimport { VOverlay } from '@/components/VOverlay/VOverlay'\nimport { VProgressCircular } from '@/components/VProgressCircular/VProgressCircular'\nimport { VIconBtn } from '@/labs/VIconBtn/VIconBtn'\n\n// Composables\nimport { useDisplay } from '@/composables'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useElevation } from '@/composables/elevation'\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useRounded } from '@/composables/rounded'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { nextTick, onBeforeUnmount, onMounted, ref, shallowRef, toRef, watch } from 'vue'\nimport { createRange, genericComponent, omit, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Component, PropType, TransitionProps } from 'vue'\nimport type { VVideoControlsActionsSlot, VVideoControlsVariant } from './VVideoControls'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type VVideoSlots = {\n  header: never\n  controls: VVideoControlsActionsSlot\n  prepend: VVideoControlsActionsSlot\n  append: VVideoControlsActionsSlot\n  loader: LoaderSlotProps\n  sources: never\n}\n\nconst allowedVariants = ['background', 'player'] as const\ntype Variant = typeof allowedVariants[number]\n\nexport const makeVVideoProps = propsFactory({\n  autoplay: Boolean,\n  muted: Boolean,\n  eager: Boolean,\n  src: String,\n  type: String, // e.g. video/mp4\n  image: String,\n  hideOverlay: Boolean,\n  noFullscreen: Boolean,\n  startAt: [Number, String],\n  variant: {\n    type: String as PropType<Variant>,\n    default: 'player',\n    validator: (v: any) => allowedVariants.includes(v),\n  },\n  controlsTransition: {\n    type: [Boolean, String, Object] as PropType<null | string | boolean | TransitionProps & { component?: any }>,\n    component: VFadeTransition as Component,\n  },\n  controlsVariant: {\n    type: String as PropType<VVideoControlsVariant>,\n    default: 'default',\n  },\n  controlsProps: {\n    type: Object as PropType<VVideoControls['$props']>,\n  },\n  rounded: [Boolean, Number, String, Array] as PropType<boolean | number | string | (boolean | number | string)[]>,\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeDimensionProps(),\n  ...makeThemeProps(),\n  ...omit(makeVVideoControlsProps(), [\n    'fullscreen',\n    'variant',\n  ]),\n}, 'VVideo')\n\nexport const VVideo = genericComponent<VVideoSlots>()({\n  name: 'VVideo',\n\n  inheritAttrs: false,\n\n  props: makeVVideoProps(),\n\n  emits: {\n    loaded: (element: HTMLVideoElement) => true,\n    'update:playing': (val: boolean) => true,\n    'update:progress': (val: number) => true,\n    'update:volume': (val: number) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { ssr } = useDisplay()\n\n    const roundedForContainer = toRef(() => Array.isArray(props.rounded) ? props.rounded[0] : props.rounded)\n    const roundedForControls = toRef(() => Array.isArray(props.rounded) ? props.rounded.at(-1) : props.rounded ?? false)\n    const { roundedClasses: roundedContainerClasses } = useRounded(roundedForContainer)\n    const { roundedClasses: roundedControlsClasses } = useRounded(roundedForControls)\n\n    const containerRef = ref<HTMLDivElement>()\n    const videoRef = ref<HTMLVideoElement>()\n    const controlsRef = ref<VVideoControls>()\n\n    const playing = useProxiedModel(props, 'playing')\n    const progress = useProxiedModel(props, 'progress')\n    const volume = useProxiedModel(props, 'volume', 0, (v?: number | string) => Number(v ?? 0))\n\n    const fullscreen = shallowRef(false)\n    const waiting = shallowRef(false)\n    const triggered = shallowRef(false)\n    const startAfterLoad = shallowRef(false)\n    const state = shallowRef<'idle' | 'loading' | 'loaded' | 'error'>(props.autoplay ? 'loading' : 'idle')\n    const duration = shallowRef(0)\n\n    const fullscreenEnabled = toRef(() => !props.noFullscreen && !String(attrs.controlsList ?? '').includes('nofullscreen'))\n\n    function onTimeupdate () {\n      const { currentTime, duration } = videoRef.value!\n      progress.value = duration === 0 ? 0 : 100 * currentTime / duration\n    }\n\n    async function onTriggered () {\n      await nextTick()\n      if (!videoRef.value) return\n      videoRef.value.addEventListener('timeupdate', onTimeupdate)\n      videoRef.value.volume = volume.value / 100\n      if (state.value !== 'loaded') {\n        state.value = 'loading'\n      }\n    }\n\n    function onVideoLoaded () {\n      state.value = 'loaded'\n      duration.value = videoRef.value!.duration\n\n      const startTime = Number(props.startAt ?? 0)\n      if (startTime && startTime <= duration.value) {\n        videoRef.value!.currentTime = startTime\n        progress.value = duration.value === 0 ? 0 : 100 * startTime / duration.value\n      }\n\n      if (startAfterLoad.value) {\n        setTimeout(() => playing.value = true, 100)\n      }\n\n      emit('loaded', videoRef.value!)\n    }\n\n    function onClick () {\n      if (state.value !== 'loaded') {\n        triggered.value = true\n        startAfterLoad.value = !startAfterLoad.value\n      }\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      if (!videoRef.value || e.ctrlKey) return\n      if (e.key.startsWith('Arrow')) {\n        e.preventDefault()\n      }\n      switch (true) {\n        case e.key === ' ': {\n          if (!['A', 'BUTTON'].includes((e.target as Element)?.tagName)) {\n            e.preventDefault()\n            playing.value = !playing.value\n          }\n          break\n        }\n        case e.key === 'ArrowRight': {\n          const step = 10 * (e.shiftKey ? 6 : 1)\n          videoRef.value.currentTime = Math.min(videoRef.value.currentTime + step, duration.value)\n          // TODO: show skip indicator\n          break\n        }\n        case e.key === 'ArrowLeft': {\n          const step = 10 * (e.shiftKey ? 6 : 1)\n          videoRef.value.currentTime = Math.max(videoRef.value.currentTime - step, 0)\n          // TODO: show skip indicator\n          break\n        }\n        case createRange(10).map(String).includes(e.key): {\n          skipTo(Number(e.key) * 10)\n          break\n        }\n        case e.key === 'ArrowUp': {\n          volume.value = Math.min(volume.value + 10, 100)\n          // TODO: show volume change indicator\n          break\n        }\n        case e.key === 'ArrowDown': {\n          volume.value = Math.max(volume.value - 10, 0)\n          // TODO: show volume change indicator\n          break\n        }\n        case e.key === 'm': {\n          controlsRef.value?.toggleMuted()\n          break\n        }\n        case e.key === 'f': {\n          toggleFullscreen()\n          break\n        }\n      }\n    }\n\n    function skipTo (v: number) {\n      if (!videoRef.value) return\n      progress.value = v\n      videoRef.value.currentTime = duration.value * v / 100\n    }\n\n    watch(() => props.src, v => {\n      progress.value = 0\n    })\n\n    watch(playing, v => {\n      if (!videoRef.value) return\n      if (v) {\n        videoRef.value.play()\n      } else {\n        videoRef.value.pause()\n      }\n    })\n\n    watch(volume, v => {\n      if (!videoRef.value) return\n      videoRef.value.volume = v / 100\n    })\n\n    watch(triggered, () => onTriggered(), { once: true })\n\n    watch(() => props.eager, v => v && (triggered.value = true), { immediate: true })\n\n    onMounted(() => {\n      if (props.autoplay && !ssr) {\n        triggered.value = true\n        startAfterLoad.value = true\n      }\n    })\n\n    onBeforeUnmount(() => {\n      videoRef.value?.removeEventListener('timeupdate', onTimeupdate)\n    })\n\n    function focusSlider () {\n      const container = videoRef.value?.closest('.v-video') as HTMLElement\n      const innerSlider = container?.querySelector('[role=\"slider\"]') as HTMLElement\n      innerSlider?.focus()\n    }\n\n    function fullscreenExitShortcut (e: KeyboardEvent) {\n      if (['ESC', 'f'].includes(e.key)) {\n        toggleFullscreen()\n        document.body.removeEventListener('keydown', fullscreenExitShortcut)\n      }\n    }\n\n    async function toggleFullscreen () {\n      if (!fullscreenEnabled.value || !document.fullscreenEnabled) {\n        return\n      }\n      if (document.fullscreenElement) {\n        document.exitFullscreen()\n        onFullscreenExit()\n      } else {\n        await containerRef.value?.requestFullscreen()\n        document.body.addEventListener('keydown', fullscreenExitShortcut)\n        document.addEventListener('fullscreenchange', onFullscreenExit)\n        fullscreen.value = true\n      }\n    }\n\n    function onFullscreenExit () {\n      // event fires with a delay after requestFullscreen(), ignore first run\n      if (document.fullscreenElement) return\n\n      focusSlider()\n      fullscreen.value = false\n      document.body.removeEventListener('keydown', fullscreenExitShortcut)\n      document.removeEventListener('fullscreenchange', onFullscreenExit)\n    }\n\n    function onVideoClick (e: Event) {\n      e.preventDefault()\n      if (state.value === 'loaded') {\n        playing.value = !playing.value\n        focusSlider()\n      }\n    }\n\n    function onDoubleClick (e: Event) {\n      e.preventDefault()\n      toggleFullscreen()\n    }\n\n    let lastTap = 0\n    function onTouchend (e: Event) {\n      const now = performance.now()\n      if ((now - lastTap) < 500) {\n        e.preventDefault()\n        toggleFullscreen()\n      } else {\n        lastTap = now\n      }\n    }\n\n    useRender(() => {\n      const showControls = state.value === 'loaded' &&\n        props.variant === 'player' &&\n        props.controlsVariant !== 'hidden'\n\n      const posterTransition = props.variant === 'background'\n        ? 'poster-fade-out'\n        : 'fade-transition'\n\n      const overlayProps = {\n        contained: true,\n        persistent: true,\n        contentClass: 'v-video__overlay-fill',\n      }\n\n      const controlsProps = {\n        ...VVideoControls.filterProps(omit(props, ['variant', 'rounded', 'hideVolume'])),\n        rounded: Array.isArray(props.rounded) ? props.rounded.at(-1) : props.rounded,\n        fullscreen: fullscreen.value,\n        hideVolume: props.hideVolume || props.muted,\n        hideFullscreen: props.hideFullscreen || !fullscreenEnabled.value,\n        density: props.density,\n        variant: props.controlsVariant,\n        playing: playing.value,\n        progress: progress.value,\n        duration: duration.value,\n        volume: volume.value,\n        ...props.controlsProps,\n      }\n\n      const controlsEventHandlers = {\n        onSkip: (v: number) => skipTo(v),\n        'onClick:fullscreen': () => toggleFullscreen(),\n        'onUpdate:playing': (v: boolean) => playing.value = v,\n        'onUpdate:progress': (v: number) => skipTo(v),\n        'onUpdate:volume': (v: number) => volume.value = v,\n        onClick: (e: Event) => e.stopPropagation(),\n      }\n\n      const controlslist = [\n        attrs.controlslist,\n        props.noFullscreen ? 'nofullscreen' : '',\n      ].filter(Boolean).join(' ')\n\n      const loadingIndicator = (\n        <VProgressCircular\n          indeterminate\n          color={ props.color }\n          width=\"3\"\n          size={ Math.min(100, Number(props.height) / 2 || 50) }\n        />\n      )\n\n      const overlayPlayIcon = (\n        <VIconBtn\n          icon=\"$play\"\n          size=\"80\"\n          color=\"#fff\"\n          variant=\"outlined\"\n          iconSize=\"50\"\n          class=\"v-video__center-icon\"\n        />\n      )\n\n      return (\n        <div\n          ref={ containerRef }\n          class={[\n            'v-video',\n            `v-video--variant-${props.variant}`,\n            `v-video--${state.value}`,\n            { 'v-video--playing': playing.value },\n            themeClasses.value,\n            densityClasses.value,\n            roundedContainerClasses.value,\n            props.class,\n          ]}\n          style={[\n            props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'min-width', 'max-width']),\n            props.style,\n          ]}\n          onKeydown={ onKeydown }\n          onClick={ onClick }\n        >\n          <div\n            class={[\n              'v-video__content',\n              elevationClasses.value,\n            ]}\n            style={[\n              props.variant === 'background' ? [] : dimensionStyles.value,\n            ]}\n          >\n            { (props.eager || triggered.value) && (\n              <video\n                key=\"video-element\"\n                class={[\n                  'v-video__video',\n                  roundedContainerClasses.value,\n                ]}\n                { ...omit(attrs, ['controlslist', 'class', 'style']) }\n                controlslist={ controlslist }\n                autoplay={ props.autoplay }\n                muted={ props.muted }\n                playsinline\n                ref={ videoRef }\n                onLoadeddata={ onVideoLoaded }\n                onPlay={ () => playing.value = true }\n                onPause={ () => playing.value = false }\n                onWaiting={ () => waiting.value = true }\n                onPlaying={ () => waiting.value = false }\n                onClick={ onVideoClick }\n                onDblclick={ onDoubleClick }\n                onTouchend={ onTouchend }\n              >\n                { slots.sources?.() ?? <source src={ props.src } type={ props.type } /> }\n              </video>\n            )}\n            { props.variant === 'player' && !props.hideOverlay && (\n              <VOverlay\n                key=\"pause-overlay\"\n                modelValue={ state.value === 'loaded' }\n                opacity=\"0\"\n                { ...overlayProps }\n              >\n                <VSpacer />\n                <MaybeTransition name=\"fade-transition\">\n                  { !playing.value && overlayPlayIcon }\n                </MaybeTransition>\n                <VSpacer />\n              </VOverlay>\n            )}\n            { props.variant === 'player' && !!slots.header\n              ? (\n                <div key=\"header\" class=\"v-video__header\">\n                  { slots.header() }\n                </div>\n              )\n              : '' }\n            <VOverlay\n              key=\"poster-overlay\"\n              modelValue={ state.value !== 'loaded' }\n              transition={ posterTransition }\n              { ...overlayProps }\n            >\n              <VImg cover src={ props.image }>\n                <div\n                  class={[\n                    'v-video__overlay-fill',\n                    ...roundedContainerClasses.value,\n                  ]}\n                >\n                  { overlayPlayIcon }\n                </div>\n              </VImg>\n            </VOverlay>\n            <VOverlay\n              key=\"loading-overlay\"\n              modelValue={ state.value === 'loading' || waiting.value }\n              opacity=\".1\"\n              { ...overlayProps }\n            >\n              { loadingIndicator }\n            </VOverlay>\n          </div>\n          <MaybeTransition key=\"actions\" transition={ props.controlsTransition }>\n            { showControls && (\n              <VVideoControls\n                ref={ controlsRef }\n                class={ roundedControlsClasses.value }\n                { ...controlsProps }\n                { ...controlsEventHandlers }\n              >\n                {{\n                  default: slots.controls,\n                  prepend: slots.prepend,\n                  append: slots.append,\n                }}\n              </VVideoControls>\n            )}\n          </MaybeTransition>\n        </div>\n      )\n    })\n\n    return {\n      video: videoRef,\n      ...forwardRefs({\n        skipTo,\n        toggleFullscreen,\n      }, controlsRef),\n    }\n  },\n})\n\nexport type VVideo = InstanceType<typeof VVideo>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,uBAAuB,EAAEC,cAAc;AAAA,SACvCC,eAAe;AAAA,SACfC,OAAO;AAAA,SACPC,IAAI;AAAA,SACJC,QAAQ;AAAA,SACRC,iBAAiB;AAAA,SACjBC,QAAQ,mCAEjB;AAAA,SACSC,UAAU;AAAA,SACVC,kBAAkB;AAAA,SAClBC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,YAAY;AAAA,SACZC,WAAW;AAAA,SACXC,eAAe;AAAA,SACfC,UAAU;AAAA,SACVC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,eAAe,2CAExB;AACA,SAASC,QAAQ,EAAEC,eAAe,EAAEC,SAAS,EAAEC,GAAG,EAAEC,UAAU,EAAEC,KAAK,EAAEC,KAAK,QAAQ,KAAK;AAAA,SAChFC,WAAW,EAAEC,gBAAgB,EAAEC,IAAI,EAAEC,IAAI,EAAEC,YAAY,EAAEC,SAAS,+BAE3E;AAcA,MAAMC,eAAe,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAU;AAGzD,OAAO,MAAMC,eAAe,GAAGH,YAAY,CAAC;EAC1CI,QAAQ,EAAEC,OAAO;EACjBC,KAAK,EAAED,OAAO;EACdE,KAAK,EAAEF,OAAO;EACdG,GAAG,EAAEC,MAAM;EACXC,IAAI,EAAED,MAAM;EAAE;EACdE,KAAK,EAAEF,MAAM;EACbG,WAAW,EAAEP,OAAO;EACpBQ,YAAY,EAAER,OAAO;EACrBS,OAAO,EAAE,CAACC,MAAM,EAAEN,MAAM,CAAC;EACzBO,OAAO,EAAE;IACPN,IAAI,EAAED,MAA2B;IACjCQ,OAAO,EAAE,QAAQ;IACjBC,SAAS,EAAGC,CAAM,IAAKjB,eAAe,CAACkB,QAAQ,CAACD,CAAC;EACnD,CAAC;EACDE,kBAAkB,EAAE;IAClBX,IAAI,EAAE,CAACL,OAAO,EAAEI,MAAM,EAAEa,MAAM,CAA8E;IAC5GC,SAAS,EAAErD;EACb,CAAC;EACDsD,eAAe,EAAE;IACfd,IAAI,EAAED,MAAyC;IAC/CQ,OAAO,EAAE;EACX,CAAC;EACDQ,aAAa,EAAE;IACbf,IAAI,EAAEY;EACR,CAAC;EACDI,OAAO,EAAE,CAACrB,OAAO,EAAEU,MAAM,EAAEN,MAAM,EAAEkB,KAAK,CAAwE;EAEhH,GAAGlD,kBAAkB,CAAC,CAAC;EACvB,GAAGC,gBAAgB,CAAC,CAAC;EACrB,GAAGE,kBAAkB,CAAC,CAAC;EACvB,GAAGM,cAAc,CAAC,CAAC;EACnB,GAAGY,IAAI,CAAC9B,uBAAuB,CAAC,CAAC,EAAE,CACjC,YAAY,EACZ,SAAS,CACV;AACH,CAAC,EAAE,QAAQ,CAAC;AAEZ,OAAO,MAAM4D,MAAM,GAAG/B,gBAAgB,CAAc,CAAC,CAAC;EACpDgC,IAAI,EAAE,QAAQ;EAEdC,YAAY,EAAE,KAAK;EAEnBC,KAAK,EAAE5B,eAAe,CAAC,CAAC;EAExB6B,KAAK,EAAE;IACLC,MAAM,EAAGC,OAAyB,IAAK,IAAI;IAC3C,gBAAgB,EAAGC,GAAY,IAAK,IAAI;IACxC,iBAAiB,EAAGA,GAAW,IAAK,IAAI;IACxC,eAAe,EAAGA,GAAW,IAAK;EACpC,CAAC;EAEDC,KAAKA,CAAEL,KAAK,EAAAM,IAAA,EAA0B;IAAA,IAAxB;MAAEC,KAAK;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAH,IAAA;IAClC,MAAM;MAAEI;IAAa,CAAC,GAAGtD,YAAY,CAAC4C,KAAK,CAAC;IAC5C,MAAM;MAAEW;IAAe,CAAC,GAAG/D,UAAU,CAACoD,KAAK,CAAC;IAC5C,MAAM;MAAEY;IAAgB,CAAC,GAAG9D,YAAY,CAACkD,KAAK,CAAC;IAC/C,MAAM;MAAEa;IAAiB,CAAC,GAAG9D,YAAY,CAACiD,KAAK,CAAC;IAChD,MAAM;MAAEc;IAAI,CAAC,GAAGrE,UAAU,CAAC,CAAC;IAE5B,MAAMsE,mBAAmB,GAAGpD,KAAK,CAAC,MAAMiC,KAAK,CAACoB,OAAO,CAAChB,KAAK,CAACL,OAAO,CAAC,GAAGK,KAAK,CAACL,OAAO,CAAC,CAAC,CAAC,GAAGK,KAAK,CAACL,OAAO,CAAC;IACxG,MAAMsB,kBAAkB,GAAGtD,KAAK,CAAC,MAAMiC,KAAK,CAACoB,OAAO,CAAChB,KAAK,CAACL,OAAO,CAAC,GAAGK,KAAK,CAACL,OAAO,CAACuB,EAAE,CAAC,CAAC,CAAC,CAAC,GAAGlB,KAAK,CAACL,OAAO,IAAI,KAAK,CAAC;IACpH,MAAM;MAAEwB,cAAc,EAAEC;IAAwB,CAAC,GAAGlE,UAAU,CAAC6D,mBAAmB,CAAC;IACnF,MAAM;MAAEI,cAAc,EAAEE;IAAuB,CAAC,GAAGnE,UAAU,CAAC+D,kBAAkB,CAAC;IAEjF,MAAMK,YAAY,GAAG7D,GAAG,CAAiB,CAAC;IAC1C,MAAM8D,QAAQ,GAAG9D,GAAG,CAAmB,CAAC;IACxC,MAAM+D,WAAW,GAAG/D,GAAG,CAAiB,CAAC;IAEzC,MAAMgE,OAAO,GAAGxE,eAAe,CAAC+C,KAAK,EAAE,SAAS,CAAC;IACjD,MAAM0B,QAAQ,GAAGzE,eAAe,CAAC+C,KAAK,EAAE,UAAU,CAAC;IACnD,MAAM2B,MAAM,GAAG1E,eAAe,CAAC+C,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAGZ,CAAmB,IAAKJ,MAAM,CAACI,CAAC,IAAI,CAAC,CAAC,CAAC;IAE3F,MAAMwC,UAAU,GAAGlE,UAAU,CAAC,KAAK,CAAC;IACpC,MAAMmE,OAAO,GAAGnE,UAAU,CAAC,KAAK,CAAC;IACjC,MAAMoE,SAAS,GAAGpE,UAAU,CAAC,KAAK,CAAC;IACnC,MAAMqE,cAAc,GAAGrE,UAAU,CAAC,KAAK,CAAC;IACxC,MAAMsE,KAAK,GAAGtE,UAAU,CAA0CsC,KAAK,CAAC3B,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IACtG,MAAM4D,QAAQ,GAAGvE,UAAU,CAAC,CAAC,CAAC;IAE9B,MAAMwE,iBAAiB,GAAGvE,KAAK,CAAC,MAAM,CAACqC,KAAK,CAAClB,YAAY,IAAI,CAACJ,MAAM,CAAC6B,KAAK,CAAC4B,YAAY,IAAI,EAAE,CAAC,CAAC9C,QAAQ,CAAC,cAAc,CAAC,CAAC;IAExH,SAAS+C,YAAYA,CAAA,EAAI;MACvB,MAAM;QAAEC,WAAW;QAAEJ;MAAS,CAAC,GAAGV,QAAQ,CAACe,KAAM;MACjDZ,QAAQ,CAACY,KAAK,GAAGL,QAAQ,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,GAAGI,WAAW,GAAGJ,QAAQ;IACpE;IAEA,eAAeM,WAAWA,CAAA,EAAI;MAC5B,MAAMjF,QAAQ,CAAC,CAAC;MAChB,IAAI,CAACiE,QAAQ,CAACe,KAAK,EAAE;MACrBf,QAAQ,CAACe,KAAK,CAACE,gBAAgB,CAAC,YAAY,EAAEJ,YAAY,CAAC;MAC3Db,QAAQ,CAACe,KAAK,CAACX,MAAM,GAAGA,MAAM,CAACW,KAAK,GAAG,GAAG;MAC1C,IAAIN,KAAK,CAACM,KAAK,KAAK,QAAQ,EAAE;QAC5BN,KAAK,CAACM,KAAK,GAAG,SAAS;MACzB;IACF;IAEA,SAASG,aAAaA,CAAA,EAAI;MACxBT,KAAK,CAACM,KAAK,GAAG,QAAQ;MACtBL,QAAQ,CAACK,KAAK,GAAGf,QAAQ,CAACe,KAAK,CAAEL,QAAQ;MAEzC,MAAMS,SAAS,GAAG1D,MAAM,CAACgB,KAAK,CAACjB,OAAO,IAAI,CAAC,CAAC;MAC5C,IAAI2D,SAAS,IAAIA,SAAS,IAAIT,QAAQ,CAACK,KAAK,EAAE;QAC5Cf,QAAQ,CAACe,KAAK,CAAED,WAAW,GAAGK,SAAS;QACvChB,QAAQ,CAACY,KAAK,GAAGL,QAAQ,CAACK,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,GAAGI,SAAS,GAAGT,QAAQ,CAACK,KAAK;MAC9E;MAEA,IAAIP,cAAc,CAACO,KAAK,EAAE;QACxBK,UAAU,CAAC,MAAMlB,OAAO,CAACa,KAAK,GAAG,IAAI,EAAE,GAAG,CAAC;MAC7C;MAEA9B,IAAI,CAAC,QAAQ,EAAEe,QAAQ,CAACe,KAAM,CAAC;IACjC;IAEA,SAASM,OAAOA,CAAA,EAAI;MAClB,IAAIZ,KAAK,CAACM,KAAK,KAAK,QAAQ,EAAE;QAC5BR,SAAS,CAACQ,KAAK,GAAG,IAAI;QACtBP,cAAc,CAACO,KAAK,GAAG,CAACP,cAAc,CAACO,KAAK;MAC9C;IACF;IAEA,SAASO,SAASA,CAAEC,CAAgB,EAAE;MACpC,IAAI,CAACvB,QAAQ,CAACe,KAAK,IAAIQ,CAAC,CAACC,OAAO,EAAE;MAClC,IAAID,CAAC,CAACE,GAAG,CAACC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC7BH,CAAC,CAACI,cAAc,CAAC,CAAC;MACpB;MACA,QAAQ,IAAI;QACV,KAAKJ,CAAC,CAACE,GAAG,KAAK,GAAG;UAAE;YAClB,IAAI,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC3D,QAAQ,CAAEyD,CAAC,CAACK,MAAM,EAAcC,OAAO,CAAC,EAAE;cAC7DN,CAAC,CAACI,cAAc,CAAC,CAAC;cAClBzB,OAAO,CAACa,KAAK,GAAG,CAACb,OAAO,CAACa,KAAK;YAChC;YACA;UACF;QACA,KAAKQ,CAAC,CAACE,GAAG,KAAK,YAAY;UAAE;YAC3B,MAAMK,IAAI,GAAG,EAAE,IAAIP,CAAC,CAACQ,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;YACtC/B,QAAQ,CAACe,KAAK,CAACD,WAAW,GAAGkB,IAAI,CAACC,GAAG,CAACjC,QAAQ,CAACe,KAAK,CAACD,WAAW,GAAGgB,IAAI,EAAEpB,QAAQ,CAACK,KAAK,CAAC;YACxF;YACA;UACF;QACA,KAAKQ,CAAC,CAACE,GAAG,KAAK,WAAW;UAAE;YAC1B,MAAMK,IAAI,GAAG,EAAE,IAAIP,CAAC,CAACQ,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;YACtC/B,QAAQ,CAACe,KAAK,CAACD,WAAW,GAAGkB,IAAI,CAACE,GAAG,CAAClC,QAAQ,CAACe,KAAK,CAACD,WAAW,GAAGgB,IAAI,EAAE,CAAC,CAAC;YAC3E;YACA;UACF;QACA,KAAKxF,WAAW,CAAC,EAAE,CAAC,CAAC6F,GAAG,CAAChF,MAAM,CAAC,CAACW,QAAQ,CAACyD,CAAC,CAACE,GAAG,CAAC;UAAE;YAChDW,MAAM,CAAC3E,MAAM,CAAC8D,CAAC,CAACE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC1B;UACF;QACA,KAAKF,CAAC,CAACE,GAAG,KAAK,SAAS;UAAE;YACxBrB,MAAM,CAACW,KAAK,GAAGiB,IAAI,CAACC,GAAG,CAAC7B,MAAM,CAACW,KAAK,GAAG,EAAE,EAAE,GAAG,CAAC;YAC/C;YACA;UACF;QACA,KAAKQ,CAAC,CAACE,GAAG,KAAK,WAAW;UAAE;YAC1BrB,MAAM,CAACW,KAAK,GAAGiB,IAAI,CAACE,GAAG,CAAC9B,MAAM,CAACW,KAAK,GAAG,EAAE,EAAE,CAAC,CAAC;YAC7C;YACA;UACF;QACA,KAAKQ,CAAC,CAACE,GAAG,KAAK,GAAG;UAAE;YAClBxB,WAAW,CAACc,KAAK,EAAEsB,WAAW,CAAC,CAAC;YAChC;UACF;QACA,KAAKd,CAAC,CAACE,GAAG,KAAK,GAAG;UAAE;YAClBa,gBAAgB,CAAC,CAAC;YAClB;UACF;MACF;IACF;IAEA,SAASF,MAAMA,CAAEvE,CAAS,EAAE;MAC1B,IAAI,CAACmC,QAAQ,CAACe,KAAK,EAAE;MACrBZ,QAAQ,CAACY,KAAK,GAAGlD,CAAC;MAClBmC,QAAQ,CAACe,KAAK,CAACD,WAAW,GAAGJ,QAAQ,CAACK,KAAK,GAAGlD,CAAC,GAAG,GAAG;IACvD;IAEAxB,KAAK,CAAC,MAAMoC,KAAK,CAACvB,GAAG,EAAEW,CAAC,IAAI;MAC1BsC,QAAQ,CAACY,KAAK,GAAG,CAAC;IACpB,CAAC,CAAC;IAEF1E,KAAK,CAAC6D,OAAO,EAAErC,CAAC,IAAI;MAClB,IAAI,CAACmC,QAAQ,CAACe,KAAK,EAAE;MACrB,IAAIlD,CAAC,EAAE;QACLmC,QAAQ,CAACe,KAAK,CAACwB,IAAI,CAAC,CAAC;MACvB,CAAC,MAAM;QACLvC,QAAQ,CAACe,KAAK,CAACyB,KAAK,CAAC,CAAC;MACxB;IACF,CAAC,CAAC;IAEFnG,KAAK,CAAC+D,MAAM,EAAEvC,CAAC,IAAI;MACjB,IAAI,CAACmC,QAAQ,CAACe,KAAK,EAAE;MACrBf,QAAQ,CAACe,KAAK,CAACX,MAAM,GAAGvC,CAAC,GAAG,GAAG;IACjC,CAAC,CAAC;IAEFxB,KAAK,CAACkE,SAAS,EAAE,MAAMS,WAAW,CAAC,CAAC,EAAE;MAAEyB,IAAI,EAAE;IAAK,CAAC,CAAC;IAErDpG,KAAK,CAAC,MAAMoC,KAAK,CAACxB,KAAK,EAAEY,CAAC,IAAIA,CAAC,KAAK0C,SAAS,CAACQ,KAAK,GAAG,IAAI,CAAC,EAAE;MAAE2B,SAAS,EAAE;IAAK,CAAC,CAAC;IAEjFzG,SAAS,CAAC,MAAM;MACd,IAAIwC,KAAK,CAAC3B,QAAQ,IAAI,CAACyC,GAAG,EAAE;QAC1BgB,SAAS,CAACQ,KAAK,GAAG,IAAI;QACtBP,cAAc,CAACO,KAAK,GAAG,IAAI;MAC7B;IACF,CAAC,CAAC;IAEF/E,eAAe,CAAC,MAAM;MACpBgE,QAAQ,CAACe,KAAK,EAAE4B,mBAAmB,CAAC,YAAY,EAAE9B,YAAY,CAAC;IACjE,CAAC,CAAC;IAEF,SAAS+B,WAAWA,CAAA,EAAI;MACtB,MAAMC,SAAS,GAAG7C,QAAQ,CAACe,KAAK,EAAE+B,OAAO,CAAC,UAAU,CAAgB;MACpE,MAAMC,WAAW,GAAGF,SAAS,EAAEG,aAAa,CAAC,iBAAiB,CAAgB;MAC9ED,WAAW,EAAEE,KAAK,CAAC,CAAC;IACtB;IAEA,SAASC,sBAAsBA,CAAE3B,CAAgB,EAAE;MACjD,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAACzD,QAAQ,CAACyD,CAAC,CAACE,GAAG,CAAC,EAAE;QAChCa,gBAAgB,CAAC,CAAC;QAClBa,QAAQ,CAACC,IAAI,CAACT,mBAAmB,CAAC,SAAS,EAAEO,sBAAsB,CAAC;MACtE;IACF;IAEA,eAAeZ,gBAAgBA,CAAA,EAAI;MACjC,IAAI,CAAC3B,iBAAiB,CAACI,KAAK,IAAI,CAACoC,QAAQ,CAACxC,iBAAiB,EAAE;QAC3D;MACF;MACA,IAAIwC,QAAQ,CAACE,iBAAiB,EAAE;QAC9BF,QAAQ,CAACG,cAAc,CAAC,CAAC;QACzBC,gBAAgB,CAAC,CAAC;MACpB,CAAC,MAAM;QACL,MAAMxD,YAAY,CAACgB,KAAK,EAAEyC,iBAAiB,CAAC,CAAC;QAC7CL,QAAQ,CAACC,IAAI,CAACnC,gBAAgB,CAAC,SAAS,EAAEiC,sBAAsB,CAAC;QACjEC,QAAQ,CAAClC,gBAAgB,CAAC,kBAAkB,EAAEsC,gBAAgB,CAAC;QAC/DlD,UAAU,CAACU,KAAK,GAAG,IAAI;MACzB;IACF;IAEA,SAASwC,gBAAgBA,CAAA,EAAI;MAC3B;MACA,IAAIJ,QAAQ,CAACE,iBAAiB,EAAE;MAEhCT,WAAW,CAAC,CAAC;MACbvC,UAAU,CAACU,KAAK,GAAG,KAAK;MACxBoC,QAAQ,CAACC,IAAI,CAACT,mBAAmB,CAAC,SAAS,EAAEO,sBAAsB,CAAC;MACpEC,QAAQ,CAACR,mBAAmB,CAAC,kBAAkB,EAAEY,gBAAgB,CAAC;IACpE;IAEA,SAASE,YAAYA,CAAElC,CAAQ,EAAE;MAC/BA,CAAC,CAACI,cAAc,CAAC,CAAC;MAClB,IAAIlB,KAAK,CAACM,KAAK,KAAK,QAAQ,EAAE;QAC5Bb,OAAO,CAACa,KAAK,GAAG,CAACb,OAAO,CAACa,KAAK;QAC9B6B,WAAW,CAAC,CAAC;MACf;IACF;IAEA,SAASc,aAAaA,CAAEnC,CAAQ,EAAE;MAChCA,CAAC,CAACI,cAAc,CAAC,CAAC;MAClBW,gBAAgB,CAAC,CAAC;IACpB;IAEA,IAAIqB,OAAO,GAAG,CAAC;IACf,SAASC,UAAUA,CAAErC,CAAQ,EAAE;MAC7B,MAAMsC,GAAG,GAAGC,WAAW,CAACD,GAAG,CAAC,CAAC;MAC7B,IAAKA,GAAG,GAAGF,OAAO,GAAI,GAAG,EAAE;QACzBpC,CAAC,CAACI,cAAc,CAAC,CAAC;QAClBW,gBAAgB,CAAC,CAAC;MACpB,CAAC,MAAM;QACLqB,OAAO,GAAGE,GAAG;MACf;IACF;IAEAlH,SAAS,CAAC,MAAM;MACd,MAAMoH,YAAY,GAAGtD,KAAK,CAACM,KAAK,KAAK,QAAQ,IAC3CtC,KAAK,CAACf,OAAO,KAAK,QAAQ,IAC1Be,KAAK,CAACP,eAAe,KAAK,QAAQ;MAEpC,MAAM8F,gBAAgB,GAAGvF,KAAK,CAACf,OAAO,KAAK,YAAY,GACnD,iBAAiB,GACjB,iBAAiB;MAErB,MAAMuG,YAAY,GAAG;QACnBC,SAAS,EAAE,IAAI;QACfC,UAAU,EAAE,IAAI;QAChBC,YAAY,EAAE;MAChB,CAAC;MAED,MAAMjG,aAAa,GAAG;QACpB,GAAGxD,cAAc,CAAC0J,WAAW,CAAC7H,IAAI,CAACiC,KAAK,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;QAChFL,OAAO,EAAEC,KAAK,CAACoB,OAAO,CAAChB,KAAK,CAACL,OAAO,CAAC,GAAGK,KAAK,CAACL,OAAO,CAACuB,EAAE,CAAC,CAAC,CAAC,CAAC,GAAGlB,KAAK,CAACL,OAAO;QAC5EiC,UAAU,EAAEA,UAAU,CAACU,KAAK;QAC5BuD,UAAU,EAAE7F,KAAK,CAAC6F,UAAU,IAAI7F,KAAK,CAACzB,KAAK;QAC3CuH,cAAc,EAAE9F,KAAK,CAAC8F,cAAc,IAAI,CAAC5D,iBAAiB,CAACI,KAAK;QAChEyD,OAAO,EAAE/F,KAAK,CAAC+F,OAAO;QACtB9G,OAAO,EAAEe,KAAK,CAACP,eAAe;QAC9BgC,OAAO,EAAEA,OAAO,CAACa,KAAK;QACtBZ,QAAQ,EAAEA,QAAQ,CAACY,KAAK;QACxBL,QAAQ,EAAEA,QAAQ,CAACK,KAAK;QACxBX,MAAM,EAAEA,MAAM,CAACW,KAAK;QACpB,GAAGtC,KAAK,CAACN;MACX,CAAC;MAED,MAAMsG,qBAAqB,GAAG;QAC5BC,MAAM,EAAG7G,CAAS,IAAKuE,MAAM,CAACvE,CAAC,CAAC;QAChC,oBAAoB,EAAE8G,CAAA,KAAMrC,gBAAgB,CAAC,CAAC;QAC9C,kBAAkB,EAAGzE,CAAU,IAAKqC,OAAO,CAACa,KAAK,GAAGlD,CAAC;QACrD,mBAAmB,EAAGA,CAAS,IAAKuE,MAAM,CAACvE,CAAC,CAAC;QAC7C,iBAAiB,EAAGA,CAAS,IAAKuC,MAAM,CAACW,KAAK,GAAGlD,CAAC;QAClDwD,OAAO,EAAGE,CAAQ,IAAKA,CAAC,CAACqD,eAAe,CAAC;MAC3C,CAAC;MAED,MAAMC,YAAY,GAAG,CACnB7F,KAAK,CAAC6F,YAAY,EAClBpG,KAAK,CAAClB,YAAY,GAAG,cAAc,GAAG,EAAE,CACzC,CAACuH,MAAM,CAAC/H,OAAO,CAAC,CAACgI,IAAI,CAAC,GAAG,CAAC;MAE3B,MAAMC,gBAAgB,GAAAC,YAAA,CAAAjK,iBAAA;QAAA;QAAA,SAGVyD,KAAK,CAACyG,KAAK;QAAA;QAAA,QAEZlD,IAAI,CAACC,GAAG,CAAC,GAAG,EAAExE,MAAM,CAACgB,KAAK,CAAC0G,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE;MAAC,QAEvD;MAED,MAAMC,eAAe,GAAAH,YAAA,CAAAhK,QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;MAAA,QASpB;MAED,OAAAoK,mBAAA;QAAA,OAEUtF,YAAY;QAAA,SAAAuF,eAAA,CACX,CACL,SAAS,EACT,oBAAoB7G,KAAK,CAACf,OAAO,EAAE,EACnC,YAAY+C,KAAK,CAACM,KAAK,EAAE,EACzB;UAAE,kBAAkB,EAAEb,OAAO,CAACa;QAAM,CAAC,EACrC5B,YAAY,CAAC4B,KAAK,EAClB3B,cAAc,CAAC2B,KAAK,EACpBlB,uBAAuB,CAACkB,KAAK,EAC7BtC,KAAK,CAAC8G,KAAK,CACZ;QAAA,SAAAC,eAAA,CACM,CACL/G,KAAK,CAACf,OAAO,KAAK,YAAY,GAAG,EAAE,GAAGjB,IAAI,CAAC4C,eAAe,CAAC0B,KAAK,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,EACtGtC,KAAK,CAACgH,KAAK,CACZ;QAAA,aACWnE,SAAS;QAAA,WACXD;MAAO,IAAAgE,mBAAA;QAAA,SAAAC,eAAA,CAGR,CACL,kBAAkB,EAClBhG,gBAAgB,CAACyB,KAAK,CACvB;QAAA,SAAAyE,eAAA,CACM,CACL/G,KAAK,CAACf,OAAO,KAAK,YAAY,GAAG,EAAE,GAAG2B,eAAe,CAAC0B,KAAK,CAC5D;MAAA,IAEC,CAACtC,KAAK,CAACxB,KAAK,IAAIsD,SAAS,CAACQ,KAAK,KAAAsE,mBAAA,UAAAK,WAAA;QAAA;QAAA,SAGtB,CACL,gBAAgB,EAChB7F,uBAAuB,CAACkB,KAAK;MAC9B,GACIvE,IAAI,CAACwC,KAAK,EAAE,CAAC,cAAc,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QAAA,gBACrC6F,YAAY;QAAA,YAChBpG,KAAK,CAAC3B,QAAQ;QAAA,SACjB2B,KAAK,CAACzB,KAAK;QAAA;QAAA,OAEbgD,QAAQ;QAAA,gBACCkB,aAAa;QAAA,UACnByE,CAAA,KAAMzF,OAAO,CAACa,KAAK,GAAG,IAAI;QAAA,WACzB6E,CAAA,KAAM1F,OAAO,CAACa,KAAK,GAAG,KAAK;QAAA,aACzB8E,CAAA,KAAMvF,OAAO,CAACS,KAAK,GAAG,IAAI;QAAA,aAC1B+E,CAAA,KAAMxF,OAAO,CAACS,KAAK,GAAG,KAAK;QAAA,WAC7B0C,YAAY;QAAA,cACTC,aAAa;QAAA,cACbE;MAAU,KAErB1E,KAAK,CAAC6G,OAAO,GAAG,CAAC,IAAAV,mBAAA;QAAA,OAAkB5G,KAAK,CAACvB,GAAG;QAAA,QAAUuB,KAAK,CAACrB;MAAI,QAAK,EAE1E,EACCqB,KAAK,CAACf,OAAO,KAAK,QAAQ,IAAI,CAACe,KAAK,CAACnB,WAAW,IAAA2H,YAAA,CAAAlK,QAAA,EAAA2K,WAAA;QAAA;QAAA,cAGjCjF,KAAK,CAACM,KAAK,KAAK,QAAQ;QAAA;MAAA,GAEhCkD,YAAY;QAAAtG,OAAA,EAAAA,CAAA,MAAAsH,YAAA,CAAApK,OAAA,eAAAoK,YAAA,CAAAnJ,eAAA;UAAA;QAAA;UAAA6B,OAAA,EAAAA,CAAA,MAIb,CAACuC,OAAO,CAACa,KAAK,IAAIqE,eAAe;QAAA,IAAAH,YAAA,CAAApK,OAAA;MAAA,EAIxC,EACC4D,KAAK,CAACf,OAAO,KAAK,QAAQ,IAAI,CAAC,CAACwB,KAAK,CAAC8G,MAAM,GAAAX,mBAAA;QAAA;QAAA;MAAA,IAGtCnG,KAAK,CAAC8G,MAAM,CAAC,CAAC,KAGlB,EAAE,EAAAf,YAAA,CAAAlK,QAAA,EAAA2K,WAAA;QAAA;QAAA,cAGSjF,KAAK,CAACM,KAAK,KAAK,QAAQ;QAAA,cACxBiD;MAAgB,GACxBC,YAAY;QAAAtG,OAAA,EAAAA,CAAA,MAAAsH,YAAA,CAAAnK,IAAA;UAAA;UAAA,OAEC2D,KAAK,CAACpB;QAAK;UAAAM,OAAA,EAAAA,CAAA,MAAA0H,mBAAA;YAAA,SAAAC,eAAA,CAElB,CACL,uBAAuB,EACvB,GAAGzF,uBAAuB,CAACkB,KAAK,CACjC;UAAA,IAECqE,eAAe;QAAA;MAAA,IAAAH,YAAA,CAAAlK,QAAA,EAAA2K,WAAA;QAAA;QAAA,cAMRjF,KAAK,CAACM,KAAK,KAAK,SAAS,IAAIT,OAAO,CAACS,KAAK;QAAA;MAAA,GAElDkD,YAAY;QAAAtG,OAAA,EAAAA,CAAA,MAEfqH,gBAAgB;MAAA,MAAAC,YAAA,CAAAnJ,eAAA;QAAA;QAAA,cAGsB2C,KAAK,CAACV;MAAkB;QAAAJ,OAAA,EAAAA,CAAA,MAChEoG,YAAY,IAAAkB,YAAA,CAAAtK,cAAA,EAAA+K,WAAA;UAAA,OAEJzF,WAAW;UAAA,SACTH,sBAAsB,CAACiB;QAAK,GAC/B5C,aAAa,EACbsG,qBAAqB;UAGxB9G,OAAO,EAAEuB,KAAK,CAAC+G,QAAQ;UACvBC,OAAO,EAAEhH,KAAK,CAACgH,OAAO;UACtBC,MAAM,EAAEjH,KAAK,CAACiH;QAAM,EAGzB;MAAA;IAIT,CAAC,CAAC;IAEF,OAAO;MACLC,KAAK,EAAEpG,QAAQ;MACf,GAAGvE,WAAW,CAAC;QACb2G,MAAM;QACNE;MACF,CAAC,EAAErC,WAAW;IAChB,CAAC;EACH;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"VVideo.js","names":["makeVVideoControlsProps","VVideoControls","VFadeTransition","VSpacer","VImg","VOverlay","VProgressCircular","VIconBtn","useDisplay","makeComponentProps","makeDensityProps","useDensity","makeDimensionProps","useDimension","useElevation","forwardRefs","useProxiedModel","useRounded","makeThemeProps","provideTheme","MaybeTransition","nextTick","onBeforeUnmount","onMounted","ref","shallowRef","toRef","watch","createRange","genericComponent","omit","pick","propsFactory","useRender","allowedVariants","makeVVideoProps","autoplay","Boolean","muted","eager","src","String","type","image","hideOverlay","noFullscreen","startAt","Number","variant","default","validator","v","includes","controlsTransition","Object","component","controlsVariant","controlsProps","rounded","Array","VVideo","name","inheritAttrs","props","emits","loaded","element","val","setup","_ref","attrs","emit","slots","themeClasses","densityClasses","dimensionStyles","elevationClasses","ssr","roundedForContainer","isArray","roundedForControls","at","roundedClasses","roundedContainerClasses","roundedControlsClasses","containerRef","videoRef","controlsRef","playing","progress","volume","fullscreen","waiting","triggered","startAfterLoad","state","duration","fullscreenEnabled","controlsList","onTimeupdate","currentTime","value","onTriggered","addEventListener","onVideoLoaded","startTime","setTimeout","onClick","onKeydown","e","ctrlKey","key","startsWith","preventDefault","target","tagName","step","shiftKey","Math","min","max","map","skipTo","toggleMuted","toggleFullscreen","play","pause","once","immediate","removeEventListener","focusSlider","container","closest","innerSlider","querySelector","focus","fullscreenExitShortcut","document","body","fullscreenElement","exitFullscreen","onFullscreenExit","requestFullscreen","onVideoClick","onDoubleClick","lastTap","onTouchend","now","performance","showControls","posterTransition","overlayProps","contained","persistent","contentClass","filterProps","hideVolume","hideFullscreen","density","controlsEventHandlers","onSkip","onClick:fullscreen","stopPropagation","controlslist","filter","join","loadingIndicator","_createVNode","color","height","overlayPlayIcon","_createElementVNode","_normalizeClass","class","_normalizeStyle","style","_mergeProps","onPlay","onPause","onWaiting","onPlaying","sources","header","controls","prepend","append","video"],"sources":["../../../src/labs/VVideo/VVideo.tsx"],"sourcesContent":["// Styles\nimport './VVideo.sass'\n\n// Components\nimport { makeVVideoControlsProps, VVideoControls } from './VVideoControls'\nimport { VFadeTransition } from '@/components/transitions'\nimport { VSpacer } from '@/components/VGrid/VSpacer'\nimport { VImg } from '@/components/VImg/VImg'\nimport { VOverlay } from '@/components/VOverlay/VOverlay'\nimport { VProgressCircular } from '@/components/VProgressCircular/VProgressCircular'\nimport { VIconBtn } from '@/labs/VIconBtn/VIconBtn'\n\n// Composables\nimport { useDisplay } from '@/composables'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useElevation } from '@/composables/elevation'\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useRounded } from '@/composables/rounded'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport { nextTick, onBeforeUnmount, onMounted, ref, shallowRef, toRef, watch } from 'vue'\nimport { createRange, genericComponent, omit, pick, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { Component, PropType, TransitionProps } from 'vue'\nimport type { VVideoControlsActionsSlot, VVideoControlsVariant } from './VVideoControls'\nimport type { LoaderSlotProps } from '@/composables/loader'\n\nexport type VVideoSlots = {\n  header: never\n  controls: VVideoControlsActionsSlot\n  prepend: VVideoControlsActionsSlot\n  append: VVideoControlsActionsSlot\n  loader: LoaderSlotProps\n  sources: never\n}\n\nconst allowedVariants = ['background', 'player'] as const\ntype Variant = typeof allowedVariants[number]\n\nexport const makeVVideoProps = propsFactory({\n  autoplay: Boolean,\n  muted: Boolean,\n  eager: Boolean,\n  src: String,\n  type: String, // e.g. video/mp4\n  image: String,\n  hideOverlay: Boolean,\n  noFullscreen: Boolean,\n  startAt: [Number, String],\n  variant: {\n    type: String as PropType<Variant>,\n    default: 'player',\n    validator: (v: any) => allowedVariants.includes(v),\n  },\n  controlsTransition: {\n    type: [Boolean, String, Object] as PropType<null | string | boolean | TransitionProps & { component?: any }>,\n    component: VFadeTransition as Component,\n  },\n  controlsVariant: {\n    type: String as PropType<VVideoControlsVariant>,\n    default: 'default',\n  },\n  controlsProps: {\n    type: Object as PropType<VVideoControls['$props']>,\n  },\n  rounded: [Boolean, Number, String, Array] as PropType<boolean | number | string | (boolean | number | string)[]>,\n\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeDimensionProps(),\n  ...makeThemeProps(),\n  ...omit(makeVVideoControlsProps(), [\n    'fullscreen',\n    'variant',\n  ]),\n}, 'VVideo')\n\nexport const VVideo = genericComponent<VVideoSlots>()({\n  name: 'VVideo',\n\n  inheritAttrs: false,\n\n  props: makeVVideoProps(),\n\n  emits: {\n    loaded: (element: HTMLVideoElement) => true,\n    'update:playing': (val: boolean) => true,\n    'update:progress': (val: number) => true,\n    'update:volume': (val: number) => true,\n  },\n\n  setup (props, { attrs, emit, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { ssr } = useDisplay()\n\n    const roundedForContainer = toRef(() => Array.isArray(props.rounded) ? props.rounded[0] : props.rounded)\n    const roundedForControls = toRef(() => Array.isArray(props.rounded) ? props.rounded.at(-1) : props.rounded ?? false)\n    const { roundedClasses: roundedContainerClasses } = useRounded(roundedForContainer)\n    const { roundedClasses: roundedControlsClasses } = useRounded(roundedForControls)\n\n    const containerRef = ref<HTMLDivElement>()\n    const videoRef = ref<HTMLVideoElement>()\n    const controlsRef = ref<VVideoControls>()\n\n    const playing = useProxiedModel(props, 'playing')\n    const progress = useProxiedModel(props, 'progress')\n    const volume = useProxiedModel(props, 'volume', 0, (v?: number | string) => Number(v ?? 0))\n\n    const fullscreen = shallowRef(false)\n    const waiting = shallowRef(false)\n    const triggered = shallowRef(false)\n    const startAfterLoad = shallowRef(false)\n    const state = shallowRef<'idle' | 'loading' | 'loaded' | 'error'>(props.autoplay ? 'loading' : 'idle')\n    const duration = shallowRef(0)\n\n    const fullscreenEnabled = toRef(() => !props.noFullscreen && !String(attrs.controlsList ?? '').includes('nofullscreen'))\n\n    function onTimeupdate () {\n      const { currentTime, duration } = videoRef.value!\n      progress.value = duration === 0 ? 0 : 100 * currentTime / duration\n    }\n\n    async function onTriggered () {\n      await nextTick()\n      if (!videoRef.value) return\n      videoRef.value.addEventListener('timeupdate', onTimeupdate)\n      videoRef.value.volume = volume.value / 100\n      if (state.value !== 'loaded') {\n        state.value = 'loading'\n      }\n    }\n\n    function onVideoLoaded () {\n      state.value = 'loaded'\n      duration.value = videoRef.value!.duration\n\n      const startTime = Number(props.startAt ?? 0)\n      if (startTime && startTime <= duration.value) {\n        videoRef.value!.currentTime = startTime\n        progress.value = duration.value === 0 ? 0 : 100 * startTime / duration.value\n      }\n\n      if (startAfterLoad.value) {\n        setTimeout(() => playing.value = true, 100)\n      }\n\n      emit('loaded', videoRef.value!)\n    }\n\n    function onClick () {\n      if (state.value !== 'loaded') {\n        triggered.value = true\n        startAfterLoad.value = !startAfterLoad.value\n      }\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      if (!videoRef.value || e.ctrlKey) return\n      if (e.key.startsWith('Arrow')) {\n        e.preventDefault()\n      }\n      switch (true) {\n        case e.key === ' ': {\n          if (!['A', 'BUTTON'].includes((e.target as Element)?.tagName)) {\n            e.preventDefault()\n            playing.value = !playing.value\n          }\n          break\n        }\n        case e.key === 'ArrowRight': {\n          const step = 10 * (e.shiftKey ? 6 : 1)\n          videoRef.value.currentTime = Math.min(videoRef.value.currentTime + step, duration.value)\n          // TODO: show skip indicator\n          break\n        }\n        case e.key === 'ArrowLeft': {\n          const step = 10 * (e.shiftKey ? 6 : 1)\n          videoRef.value.currentTime = Math.max(videoRef.value.currentTime - step, 0)\n          // TODO: show skip indicator\n          break\n        }\n        case createRange(10).map(String).includes(e.key): {\n          skipTo(Number(e.key) * 10)\n          break\n        }\n        case e.key === 'ArrowUp': {\n          volume.value = Math.min(volume.value + 10, 100)\n          // TODO: show volume change indicator\n          break\n        }\n        case e.key === 'ArrowDown': {\n          volume.value = Math.max(volume.value - 10, 0)\n          // TODO: show volume change indicator\n          break\n        }\n        case e.key === 'm': {\n          controlsRef.value?.toggleMuted()\n          break\n        }\n        case e.key === 'f': {\n          toggleFullscreen()\n          break\n        }\n      }\n    }\n\n    function skipTo (v: number) {\n      if (!videoRef.value) return\n      progress.value = v\n      videoRef.value.currentTime = duration.value * v / 100\n    }\n\n    watch(() => props.src, v => {\n      progress.value = 0\n    })\n\n    watch(playing, v => {\n      if (!videoRef.value) return\n      if (v) {\n        videoRef.value.play()\n      } else {\n        videoRef.value.pause()\n      }\n    })\n\n    watch(volume, v => {\n      if (!videoRef.value) return\n      videoRef.value.volume = v / 100\n    })\n\n    watch(triggered, () => onTriggered(), { once: true })\n\n    watch(() => props.eager, v => v && (triggered.value = true), { immediate: true })\n\n    onMounted(() => {\n      if (props.autoplay && !ssr) {\n        triggered.value = true\n        startAfterLoad.value = true\n      }\n    })\n\n    onBeforeUnmount(() => {\n      videoRef.value?.removeEventListener('timeupdate', onTimeupdate)\n    })\n\n    function focusSlider () {\n      const container = videoRef.value?.closest('.v-video') as HTMLElement\n      const innerSlider = container?.querySelector('[role=\"slider\"]') as HTMLElement\n      innerSlider?.focus()\n    }\n\n    function fullscreenExitShortcut (e: KeyboardEvent) {\n      if (['ESC', 'f'].includes(e.key)) {\n        toggleFullscreen()\n        document.body.removeEventListener('keydown', fullscreenExitShortcut)\n      }\n    }\n\n    async function toggleFullscreen () {\n      if (!fullscreenEnabled.value || !document.fullscreenEnabled) {\n        return\n      }\n      if (document.fullscreenElement) {\n        document.exitFullscreen()\n        onFullscreenExit()\n      } else {\n        await containerRef.value?.requestFullscreen()\n        document.body.addEventListener('keydown', fullscreenExitShortcut)\n        document.addEventListener('fullscreenchange', onFullscreenExit)\n        fullscreen.value = true\n      }\n    }\n\n    function onFullscreenExit () {\n      // event fires with a delay after requestFullscreen(), ignore first run\n      if (document.fullscreenElement) return\n\n      focusSlider()\n      fullscreen.value = false\n      document.body.removeEventListener('keydown', fullscreenExitShortcut)\n      document.removeEventListener('fullscreenchange', onFullscreenExit)\n    }\n\n    function onVideoClick (e: Event) {\n      e.preventDefault()\n      if (state.value === 'loaded') {\n        playing.value = !playing.value\n        focusSlider()\n      }\n    }\n\n    function onDoubleClick (e: Event) {\n      e.preventDefault()\n      toggleFullscreen()\n    }\n\n    let lastTap = 0\n    function onTouchend (e: Event) {\n      const now = performance.now()\n      if ((now - lastTap) < 500) {\n        e.preventDefault()\n        toggleFullscreen()\n      } else {\n        lastTap = now\n      }\n    }\n\n    useRender(() => {\n      const showControls = state.value === 'loaded' &&\n        props.variant === 'player' &&\n        props.controlsVariant !== 'hidden'\n\n      const posterTransition = props.variant === 'background'\n        ? 'poster-fade-out'\n        : 'fade-transition'\n\n      const overlayProps = {\n        contained: true,\n        persistent: true,\n        contentClass: 'v-video__overlay-fill',\n      }\n\n      const controlsProps = {\n        ...VVideoControls.filterProps(omit(props, ['variant', 'rounded', 'hideVolume'])),\n        rounded: Array.isArray(props.rounded) ? props.rounded.at(-1) : props.rounded,\n        fullscreen: fullscreen.value,\n        hideVolume: props.hideVolume || props.muted,\n        hideFullscreen: props.hideFullscreen || !fullscreenEnabled.value,\n        density: props.density,\n        variant: props.controlsVariant,\n        playing: playing.value,\n        progress: progress.value,\n        duration: duration.value,\n        volume: volume.value,\n        ...props.controlsProps,\n      }\n\n      const controlsEventHandlers = {\n        onSkip: (v: number) => skipTo(v),\n        'onClick:fullscreen': () => toggleFullscreen(),\n        'onUpdate:playing': (v: boolean) => playing.value = v,\n        'onUpdate:progress': (v: number) => skipTo(v),\n        'onUpdate:volume': (v: number) => volume.value = v,\n        onClick: (e: Event) => e.stopPropagation(),\n      }\n\n      const controlslist = [\n        attrs.controlslist,\n        props.noFullscreen ? 'nofullscreen' : '',\n      ].filter(Boolean).join(' ')\n\n      const loadingIndicator = (\n        <VProgressCircular\n          indeterminate\n          color={ props.color }\n          width=\"3\"\n          size={ Math.min(100, Number(props.height) / 2 || 50) }\n        />\n      )\n\n      const overlayPlayIcon = (\n        <VIconBtn\n          icon=\"$play\"\n          size=\"80\"\n          color=\"#fff\"\n          variant=\"outlined\"\n          iconSize=\"50\"\n          class=\"v-video__center-icon\"\n        />\n      )\n\n      return (\n        <div\n          ref={ containerRef }\n          class={[\n            'v-video',\n            `v-video--variant-${props.variant}`,\n            `v-video--${state.value}`,\n            { 'v-video--playing': playing.value },\n            themeClasses.value,\n            densityClasses.value,\n            roundedContainerClasses.value,\n            props.class,\n          ]}\n          style={[\n            props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'min-width', 'max-width']),\n            props.style,\n          ]}\n          onKeydown={ onKeydown }\n          onClick={ onClick }\n        >\n          <div\n            class={[\n              'v-video__content',\n              elevationClasses.value,\n            ]}\n            style={[\n              props.variant === 'background' ? [] : dimensionStyles.value,\n            ]}\n          >\n            { (props.eager || triggered.value) && (\n              <video\n                key=\"video-element\"\n                class={[\n                  'v-video__video',\n                  roundedContainerClasses.value,\n                ]}\n                { ...omit(attrs, ['controlslist', 'class', 'style']) }\n                controlslist={ controlslist }\n                autoplay={ props.autoplay }\n                muted={ props.muted }\n                playsinline\n                ref={ videoRef }\n                onLoadeddata={ onVideoLoaded }\n                onPlay={ () => playing.value = true }\n                onPause={ () => playing.value = false }\n                onWaiting={ () => waiting.value = true }\n                onPlaying={ () => waiting.value = false }\n                onClick={ onVideoClick }\n                onDblclick={ onDoubleClick }\n                onTouchend={ onTouchend }\n              >\n                { slots.sources?.() ?? <source src={ props.src } type={ props.type } /> }\n              </video>\n            )}\n            { props.variant === 'player' && !props.hideOverlay && (\n              <VOverlay\n                key=\"pause-overlay\"\n                modelValue={ state.value === 'loaded' }\n                opacity=\"0\"\n                { ...overlayProps }\n              >\n                <VSpacer />\n                <MaybeTransition name=\"fade-transition\">\n                  { !playing.value && overlayPlayIcon }\n                </MaybeTransition>\n                <VSpacer />\n              </VOverlay>\n            )}\n            { props.variant === 'player' && !!slots.header\n              ? (\n                <div key=\"header\" class=\"v-video__header\">\n                  { slots.header() }\n                </div>\n              )\n              : '' }\n            <VOverlay\n              key=\"poster-overlay\"\n              modelValue={ state.value !== 'loaded' }\n              transition={ posterTransition }\n              { ...overlayProps }\n            >\n              <VImg cover src={ props.image }>\n                <div\n                  class={[\n                    'v-video__overlay-fill',\n                    ...roundedContainerClasses.value,\n                  ]}\n                >\n                  { props.variant === 'player' && overlayPlayIcon }\n                </div>\n              </VImg>\n            </VOverlay>\n            { props.variant === 'player' && (\n              <VOverlay\n                key=\"loading-overlay\"\n                modelValue={ state.value === 'loading' || waiting.value }\n                opacity=\".1\"\n                { ...overlayProps }\n              >\n                { loadingIndicator }\n              </VOverlay>\n            )}\n          </div>\n          <MaybeTransition key=\"actions\" transition={ props.controlsTransition }>\n            { showControls && (\n              <VVideoControls\n                ref={ controlsRef }\n                class={ roundedControlsClasses.value }\n                { ...controlsProps }\n                { ...controlsEventHandlers }\n              >\n                {{\n                  default: slots.controls,\n                  prepend: slots.prepend,\n                  append: slots.append,\n                }}\n              </VVideoControls>\n            )}\n          </MaybeTransition>\n        </div>\n      )\n    })\n\n    return {\n      video: videoRef,\n      ...forwardRefs({\n        skipTo,\n        toggleFullscreen,\n      }, controlsRef),\n    }\n  },\n})\n\nexport type VVideo = InstanceType<typeof VVideo>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VVideo/VVideo.sass

@@ -178,6 +178,8 @@
       &, &--pills > .v-video-control__pill
         transition: .6s ease-in-out
         transition-property: opacity, background-color
+
+      &--pills > .v-video-control__pill
         @include tools.elevation($video-elevation)
 
       &:hover

package/lib/labs/VVideo/VVideoControls.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, createVNode as _createVNode, withDirectives as _withDirectives, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, normalizeStyle as _normalizeStyle } from "vue";
+import { Fragment as _Fragment, createVNode as _createVNode, withDirectives as _withDirectives, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps } from "vue";
 /* eslint-disable complexity */
 // Components
 import { VVideoVolume } from "./VVideoVolume.js";
@@ -13,7 +13,7 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.js
 import { useProxiedModel } from "../../composables/proxiedModel.js";
 import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Directives
 import vTooltip from "../../directives/tooltip/index.js"; // Utilities
-import { computed, shallowRef } from 'vue';
+import { computed, shallowRef, toRef } from 'vue';
 import { formatTime, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
 const allowedVariants = ['hidden', 'default', 'tube', 'mini'];
 export const makeVVideoControlsProps = propsFactory({
@@ -70,7 +70,8 @@ export const VVideoControls = genericComponent()({
       t
     } = useLocale();
     const {
-      themeClasses
+      themeClasses,
+      current: currentTheme
     } = provideTheme(props);
     const {
       densityClasses
@@ -85,6 +86,13 @@ export const VVideoControls = genericComponent()({
       const fallbackBackground = props.detached ? 'surface' : undefined;
       return props.backgroundColor ?? fallbackBackground;
     });
+    const trackColor = toRef(() => {
+      if (props.trackColor) {
+        return props.trackColor;
+      }
+      const fallback = currentTheme.value.dark || !props.pills ? undefined : 'surface';
+      return (props.pills ? props.backgroundColor : props.color) ?? fallback;
+    });
     const playing = useProxiedModel(props, 'playing');
     const progress = useProxiedModel(props, 'progress');
     const volume = useProxiedModel(props, 'volume', 0, v => Number(v ?? 0));
@@ -145,7 +153,8 @@ export const VVideoControls = genericComponent()({
       };
       const regularBtnSize = innerDefaults.VIconBtn.size;
       const playBtnSize = props.pills ? regularBtnSize + 8 : regularBtnSize;
-      const pillClasses = ['v-video-control__pill', props.pills ? elevationClasses.value : []];
+      const pillClasses = ['v-video-control__pill', props.pills ? elevationClasses.value : [], props.pills ? backgroundColorClasses.value : []];
+      const pillStyles = props.pills ? backgroundColorStyles.value : [];
       const slotProps = {
         play,
         pause,
@@ -168,30 +177,34 @@ export const VVideoControls = genericComponent()({
           'v-video-controls--floating': props.floating
         }, {
           'v-video-controls--split-time': props.splitTime
-        }, backgroundColorClasses.value, props.detached && !props.pills ? elevationClasses.value : [], densityClasses.value, themeClasses.value]),
-        "style": _normalizeStyle([backgroundColorStyles.value, {
+        }, !props.pills ? backgroundColorClasses.value : [], props.detached && !props.pills ? elevationClasses.value : [], densityClasses.value, themeClasses.value]),
+        "style": _normalizeStyle([!props.pills ? backgroundColorStyles.value : [], {
           '--v-video-controls-pill-height': `${regularBtnSize}px`
         }])
       }, [_createVNode(VDefaultsProvider, {
         "defaults": innerDefaults
       }, {
         default: () => [slots.default?.(slotProps) ?? _createElementVNode(_Fragment, null, [props.variant !== 'mini' && _createElementVNode(_Fragment, null, [!props.hidePlay && _createElementVNode("div", {
-          "class": _normalizeClass([pillClasses, 'v-video__action-play'])
+          "class": _normalizeClass([pillClasses, 'v-video__action-play']),
+          "style": _normalizeStyle(pillStyles)
         }, [_withDirectives(_createVNode(VIconBtn, {
           "icon": playing.value ? '$pause' : '$play',
           "size": playBtnSize,
           "aria-label": labels.value.playAction,
           "onClick": () => playing.value = !playing.value
         }, null), [[vTooltip, labels.value.playAction, 'top']])]), slots.prepend && _createElementVNode("div", {
-          "class": _normalizeClass(pillClasses)
+          "class": _normalizeClass(pillClasses),
+          "style": _normalizeStyle(pillStyles)
         }, [slots.prepend(slotProps)]), props.splitTime ? _createElementVNode("span", {
-          "class": _normalizeClass([pillClasses, 'v-video__time'])
+          "class": _normalizeClass([pillClasses, 'v-video__time']),
+          "style": _normalizeStyle(pillStyles)
         }, [currentTime.value.elapsed]) : props.variant !== 'default' ? _createElementVNode("span", {
-          "class": _normalizeClass([pillClasses, 'v-video__time'])
+          "class": _normalizeClass([pillClasses, 'v-video__time']),
+          "style": _normalizeStyle(pillStyles)
         }, [currentTime.value.elapsed, _createTextVNode(" / "), currentTime.value.total]) : '', _createVNode(VSlider, {
           "modelValue": props.progress,
           "noKeyboard": true,
-          "color": props.trackColor ?? props.color,
+          "color": trackColor.value ?? 'surface-variant',
           "trackColor": props.variant === 'tube' ? 'white' : undefined,
           "class": "v-video__track",
           "thumbLabel": "always",
@@ -200,18 +213,22 @@ export const VVideoControls = genericComponent()({
         }, {
           'thumb-label': () => currentTime.value.elapsed
         }), props.variant === 'tube' && _createVNode(VSpacer, null, null), props.splitTime ? _createElementVNode("span", {
-          "class": _normalizeClass([pillClasses, 'v-video__time'])
+          "class": _normalizeClass([pillClasses, 'v-video__time']),
+          "style": _normalizeStyle(pillStyles)
         }, [currentTime.value.remaining]) : '']), props.variant === 'mini' && _createElementVNode(_Fragment, null, [_createVNode(VSpacer, null, null), slots.prepend && _createElementVNode("div", {
-          "class": _normalizeClass(pillClasses)
+          "class": _normalizeClass(pillClasses),
+          "style": _normalizeStyle(pillStyles)
         }, [slots.prepend(slotProps)]), !props.hidePlay && _createElementVNode("div", {
-          "class": _normalizeClass([pillClasses, 'v-video__action-play'])
+          "class": _normalizeClass([pillClasses, 'v-video__action-play']),
+          "style": _normalizeStyle(pillStyles)
         }, [_withDirectives(_createVNode(VIconBtn, {
           "icon": playing.value ? '$pause' : '$play',
           "size": playBtnSize,
           "aria-label": labels.value.playAction,
           "onClick": () => playing.value = !playing.value
         }, null), [[vTooltip, labels.value.playAction, 'top']])])]), (!props.hideVolume || !props.hideFullscreen || slots.append) && _createElementVNode("div", {
-          "class": _normalizeClass(pillClasses)
+          "class": _normalizeClass(pillClasses),
+          "style": _normalizeStyle(pillStyles)
         }, [!props.hideVolume && _createVNode(VVideoVolume, _mergeProps({
           "key": "volume-control",
           "sliderProps": {