etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

fullscreen page exit fix

This commit is contained in:
Nikita Krupin 2022-05-28 18:33:43 -04:00
parent 5f61ef831d
commit d60c2de32a
1 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
NUXT/components/Player/index.vue
View File

@ -20,15 +20,9 @@
autoplay
width="100%"
:src="vidSrc"
style="
transition: 0.15s ease-in-out;
transition-properties: all;
max-height: 100vh;
"
:style="
(controls ? 'filter: brightness(50%);' : 'filter: none;',
contain ? 'object-fit: contain;' : 'object-fit: cover;')
"
style="transition: filter 0.15s ease-in-out; max-height: 100vh"
:class="controls ? 'dim' : ''"
:style="contain ? 'object-fit: contain;' : 'object-fit: cover;'"
/>
<!-- TODO: controls || seeking, take seeking out of <seekbar> component -->
@ -142,39 +136,52 @@ export default {
console.log("sources", this.sources);
this.vidSrc = this.sources[this.sources.length - 1].url;
},
beforeDestroy() {
this.exitFullscreen();
},
methods: {
handleFullscreenChange() {
// close fullscreen 👇
if (document?.fullscreenElement === this.$refs.vidcontainer) {
const cancellFullScreen =
document.exitFullscreen ||
document.mozCancelFullScreen ||
document.webkitExitFullscreen ||
document.msExitFullscreen;
cancellFullScreen.call(document);
screen.orientation.lock("portrait");
screen.orientation.unlock();
this.$vuetube.navigationBar.show();
this.$vuetube.statusBar.show();
this.isFullscreen = false;
// open fullscreen 👇
this.exitFullscreen();
} else {
const element = this.$refs.vidcontainer;
const requestFullScreen =
element.requestFullscreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
element.msRequestFullScreen;
requestFullScreen.call(element);
screen.orientation.lock("landscape");
this.$vuetube.navigationBar.hide();
this.$vuetube.statusBar.hide();
this.isFullscreen = true;
this.openFullscreen();
}
},
exitFullscreen() {
const cancellFullScreen =
document.exitFullscreen ||
document.mozCancelFullScreen ||
document.webkitExitFullscreen ||
document.msExitFullscreen;
cancellFullScreen.call(document);
screen.orientation.lock("portrait");
screen.orientation.unlock();
this.$vuetube.navigationBar.show();
this.$vuetube.statusBar.show();
this.isFullscreen = false;
},
openFullscreen() {
const element = this.$refs.vidcontainer;
const requestFullScreen =
element.requestFullscreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
element.msRequestFullScreen;
requestFullScreen.call(element);
screen.orientation.lock("landscape");
this.$vuetube.navigationBar.hide();
this.$vuetube.statusBar.hide();
this.isFullscreen = true;
},
getPlayer() {
return this.$refs.player;
},
},
};
</script>
<style>
.dim {
filter: brightness(50%);
}
</style>