vuetify 3.9.3 → 3.9.4

package/lib/labs/VColorInput/VColorInput.js

@@ -3,21 +3,32 @@ import { Fragment as _Fragment, createVNode as _createVNode, createElementVNode
 import "./VColorInput.css";
 
 // Components
+import { VAvatar } from "../../components/VAvatar/index.js";
 import { makeVColorPickerProps, VColorPicker } from "../../components/VColorPicker/VColorPicker.js";
 import { makeVConfirmEditProps, VConfirmEdit } from "../../components/VConfirmEdit/VConfirmEdit.js";
-import { VIcon } from "../../components/VIcon/VIcon.js";
 import { VMenu } from "../../components/VMenu/VMenu.js";
 import { makeVTextFieldProps, VTextField } from "../../components/VTextField/VTextField.js"; // Composables
 import { makeFocusProps } from "../../composables/focus.js";
 import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
 import { computed, shallowRef } from 'vue';
 import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
+const availablePipLocations = ['prepend', 'prepend-inner', 'append', 'append-inner'];
 export const makeVColorInputProps = propsFactory({
-  pip: Boolean,
+  hidePip: Boolean,
+  colorPip: Boolean,
   pipIcon: {
     type: String,
     default: '$color'
   },
+  pipLocation: {
+    type: String,
+    default: 'prepend',
+    validator: v => availablePipLocations.includes(v)
+  },
+  pipVariant: {
+    type: String,
+    default: 'text'
+  },
   ...makeFocusProps(),
   ...makeVConfirmEditProps(),
   ...makeVTextFieldProps(),
@@ -61,8 +72,15 @@ export const VColorInput = genericComponent()({
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props);
       const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']));
-      const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']));
-      const hasPrepend = !!(slots.prepend || props.pipIcon);
+      const textFieldProps = VTextField.filterProps(props);
+      const slotWithPip = props.hidePip ? undefined : {
+        [props.pipLocation]: arg => _createElementVNode(_Fragment, null, [_createVNode(VAvatar, {
+          "class": "v-color-input__pip",
+          "color": props.colorPip ? model.value : undefined,
+          "variant": props.pipVariant,
+          "icon": props.pipIcon
+        }, null), slots[props.pipLocation]?.(arg)])
+      };
       return _createVNode(VTextField, _mergeProps(textFieldProps, {
         "class": ['v-color-input', props.class],
         "style": props.style,
@@ -78,10 +96,7 @@ export const VColorInput = genericComponent()({
         }
       }), {
         ...slots,
-        prepend: props.pipIcon ? arg => _createElementVNode(_Fragment, null, [hasPrepend && _createVNode(VIcon, {
-          "color": props.pip ? model.value : undefined,
-          "icon": props.pipIcon
-        }, null), slots.prepend?.(arg)]) : undefined,
+        ...slotWithPip,
         default: () => _createElementVNode(_Fragment, null, [_createVNode(VMenu, {
           "modelValue": menu.value,
           "onUpdate:modelValue": $event => menu.value = $event,

package/lib/labs/VColorInput/VColorInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"VColorInput.js","names":["makeVColorPickerProps","VColorPicker","makeVConfirmEditProps","VConfirmEdit","VIcon","VMenu","makeVTextFieldProps","VTextField","makeFocusProps","useProxiedModel","computed","shallowRef","genericComponent","omit","propsFactory","useRender","makeVColorInputProps","pip","Boolean","pipIcon","type","String","default","VColorInput","name","props","emits","val","setup","_ref","slots","model","menu","isFocused","focused","isInteractive","disabled","readonly","display","value","onKeydown","e","key","target","onClick","preventDefault","stopPropagation","onSave","onCancel","confirmEditProps","filterProps","colorPickerProps","textFieldProps","hasPrepend","prepend","_createVNode","_mergeProps","class","style","undefined","event","arg","_createElementVNode","_Fragment","$event","_ref2","actions","proxyModel","save","cancel","isPristine","onUpdateModel","hideActions"],"sources":["../../../src/labs/VColorInput/VColorInput.tsx"],"sourcesContent":["// Styles\nimport './VColorInput.sass'\n\n// Components\nimport { makeVColorPickerProps, VColorPicker } from '@/components/VColorPicker/VColorPicker'\nimport { makeVConfirmEditProps, VConfirmEdit } from '@/components/VConfirmEdit/VConfirmEdit'\nimport { VIcon } from '@/components/VIcon/VIcon'\nimport { VMenu } from '@/components/VMenu/VMenu'\nimport { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField'\n\n// Composables\nimport { makeFocusProps } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, shallowRef } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { VTextFieldSlots } from '@/components/VTextField/VTextField'\n\nexport type VColorInputActionsSlot = {\n  save: () => void\n  cancel: () => void\n  isPristine: boolean\n}\n\nexport type VColorInputSlots = Omit<VTextFieldSlots, 'default'> & {\n  actions: VColorInputActionsSlot\n  default: never\n}\n\nexport const makeVColorInputProps = propsFactory({\n  pip: Boolean,\n  pipIcon: {\n    type: String,\n    default: '$color',\n  },\n\n  ...makeFocusProps(),\n  ...makeVConfirmEditProps(),\n  ...makeVTextFieldProps(),\n  ...omit(makeVColorPickerProps(), ['width']),\n}, 'VColorInput')\n\nexport const VColorInput = genericComponent<VColorInputSlots>()({\n  name: 'VColorInput',\n\n  props: makeVColorInputProps(),\n\n  emits: {\n    'update:modelValue': (val: string) => true,\n  },\n\n  setup (props, { slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const menu = shallowRef(false)\n    const isFocused = shallowRef(props.focused)\n\n    const isInteractive = computed(() => !props.disabled && !props.readonly)\n\n    const display = computed(() => model.value || null)\n\n    function onKeydown (e: KeyboardEvent) {\n      if (e.key !== 'Enter') return\n\n      if (!menu.value || !isFocused.value) {\n        menu.value = true\n\n        return\n      }\n\n      const target = e.target as HTMLInputElement\n\n      model.value = target.value\n    }\n\n    function onClick (e: MouseEvent) {\n      e.preventDefault()\n      e.stopPropagation()\n\n      menu.value = true\n    }\n\n    function onSave () {\n      menu.value = false\n    }\n\n    function onCancel () {\n      menu.value = false\n    }\n\n    useRender(() => {\n      const confirmEditProps = VConfirmEdit.filterProps(props)\n      const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']))\n      const textFieldProps = VTextField.filterProps(omit(props, ['prependInnerIcon']))\n\n      const hasPrepend = !!(slots.prepend || props.pipIcon)\n\n      return (\n        <VTextField\n          { ...textFieldProps }\n          class={[\n            'v-color-input',\n            props.class,\n          ]}\n          style={ props.style }\n          modelValue={ display.value }\n          onKeydown={ isInteractive.value ? onKeydown : undefined }\n          focused={ menu.value || isFocused.value }\n          onClick:control={ isInteractive.value ? onClick : undefined }\n          onClick:prependInner={ isInteractive.value ? onClick : undefined }\n          onUpdate:focused={ event => isFocused.value = event }\n          onClick:appendInner={ isInteractive.value ? onClick : undefined }\n          onUpdate:modelValue={ val => {\n            model.value = val\n          }}\n        >\n          {{\n            ...slots,\n            prepend: props.pipIcon ? arg => (\n              <>\n               { hasPrepend && (\n                  <VIcon\n                    color={ props.pip ? model.value as string : undefined }\n                    icon={ props.pipIcon }\n                  />\n               )}\n\n                { slots.prepend?.(arg) }\n              </>\n            ) : undefined,\n            default: () => (\n              <>\n                <VMenu\n                  v-model={ menu.value }\n                  activator=\"parent\"\n                  minWidth=\"0\"\n                  closeOnContentClick={ false }\n                  openOnClick={ false }\n                >\n                  <VConfirmEdit\n                    { ...confirmEditProps }\n                    v-model={ model.value }\n                    onSave={ onSave }\n                    onCancel={ onCancel }\n                  >\n                    {{\n                      default: ({ actions, model: proxyModel, save, cancel, isPristine }) => {\n                        function onUpdateModel (value: string) {\n                          if (!props.hideActions) {\n                            proxyModel.value = value\n                          } else {\n                            model.value = value\n                          }\n                        }\n\n                        return (\n                          <VColorPicker\n                            { ...colorPickerProps }\n                            modelValue={ props.hideActions ? model.value : proxyModel.value }\n                            onUpdate:modelValue={ value => onUpdateModel(value) }\n                            onMousedown={ (e: MouseEvent) => e.preventDefault() }\n                          >\n                            {{\n                              actions: !props.hideActions ? () => slots.actions?.({ save, cancel, isPristine }) ?? actions() : undefined,\n                            }}\n                          </VColorPicker>\n                        )\n                      },\n                    }}\n                  </VConfirmEdit>\n                </VMenu>\n\n                { slots.default?.() }\n              </>\n            ),\n          }}\n        </VTextField>\n      )\n    })\n  },\n})\n\nexport type VColorInput = InstanceType<typeof VColorInput>\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VColorInput.js","names":["VAvatar","makeVColorPickerProps","VColorPicker","makeVConfirmEditProps","VConfirmEdit","VMenu","makeVTextFieldProps","VTextField","makeFocusProps","useProxiedModel","computed","shallowRef","genericComponent","omit","propsFactory","useRender","availablePipLocations","makeVColorInputProps","hidePip","Boolean","colorPip","pipIcon","type","String","default","pipLocation","validator","v","includes","pipVariant","VColorInput","name","props","emits","val","setup","_ref","slots","model","menu","isFocused","focused","isInteractive","disabled","readonly","display","value","onKeydown","e","key","target","onClick","preventDefault","stopPropagation","onSave","onCancel","confirmEditProps","filterProps","colorPickerProps","textFieldProps","slotWithPip","undefined","arg","_createElementVNode","_Fragment","_createVNode","_mergeProps","class","style","event","$event","_ref2","actions","proxyModel","save","cancel","isPristine","onUpdateModel","hideActions"],"sources":["../../../src/labs/VColorInput/VColorInput.tsx"],"sourcesContent":["// Styles\nimport './VColorInput.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport { makeVColorPickerProps, VColorPicker } from '@/components/VColorPicker/VColorPicker'\nimport { makeVConfirmEditProps, VConfirmEdit } from '@/components/VConfirmEdit/VConfirmEdit'\nimport { VMenu } from '@/components/VMenu/VMenu'\nimport { makeVTextFieldProps, VTextField } from '@/components/VTextField/VTextField'\n\n// Composables\nimport { makeFocusProps } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, shallowRef } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VTextFieldSlots } from '@/components/VTextField/VTextField'\n\nexport type VColorInputActionsSlot = {\n  save: () => void\n  cancel: () => void\n  isPristine: boolean\n}\n\nexport type VColorInputSlots = Omit<VTextFieldSlots, 'default'> & {\n  actions: VColorInputActionsSlot\n  default: never\n}\n\nconst availablePipLocations = ['prepend', 'prepend-inner', 'append', 'append-inner'] as const\nexport type PipLocation = typeof availablePipLocations[number]\n\nexport const makeVColorInputProps = propsFactory({\n  hidePip: Boolean,\n  colorPip: Boolean,\n  pipIcon: {\n    type: String,\n    default: '$color',\n  },\n  pipLocation: {\n    type: String as PropType<PipLocation>,\n    default: 'prepend',\n    validator: (v: any) => availablePipLocations.includes(v),\n  },\n  pipVariant: {\n    type: String as PropType<VAvatar['$props']['variant']>,\n    default: 'text',\n  },\n\n  ...makeFocusProps(),\n  ...makeVConfirmEditProps(),\n  ...makeVTextFieldProps(),\n  ...omit(makeVColorPickerProps(), ['width']),\n}, 'VColorInput')\n\nexport const VColorInput = genericComponent<VColorInputSlots>()({\n  name: 'VColorInput',\n\n  props: makeVColorInputProps(),\n\n  emits: {\n    'update:modelValue': (val: string) => true,\n  },\n\n  setup (props, { slots }) {\n    const model = useProxiedModel(props, 'modelValue')\n    const menu = shallowRef(false)\n    const isFocused = shallowRef(props.focused)\n\n    const isInteractive = computed(() => !props.disabled && !props.readonly)\n\n    const display = computed(() => model.value || null)\n\n    function onKeydown (e: KeyboardEvent) {\n      if (e.key !== 'Enter') return\n\n      if (!menu.value || !isFocused.value) {\n        menu.value = true\n\n        return\n      }\n\n      const target = e.target as HTMLInputElement\n\n      model.value = target.value\n    }\n\n    function onClick (e: MouseEvent) {\n      e.preventDefault()\n      e.stopPropagation()\n\n      menu.value = true\n    }\n\n    function onSave () {\n      menu.value = false\n    }\n\n    function onCancel () {\n      menu.value = false\n    }\n\n    useRender(() => {\n      const confirmEditProps = VConfirmEdit.filterProps(props)\n      const colorPickerProps = VColorPicker.filterProps(omit(props, ['active', 'color']))\n      const textFieldProps = VTextField.filterProps(props)\n\n      const slotWithPip = props.hidePip\n        ? undefined\n        : {\n          [props.pipLocation]: (arg: any) => (\n            <>\n              <VAvatar\n                class=\"v-color-input__pip\"\n                color={ props.colorPip ? model.value as string : undefined }\n                variant={ props.pipVariant }\n                icon={ props.pipIcon }\n              />\n              { slots[props.pipLocation]?.(arg) }\n            </>\n          ),\n        }\n\n      return (\n        <VTextField\n          { ...textFieldProps }\n          class={[\n            'v-color-input',\n            props.class,\n          ]}\n          style={ props.style }\n          modelValue={ display.value }\n          onKeydown={ isInteractive.value ? onKeydown : undefined }\n          focused={ menu.value || isFocused.value }\n          onClick:control={ isInteractive.value ? onClick : undefined }\n          onClick:prependInner={ isInteractive.value ? onClick : undefined }\n          onUpdate:focused={ event => isFocused.value = event }\n          onClick:appendInner={ isInteractive.value ? onClick : undefined }\n          onUpdate:modelValue={ val => {\n            model.value = val\n          }}\n        >\n          {{\n            ...slots,\n            ...slotWithPip,\n            default: () => (\n              <>\n                <VMenu\n                  v-model={ menu.value }\n                  activator=\"parent\"\n                  minWidth=\"0\"\n                  closeOnContentClick={ false }\n                  openOnClick={ false }\n                >\n                  <VConfirmEdit\n                    { ...confirmEditProps }\n                    v-model={ model.value }\n                    onSave={ onSave }\n                    onCancel={ onCancel }\n                  >\n                    {{\n                      default: ({ actions, model: proxyModel, save, cancel, isPristine }) => {\n                        function onUpdateModel (value: string) {\n                          if (!props.hideActions) {\n                            proxyModel.value = value\n                          } else {\n                            model.value = value\n                          }\n                        }\n\n                        return (\n                          <VColorPicker\n                            { ...colorPickerProps }\n                            modelValue={ props.hideActions ? model.value : proxyModel.value }\n                            onUpdate:modelValue={ value => onUpdateModel(value) }\n                            onMousedown={ (e: MouseEvent) => e.preventDefault() }\n                          >\n                            {{\n                              actions: !props.hideActions ? () => slots.actions?.({ save, cancel, isPristine }) ?? actions() : undefined,\n                            }}\n                          </VColorPicker>\n                        )\n                      },\n                    }}\n                  </VConfirmEdit>\n                </VMenu>\n\n                { slots.default?.() }\n              </>\n            ),\n          }}\n        </VTextField>\n      )\n    })\n  },\n})\n\nexport type VColorInput = InstanceType<typeof VColorInput>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VColorInput/VColorInput.sass

@@ -5,3 +5,11 @@
   /* region INPUT */
   .v-color-input
     padding: 0
+
+    @at-root
+      @include tools.density('v-color-input.v-input', $color-input-pip-density) using ($modifier)
+        .v-color-input__pip
+          --v-avatar-height: #{$color-input-pip-avatar-size + $modifier}
+
+    .v-color-input__pip.v-avatar--variant-text
+      --v-avatar-height: min-content

package/lib/labs/VColorInput/_variables.scss

@@ -1,2 +1,4 @@
 // Defaults
 $color-input-pip-default-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
+$color-input-pip-avatar-size: 40px !default;
+$color-input-pip-density: ('default': 0, 'comfortable': -2, 'compact': -3) !default;

package/lib/labs/VVideo/VVideo.css

@@ -3,6 +3,7 @@
   flex-direction: column;
   align-items: center;
   position: relative;
+  --v-video-aspect-ratio: 1.7777777778;
   --v-video-controls-height: 58px;
   --v-video-controls-pill-border-radius: 99px;
 }
@@ -145,17 +146,16 @@
   letter-spacing: 0.02em;
 }
 .v-video--variant-player {
-  width: 480px;
+  width: 100%;
 }
 .v-video--variant-player > .v-video__content {
   width: 100%;
-  height: 270px;
+  aspect-ratio: var(--v-video-aspect-ratio);
 }
 .v-video--variant-background {
   outline: none;
   position: absolute;
   pointer-events: none;
-  width: 100%;
   height: 100%;
 }
 .v-video--variant-background > .v-video__content {
@@ -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.d.ts

@@ -39,6 +39,7 @@ export declare const makeVVideoProps: <Defaults extends {
     width?: unknown;
     class?: unknown;
     style?: unknown;
+    aspectRatio?: unknown;
     autoplay?: unknown;
     muted?: unknown;
     eager?: unknown;
@@ -2110,6 +2111,10 @@ export declare const makeVVideoProps: <Defaults extends {
         type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : import("vue").StyleValue | Defaults["style"]>;
         default: unknown extends Defaults["style"] ? import("vue").StyleValue : NonNullable<import("vue").StyleValue> | Defaults["style"];
     };
+    aspectRatio: unknown extends Defaults["aspectRatio"] ? (StringConstructor | NumberConstructor)[] : {
+        type: PropType<unknown extends Defaults["aspectRatio"] ? string | number : string | number | Defaults["aspectRatio"]>;
+        default: unknown extends Defaults["aspectRatio"] ? string | number : NonNullable<string | number> | Defaults["aspectRatio"];
+    };
     autoplay: unknown extends Defaults["autoplay"] ? BooleanConstructor : {
         type: PropType<unknown extends Defaults["autoplay"] ? boolean : boolean | Defaults["autoplay"]>;
         default: unknown extends Defaults["autoplay"] ? boolean : boolean | Defaults["autoplay"];
@@ -3984,6 +3989,7 @@ export declare const VVideo: {
         type?: string | undefined;
         height?: string | number | undefined;
         width?: string | number | undefined;
+        aspectRatio?: string | number | undefined;
         backgroundColor?: string | undefined;
         color?: string | undefined;
         maxHeight?: string | number | undefined;
@@ -4933,6 +4939,7 @@ export declare const VVideo: {
         type?: string | undefined;
         height?: string | number | undefined;
         width?: string | number | undefined;
+        aspectRatio?: string | number | undefined;
         backgroundColor?: string | undefined;
         color?: string | undefined;
         maxHeight?: string | number | undefined;
@@ -5867,6 +5874,7 @@ export declare const VVideo: {
     type?: string | undefined;
     height?: string | number | undefined;
     width?: string | number | undefined;
+    aspectRatio?: string | number | undefined;
     backgroundColor?: string | undefined;
     color?: string | undefined;
     maxHeight?: string | number | undefined;
@@ -6828,6 +6836,7 @@ export declare const VVideo: {
         type: PropType<import("vue").StyleValue>;
         default: null;
     };
+    aspectRatio: (StringConstructor | NumberConstructor)[];
     autoplay: BooleanConstructor;
     muted: BooleanConstructor;
     eager: BooleanConstructor;
@@ -6899,6 +6908,7 @@ export declare const VVideo: {
         type: PropType<import("vue").StyleValue>;
         default: null;
     };
+    aspectRatio: (StringConstructor | NumberConstructor)[];
     autoplay: BooleanConstructor;
     muted: BooleanConstructor;
     eager: BooleanConstructor;

package/lib/labs/VVideo/VVideo.js

@@ -24,6 +24,7 @@ import { nextTick, onBeforeUnmount, onMounted, ref, shallowRef, toRef, watch } f
 import { createRange, genericComponent, omit, pick, propsFactory, useRender } from "../../util/index.js"; // Types
 const allowedVariants = ['background', 'player'];
 export const makeVVideoProps = propsFactory({
+  aspectRatio: [String, Number],
   autoplay: Boolean,
   muted: Boolean,
   eager: Boolean,
@@ -340,7 +341,9 @@ export const VVideo = genericComponent()({
         "class": _normalizeClass(['v-video', `v-video--variant-${props.variant}`, `v-video--${state.value}`, {
           'v-video--playing': playing.value
         }, themeClasses.value, densityClasses.value, roundedContainerClasses.value, props.class]),
-        "style": _normalizeStyle([props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'min-width', 'max-width']), props.style]),
+        "style": _normalizeStyle([{
+          '--v-video-aspect-ratio': props.aspectRatio
+        }, props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'minWidth', 'maxWidth']), props.style]),
         "onKeydown": onKeydown,
         "onClick": onClick
       }, [_createElementVNode("div", {
@@ -390,9 +393,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":"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","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","aspectRatio","String","Number","autoplay","Boolean","muted","eager","src","type","image","hideOverlay","noFullscreen","startAt","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  aspectRatio: [String, Number],\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            { '--v-video-aspect-ratio': props.aspectRatio },\n            props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'minWidth', 'maxWidth']),\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

@@ -8,6 +8,7 @@
     flex-direction: column
     align-items: center
     position: relative
+    --v-video-aspect-ratio: #{$video-aspect-ratio}
     --v-video-controls-height: #{$video-controls-height}
     --v-video-controls-pill-border-radius: #{$video-controls-pill-border-radius}
 
@@ -137,13 +138,12 @@
 
       > .v-video__content
         width: 100%
-        height: $video-player-height
+        aspect-ratio: var(--v-video-aspect-ratio)
 
     &--variant-background
       outline: none
       position: absolute
       pointer-events: none
-      width: 100%
       height: 100%
 
       > .v-video__content
@@ -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";
@@ -6,14 +6,14 @@ import { VDefaultsProvider } from "../../components/VDefaultsProvider/VDefaultsP
 import { VSpacer } from "../../components/VGrid/VSpacer.js";
 import { VSlider } from "../../components/VSlider/VSlider.js";
 import { VIconBtn } from "../VIconBtn/VIconBtn.js"; // Composables
-import { useLocale } from "../../composables/index.js";
 import { useBackgroundColor } from "../../composables/color.js";
 import { makeDensityProps, useDensity } from "../../composables/density.js";
 import { makeElevationProps, useElevation } from "../../composables/elevation.js";
+import { useLocale } from "../../composables/locale.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": {