From 3ff80a1c635905b870f32b633c28578c4f70c918 Mon Sep 17 00:00:00 2001
From: David Roizenman <david@hmnd.io>
Date: Thu, 6 Jun 2019 05:38:55 -0400
Subject: [PATCH] Add fullscreen handling on mobile

- Hide toolbar when fullscreen
---
 package-lock.json |  5 +++++
 package.json      |  1 +
 src/App.vue       | 18 +++++++++++++++---
 3 files changed, 21 insertions(+), 3 deletions(-)

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
->
+    >
       <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: {