Skip to content

Commit 936eba2

Browse files
J-SekJ-Sek
authored
feat(VVideo): add new component (#21460)
resolves #5592
1 parent 0b8f64b commit 936eba2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+2544
-0
lines changed

‎packages/api-generator/src/locale/en/Slider.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"props": {
33
"max": "Sets the maximum allowed value.",
44
"min": "Sets the minimum allowed value.",
5+
"noKeyboard": "**FOR INTERNAL USE ONLY** Ignore keyboard events.",
56
"reverse": "Reverses the slider direction.",
67
"showTicks": "Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks.",
78
"step": "If greater than 0, sets step interval for ticks.",

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"props": {
3+
"src": "Media file URL",
4+
"type": "Media file type (optional)",
5+
"image": "Apply a specific image as cover before the video is loaded.",
6+
"autoplay": "Starts loading the media file without waiting for user to click. Playback begins once enough data is loaded.",
7+
"muted": "Hides volume control and disables the playback sound.",
8+
"eager": "Silently loades the media file without waiting for user to click.",
9+
"hideOverlay": "Hide center play icon.",
10+
"noFullscreen": "Disable fullscreen and hide the default fullscreen button.",
11+
"rounded": "Applies a border radius to the video container and the controls. Accepts array of two values to customize elements separately.",
12+
"startAt": "Moves progress to the specified time (in seconds) once the media file is loaded.",
13+
"controlsProps": "Pass props through to the `v-video-controls` component. Accepts an object with anything from [v-video-controls](/api/v-video-controls/#props) props, camelCase keys are recommended.",
14+
"controlsTransition": "The reveal transition applied to the VVideoControls component once the media file is loaded.",
15+
"controlsVariant": "Variant passed to the VVideoControls component."
16+
},
17+
"events": {
18+
"loaded": "Emitted when the video has loaded and is ready to be played.",
19+
"update:playing": "Emitted when playing state changes.",
20+
"update:progress": "Emitted when the internal playback progress changes.",
21+
"update:volume": "Emitted when the volume changes."
22+
},
23+
"slots": {
24+
"header": "Slot for additional content placed on top of the video.",
25+
"append": "Additional content on the right within the control bar.",
26+
"controls": "Replaces controls bar with custom content.",
27+
"loader": "Slot used to replace loader displayed when the video is being loaded.",
28+
"prepend": "Additional content on the left within the control bar.",
29+
"sources": "Slot for content placed within native `<video>` element."
30+
},
31+
"exposed": {
32+
"skipTo": "Skip to specific moment in the video playback. Accepts percent value (0-100).",
33+
"toggleFullscreen": "Toggle fullscreen mode.",
34+
"toggleMuted": "Mute/unmute audio."
35+
}
36+
}

‎packages/api-generator/src/locale/en/VVideoControls.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"props": {
3+
"color": "General color applied to icons and sliders.",
4+
"backgroundColor": "Container background color.",
5+
"trackColor": "Passed to the main slider `color` prop.",
6+
"playing": "Applies correct icon of the default play button.",
7+
"hidePlay": "Hides default play button.",
8+
"hideVolume": "Hides default volume control.",
9+
"hideFullscreen": "Hides default fullscreen button.",
10+
"fullscreen": "Applies correct icon on the default fullscreen button.",
11+
"floating": "Introduces visual spacing from the video boundaries.",
12+
"splitTime": "Splits time into elapsed and remaining on each side of the main slider.",
13+
"pills": "Makes the container transparent and shows inner actions in separated boxes.",
14+
"detached": "Moves the container below so it won't obstruct the video.",
15+
"progress": "Controls main slider value (0 ~ 100)",
16+
"duration": "Total duration of the video used to calculate displayed time.",
17+
"volume": "Volume value passed to the underlying control and slots.",
18+
"volumeProps": "Props passed down to the VVideoVolume component."
19+
}
20+
}

‎packages/api-generator/src/locale/en/VVideoVolume.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"props": {
3+
"inline": "Display slider next to the icon. VMenu won't be displayed on click. Recomended to pair with **sliderProps** to configure slider width.",
4+
"direction": "Switch between horizontal and vertical slider.",
5+
"label": "Text to display in tooltip and passed to `aria-label`.",
6+
"modelValue": "Volume value (0 ~ 100)",
7+
"menuProps": "Props passed to VMenu containing volume slider. Useful to adjust **location** and control menu alignment",
8+
"sliderProps": "Selected props to customize volume slider."
9+
}
10+
}

‎packages/docs/src/data/nav.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,10 @@
284284
"title": "hotkeys",
285285
"subfolder": "components"
286286
},
287+
{
288+
"title": "videos",
289+
"subfolder": "components"
290+
},
287291
{
288292
"title": "rules",
289293
"subfolder": "features"

‎packages/docs/src/data/page-to-api.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@
159159
"VTreeviewChildren",
160160
"VTreeviewGroup"
161161
],
162+
"components/videos": ["VVideo", "VVideoControls", "VVideoVolume"],
162163
"components/virtual-scroller": ["VVirtualScroll"],
163164
"components/windows": ["VWindow", "VWindowItem"],
164165
"directives/click-outside": ["v-click-outside"],

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div class="d-flex justify-center">
3+
<v-card elevation="4" rounded="xl">
4+
<v-card-item class="py-4">
5+
<v-skeleton-loader type="list-item-avatar-two-line"></v-skeleton-loader>
6+
</v-card-item>
7+
<v-card-text class="pb-4 px-6">
8+
<v-video
9+
:volume="50"
10+
background-color="transparent"
11+
color="orange"
12+
controls-transition="slide-y-transition"
13+
elevation="0"
14+
image="https://jsek.work/vt-video-poster.jpg"
15+
rounded="xl"
16+
src="https://jsek.work/vt-video.mp4"
17+
detached
18+
eager
19+
floating
20+
hide-play
21+
no-fullscreen
22+
split-time
23+
></v-video>
24+
</v-card-text>
25+
</v-card>
26+
</div>
27+
</template>

