Skip to content

Commit

Permalink
components: widgets: Video: Add widget
Browse files Browse the repository at this point in the history
Signed-off-by: Patrick José Pereira <[email protected]>
  • Loading branch information
patrickelectric committed Oct 15, 2023
1 parent 86342b0 commit 290d4ff
Showing 1 changed file with 85 additions and 0 deletions.
85 changes: 85 additions & 0 deletions src/components/widgets/Video.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<template>
<div class="w-full h-full">
<!-- Some browsers only do autoplay if video is muted -->
<video
ref="videoPlayer"
:key="widget.options.source"
:autoplay="widget.options.autoplay"
:controls="widget.options.controls"
:loop="widget.options.loop"
:muted="widget.options.muted"
>
<source :src="widget.options.source" />
</video>
<v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
<v-card class="pa-2">
<v-card-title>Video Source</v-card-title>
<v-card-text>
<v-text-field
label="Video Source"
variant="underlined"
:model-value="widget.options.source"
outlined
@change="widget.options.source = $event.srcElement.value"
@keydown.enter="widget.options.source = $event.srcElement.value"
></v-text-field>
<div>
<span class="text-xs font-semibold leading-3 text-slate-600">Fit style</span>
<Dropdown v-model="widget.options.fitStyle" :options="['cover', 'fill', 'contain']" class="max-w-[144px]" />
<v-checkbox v-model="widget.options.autoplay" label="Autoplay" hide-details />
<v-checkbox v-model="widget.options.controls" label="Controls" hide-details />
<v-checkbox v-model="widget.options.loop" label="Loop" hide-details />
<v-checkbox v-model="widget.options.muted" label="Muted" hide-details />
</div>
</v-card-text>
<v-card-actions>
<v-btn color="primary" @click="widget.managerVars.configMenuOpen = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, toRefs, watch } from 'vue'
import Dropdown from '@/components/Dropdown.vue'
import type { Widget } from '@/types/widgets'
const props = defineProps<{
/**
* Widget reference
*/
widget: Widget
}>()
const widget = toRefs(props).widget
const videoPlayer = ref()
watch(widget.value.options, () => {
console.log(widget.value.options.source)
videoPlayer.value.pause()
videoPlayer.value.play()
})
onBeforeMount(() => {
if (Object.keys(widget.value.options).length !== 0) {
return
}
widget.value.options = {
source: '',
fitStyle: 'cover',
autoplay: true,
controls: true,
loop: true,
muted: true,
}
})
</script>
<style scoped>
video {
object-fit: v-bind('widget.options.fitStyle');
width: 100%;
height: 100%;
}
</style>

0 comments on commit 290d4ff

Please sign in to comment.