Add Share Playlist button to Playlist View (#400)

FreeTubeApp · Oct 14, 2019 · f796661 · f796661
1 parent d593b97
commit f796661
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 0 deletions.
diff --git a/src/js/templates.js b/src/js/templates.js
@@ -418,6 +418,24 @@ let playlistView = new Vue({
             clipboard.writeText(url);
             showToast('URL has been copied to the clipboard');
         },
+        copyYouTubePlaylist: (playlistId) => {
+            const url = `https://www.youtube.com/playlist?list=${playlistId}`          
+            clipboard.writeText(url);
+            showToast('URL has been copied to the clipboard');
+        },
+        copyInvidiousPlaylist: (playlistId) => {
+            const url = `${invidiousInstance}/playlist?list=${playlistId}`          
+            clipboard.writeText(url);
+            showToast('URL has been copied to the clipboard');
+        },
+        openYouTubePlaylist: (playlistId) => {
+            const url = `https://www.youtube.com/playlist?list=${playlistId}`          
+            shell.openExternal(url);
+        },
+        openInvidiousPlaylist: (playlistId) => {
+            const url = `${invidiousInstance}/playlist?list=${playlistId}`          
+            shell.openExternal(url);
+        },
         history: (videoId) => {
             removeFromHistory(videoId);
         }

diff --git a/src/style/playlist.css b/src/style/playlist.css
@@ -198,3 +198,47 @@
     top: 20px;
     right: 15px;
 }
+
+.playlistShare {
+    position: relative;
+    text-align: center;
+    text-transform: uppercase;
+    margin: 0 5px;
+}
+
+.playlistShare ul {
+    display: none;
+    position: absolute;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    z-index: 100;
+}
+
+.playlistShare ul li {
+    width: 100%;
+    float: none;
+    box-sizing: border-box;
+}
+
+.playlistShare:hover ul {
+    display: block;
+}
+
+.playlistShare ul li a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.playlistShareButton.smallButton {
+    float: none;
+    margin: 0;
+}
+
+.playlistShareButton.smallButton i {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%)
+}
diff --git a/src/templates/playlistView.html b/src/templates/playlistView.html
@@ -29,6 +29,16 @@ <h3>{{channelName}}</h3>
                 </div>
                 <p>{{videoCount}} videos - {{viewCount}} views - Last updated on {{lastUpdated}}</p>
                 <hr />
+                <div class='playlistShare'>
+                    <div class='playlistShareButton smallButton'>Share Playlist <i class='fas fa-angle-down'></i></div>
+                    <ul>
+                        <li class='smallButton'><a v-on:click='copyYouTubePlaylist(playlistId)'>Copy YouTube Link</a></li>
+                        <li class='smallButton'><a v-on:click='openYouTubePlaylist(playlistId)'>Open in YouTube</a></li>
+                        <li class='smallButton'><a v-on:click='copyInvidiousPlaylist(playlistId)'>Copy Invidious Link</a></li>
+                        <li class='smallButton'><a v-on:click='openInvidiousPlaylist(playlistId)'>Open in Invidious</a></li>
+                    </ul>
+                </div>
+                <hr />
                 <p v-html='description'></p>
             </div>
             <div class='playlistVideoView'>