diff --git a/NUXT/components/Player/index.vue b/NUXT/components/Player/index.vue
index 9986d3c..7e277b1 100644
--- a/NUXT/components/Player/index.vue
+++ b/NUXT/components/Player/index.vue
@@ -8,6 +8,7 @@
}"
class="d-flex flex-column"
style="position: relative"
+ :style="{ height: isFullscreen ? '100vh' : 'auto' }"
>
@@ -178,7 +180,7 @@
@@ -308,6 +310,9 @@ export default {
data() {
return {
isFullscreen: false,
+ fullscreenLock: false,
+ verticalFullscreen: false,
+ midRotation: false,
controls: false,
seeking: false,
contain: true,
@@ -317,6 +322,7 @@ export default {
watched: 0,
blocks: [],
vidSrc: "",
+ isVerticalVideo: false,
};
},
mounted() {
@@ -361,10 +367,15 @@ export default {
});
}
});
- // TODO: detect orientation change and enter fullscreen
+ },
+ created() {
+ screen.orientation.addEventListener("change", () =>
+ this.fullscreenHandler(false)
+ );
},
beforeDestroy() {
if (this.isFullscreen) this.exitFullscreen();
+ screen.orientation.removeEventListener("change");
},
methods: {
// TODO: make accumulative onclick after first dblclick (don't set timeout untill stopped clicking)
@@ -395,35 +406,65 @@ export default {
this.$refs.player.src = q;
this.$refs.player.currentTime = time;
},
- fullscreenHandler() {
- if (document?.fullscreenElement === this.$refs.vidcontainer) {
- this.exitFullscreen();
+ checkDimensions() {
+ if (this.$refs.player.videoHeight > this.$refs.player.videoWidth) {
+ this.isVerticalVideo = true;
} else {
- this.openFullscreen();
+ this.isVerticalVideo = false;
}
},
- exitFullscreen() {
- const cancellFullScreen =
- document.exitFullscreen ||
- document.mozCancelFullScreen ||
- document.webkitExitFullscreen ||
- document.msExitFullscreen;
- cancellFullScreen.call(document);
- screen.orientation.lock("portrait");
- screen.orientation.unlock();
+ fullscreenHandler(pressedFullscreenBtn) {
+ // Prevent fullscreen button press from being handled twice
+ // (once by pressing fullscreen button, another by the resulting rotation)
+ if (this.midRotation) {
+ this.midRotation = false;
+ return;
+ }
+ // Toggle fullscreen state
+ if (this.isFullscreen) {
+ this.exitFullscreen(pressedFullscreenBtn);
+ } else {
+ this.enterFullscreen(pressedFullscreenBtn);
+ }
+ },
+ exitFullscreen(unlock) {
+ if (unlock) {
+ if (this.verticalFullscreen) {
+ // Unset vertical fullscreen mode
+ screen.orientation.unlock();
+ this.fullscreenLock = false;
+ this.verticalFullscreen = false;
+ } else {
+ // Unset standard fullscreen mode
+ this.midRotation = true;
+ screen.orientation.lock("portrait");
+ this.fullscreenLock = true;
+ // Locks the rotation to portrait for two seconds,
+ // and will then rotate back to landscape if the
+ // user doesn't rotate first
+ setTimeout(() => {
+ this.fullscreenLock = false;
+ screen.orientation.unlock();
+ }, 2 * 1000);
+ }
+ }
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");
+ enterFullscreen(force) {
+ if (force) {
+ this.fullscreenLock = true;
+ if (this.isVerticalVideo) {
+ // Vertical fullscreen mode (vertical video only)
+ screen.orientation.lock("portrait");
+ this.verticalFullscreen = true;
+ } else {
+ // Standard fullscreen mode
+ this.midRotation = true;
+ screen.orientation.lock("landscape");
+ }
+ }
this.$vuetube.navigationBar.hide();
this.$vuetube.statusBar.hide();
this.isFullscreen = true;