From 6eb75eaf58bfd8a9349e01875d27a226c32e2958 Mon Sep 17 00:00:00 2001
From: William Gibson <william@tired.io>
Date: Sat, 30 May 2020 01:41:17 +0100
Subject: [PATCH 1/2] Move ControlBar to separate component

---
 components/Player/ControlBar.vue | 38 ++++++++++++++++++++++++++++++++
 components/Player/Footer.vue     | 29 ------------------------
 components/Player/Viewer.vue     |  7 ++++--
 3 files changed, 43 insertions(+), 31 deletions(-)
 create mode 100644 components/Player/ControlBar.vue

diff --git a/components/Player/ControlBar.vue b/components/Player/ControlBar.vue
new file mode 100644
index 0000000..ef6fc35
--- /dev/null
+++ b/components/Player/ControlBar.vue
@@ -0,0 +1,38 @@
+<template>
+	<div class="control-bar">
+    <div class="control-inner">
+    	<div class="volume-controls">
+      <img v-if="!this.isStreamMuted" src="/icons/speaker-unmuted.svg" alt="" class="icon" @click="toggleStreamMute"/>
+      <img v-else src="/icons/speaker-muted.svg" alt="" class="icon" @click="toggleStreamMute"/>
+      <input 
+        v-model="volumeValue"
+        class="volume-slider" 
+        type="range" 
+        min="0" 
+        max="100" 
+        value=100 
+        step="1"
+        @input="volumeChanged"
+      />
+    </div>
+    <img src="/icons/fullscreen.svg" alt="" class="fullscreen-toggle icon" @click="toggleFullscreen"/>
+    </div>
+	</div>
+</template>
+
+<script>
+	export default {
+    methods: {
+      toggleStreamMute() {
+	      this.isStreamMuted = !this.isStreamMuted
+	      this.$store.commit('setMutedStatus', this.isStreamMuted)
+      },
+      volumeChanged() {
+        this.$store.commit('setViewerVolume', this.volumeValue)
+      },
+      toggleFullscreen() {
+        this.$root.$emit('toggle-fullscreen')
+      }
+    }
+	}
+</script>
diff --git a/components/Player/Footer.vue b/components/Player/Footer.vue
index 60633fa..81a92dd 100644
--- a/components/Player/Footer.vue
+++ b/components/Player/Footer.vue
@@ -1,22 +1,5 @@
 <template>
     <div class="player-footer">
-        <div class="control-bar">
-            <div class="volume-controls">
-                <img v-if="!this.isStreamMuted" src="/icons/speaker-unmuted.svg" alt="" class="icon" @click="toggleStreamMute"/>
-                <img v-else src="/icons/speaker-muted.svg" alt="" class="icon" @click="toggleStreamMute"/>
-                <input 
-                    v-model="volumeValue"
-                    class="volume-slider" 
-                    type="range" 
-                    min="0" 
-                    max="100" 
-                    value=100 
-                    step="1"
-                    @input="volumeChanged"
-                />
-            </div>
-            <img src="/icons/fullscreen.svg" alt="" class="fullscreen-toggle icon" @click="toggleFullscreen"/>
-        </div>
         <div class="user-icons">
             <UserIcon
                 v-for="member in members"
@@ -69,18 +52,6 @@
 
                 return [...new Set(this.room.members.map(({ id }) => id))]
             }
-        },
-        methods: {
-            toggleStreamMute() {
-                this.isStreamMuted = !this.isStreamMuted
-                this.$store.commit('setMutedStatus', this.isStreamMuted)
-            },
-            volumeChanged() {
-                this.$store.commit('setViewerVolume', this.volumeValue)
-            },
-            toggleFullscreen() {
-                this.$root.$emit('toggle-fullscreen')
-            }
         }
     }
 </script>
diff --git a/components/Player/Viewer.vue b/components/Player/Viewer.vue
index 6a980ea..082971a 100644
--- a/components/Player/Viewer.vue
+++ b/components/Player/Viewer.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="player" ref="viewport" :class="{ 'capture-events': hasControl }">
+    <div class="player" ref="viewport" :class="{ 'has-control capture-events': hasControl }">
         <p v-if=showPlayerDevtools class="player-dev">
             Portal ID: {{ portal.id }}
             <br>
@@ -36,6 +36,7 @@
             @mousewheel=didMouseWheel
             @contextmenu=handleRightClick
         />
+        <ControlBar />
         <div v-if=showMutedPopup class="player-tooltips">
             <div class="player-tooltip" :class="{ visible: showMutedPopup }">
                 <div class="player-tooltip-info">
@@ -59,10 +60,12 @@
     import brand from '~/brand/config'
 
     import Button from '~/components/Button'
+    import ControlBar from '~/components/Player/ControlBar'
 
     export default {
         components: {
-            Button
+            Button,
+            ControlBar
         },
         props: {
             volume: Number,

From d7c5525240001b53b7d3d9d17d2bb89d510b6291 Mon Sep 17 00:00:00 2001
From: William Gibson <william@tired.io>
Date: Sat, 30 May 2020 01:41:49 +0100
Subject: [PATCH 2/2] Remove the loading indicator

Buttons that require REST-ful actions already have the rainbow loading animation
---
 nuxt.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index cb13e2d..5fb7b77 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -83,7 +83,6 @@ export default {
             ...script
         ]
     },
-    loadingIndicator: '~/components/Loading/index.html',
     robots: {
         // by default, this only allows the root to be indexed, not the rest, which is enough.
         UserAgent: '*',