From d29a64ac86bb52692eb1b71c178a4a6277fa89ec Mon Sep 17 00:00:00 2001 From: Craig Date: Tue, 11 Feb 2020 23:51:57 +0000 Subject: [PATCH] lock controls --- client/src/components/controls.vue | 97 +++++++++++++++++++++++++++++- client/src/components/header.vue | 4 +- client/src/components/settings.vue | 2 +- client/src/components/video.vue | 24 ++++---- client/src/store/index.ts | 17 ++++++ client/src/store/remote.ts | 22 ++----- 6 files changed, 134 insertions(+), 32 deletions(-) diff --git a/client/src/components/controls.vue b/client/src/components/controls.vue index ee423afa..0797d976 100644 --- a/client/src/components/controls.vue +++ b/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" /> +
  • + +
  • @@ -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 diff --git a/client/src/components/header.vue b/client/src/components/header.vue index a92f7300..36be9399 100644 --- a/client/src/components/header.vue +++ b/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() } } } diff --git a/client/src/components/settings.vue b/client/src/components/settings.vue index f684bf10..7a9ee151 100644 --- a/client/src/components/settings.vue +++ b/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 { diff --git a/client/src/components/video.vue b/client/src/components/video.vue index 93a80feb..65a847a0 100644 --- a/client/src/components/video.vue +++ b/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 }) diff --git a/client/src/store/index.ts b/client/src/store/index.ts index b9f6ac7e..386bca37 100644 --- a/client/src/store/index.ts +++ b/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) diff --git a/client/src/store/remote.ts b/client/src/store/remote.ts index 724367c0..965af5cb 100644 --- a/client/src/store/remote.ts +++ b/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) - }, }, )