Merge branch 'dev' into add-turn-server

README.md

@@ -40,6 +40,7 @@ For n.eko room management software visit https://github.com/m1k1o/neko-rooms.
 - Added simple language picker.
 - Added `?usr=<display-name>` that will prefill username. This allows creating auto-join links.
 - Added `?cast=1` that will hide all control and show only video.
+- Shake keyboard icon if someone attempted to control when is nobody hosting.
 - Support for password protected `NEKO_ICESERVERS` (by @mbattista).
 
 ### Bugs
@@ -67,6 +68,7 @@ For n.eko room management software visit https://github.com/m1k1o/neko-rooms.
 - Abiltiy to include neko as a component in another Vue.Js project (by @gbrian).
 - Added HEALTHCHECK to Dockerfile.
 - Arguments in broadcast pipeline are optional, not positional and can be repeated `{url} {device} {display}`.
+- Chat messages are dense, when repeated, they are joined together.
 
 ### Roadmap & TODOs
 - Catch errors from gst pipeline, tell user if broadcast failed.

client/package.json

@@ -25,7 +25,6 @@
     "axios": "^0.21.1",
     "date-fns": "^2.16.1",
     "emoji-datasource": "^6.0.1",
-    "emojilib": "^3.0.1",
     "eventemitter3": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",
     "simple-markdown": "^0.7.2",
@@ -56,6 +55,7 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "core-js": "^3.9.1",
+    "emojilib": "^2.4.0",
     "eslint": "^6.8.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.8.0",

client/src/app.vue

@@ -9,7 +9,7 @@
           <neko-header />
         </div>
         <div class="video-container">
-          <neko-video ref="video" :hideControls="hideControls" />
+          <neko-video ref="video" :hideControls="hideControls" @control-attempt="controlAttempt" />
         </div>
         <div v-if="!hideControls" class="room-container">
           <neko-members />
@@ -18,7 +18,7 @@
               <neko-menu />
             </div>
             <div class="controls">
-              <neko-controls />
+              <neko-controls :shakeKbd="shakeKbd" />
             </div>
             <div class="emotes">
               <neko-emotes />
@@ -174,6 +174,8 @@
   export default class extends Vue {
     @Ref('video') video!: Video
 
+    shakeKbd = false
+
     get hideControls() {
       return !!new URL(location.href).searchParams.get('cast')
     }
@@ -184,6 +186,13 @@
       this.$accessor.settings.setSound(false)
     }
 
+    controlAttempt() {
+      if (this.shakeKbd || this.$accessor.remote.hosted) return
+
+      this.shakeKbd = true
+      setTimeout(() => (this.shakeKbd = false), 5000)
+    }
+
     get about() {
       return this.$accessor.client.about
     }

client/src/components/chat.vue

@@ -2,7 +2,14 @@
   <div class="chat">
     <ul class="chat-history" ref="history" @click="onClick">
       <template v-for="(message, index) in history">
-        <li :key="index" class="message" v-if="message.type === 'text'">
+        <li
+          :key="index"
+          class="message"
+          v-if="message.type === 'text'"
+          :class="{
+            bulk: index > 0 && history[index - 1].id == message.id && history[index - 1].type === 'text',
+          }"
+        >
           <div class="author" @contextmenu.stop.prevent="onContext($event, { member: member(message.id) })">
             <neko-avatar class="avatar" :seed="member(message.id).displayname" :size="40" />
           </div>
@@ -94,6 +101,7 @@
         word-wrap: break-word;
 
         &.message {
+          padding-top: 15px;
           font-size: 16px;
 
           .author {
@@ -104,7 +112,7 @@
             height: 40px;
             border-radius: 50%;
             background: $style-primary;
-            margin: 0px 10px 10px 0px;
+            margin-right: 10px;
 
             .avatar {
               width: 100%;
@@ -219,6 +227,19 @@
               }
             }
           }
+
+          &.bulk {
+            padding-top: 0px;
+
+            .author {
+              visibility: hidden;
+              height: 0;
+            }
+
+            .content-head {
+              display: none;
+            }
+          }
         }
 
         &.event {

client/src/components/controls.vue

@@ -3,6 +3,7 @@
     <li v-if="!isTouch">
       <i
         :class="[
+          shakeKbd ? 'shake' : '',
           hosted && !hosting ? 'disabled' : '',
           !hosted && !hosting ? 'faded' : '',
           'fas',
@@ -53,6 +54,46 @@
 </template>
 
 <style lang="scss" scoped>
+  .shake {
+    animation: shake 1.25s cubic-bezier(0, 0, 0, 1);
+  }
+
+  @keyframes shake {
+    0% {
+      transform: scale(1) translate(0px, 0) rotate(0);
+    }
+    10% {
+      transform: scale(1.25) translate(-2px, -2px) rotate(-20deg);
+    }
+    20% {
+      transform: scale(1.5) translate(4px, -4px) rotate(20deg);
+    }
+    30% {
+      transform: scale(1.75) translate(-4px, -6px) rotate(-20deg);
+    }
+    40% {
+      transform: scale(2) translate(6px, -8px) rotate(20deg);
+    }
+    50% {
+      transform: scale(2.25) translate(-6px, -10px) rotate(-20deg);
+    }
+    60% {
+      transform: scale(2) translate(6px, -8px) rotate(20deg);
+    }
+    70% {
+      transform: scale(1.75) translate(-4px, -6px) rotate(-20deg);
+    }
+    80% {
+      transform: scale(1.5) translate(4px, -4px) rotate(20deg);
+    }
+    90% {
+      transform: scale(1.25) translate(-2px, -2px) rotate(-20deg);
+    }
+    100% {
+      transform: scale(1) translate(0px, 0) rotate(0);
+    }
+  }
+
   ul {
     display: flex;
     flex-direction: row;
@@ -195,10 +236,12 @@
 </style>
 
 <script lang="ts">
-  import { Vue, Component } from 'vue-property-decorator'
+  import { Vue, Component, Prop } from 'vue-property-decorator'
 
   @Component({ name: 'neko-controls' })
   export default class extends Vue {
+    @Prop(Boolean) readonly shakeKbd = false
+
     get isTouch() {
       return (
         (typeof navigator.maxTouchPoints !== 'undefined' ? navigator.maxTouchPoints < 0 : false) ||

client/src/components/header.vue

@@ -15,8 +15,8 @@
                 ? $t('room.unlock')
                 : $t('room.lock')
               : locked
-              ? $t('room.unlocked')
-              : $t('room.locked'),
+              ? $t('room.locked')
+              : $t('room.unlocked'),
             placement: 'bottom',
             offset: 5,
             boundariesElement: 'body',

client/src/components/video.vue

@@ -552,9 +552,14 @@
     }
 
     onMouseDown(e: MouseEvent) {
+      if (!this.hosting) {
+        this.$emit('control-attempt', e)
+      }
+
       if (!this.hosting || this.locked) {
         return
       }
+
       this.onMousePos(e)
       this.$client.sendData('mousedown', { key: e.button + 1 })
     }
@@ -563,6 +568,7 @@
       if (!this.hosting || this.locked) {
         return
       }
+
       this.onMousePos(e)
       this.$client.sendData('mouseup', { key: e.button + 1 })
     }

client/tools/emoji.ts

@@ -50,7 +50,7 @@ interface Emoji {
   category: string
 }
 
-const SHEET_COLUMNS = 57
+const SHEET_COLUMNS = 58
 const MULTIPLY = 100 / (SHEET_COLUMNS - 1)
 
 const css: string[] = []