diff --git a/client/src/components/settings.vue b/client/src/components/settings.vue index b5ae941d..57692c6a 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 6952b42c..17338cd0 100644 --- a/client/src/components/video.vue +++ b/client/src/components/video.vue @@ -29,6 +29,12 @@ @@ -64,6 +70,24 @@ 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); + } + } + + &.request-control { + display: none; + } + + @media (max-width: 768px) { + &.request-control { + display: inline-block; + } } } } @@ -179,6 +203,10 @@ return this.$accessor.remote.hosting } + get hosted() { + return this.$accessor.remote.hosted + } + get volume() { return this.$accessor.video.volume } @@ -328,7 +356,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 +402,7 @@ .then(() => { this.onResise() }) - .catch(err => this.$log.error) + .catch((err) => this.$log.error) } catch (err) { this.$log.error(err) } @@ -400,6 +428,14 @@ } } + toggleControl() { + if (!this.playable) { + return + } + + this.$accessor.remote.toggle() + } + requestFullscreen() { this._player.requestFullscreen() this.onResise() @@ -413,7 +449,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) diff --git a/client/src/locale/en-us.ts b/client/src/locale/en-us.ts index 2cb49328..cfbd8a3d 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 = {