From ea362ab2957aa36328367245f5b84806ac377795 Mon Sep 17 00:00:00 2001
From: Alhuin <alhuin.git@proton.me>
Date: Sat, 12 Nov 2022 17:09:58 +0100
Subject: [PATCH 1/5] #1414: Add share button ton Channel view - Update
 src/renderer/components/ft-share-button to handle Channels - Update english
 locale entries for 'Share channel'

---
 .../ft-share-button/ft-share-button.js        | 34 ++++++++++++++++++-
 .../ft-share-button/ft-share-button.vue       |  9 +++--
 static/locales/en-US.yaml                     |  1 +
 static/locales/en_GB.yaml                     |  1 +
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index dbe9084bac159..46d77cf72f030 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -15,6 +15,15 @@ export default Vue.extend({
     'ft-toggle-switch': FtToggleSwitch
   },
   props: {
+    mediaType: {
+      /**
+       * Allows to render the dropdown conditionally
+       * 'Channel' will exclude embed links
+       * 'Video' (default) keeps the original behaviour
+       **/
+      type: String,
+      default: 'Video'
+    },
     id: {
       type: String,
       required: true
@@ -25,7 +34,7 @@ export default Vue.extend({
     },
     getTimestamp: {
       type: Function,
-      required: true
+      default: null
     }
   },
   data: function () {
@@ -34,11 +43,22 @@ export default Vue.extend({
     }
   },
   computed: {
+    isChannel: function() {
+      return this.mediaType === 'Channel'
+    },
+
+    isVideo: function() {
+      return this.mediaType === 'Video'
+    },
+
     currentInvidiousInstance: function () {
       return this.$store.getters.getCurrentInvidiousInstance
     },
 
     invidiousURL() {
+      if (this.isChannel) {
+        return `${this.currentInvidiousInstance}/channel/${this.id}`
+      }
       let videoUrl = `${this.currentInvidiousInstance}/watch?v=${this.id}`
       // `playlistId` can be undefined
       if (this.playlistId && this.playlistId.length !== 0) {
@@ -53,6 +73,9 @@ export default Vue.extend({
     },
 
     youtubeURL() {
+      if (this.isChannel) {
+        return `https://www.youtube.com/channel/${this.id}`
+      }
       let videoUrl = `https://www.youtube.com/watch?v=${this.id}`
       // `playlistId` can be undefined
       if (this.playlistId && this.playlistId.length !== 0) {
@@ -75,6 +98,12 @@ export default Vue.extend({
       return `https://www.youtube-nocookie.com/embed/${this.id}`
     }
   },
+  mounted() {
+    // Prevents to instantiate a ft-share-button for a video without a get-timestamp function
+    if (this.isVideo && !this.getTimestamp) {
+      console.error('Error in props validation: A Video ft-share-button requires a valid get-timestamp function.')
+    }
+  },
   methods: {
 
     openInvidious() {
@@ -122,6 +151,9 @@ export default Vue.extend({
     },
 
     getFinalUrl(url) {
+      if (this.isChannel) {
+        return url
+      }
       if (url.indexOf('?') === -1) {
         return this.includeTimestamp ? `${url}?t=${this.getTimestamp()}` : url
       }
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index 6b9da16e030be..a1ea616b9cf2b 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -1,14 +1,15 @@
 <template>
   <ft-icon-button
     ref="iconButton"
-    :title="$t('Share.Share Video')"
-    theme="secondary"
+    :title="$t(`Share.Share ${mediaType}`)"
+    :theme="isVideo?'secondary':'base-no-default'"
     :icon="['fas', 'share-alt']"
     dropdown-position-x="left"
     :force-dropdown="true"
   >
     <ft-flex-box>
       <ft-toggle-switch
+        v-if="!isChannel"
         :label="$t('Share.Include Timestamp')"
         :compact="true"
         :default-value="includeTimestamp"
@@ -42,6 +43,7 @@
           {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
+          v-if="!isChannel"
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyYoutubeEmbed()"
@@ -50,6 +52,7 @@
           {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
+          v-if="!isChannel"
           class="action"
           background-color="var(--accent-color-active)"
           @click="openYoutubeEmbed()"
@@ -81,6 +84,7 @@
           {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
+          v-if="!isChannel"
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyInvidiousEmbed()"
@@ -89,6 +93,7 @@
           {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
+          v-if="!isChannel"
           class="action"
           background-color="var(--accent-color-active)"
           @click="openInvidiousEmbed()"
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 2f1a6b272710a..5f5ae14b27bc0 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -679,6 +679,7 @@ Change Format:
     for this video
 Share:
   Share Video: Share Video
+  Share Channel: Share Channel
   Include Timestamp: Include Timestamp
   Copy Link: Copy Link
   Open Link: Open Link
diff --git a/static/locales/en_GB.yaml b/static/locales/en_GB.yaml
index d038ae92d840b..ffb19aadaeec3 100644
--- a/static/locales/en_GB.yaml
+++ b/static/locales/en_GB.yaml
@@ -734,6 +734,7 @@ Change Format:
     for this video'
 Share:
   Share Video: 'Share Video'
+  Share Channel: 'Share Channel'
   Include Timestamp: 'Include Timestamp'
   Copy Link: 'Copy Link'
   Open Link: 'Open Link'

From 0ae08f2fc121884001456ea82ac2c64988933633 Mon Sep 17 00:00:00 2001
From: Alhuin <alhuin.git@proton.me>
Date: Sat, 12 Nov 2022 17:37:31 +0100
Subject: [PATCH 2/5] #1414: Add share button ton Channel view - update
 youtubeShareURL() in src/renderer/components/ft-share-button

---
 .../components/ft-share-button/ft-share-button.js        | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index 46d77cf72f030..65e45e03f1407 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -72,9 +72,13 @@ export default Vue.extend({
       return `${this.currentInvidiousInstance}/embed/${this.id}`
     },
 
+    youtubeChannelUrl() {
+      return `https://www.youtube.com/channel/${this.id}`
+    },
+
     youtubeURL() {
       if (this.isChannel) {
-        return `https://www.youtube.com/channel/${this.id}`
+        return this.youtubeChannelUrl
       }
       let videoUrl = `https://www.youtube.com/watch?v=${this.id}`
       // `playlistId` can be undefined
@@ -86,6 +90,9 @@ export default Vue.extend({
     },
 
     youtubeShareURL() {
+      if (this.isChannel) {
+        return this.youtubeChannelUrl
+      }
       // `playlistId` can be undefined
       if (this.playlistId && this.playlistId.length !== 0) {
         // `index` seems can be ignored

From 646b1c0e3bebfa4ee57e3829a8c8e9e551e661d0 Mon Sep 17 00:00:00 2001
From: Alhuin <alhuin.git@proton.me>
Date: Sat, 12 Nov 2022 17:46:55 +0100
Subject: [PATCH 3/5] #1414: Add share button ton Channel view - implemented
 the new button in src/renderer/views/Channel

---
 src/renderer/views/Channel/Channel.css | 10 ++++++++++
 src/renderer/views/Channel/Channel.js  |  4 +++-
 src/renderer/views/Channel/Channel.vue | 24 ++++++++++++++++--------
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 977e76ec4f824..998f701ef9233 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -56,6 +56,12 @@
   left: 120px;
 }
 
+.channelInfoActionsContainer {
+  display: flex;
+  min-width: 230px;
+  justify-content: space-between;
+}
+
 .subscribeButton {
   height: 50px;
   min-width: 150px;
@@ -63,6 +69,10 @@
   margin-bottom: 10px;
 }
 
+.shareIcon {
+  align-items: center;
+}
+
 .channelSearch {
   width: 200px;
   align-self: flex-end;
diff --git a/src/renderer/views/Channel/Channel.js b/src/renderer/views/Channel/Channel.js
index 4b7d75c4ab4c7..ec66b5b37caf0 100644
--- a/src/renderer/views/Channel/Channel.js
+++ b/src/renderer/views/Channel/Channel.js
@@ -9,6 +9,7 @@ import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubbl
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
 import FtAgeRestricted from '../../components/ft-age-restricted/ft-age-restricted.vue'
+import FtShareButton from '../../components/ft-share-button/ft-share-button.vue'
 
 import ytch from 'yt-channel-info'
 import autolinker from 'autolinker'
@@ -27,7 +28,8 @@ export default Vue.extend({
     'ft-channel-bubble': FtChannelBubble,
     'ft-loader': FtLoader,
     'ft-element-list': FtElementList,
-    'ft-age-restricted': FtAgeRestricted
+    'ft-age-restricted': FtAgeRestricted,
+    'ft-share-button': FtShareButton
   },
   data: function () {
     return {
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index b32c4451f346a..06debd09c40be 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -51,14 +51,22 @@
             </div>
           </div>
 
-          <ft-button
-            v-if="!hideUnsubscribeButton"
-            :label="subscribedText"
-            background-color="var(--primary-color)"
-            text-color="var(--text-with-main-color)"
-            class="subscribeButton"
-            @click="handleSubscription"
-          />
+          <div class="channelInfoActionsContainer">
+            <ft-share-button
+              :id="id"
+              media-type="Channel"
+              class="shareIcon"
+            />
+
+            <ft-button
+              v-if="!hideUnsubscribeButton"
+              :label="subscribedText"
+              background-color="var(--primary-color)"
+              text-color="var(--text-with-main-color)"
+              class="subscribeButton"
+              @click="handleSubscription"
+            />
+          </div>
         </div>
 
         <ft-flex-box

From 215617435577e0818c64c61b7e06661eebd07391 Mon Sep 17 00:00:00 2001
From: Alhuin <alhuin.git@proton.me>
Date: Sun, 13 Nov 2022 02:13:48 +0100
Subject: [PATCH 4/5] #1414: Add share button ton Channel view - renamed
 mediaType to shareTargetType in ft-share-button.js - switched logic from
 !isChannel to isVideo in ft-share-button.vue

---
 .../components/ft-share-button/ft-share-button.js      |  6 +++---
 .../components/ft-share-button/ft-share-button.vue     | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index 65e45e03f1407..9c12f296ef516 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -15,7 +15,7 @@ export default Vue.extend({
     'ft-toggle-switch': FtToggleSwitch
   },
   props: {
-    mediaType: {
+    shareTargetType: {
       /**
        * Allows to render the dropdown conditionally
        * 'Channel' will exclude embed links
@@ -44,11 +44,11 @@ export default Vue.extend({
   },
   computed: {
     isChannel: function() {
-      return this.mediaType === 'Channel'
+      return this.shareTargetType === 'Channel'
     },
 
     isVideo: function() {
-      return this.mediaType === 'Video'
+      return this.shareTargetType === 'Video'
     },
 
     currentInvidiousInstance: function () {
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index a1ea616b9cf2b..87983bab72a5b 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -9,7 +9,7 @@
   >
     <ft-flex-box>
       <ft-toggle-switch
-        v-if="!isChannel"
+        v-if="isVideo"
         :label="$t('Share.Include Timestamp')"
         :compact="true"
         :default-value="includeTimestamp"
@@ -43,7 +43,7 @@
           {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
-          v-if="!isChannel"
+          v-if="isVideo"
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyYoutubeEmbed()"
@@ -52,7 +52,7 @@
           {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
-          v-if="!isChannel"
+          v-if="isVideo"
           class="action"
           background-color="var(--accent-color-active)"
           @click="openYoutubeEmbed()"
@@ -84,7 +84,7 @@
           {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
-          v-if="!isChannel"
+          v-if="isVideo"
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyInvidiousEmbed()"
@@ -93,7 +93,7 @@
           {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
-          v-if="!isChannel"
+          v-if="isVideo"
           class="action"
           background-color="var(--accent-color-active)"
           @click="openInvidiousEmbed()"

From ad9dcddff33ce5af785871d4883fc0a3ee5c8f85 Mon Sep 17 00:00:00 2001
From: Alhuin <alhuin.git@proton.me>
Date: Sun, 13 Nov 2022 02:22:26 +0100
Subject: [PATCH 5/5] #1414: Add share button ton Channel view - renamed target
 type in ft-share-button.vue - updated implementation in Channel.vue

---
 src/renderer/components/ft-share-button/ft-share-button.vue | 2 +-
 src/renderer/views/Channel/Channel.vue                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index 87983bab72a5b..6b38d9ec398b2 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -1,7 +1,7 @@
 <template>
   <ft-icon-button
     ref="iconButton"
-    :title="$t(`Share.Share ${mediaType}`)"
+    :title="$t(`Share.Share ${shareTargetType}`)"
     :theme="isVideo?'secondary':'base-no-default'"
     :icon="['fas', 'share-alt']"
     dropdown-position-x="left"
diff --git a/src/renderer/views/Channel/Channel.vue b/src/renderer/views/Channel/Channel.vue
index 06debd09c40be..63c266fe9da4c 100644
--- a/src/renderer/views/Channel/Channel.vue
+++ b/src/renderer/views/Channel/Channel.vue
@@ -54,7 +54,7 @@
           <div class="channelInfoActionsContainer">
             <ft-share-button
               :id="id"
-              media-type="Channel"
+              share-target-type="Channel"
               class="shareIcon"
             />