From b31516d1cb28a418d76190123a0e909e555c824b Mon Sep 17 00:00:00 2001
From: Nyte <39193783+codenyte@users.noreply.github.com>
Date: Thu, 15 Jun 2023 15:55:47 +0200
Subject: [PATCH] Put "Watch on Odysee" into a separate component

---
 src/components/WatchOnOdyseeButton.vue | 21 +++++++++++++++++++++
 src/components/WatchVideo.vue          | 20 +++-----------------
 2 files changed, 24 insertions(+), 17 deletions(-)
 create mode 100644 src/components/WatchOnOdyseeButton.vue

diff --git a/src/components/WatchOnOdyseeButton.vue b/src/components/WatchOnOdyseeButton.vue
new file mode 100644
index 00000000..c381f5a8
--- /dev/null
+++ b/src/components/WatchOnOdyseeButton.vue
@@ -0,0 +1,21 @@
+<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">Odysee</i18n-t>
+            <font-awesome-icon class="mx-1.5" :icon="['fab', 'odysee']" />
+        </a>
+        <!-- For small screens -->
+        <a :href="link" class="btn lg:hidden flex items-center">
+            <font-awesome-icon class="mx-1.5" :icon="['fab', 'odysee']" />
+        </a>
+    </template>
+</template>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 88c67aec..a1351182 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -121,23 +121,7 @@
                         <!-- YouTube -->
                         <WatchOnYouTubeButton :link="`https://youtu.be/${getVideoId()}`" />
                         <!-- Odysee -->
-                        <!-- For large screens -->
-                        <a
-                            v-if="video.lbryId"
-                            :href="'https://odysee.com/' + video.lbryId"
-                            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']" />
-                        </a>
-                        <!-- For small screens -->
-                        <a
-                            v-if="video.lbryId"
-                            :href="'https://odysee.com/' + video.lbryId"
-                            class="btn lg:hidden flex items-center"
-                        >
-                            <font-awesome-icon class="mx-1.5" :icon="['fab', 'odysee']" />
-                        </a>
+                        <WatchOnOdyseeButton :link="`https://odysee.com/${video.lbryId}`" />
                         <!-- listen / watch toggle -->
                         <router-link
                             :to="toggleListenUrl"
@@ -251,6 +235,7 @@ import WatchOnYouTubeButton from "./WatchOnYouTubeButton.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",
@@ -264,6 +249,7 @@ export default {
         ShareModal,
         PlaylistVideos,
         WatchOnYouTubeButton,
+        WatchOnOdyseeButton,
         LoadingIndicatorPage,
         ToastComponent,
     },