#1414 share channels

src/renderer/components/ft-share-button/ft-share-button.js

@@ -15,6 +15,15 @@ export default Vue.extend({
     'ft-toggle-switch': FtToggleSwitch
   },
   props: {
+    shareTargetType: {
+      /**
+       * 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.shareTargetType === 'Channel'
+    },
+
+    isVideo: function() {
+      return this.shareTargetType === '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) {
@@ -52,7 +72,14 @@ export default Vue.extend({
       return `${this.currentInvidiousInstance}/embed/${this.id}`
     },
 
+    youtubeChannelUrl() {
+      return `https://www.youtube.com/channel/${this.id}`
+    },
+
     youtubeURL() {
+      if (this.isChannel) {
+        return this.youtubeChannelUrl
+      }
       let videoUrl = `https://www.youtube.com/watch?v=${this.id}`
       // `playlistId` can be undefined
       if (this.playlistId && this.playlistId.length !== 0) {
@@ -63,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
@@ -75,6 +105,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 +158,9 @@ export default Vue.extend({
     },
 
     getFinalUrl(url) {
+      if (this.isChannel) {
+        return url
+      }
       if (url.indexOf('?') === -1) {
         return this.includeTimestamp ? `${url}?t=${this.getTimestamp()}` : url
       }

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 ${shareTargetType}`)"
+    :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="isVideo"
         :label="$t('Share.Include Timestamp')"
         :compact="true"
         :default-value="includeTimestamp"
@@ -42,6 +43,7 @@
           {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
+          v-if="isVideo"
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyYoutubeEmbed()"
@@ -50,6 +52,7 @@
           {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
+          v-if="isVideo"
           class="action"
           background-color="var(--accent-color-active)"
           @click="openYoutubeEmbed()"
@@ -81,6 +84,7 @@
           {{ $t("Share.Open Link") }}
         </ft-button>
         <ft-button
+          v-if="isVideo"
           class="action"
           background-color="var(--accent-color-active)"
           @click="copyInvidiousEmbed()"
@@ -89,6 +93,7 @@
           {{ $t("Share.Copy Embed") }}
         </ft-button>
         <ft-button
+          v-if="isVideo"
           class="action"
           background-color="var(--accent-color-active)"
           @click="openInvidiousEmbed()"

src/renderer/views/Channel/Channel.css

@@ -56,13 +56,23 @@
   left: 120px;
 }
 
+.channelInfoActionsContainer {
+  display: flex;
+  min-width: 230px;
+  justify-content: space-between;
+}
+
 .subscribeButton {
   height: 50px;
   min-width: 150px;
   align-self: center;
   margin-bottom: 10px;
 }
 
+.shareIcon {
+  align-items: center;
+}
+
 .channelSearch {
   width: 200px;
   align-self: flex-end;

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 {

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"
+              share-target-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

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

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'