lock controls

client/src/components/controls.vue

@@ -9,9 +9,31 @@
           'fa-keyboard',
           'request',
         ]"
+        v-tooltip="{
+          content: !hosted || hosting ? (hosting ? 'Release Controls' : 'Request Controls') : '',
+          placement: 'top',
+          offset: 5,
+          boundariesElement: 'body',
+          delay: { show: 300, hide: 100 },
+        }"
         @click.stop.prevent="toggleControl"
       />
     </li>
+    <li>
+      <label
+        class="switch"
+        v-tooltip="{
+          content: hosting ? (locked ? 'Unlock Controls' : 'Lock Controls') : '',
+          placement: 'top',
+          offset: 5,
+          boundariesElement: 'body',
+          delay: { show: 300, hide: 100 },
+        }"
+      >
+        <input type="checkbox" v-model="locked" :disabled="!hosting" />
+        <span />
+      </label>
+    </li>
     <li>
       <i
         :class="[{ disabled: !playable }, playing ? 'fa-pause-circle' : 'fa-play-circle', 'fas', 'play']"
@@ -43,7 +65,7 @@
       cursor: pointer;
 
       i {
-        padding: 0 10px;
+        padding: 0 5px;
 
         &.faded {
           color: rgba($color: $text-normal, $alpha: 0.4);
@@ -66,7 +88,7 @@
         input[type='range'] {
           width: 100%;
           background: transparent;
-          width: 200px;
+          width: 150px;
           height: 20px;
           -webkit-appearance: none;
 
@@ -105,6 +127,69 @@
           }
         }
       }
+
+      .switch {
+        margin: 0 5px;
+        display: block;
+        position: relative;
+        width: 42px;
+        height: 24px;
+
+        input[type='checkbox'] {
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        span {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: $background-secondary;
+          transition: 0.2s;
+          border-radius: 34px;
+
+          &:before {
+            color: $background-tertiary;
+            font-weight: 900;
+            font-family: 'Font Awesome 5 Free';
+            content: '\f3c1';
+            font-size: 8px;
+            line-height: 18px;
+            text-align: center;
+            position: absolute;
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: 0.3s;
+            border-radius: 50%;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+          }
+        }
+      }
+
+      input[type='checkbox'] {
+        &:checked + span {
+          background-color: $style-primary;
+
+          &:before {
+            content: '\f023';
+            transform: translateX(18px);
+          }
+        }
+
+        &:disabled + span {
+          &:before {
+            content: '';
+            background-color: rgba($color: $text-normal, $alpha: 0.4);
+          }
+        }
+      }
     }
   }
 </style>
@@ -149,6 +234,14 @@
       return this.$accessor.video.playable
     }
 
+    get locked() {
+      return this.$accessor.remote.locked && this.$accessor.remote.hosting
+    }
+
+    set locked(locked: boolean) {
+      this.$accessor.remote.setLocked(locked)
+    }
+
     toggleControl() {
       if (!this.playable) {
         return

client/src/components/header.vue

@@ -106,9 +106,9 @@
     toggleLock() {
       if (this.admin) {
         if (this.locked) {
-          this.$accessor.remote.unlock()
+          this.$accessor.unlock()
         } else {
-          this.$accessor.remote.lock()
+          this.$accessor.lock()
         }
       }
     }

client/src/components/settings.vue

@@ -108,7 +108,7 @@
             right: 0;
             bottom: 0;
             background-color: $background-tertiary;
-            transition: 0.4s;
+            transition: 0.2s;
             border-radius: 34px;
 
             &:before {

client/src/components/video.vue

@@ -206,6 +206,10 @@
       return this.$accessor.settings.autoplay
     }
 
+    get locked() {
+      return this.$accessor.remote.locked
+    }
+
     get scroll() {
       return this.$accessor.settings.scroll
     }
@@ -240,8 +244,6 @@
 
     @Watch('width')
     onWidthChanged(width: number) {
-      const { videoWidth, videoHeight } = this._video
-      console.log({ videoWidth, videoHeight })
       this.onResise()
     }
 
@@ -321,7 +323,7 @@
       })
 
       this._video.addEventListener('error', event => {
-        console.error(event.error)
+        this.$log.error(event.error)
         this.$accessor.video.setPlayable(false)
       })
 
