From 7afbe836d3f44099e1927b031ae3ec92ed60622c Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 24 Jun 2020 03:47:19 +1200
Subject: [PATCH 1/9] Rewrite list items :)

---
 .vscode/tasks.json                            |   7 +
 .../components/ft-auto-grid/ft-auto-grid.js   |  11 +
 .../components/ft-auto-grid/ft-auto-grid.sass |  10 +
 .../components/ft-auto-grid/ft-auto-grid.vue  |  14 +
 .../ft-element-list/ft-element-list.js        |   4 +-
 .../ft-element-list/ft-element-list.vue       |  64 ++---
 .../ft-icon-button/ft-icon-button.js          |   8 +
 .../ft-icon-button/ft-icon-button.sass        |   3 +-
 .../ft-icon-button/ft-icon-button.vue         |   4 +
 .../ft-list-playlist/ft-list-playlist.css     | 106 --------
 .../ft-list-playlist/ft-list-playlist.js      |  12 +-
 .../ft-list-playlist/ft-list-playlist.sass    |   1 +
 .../ft-list-playlist/ft-list-playlist.vue     |  49 ++--
 .../ft-list-video/ft-list-video.css           | 247 ------------------
 .../components/ft-list-video/ft-list-video.js |  33 +--
 .../ft-list-video/ft-list-video.sass          |   1 +
 .../ft-list-video/ft-list-video.vue           | 129 +++++----
 .../watch-playlist/watch-playlist.vue         |   2 +
 .../watch-video-playlist.css                  |  24 +-
 .../watch-video-playlist.vue                  |  26 +-
 .../watch-video-recommendations.css           |   9 +-
 .../watch-video-recommendations.vue           |   4 +-
 src/renderer/sass-partials/_ft-list-item.sass | 151 +++++++++++
 src/renderer/views/Playlist/Playlist.css      |   3 +
 src/renderer/views/Playlist/Playlist.vue      |  18 +-
 src/renderer/views/Watch/Watch.sass           |   4 +-
 26 files changed, 376 insertions(+), 568 deletions(-)
 create mode 100644 src/renderer/components/ft-auto-grid/ft-auto-grid.js
 create mode 100644 src/renderer/components/ft-auto-grid/ft-auto-grid.sass
 create mode 100644 src/renderer/components/ft-auto-grid/ft-auto-grid.vue
 delete mode 100644 src/renderer/components/ft-list-playlist/ft-list-playlist.css
 create mode 100644 src/renderer/components/ft-list-playlist/ft-list-playlist.sass
 delete mode 100644 src/renderer/components/ft-list-video/ft-list-video.css
 create mode 100644 src/renderer/components/ft-list-video/ft-list-video.sass
 create mode 100644 src/renderer/sass-partials/_ft-list-item.sass

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 1db3b6de..3e3b502c 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -7,6 +7,13 @@
 			"type": "npm",
 			"script": "dev",
 			"problemMatcher": []
+		},
+		{
+			"type": "npm",
+			"script": "dev-runner",
+			"problemMatcher": [],
+			"label": "npm: dev-runner",
+			"detail": "node _scripts/dev-runner.js"
 		}
 	]
 }
\ No newline at end of file
diff --git a/src/renderer/components/ft-auto-grid/ft-auto-grid.js b/src/renderer/components/ft-auto-grid/ft-auto-grid.js
new file mode 100644
index 00000000..2befee45
--- /dev/null
+++ b/src/renderer/components/ft-auto-grid/ft-auto-grid.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'FtAutoGrid',
+  props: {
+    grid: {
+      type: Boolean,
+      required: true
+    }
+  }
+})
diff --git a/src/renderer/components/ft-auto-grid/ft-auto-grid.sass b/src/renderer/components/ft-auto-grid/ft-auto-grid.sass
new file mode 100644
index 00000000..eb71df3e
--- /dev/null
+++ b/src/renderer/components/ft-auto-grid/ft-auto-grid.sass
@@ -0,0 +1,10 @@
+.ft-auto-grid
+  &.grid
+    display: grid
+    grid-template-columns: repeat(auto-fill, 240px)
+    justify-content: space-evenly
+    grid-gap: 5px
+
+  &.list
+    display: grid
+    grid-gap: 16px
diff --git a/src/renderer/components/ft-auto-grid/ft-auto-grid.vue b/src/renderer/components/ft-auto-grid/ft-auto-grid.vue
new file mode 100644
index 00000000..14e20186
--- /dev/null
+++ b/src/renderer/components/ft-auto-grid/ft-auto-grid.vue
@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="ft-auto-grid"
+    :class="{
+      grid: grid,
+      list: !grid
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script src="./ft-auto-grid.js" />
+<style scoped lang="sass" src="./ft-auto-grid.sass" />
diff --git a/src/renderer/components/ft-element-list/ft-element-list.js b/src/renderer/components/ft-element-list/ft-element-list.js
index a410bd37..c9cab911 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.js
+++ b/src/renderer/components/ft-element-list/ft-element-list.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import FtGrid from '../ft-grid/ft-grid.vue'
+import FtAutoGrid from '../ft-auto-grid/ft-auto-grid.vue'
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
 import FtListChannel from '../ft-list-channel/ft-list-channel.vue'
 import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
