diff --git a/package-lock.json b/package-lock.json
index d0e925e7..2ae8a782 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4524,6 +4524,11 @@
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
},
+ "fscreen": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.0.2.tgz",
+ "integrity": "sha1-xMUdltgZ11oZ1yjg30Rfm+m7mE8="
+ },
"fsevents": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.2.tgz",
diff --git a/package.json b/package.json
index fdbf5b92..8021db52 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"body-parser": "^1.18.2",
"cors": "^2.8.3",
"express": "^4.16.3",
+ "fscreen": "^1.0.2",
"git-rev-sync": "^1.12.0",
"jsonfile": "^4.0.0",
"moment": "^2.18.1",
diff --git a/src/App.vue b/src/App.vue
index 9e1d5f33..6ee66348 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,11 +9,11 @@
app
persistent
v-model="drawerRight" right enable-resize-watcher
->
+ >
-
+
@@ -23,6 +23,7 @@
Invite
+ fullscreen
{{ item.title }}
Donate ♥
{{ drawerRight ? 'last_page' : 'first_page' }}
@@ -80,6 +81,8 @@
// Custom css
import './assets/css/style.css';
+import fscreen from 'fscreen';
+
import drawerright from './sidebar';
import leftsidebar from './leftsidebar';
import upnext from './upnext';
@@ -137,7 +140,7 @@ export default {
href: 'https://discord.gg/fKQB3yt',
},
],
-
+ appIsFullscreen: false,
};
},
methods: {
@@ -148,6 +151,9 @@ export default {
toggleDrawerRight() {
this.drawerRight = !this.drawerRight;
},
+ goFullscreen() {
+ fscreen.requestFullscreen(document.body);
+ }
},
async mounted() {
try {
@@ -217,6 +223,12 @@ export default {
}
}
+ fscreen.addEventListener('fullscreenchange', () => {
+ const isFullscreen = fscreen.fullscreenElement !== null;
+ this.appIsFullscreen = isFullscreen;
+ document.body.classList.toggle('is-fullscreen', isFullscreen);
+ });
+
this.loading = false;
},
watch: {