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 = {