Archived
2
0

shake keyboard icon.

This commit is contained in:
m1k1o 2021-04-04 16:57:23 +02:00
parent a7ab37a4f5
commit abd1a76965
4 changed files with 62 additions and 3 deletions

View File

@ -40,6 +40,7 @@ For n.eko room management software visit https://github.com/m1k1o/neko-rooms.
- Added simple language picker. - Added simple language picker.
- Added `?usr=<display-name>` that will prefill username. This allows creating auto-join links. - 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. - 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 ### Bugs
- Fixed minor gst pipeline bug. - Fixed minor gst pipeline bug.

View File

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

View File

@ -3,6 +3,7 @@
<li v-if="!isTouch"> <li v-if="!isTouch">
<i <i
:class="[ :class="[
shakeKbd ? 'shake' : '',
hosted && !hosting ? 'disabled' : '', hosted && !hosting ? 'disabled' : '',
!hosted && !hosting ? 'faded' : '', !hosted && !hosting ? 'faded' : '',
'fas', 'fas',
@ -53,6 +54,46 @@
</template> </template>
<style lang="scss" scoped> <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 { ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -195,10 +236,12 @@
</style> </style>
<script lang="ts"> <script lang="ts">
import { Vue, Component } from 'vue-property-decorator' import { Vue, Component, Prop } from 'vue-property-decorator'
@Component({ name: 'neko-controls' }) @Component({ name: 'neko-controls' })
export default class extends Vue { export default class extends Vue {
@Prop(Boolean) readonly shakeKbd = false
get isTouch() { get isTouch() {
return ( return (
(typeof navigator.maxTouchPoints !== 'undefined' ? navigator.maxTouchPoints < 0 : false) || (typeof navigator.maxTouchPoints !== 'undefined' ? navigator.maxTouchPoints < 0 : false) ||

View File

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