feat: adds the option to toggle listen mode when watching a video (#508)

* feat: adds the option to toggle listen mode when watching a video

* feat: improve a11y

* Change some logic.

Co-authored-by: FireMaskterK <20838718+FireMasterK@users.noreply.github.com>
This commit is contained in:
Filipe Medeiros 2021-10-07 23:43:48 +01:00 committed by GitHub
parent 6dee63ce5b
commit cb48f3574d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -53,6 +53,14 @@
> >
<b>{{ $t("player.watch_on") }} LBRY</b> <b>{{ $t("player.watch_on") }} LBRY</b>
</a> </a>
<router-link
:to="toggleListenUrl"
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
class="uk-margin-small-left uk-button uk-button-small"
>
<font-awesome-icon icon="headphones"></font-awesome-icon>
</router-link>
</div> </div>
<div class="uk-flex uk-flex-middle uk-margin-small-top"> <div class="uk-flex uk-flex-middle uk-margin-small-top">
@ -122,7 +130,11 @@
</div> </div>
<div class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first" v-if="video"> <div class="uk-width-1-5@xl uk-width-1-4@s uk-width-1 uk-flex-last@s uk-flex-first" v-if="video">
<a class="uk-button uk-button-small uk-margin-small-bottom uk-hidden@s" style="background: #222" @click="showRecs = !showRecs"> <a
class="uk-button uk-button-small uk-margin-small-bottom uk-hidden@s"
style="background: #222"
@click="showRecs = !showRecs"
>
{{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }} {{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
</a> </a>
<div <div
@ -134,7 +146,7 @@
> >
<VideoItem :video="related" height="94" width="168" /> <VideoItem :video="related" height="94" width="168" />
</div> </div>
<hr class="uk-hidden@s"/> <hr class="uk-hidden@s" />
</div> </div>
</div> </div>
</div> </div>
@ -306,6 +318,11 @@ export default {
}, },
}, },
computed: { computed: {
toggleListenUrl(_this) {
const url = new URL(window.location.href);
url.searchParams.set("listen", _this.getPreferenceBoolean("listen", false) ? "0" : "1");
return url.href;
},
isEmbed(_this) { isEmbed(_this) {
return String(_this.$route.path).indexOf("/embed/") == 0; return String(_this.$route.path).indexOf("/embed/") == 0;
}, },