From 113e643c557122f832528782e8ab18ef3e14b57b Mon Sep 17 00:00:00 2001
From: "Max.-F. Helm" <72731320+Max-F-Helm@users.noreply.github.com>
Date: Tue, 19 Mar 2024 22:20:02 +0100
Subject: [PATCH] feat: respect listen mode in recommended videos (#3430)

---
 src/components/PlaylistVideos.vue |  6 ++++++
 src/components/VideoItem.vue      | 10 ++++++----
 src/components/WatchVideo.vue     |  2 ++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/PlaylistVideos.vue b/src/components/PlaylistVideos.vue
index 725c48b3be..67da19f108 100644
--- a/src/components/PlaylistVideos.vue
+++ b/src/components/PlaylistVideos.vue
@@ -6,6 +6,7 @@
             :item="related"
             :index="index"
             :playlist-id="playlistId"
+            :prefer-listen="preferListen"
             height="94"
             width="168"
         />
@@ -15,6 +16,7 @@
 <script>
 import { nextTick } from "vue";
 import VideoItem from "./VideoItem.vue";
+
 export default {
     components: { VideoItem },
     props: {
@@ -30,6 +32,10 @@ export default {
             type: Number,
             required: true,
         },
+        preferListen: {
+            type: Boolean,
+            default: false,
+        },
     },
     watch: {
         playlist: {
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 4290156879..b782f4c895 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -8,6 +8,7 @@
                     v: item.url.substr(-11),
                     ...(playlistId && { list: playlistId }),
                     ...(index >= 0 && { index: index + 1 }),
+                    ...(preferListen && { listen: 1 }),
                 },
             }"
         >
@@ -99,13 +100,13 @@
                             v: item.url.substr(-11),
                             ...(playlistId && { list: playlistId }),
                             ...(index >= 0 && { index: index + 1 }),
-                            listen: '1',
+                            ...(!preferListen && { listen: 1 }),
                         },
                     }"
-                    :aria-label="'Listen to ' + title"
-                    :title="'Listen to ' + title"
+                    :aria-label="preferListen ? title : 'Listen to ' + title"
+                    :title="preferListen ? title : 'Listen to ' + title"
                 >
-                    <i class="i-fa6-solid:headphones" />
+                    <font-awesome-icon :icon="preferListen ? 'i-fa6-solid:tv' : 'i-fa6-solid:headphones'" />
                 </router-link>
                 <button :title="$t('actions.add_to_playlist')" @click="showPlaylistModal = !showPlaylistModal">
                     <i class="i-fa6-solid:circle-plus" />
@@ -167,6 +168,7 @@ export default {
         hideChannel: { type: Boolean, default: false },
         index: { type: Number, default: -1 },
         playlistId: { type: String, default: null },
+        preferListen: { type: Boolean, default: false },
         admin: { type: Boolean, default: false },
     },
     emits: ["remove"],
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 1578beacc6..09d34cdfd5 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -253,6 +253,7 @@
                     :playlist-id="playlistId"
                     :playlist="playlist"
                     :selected-index="index"
+                    :prefer-listen="isListening"
                 />
                 <a
                     v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
@@ -265,6 +266,7 @@
                         v-for="related in video.relatedStreams"
                         :key="related.url"
                         :item="related"
+                        :prefer-listen="isListening"
                         class="mb-4"
                         height="94"
                         width="168"