@@ -9,7 +9,7 @@ export default Vue.extend({
   name: 'FtElementList',
   components: {
     'ft-flex-box': FtFlexBox,
-    'ft-grid': FtGrid,
+    'ft-auto-grid': FtAutoGrid,
     'ft-list-video': FtListVideo,
     'ft-list-channel': FtListChannel,
     'ft-list-playlist': FtListPlaylist
diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue
index baef15af..465fa0fd 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.vue
+++ b/src/renderer/components/ft-element-list/ft-element-list.vue
@@ -1,49 +1,29 @@
 <template>
-  <span>
-    <ft-flex-box
-      v-if="listType === 'list'"
+  <ft-auto-grid
+    :grid="listType !== 'list'"
+  >
+    <template
+      v-for="(result, index) in data"
     >
-      <span
-        v-for="(result, index) in data"
+      <ft-list-channel
+        v-if="result.type === 'channel'"
+        :data="result"
         :key="index"
-        class="maxWidth"
-      >
-        <ft-list-channel
-          v-if="result.type === 'channel'"
-          :data="result"
-        />
-        <ft-list-video
-          v-if="result.type === 'video' || result.type === 'shortVideo'"
-          :data="result"
-        />
-        <ft-list-playlist
-          v-if="result.type === 'playlist'"
-          :data="result"
-        />
-      </span>
-    </ft-flex-box>
-    <ft-grid
-      v-else
-    >
-      <span
-        v-for="(result, index) in data"
+      />
+      <ft-list-video
+        v-if="result.type === 'video' || result.type === 'shortVideo'"
+        appearance="result"
+        :data="result"
         :key="index"
-      >
-        <ft-list-channel
-          v-if="result.type === 'channel'"
-          :data="result"
-        />
-        <ft-list-video
-          v-if="result.type === 'video' || result.type === 'shortVideo'"
-          :data="result"
-        />
-        <ft-list-playlist
-          v-if="result.type === 'playlist'"
-          :data="result"
-        />
-      </span>
-    </ft-grid>
-  </span>
+      />
+      <ft-list-playlist
+        v-if="result.type === 'playlist'"
+        appearance="result"
+        :data="result"
+        :key="index"
+      />
+    </template>
+  </ft-auto-grid>
 </template>
 
 <script src="./ft-element-list.js" />
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js
index 7449fbfd..c2d6b09c 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.js
@@ -19,6 +19,14 @@ export default Vue.extend({
       type: Boolean,
       default: true
     },
+    padding: {
+      type: Number,
+      default: 10
+    },
+    size: {
+      type: Number,
+      default: 20
+    },
     forceDropdown: {
       type: Boolean,
       default: false
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.sass b/src/renderer/components/ft-icon-button/ft-icon-button.sass
index 338e9228..0deca696 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.sass
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.sass
@@ -3,12 +3,11 @@
   flex-flow: row wrap
   justify-content: space-evenly
   position: relative
+  user-select: none
 
 .iconButton
   width: 1em
   height: 1em
-  padding: 10px
-  font-size: 20px
   border-radius: 50%
   cursor: pointer
   transition: background 0.15s ease-out
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 4b613fff..bafa0c6e 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -10,6 +10,10 @@
         secondary: theme === 'secondary',
         shadow: useShadow
       }"
+      :style="{
+        padding: padding + 'px',
+        fontSize: size + 'px'
+      }"
       @click="handleIconClick"
     />
     <div
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.css b/src/renderer/components/ft-list-playlist/ft-list-playlist.css
deleted file mode 100644
index 42d0ca14..00000000
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.css
+++ /dev/null
@@ -1,106 +0,0 @@
-.videoThumbnail {
-  position: relative;
-  cursor: pointer;
-}
-
-.videoCountContainer {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 120px;
-  background-color: rgba(0,0,0,0.6);
-  color: #FFFFFF;
-  text-align: center;
-  font-size: 20px;
-}
-
-.videoCountContainer span {
-  position: absolute;
-  top: 40px;
-  left: 45px;
-}
-
-.playlistTitle {
-  font-weight: bold;
-  color: var(--title-color);
-  cursor: pointer;
-}
-
-.channelName {
-  color: var(--secondary-text-color);
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.grid {
-  width: 240px;
-  height: 250px;
-  padding: 2px;
-  overflow: hidden;
-}
-
-.grid .videoThumbnail {
-  width: 100%;
-  height: 130px;
-  margin-bottom: -5px;
-}
-
-.grid .videoThumbnail img {
-  width: 100%;
-  height: 130px;
-}
-
-.grid .videoCountContainer {
-  height: 130px;
-}
-
-.grid .playlistTitle {
-  max-height: 75px;
-  overflow-y: hidden;
-}
-
-.grid .channelName {
-  width: 275px;
-}
-
-.list {
-  height: 140px;
-  width: 100%;
-  margin-left: 5px;
-  margin-top: 15px;
-  border-bottom: 1px solid var(--secondary-text-color);
-}
-
-.list .videoThumbnail {
-  float: left;
-  width: 240px;
-  height: 130px;
-}
-
-.list .videoThumbnail img {
-  width: 100%;
-  height: 130px;
-}
-
-.list .videoCountContainer {
-  height: 130px;
-}
-
-.list .playlistTitle {
-  margin-left: 250px;
-  margin-top: 5px;
-  margin-bottom: -10px;
-}
-
-.list .channelName {
-  margin-left: 250px;
-  width: 275px;
-}
-
-.list .description {
-  margin-left: 285px;
-  font-size: 13px;
-  color: var(--secondary-text-color);
-  height: 35px;
-  overflow: hidden;
-}
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.js b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
index ca30dab3..06309be5 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.js
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.js
@@ -6,6 +6,10 @@ export default Vue.extend({
     data: {
       type: Object,
       required: true
+    },
+    appearance: {
+      type: String,
+      required: true
     }
   },
   data: function () {
@@ -58,14 +62,6 @@ export default Vue.extend({
       this.channelLink = this.data.author.ref
       this.playlistLink = this.data.link
       this.videoCount = parseInt(this.data.length.split(' ')[0])
-    },
-
-    goToPlaylist: function (id) {
-      this.$router.push({ path: `/playlist/${id}` })
-    },
-
-    goToChannel: function (id) {
-      console.log(id)
     }
   }
 })
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.sass b/src/renderer/components/ft-list-playlist/ft-list-playlist.sass
new file mode 100644
index 00000000..cdebfe2e
--- /dev/null
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/_ft-list-item"
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
index b842bb01..e48e58d5 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
@@ -1,38 +1,45 @@
 <template>
   <div
     class="ft-list-video"
+    :appearance="appearance"
     :class="{ list: listType === 'list', grid: listType === 'grid' }"
   >
-    <div class="videoThumbnail">
+    <router-link
+      class="videoThumbnail"
+      :to="`/playlist/${playlistId}`"
+    >
       <img
         :src="thumbnail"
-        @click="goToPlaylist(playlistId)"
+        class="thumbnailImage"
       >
       <div
         class="videoCountContainer"
-        @click="goToPlaylist(playlistId)"
       >
-        <span>
-          {{ videoCount }}
-          <br>
-          <font-awesome-icon icon="list" />
-        </span>
+        <div class="background" />
+        <div class="inner">
+          <div>{{ videoCount }}</div>
+          <div><font-awesome-icon icon="list" /></div>
+        </div>
+      </div>
+    </router-link>
+    <div class="videoInfo">
+      <router-link
+        class="title"
+        :to="`/playlist/${playlistId}`"
+      >
+        {{ title }}
+      </router-link>
+      <div class="infoLine">
+        <router-link
+          class="channelName"
+          :to="`/channel/${channelId}`"
+        >
+          {{ channelName }}
+        </router-link>
       </div>
     </div>
-    <p
-      class="playlistTitle"
-      @click="goToPlaylist(playlistId)"
-    >
-      {{ title }}
-    </p>
-    <p
-      class="channelName"
-      @click="goToChannel(channelId)"
-    >
-      {{ channelName }}
-    </p>
   </div>
 </template>
 
 <script src="./ft-list-playlist.js" />
-<style scoped src="./ft-list-playlist.css" />
+<style scoped lang="sass" src="./ft-list-playlist.sass" />
diff --git a/src/renderer/components/ft-list-video/ft-list-video.css b/src/renderer/components/ft-list-video/ft-list-video.css
deleted file mode 100644
index 7d8f22d8..00000000
--- a/src/renderer/components/ft-list-video/ft-list-video.css
+++ /dev/null
@@ -1,247 +0,0 @@
-.videoThumbnail {
-  position: relative;
-  cursor: pointer;
-}
-
-.videoThumbnail:hover .videoWatched {
-    visibility: hidden;
-}
-
-.favoritesIcon {
-  position: absolute;
-  font-size: 15px;
-  top: 0px;
-  right: 0px;
-  color: #FFFFFF;
-  padding: 5px;
-  background-color: #000000;
-  opacity: 0.7;
-  cursor: pointer;
-}
-
-.favorited {
-  color: yellow;
-}
-
-.videoDuration {
-  position: absolute;
-  font-size: 13px;
-  bottom: -7px;
-  right: 0px;
-  color: #FFFFFF;
-  padding: 2px;
-  background-color: #000000;
-  opacity: 0.7;
-  cursor: pointer;
-}
-
-.videoWatched {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  background-color: rgba(0,0,0,0.4);
-  color: #FFFFFF;
-  pointer-events: none;
-}
-
-.watchedProgressBar {
-  background-color: var(--red-500);
-  opacity: 0.8;
-  height: 3px;
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  cursor: pointer;
-}
-
-.videoTitle {
-  color: var(--title-color);
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.channelName {
-  color: var(--secondary-text-color);
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.viewCount {
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.uploadedTime {
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.liveText {
-  color: var(--red-500);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-/deep/ .iconButton {
-  font-size: 15px;
-  padding: 8px;
-}
-
-/deep/ .iconDropdown {
-  margin-top: 30px;
-}
-
-.grid {
-  width: 240px;
-  height: 250px;
-  padding: 2px;
-  overflow: hidden;
-}
-
-.grid .videoThumbnail {
-  width: 100%;
-  height: 130px;
-  margin-bottom: -5px;
-}
-
-.grid .videoThumbnail img {
-  width: 100%;
-  height: 130px;
-}
-
-.grid .videoWatched {
-  height: 110px;
-}
-
-.grid .optionsButton {
-  margin-top: 10px;
-  margin-left: 210px;
-  position: absolute;
-}
-
-.grid .videoTitle {
-  max-height: 55px;
-  width: 210px;
-  overflow-y: hidden;
-  margin-bottom: -15px;
-}
-
-.grid .channelName {
-  width: 220px;
-  height: 17px;
-  margin-bottom: 10px;
-  overflow-y: hidden;
-}
-
-.grid .liveText {
-  float: right;
-}
-
-.list {
-  height: 140px;
-  width: 100%;
-  margin-left: 5px;
-  margin-top: 15px;
-}
-
-.list .videoThumbnail {
-  float: left;
-  width: 240px;
-  height: 130px;
-}
-
-.list .videoThumbnail img {
-  width: 100%;
-  height: 130px;
-}
-
-.list .videoWatched {
-  height: 130px;
-}
-
-.list .optionsButton {
-  float: right;
-}
-
-.list .videoTitle {
-  margin-left: 250px;
-  margin-top: 5px;
-  margin-bottom: -10px;
-}
-
-.list .channelName {
-  margin-left: 250px;
-  max-width: 275px;
-}
-
-.list .viewCount {
-  margin-left: 10px;
-}
-
-.list .liveText {
-  margin-left: 10px;
-}
-
-.list .description {
-  margin-left: 250px;
-  font-size: 13px;
-  color: var(--secondary-text-color);
-  height: 35px;
-  overflow: hidden;
-}
-
-.videoRecommendation.list {
-  height: 110px;
-}
-
-.videoRecommendation.list .videoThumbnail {
-  width: 180px;
-  height: 100px;
-}
-
-.videoRecommendation.list .videoThumbnail img {
-  height: 100px;
-}
-
-.videoRecommendation.list .videoTitle {
-  font-size: 12px;
-  margin-left: 185px;
-}
-
-.videoRecommendation.list .channelName {
-  margin-left: 185px;
-}
-
-.videoRecommendation.list .viewCount {
-  margin-left: 5px;
-}
-
-.playlistItem .list {
-  height: 60px;
-  width: calc(100% - 30px);
-}
-
-.playlistItem .list .videoThumbnail {
-  width: 100px;
-  height: 60px;
-}
-
-.playlistItem .list .videoThumbnail img {
-  height: 60px;
-}
-
-.playlistItem .list .videoTitle {
-  font-size: 12px;
-  margin-left: 105px;
-  margin-right: 30px;
-}
-
-.playlistItem .list .channelName {
-  margin-left: 105px;
-  margin-right: 30px;
-}
-
-.playlistItem .list .viewCount {
-  margin-left: 5px;
-}
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index fa63d7da..d20fba78 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import FtCard from "../ft-card/ft-card.vue"
 
 export default Vue.extend({
   name: 'FtListVideo',
   components: {
-    'ft-icon-button': FtIconButton
+    'ft-icon-button': FtIconButton,
+    'ft-card': FtCard
   },
   props: {
     data: {
@@ -18,6 +20,10 @@ export default Vue.extend({
     forceListType: {
       type: String,
       default: null
+    },
+    appearance: {
+      type: String,
+      required: true
     }
   },
   data: function () {
@@ -120,31 +126,6 @@ export default Vue.extend({
     }
   },
   methods: {
-    play: function () {
-      const playlistInfo = {
-        playlistId: this.playlistId
-      }
-      console.log('playlist info')
-      console.log(playlistInfo)
-
-      if (this.playlistId !== null) {
-        console.log('Sending playlist info')
-        this.$router.push(
-          {
-            path: `/watch/${this.id}`,
-            query: playlistInfo
-          }
-        )
-      } else {
-        console.log('no playlist found')
-        this.$router.push({ path: `/watch/${this.id}` })
-      }
-    },
-
-    goToChannel: function () {
-      this.$router.push({ path: `/channel/${this.channelId}` })
-    },
-
     toggleSave: function () {
       console.log('TODO: ft-list-video method toggleSave')
     },
diff --git a/src/renderer/components/ft-list-video/ft-list-video.sass b/src/renderer/components/ft-list-video/ft-list-video.sass
new file mode 100644
index 00000000..cdebfe2e
--- /dev/null
+++ b/src/renderer/components/ft-list-video/ft-list-video.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/_ft-list-item"
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 1018a95b..028da9b1 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -3,25 +3,37 @@
     class="ft-list-video"
     :class="{
       list: (listType === 'list' || forceListType === 'list') && forceListType !== 'grid',
-      grid: (listType === 'grid' || forceListType === 'list') && forceListType !== 'list'
+      grid: (listType === 'grid' || forceListType === 'list') && forceListType !== 'list',
+      [appearance]: true
     }"
   >
-    <div class="videoThumbnail">
-      <img
-        :src="thumbnail"
-        @click="play(id)"
+    <div
+      class="videoThumbnail"
+    >
+      <router-link
+        class="thumbnailLink"
+        :to="{
+          path: `/watch/${id}`,
+          query: playlistId ? {playlistId} : {}
+        }"
       >
-      <p
-        v-if="!isLive"
+        <img
+          :src="thumbnail"
+          class="thumbnailImage"
+        >
+      </router-link>
+      <div
         class="videoDuration"
-        @click="play(id)"
+        :class="{ live: isLive }"
       >
-        {{ duration }}
-      </p>
-      <font-awesome-icon
+        {{ isLive ? "Live" : duration }}
+      </div>
+      <ft-icon-button
         v-if="!isLive"
         icon="star"
         class="favoritesIcon"
+        :padding="6"
+        :size="18"
         :class="{ favorited: isFavorited }"
         @click="toggleSave(id)"
       />
@@ -29,7 +41,7 @@
         v-if="watched"
         class="videoWatched"
       >
-        WATCHED
+        Watched
       </div>
       <div
         v-if="watched"
@@ -37,65 +49,42 @@
         :style="{width: progressPercentage + '%'}"
       />
     </div>
-    <ft-icon-button
-      class="optionsButton"
-      title="More Options"
-      theme="base"
-      :use-shadow="false"
-      dropdown-position-x="left"
-      :dropdown-names="optionsNames"
-      :dropdown-values="optionsValues"
-      @click="handleOptionsClick"
-    />
-    <p
-      class="videoTitle"
-      @click="play(id)"
-    >
-      {{ title }}
-    </p>
-    <p
-      class="channelName"
-      @click="goToChannel"
-    >
-      {{ channelName }}
-    </p>
-    <span
-      v-if="!isLive && !hideViews"
-      class="viewCount"
-      @click="play(id)"
-    >
-      {{ viewCount }} views
-    </span>
-    <span
-      v-if="uploadedTime !== '' && !isLive"
-      class="uploadedTime"
-      @click="play(id)"
-    >
-      - {{ uploadedTime }}
-    </span>
-    <span
-      v-if="isLive"
-      class="viewCount"
-      @click="play(id)"
-    >
-      {{ viewCount }} watching
-    </span>
-    <p
-      v-if="listType !== 'grid'"
-      class="description"
-      @click="play(id)"
-    >
-      {{ description }}
-    </p>
-    <span
-      v-if="isLive"
-      class="liveText"
-      @click="play(id)"
-    >
-      LIVE NOW
-    </span>
+    <div class="videoInfo">
+      <ft-icon-button
+        class="optionsButton"
+        title="More Options"
+        theme="base"
+        :size="16"
+        :use-shadow="false"
+        dropdown-position-x="left"
+        :dropdown-names="optionsNames"
+        :dropdown-values="optionsValues"
+        @click="handleOptionsClick"
+      />
+      <router-link
+        class="title"
+        :to="{
+          path: `/watch/${id}`,
+          query: playlistId ? {playlistId} : {}
+        }"
+      >
+        {{ title }}
+      </router-link>
+      <div class="infoLine">
+        <router-link class="channelName" :to="`/channel/${channelId}`">{{ channelName }}</router-link>
+        <span v-if="!isLive && !hideViews" class="viewCount">• {{ viewCount }} views</span>
+        <span v-if="uploadedTime !== '' && !isLive" class="uploadedTime">• {{ uploadedTime }}</span>
+        <span v-if="isLive" class="viewCount">• {{ viewCount }} watching</span>
+      </div>
+      <p
+        v-if="listType !== 'grid' && appearance === 'result'"
+        class="description"
+      >
+        {{ description }}
+      </p>
+    </div>
   </div>
 </template>
 
 <script src="./ft-list-video.js" />
-<style scoped src="./ft-list-video.css" />
+<style scoped src="./ft-list-video.sass" lang="sass" />
diff --git a/src/renderer/components/watch-playlist/watch-playlist.vue b/src/renderer/components/watch-playlist/watch-playlist.vue
index 09cddb3b..052ada01 100644
--- a/src/renderer/components/watch-playlist/watch-playlist.vue
+++ b/src/renderer/components/watch-playlist/watch-playlist.vue
@@ -14,6 +14,7 @@
         />
         <ft-list-video
           v-if="result.type === 'video' || result.type === 'shortVideo'"
+          appearance="result"
           :data="result"
         />
         <ft-list-playlist
@@ -35,6 +36,7 @@
         />
         <ft-list-video
           v-if="result.type === 'video' || result.type === 'shortVideo'"
+          appearance="result"
           :data="result"
         />
         <ft-list-playlist
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 292fdedd..e15c6f38 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -37,36 +37,34 @@
 .playlistItems {
   overflow-y: auto;
   height: 395px;
-  margin-top: -15px;
-  margin-left: -16px;
-  margin-right: -16px;
 }
 
 .playlistItem {
-  height: 75px;
-  width: 100%;
+  display: grid;
+  grid-template-columns: 30px 1fr;
+  align-items: center;
   transition: background 0.2s ease-out;
 }
 
+.playlistItem:not(:last-child) {
+  margin-bottom: 8px;
+}
+
 .playlistItem:hover {
   background-color: var(--side-nav-hover-color);
   transition: background 0.2s ease-in;
 }
 
+.videoIndexContainer {
+  text-align: center;
+}
+
 .videoIndex {
-  float: left;
-  position: relative;
-  top: 15px;
-  left: 10px;
   color: var(--tertiary-text-color);
 }
 
 .videoIndexIcon {
-  float: left;
-  position: relative;
   font-size: 14px;
-  top: 32px;
-  left: 10px;
   color: var(--tertiary-text-color);
 }
 
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
index fdff39a8..1fe405e5 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
@@ -56,22 +56,24 @@
           :key="index"
           class="playlistItem"
         >
-          <font-awesome-icon
-            v-if="item.videoId === videoId"
-            class="videoIndexIcon"
-            icon="play"
-          />
-          <p
-            v-else
-            class="videoIndex"
-          >
-            {{ index + 1 }}
-          </p>
+          <div class="videoIndexContainer">
+            <font-awesome-icon
+              v-if="item.videoId === videoId"
+              class="videoIndexIcon"
+              icon="play"
+            />
+            <p
+              v-else
+              class="videoIndex"
+            >
+              {{ index + 1 }}
+            </p>
+          </div>
           <ft-list-video
             :data="item"
             :playlist-id="playlistId"
+            appearance="watchPlaylistItem"
             force-list-type="list"
-            class="videoInfo"
           />
         </div>
       </ft-flex-box>
diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css
index e83928a1..44c3783c 100644
--- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css
+++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css
@@ -1,7 +1,4 @@
-.relative {
-  position: relative;
-}
-
-.videoRecommendation {
-  margin-bottom: -15px;
+.watchVideoRecommendations {
+	display: grid;
+	grid-gap: 8px;
 }
diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue
index 72a12b8a..bdec1920 100644
--- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue
+++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue
@@ -1,5 +1,5 @@
 <template>
-  <ft-card class="relative">
+  <ft-card class="relative watchVideoRecommendations">
     <h3>
       Up Next
     </h3>
@@ -7,8 +7,8 @@
       v-for="(video, index) in data"
       :key="index"
       :data="video"
+      appearance="recommendation"
       force-list-type="list"
-      class="videoRecommendation"
     />
   </ft-card>
 </template>
diff --git a/src/renderer/sass-partials/_ft-list-item.sass b/src/renderer/sass-partials/_ft-list-item.sass
new file mode 100644
index 00000000..0ba02441
--- /dev/null
+++ b/src/renderer/sass-partials/_ft-list-item.sass
@@ -0,0 +1,151 @@
+$thumbnail-overlay-opacity: 0.85
+
+@mixin is-result
+  @at-root
+    .result#{&}
+      @content
+
+@mixin is-watch-playlist-item
+  @at-root
+    .watchPlaylistItem#{&}
+      @content
+
+@mixin is-recommendation
+  @at-root
+    .recommendation#{&}
+      @content
+
+@mixin is-sidebar-item
+  @at-root
+    .watchPlaylistItem#{&}, .recommendation#{&}
+      @content
+
+.ft-list-video
+  .videoThumbnail
+    display: flex
+    position: relative
+
+    .thumbnailLink
+      display: flex
+
+    .thumbnailImage
+      height: 130px
+
+      @include is-sidebar-item
+        height: 75px
+
+      @include is-recommendation
+        width: 163px
+        height: auto
+
+    .videoDuration
+      position: absolute
+      bottom: 4px
+      right: 4px
+      padding: 3px 4px
+      line-height: 1.2
+      font-size: 15px
+      border-radius: 5px
+      margin: 0
+      opacity: $thumbnail-overlay-opacity
+      color: var(--primary-text-color)
+      background-color: var(--card-bg-color)
+
+      &.live
+        background-color: #f22
+        color: #fff
+
+    .favoritesIcon
+      position: absolute
+      top: 3px
+      right: 3px
+      font-size: 17px
+      opacity: $thumbnail-overlay-opacity
+
+    .videoCountContainer
+      position: absolute
+      right: 0
+      top: 0
+      bottom: 0
+      width: 60px
+      font-size: 20px
+
+      .background, .inner
+        position: absolute
+        top: 0
+        bottom: 0
+        left: 0
+        right: 0
+
+      .background
+        background-color: var(--bg-color)
+        opacity: 0.9
+
+      .inner
+        display: flex
+        flex-direction: column
+        justify-content: center
+        align-items: center
+        color: var(--primary-text-color)
+
+  .videoInfo
+    flex: 1
+    position: relative
+
+    .optionsButton
+      float: right // ohhhh man, float was finally the right choice for something
+
+    .title
+      font-size: 20px
+      color: var(--primary-text-color)
+      text-decoration: none
+
+      @include is-sidebar-item
+        font-size: 15px
+
+    .infoLine
+      margin-top: 5px
+      font-size: 14px
+
+      @include is-sidebar-item
+        font-size: 12px
+
+      &, .channelName
+        color: var(--secondary-text-color)
+
+    .description
+      font-size: 14px
+      color: var(--secondary-text-color)
+
+  &.list
+    display: flex
+    align-items: flex-start
+
+    .videoThumbnail
+      margin-right: 20px
+
+      @include is-sidebar-item
+        margin-right: 10px
+
+  &.grid
+    display: flex
+    flex-direction: column
+    min-height: 230px
+    padding-bottom: 20px
+
+    .videoThumbnail
+      margin-bottom: 12px
+
+      .thumbnailImage
+        width: 100%
+
+    .title
+      font-size: 18px
+
+    .infoLine
+      margin-top: 8px
+      font-size: 13px
+
+
+.videoWatched, .live
+  text-transform: uppercase
diff --git a/src/renderer/views/Playlist/Playlist.css b/src/renderer/views/Playlist/Playlist.css
index 2f19d247..66087cb7 100644
--- a/src/renderer/views/Playlist/Playlist.css
+++ b/src/renderer/views/Playlist/Playlist.css
@@ -12,4 +12,7 @@
 .playlistItems {
   float: right;
   width: 60%;
+  padding: 10px;
+  display: grid;
+  grid-gap: 10px;
 }
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
index 4974145c..b4c12fa1 100644
--- a/src/renderer/views/Playlist/Playlist.vue
+++ b/src/renderer/views/Playlist/Playlist.vue
@@ -13,16 +13,14 @@
       v-if="!isLoading"
       class="playlistItems"
     >
-      <ft-flex-box>
-        <ft-list-video
-          v-for="(item, index) in playlistItems"
-          :key="index"
-          :data="item"
-          :playlist-id="playlistId"
-          force-list-type="list"
-          class="playlistItem"
-        />
-      </ft-flex-box>
+      <ft-list-video
+        v-for="(item, index) in playlistItems"
+        :key="index"
+        :data="item"
+        :playlist-id="playlistId"
+        appearance="result"
+        force-list-type="list"
+      />
     </ft-card>
   </div>
 </template>
diff --git a/src/renderer/views/Watch/Watch.sass b/src/renderer/views/Watch/Watch.sass
index 1372bbb7..e07dbf3e 100644
--- a/src/renderer/views/Watch/Watch.sass
+++ b/src/renderer/views/Watch/Watch.sass
@@ -50,8 +50,10 @@
       min-width: 380px
 
   .watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
-    height: 500px
     margin: 0 8px 16px
 
+  .watchVideoSidebar, .theatrePlaylist
+    height: 500px
+
   .watchVideoRecommendations, .theatreRecommendations
     margin: 0 8px 16px

From 6882630b22551cb93cc987d28d04a37e88b475e0 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 24 Jun 2020 04:04:05 +1200
Subject: [PATCH 2/9] Delete unused watch-playlist component

---
 .../watch-playlist/watch-playlist.css         |  3 --
 .../watch-playlist/watch-playlist.js          | 33 ------------
 .../watch-playlist/watch-playlist.vue         | 52 -------------------
 3 files changed, 88 deletions(-)
 delete mode 100644 src/renderer/components/watch-playlist/watch-playlist.css
 delete mode 100644 src/renderer/components/watch-playlist/watch-playlist.js
 delete mode 100644 src/renderer/components/watch-playlist/watch-playlist.vue

diff --git a/src/renderer/components/watch-playlist/watch-playlist.css b/src/renderer/components/watch-playlist/watch-playlist.css
deleted file mode 100644
index 4c88fdbd..00000000
--- a/src/renderer/components/watch-playlist/watch-playlist.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.maxWidth {
-  width: 100%;
-}
diff --git a/src/renderer/components/watch-playlist/watch-playlist.js b/src/renderer/components/watch-playlist/watch-playlist.js
deleted file mode 100644
index 7a0429e7..00000000
--- a/src/renderer/components/watch-playlist/watch-playlist.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Vue from 'vue'
-import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import FtGrid from '../ft-grid/ft-grid.vue'
-import FtListVideo from '../ft-list-video/ft-list-video.vue'
-import FtListChannel from '../ft-list-channel/ft-list-channel.vue'
-import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
-
-export default Vue.extend({
-  name: 'WatchPlaylist',
-  components: {
-    'ft-flex-box': FtFlexBox,
-    'ft-grid': FtGrid,
-    'ft-list-video': FtListVideo,
-    'ft-list-channel': FtListChannel,
-    'ft-list-playlist': FtListPlaylist
-  },
-  props: {
-    data: {
-      type: Array,
-      required: true
-    }
-  },
-  data: function () {
-    return {
-      test: 'hello'
-    }
-  },
-  computed: {
-    listType: function () {
-      return this.$store.getters.getListType
-    }
-  }
-})
diff --git a/src/renderer/components/watch-playlist/watch-playlist.vue b/src/renderer/components/watch-playlist/watch-playlist.vue
deleted file mode 100644
index 052ada01..00000000
--- a/src/renderer/components/watch-playlist/watch-playlist.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <span>
-    <ft-flex-box
-      v-if="listType === 'list'"
-    >
-      <span
-        v-for="(result, index) in data"
-        :key="index"
-        class="maxWidth"
-      >
-        <ft-list-channel
-          v-if="result.type === 'channel'"
-          :data="result"
-        />
-        <ft-list-video
-          v-if="result.type === 'video' || result.type === 'shortVideo'"
-          appearance="result"
-          :data="result"
-        />
-        <ft-list-playlist
-          v-if="result.type === 'playlist'"
-          :data="result"
-        />
-      </span>
-    </ft-flex-box>
-    <ft-grid
-      v-else
-    >
-      <span
-        v-for="(result, index) in data"
-        :key="index"
-      >
-        <ft-list-channel
-          v-if="result.type === 'channel'"
-          :data="result"
-        />
-        <ft-list-video
-          v-if="result.type === 'video' || result.type === 'shortVideo'"
-          appearance="result"
-          :data="result"
-        />
-        <ft-list-playlist
-          v-if="result.type === 'playlist'"
-          :data="result"
-        />
-      </span>
-    </ft-grid>
-  </span>
-</template>
-
-<script src="./watch-playlist.js" />
-<style scoped src="./watch-playlist.css" />

From 8bdc3640ba2dd248caf563375e3664f8ad2239ef Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 24 Jun 2020 04:08:24 +1200
Subject: [PATCH 3/9] Also rewrite ft-list-channel

---
 .../ft-element-list/ft-element-list.vue       |  1 +
 .../ft-list-channel/ft-list-channel.css       | 93 -------------------
 .../ft-list-channel/ft-list-channel.js        |  8 +-
 .../ft-list-channel/ft-list-channel.sass      |  1 +
 .../ft-list-channel/ft-list-channel.vue       | 70 ++++++++------
 .../ft-list-playlist/ft-list-playlist.vue     |  4 +-
 .../ft-list-video/ft-list-video.vue           |  4 +-
 src/renderer/sass-partials/_ft-list-item.sass | 23 +++--
 8 files changed, 67 insertions(+), 137 deletions(-)
 delete mode 100644 src/renderer/components/ft-list-channel/ft-list-channel.css
 create mode 100644 src/renderer/components/ft-list-channel/ft-list-channel.sass

diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue
index 465fa0fd..13f485f5 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.vue
+++ b/src/renderer/components/ft-element-list/ft-element-list.vue
@@ -7,6 +7,7 @@
     >
       <ft-list-channel
         v-if="result.type === 'channel'"
+        appearance="result"
         :data="result"
         :key="index"
       />
diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.css b/src/renderer/components/ft-list-channel/ft-list-channel.css
deleted file mode 100644
index 2783cb49..00000000
--- a/src/renderer/components/ft-list-channel/ft-list-channel.css
+++ /dev/null
@@ -1,93 +0,0 @@
-.channelThumbnail {
-  position: relative;
-  cursor: pointer;
-}
-
-.channelThumbnail img {
-  width: 140px;
-  height: 140px;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.channelName {
-  font-weight: bold;
-  color: var(--title-color);
-  cursor: pointer;
-  margin-bottom: 0px;
-}
-
-.subscriberCount {
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--secondary-text-color);
-}
-
-.videoCount {
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--secondary-text-color);
-}
-
-.grid {
-  width: 240px;
-  height: 250px;
-  padding: 2px;
-  overflow: hidden;
-}
-
-.grid .channelThumbnail {
-  width: 100%;
-  height: 140px;
-  margin-bottom: 5px;
-}
-
-.grid .channelThumbnail img {
-  position: relative;
-  left: 50px;
-}
-
-.grid .channelName {
-  width: 240px;
-}
-
-.list {
-  height: 140px;
-  width: 100%;
-  margin-left: 5px;
-  margin-top: 15px;
-  border-bottom: 1px solid var(--secondary-text-color);
-}
-
-.list .channelThumbnail {
-  float: left;
-  width: 240px;
-}
-
-.list .channelThumbnail img {
-  position: relative;
-  width: 120px;
-  height: 120px;
-  left: 60px;
-}
-
-.list .channelName {
-  margin-left: 250px;
-  width: 275px;
-}
-
-.list .subscriberCount {
-  margin-left: 10px;
-}
-
-.list .videoCount {
-  margin-left: 1px;
-}
-
-.list .description {
-  margin-left: 250px;
-  font-size: 13px;
-  color: var(--secondary-text-color);
-  height: 35px;
-  overflow: hidden;
-}
diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.js b/src/renderer/components/ft-list-channel/ft-list-channel.js
index 3057fdb4..c2e78f36 100644
--- a/src/renderer/components/ft-list-channel/ft-list-channel.js
+++ b/src/renderer/components/ft-list-channel/ft-list-channel.js
@@ -6,6 +6,10 @@ export default Vue.extend({
     data: {
       type: Object,
       required: true
+    },
+    appearance: {
+      type: String,
+      required: true
     }
   },
   data: function () {
@@ -32,10 +36,6 @@ export default Vue.extend({
     }
   },
   methods: {
-    goToChannel: function () {
-      this.$router.push({ path: `/channel/${this.id}` })
-    },
-
     parseLocalData: function () {
       this.thumbnail = this.data.avatar
       this.channelName = this.data.name
diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.sass b/src/renderer/components/ft-list-channel/ft-list-channel.sass
new file mode 100644
index 00000000..cdebfe2e
--- /dev/null
+++ b/src/renderer/components/ft-list-channel/ft-list-channel.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/_ft-list-item"
diff --git a/src/renderer/components/ft-list-channel/ft-list-channel.vue b/src/renderer/components/ft-list-channel/ft-list-channel.vue
index cdcef37a..e3dcadbf 100644
--- a/src/renderer/components/ft-list-channel/ft-list-channel.vue
+++ b/src/renderer/components/ft-list-channel/ft-list-channel.vue
@@ -1,40 +1,50 @@
 <template>
   <div
-    class="ft-list-channel"
-    :class="{ list: listType === 'list', grid: listType === 'grid' }"
+    class="ft-list-channel ft-list-item"
+    :class="{
+      list: listType === 'list',
+      grid: listType === 'grid',
+      [appearance]: true
+    }"
   >
     <div class="channelThumbnail">
-      <img
-        :src="thumbnail"
-        @click="goToChannel(id)"
+      <router-link
+        :to="`/channel/${id}`"
       >
+        <img
+          :src="thumbnail"
+          class="channelImage"
+        >
+      </router-link>
+    </div>
+    <div class="info">
+      <router-link
+        class="title"
+        :to="`/channel/${id}`"
+      >
+        {{ channelName }}
+      </router-link>
+      <div class="infoLine">
+        <span
+          class="subscriberCount"
+        >
+          {{ subscriberCount }} subscribers
+        </span>
+        <span
+          class="videoCount"
+        >
+          - {{ videoCount }} videos
+        </span>
+      </div>
+      <p
+        v-if="listType !== 'grid'"
+        class="description"
+      >
+        {{ description }}
+      </p>
     </div>
-    <p
-      class="channelName"
-      @click="goToChannel(id)"
-    >
-      {{ channelName }}
-    </p>
-    <span
-      class="subscriberCount"
-      @click="goToChannel(id)"
-    >
-      {{ subscriberCount }} subscribers
-    </span>
-    <span
-      class="videoCount"
-      @click="goToChannel(id)"
-    >
-      - {{ videoCount }} videos
-    </span>
-    <p
-      v-if="listType !== 'grid'"
-      class="description"
-    >
-      {{ description }}
-    </p>
   </div>
 </template>
 
 <script src="./ft-list-channel.js" />
-<style scoped src="./ft-list-channel.css" />
+<style scoped lang="sass" src="./ft-list-channel.sass" />
diff --git a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
index e48e58d5..091d576f 100644
--- a/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
+++ b/src/renderer/components/ft-list-playlist/ft-list-playlist.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="ft-list-video"
+    class="ft-list-video ft-list-item"
     :appearance="appearance"
     :class="{ list: listType === 'list', grid: listType === 'grid' }"
   >
@@ -22,7 +22,7 @@
         </div>
       </div>
     </router-link>
-    <div class="videoInfo">
+    <div class="info">
       <router-link
         class="title"
         :to="`/playlist/${playlistId}`"
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 028da9b1..afefff24 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="ft-list-video"
+    class="ft-list-video ft-list-item"
     :class="{
       list: (listType === 'list' || forceListType === 'list') && forceListType !== 'grid',
       grid: (listType === 'grid' || forceListType === 'list') && forceListType !== 'list',
@@ -49,7 +49,7 @@
         :style="{width: progressPercentage + '%'}"
       />
     </div>
-    <div class="videoInfo">
+    <div class="info">
       <ft-icon-button
         class="optionsButton"
         title="More Options"
diff --git a/src/renderer/sass-partials/_ft-list-item.sass b/src/renderer/sass-partials/_ft-list-item.sass
index 0ba02441..fd297207 100644
--- a/src/renderer/sass-partials/_ft-list-item.sass
+++ b/src/renderer/sass-partials/_ft-list-item.sass
@@ -20,7 +20,7 @@ $thumbnail-overlay-opacity: 0.85
     .watchPlaylistItem#{&}, .recommendation#{&}
       @content
 
-.ft-list-video
+.ft-list-item
   .videoThumbnail
     display: flex
     position: relative
@@ -88,7 +88,15 @@ $thumbnail-overlay-opacity: 0.85
         align-items: center
         color: var(--primary-text-color)
 
-  .videoInfo
+  .channelThumbnail
+    display: flex
+    justify-content: center
+
+    .channelImage
+      height: 130px
+      border-radius: 50%
+
+  .info
     flex: 1
     position: relative
 
@@ -121,10 +129,14 @@ $thumbnail-overlay-opacity: 0.85
     display: flex
     align-items: flex-start
 
-    .videoThumbnail
+    .videoThumbnail, .channelThumbnail
       margin-right: 20px
 
-      @include is-sidebar-item
+    .channelThumbnail
+      width: 231px
+
+    @include is-sidebar-item
+      .videoThumbnail
         margin-right: 10px
 
   &.grid
@@ -133,7 +145,7 @@ $thumbnail-overlay-opacity: 0.85
     min-height: 230px
     padding-bottom: 20px
 
-    .videoThumbnail
+    .videoThumbnail, .channelThumbnail
       margin-bottom: 12px
 
       .thumbnailImage
@@ -146,6 +158,5 @@ $thumbnail-overlay-opacity: 0.85
       margin-top: 8px
       font-size: 13px
 
-
 .videoWatched, .live
   text-transform: uppercase

From f17d715e245e6219fde2c0c9e5c8fe46e5082f6e Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 24 Jun 2020 04:39:26 +1200
Subject: [PATCH 4/9] Lint :)))

---
 .../ft-element-list/ft-element-list.vue       |  6 ++---
 .../components/ft-list-video/ft-list-video.js |  2 +-
 .../ft-list-video/ft-list-video.vue           | 22 +++++++++++++++----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue
index 13f485f5..58398c57 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.vue
+++ b/src/renderer/components/ft-element-list/ft-element-list.vue
@@ -7,21 +7,21 @@
     >
       <ft-list-channel
         v-if="result.type === 'channel'"
+        :key="index"
         appearance="result"
         :data="result"
-        :key="index"
       />
       <ft-list-video
         v-if="result.type === 'video' || result.type === 'shortVideo'"
+        :key="index"
         appearance="result"
         :data="result"
-        :key="index"
       />
       <ft-list-playlist
         v-if="result.type === 'playlist'"
+        :key="index"
         appearance="result"
         :data="result"
-        :key="index"
       />
     </template>
   </ft-auto-grid>
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index d20fba78..270bc621 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
-import FtCard from "../ft-card/ft-card.vue"
+import FtCard from '../ft-card/ft-card.vue'
 
 export default Vue.extend({
   name: 'FtListVideo',
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index afefff24..fa7a4c57 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -71,10 +71,24 @@
         {{ title }}
       </router-link>
       <div class="infoLine">
-        <router-link class="channelName" :to="`/channel/${channelId}`">{{ channelName }}</router-link>
-        <span v-if="!isLive && !hideViews" class="viewCount">• {{ viewCount }} views</span>
-        <span v-if="uploadedTime !== '' && !isLive" class="uploadedTime">• {{ uploadedTime }}</span>
-        <span v-if="isLive" class="viewCount">• {{ viewCount }} watching</span>
+        <router-link
+          class="channelName"
+          :to="`/channel/${channelId}`"
+        >
+          <span>{{ channelName }}</span>
+        </router-link>
+        <span
+          v-if="!isLive && !hideViews"
+          class="viewCount"
+        >• {{ viewCount }} views</span>
+        <span
+          v-if="uploadedTime !== '' && !isLive"
+          class="uploadedTime"
+        >• {{ uploadedTime }}</span>
+        <span
+          v-if="isLive"
+          class="viewCount"
+        >• {{ viewCount }} watching</span>
       </div>
       <p
         v-if="listType !== 'grid' && appearance === 'result'"

From 54b8d19c682e5e95ec0c01470cf0c73161423cf0 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 24 Jun 2020 22:11:37 +1200
Subject: [PATCH 5/9] Margin on fetch more results button

---
 src/renderer/views/Channel/Channel.css | 1 +
 src/renderer/views/Search/Search.css   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/renderer/views/Channel/Channel.css b/src/renderer/views/Channel/Channel.css
index 5ce595b5..7f9fa85a 100644
--- a/src/renderer/views/Channel/Channel.css
+++ b/src/renderer/views/Channel/Channel.css
@@ -123,4 +123,5 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
+  margin-top: 16px;
 }
diff --git a/src/renderer/views/Search/Search.css b/src/renderer/views/Search/Search.css
index 4c84ced8..515423f7 100644
--- a/src/renderer/views/Search/Search.css
+++ b/src/renderer/views/Search/Search.css
@@ -5,6 +5,7 @@
   line-height: 45px;
   text-align: center;
   cursor: pointer;
+  margin-top: 16px;
 }
 
 .card {

From 87575e1094d65f376f40966e18dbed98e29dc897 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 10 Jul 2020 13:16:12 +1200
Subject: [PATCH 6/9] Do not use flex for watch-video-playlist container

---
 .../components/watch-video-playlist/watch-video-playlist.vue  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
index 1fe405e5..460e1674 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
@@ -47,7 +47,7 @@
           @click="playNextVideo"
         />
       </p>
-      <ft-flex-box
+      <div
         v-if="!isLoading"
         class="playlistItems"
       >
@@ -76,7 +76,7 @@
             force-list-type="list"
           />
         </div>
-      </ft-flex-box>
+      </div>
     </div>
   </ft-card>
 </template>

From 6869bd10e0468be6c3c5170e07e2b49c3a110372 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 10 Jul 2020 13:22:13 +1200
Subject: [PATCH 7/9] Smaller star on playlist items

---
 src/renderer/components/ft-list-video/ft-list-video.vue | 4 ++--
 src/renderer/sass-partials/_ft-list-item.sass           | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index fa7a4c57..f1ab22f4 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -32,8 +32,8 @@
         v-if="!isLive"
         icon="star"
         class="favoritesIcon"
-        :padding="6"
-        :size="18"
+        :padding="appearance === `watchPlaylistItem` ? 5 : 6"
+        :size="appearance === `watchPlaylistItem` ? 14 : 18"
         :class="{ favorited: isFavorited }"
         @click="toggleSave(id)"
       />
diff --git a/src/renderer/sass-partials/_ft-list-item.sass b/src/renderer/sass-partials/_ft-list-item.sass
index fd297207..00105b98 100644
--- a/src/renderer/sass-partials/_ft-list-item.sass
+++ b/src/renderer/sass-partials/_ft-list-item.sass
@@ -55,6 +55,9 @@ $thumbnail-overlay-opacity: 0.85
         background-color: #f22
         color: #fff
 
+      @include is-watch-playlist-item
+        font-size: 12px
+
     .favoritesIcon
       position: absolute
       top: 3px

From 44d0185609235a0bbb5773c21f5dfac67ebc532e Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 10 Jul 2020 13:40:33 +1200
Subject: [PATCH 8/9] Make video duration pass clicks through

Using pointer-events: none
---
 src/renderer/sass-partials/_ft-list-item.sass | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/sass-partials/_ft-list-item.sass b/src/renderer/sass-partials/_ft-list-item.sass
index 00105b98..cda5536e 100644
--- a/src/renderer/sass-partials/_ft-list-item.sass
+++ b/src/renderer/sass-partials/_ft-list-item.sass
@@ -50,6 +50,7 @@ $thumbnail-overlay-opacity: 0.85
       opacity: $thumbnail-overlay-opacity
       color: var(--primary-text-color)
       background-color: var(--card-bg-color)
+      pointer-events: none
 
       &.live
         background-color: #f22

From c8538059a352ebd50bad3e1113b973ddbadc79c6 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 10 Jul 2020 13:42:13 +1200
Subject: [PATCH 9/9] Remove unnecessary import

---
 src/renderer/components/ft-list-video/ft-list-video.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index 270bc621..aa1e87b3 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -1,12 +1,10 @@
 import Vue from 'vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
-import FtCard from '../ft-card/ft-card.vue'
 
 export default Vue.extend({
   name: 'FtListVideo',
   components: {
-    'ft-icon-button': FtIconButton,
-    'ft-card': FtCard
+    'ft-icon-button': FtIconButton
   },
   props: {
     data: {