Skip to content

Commit 13da3e1

Browse files
J-SekJ-Sek
committed
fix(VVideo): correct color customization
1 parent 3df9494 commit 13da3e1

File tree

3 files changed

+117
-39
lines changed

3 files changed

+117
-39
lines changed

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

Lines changed: 67 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,94 @@
11
<template>
22
<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>
3+
<v-sheet class="px-6 py-2 border-b mb-3" color="surface">
4+
<div class="d-flex ga-12 flex-wrap align-center justify-center">
5+
<div class="d-flex align-center ga-3">
6+
<v-chip-group v-model="controlsVariant" mandatory>
7+
<v-chip text="default" value="default" filter label></v-chip>
8+
<v-chip text="tube" value="tube" filter label></v-chip>
9+
<v-chip text="mini" value="mini" filter label></v-chip>
10+
</v-chip-group>
11+
</div>
12+
<div class="d-flex align-center ga-3">
13+
<v-chip-group v-model="features" multiple>
14+
<v-chip text="pills" value="pills" filter label></v-chip>
15+
<v-chip text="floating" value="floating" filter label></v-chip>
16+
<v-chip text="detached" value="detached" filter label></v-chip>
17+
</v-chip-group>
18+
</div>
19+
</div>
20+
</v-sheet>
1221

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"
22+
<div class="d-flex justify-center ga-3 mb-3">
23+
<v-btn
24+
v-for="key in ['color', 'background', 'track']"
25+
:key="key"
2426
variant="text"
2527
>
26-
<v-icon></v-icon>
28+
<v-icon v-if="colors[key]" :color="colors[key]" icon="mdi-circle" start></v-icon>
29+
<v-icon v-else icon="mdi-circle-outline" start></v-icon>
30+
{{ key }}
2731
<v-menu :close-on-content-click="false" activator="parent">
2832
<v-color-picker
29-
v-model="color"
33+
v-model="colors[key]"
3034
hide-canvas
3135
hide-inputs
3236
hide-sliders
3337
show-swatches
3438
></v-color-picker>
39+
<v-btn text="Clear" @click="colors[key] = null"></v-btn>
3540
</v-menu>
36-
</v-icon-btn>
41+
</v-btn>
3742
</div>
43+
44+
<v-video
45+
:background-color="colors.background"
46+
:color="colors.color"
47+
:controls-variant="controlsVariant"
48+
:detached="features.includes('detached')"
49+
:floating="features.includes('floating')"
50+
:pills="features.includes('pills')"
51+
:start-at="10"
52+
:track-color="colors.track"
53+
class="mx-auto mb-3"
54+
image="https://jsek.work/vt-sunflowers.jpg"
55+
src="https://jsek.work/vt-sunflowers.mp4"
56+
eager
57+
muted
58+
no-fullscreen
59+
>
60+
<template v-slot:append>
61+
<v-icon-btn icon="mdi-cog"></v-icon-btn>
62+
<v-divider opacity=".7" thickness="2" inset vertical></v-divider>
63+
<v-icon-btn icon="mdi-picture-in-picture-bottom-right"></v-icon-btn>
64+
<v-icon-btn class="mr-2" icon="mdi-cast"></v-icon-btn>
65+
</template>
66+
</v-video>
3867
</div>
3968
</template>
4069

4170
<script setup>
42-
import { shallowRef } from 'vue'
71+
import { reactive, shallowRef } from 'vue'
4372
44-
const color = shallowRef(null)
45-
const options = [null, 'primary', 'yellow', 'green-darken-1']
73+
const features = shallowRef([])
74+
const controlsVariant = shallowRef('default')
75+
const colors = reactive({
76+
color: '#4cd2de',
77+
background: null,
78+
track: null,
79+
})
4680
</script>
4781

4882
<script>
4983
export default {
5084
data: () => ({
51-
color: null,
52-
options: [null, 'primary', 'yellow', 'green-darken-1'],
85+
features: [],
86+
controlsVariant: 'default',
87+
colors: {
88+
color: '#4cd2de',
89+
background: null,
90+
track: null,
91+
},
5392
}),
5493
}
5594
</script>

‎packages/docs/src/pages/en/components/videos.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ Video can automatically skip to certain timestamp upon load. It can be useful to
8585

8686
#### Color
8787

88-
You can control the icon color and background color of the active video node.
88+
You can control the icon color and background color of the controls.
8989