‎packages/docs/src/examples/v-video/misc-mini.vue

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div class="d-flex align-center justify-center ga-6">
3+
<v-defaults-provider :defaults="{ VVideoControls: { VIconBtn: { color: 'red', border: 'sm' } } }">
4+
<v-video
5+
color="blue"
6+
controls-variant="mini"
7+
height="300"
8+
image="https://jsek.work/vt-sunflowers.jpg"
9+
rounded="lg"
10+
src="https://jsek.work/vt-sunflowers.mp4"
11+
style="--v-video-controls-pill-border-radius: 8px"
12+
width="300"
13+
eager
14+
hide-fullscreen
15+
hide-volume
16+
muted
17+
pills
18+
>
19+
<template v-slot:prepend>
20+
<VIconBtn class="mx-n1" icon="mdi-skip-previous"></VIconBtn>
21+
</template>
22+
<template v-slot:append>
23+
<VIconBtn class="mx-n1" icon="mdi-skip-next"></VIconBtn>
24+
</template>
25+
</v-video>
26+
</v-defaults-provider>
27+
28+
<v-video
29+
controls-variant="mini"
30+
height="300"
31+
image="https://jsek.work/vt-sunflowers.jpg"
32+
rounded="xl"
33+
src="https://jsek.work/vt-sunflowers.mp4"
34+
width="300"
35+
eager
36+
hide-overlay
37+
no-fullscreen
38+
pills
39+
>
40+
<template v-slot:controls="{ play, pause, playing, progress }">
41+
<div class="ml-auto" style="display: grid">
42+
<v-progress-circular
43+
:model-value="progress"
44+
color="#fffa"
45+
size="58"
46+
style="grid-area: 1/1; margin: -5px"
47+
width="3"
48+
></v-progress-circular>
49+
<v-icon-btn
50+
:icon="playing ? 'mdi-pause' : 'mdi-play'"
51+
color="primary"
52+
size="large"
53+
style="grid-area: 1/1"
54+
variant="flat"
55+
@click="() => playing ? pause() : play()"
56+
></v-icon-btn>
57+
</div>
58+
</template>
59+
</v-video>
60+
</div>
61+
</template>

‎packages/docs/src/examples/v-video/misc-tube.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<v-video
3+
:volume="50"
4+
:volume-props="{ direction: 'horizontal', menuProps: { location: 'top left' } }"
5+
class="mx-auto"
6+
controls-variant="tube"
7+
density="comfortable"
8+
image="https://jsek.work/vt-video-poster.jpg"
9+
rounded="lg"
10+
src="https://jsek.work/vt-video.mp4"
11+
track-color="red"
12+
eager
13+
>
14+
<template v-slot:prepend>
15+
<v-icon-btn icon="mdi-skip-next"></v-icon-btn>
16+
</template>
17+
<template v-slot:append>
18+
<v-icon-btn icon="mdi-closed-caption"></v-icon-btn>
19+
<v-icon-btn icon="mdi-cog"></v-icon-btn>
20+
<v-icon-btn icon="mdi-picture-in-picture-bottom-right"></v-icon-btn>
21+
<v-icon-btn icon="mdi-cast"></v-icon-btn>
22+
</template>
23+
</v-video>
24+
</template>

‎packages/docs/src/examples/v-video/prop-color.vue

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<div>
3+
<v-video
4+
:color="color"
5+
:start-at="10"
6+
class="mx-auto"
7+
image="https://jsek.work/vt-sunflowers.jpg"
8+
src="https://jsek.work/vt-sunflowers.mp4"
9+
eager
10+
muted
11+
></v-video>
12+
13+
<div class="d-flex justify-center ga-3">
14+
<v-icon-btn
15+
v-for="c in options"
16+
:key="c"
17+
:color="c"
18+
:icon="c ? 'mdi-circle' : 'mdi-circle-outline'"
19+
variant="text"
20+
@click="color = c"
21+
></v-icon-btn>
22+
<v-icon-btn
23+
icon="mdi-palette"
24+
variant="text"
25+
>
26+
<v-icon></v-icon>
27+
<v-menu :close-on-content-click="false" activator="parent">
28+
<v-color-picker
29+
v-model="color"
30+
hide-canvas
31+
hide-inputs
32+
hide-sliders
33+
show-swatches
34+
></v-color-picker>
35+
</v-menu>
36+
</v-icon-btn>
37+
</div>
38+
</div>
39+
</template>
40+
41+
<script setup>
42+
import { shallowRef } from 'vue'
43+
44+
const color = shallowRef(null)
45+
const options = [null, 'primary', 'yellow', 'green-darken-1']
46+
</script>
47+
48+
<script>
49+
export default {
50+
data: () => ({
51+
color: null,
52+
options: [null, 'primary', 'yellow', 'green-darken-1'],
53+
}),
54+
}
55+
</script>

0 commit comments

Comments
 (0)