From ca55cf1baee6b72a29109d4327e19146b06c2a93 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 5 Jun 2020 02:30:01 +1200
Subject: [PATCH 01/35] Rewrite watch-video-info

---
 .../watch-video-info/watch-video-info.css     | 132 ----------------
 .../watch-video-info/watch-video-info.sass    |  74 +++++++++
 .../watch-video-info/watch-video-info.vue     | 148 ++++++++++--------
 3 files changed, 155 insertions(+), 199 deletions(-)
 delete mode 100644 src/renderer/components/watch-video-info/watch-video-info.css
 create mode 100644 src/renderer/components/watch-video-info/watch-video-info.sass

diff --git a/src/renderer/components/watch-video-info/watch-video-info.css b/src/renderer/components/watch-video-info/watch-video-info.css
deleted file mode 100644
index 316666038..000000000
--- a/src/renderer/components/watch-video-info/watch-video-info.css
+++ /dev/null
@@ -1,132 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.watchVideoInfo {
-  min-height: 130px;
-}
-
-.videoTitle {
-  font-size: 22px;
-  max-width: 45%;
-}
-
-.channelInformation {
-  position: absolute;
-  bottom: 10px;
-  width: 350px;
-}
-
-.channelThumbnail {
-  cursor: pointer;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.channelName {
-  position: absolute;
-  top: 0px;
-  left: 55px;
-  font-weight: bold;
-  font-size: 15px;
-  cursor: pointer;
-}
-
-.subscribeButton {
-  height: 20px;
-  position: absolute;
-  top: 20px;
-  left: 50px;
-  line-height: 1px;
-  font-size: 0.8rem;
-}
-
-.viewCount {
-  position: absolute;
-  right: 15px;
-  bottom: 30px;
-}
-
-.likeBarContainer {
-  position: absolute;
-  right: 15px;
-  bottom: 35px;
-  width: 300px;
-  height: 5px;
-}
-
-.likeBar {
-  background-color: var(--accent-color);
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 1;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.dislikeBar {
-  background-color: #9E9E9E;
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.likeCountContainer {
-  position: absolute;
-  right: 15px;
-  bottom: 0px;
-  font-size: 12px;
-  color: var(--tertiary-text-color);
-}
-
-.videoOptions {
-  position: absolute;
-  right: 15px;
-  top: 20px;
-  width: 550px;
-}
-
-.theatreModeButton {
-  height: 30px;
-  line-height: 10px;
-  position: relative;
-  bottom: 5px;
-}
-
-.formatTypeDropdown {
-  width: 150px;
-}
-
-.shareDropdown {
-  width: 175px;
-}
-
-@media only screen and (max-width: 1500px) {
-  .videoOptions {
-    width: 350px;
-  }
-
-  .watchVideoInfo {
-    min-height: 150px;
-  }
-}
-
-@media only screen and (max-width: 1350px) {
-  .theatreModeButton {
-    display: none;
-  }
-
-  .watchVideoInfo {
-    min-height: 130px;
-  }
-
-  .videoOptions {
-    width: 350px;
-  }
-}
diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
new file mode 100644
index 000000000..694a0d79c
--- /dev/null
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -0,0 +1,74 @@
+.watchVideoInfo
+  display: grid
+  grid-template-columns: 2fr 1fr
+  padding: 16px
+
+  @media screen and (max-width: 680px)
+    grid-template-columns: auto
+
+.videoTitle
+  font-size: 20px
+  margin: 0 0 20px
+
+.channelInformation
+  .profileRow
+    display: flex
+
+  .channelThumbnail
+    border-radius: 50%
+    margin-right: 8px
+
+  .channelName
+    margin-left: 6px
+    margin-bottom: 4px
+
+  .subscribeButton
+    padding: 6px
+    font-size: 14px
+
+.viewCount
+  margin: 4px 0px 0px
+  text-align: right
+
+  @media screen and (max-width: 680px)
+    margin-top: 16px
+    text-align: left
+
+.likeSection
+  margin-top: 16px
+  font-size: 14px
+  display: grid
+  grid-template-columns: auto auto
+  justify-content: space-between
+  margin-left: auto
+  max-width: 250px
+
+  @media screen and (max-width: 680px)
+    margin-left: 0
+
+  .likeBar
+    height: 8px
+    border-radius: 4px
+    background: red
+    grid-column: 1 / 3
+    margin-bottom: 4px
+
+.optionsContainer
+  margin-top: 16px
+  display: flex
+  justify-content: flex-end
+
+  @media screen and (max-width: 680px)
+    justify-content: flex-start
+
+  .option
+    width: 36px
+    height: 36px
+    border-radius: 50%
+    background-color: rgba(255, 255, 255, 0.15)
+    display: flex
+    align-items: center
+    justify-content: center
+
+    &:not(:last-child)
+      margin-right: 4px
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 43ad7c087..c6d348668 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -1,75 +1,89 @@
 <template>
-  <ft-card class="relative watchVideoInfo">
-    <p
-      class="videoTitle"
-    >
-      {{ title }}
-    </p>
-    <div
-      class="channelInformation"
-    >
-      <img
-        :src="channelThumbnail"
-        class="channelThumbnail"
-        @click="goToChannel"
+  <ft-card class="watchVideoInfo">
+    <div>
+      <p
+        class="videoTitle"
       >
-      <span
-        class="channelName"
-        @click="goToChannel"
-      >
-        {{ channelName }}
-      </span>
-      <ft-button
-        :label="subscribedText"
-        class="subscribeButton"
-        background-color="var(--primary-color)"
-        @click="handleSubscription"
-      />
-    </div>
-    <ft-flex-box class="videoOptions">
-      <ft-button
-        label="Toggle Theatre Mode"
-        class="theatreModeButton"
-        @click="$emit('theatreMode')"
-      />
-      <ft-list-dropdown
-        :title="formatTypeLabel"
-        :label-names="formatTypeNames"
-        :label-values="formatTypeValues"
-        class="formatTypeDropdown"
-        @click="handleFormatChange"
-      />
-      <ft-list-dropdown
-        :title="shareLabel"
-        :label-names="shareNames"
-        :label-values="shareValues"
-        class="shareDropdown"
-        @click="handleShare"
-      />
-    </ft-flex-box>
-    <p class="viewCount">
-      {{ parsedViewCount }}
-    </p>
-    <div class="likeBarContainer">
+        {{ title }}
+      </p>
       <div
-        class="likeBar"
-        :style="{ width: likePercentageRatio + '%' }"
-      />
-      <div class="dislikeBar" />
+        class="channelInformation"
+      >
+        <div
+          class="profileRow"
+        >
+          <div>
+            <img
+              :src="channelThumbnail"
+              class="channelThumbnail"
+              @click="goToChannel"
+            >
+          </div>
+          <div>
+            <div
+              class="channelName"
+              @click="goToChannel"
+            >
+              {{ channelName }}
+            </div>
+            <ft-button
+              :label="subscribedText"
+              class="subscribeButton"
+              background-color="var(--primary-color)"
+              @click="handleSubscription"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <p class="viewCount">
+        {{ parsedViewCount }}
+      </p>
+      <div
+        class="likeSection"
+      >
+        <div
+          class="likeBar"
+          :style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }"
+        ></div>
+        <div class="likeCount">👍 {{ likeCount }}</div>
+        <div class="dislikeCount">{{ dislikeCount }} 👎</div>
+      </div>
+      <!--
+        <ft-flex-box class="videoOptions">
+          <ft-button
+            label="Toggle Theatre Mode"
+            class="theatreModeButton"
+            @click="$emit('theatreMode')"
+          />
+          <ft-list-dropdown
+            :title="formatTypeLabel"
+            :label-names="formatTypeNames"
+            :label-values="formatTypeValues"
+            class="formatTypeDropdown"
+            @click="handleFormatChange"
+          />
+          <ft-list-dropdown
+            :title="shareLabel"
+            :label-names="shareNames"
+            :label-values="shareValues"
+            class="shareDropdown"
+            @click="handleShare"
+          />
+        </ft-flex-box>
+      -->
+      <div class="optionsContainer">
+        <div v-for="i in [`download`, `star`, `bookmark`, `share`]" :key="i" class="option">
+          <font-awesome-icon
+            class="refreshIcon"
+            :icon="i"
+          />
+        </div>
+      </div>
     </div>
-    <p class="likeCountContainer">
-      <font-awesome-icon
-        icon="thumbs-up"
-      />
-      {{ likeCount }}
-      &nbsp;
-      <font-awesome-icon
-        icon="thumbs-down"
-      />
-      {{ dislikeCount }}
-    </p>
   </ft-card>
 </template>
 
 <script src="./watch-video-info.js" />
-<style scoped src="./watch-video-info.css" />
+<style scoped src="./watch-video-info.sass" lang="sass" />

From eb9786846515ffded2f45dc7cdf07cc9ee3513ff Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 17 Jun 2020 04:50:23 +1200
Subject: [PATCH 02/35] Fix videoJS progress bar hover flicker

---
 src/renderer/videoJS.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 580a77ec4..653491f4e 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -1815,8 +1815,8 @@ video::-webkit-media-text-track-display {
 }
 
 .video-js .vjs-progress-control:hover {
-    height: 1em;
-    top: -1em
+    height: 1.25em;
+    top: -0.95em
 }
 
 .video-js .vjs-control-bar {

From 8a73c02344ba9016b6eea846a21c5a15df1c2791 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 17 Jun 2020 04:50:46 +1200
Subject: [PATCH 03/35] Layout tweaks

---
 package-lock.json                             |  12 +-
 .../ft-icon-button/ft-icon-button.css         | 116 ------------------
 .../ft-icon-button/ft-icon-button.sass        |  85 +++++++++++++
 .../ft-icon-button/ft-icon-button.vue         |  19 +--
 .../watch-video-info/watch-video-info.sass    |   8 +-
 5 files changed, 107 insertions(+), 133 deletions(-)
 delete mode 100644 src/renderer/components/ft-icon-button/ft-icon-button.css
 create mode 100644 src/renderer/components/ft-icon-button/ft-icon-button.sass

diff --git a/package-lock.json b/package-lock.json
index 056ade5c3..8a1e2118b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10119,7 +10119,7 @@
     },
     "finalhandler": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
       "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
       "dev": true,
       "requires": {
@@ -11167,7 +11167,7 @@
     },
     "got": {
       "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "resolved": "http://registry.npmjs.org/got/-/got-9.6.0.tgz",
       "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
       "dev": true,
       "requires": {
@@ -11511,7 +11511,7 @@
     },
     "http-errors": {
       "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
       "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
       "dev": true,
       "requires": {
@@ -14687,7 +14687,7 @@
     },
     "media-typer": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
@@ -17926,7 +17926,7 @@
       "dependencies": {
         "http-errors": {
           "version": "1.6.3",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
           "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
           "dev": true,
           "requires": {
@@ -19051,7 +19051,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.css b/src/renderer/components/ft-icon-button/ft-icon-button.css
deleted file mode 100644
index 89e3fb62b..000000000
--- a/src/renderer/components/ft-icon-button/ft-icon-button.css
+++ /dev/null
@@ -1,116 +0,0 @@
-.ftIconButton {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-evenly;
-  position: relative;
-}
-
-.iconButton {
-  width: 1em;
-  height: 1em;
-  padding: 10px;
-  font-size: 20px;
-  border-radius: 50%;
-  cursor: pointer;
-  -moz-transition: background 0.2s ease-out;
-  -o-transition: background 0.2s ease-out;
-  transition: background 0.2s ease-out;
-}
-
-.shadow {
-  box-shadow: 0 1px 2px rgba(0,0,0,.5);
-}
-
-.iconButton:hover {
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.base {
-  background-color: var(--card-bg-color);
-  color: var(--primary-text-color);
-}
-
-.base:hover {
-  background-color: var(--side-nav-hover-color);
-}
-
-.base:active {
-  background-color: var(--side-nav-active-color);
-}
-
-.primary {
-  background-color: var(--primary-color);
-  color: var(--text-with-main-color);
-}
-
-.primary:hover {
-  background-color: var(--primary-color-hover);
-}
-
-.primary:active {
-  background-color: var(--primary-color-active);
-}
-
-.secondary {
-  background-color: var(--accent-color);
-  color: var(--text-with-accent-color);
-}
-
-.secondary:hover {
-  background-color: var(--accent-color-hover);
-}
-
-.secondary:active {
-  background-color: var(--accent-color-active);
-}
-
-.iconDropdown {
-  position: absolute;
-  text-align: center;
-  list-style-type: none;
-  z-index: 100;
-  margin-top: 45px;
-  font-size: 12px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.5);
-  background-color: var(--card-bg-color);
-  color: var(--secondary-text-color);
-}
-
-.iconDropdown p {
-    padding: 10px;
-    margin: 0;
-    white-space: nowrap;
-    cursor: pointer;
-    -moz-transition: background 0.2s ease-out;
-    -o-transition: background 0.2s ease-out;
-    transition: background 0.2s ease-out;
-}
-
-.iconDropdown p:hover {
-  background-color: var(--side-nav-hover-color);
-  -moz-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in;
-}
-
-.iconDropdown p:active {
-  background-color: var(--side-nav-active-color);
-  -moz-transition: background 0.1s ease-in;
-  -o-transition: background 0.1s ease-in;
-  transition: background 0.1s ease-in;
-}
-
-.iconDropdown p a {
-    text-decoration: none;
-    color: inherit;
-}
-
-.left {
-  right: 50%;
-}
-
-.right {
-  left: 50%;
-}
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.sass b/src/renderer/components/ft-icon-button/ft-icon-button.sass
new file mode 100644
index 000000000..162fef00d
--- /dev/null
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.sass
@@ -0,0 +1,85 @@
+.ftIconButton
+  display: flex
+  flex-flow: row wrap
+  justify-content: space-evenly
+  position: relative
+
+.iconButton
+  width: 1em
+  height: 1em
+  padding: 10px
+  font-size: 20px
+  border-radius: 50%
+  cursor: pointer
+  transition: background 0.15s ease-out
+
+  &.shadow
+    box-shadow: 0 1px 2px rgba(0,0,0,.5)
+
+  &.base
+    background-color: var(--card-bg-color)
+    color: var(--primary-text-color)
+
+    &:hover
+      background-color: var(--side-nav-hover-color)
+
+    &:active
+      background-color: var(--side-nav-active-color)
+
+  &.primary
+    background-color: var(--primary-color)
+    color: var(--text-with-main-color)
+
+    &:hover
+      background-color: var(--primary-color-hover)
+
+    &:active
+      background-color: var(--primary-color-active)
+
+  &.secondary
+    background-color: var(--accent-color)
+    color: var(--text-with-accent-color)
+
+    &:hover
+      background-color: var(--accent-color-hover)
+
+    &:active
+      background-color: var(--accent-color-active)
+
+.iconDropdown
+  position: absolute
+  text-align: center
+  list-style-type: none
+  z-index: 100
+  margin-top: 45px
+  font-size: 12px
+  box-shadow: 0 1px 2px rgba(0,0,0,.5)
+  background-color: var(--side-nav-color)
+  color: var(--secondary-text-color)
+  user-select: none
+
+  &.left
+    right: 50%
+
+  &.right
+    left: 50%
+
+  .list
+    margin: 0
+    padding: 0
+    list-style-type: none
+
+  .listItem
+    padding: 10px
+    margin: 0
+    white-space: nowrap
+    cursor: pointer
+    transition: background 0.2s ease-out
+
+    &:hover
+      background-color: var(--side-nav-hover-color)
+      transition: background 0.2s ease-in
+
+    &:active
+      background-color: var(--side-nav-active-color)
+      transition: background 0.1s ease-in
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 098e43984..1a5e860cb 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -21,16 +21,19 @@
         center: dropdownPosition === 'center'
       }"
     >
-      <p
-        v-for="(label, index) in dropdownNames"
-        :key="index"
-        @click="handleDropdownClick(index)"
-      >
-        {{ label }}
-      </p>
+      <ul class="list">
+        <li
+          v-for="(label, index) in dropdownNames"
+          class="listItem"
+          :key="index"
+          @click="handleDropdownClick(index)"
+        >
+          {{ label }}
+        </li>
+      </ul>
     </div>
   </div>
 </template>
 
 <script src="./ft-icon-button.js" />
-<style scoped src="./ft-icon-button.css" />
+<style scoped lang="sass" src="./ft-icon-button.sass" />
diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index b156093ba..83b804efb 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -7,7 +7,7 @@
     grid-template-columns: auto
 
 .videoTitle
-  font-size: 20px
+  font-size: 22px
   margin: 0 0 20px
 
 .channelInformation
@@ -20,12 +20,14 @@
 
   .channelName
     margin-left: 6px
-    margin-bottom: 4px
 
   .subscribeButton
-    padding: 6px
+    padding: 5px
     font-size: 14px
 
+.datePublished
+  margin-bottom: 24px
+
 .viewCount
   margin: 4px 0px 0px
   text-align: right

From 6cb99b2d2eda5efb3c636b3e41b423fb361c674d Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Wed, 17 Jun 2020 23:37:36 +1200
Subject: [PATCH 04/35] Right align like bar counters

---
 .../components/watch-video-info/watch-video-info.sass | 11 ++++++-----
 .../components/watch-video-info/watch-video-info.vue  |  6 ++++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index 83b804efb..afdecd2aa 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -39,10 +39,10 @@
 .likeSection
   margin-top: 16px
   font-size: 14px
-  display: grid
-  grid-template-columns: auto auto
-  justify-content: space-between
+  display: flex
+  flex-direction: column
   margin-left: auto
+  text-align: right
   max-width: 210px
 
   @media screen and (max-width: 680px)
@@ -51,10 +51,11 @@
   .likeBar
     height: 8px
     border-radius: 4px
-    background: red
-    grid-column: 1 / 3
     margin-bottom: 4px
 
+  .likeCount
+    margin-right: 6px
+
 .videoOptions
   margin-top: 16px
   display: flex
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 722df7d9c..30b5e9176 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -48,8 +48,10 @@
             class="likeBar"
             :style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }"
           ></div>
-          <div class="likeCount">👍 {{ likeCount }}</div>
-          <div class="dislikeCount">{{ dislikeCount }} 👎</div>
+          <div>
+            <span class="likeCount">👍 {{ likeCount }}</span>
+            <span class="dislikeCount">👎 {{ dislikeCount }}</span>
+          </div>
         </div>
       </div>
       <div class="videoOptions">

From 00269fbce18d64e4c68bb84822bd153beb61067f Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Thu, 18 Jun 2020 00:15:36 +1200
Subject: [PATCH 05/35] Redesign share button

---
 .../assets/img/invidious-logo-dark.svg        |   1 +
 .../assets/img/invidious-logo-light.svg       |   1 +
 src/renderer/assets/img/yt_logo_mono_dark.png | Bin 0 -> 7117 bytes
 .../components/ft-button/ft-button.vue        |   4 +-
 .../ft-icon-button/ft-icon-button.vue         |  10 ----
 .../ft-share-button/ft-share-button.js        |  12 +++++
 .../ft-share-button/ft-share-button.sass      |  51 ++++++++++++++++++
 .../ft-share-button/ft-share-button.vue       |  39 ++++++++++++++
 .../watch-video-info/watch-video-info.js      |   4 +-
 .../watch-video-info/watch-video-info.vue     |  10 +---
 10 files changed, 111 insertions(+), 21 deletions(-)
 create mode 100644 src/renderer/assets/img/invidious-logo-dark.svg
 create mode 100644 src/renderer/assets/img/invidious-logo-light.svg
 create mode 100644 src/renderer/assets/img/yt_logo_mono_dark.png
 create mode 100644 src/renderer/components/ft-share-button/ft-share-button.js
 create mode 100644 src/renderer/components/ft-share-button/ft-share-button.sass
 create mode 100644 src/renderer/components/ft-share-button/ft-share-button.vue

diff --git a/src/renderer/assets/img/invidious-logo-dark.svg b/src/renderer/assets/img/invidious-logo-dark.svg
new file mode 100644
index 000000000..a0542d638
--- /dev/null
+++ b/src/renderer/assets/img/invidious-logo-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="129.158" height="129.158" viewBox="0 0 34.173 34.173"><g transform="translate(26.909 -78.793)" paint-order="fill markers stroke"><circle cx="-9.822" cy="95.88" r="16.557" fill="none" stroke="#ddd" stroke-width="1.058" stroke-linecap="round" stroke-linejoin="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M-10.713 89.306l-.743 2.64 6.893 13.75h2.034zm-.743 2.64l-3.976 13.423.508.15 4.49-15.177zm-4.933 13.228v.53h2.813v-.53z" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" fill="#ddd"/><circle cx="-10.763" cy="87.186" r="1.105" fill="#00b6f0"/></g></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/img/invidious-logo-light.svg b/src/renderer/assets/img/invidious-logo-light.svg
new file mode 100644
index 000000000..d1c7c1966
--- /dev/null
+++ b/src/renderer/assets/img/invidious-logo-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="129.158" height="129.158" viewBox="0 0 34.173 34.173"><g transform="translate(26.909 -78.793)" paint-order="fill markers stroke"><circle cx="-9.822" cy="95.88" r="16.557" fill="none" stroke="#212121" stroke-width="1.058" stroke-linecap="round" stroke-linejoin="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M-10.713 89.306l-.743 2.64 6.893 13.75h2.034zm-.743 2.64l-3.976 13.423.508.15 4.49-15.177zm-4.933 13.228v.53h2.813v-.53z" color="#000" font-weight="400" font-family="sans-serif" overflow="visible" fill="#212121"/><circle cx="-10.763" cy="87.186" r="1.105" fill="#00b6f0"/></g></svg>
\ No newline at end of file
diff --git a/src/renderer/assets/img/yt_logo_mono_dark.png b/src/renderer/assets/img/yt_logo_mono_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..05a4df7c274f253ca7598f068b609f08f0c5c475
GIT binary patch
literal 7117
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
N(79u9yHvwI@_z?&Muz|Z

literal 0
HcmV?d00001

diff --git a/src/renderer/components/ft-button/ft-button.vue b/src/renderer/components/ft-button/ft-button.vue
index 4ae167733..24cbfdb61 100644
--- a/src/renderer/components/ft-button/ft-button.vue
+++ b/src/renderer/components/ft-button/ft-button.vue
@@ -8,7 +8,9 @@
     }"
     @click="$emit('click')"
   >
-    {{ label }}
+    <slot>
+      {{ label }}
+    </slot>
   </button>
 </template>
 
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 f1ff34438..e445a5d2f 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -23,16 +23,6 @@
         top: dropdownPositionY === 'top'
       }"
     >
-      <ul class="list">
-        <li
-          v-for="(label, index) in dropdownNames"
-          class="listItem"
-          :key="index"
-          @click="handleDropdownClick(index)"
-        >
-          {{ label }}
-        </li>
-      </ul>
       <slot>
         <ul
           class="list"
diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
new file mode 100644
index 000000000..50e35496e
--- /dev/null
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+export default Vue.extend({
+  name: 'FtShareButton',
+  components: {
+    'ft-icon-button': FtIconButton,
+    'ft-button': FtButton
+  }
+})
diff --git a/src/renderer/components/ft-share-button/ft-share-button.sass b/src/renderer/components/ft-share-button/ft-share-button.sass
new file mode 100644
index 000000000..828771342
--- /dev/null
+++ b/src/renderer/components/ft-share-button/ft-share-button.sass
@@ -0,0 +1,51 @@
+.shareLinks
+	display: grid
+	grid-template-rows: auto auto auto
+	grid-auto-flow: column
+	padding: 12px
+	width: max-content
+
+	.header
+		font-size: 18px
+		font-weight: bold
+		margin: 4px 0px 8px
+		color: var(--primary-text-color)
+
+	.action
+		padding: 6px
+
+	.divider
+		grid-row: span 3
+		margin: 0px 12px
+		width: 1px
+		background: var(--tertiary-text-color)
+
+	.youtubeLogo
+		height: 18px
+		width: auto
+
+		@at-root
+			.dark &
+				filter: brightness(0.868)
+
+			.light &
+				filter: invert(0.87)
+
+	.invidious
+		display: flex
+		justify-content: center
+		letter-spacing: -0.4px
+
+		.invidiousLogo
+			display: inline-block
+			width: 20px
+			height: 20px
+			background-size: cover
+			margin-right: 2px
+
+			@at-root
+				.dark &
+					background-image: url(~../../assets/img/invidious-logo-dark.svg)
+
+				.light &
+					background-image: url(~../../assets/img/invidious-logo-light.svg)
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
new file mode 100644
index 000000000..bd47d576b
--- /dev/null
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -0,0 +1,39 @@
+<template>
+	<ft-icon-button
+		title="Share Video"
+		theme="secondary"
+		icon="share-alt"
+		:forceDropdown="true"
+	>
+		<div class="shareLinks">
+			<div class="header">
+				<img class="youtubeLogo" src="~../../assets/img/yt_logo_mono_dark.png" alt="YouTube" width="794" height="178">
+			</div>
+
+			<ft-button class="action">
+				<font-awesome-icon icon="copy"></font-awesome-icon>
+				Copy link
+			</ft-button>
+			<ft-button class="action">
+				<font-awesome-icon icon="globe"></font-awesome-icon>
+				Open link
+			</ft-button>
+
+			<div class="divider"></div>
+
+			<div class="header invidious"><span class="invidiousLogo"></span>Invidious</div>
+
+			<ft-button class="action">
+				<font-awesome-icon icon="copy"></font-awesome-icon>
+				Copy link
+			</ft-button>
+			<ft-button class="action">
+				<font-awesome-icon icon="globe"></font-awesome-icon>
+				Open link
+			</ft-button>
+		</div>
+	</ft-icon-button>
+</template>
+
+<script src="./ft-share-button.js" />
+<style scoped lang="sass" src="./ft-share-button.sass" />
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index a08a45461..4adc31dcf 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -4,6 +4,7 @@ import FtButton from '../ft-button/ft-button.vue'
 import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import FtShareButton from '../ft-share-button/ft-share-button.vue'
 // import { shell } from 'electron'
 
 export default Vue.extend({
@@ -13,7 +14,8 @@ export default Vue.extend({
     'ft-button': FtButton,
     'ft-list-dropdown': FtListDropdown,
     'ft-flex-box': FtFlexBox,
-    'ft-icon-button': FtIconButton
+    'ft-icon-button': FtIconButton,
+    'ft-share-button': FtShareButton
   },
   props: {
     id: {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 30b5e9176..adfddaf61 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -71,15 +71,7 @@
           :dropdown-values="formatTypeValues"
           @click="handleFormatChange"
         />
-        <ft-icon-button
-          title="Share Video"
-          class="option"
-          theme="secondary"
-          icon="share-alt"
-          :dropdown-names="shareNames"
-          :dropdown-values="shareValues"
-          @click="handleShare"
-        />
+        <ft-share-button class="option"></ft-share-button>
       </div>
     </div>
   </ft-card>

From f799887e60c8b2c11cf3ec1f033a7b58932d5e26 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Thu, 18 Jun 2020 01:27:47 +1200
Subject: [PATCH 06/35] Button label is not required, slot is available

---
 src/renderer/components/ft-button/ft-button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-button/ft-button.js b/src/renderer/components/ft-button/ft-button.js
index 7c70ddb30..0a89b6103 100644
--- a/src/renderer/components/ft-button/ft-button.js
+++ b/src/renderer/components/ft-button/ft-button.js
@@ -15,7 +15,7 @@ export default Vue.extend({
   props: {
     label: {
       type: String,
-      required: true
+      required: false
     },
     textColor: {
       type: String,

From 721e7eda2a1b9c24ff1ab99c8f29f4849ed18fa4 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Thu, 18 Jun 2020 01:36:44 +1200
Subject: [PATCH 07/35] Share buttons do stuff

---
 .../ft-share-button/ft-share-button.js        | 63 ++++++++++++++++++
 .../ft-share-button/ft-share-button.sass      | 10 ++-
 .../ft-share-button/ft-share-button.vue       | 64 ++++++++++++++-----
 .../watch-video-info/watch-video-info.vue     |  5 +-
 4 files changed, 121 insertions(+), 21 deletions(-)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index 50e35496e..764ed906b 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -8,5 +8,68 @@ export default Vue.extend({
   components: {
     'ft-icon-button': FtIconButton,
     'ft-button': FtButton
+  },
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    invidiousInstance: function () {
+      return this.$store.getters.getInvidiousInstance
+    },
+
+    usingElectron: function () {
+      return this.$store.getters.getUsingElectron
+    },
+  },
+  methods: {
+    copy(text) {
+      navigator.clipboard.writeText(text)
+    },
+
+    open(url) {
+      if (this.usingElectron) {
+        const shell = require('electron').shell
+        shell.openExternal(url)
+      }
+    },
+
+    getInvidiousURL() {
+      return `${this.invidiousInstance}/watch?v=${this.id}`
+    },
+
+    getYoutubeURL() {
+      return `https://www.youtube.com/watch?v=${this.id}`
+    },
+
+    getYoutubeEmbedURL() {
+      return `https://www.youtube-nocookie.com/embed/${this.id}`
+    },
+
+    openInvidious() {
+      this.open(this.getInvidiousURL())
+    },
+
+    copyInvidious() {
+      this.copy(this.getInvidiousURL())
+    },
+
+    openYoutube() {
+      this.open(this.getYoutubeURL())
+    },
+
+    copyYoutube() {
+      this.copy(this.getYoutubeURL())
+    },
+
+    openYoutubeEmbed() {
+      this.open(this.getYoutubeEmbedURL())
+    },
+
+    copyYoutubeEmbed() {
+      this.copy(this.getYoutubeEmbedURL())
+    }
   }
 })
diff --git a/src/renderer/components/ft-share-button/ft-share-button.sass b/src/renderer/components/ft-share-button/ft-share-button.sass
index 828771342..212399727 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.sass
+++ b/src/renderer/components/ft-share-button/ft-share-button.sass
@@ -1,6 +1,6 @@
 .shareLinks
 	display: grid
-	grid-template-rows: auto auto auto
+	grid-template-rows: auto auto
 	grid-auto-flow: column
 	padding: 12px
 	width: max-content
@@ -11,8 +11,12 @@
 		margin: 4px 0px 8px
 		color: var(--primary-text-color)
 
-	.action
-		padding: 6px
+	.buttons
+		display: flex
+		flex-direction: column
+
+		.action
+			padding: 6px
 
 	.divider
 		grid-row: span 3
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index bd47d576b..b0bf59b4a 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -10,27 +10,57 @@
 				<img class="youtubeLogo" src="~../../assets/img/yt_logo_mono_dark.png" alt="YouTube" width="794" height="178">
 			</div>
 
-			<ft-button class="action">
-				<font-awesome-icon icon="copy"></font-awesome-icon>
-				Copy link
-			</ft-button>
-			<ft-button class="action">
-				<font-awesome-icon icon="globe"></font-awesome-icon>
-				Open link
-			</ft-button>
+			<div class="buttons">
+				<ft-button
+					class="action"
+					@click="copyYoutube()"
+				>
+					<font-awesome-icon icon="copy"/>
+					Copy link
+				</ft-button>
+				<ft-button
+					class="action"
+					@click="openYoutube()"
+				>
+					<font-awesome-icon icon="globe"/>
+					Open link
+				</ft-button>
+				<ft-button
+					class="action"
+					@click="copyYoutubeEmbed()"
+				>
+					<font-awesome-icon icon="file-video"/>
+					Copy embed
+				</ft-button>
+				<ft-button
+					class="action"
+					@click="openYoutubeEmbed()"
+				>
+					<font-awesome-icon icon="file-video"/>
+					Open embed
+				</ft-button>
+			</div>
 
 			<div class="divider"></div>
 
-			<div class="header invidious"><span class="invidiousLogo"></span>Invidious</div>
+			<div class="header invidious"><span class="invidiousLogo"/>Invidious</div>
 
-			<ft-button class="action">
-				<font-awesome-icon icon="copy"></font-awesome-icon>
-				Copy link
-			</ft-button>
-			<ft-button class="action">
-				<font-awesome-icon icon="globe"></font-awesome-icon>
-				Open link
-			</ft-button>
+			<div class="buttons">
+				<ft-button
+					class="action"
+					@click="copyInvidious()"
+				>
+					<font-awesome-icon icon="copy"/>
+					Copy link
+				</ft-button>
+				<ft-button
+					class="action"
+					@click="openInvidious()"
+				>
+					<font-awesome-icon icon="globe"/>
+					Open link
+				</ft-button>
+			</div>
 		</div>
 	</ft-icon-button>
 </template>
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index adfddaf61..397fcf7a5 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -71,7 +71,10 @@
           :dropdown-values="formatTypeValues"
           @click="handleFormatChange"
         />
-        <ft-share-button class="option"></ft-share-button>
+        <ft-share-button
+          class="option"
+          :id="id"
+        />
       </div>
     </div>
   </ft-card>

From 46fcd066219856d4c75872e57d711e6816eeff64 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Thu, 18 Jun 2020 01:40:17 +1200
Subject: [PATCH 08/35] Remove unneeded code from watch-video-info

---
 .../watch-video-info/watch-video-info.js      | 59 -------------------
 1 file changed, 59 deletions(-)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 4adc31dcf..8ca4b80ad 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -71,19 +71,6 @@ export default Vue.extend({
         'dash',
         'legacy',
         'audio'
-      ],
-      shareLabel: 'SHARE VIDEO',
-      shareNames: [
-        'COPY INVIDIOUS LINK',
-        'OPEN INVIDIOUS LINK',
-        'COPY YOUTUBE LINK',
-        'OPEN YOUTUBE LINK'
-      ],
-      shareValues: [
-        'copyInvidious',
-        'openInvidious',
-        'copyYoutube',
-        'openYoutube'
       ]
     }
   },
@@ -96,18 +83,6 @@ export default Vue.extend({
       return this.$store.getters.getUsingElectron
     },
 
-    invidiousUrl: function () {
-      return `${this.invidiousInstance}/watch?v=${this.id}`
-    },
-
-    youtubeUrl: function () {
-      return `https://www.youtube.com/watch?v=${this.id}`
-    },
-
-    youtubeEmbedUrl: function () {
-      return `https://www.youtube-nocookie.com/embed/${this.id}`
-    },
-
     totalLikeCount: function () {
       return this.likeCount + this.dislikeCount
     },
@@ -145,40 +120,6 @@ export default Vue.extend({
           this.$parent.enableAudioFormat()
           break
       }
-    },
-
-    handleShare: function (method) {
-      console.log('Handling share')
-
-      switch (method) {
-        case 'copyYoutube':
-          navigator.clipboard.writeText(this.youtubeUrl)
-          break
-        case 'openYoutube':
-          if (this.usingElectron) {
-            const shell = require('electron').shell
-            shell.openExternal(this.youtubeUrl)
-          }
-          break
-        case 'copyYoutubeEmbed':
-          navigator.clipboard.writeText(this.youtubeEmbedUrl)
-          break
-        case 'openYoutubeEmbed':
-          if (this.usingElectron) {
-            const shell = require('electron').shell
-            shell.openExternal(this.youtubeEmbedUrl)
-          }
-          break
-        case 'copyInvidious':
-          navigator.clipboard.writeText(this.invidiousUrl)
-          break
-        case 'openInvidious':
-          if (this.usingElectron) {
-            const shell = require('electron').shell
-            shell.openExternal(this.invidiousUrl)
-          }
-          break
-      }
     }
   }
 })

From 1e5c3127c7571846a46b2782da0f92c1efab9270 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Thu, 18 Jun 2020 01:58:06 +1200
Subject: [PATCH 09/35] Add invidious embed links

---
 .../components/ft-share-button/ft-share-button.js  | 14 +++++++++++++-
 .../components/ft-share-button/ft-share-button.vue | 14 ++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index 764ed906b..9a1355ffe 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -40,6 +40,10 @@ export default Vue.extend({
       return `${this.invidiousInstance}/watch?v=${this.id}`
     },
 
+    getInvidiousEmbedURL() {
+      return `${this.invidiousInstance}/embed/${this.id}`
+    },
+
     getYoutubeURL() {
       return `https://www.youtube.com/watch?v=${this.id}`
     },
@@ -70,6 +74,14 @@ export default Vue.extend({
 
     copyYoutubeEmbed() {
       this.copy(this.getYoutubeEmbedURL())
-    }
+    },
+
+    openInvidiousEmbed() {
+      this.open(this.getInvidiousEmbedURL())
+    },
+
+    copyInvidiousEmbed() {
+      this.copy(this.getInvidiousEmbedURL())
+    },
   }
 })
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index b0bf59b4a..ae9a67c93 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -60,6 +60,20 @@
 					<font-awesome-icon icon="globe"/>
 					Open link
 				</ft-button>
+				<ft-button
+					class="action"
+					@click="copyInvidiousEmbed()"
+				>
+					<font-awesome-icon icon="file-video"/>
+					Copy embed
+				</ft-button>
+				<ft-button
+					class="action"
+					@click="openInvidiousEmbed()"
+				>
+					<font-awesome-icon icon="file-video"/>
+					Open embed
+				</ft-button>
 			</div>
 		</div>
 	</ft-icon-button>

From 2c7a979ad66f9149bfd639172367aa35f0fdcd3a Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Thu, 18 Jun 2020 02:02:31 +1200
Subject: [PATCH 10/35] Change icon button z-index to 3

---
 src/renderer/components/ft-icon-button/ft-icon-button.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 162fef00d..8487f5d4b 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.sass
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.sass
@@ -50,7 +50,7 @@
   position: absolute
   text-align: center
   list-style-type: none
-  z-index: 100
+  z-index: 3
   margin-top: 45px
   font-size: 12px
   box-shadow: 0 1px 2px rgba(0,0,0,.5)

From aa417030d5a7a9f21a7a76a6e1a2b956bcdfd71c Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Thu, 18 Jun 2020 02:57:16 +1200
Subject: [PATCH 11/35] Fix video controls alignment \o/

---
 src/renderer/videoJS.css | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 653491f4e..c78087a0c 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -166,10 +166,15 @@
   font-family: VideoJS;
   font-weight: normal;
   font-style: normal;
+  position: relative;
+  top: -2px;
 }
 .vjs-icon-cog:before {
   content: "\f110";
 }
+.video-js .vjs-icon-cog {
+  font-size: 1.8em;
+}
 
 .vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder, .video-js .vjs-volume-level, .video-js .vjs-play-progress {
   font-family: VideoJS;
@@ -335,7 +340,6 @@
 
 .video-js {
   display: block;
-  vertical-align: top;
   box-sizing: border-box;
   color: #fff;
   background-color: #000;
@@ -1012,7 +1016,7 @@ body.vjs-full-window {
   transition: left 0s;
 }
 .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
-  width: 10em;
+  width: 8em;
   transition: width 0.1s;
 }
 .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
@@ -1237,6 +1241,8 @@ body.vjs-full-window {
 
 .video-js .vjs-play-control {
   cursor: pointer;
+  position: relative;
+  top: 1px;
 }
 
 .video-js .vjs-play-control .vjs-icon-placeholder {
@@ -1285,6 +1291,8 @@ video::-webkit-media-text-track-display {
 .video-js .vjs-picture-in-picture-control {
   cursor: pointer;
   flex: none;
+  position: relative;
+  top: 1px;
 }
 .video-js .vjs-fullscreen-control {
   cursor: pointer;
@@ -1293,7 +1301,7 @@ video::-webkit-media-text-track-display {
 .vjs-playback-rate > .vjs-menu-button,
 .vjs-playback-rate .vjs-playback-rate-value {
   position: absolute;
-  top: 16px;
+  top: 12px;
   left: 0;
   width: 100%;
   height: 100%;
@@ -1760,7 +1768,10 @@ video::-webkit-media-text-track-display {
     -webkit-flex: 0 1 auto;
     -ms-flex: 0 1 auto;
     flex: 0 1 auto;
-    width: auto
+    width: auto;
+    font-size: 14px;
+    position: relative;
+    top: -6px;
 }
 
 .video-js .vjs-time-control.vjs-time-divider {
@@ -1831,6 +1842,7 @@ video::-webkit-media-text-track-display {
     visibility: visible;
     opacity: 1;
     -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
     -webkit-transform: translateY(3em);
     -moz-transform: translateY(3em);
     -ms-transform: translateY(3em);
@@ -1988,3 +2000,13 @@ video::-webkit-media-text-track-display {
 .video-js .vjs-http-source-selector {
   top: 4px;
 }
+
+.vjs-subs-caps-button.vjs-control {
+  position: relative;
+  top: 1px;
+}
+
+.vjs-volume-panel .vjs-mute-control {
+  position: relative;
+  top: 1px;
+}

From 53415ba78cd26fa86fc99e265e539ef02dd93163 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Thu, 18 Jun 2020 03:24:24 +1200
Subject: [PATCH 12/35] Adjust video control icon sizes

---
 src/renderer/videoJS.css | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index c78087a0c..4d14bd6f7 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -167,13 +167,13 @@
   font-weight: normal;
   font-style: normal;
   position: relative;
-  top: -2px;
+  top: -3px;
 }
 .vjs-icon-cog:before {
   content: "\f110";
 }
 .video-js .vjs-icon-cog {
-  font-size: 1.8em;
+  font-size: 2em;
 }
 
 .vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder, .video-js .vjs-volume-level, .video-js .vjs-play-progress {
@@ -778,7 +778,7 @@ body.vjs-full-window {
 }
 
 .vjs-button > .vjs-icon-placeholder:before {
-  font-size: 1.8em;
+  font-size: 2em;
   line-height: 1.67;
 }
 
@@ -814,6 +814,7 @@ body.vjs-full-window {
   align-items: center;
   min-width: 4em;
   touch-action: none;
+  z-index: 1;
 }
 
 .video-js .vjs-progress-control.disabled {
@@ -1061,6 +1062,8 @@ body.vjs-full-window {
 .vjs-volume-bar.vjs-slider-horizontal {
   width: 5em;
   height: 0.3em;
+  position: relative;
+  top: -2px;
 }
 
 .vjs-volume-bar.vjs-slider-vertical {
@@ -1242,7 +1245,7 @@ body.vjs-full-window {
 .video-js .vjs-play-control {
   cursor: pointer;
   position: relative;
-  top: 1px;
+  top: -1px;
 }
 
 .video-js .vjs-play-control .vjs-icon-placeholder {
@@ -1292,11 +1295,13 @@ video::-webkit-media-text-track-display {
   cursor: pointer;
   flex: none;
   position: relative;
-  top: 1px;
+  top: -1px;
 }
 .video-js .vjs-fullscreen-control {
   cursor: pointer;
   flex: none;
+  position: relative;
+  top: -1px;
 }
 .vjs-playback-rate > .vjs-menu-button,
 .vjs-playback-rate .vjs-playback-rate-value {
@@ -2003,10 +2008,10 @@ video::-webkit-media-text-track-display {
 
 .vjs-subs-caps-button.vjs-control {
   position: relative;
-  top: 1px;
+  top: -1px;
 }
 
 .vjs-volume-panel .vjs-mute-control {
   position: relative;
-  top: 1px;
+  top: -1px;
 }

From e98d8a21d1f4fa8063393ec5bea3f895d42f12a4 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Thu, 18 Jun 2020 03:30:24 +1200
Subject: [PATCH 13/35] Remove deep from list classes

---
 .../ft-list-video/ft-list-video.css           | 55 +++++++++++++++++++
 .../watch-video-playlist.css                  | 29 ----------
 .../watch-video-recommendations.css           | 26 ---------
 3 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/renderer/components/ft-list-video/ft-list-video.css b/src/renderer/components/ft-list-video/ft-list-video.css
index 52c132222..7d8f22d89 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.css
+++ b/src/renderer/components/ft-list-video/ft-list-video.css
@@ -190,3 +190,58 @@
   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/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 8a0f27fc9..292fdeddb 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -75,32 +75,3 @@
   position: relative;
   bottom: 7px;
 }
-
-/deep/ .list {
-  height: 60px;
-  width: calc(100% - 30px);
-}
-
-/deep/ .list .videoThumbnail {
-  width: 100px;
-  height: 60px;
-}
-
-/deep/ .list .videoThumbnail img {
-  height: 60px;
-}
-
-/deep/ .list .videoTitle {
-  font-size: 12px;
-  margin-left: 105px;
-  margin-right: 30px;
-}
-
-/deep/ .list .channelName {
-  margin-left: 105px;
-  margin-right: 30px;
-}
-
-/deep/ .list .viewCount {
-  margin-left: 5px;
-}
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 4e95dfeda..e83928a1b 100644
--- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css
+++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css
@@ -5,29 +5,3 @@
 .videoRecommendation {
   margin-bottom: -15px;
 }
-
-/deep/ .list {
-  height: 110px;
-}
-
-/deep/ .list .videoThumbnail {
-  width: 180px;
-  height: 100px;
-}
-
-/deep/ .list .videoThumbnail img {
-  height: 100px;
-}
-
-/deep/ .list .videoTitle {
-  font-size: 12px;
-  margin-left: 185px;
-}
-
-/deep/ .list .channelName {
-  margin-left: 185px;
-}
-
-/deep/ .list .viewCount {
-  margin-left: 5px;
-}

From 0bf29a4e610771df5357993353406a2f8925e4fb Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 02:53:54 +1200
Subject: [PATCH 14/35] Share buttons use computed for URLs

---
 .../ft-share-button/ft-share-button.js        | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index 9a1355ffe..8b86f4dc3 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -23,6 +23,23 @@ export default Vue.extend({
     usingElectron: function () {
       return this.$store.getters.getUsingElectron
     },
+
+    invidiousURL() {
+      return `${this.invidiousInstance}/watch?v=${this.id}`
+    },
+
+    invidiousEmbedURL() {
+      return `${this.invidiousInstance}/embed/${this.id}`
+    },
+
+    youtubeURL() {
+      return `https://www.youtube.com/watch?v=${this.id}`
+    },
+
+    youtubeEmbedURL() {
+      return `https://www.youtube-nocookie.com/embed/${this.id}`
+    },
+
   },
   methods: {
     copy(text) {
@@ -36,52 +53,36 @@ export default Vue.extend({
       }
     },
 
-    getInvidiousURL() {
-      return `${this.invidiousInstance}/watch?v=${this.id}`
-    },
-
-    getInvidiousEmbedURL() {
-      return `${this.invidiousInstance}/embed/${this.id}`
-    },
-
-    getYoutubeURL() {
-      return `https://www.youtube.com/watch?v=${this.id}`
-    },
-
-    getYoutubeEmbedURL() {
-      return `https://www.youtube-nocookie.com/embed/${this.id}`
-    },
-
     openInvidious() {
-      this.open(this.getInvidiousURL())
+      this.open(this.invidiousURL)
     },
 
     copyInvidious() {
-      this.copy(this.getInvidiousURL())
+      this.copy(this.invidiousURL)
     },
 
     openYoutube() {
-      this.open(this.getYoutubeURL())
+      this.open(this.youtubeURL)
     },
 
     copyYoutube() {
-      this.copy(this.getYoutubeURL())
+      this.copy(this.youtubeURL)
     },
 
     openYoutubeEmbed() {
-      this.open(this.getYoutubeEmbedURL())
+      this.open(this.youtubeEmbedURL)
     },
 
     copyYoutubeEmbed() {
-      this.copy(this.getYoutubeEmbedURL())
+      this.copy(this.youtubeEmbedURL)
     },
 
     openInvidiousEmbed() {
-      this.open(this.getInvidiousEmbedURL())
+      this.open(this.invidiousEmbedURL)
     },
 
     copyInvidiousEmbed() {
-      this.copy(this.getInvidiousEmbedURL())
+      this.copy(this.invidiousEmbedURL)
     },
   }
 })

From 0587ff16cd2a9f5fad2375c87c9193203f043355 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 02:55:47 +1200
Subject: [PATCH 15/35] Use fa icons for like and dislike

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

diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 397fcf7a5..de9284f01 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -49,8 +49,8 @@
             :style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }"
           ></div>
           <div>
-            <span class="likeCount">👍 {{ likeCount }}</span>
-            <span class="dislikeCount">👎 {{ dislikeCount }}</span>
+            <span class="likeCount"><font-awesome-icon icon="thumbs-up"/> {{ likeCount }}</span>
+            <span class="dislikeCount"><font-awesome-icon icon="thumbs-down"/> {{ dislikeCount }}</span>
           </div>
         </div>
       </div>

From 0fc5a40ce9579c46884800429f9d32f81f50b006 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 03:37:44 +1200
Subject: [PATCH 16/35] Fix subs and speed adjustment controls z-index

---
 src/renderer/videoJS.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 4d14bd6f7..3e7f106ea 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -1913,6 +1913,12 @@ video::-webkit-media-text-track-display {
     width: 5.5em;
     left: 1.5em;
     padding-bottom: .5em;
+    z-index: 1;
+    bottom: 1.15em;
+}
+
+.video-js .vjs-menu-button-popup.vjs-http-source-selector .vjs-menu .vjs-menu-content {
+    bottom: 1.5em;
 }
 
 .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item,.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title {

From 104131697dbb0694836c706f0a367ab271e80613 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 03:47:43 +1200
Subject: [PATCH 17/35] Redesign watch component

---
 .../ft-video-player/ft-video-player.css       |   2 -
 src/renderer/views/Watch/Watch.css            | 123 --------------
 src/renderer/views/Watch/Watch.sass           |  54 ++++++
 src/renderer/views/Watch/Watch.vue            | 158 ++++++++++--------
 4 files changed, 140 insertions(+), 197 deletions(-)
 delete mode 100644 src/renderer/views/Watch/Watch.css
 create mode 100644 src/renderer/views/Watch/Watch.sass

diff --git a/src/renderer/components/ft-video-player/ft-video-player.css b/src/renderer/components/ft-video-player/ft-video-player.css
index 0e9e07051..0bd28f8f4 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.css
+++ b/src/renderer/components/ft-video-player/ft-video-player.css
@@ -1,9 +1,7 @@
 .relative {
   position: relative;
-  width: 85%;
 }
 
 .ftVideoPlayer {
-  width: 85%;
   max-height: 50vh;
 }
diff --git a/src/renderer/views/Watch/Watch.css b/src/renderer/views/Watch/Watch.css
deleted file mode 100644
index 0500876b1..000000000
--- a/src/renderer/views/Watch/Watch.css
+++ /dev/null
@@ -1,123 +0,0 @@
-.watchVideo {
-  width: 65%;
-  float: left;
-  margin-top: 0px;
-  margin-bottom: 10px;
-}
-
-.theatreWatchVideo {
-  float: none;
-  margin: 0 auto;
-  width: 85%;
-  margin-bottom: 10px;
-}
-
-.videoPlayer {
-  width: calc(65% + 30px);
-  float: left;
-  margin-top: 0px;
-  margin-left: 10px;
-  margin-bottom: 10px;
-}
-
-.theatrePlayer {
-  width: 100%;
-  float: none;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-.watchVideoSideBar {
-  width: 27%;
-  max-width: 425px;
-  float: right;
-  margin-bottom: 10px;
-  position: absolute;
-}
-
-.watchVideoPlaylist {
-  right: 10px;
-  top: 70px;
-  height: 500px;
-}
-
-.theatrePlaylist {
-  float: none;
-  margin: 0 auto;
-  width: 85%;
-  height: 500px;
-  margin-bottom: 10px;
-  max-width: none;
-  position: static;
-}
-
-.watchVideoRecommendations {
-  right: 10px;
-}
-
-.watchVideoRecommendationsNoCard {
-  top: 70px;
-}
-
-.watchVideoRecommendationsLowerCard {
-  top: 600px;
-}
-
-.theatreRecommendations {
-  float: none;
-  margin: 0 auto;
-  width: 85%;
-  max-width: none;
-  position: static;
-}
-
-@media only screen and (max-width: 1500px) {
-  .watchVideo {
-    width: 63%;
-  }
-
-  .videoPlayer {
-    width: calc(63% + 30px);
-  }
-
-  .theatreWatchVideo {
-    width: 85%;
-  }
-
-  .theatrePlayer {
-    width: calc(85% + 30px);
-  }
-}
-
-@media only screen and (max-width: 1350px) {
-  .watchVideo {
-    float: none;
-    margin: 0 auto;
-    width: 85%;
-    margin-bottom: 10px;
-  }
-
-  .videoPlayer {
-    float: none;
-    margin: 0 auto;
-    width: calc(85% + 30px);
-    margin-bottom: 10px;
-  }
-
-  .watchVideoPlaylist {
-    float: none;
-    margin: 0 auto;
-    margin-bottom: 10px;
-    width: 85%;
-    max-width: none;
-    position: static;
-  }
-
-  .watchVideoRecommendations {
-    float: none;
-    margin: 0 auto;
-    width: 85%;
-    max-width: none;
-    position: static;
-  }
-}
diff --git a/src/renderer/views/Watch/Watch.sass b/src/renderer/views/Watch/Watch.sass
new file mode 100644
index 000000000..e53c95346
--- /dev/null
+++ b/src/renderer/views/Watch/Watch.sass
@@ -0,0 +1,54 @@
+=dual-column-template
+  grid-template: "video video sidebar" 0fr "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
+
+=theatre-mode-template
+  grid-template: "video video video" auto "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
+
+=single-column-template
+  grid-template: "video" auto "info" auto "sidebar" auto / auto
+
+.videoLayout
+  display: grid
+  align-items: start
+  +dual-column-template
+
+  @media only screen and (max-width: 1350px)
+    +theatre-mode-template
+
+  @media only screen and (max-width: 900px)
+    +single-column-template
+
+  &.useTheatreMode
+    +theatre-mode-template
+
+  &.isLoading
+    +single-column-template
+
+  .videoArea
+    grid-area: video
+
+    .videoAreaMargin
+      margin: 0px 8px 16px
+
+    .videoPlayer
+      grid-column: 1
+      max-width: calc(80vh * 1.78)
+      margin: 0 auto
+
+  .watchVideo
+    margin: 0px 8px 16px
+    grid-column: 1
+
+  .infoArea
+    grid-area: info
+
+  .sidebarArea
+    grid-area: sidebar
+    min-width: 380px
+
+  .watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
+    height: 500px
+    margin: 0 8px 16px
+
+  .watchVideoRecommendations, .theatreRecommendations
+    margin: 0 8px 16px
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 43bf9f256..a47b638e0 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -1,81 +1,95 @@
 <template>
-  <div>
+  <div
+    class="videoLayout"
+    :class="{
+      isLoading,
+      useTheatreMode
+    }"
+  >
     <ft-loader
       v-if="isLoading"
       :fullscreen="true"
     />
-    <ft-video-player
-      v-if="!isLoading && !hidePlayer"
-      :dash-src="dashSrc"
-      :source-list="activeSourceList"
-      :caption-list="captionSourceList"
-      :storyboard-src="videoStoryboardSrc"
-      :format="activeFormat"
-      :thumbnail="thumbnail"
-      class="videoPlayer"
-      :class="{ theatrePlayer: useTheatreMode }"
-      ref="videoPlayer"
-      @ended="handleVideoEnded"
-      @error="handleVideoError"
-    />
-    <watch-video-info
-      v-if="!isLoading"
-      :id="videoId"
-      :title="videoTitle"
-      :channel-id="channelId"
-      :channel-name="channelName"
-      :channel-thumbnail="channelThumbnail"
-      :published="videoPublished"
-      :subscription-count-text="channelSubscriptionCountText"
-      :like-count="videoLikeCount"
-      :dislike-count="videoDislikeCount"
-      :view-count="videoViewCount"
-      @theatreMode="toggleTheatreMode"
-      class="watchVideo"
-      :class="{ theatreWatchVideo: useTheatreMode }"
-    />
-    <watch-video-description
-      v-if="!isLoading"
-      :published="videoPublished"
-      :description="videoDescription"
-      :description-html="videoDescriptionHtml"
-      class="watchVideo"
-      :class="{ theatreWatchVideo: useTheatreMode }"
-    />
-    <watch-video-comments
-      v-if="!isLoading && !isLive"
-      :id="videoId"
-      class="watchVideo"
-      :class="{ theatreWatchVideo: useTheatreMode }"
-    />
-    <watch-video-live-chat
-      v-if="!isLoading && isLive"
-      :video-id="videoId"
-      :channel-name="channelName"
-      class="watchVideoSideBar watchVideoPlaylist"
-      :class="{ theatrePlaylist: useTheatreMode }"
-    />
-    <watch-video-playlist
-      v-if="watchingPlaylist"
-      v-show="!isLoading"
-      :playlist-id="playlistId"
-      :video-id="videoId"
-      ref="watchVideoPlaylist"
-      class="watchVideoSideBar watchVideoPlaylist"
-      :class="{ theatrePlaylist: useTheatreMode }"
-    />
-    <watch-video-recommendations
-      v-if="!isLoading"
-      :data="recommendedVideos"
-      class="watchVideoSideBar watchVideoRecommendations"
-      :class="{
-        theatreRecommendations: useTheatreMode,
-        watchVideoRecommendationsLowerCard: watchingPlaylist || isLive,
-        watchVideoRecommendationsNoCard: !watchingPlaylist || !isLive
-      }"
-    />
+    <div class="videoArea">
+      <div class="videoAreaMargin">
+        <ft-video-player
+          v-if="!isLoading && !hidePlayer"
+          :dash-src="dashSrc"
+          :source-list="activeSourceList"
+          :caption-list="captionSourceList"
+          :storyboard-src="videoStoryboardSrc"
+          :format="activeFormat"
+          :thumbnail="thumbnail"
+          class="videoPlayer"
+          :class="{ theatrePlayer: useTheatreMode }"
+          ref="videoPlayer"
+          @ended="handleVideoEnded"
+          @error="handleVideoError"
+        />
+      </div>
+    </div>
+    <div class="infoArea">
+      <watch-video-info
+        v-if="!isLoading"
+        :id="videoId"
+        :title="videoTitle"
+        :channel-id="channelId"
+        :channel-name="channelName"
+        :channel-thumbnail="channelThumbnail"
+        :published="videoPublished"
+        :subscription-count-text="channelSubscriptionCountText"
+        :like-count="videoLikeCount"
+        :dislike-count="videoDislikeCount"
+        :view-count="videoViewCount"
+        @theatreMode="toggleTheatreMode"
+        class="watchVideo"
+        :class="{ theatreWatchVideo: useTheatreMode }"
+      />
+      <watch-video-description
+        v-if="!isLoading"
+        :published="videoPublished"
+        :description="videoDescription"
+        :description-html="videoDescriptionHtml"
+        class="watchVideo"
+        :class="{ theatreWatchVideo: useTheatreMode }"
+      />
+      <watch-video-comments
+        v-if="!isLoading && !isLive"
+        :id="videoId"
+        class="watchVideo"
+        :class="{ theatreWatchVideo: useTheatreMode }"
+      />
+    </div>
+    <div class="sidebarArea">
+      <watch-video-live-chat
+        v-if="!isLoading && isLive"
+        :video-id="videoId"
+        :channel-name="channelName"
+        class="watchVideoSideBar watchVideoPlaylist"
+        :class="{ theatrePlaylist: useTheatreMode }"
+      />
+      <watch-video-playlist
+        v-if="watchingPlaylist"
+        v-show="!isLoading"
+        :playlist-id="playlistId"
+        :video-id="videoId"
+        ref="watchVideoPlaylist"
+        class="watchVideoSideBar watchVideoPlaylist"
+        :class="{ theatrePlaylist: useTheatreMode }"
+      />
+      <watch-video-recommendations
+        v-if="!isLoading"
+        :data="recommendedVideos"
+        class="watchVideoSideBar watchVideoRecommendations"
+        :class="{
+          theatreRecommendations: useTheatreMode,
+          watchVideoRecommendationsLowerCard: watchingPlaylist || isLive,
+          watchVideoRecommendationsNoCard: !watchingPlaylist || !isLive
+        }"
+      />
+    </div>
   </div>
 </template>
 
 <script src="./Watch.js" />
-<style scoped src="./Watch.css" />
+<style scoped src="./Watch.sass" lang="sass" />

From c5cc4897ebf7293d50b1d225a67406240bbdcf2c Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 03:50:53 +1200
Subject: [PATCH 18/35] Change embed share icons to match regular icons

---
 .../components/ft-share-button/ft-share-button.vue        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index ae9a67c93..e7f264092 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -29,14 +29,14 @@
 					class="action"
 					@click="copyYoutubeEmbed()"
 				>
-					<font-awesome-icon icon="file-video"/>
+					<font-awesome-icon icon="copy"/>
 					Copy embed
 				</ft-button>
 				<ft-button
 					class="action"
 					@click="openYoutubeEmbed()"
 				>
-					<font-awesome-icon icon="file-video"/>
+					<font-awesome-icon icon="globe"/>
 					Open embed
 				</ft-button>
 			</div>
@@ -64,14 +64,14 @@
 					class="action"
 					@click="copyInvidiousEmbed()"
 				>
-					<font-awesome-icon icon="file-video"/>
+					<font-awesome-icon icon="copy"/>
 					Copy embed
 				</ft-button>
 				<ft-button
 					class="action"
 					@click="openInvidiousEmbed()"
 				>
-					<font-awesome-icon icon="file-video"/>
+					<font-awesome-icon icon="globe"/>
 					Open embed
 				</ft-button>
 			</div>

From 095a1d1123b86a6b83fbd89beb6644233408576e Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 04:01:19 +1200
Subject: [PATCH 19/35] Change button colours

---
 src/renderer/components/ft-share-button/ft-share-button.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index e7f264092..0171c48a5 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -27,6 +27,7 @@
 				</ft-button>
 				<ft-button
 					class="action"
+					backgroundColor="var(--accent-color-active)"
 					@click="copyYoutubeEmbed()"
 				>
 					<font-awesome-icon icon="copy"/>
@@ -34,6 +35,7 @@
 				</ft-button>
 				<ft-button
 					class="action"
+					backgroundColor="var(--accent-color-active)"
 					@click="openYoutubeEmbed()"
 				>
 					<font-awesome-icon icon="globe"/>
@@ -62,6 +64,7 @@
 				</ft-button>
 				<ft-button
 					class="action"
+					backgroundColor="var(--accent-color-active)"
 					@click="copyInvidiousEmbed()"
 				>
 					<font-awesome-icon icon="copy"/>
@@ -69,6 +72,7 @@
 				</ft-button>
 				<ft-button
 					class="action"
+					backgroundColor="var(--accent-color-active)"
 					@click="openInvidiousEmbed()"
 				>
 					<font-awesome-icon icon="globe"/>

From eefd2a1532970f27db129c9ec7b77d17922ee91a Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 04:01:32 +1200
Subject: [PATCH 20/35] Dropdown position left

---
 src/renderer/components/ft-icon-button/ft-icon-button.sass  | 4 ++--
 src/renderer/components/ft-share-button/ft-share-button.vue | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

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 8487f5d4b..cfa015057 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.sass
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.sass
@@ -59,10 +59,10 @@
   user-select: none
 
   &.left
-    right: 50%
+    right: calc(50% - 20px)
 
   &.right
-    left: 50%
+    right: calc(50% + 20px)
 
   .list
     margin: 0
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index 0171c48a5..e1117767e 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -3,6 +3,7 @@
 		title="Share Video"
 		theme="secondary"
 		icon="share-alt"
+		dropdown-position-x="left"
 		:forceDropdown="true"
 	>
 		<div class="shareLinks">

From 1f5517e751f9d03620e8f3254238db2e5856cad1 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 04:03:20 +1200
Subject: [PATCH 21/35] Close dropdown when share button clicked

---
 .../components/ft-share-button/ft-share-button.js         | 8 ++++++++
 .../components/ft-share-button/ft-share-button.vue        | 1 +
 2 files changed, 9 insertions(+)

diff --git a/src/renderer/components/ft-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
index 8b86f4dc3..ac9799c05 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.js
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -55,34 +55,42 @@ export default Vue.extend({
 
     openInvidious() {
       this.open(this.invidiousURL)
+      this.$refs.iconButton.toggleDropdown()
     },
 
     copyInvidious() {
       this.copy(this.invidiousURL)
+      this.$refs.iconButton.toggleDropdown()
     },
 
     openYoutube() {
       this.open(this.youtubeURL)
+      this.$refs.iconButton.toggleDropdown()
     },
 
     copyYoutube() {
       this.copy(this.youtubeURL)
+      this.$refs.iconButton.toggleDropdown()
     },
 
     openYoutubeEmbed() {
       this.open(this.youtubeEmbedURL)
+      this.$refs.iconButton.toggleDropdown()
     },
 
     copyYoutubeEmbed() {
       this.copy(this.youtubeEmbedURL)
+      this.$refs.iconButton.toggleDropdown()
     },
 
     openInvidiousEmbed() {
       this.open(this.invidiousEmbedURL)
+      this.$refs.iconButton.toggleDropdown()
     },
 
     copyInvidiousEmbed() {
       this.copy(this.invidiousEmbedURL)
+      this.$refs.iconButton.toggleDropdown()
     },
   }
 })
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
index e1117767e..61ff16c64 100644
--- a/src/renderer/components/ft-share-button/ft-share-button.vue
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -1,5 +1,6 @@
 <template>
 	<ft-icon-button
+		ref="iconButton"
 		title="Share Video"
 		theme="secondary"
 		icon="share-alt"

From 49a2a19e83266c9a1f973f4849b8dec4a4fec9ba Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 20:55:23 +1200
Subject: [PATCH 22/35] Use default empty string

---
 src/renderer/components/ft-button/ft-button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-button/ft-button.js b/src/renderer/components/ft-button/ft-button.js
index 0a89b6103..c4b664183 100644
--- a/src/renderer/components/ft-button/ft-button.js
+++ b/src/renderer/components/ft-button/ft-button.js
@@ -15,7 +15,7 @@ export default Vue.extend({
   props: {
     label: {
       type: String,
-      required: false
+      default: ""
     },
     textColor: {
       type: String,

From 700f210b9cc7ef472b15eb4ff5da43d7b198d995 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 20:56:46 +1200
Subject: [PATCH 23/35] Set like counter font size and colour

---
 src/renderer/components/watch-video-info/watch-video-info.sass | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index afdecd2aa..9f99f7718 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -38,7 +38,8 @@
 
 .likeSection
   margin-top: 16px
-  font-size: 14px
+  font-size: 12px
+  color: var(--tertiary-text-color)
   display: flex
   flex-direction: column
   margin-left: auto

From 6e7a5352f7e20f8310be79499df9b5ac9ae99f07 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Fri, 19 Jun 2020 21:17:39 +1200
Subject: [PATCH 24/35] Update tertiary colour to be accessible (4.63)

---
 src/renderer/themes.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 27b3ac37f..6e082cd3d 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -20,7 +20,7 @@
 .dark {
   --primary-text-color: #EEEEEE;
   --secondary-text-color: #ddd;
-  --tertiary-text-color: #888;
+  --tertiary-text-color: #999;
   --primary-input-color: rgba(0, 0, 0, 0.50);
   --primary-shadow-color: rgba(0, 0, 0, 0.75);
   --title-color: #EEEEEE;

From ce3ef866a13eff998fcf6adf93c9247c564a7280 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 01:38:59 +1200
Subject: [PATCH 25/35] Make entire description area scrollable

---
 .../watch-video-description/watch-video-description.css    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/watch-video-description/watch-video-description.css b/src/renderer/components/watch-video-description/watch-video-description.css
index e70352089..ef3c71c26 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.css
+++ b/src/renderer/components/watch-video-description/watch-video-description.css
@@ -1,7 +1,10 @@
+.videoDescription {
+  overflow-y: auto;
+  max-height: 300px;
+}
+
 .description {
   font-family: 'Roboto', sans-serif;
   font-size: 17px;
   white-space: pre-wrap;
-  max-height: 300px;
-  overflow-y: auto;
 }

From 59841e330be52ca12b782dc099c11294f30ed700 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 01:39:38 +1200
Subject: [PATCH 26/35] Channel name and icon use hand cursor

---
 src/renderer/components/watch-video-info/watch-video-info.sass | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index 9f99f7718..32ce84c65 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -17,9 +17,11 @@
   .channelThumbnail
     border-radius: 50%
     margin-right: 8px
+    cursor: pointer
 
   .channelName
     margin-left: 6px
+    cursor: pointer
 
   .subscribeButton
     padding: 5px

From 7e9b574c60718330a563d2f79364b4f69b4bd436 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 01:40:07 +1200
Subject: [PATCH 27/35] Fix theatre mode breaking narrow layout

---
 src/renderer/views/Watch/Watch.sass | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/renderer/views/Watch/Watch.sass b/src/renderer/views/Watch/Watch.sass
index e53c95346..1372bbb72 100644
--- a/src/renderer/views/Watch/Watch.sass
+++ b/src/renderer/views/Watch/Watch.sass
@@ -15,12 +15,13 @@
   @media only screen and (max-width: 1350px)
     +theatre-mode-template
 
+  @media only screen and (min-width: 901px)
+    &.useTheatreMode
+      +theatre-mode-template
+
   @media only screen and (max-width: 900px)
     +single-column-template
 
-  &.useTheatreMode
-    +theatre-mode-template
-
   &.isLoading
     +single-column-template
 
@@ -44,7 +45,9 @@
 
   .sidebarArea
     grid-area: sidebar
-    min-width: 380px
+
+    @media only screen and (min-width: 901px)
+      min-width: 380px
 
   .watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
     height: 500px

From cc88679d9eeca05b8095983a421acdf521a8adef Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 01:43:08 +1200
Subject: [PATCH 28/35] Move date into info and adjust subscribe button

---
 .../watch-video-description.js                |  5 ----
 .../watch-video-description.vue               |  1 -
 .../watch-video-info/watch-video-info.js      |  6 +++++
 .../watch-video-info/watch-video-info.sass    | 25 ++++++++++++++-----
 .../watch-video-info/watch-video-info.vue     |  7 ++++--
 5 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/watch-video-description/watch-video-description.js b/src/renderer/components/watch-video-description/watch-video-description.js
index c5a45e8b6..095dc0383 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.js
+++ b/src/renderer/components/watch-video-description/watch-video-description.js
@@ -23,15 +23,10 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      dateString: '',
       shownDescription: ''
     }
   },
   mounted: function () {
-    const date = new Date(this.published)
-    const dateSplit = date.toDateString().split(' ')
-    this.dateString = `${dateSplit[0]} ${dateSplit[1]} ${dateSplit[2]}, ${dateSplit[3]}`
-
     if (this.descriptionHtml !== '') {
       this.shownDescription = this.parseDescriptionHtml(this.descriptionHtml)
     } else {
diff --git a/src/renderer/components/watch-video-description/watch-video-description.vue b/src/renderer/components/watch-video-description/watch-video-description.vue
index ee3e41322..8ed65de69 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.vue
+++ b/src/renderer/components/watch-video-description/watch-video-description.vue
@@ -1,6 +1,5 @@
 <template>
   <ft-card class="videoDescription">
-    <h4>Published on {{ dateString }}</h4>
     <p
       class="description"
       v-html="shownDescription"
diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 8ca4b80ad..9100cf348 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/src/renderer/components/watch-video-info/watch-video-info.js
@@ -97,6 +97,12 @@ export default Vue.extend({
 
     subscribedText: function () {
       return `SUBSCRIBE ${this.subscriptionCountText}`
+    },
+
+    dateString() {
+      const date = new Date(this.published)
+      const dateSplit = date.toDateString().split(' ')
+      return `${dateSplit[1]} ${dateSplit[2]} ${dateSplit[3]}`
     }
   },
   methods: {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index 32ce84c65..9c7d8780b 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -13,30 +13,42 @@
 .channelInformation
   .profileRow
     display: flex
+    align-items: center
 
   .channelThumbnail
     border-radius: 50%
     margin-right: 8px
+    position: relative
+    top: -4px
     cursor: pointer
 
   .channelName
     margin-left: 6px
+    font-size: 18px
     cursor: pointer
 
   .subscribeButton
-    padding: 5px
-    font-size: 14px
+    margin-top: 8px
+    margin-left: 6px
+    padding: 6px
+    font-size: 16px
 
-.datePublished
-  margin-bottom: 24px
+.viewCount, .datePublished
+  color: var(--secondary-text-color)
+  text-align: right
+  font-size: 15px
+
+  @media screen and (max-width: 680px)
+    text-align: left
 
 .viewCount
+  margin: 6px 0px 0px
+
+.datePublished
   margin: 4px 0px 0px
-  text-align: right
 
   @media screen and (max-width: 680px)
     margin-top: 16px
-    text-align: left
 
 .likeSection
   margin-top: 16px
@@ -50,6 +62,7 @@
 
   @media screen and (max-width: 680px)
     margin-left: 0
+    text-align: left
 
   .likeBar
     height: 8px
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index de9284f01..696cda6d5 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -37,9 +37,12 @@
       </div>
     </div>
     <div>
-      <p class="viewCount">
+      <div class="datePublished">
+        Published {{ dateString }}
+      </div>
+      <div class="viewCount">
         {{ parsedViewCount }}
-      </p>
+      </div>
       <div class="likeBarContainer">
         <div
           class="likeSection"

From a6a578ffef73a845fdff3c87fd4b00cda22023dd Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 01:45:12 +1200
Subject: [PATCH 29/35] Fix icon button right align class

---
 src/renderer/components/ft-icon-button/ft-icon-button.sass | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 cfa015057..338e92286 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.sass
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.sass
@@ -62,7 +62,7 @@
     right: calc(50% - 20px)
 
   &.right
-    right: calc(50% + 20px)
+    left: calc(50% - 20px)
 
   .list
     margin: 0

From 5c67cd7271df44950b4ed469c87fdc7538c5045f Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 02:20:40 +1200
Subject: [PATCH 30/35] Improve side bar width animation

---
 src/renderer/components/side-nav/side-nav.css |  15 +-
 src/renderer/components/side-nav/side-nav.vue | 184 +++++++++---------
 2 files changed, 106 insertions(+), 93 deletions(-)

diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 0be50dbd8..bcd129f2c 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -2,19 +2,30 @@
   display: block;
   height: calc(100vh - 60px);
   width: 200px;
-  overflow-y: auto;
+  overflow-x: hidden;
   position: fixed;
   left: 0px;
   top: 0px;
   z-index: 1;
   margin-top: 60px;
-  -webkit-box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
+  box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
   background-color: var(--side-nav-color);
   transition-property: width;
   transition-duration: 150ms;
   transition-timing-function: ease-in-out;
 }
 
+.inner {
+  height: 100%;
+  width: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.closed .inner {
+  width: 80px;
+}
+
 .topNavOption {
   margin-top: 10px;
 }
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index 304358267..b4d3e362f 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -4,99 +4,101 @@
     class="sideNav"
     :class="{closed: !isOpen}"
   >
-    <div
-      class="navOption topNavOption mobileShow"
-      @click="navigate('subscriptions')"
-    >
-      <font-awesome-icon
-        icon="rss"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        Subscriptions
-      </p>
-      <font-awesome-icon
-        class="refreshIcon"
-        icon="sync"
+    <div class="inner">
+      <div
+        class="navOption topNavOption mobileShow"
+        @click="navigate('subscriptions')"
+      >
+        <font-awesome-icon
+          icon="rss"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Subscriptions
+        </p>
+        <font-awesome-icon
+          class="refreshIcon"
+          icon="sync"
+        />
+      </div>
+      <div
+        class="navOption mobileHidden"
+        @click="navigate('trending')"
+      >
+        <font-awesome-icon
+          icon="fire"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Trending
+        </p>
+      </div>
+      <div
+        class="navOption mobileHidden"
+        @click="navigate('popular')"
+      >
+        <font-awesome-icon
+          icon="users"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Most Popular
+        </p>
+      </div>
+      <div
+        class="navOption mobileShow"
+        @click="navigate('userplaylists')"
+      >
+        <font-awesome-icon
+          icon="bookmark"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Playlists
+        </p>
+      </div>
+      <side-nav-more-options
+        @navigate="navigate"
       />
+      <div
+        class="navOption mobileShow"
+        @click="navigate('history')"
+      >
+        <font-awesome-icon
+          icon="history"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          History
+        </p>
+      </div>
+      <hr>
+      <div
+        class="navOption mobileShow"
+        @click="navigate('settings')"
+      >
+        <font-awesome-icon
+          icon="sliders-h"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          Settings
+        </p>
+      </div>
+      <div
+        class="navOption mobileHidden"
+        @click="navigate('about')"
+      >
+        <font-awesome-icon
+          icon="info-circle"
+          class="navIcon"
+        />
+        <p class="navLabel">
+          About
+        </p>
+      </div>
+      <hr>
     </div>
-    <div
-      class="navOption mobileHidden"
-      @click="navigate('trending')"
-    >
-      <font-awesome-icon
-        icon="fire"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        Trending
-      </p>
-    </div>
-    <div
-      class="navOption mobileHidden"
-      @click="navigate('popular')"
-    >
-      <font-awesome-icon
-        icon="users"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        Most Popular
-      </p>
-    </div>
-    <div
-      class="navOption mobileShow"
-      @click="navigate('userplaylists')"
-    >
-      <font-awesome-icon
-        icon="bookmark"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        Playlists
-      </p>
-    </div>
-    <side-nav-more-options
-      @navigate="navigate"
-    />
-    <div
-      class="navOption mobileShow"
-      @click="navigate('history')"
-    >
-      <font-awesome-icon
-        icon="history"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        History
-      </p>
-    </div>
-    <hr>
-    <div
-      class="navOption mobileShow"
-      @click="navigate('settings')"
-    >
-      <font-awesome-icon
-        icon="sliders-h"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        Settings
-      </p>
-    </div>
-    <div
-      class="navOption mobileHidden"
-      @click="navigate('about')"
-    >
-      <font-awesome-icon
-        icon="info-circle"
-        class="navIcon"
-      />
-      <p class="navLabel">
-        About
-      </p>
-    </div>
-    <hr>
   </ft-flex-box>
 </template>
 

From 1323a9098f82539f88e2cf59d57db1c32189663f Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 02:29:43 +1200
Subject: [PATCH 31/35] ft-button: copy box shadow from icon-button

---
 src/renderer/components/ft-button/ft-button.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index f5378730f..8da474f1d 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -17,7 +17,7 @@
   font-weight: 500;
   vertical-align: middle;
   margin: 5px;
-  box-shadow: 0 0 2px -2px rgba(29, 39, 231, .1), 0 0 3px 0 rgba(29, 39, 231, .1), 0 0 5px 0 rgba(29, 39, 231, .1), 0 2px 2px -4px rgba(29, 39, 231, .1), 0 4px 8px 0 rgba(29, 39, 231, .1), 0 2px 15px 0 rgba(29, 39, 231, .1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 }
 
 .ripple {

From 225f275a96ba1e01aede58001188b64d85e7fac5 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 02:29:55 +1200
Subject: [PATCH 32/35] Adjust channel name font size

---
 .../watch-video-info/watch-video-info.sass      | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index 9c7d8780b..6f3bc5539 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -8,30 +8,29 @@
 
 .videoTitle
   font-size: 22px
-  margin: 0 0 20px
+  margin: 0 0 24px
 
 .channelInformation
   .profileRow
     display: flex
-    align-items: center
 
   .channelThumbnail
     border-radius: 50%
-    margin-right: 8px
-    position: relative
-    top: -4px
+    margin-right: 10px
     cursor: pointer
+    width: 56px
 
   .channelName
     margin-left: 6px
-    font-size: 18px
     cursor: pointer
+    position: relative
+    top: -2px
 
   .subscribeButton
-    margin-top: 8px
+    margin-top: 6px
     margin-left: 6px
     padding: 6px
-    font-size: 16px
+    font-size: 14px
 
 .viewCount, .datePublished
   color: var(--secondary-text-color)
@@ -51,7 +50,7 @@
     margin-top: 16px
 
 .likeSection
-  margin-top: 16px
+  margin-top: 12px
   font-size: 12px
   color: var(--tertiary-text-color)
   display: flex

From a5c3f4e983f38d6986befeebc3e3fba4150c85d7 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 03:30:30 +1200
Subject: [PATCH 33/35] Tweak like count spacing

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

diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
index 6f3bc5539..47a643fac 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.sass
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -41,7 +41,7 @@
     text-align: left
 
 .viewCount
-  margin: 6px 0px 0px
+  margin: 18px 0px 0px
 
 .datePublished
   margin: 4px 0px 0px
@@ -50,7 +50,7 @@
     margin-top: 16px
 
 .likeSection
-  margin-top: 12px
+  margin-top: 4px
   font-size: 12px
   color: var(--tertiary-text-color)
   display: flex

From f7bb945b688f0821d1c10498f8cd035278d51d92 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 03:32:58 +1200
Subject: [PATCH 34/35] Im Cool

---
 src/renderer/components/side-nav/side-nav.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index bcd129f2c..2415918ac 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -108,6 +108,10 @@
 }
 
 @media only screen and (max-width: 680px) {
+  .inner {
+    display: contents; /* sunglasses emoji */
+  }
+
   hr, .mobileHidden, .refreshIcon {
     display: none;
   }

From 7f6d53d7f37e790c5e79b7ecc779f49d43d83f25 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cloudrac3r@vivaldi.net>
Date: Sat, 20 Jun 2020 03:35:39 +1200
Subject: [PATCH 35/35] Im Cool (scrollbar edition)

---
 src/renderer/components/side-nav/side-nav.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 2415918ac..c5e748ada 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -132,7 +132,7 @@
     width: 100%;
     bottom: 0px;
     top: auto;
-    overflow-y: inherit;
+    overflow-y: hidden;
   }
 
   .navOption, .closed .navOption {