FreeTubeApp#1414: Add share button ton Channel view

- implemented the new button in src/renderer/views/Channel
Alhuin · Nov 12, 2022 · 646b1c0 · 646b1c0
1 parent 0ae08f2
commit 646b1c0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/src/renderer/views/Channel/Channel.css b/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;

diff --git 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
@@ -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