feat(VVideo): add aspect-ratio prop

Author: J-Sek

packages/api-generator/src/locale/en/VVideo.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "aspectRatio": "Sets the aspect ratio for the playback, calculated as width/height.",
     "src": "Media file URL",
     "type": "Media file type (optional)",
     "image": "Apply a specific image as cover before the video is loaded.",

packages/docs/src/examples/v-video/misc-in-card.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="d-flex justify-center">
-    <v-card elevation="4" rounded="xl">
+    <v-card elevation="4" rounded="xl" width="400">
       <v-card-item class="py-4">
         <v-skeleton-loader type="list-item-avatar-two-line"></v-skeleton-loader>
       </v-card-item>
       <v-card-text class="pb-4 px-6">
         <v-video
           :volume="50"
+          aspect-ratio="4 / 3"
           background-color="transparent"
           color="orange"
           controls-transition="slide-y-transition"
           elevation="0"
           image="https://jsek.work/vt-video-poster.jpg"
           rounded="xl"
           src="https://jsek.work/vt-video.mp4"
+          width="100%"
           detached
           eager
           floating

packages/docs/src/examples/v-video/usage.vue

@@ -13,6 +13,7 @@
       <v-select v-model="theme" :items="['light', 'dark']" label="Theme" clearable></v-select>
       <v-select v-model="color" :items="colorOptions" label="Color" clearable></v-select>
       <v-select v-model="elevation" :items="[4, 8, 12]" label="Elevation" clearable></v-select>
+      <v-select v-model="aspectRatio" :items="['16/9', '3/2', '1']" label="Aspect ratio" clearable></v-select>
       <v-checkbox v-if="!isHidden" v-model="hidePlay" label="Hide play"></v-checkbox>
       <v-checkbox v-if="!isHidden" v-model="hideVolume" label="Hide volume"></v-checkbox>
       <v-checkbox v-if="!isHidden" v-model="noFullscreen" label="No fullscreen"></v-checkbox>
@@ -31,6 +32,7 @@
   const theme = shallowRef(null)
   const color = shallowRef(null)
   const elevation = shallowRef(null)
+  const aspectRatio = shallowRef('16/9')
 
   const isHidden = toRef(() => model.value === 'hidden')
 
@@ -46,6 +48,7 @@
       theme: theme.value || undefined,
       color: color.value || undefined,
       elevation: elevation.value || undefined,
+      'aspect-ratio': aspectRatio.value || undefined,
       'hide-play': (!isHidden.value && hidePlay.value) || undefined,
       'hide-volume': (!isHidden.value && hideVolume.value) || undefined,
       noFullscreen: (!isHidden.value && noFullscreen.value) || undefined,

packages/vuetify/src/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}
 
@@ -138,6 +139,7 @@
       > .v-video__content
         width: 100%
         height: $video-player-height
+        aspect-ratio: var(--v-video-aspect-ratio)
 
     &--variant-background
       outline: none

packages/vuetify/src/labs/VVideo/VVideo.tsx

@@ -44,6 +44,7 @@ const allowedVariants = ['background', 'player'] as const
 type Variant = typeof allowedVariants[number]
 
 export const makeVVideoProps = propsFactory({
+  aspectRatio: [String, Number],
   autoplay: Boolean,
   muted: Boolean,
   eager: Boolean,
@@ -392,6 +393,7 @@ export const VVideo = genericComponent<VVideoSlots>()({
             props.class,
           ]}
           style={[
+            { '--v-video-aspect-ratio': props.aspectRatio },
             props.variant === 'background' ? [] : pick(dimensionStyles.value, ['width', 'min-width', 'max-width']),
             props.style,
           ]}

packages/vuetify/src/labs/VVideo/_variables.scss

@@ -1,8 +1,10 @@
+@use 'sass:math';
 @use '../../styles/settings';
 
 // Defaults
 $video-player-width: 480px !default;
 $video-player-height: 270px !default;
+$video-aspect-ratio: math.div(16, 9) !default;
 
 $video-elevation: 4 !default;
 $video-padding: 0px !default;