9090
<ExamplesExample file="v-video/prop-color" />
9191

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

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -187,8 +187,11 @@ export const VVideoControls = genericComponent<VVideoControlsSlots>()({
187187
const pillClasses = [
188188
'v-video-control__pill',
189189
props.pills ? elevationClasses.value : [],
190+
props.pills ? backgroundColorClasses.value : [],
190191
]
191192

193+
const pillStyles = props.pills ? backgroundColorStyles.value : []
194+
192195
const slotProps = {
193196
play,
194197
pause,
@@ -212,13 +215,13 @@ export const VVideoControls = genericComponent<VVideoControlsSlots>()({
212215
{ 'v-video-controls--detached': props.detached },
213216
{ 'v-video-controls--floating': props.floating },
214217
{ 'v-video-controls--split-time': props.splitTime },
215-
backgroundColorClasses.value,
218+
!props.pills ? backgroundColorClasses.value : [],
216219
props.detached && !props.pills ? elevationClasses.value : [],
217220
densityClasses.value,
218221
themeClasses.value,
219222
]}
220223
style={[
221-
backgroundColorStyles.value,
224+
!props.pills ? backgroundColorStyles.value : [],
222225
{ '--v-video-controls-pill-height': `${regularBtnSize}px` },
223226
]}
224227
>
@@ -228,7 +231,10 @@ export const VVideoControls = genericComponent<VVideoControlsSlots>()({
228231
{ props.variant !== 'mini' && (
229232
<>
230233
{ !props.hidePlay && (
231-
<div class={[pillClasses, 'v-video__action-play']}>
234+
<div
235+
class={[pillClasses, 'v-video__action-play']}
236+
style={ pillStyles }
237+
>
232238
<VIconBtn
233239
icon={ playing.value ? '$pause' : '$play' }
234240
size={ playBtnSize }
@@ -239,14 +245,31 @@ export const VVideoControls = genericComponent<VVideoControlsSlots>()({
239245
</div>
240246
)}
241247
{ slots.prepend && (
242-
<div class={ pillClasses }>
248+
<div
249+
class={ pillClasses }
250+
style={ pillStyles }
251+
>
243252
{ slots.prepend(slotProps) }
244253
</div>
245254
)}
246255
{ props.splitTime
247-
? <span class={[pillClasses, 'v-video__time']}>{ currentTime.value.elapsed }</span>
256+
? (
257+
<span
258+
class={[pillClasses, 'v-video__time']}
259+
style={ pillStyles }
260+
>
261+
{ currentTime.value.elapsed }
262+
</span>
263+
)
248264
: props.variant !== 'default'
249-
? <span class={[pillClasses, 'v-video__time']}>{ currentTime.value.elapsed } / { currentTime.value.total }</span>
265+
? (
266+
<span
267+
class={[pillClasses, 'v-video__time']}
268+
style={ pillStyles }
269+
>
270+
{ currentTime.value.elapsed } / { currentTime.value.total }
271+
</span>
272+
)
250273
: ''
251274
}
252275
<VSlider
@@ -265,7 +288,14 @@ export const VVideoControls = genericComponent<VVideoControlsSlots>()({
265288
</VSlider>
266289
{ props.variant === 'tube' && <VSpacer /> }
267290
{ props.splitTime
268-
? <span class={[pillClasses, 'v-video__time']}>{ currentTime.value.remaining }</span>
291+
? (
292+
<span
293+
class={[pillClasses, 'v-video__time']}
294+
style={ pillStyles }
295+
>
296+
{ currentTime.value.remaining }
297+
</span>
298+
)
269299
: ''
270300
}
271301
</>
@@ -274,12 +304,18 @@ export const VVideoControls = genericComponent<VVideoControlsSlots>()({
274304
<>
275305
<VSpacer />
276306
{ slots.prepend && (
277-
<div class={ pillClasses }>
307+
<div
308+
class={ pillClasses }
309+
style={ pillStyles }
310+
>
278311
{ slots.prepend(slotProps) }
279312
</div>
280313
)}
281314
{ !props.hidePlay && (
282-
<div class={[pillClasses, 'v-video__action-play']}>
315+
<div
316+
class={[pillClasses, 'v-video__action-play']}
317+
style={ pillStyles }
318+
>
283319
<VIconBtn
284320
icon={ playing.value ? '$pause' : '$play' }
285321
size={ playBtnSize }
@@ -292,7 +328,10 @@ export const VVideoControls = genericComponent<VVideoControlsSlots>()({
292328
</>
293329
)}
294330
{ (!props.hideVolume || !props.hideFullscreen || slots.append) && (
295-
<div class={ pillClasses }>
331+
<div
332+
class={ pillClasses }
333+
style={ pillStyles }
334+
>
296335
{ !props.hideVolume && (
297336
<VVideoVolume
298337
key="volume-control"

0 commit comments

Comments
 (0)