Make some more elements right-clickable (#2968)

src/renderer/components/watch-video-playlist/watch-video-playlist.css

@@ -1,10 +1,10 @@
-.pointer {
-  cursor: pointer;
+.playlistTitle, .channelName {
+  text-decoration: none;
+  color: inherit;
 }
 
 .channelName {
   font-size: 15px;
-  cursor: pointer;
   position: relative;
   bottom: 15px;
 }

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -99,14 +99,6 @@ export default Vue.extend({
     }
   },
   methods: {
-    goToPlaylist: function () {
-      this.$router.push({ path: `/playlist/${this.playlistId}` })
-    },
-
-    goToChannel: function () {
-      this.$router.push({ path: `/channel/${this.channelId}` })
-    },
-
     toggleLoop: function () {
       if (this.loopEnabled) {
         this.loopEnabled = false

src/renderer/components/watch-video-playlist/watch-video-playlist.vue

@@ -6,18 +6,20 @@
     <div
       v-else
     >
-      <h3
-        class="pointer"
-        @click="goToPlaylist"
-      >
-        {{ playlistTitle }}
+      <h3>
+        <router-link
+          class="playlistTitle"
+          :to="`/playlist/${playlistId}`"
+        >
+          {{ playlistTitle }}
+        </router-link>
       </h3>
-      <span
+      <router-link
         class="channelName"
-        @click="goToChannel"
+        :to="`/channel/${channelId}`"
       >
         {{ channelName }}
-      </span>
+      </router-link>
       <span
         class="playlistIndex"
       >

src/renderer/views/SubscribedChannels/SubscribedChannels.css

@@ -37,12 +37,11 @@
 .channelThumbnail {
   height: 120px;
   border-radius: 50%;
-  cursor: pointer;
 }
 
 .channelName {
   flex-grow: 1;
-  cursor: pointer;
+  color: inherit;
   font-size: 1.1rem;
   text-decoration: none;
   text-align: center;

src/renderer/views/SubscribedChannels/SubscribedChannels.js

@@ -204,10 +204,6 @@ export default Vue.extend({
       }
     },
 
-    goToChannel: function (id) {
-      this.$router.push({ path: `/channel/${id}` })
-    },
-
     ...mapActions([
       'updateProfile',
       'updateSubscriptionDetails',

src/renderer/views/SubscribedChannels/SubscribedChannels.vue

@@ -29,21 +29,23 @@
             :key="channel.key"
             class="channel"
           >
-            <div class="thumbnailContainer">
+            <router-link
+              class="thumbnailContainer"
+              :to="`/channel/${channel.id}`"
+            >
               <img
                 class="channelThumbnail"
                 :src="thumbnailURL(channel.thumbnail)"
-                @click="goToChannel(channel.id)"
                 @error.once="updateThumbnail(channel)"
               >
-            </div>
-            <div
+            </router-link>
+            <router-link
               class="channelName"
               :title="channel.name"
-              @click="goToChannel(channel.id)"
+              :to="`/channel/${channel.id}`"
             >
               {{ channel.name }}
-            </div>
+            </router-link>
             <div
               v-if="!hideUnsubscribeButton"
               class="unsubscribeContainer"