Fix buttons UI under video player, add icon for Odysee (#2551)

Co-authored-by: Bnyro <bnyro@tutanota.com>

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,
     },

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,
     },

src/components/WatchOnButton.vue

@@ -0,0 +1,26 @@
+<script>
+export default {
+    props: {
+        link: String,
+        platform: {
+            type: String,
+            required: false,
+            default: "YouTube",
+        },
+    },
+};
+</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">{{ 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', platform.toLowerCase()]" />
+        </a>
+    </template>
+</template>

src/components/WatchOnYouTubeButton.vue

@@ -1,22 +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">
-            <i18n-t keypath="player.watch_on" tag="strong">
-                <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-            </i18n-t>
-        </a>
-        <!-- For small screens -->
-        <a :href="link" class="btn lg:hidden">
-            <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-        </a>
-    </template>
-</template>

src/components/WatchVideo.vue

@@ -113,20 +113,15 @@
                         >
                             <font-awesome-icon class="mx-1.5" icon="rss" />
                         </a>
-                        <WatchOnYouTubeButton :link="`https://youtu.be/${getVideoId()}`" />
                         <!-- Share Dialog -->
                         <button class="btn flex items-center" @click="showShareModal = !showShareModal">
                             <i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
                             <font-awesome-icon class="mx-1.5" icon="fa-share" />
                         </button>
-                        <!-- LBRY -->
-                        <a
-                            v-if="video.lbryId"
-                            :href="'https://odysee.com/' + video.lbryId"
-                            class="btn flex items-center"
-                        >
-                            <i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t>
-                        </a>
+                        <!-- YouTube -->
+                        <WatchOnButton :link="`https://youtu.be/${getVideoId()}`" />
+                        <!-- Odysee -->
+                        <WatchOnButton :link="`https://odysee.com/${video.lbryId}`" platform="Odysee" />
                         <!-- listen / watch toggle -->
                         <router-link
                             :to="toggleListenUrl"
@@ -236,7 +231,7 @@ 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";
@@ -252,7 +247,7 @@ export default {
         PlaylistAddModal,
         ShareModal,
         PlaylistVideos,
-        WatchOnYouTubeButton,
+        WatchOnButton,
         LoadingIndicatorPage,
         ToastComponent,
     },

src/main.js

@@ -23,7 +23,7 @@ import {
     faBookmark,
     faEdit,
 } from "@fortawesome/free-solid-svg-icons";
-import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faBitcoin, faYoutube, faOdysee } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 library.add(
     faEye,
@@ -34,6 +34,7 @@ library.add(
     faHeart,
     faHeadphones,
     faYoutube,
+    faOdysee,
     faRss,
     faChevronLeft,
     faLevelDownAlt,