diff --git a/README.md b/README.md index 4970e24..8a24bbb 100644 --- a/README.md +++ b/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=` 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. ### Bugs - Fixed minor gst pipeline bug. diff --git a/client/src/app.vue b/client/src/app.vue index 911708b..d555544 100644 --- a/client/src/app.vue +++ b/client/src/app.vue @@ -9,7 +9,7 @@
- +
@@ -18,7 +18,7 @@
- +
@@ -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 } diff --git a/client/src/components/controls.vue b/client/src/components/controls.vue index 085b04f..d7296c7 100644 --- a/client/src/components/controls.vue +++ b/client/src/components/controls.vue @@ -3,6 +3,7 @@
  • + .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 @@