From 54811f2800f19a65c45df0ab36e15a62795b980c Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Fri, 16 Jun 2023 17:05:21 +0200
Subject: [PATCH] Simplify buttons to view content on different platform

---
 src/components/ChannelPage.vue                |  6 +++---
 src/components/PlaylistPage.vue               |  6 +++---
 ...chOnOdyseeButton.vue => WatchOnButton.vue} | 11 +++++++---
 src/components/WatchOnYouTubeButton.vue       | 21 -------------------
 src/components/WatchVideo.vue                 | 10 ++++-----
 5 files changed, 18 insertions(+), 36 deletions(-)
 rename src/components/{WatchOnOdyseeButton.vue => WatchOnButton.vue} (52%)
 delete mode 100644 src/components/WatchOnYouTubeButton.vue

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 2f93b519..062bb983 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -44,7 +44,7 @@
 
         <CollapsableText :text="channel.description" />
 
-        <WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" />
+        <WatchOnButton :link="`https://youtube.com/channel/${this.channel.id}`" />
 
         <div class="flex my-2 mx-1">
             <button
@@ -76,7 +76,7 @@
 <script>
 import ErrorHandler from "./ErrorHandler.vue";
 import ContentItem from "./ContentItem.vue";
-import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
+import WatchOnButton from "./WatchOnButton.vue";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import CollapsableText from "./CollapsableText.vue";
 
@@ -84,7 +84,7 @@ export default {
     components: {
         ErrorHandler,
         ContentItem,
-        WatchOnYouTubeButton,
+        WatchOnButton,
         LoadingIndicatorPage,
         CollapsableText,
     },
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index b2ea2361..212a22ef 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -28,7 +28,7 @@
                 <a class="btn mr-1" :href="getRssUrl">
                     <font-awesome-icon icon="rss" />
                 </a>
-                <WatchOnYouTubeButton :link="`https://www.youtube.com/playlist?list=${this.$route.query.list}`" />
+                <WatchOnButton :link="`https://www.youtube.com/playlist?list=${this.$route.query.list}`" />
             </div>
         </div>
 
@@ -55,13 +55,13 @@ import ErrorHandler from "./ErrorHandler.vue";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import CollapsableText from "./CollapsableText.vue";
 import VideoItem from "./VideoItem.vue";
-import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
+import WatchOnButton from "./WatchOnButton.vue";
 
 export default {
     components: {
         ErrorHandler,
         VideoItem,
-        WatchOnYouTubeButton,
+        WatchOnButton,
         LoadingIndicatorPage,
         CollapsableText,
     },
diff --git a/src/components/WatchOnOdyseeButton.vue b/src/components/WatchOnButton.vue
similarity index 52%
rename from src/components/WatchOnOdyseeButton.vue
rename to src/components/WatchOnButton.vue
index c381f5a8..e97f33f4 100644
--- a/src/components/WatchOnOdyseeButton.vue
+++ b/src/components/WatchOnButton.vue
@@ -2,6 +2,11 @@
 export default {
     props: {
         link: String,
+        platform: {
+            type: String,
+            required: false,
+            default: "YouTube",
+        },
     },
 };
 </script>
@@ -10,12 +15,12 @@ export default {
     <template v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)">
         <!-- For large screens -->
         <a :href="link" class="btn lt-lg:hidden flex items-center">
-            <i18n-t keypath="player.watch_on" tag="strong">Odysee</i18n-t>
-            <font-awesome-icon class="mx-1.5" :icon="['fab', 'odysee']" />
+            <i18n-t keypath="player.watch_on" tag="strong">{{ platform }}</i18n-t>
+            <font-awesome-icon class="mx-1.5" :icon="['fab', platform.toLowerCase()]" />
         </a>
         <!-- For small screens -->
         <a :href="link" class="btn lg:hidden flex items-center">
-            <font-awesome-icon class="mx-1.5" :icon="['fab', 'odysee']" />
+            <font-awesome-icon class="mx-1.5" :icon="['fab', platform.toLowerCase()]" />
         </a>
     </template>
 </template>
diff --git a/src/components/WatchOnYouTubeButton.vue b/src/components/WatchOnYouTubeButton.vue
deleted file mode 100644
index ae54984b..00000000
--- a/src/components/WatchOnYouTubeButton.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script>
-export default {
-    props: {
-        link: String,
-    },
-};
-</script>
-
-<template>
-    <template v-if="this.getPreferenceBoolean('showWatchOnYouTube', false)">
-        <!-- For large screens -->
-        <a :href="link" class="btn lt-lg:hidden flex items-center">
-            <i18n-t keypath="player.watch_on" tag="strong">YouTube</i18n-t>
-            <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-        </a>
-        <!-- For small screens -->
-        <a :href="link" class="btn lg:hidden flex items-center">
-            <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-        </a>
-    </template>
-</template>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index a1351182..52fc42f3 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -119,9 +119,9 @@
                             <font-awesome-icon class="mx-1.5" icon="fa-share" />
                         </button>
                         <!-- YouTube -->
-                        <WatchOnYouTubeButton :link="`https://youtu.be/${getVideoId()}`" />
+                        <WatchOnButton :link="`https://youtu.be/${getVideoId()}`" />
                         <!-- Odysee -->
-                        <WatchOnOdyseeButton :link="`https://odysee.com/${video.lbryId}`" />
+                        <WatchOnButton :link="`https://odysee.com/${video.lbryId}`" platform="Odysee" />
                         <!-- listen / watch toggle -->
                         <router-link
                             :to="toggleListenUrl"
@@ -231,11 +231,10 @@ import ChaptersBar from "./ChaptersBar.vue";
 import PlaylistAddModal from "./PlaylistAddModal.vue";
 import ShareModal from "./ShareModal.vue";
 import PlaylistVideos from "./PlaylistVideos.vue";
-import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
+import WatchOnButton from "./WatchOnButton.vue";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import ToastComponent from "./ToastComponent.vue";
 import { parseTimeParam } from "@/utils/Misc";
-import WatchOnOdyseeButton from "./WatchOnOdyseeButton.vue";
 
 export default {
     name: "App",
@@ -248,8 +247,7 @@ export default {
         PlaylistAddModal,
         ShareModal,
         PlaylistVideos,
-        WatchOnYouTubeButton,
-        WatchOnOdyseeButton,
+        WatchOnButton,
         LoadingIndicatorPage,
         ToastComponent,
     },