@@ -344,7 +346,7 @@
         .then(() => {
           this.onResise()
         })
-        .catch(err => console.log(err))
+        .catch(err => this.$log.error(err))
     }
 
     pause() {
@@ -385,7 +387,7 @@
               this.$accessor.remote.sendClipboard(text)
             }
           })
-          .catch(console.error)
+          .catch(this.$log.error)
       }
     }
 
@@ -399,7 +401,7 @@
     }
 
     onWheel(e: WheelEvent) {
-      if (!this.hosting) {
+      if (!this.hosting || this.locked) {
         return
       }
       this.onMousePos(e)
@@ -419,7 +421,7 @@
     }
 
     onMouseDown(e: MouseEvent) {
-      if (!this.hosting) {
+      if (!this.hosting || this.locked) {
         return
       }
       this.onMousePos(e)
@@ -427,7 +429,7 @@
     }
 
     onMouseUp(e: MouseEvent) {
-      if (!this.hosting) {
+      if (!this.hosting || this.locked) {
         return
       }
       this.onMousePos(e)
@@ -435,7 +437,7 @@
     }
 
     onMouseMove(e: MouseEvent) {
-      if (!this.hosting) {
+      if (!this.hosting || this.locked) {
         return
       }
       this.onMousePos(e)
@@ -452,14 +454,14 @@
     }
 
     onKeyDown(e: KeyboardEvent) {
-      if (!this.focused || !this.hosting) {
+      if (!this.focused || !this.hosting || this.locked) {
         return
       }
       this.$client.sendData('keydown', { key: e.keyCode })
     }
 
     onKeyUp(e: KeyboardEvent) {
-      if (!this.focused || !this.hosting) {
+      if (!this.focused || !this.hosting || this.locked) {
         return
       }
       this.$client.sendData('keyup', { key: e.keyCode })

client/src/store/index.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { useAccessor, mutationTree, actionTree } from 'typed-vuex'
+import { EVENT } from '~/neko/events'
 import { get, set } from '~/utils/localstorage'
 
 import * as video from './video'
@@ -51,6 +52,22 @@ export const actions = actionTree(
       accessor.emoji.initialise()
     },
 
+    lock() {
+      if (!accessor.connected || !accessor.user.admin) {
+        return
+      }
+
+      $client.sendMessage(EVENT.ADMIN.LOCK)
+    },
+
+    unlock() {
+      if (!accessor.connected || !accessor.user.admin) {
+        return
+      }
+
+      $client.sendMessage(EVENT.ADMIN.UNLOCK)
+    },
+
     login({ state }, { username, password }: { username: string; password: string }) {
       accessor.setLogin({ username, password })
       $client.login(password, username)

client/src/store/remote.ts

@@ -8,6 +8,7 @@ export const namespaced = true
 export const state = () => ({
   id: '',
   clipboard: '',
+  locked: false,
 })
 
 export const getters = getterTree(state, {
@@ -35,9 +36,14 @@ export const mutations = mutationTree(state, {
     state.clipboard = clipboard
   },
 
+  setLocked(state, locked: boolean) {
+    state.locked = locked
+  },
+
   reset(state) {
     state.id = ''
     state.clipboard = ''
+    state.locked = false
   },
 })
 
@@ -127,21 +133,5 @@ export const actions = actionTree(
 
       $client.sendMessage(EVENT.ADMIN.GIVE, { id: member.id })
     },
-
-    lock() {
-      if (!accessor.connected || !accessor.user.admin) {
-        return
-      }
-
-      $client.sendMessage(EVENT.ADMIN.LOCK)
-    },
-
-    unlock() {
-      if (!accessor.connected || !accessor.user.admin) {
-        return
-      }
-
-      $client.sendMessage(EVENT.ADMIN.UNLOCK)
-    },
   },
 )