From a70d6d54b3bffe8f26aa1f9b1fbea1532558319d Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Tue, 1 Oct 2024 21:32:54 -0700
Subject: [PATCH] Fullscreen: bring video control buttons along

---
 src/components/VideoFeed.vue | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/VideoFeed.vue b/src/components/VideoFeed.vue
index baa356e..b6ac382 100644
--- a/src/components/VideoFeed.vue
+++ b/src/components/VideoFeed.vue
@@ -28,6 +28,9 @@ export default {
         };
     },
     computed: {
+        containerID() {
+            return this.videoID + '-container';
+        },
         videoID() {
             return this.localVideo ? 'localVideo' : `videofeed-${this.username}`;
         },
@@ -60,10 +63,21 @@ export default {
             this.$emit('popout', this.username);
         },
 
-        fullscreen() {
-            let $elem = document.getElementById(this.videoID);
+        fullscreen(force=false) {
+            // If we are popped-out, pop back in before full screen.
+            if (this.poppedOut && !force) {
+                this.popoutVideo();
+                window.requestAnimationFrame(() => {
+                    this.fullscreen(true);
+                });
+                return;
+            }
+
+            let $elem = document.getElementById(this.containerID);
             if ($elem) {
-                if ($elem.requestFullscreen) {
+                if (document.fullscreenElement) {
+                    document.exitFullscreen();
+                } else if ($elem.requestFullscreen) {
                     $elem.requestFullscreen();
                 } else {
                     window.alert("Fullscreen not supported by your browser.");
@@ -84,7 +98,7 @@ export default {
 </script>
 
 <template>
-    <div class="feed" :class="{
+    <div class="feed" :id="containerID" :class="{
         'popped-out': poppedOut,
         'popped-in': !poppedOut,
     }" @mouseover="mouseOver = true" @mouseleave="mouseOver = false">
@@ -136,7 +150,7 @@ export default {
                 <i class="fa fa-up-right-from-square"></i>
             </button>
 
-            <!-- Full screen -->
+            <!-- Full screen. -->
             <button type="button" class="button is-small is-light is-outlined p-2 ml-2" title="Go full screen"
                 :class="{'seethru': !mouseOver}"
                 @click="fullscreen()">