Add fullscreen handling on mobile

- Hide toolbar when fullscreen

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",

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",

src/App.vue

@@ -13,7 +13,7 @@
       <drawerright></drawerright>
     </v-navigation-drawer>
 
-    <v-toolbar app fixed style="z-index: 5">
+    <v-toolbar app fixed scroll-off-screen :scroll-threshold="1" :manual-scroll="appIsFullscreen" style="z-index: 5">
       <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
       <a href="https://synclounge.tv" target="_blank">
         <img class="ma-1 hidden-xs-only" style="height: 42px; width: auto; vertical-align: middle" v-bind:src="logos.light.long" />
@@ -23,6 +23,7 @@
       <v-spacer></v-spacer>
       <v-toolbar-items>
         <v-btn color="primary" dark raised v-if="shortUrl != null" v-clipboard="shortUrl" @success="sendNotification()">Invite</v-btn>
+        <v-btn dark @click="goFullscreen" class="hidden-lg-and-up" icon><v-icon>fullscreen</v-icon></v-btn>
         <v-btn small tag="a" class="hidden-sm-and-down" flat v-for="item in links" :key="item.title" :href="item.href" :target="item.target">{{ item.title }}</v-btn>
         <v-btn small tag="a" class="hidden-sm-and-down" flat @click="donateDialog = true">Donate ♥</v-btn>
         <v-icon v-if="showRightDrawerButton" @click="toggleDrawerRight" class="clickable">{{ drawerRight ? 'last_page' : 'first_page' }}</v-icon>
@@ -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: {