lock controls
This commit is contained in:
Craig
parent
605cb2778d
commit
d29a64ac86
@ -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"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
class="switch"
|
||||
v-tooltip="{
|
||||
content: hosting ? (locked ? 'Unlock Controls' : 'Lock Controls') : '',
|
||||
placement: 'top',
|
||||
offset: 5,
|
||||
boundariesElement: 'body',
|
||||
delay: { show: 300, hide: 100 },
|
||||
}"
|
||||
>
|
||||
<input type="checkbox" v-model="locked" :disabled="!hosting" />
|
||||
<span />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<i
|
||||
:class="[{ disabled: !playable }, playing ? 'fa-pause-circle' : 'fa-play-circle', 'fas', 'play']"
|
||||
@ -43,7 +65,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
i {
|
||||
padding: 0 10px;
|
||||
padding: 0 5px;
|
||||
|
||||
&.faded {
|
||||
color: rgba($color: $text-normal, $alpha: 0.4);
|
||||
@ -66,7 +88,7 @@
|
||||
input[type='range'] {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
width: 200px;
|
||||
width: 150px;
|
||||
height: 20px;
|
||||
-webkit-appearance: none;
|
||||
|
||||
@ -105,6 +127,69 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin: 0 5px;
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
|
||||
input[type='checkbox'] {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $background-secondary;
|
||||
transition: 0.2s;
|
||||
border-radius: 34px;
|
||||
|
||||
&:before {
|
||||
color: $background-tertiary;
|
||||
font-weight: 900;
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: '\f3c1';
|
||||
font-size: 8px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: 0.3s;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
&:checked + span {
|
||||
background-color: $style-primary;
|
||||
|
||||
&:before {
|
||||
content: '\f023';
|
||||
transform: translateX(18px);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled + span {
|
||||
&:before {
|
||||
content: '';
|
||||
background-color: rgba($color: $text-normal, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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
|
||||
|
||||
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $background-tertiary;
|
||||
transition: 0.4s;
|
||||
transition: 0.2s;
|
||||
border-radius: 34px;
|
||||
|
||||
&:before {
|
||||
|
||||
@ -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 })
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user