From 1d0186aed2007a316283dd0ebfe9ce86a6ef496e Mon Sep 17 00:00:00 2001 From: alectrocute <35377827+alectrocute@users.noreply.github.com> Date: Sun, 12 Jul 2020 23:03:51 -0700 Subject: [PATCH 01/10] implements control shortcut on video overlay, re-styles the select dropdown --- client/src/components/settings.vue | 31 +++++++++++++++++++---------- client/src/components/video.vue | 32 +++++++++++++++++++++++++++--- 2 files changed, 49 insertions(+), 14 deletions(-) diff --git a/client/src/components/settings.vue b/client/src/components/settings.vue index b5ae941..57692c6 100644 --- a/client/src/components/settings.vue +++ b/client/src/components/settings.vue @@ -39,11 +39,7 @@ {{ $t('setting.keyboard_layout') }} @@ -198,20 +194,33 @@ .select { max-width: 120px; + text-align: right; + + select:hover { + border: 1px solid $background-secondary; + } select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; display: block; width: 100%; max-width: 100%; - padding: 4px; + height: 30px; + text-align: right; + padding: 0 5px 0 10px; margin: 0; line-height: 30px; font-weight: bold; - border: 0; - border-radius: 12px; - - color: black; - background-color: $style-primary; + font-size: 12px; + text-overflow: ellipsis; + border: 1px solid transparent; + border-radius: 5px; + color: white; + background-color: $background-tertiary; + font-weight: lighter; + cursor: pointer; option { font-weight: normal; diff --git a/client/src/components/video.vue b/client/src/components/video.vue index 6952b42..4a26fae 100644 --- a/client/src/components/video.vue +++ b/client/src/components/video.vue @@ -29,6 +29,12 @@ @@ -64,6 +70,14 @@ text-align: center; color: rgba($color: #fff, $alpha: 0.6); cursor: pointer; + + &.faded { + color: rgba($color: $text-normal, $alpha: 0.4); + } + + &.disabled { + color: rgba($color: $style-error, $alpha: 0.4); + } } } } @@ -179,6 +193,10 @@ return this.$accessor.remote.hosting } + get hosted() { + return this.$accessor.remote.hosted + } + get volume() { return this.$accessor.video.volume } @@ -328,7 +346,7 @@ this.$accessor.video.setPlayable(false) }) - this._video.addEventListener('error', event => { + this._video.addEventListener('error', (event) => { this.$log.error(event.error) this.$accessor.video.setPlayable(false) }) @@ -374,7 +392,7 @@ .then(() => { this.onResise() }) - .catch(err => this.$log.error) + .catch((err) => this.$log.error) } catch (err) { this.$log.error(err) } @@ -400,6 +418,14 @@ } } + toggleControl() { + if (!this.playable) { + return + } + + this.$accessor.remote.toggle() + } + requestFullscreen() { this._player.requestFullscreen() this.onResise() @@ -413,7 +439,7 @@ if (this.hosting && navigator.clipboard && typeof navigator.clipboard.readText === 'function') { navigator.clipboard .readText() - .then(text => { + .then((text) => { if (this.clipboard !== text) { this.$accessor.remote.setClipboard(text) this.$accessor.remote.sendClipboard(text) From 3953f3f2c41607479db48aefc63d454058baaabf Mon Sep 17 00:00:00 2001 From: alectrocute <35377827+alectrocute@users.noreply.github.com> Date: Sun, 12 Jul 2020 23:10:18 -0700 Subject: [PATCH 02/10] fixes verbiage of keyboard layout, removes verb Change --- client/src/locale/en-us.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/locale/en-us.ts b/client/src/locale/en-us.ts index 2cb4932..cfbd8a3 100644 --- a/client/src/locale/en-us.ts +++ b/client/src/locale/en-us.ts @@ -60,7 +60,7 @@ export const setting = { autoplay: 'Autoplay Video', ignore_emotes: 'Ignore Emotes', chat_sound: 'Play Chat Sound', - keyboard_layout: 'Change Keyboard Layout', + keyboard_layout: 'Keyboard Layout', } export const connection = { From f16f550204130c2b15edd8d80c339f6f56e9ed4f Mon Sep 17 00:00:00 2001 From: alectrocute <35377827+alectrocute@users.noreply.github.com> Date: Sun, 12 Jul 2020 23:18:24 -0700 Subject: [PATCH 03/10] only show shortcut button when screen width is < 768px --- client/src/components/video.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/client/src/components/video.vue b/client/src/components/video.vue index 4a26fae..17338cd 100644 --- a/client/src/components/video.vue +++ b/client/src/components/video.vue @@ -29,7 +29,7 @@