From cb48f3574ddf611dc3bdbc706a2734f49eac12eb Mon Sep 17 00:00:00 2001
From: Filipe Medeiros <filipesilvamedeiros@gmail.com>
Date: Thu, 7 Oct 2021 23:43:48 +0100
Subject: [PATCH] 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>
---
 src/components/WatchVideo.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 07e695a6..fabfd3c1 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -53,6 +53,14 @@
                 >
                     <b>{{ $t("player.watch_on") }} LBRY</b>
                 </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 class="uk-flex uk-flex-middle uk-margin-small-top">
@@ -122,7 +130,11 @@
             </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">
-                <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") }}
                 </a>
                 <div
@@ -134,7 +146,7 @@
                 >
                     <VideoItem :video="related" height="94" width="168" />
                 </div>
-                <hr class="uk-hidden@s"/>
+                <hr class="uk-hidden@s" />
             </div>
         </div>
     </div>
@@ -306,6 +318,11 @@ export default {
         },
     },
     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) {
             return String(_this.$route.path).indexOf("/embed/") == 0;
         },