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>
|
||||
<div class="accent">
|
||||
<video
|
||||
controls
|
||||
autoplay
|
||||
:src="vidSrc"
|
||||
width="100%"
|
||||
@webkitfullscreenchange="handleFullscreenChange"
|
||||
ref="player"
|
||||
style="max-height: 50vh"
|
||||
/>
|
||||
<videoPlayer :vidSrc="vidSrc" />
|
||||
<v-card v-if="loaded" class="ml-2 mr-2 accent" flat>
|
||||
<v-card-title
|
||||
class="mt-2"
|
||||
|
@ -190,15 +182,6 @@ export default {
|
|||
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 for change in the route query string (in this case, ?v=xxxxxxxx to ?v=yyyyyyyy)
|
||||
|
|
Loading…
Reference in New Issue