Merge pull request #97 from alectrocute/ui-tweaks

Small UI tweaks (control shortcut on video overlay, select dropdown re-styling)

client/src/components/settings.vue

@@ -39,11 +39,7 @@
         <span>{{ $t('setting.keyboard_layout') }}</span>
         <label class="select">
           <select v-model="keyboard_layout">
-            <option
-              v-for="(name, code) in keyboard_layouts_list"
-              :key="code"
-              :value="code"
-            >{{ name }}</option>
+            <option v-for="(name, code) in keyboard_layouts_list" :key="code" :value="code">{{ name }}</option>
           </select>
           <span />
         </label>
@@ -198,20 +194,33 @@
 
         .select {
           max-width: 120px;
+          text-align: right;
+
+          select:hover {
+            border: 1px solid $background-secondary;
+          }
 
           select {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
             display: block;
             width: 100%;
             max-width: 100%;
-            padding: 4px;
+            height: 30px;
+            text-align: right;
+            padding: 0 5px 0 10px;
             margin: 0;
             line-height: 30px;
             font-weight: bold;
-            border: 0;
-            border-radius: 12px;
-
-            color: black;
-            background-color: $style-primary;
+            font-size: 12px;
+            text-overflow: ellipsis;
+            border: 1px solid transparent;
+            border-radius: 5px;
+            color: white;
+            background-color: $background-tertiary;
+            font-weight: lighter;
+            cursor: pointer;
 
             option {
               font-weight: normal;

client/src/components/video.vue

@@ -29,6 +29,12 @@
       <ul v-if="!fullscreen" class="video-menu">
         <li><i @click.stop.prevent="requestFullscreen" class="fas fa-expand"></i></li>
         <li v-if="admin"><i @click.stop.prevent="onResolution" class="fas fa-desktop"></i></li>
+        <li class="request-control">
+          <i
+            :class="[hosted && !hosting ? 'disabled' : '', !hosted && !hosting ? 'faded' : '', 'fas', 'fa-keyboard']"
+            @click.stop.prevent="toggleControl"
+          />
+        </li>
       </ul>
       <neko-resolution ref="resolution" />
     </div>
@@ -64,6 +70,24 @@
             text-align: center;
             color: rgba($color: #fff, $alpha: 0.6);
             cursor: pointer;
+
+            &.faded {
+              color: rgba($color: $text-normal, $alpha: 0.4);
+            }
+
+            &.disabled {
+              color: rgba($color: $style-error, $alpha: 0.4);
+            }
+          }
+
+          &.request-control {
+            display: none;
+          }
+
+          @media (max-width: 768px) {
+            &.request-control {
+              display: inline-block;
+            }
           }
         }
       }
@@ -179,6 +203,10 @@
       return this.$accessor.remote.hosting
     }
 
+    get hosted() {
+      return this.$accessor.remote.hosted
+    }
+
     get volume() {
       return this.$accessor.video.volume
     }
@@ -328,7 +356,7 @@
         this.$accessor.video.setPlayable(false)
       })
 
-      this._video.addEventListener('error', event => {
+      this._video.addEventListener('error', (event) => {
         this.$log.error(event.error)
         this.$accessor.video.setPlayable(false)
       })
@@ -374,7 +402,7 @@
           .then(() => {
             this.onResise()
           })
-          .catch(err => this.$log.error)
+          .catch((err) => this.$log.error)
       } catch (err) {
         this.$log.error(err)
       }
@@ -400,6 +428,14 @@
       }
     }
 
+    toggleControl() {
+      if (!this.playable) {
+        return
+      }
+
+      this.$accessor.remote.toggle()
+    }
+
     requestFullscreen() {
       this._player.requestFullscreen()
       this.onResise()
@@ -413,7 +449,7 @@
       if (this.hosting && navigator.clipboard && typeof navigator.clipboard.readText === 'function') {
         navigator.clipboard
           .readText()
-          .then(text => {
+          .then((text) => {
             if (this.clipboard !== text) {
               this.$accessor.remote.setClipboard(text)
               this.$accessor.remote.sendClipboard(text)

client/src/locale/en-us.ts

@@ -60,7 +60,7 @@ export const setting = {
   autoplay: 'Autoplay Video',
   ignore_emotes: 'Ignore Emotes',
   chat_sound: 'Play Chat Sound',
-  keyboard_layout: 'Change Keyboard Layout',
+  keyboard_layout: 'Keyboard Layout',
 }
 
 export const connection = {