mirror of https://github.com/VueTubeApp/VueTube
style: 🎨 Seperate "video player" into its own component
This commit is contained in:
parent
f7187400f2
commit
24fc907b4c
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
|
||||||
|
<video
|
||||||
|
controls
|
||||||
|
autoplay
|
||||||
|
:src="vidSrc"
|
||||||
|
width="100%"
|
||||||
|
@webkitfullscreenchange="handleFullscreenChange"
|
||||||
|
ref="player"
|
||||||
|
style="max-height: 50vh"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: [
|
||||||
|
"vidSrc"
|
||||||
|
],
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleFullscreenChange() {
|
||||||
|
if (document.fullscreenElement === this.$refs.player) {
|
||||||
|
this.$vuetube.statusBar.hide();
|
||||||
|
this.$vuetube.navigationBar.hide();
|
||||||
|
} else {
|
||||||
|
this.$vuetube.statusBar.show();
|
||||||
|
this.$vuetube.navigationBar.show();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
|
@ -1,14 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="accent">
|
<div class="accent">
|
||||||
<video
|
<videoPlayer :vidSrc="vidSrc" />
|
||||||
controls
|
|
||||||
autoplay
|
|
||||||
:src="vidSrc"
|
|
||||||
width="100%"
|
|
||||||
@webkitfullscreenchange="handleFullscreenChange"
|
|
||||||
ref="player"
|
|
||||||
style="max-height: 50vh"
|
|
||||||
/>
|
|
||||||
<v-card v-if="loaded" class="ml-2 mr-2 accent" flat>
|
<v-card v-if="loaded" class="ml-2 mr-2 accent" flat>
|
||||||
<v-card-title
|
<v-card-title
|
||||||
class="mt-2"
|
class="mt-2"
|
||||||
|
@ -190,15 +182,6 @@ export default {
|
||||||
dialogTitle: "Share video",
|
dialogTitle: "Share video",
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleFullscreenChange() {
|
|
||||||
if (document.fullscreenElement === this.$refs.player) {
|
|
||||||
this.$vuetube.statusBar.hide();
|
|
||||||
this.$vuetube.navigationBar.hide();
|
|
||||||
} else {
|
|
||||||
this.$vuetube.statusBar.show();
|
|
||||||
this.$vuetube.navigationBar.show();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// Watch for change in the route query string (in this case, ?v=xxxxxxxx to ?v=yyyyyyyy)
|
// Watch for change in the route query string (in this case, ?v=xxxxxxxx to ?v=yyyyyyyy)
|
||||||
|
|
Loading…
Reference in New Issue