feat: respect listen mode in recommended videos (#3430)

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

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"],

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"