From 810b62bf627b2f9f9473bd57e676732c2561c62c Mon Sep 17 00:00:00 2001
From: Maurice Oegerli <maurice@oeger.li>
Date: Mon, 14 Sep 2020 23:17:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20search=20api=20progress?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/assets/styles/global/variables.scss    |  2 +-
 client/components/SectionTitle.vue            | 20 +++--
 client/components/channel/Overview.vue        | 30 ++-----
 client/components/list/ChannelEntry.vue       |  4 +-
 client/components/list/CollapsibleSection.vue | 33 +++-----
 client/components/list/PlaylistEntry.vue      | 20 +----
 client/components/list/VideoEntry.vue         |  2 +-
 client/components/search/CompactShelf.vue     |  6 +-
 client/components/search/VerticalShelf.vue    |  6 +-
 client/components/watch/RecommendedVideos.vue | 33 +++-----
 client/pages/channel/_id.vue                  | 82 +++++++------------
 client/pages/index.vue                        |  7 ++
 client/pages/results.vue                      | 70 ++++++++++++----
 client/pages/subscriptions/index.vue          | 15 ++--
 client/pages/watch.vue                        |  4 +-
 server/core/search/search.mapper.ts           | 25 ++++--
 16 files changed, 180 insertions(+), 179 deletions(-)

diff --git a/client/assets/styles/global/variables.scss b/client/assets/styles/global/variables.scss
index c59074068..e3e90c6aa 100644
--- a/client/assets/styles/global/variables.scss
+++ b/client/assets/styles/global/variables.scss
@@ -52,5 +52,5 @@ $title-color-fake-gradient: linear-gradient(to right, var(--title-color), var(--
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   // grid-auto-rows: minmax(300px, auto);
-  grid-gap: 1em 2em;
+  gap: 1em 2em;
 }
diff --git a/client/components/SectionTitle.vue b/client/components/SectionTitle.vue
index 778d7d5ce..a9226a01b 100644
--- a/client/components/SectionTitle.vue
+++ b/client/components/SectionTitle.vue
@@ -4,6 +4,7 @@
       {{ title }}
       <ChevronRightIcon v-if="link !== undefined" />
     </h2>
+    <span class="line" />
     <slot />
   </div>
 </template>
@@ -33,19 +34,18 @@ export default {
   z-index: 9;
   display: block;
   width: 100%;
+  display: flex;
+  flex-direction: row;
 
   .title {
-    position: absolute;
+    position: relative;
     top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100%;
     max-width: $main-width;
-    margin: 0 auto;
+    margin: 0;
     line-height: 80px;
     font-size: 1.7rem;
     text-align: start;
-    padding: 0 0 0 20px;
+    padding: 0;
     color: var(--title-color);
     box-sizing: border-box;
     z-index: 9;
@@ -73,5 +73,13 @@ export default {
       }
     }
   }
+  .line {
+    height: 2px;
+    flex-grow: 1;
+    background: linear-gradient(to right, transparent 5%, var(--theme-color-translucent) 15%);
+    position: relative;
+    top: 50%;
+    display: block;
+  }
 }
 </style>
diff --git a/client/components/channel/Overview.vue b/client/components/channel/Overview.vue
index 107388d24..388473f20 100644
--- a/client/components/channel/Overview.vue
+++ b/client/components/channel/Overview.vue
@@ -2,11 +2,8 @@
   <div class="overwiew">
     <div ref="channelTitle" class="channel-title-container">
       <div class="channel-title">
-        <div class="channel-thumbnail">
-          <img
-            :src="channel.authorThumbnails[3].url"
-            alt="Author Image"
-          />
+        <div v-if="channel.authorThumbnails" class="channel-thumbnail">
+          <img :src="channel.authorThumbnails[3].url" alt="Author Image" />
         </div>
         <div class="channel-info">
           <div class="channel-name">
@@ -15,34 +12,23 @@
           <div class="channel-basics">
             <div class="channel-subcount">
               <h2>
-                {{
-                  channel.subCount.toLocaleString('en-US')
-                }}
+                {{ channel.subCount.toLocaleString('en-US') }}
                 subscribers
               </h2>
             </div>
             <div class="channel-totalviews">
               <h2>
-                {{
-                  channel.totalViews.toLocaleString('en-US')
-                }}
+                {{ channel.totalViews.toLocaleString('en-US') }}
                 total views
               </h2>
             </div>
             <div class="channel-joined-on">
               <h2>
                 joined
-                {{
-                  getFormattedDate(
-                    new Date(channel.joined * 1000)
-                  )
-                }}
+                {{ getFormattedDate(new Date(channel.joined * 1000)) }}
               </h2>
             </div>
-            <div
-              v-if="channel.isFamilyFriendly"
-              class="channel-family-friendly"
-            >
+            <div v-if="channel.isFamilyFriendly" class="channel-family-friendly">
               <FamilyFriendly />
               <h2>family friendly</h2>
             </div>
@@ -76,9 +62,7 @@ export default {
   methods: {
     getFormattedDate(rawDate) {
       const date = new Date(rawDate);
-      return `${date.getDate()}.${
-        date.getMonth() + 1
-      }.${date.getFullYear()}`;
+      return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
     }
   }
 };
diff --git a/client/components/list/ChannelEntry.vue b/client/components/list/ChannelEntry.vue
index fa345b670..642f0751f 100644
--- a/client/components/list/ChannelEntry.vue
+++ b/client/components/list/ChannelEntry.vue
@@ -67,7 +67,6 @@ export default {
 
   .channel-entry-background {
     position: absolute;
-    height: 175px;
     top: 10px;
     width: 175px;
     left: 50%;
@@ -85,7 +84,7 @@ export default {
     height: 175px;
     overflow: hidden;
     position: relative;
-    box-shadow: $max-shadow;
+    box-shadow: $medium-shadow;
     margin: 0 auto;
     z-index: 11;
 
@@ -112,6 +111,7 @@ export default {
 
       .channel-entry-thmb-image {
         width: 100%;
+        display: block;
       }
     }
   }
diff --git a/client/components/list/CollapsibleSection.vue b/client/components/list/CollapsibleSection.vue
index 2d199c513..7ef03c49c 100644
--- a/client/components/list/CollapsibleSection.vue
+++ b/client/components/list/CollapsibleSection.vue
@@ -1,18 +1,11 @@
 <template>
   <div class="collapsible-section">
-    <div
-      class="title"
-      v-ripple
-      @click.prevent="toggleSection()"
-    >
+    <div v-ripple class="title" @click.prevent="toggleSection()">
       <h3 class="title-text">{{ label }}</h3>
-      <ArrowDownIcon
-        class="icon"
-        :class="{ inverted: open }"
-      />
+      <ArrowDownIcon class="icon" :class="{ inverted: open }" />
     </div>
     <transition name="section-collapse">
-      <div class="section-container" v-show="open">
+      <div v-show="open" class="section-container">
         <slot />
       </div>
     </transition>
@@ -22,22 +15,17 @@
 <script>
 import ArrowDownIcon from 'vue-material-design-icons/ChevronDown';
 export default {
-  name: 'collapsible-section',
+  name: 'CollapsibleSection',
   components: {
     ArrowDownIcon
   },
-  data: () => ({
-    open: false
-  }),
   props: {
     label: String,
     opened: Boolean
   },
-  mounted() {
-    if (this.opened) {
-      this.open = this.opened;
-    }
-  },
+  data: () => ({
+    open: false
+  }),
   watch: {
     opened(newValue, oldValue) {
       if (newValue !== oldValue) {
@@ -45,6 +33,11 @@ export default {
       }
     }
   },
+  mounted() {
+    if (this.opened) {
+      this.open = this.opened;
+    }
+  },
   methods: {
     toggleSection() {
       this.open = !this.open;
@@ -78,7 +71,7 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: 10px 10px 0 10px;
+    padding: 20px 10px 15px 10px;
     position: sticky;
     top: 0;
 
diff --git a/client/components/list/PlaylistEntry.vue b/client/components/list/PlaylistEntry.vue
index 3d3e3203f..605f301f8 100644
--- a/client/components/list/PlaylistEntry.vue
+++ b/client/components/list/PlaylistEntry.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="playlist-entry">
-    <div class="playlist-entry-background" />
     <nuxt-link
       class="playlist-entry-thmb"
       :to="{
@@ -53,33 +52,17 @@ export default {
 
 <style lang="scss">
 .playlist-entry {
-  width: 320px;
   display: flex;
   flex-direction: column;
-  padding: 10px;
   justify-content: flex-start;
   z-index: 11;
   position: relative;
 
-  .playlist-entry-background {
-    position: absolute;
-    height: 175px;
-    top: 10px;
-    left: 10px;
-    width: calc(100% - 20px);
-    background-color: #34363b;
-    z-index: 10;
-    transition-duration: 300ms;
-    transition-timing-function: $intro-easing;
-    transition-property: box-shadow;
-  }
-
   .playlist-entry-thmb {
     width: 100%;
-    height: 175px;
     overflow: hidden;
     position: relative;
-    box-shadow: $max-shadow;
+    box-shadow: $medium-shadow;
     z-index: 11;
 
     .thmb-image-container {
@@ -90,6 +73,7 @@ export default {
 
       .playlist-entry-thmb-image {
         width: 100%;
+        display: block;
       }
     }
     .playlist-entry-count {
diff --git a/client/components/list/VideoEntry.vue b/client/components/list/VideoEntry.vue
index e5c026437..43e5790f8 100644
--- a/client/components/list/VideoEntry.vue
+++ b/client/components/list/VideoEntry.vue
@@ -120,7 +120,7 @@ export default {
       left: 0;
       transition: transform 800ms 100ms $intro-easing;
       transform-style: preserve-3d;
-      box-shadow: $max-shadow;
+      box-shadow: $medium-shadow;
 
       .thmb-clip {
         overflow: hidden;
diff --git a/client/components/search/CompactShelf.vue b/client/components/search/CompactShelf.vue
index 1544462ff..64b7cc13e 100644
--- a/client/components/search/CompactShelf.vue
+++ b/client/components/search/CompactShelf.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="compact-shelf">
-    <p class="shelf-title">{{ data.title }}</p>
+    <SectionTitle :title="data.title" />
     <div class="compact-shelf-elements">
       <div v-for="(element, index) in data.items" :key="index" class="shelf-element">
         <nuxt-link
@@ -26,9 +26,13 @@
 
 <script>
 import Commons from '@/plugins/commons.js';
+import SectionTitle from '@/components/SectionTitle';
 
 export default {
   name: 'CompactShelf',
+  components: {
+    SectionTitle
+  },
   props: {
     data: Object
   },
diff --git a/client/components/search/VerticalShelf.vue b/client/components/search/VerticalShelf.vue
index ca8595575..1d0e2dec1 100644
--- a/client/components/search/VerticalShelf.vue
+++ b/client/components/search/VerticalShelf.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="vertical-shelf">
-    <p class="title">{{ data.title }}</p>
+    <SectionTitle :title="data.title" />
     <div class="vertical-shelf-container">
       <VideoEntry v-for="video in data.items" :key="video.videoId" :video="video" />
     </div>
@@ -9,11 +9,13 @@
 
 <script>
 import VideoEntry from '@/components/list/VideoEntry';
+import SectionTitle from '@/components/SectionTitle';
 
 export default {
   name: 'VerticalShelf',
   components: {
-    VideoEntry
+    VideoEntry,
+    SectionTitle
   },
   props: {
     data: Object
diff --git a/client/components/watch/RecommendedVideos.vue b/client/components/watch/RecommendedVideos.vue
index 9da3ed2f1..32eaf276f 100644
--- a/client/components/watch/RecommendedVideos.vue
+++ b/client/components/watch/RecommendedVideos.vue
@@ -1,13 +1,9 @@
 <template>
   <div class="recommended-videos">
     <div class="recommended-videos-container">
-      <VideoEntry
-        v-for="video in recommendedVideosShort"
-        :key="video.videoId"
-        :video="video"
-      />
+      <VideoEntry v-for="video in recommendedVideosShort" :key="video.videoId" :video="video" />
       <div class="show-more-container">
-        <BadgeButton :click="expand" v-if="!videosExpanded">
+        <BadgeButton v-if="!videosExpanded" :click="expand">
           <LoadMoreIcon />
           <p>show more</p>
         </BadgeButton>
@@ -22,7 +18,7 @@ import BadgeButton from '@/components/buttons/BadgeButton';
 import LoadMoreIcon from 'vue-material-design-icons/Reload';
 
 export default {
-  name: 'recommended-videos',
+  name: 'RecommendedVideos',
   components: {
     VideoEntry,
     BadgeButton,
@@ -38,22 +34,16 @@ export default {
     recommendedVideosShort: null,
     videosExpanded: false
   }),
-  mounted() {
-    this.recommendedVideosShort = this.recommendedVideos.slice(
-      0,
-      4
-    );
-  },
   watch: {
     recommendedVideos(newValue, oldValue) {
       if (newValue !== oldValue) {
-        this.recommendedVideosShort = this.recommendedVideos.slice(
-          0,
-          4
-        );
+        this.recommendedVideosShort = this.recommendedVideos.slice(0, 4);
       }
     }
   },
+  mounted() {
+    this.recommendedVideosShort = this.recommendedVideos.slice(0, 4);
+  },
   methods: {
     expand() {
       this.recommendedVideosShort = this.recommendedVideos;
@@ -66,10 +56,11 @@ export default {
 <style lang="scss">
 .recommended-videos {
   .recommended-videos-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
+    display: grid;
+    grid-template-columns: minmax(300px, 1fr);
+    // grid-auto-rows: minmax(300px, auto);
+    gap: 1em 2em;
+    padding: 0 15px;
 
     .show-more-container {
       display: flex;
diff --git a/client/pages/channel/_id.vue b/client/pages/channel/_id.vue
index 65f841e98..757ac9d84 100644
--- a/client/pages/channel/_id.vue
+++ b/client/pages/channel/_id.vue
@@ -1,31 +1,20 @@
 <template>
-  <div class="channel" ref="channel">
+  <div ref="channel" class="channel">
     <Banner
+      v-if="channel.authorBanners && channel.authorBanners.length > 0"
       class="banner"
-      v-if="
-        channel.authorBanners &&
-        channel.authorBanners.length > 0
-      "
       :src="channel.authorBanners[1].url"
     />
     <Overview :channel="channel" class="overview" />
     <div class="backdrop-image">
-      <ChannelDescription
-        :descriptionHtml="channel.descriptionHtml"
-      />
+      <ChannelDescription :description-html="channel.descriptionHtml" />
     </div>
 
     <RelatedChannels :channel="channel" />
     <div class="channel-videos-container">
       <div class="channel-title-sticky">
-        <div class="channel-sticky-thumbnail">
-          <img
-            :src="
-              commons.proxyUrl +
-              channel.authorThumbnails[0].url
-            "
-            alt="Author Image"
-          />
+        <div v-if="channel.authorThumbnails" class="channel-sticky-thumbnail">
+          <img :src="commons.proxyUrl + channel.authorThumbnails[0].url" alt="Author Image" />
         </div>
         <div class="channel-sticky-name">
           <h1>{{ channel.author }}</h1>
@@ -36,7 +25,7 @@
           v-for="video in channel.latestVideosShort"
           :key="video.videoId"
           :video="video"
-        ></VideoEntry>
+        />
       </div>
     </div>
   </div>
@@ -52,7 +41,7 @@ import ChannelDescription from '@/components/channel/ChannelDescription';
 import Invidious from '@/plugins/services/invidious';
 
 export default {
-  name: 'home',
+  name: 'Home',
   components: {
     VideoEntry,
     Banner,
@@ -60,6 +49,28 @@ export default {
     RelatedChannels,
     ChannelDescription
   },
+  asyncData({ params }) {
+    return Invidious.api
+      .channels({ id: params.id })
+      .then(response => {
+        const channel = response.data;
+        channel.latestVideosShort = channel.latestVideos.slice(0, 20);
+        return { channel: response.data };
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  },
+  data: () => ({
+    channel: [],
+    commons: Commons,
+    overviewColor: 0
+  }),
+  methods: {
+    handleScroll(e) {
+      this.$emit('scroll', e);
+    }
+  },
   head() {
     return {
       title: `${this.channel.author} - ViewTube`,
@@ -68,10 +79,7 @@ export default {
           hid: 'description',
           vmid: 'descriptionMeta',
           name: 'description',
-          content: this.channel.description.substring(
-            0,
-            100
-          )
+          content: this.channel.description.substring(0, 100)
         },
         {
           hid: 'ogTitle',
@@ -87,38 +95,10 @@ export default {
         {
           hid: 'ogDescription',
           property: 'og:description',
-          content: this.channel.description.substring(
-            0,
-            100
-          )
+          content: this.channel.description.substring(0, 100)
         }
       ]
     };
-  },
-  data: () => ({
-    channel: [],
-    commons: Commons,
-    overviewColor: 0
-  }),
-  asyncData({ params }) {
-    return Invidious.api
-      .channels({ id: params.id })
-      .then(response => {
-        const channel = response.data;
-        channel.latestVideosShort = channel.latestVideos.slice(
-          0,
-          20
-        );
-        return { channel: response.data };
-      })
-      .catch(error => {
-        console.error(error);
-      });
-  },
-  methods: {
-    handleScroll(e) {
-      this.$emit('scroll', e);
-    }
   }
 };
 </script>
diff --git a/client/pages/index.vue b/client/pages/index.vue
index e095a73ef..f2a9dbbe7 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -77,10 +77,17 @@ export default {
 
 <style lang="scss">
 .home {
+  .section-title {
+    .title {
+      margin: 0 0 0 15px;
+    }
+  }
   .home-videos-container {
     width: 100%;
     max-width: $main-width;
     margin: 0 auto;
+    padding: 0 15px;
+    box-sizing: border-box;
     z-index: 10;
     background-color: var(--bgcolor-main);
     @include viewtube-grid;
diff --git a/client/pages/results.vue b/client/pages/results.vue
index 318eb0efa..1048d9c48 100644
--- a/client/pages/results.vue
+++ b/client/pages/results.vue
@@ -35,33 +35,43 @@
       />
     </div>
     <div v-for="(results, i) in searchResults" :key="i" class="search-videos-container">
-      <div v-if="results.searchRefinements" class="related-searches-container">
+      <div
+        v-if="results.searchRefinements && results.searchRefinements.length"
+        class="related-searches-container"
+      >
         <RelatedSearches
           v-for="(item, index) in results.searchRefinements"
           :key="index"
           :data="item"
         />
       </div>
-      <div v-if="results.channels" class="channels">
+      <div v-if="results.channels && results.channels.length" class="channels">
         <ChannelEntry
           v-for="(channel, index) in results.channels"
           :key="index"
           :channel="channel"
         />
       </div>
-      <div v-if="results.verticalShelf" class="vertical-shelf">
-        <VerticalShelf v-for="(item, index) in results.verticalShelf" :key="index" :data="item" />
-      </div>
-      <div v-if="results.compactShelf" class="compact-shelf">
+      <VerticalShelf
+        v-for="(item, index) in results.verticalShelf"
+        :key="index"
+        :class="item.shelfType"
+        :data="item"
+      />
+      <div v-if="results.compactShelf && results.compactShelf.length" class="compact-shelf">
         <CompactShelf v-for="(item, index) in results.compactShelf" :key="index" :data="item" />
       </div>
-      <div v-if="results.playlists" class="playlists">
-        <PlaylistEntry v-for="(item, index) in results.playlists" :key="index" :playlist="item" />
+      <div v-if="results.playlists && results.playlists.length" class="playlists-container">
+        <SectionTitle :title="'Playlists'" />
+        <div class="playlists">
+          <PlaylistEntry v-for="(item, index) in results.playlists" :key="index" :playlist="item" />
+        </div>
       </div>
-      <div v-if="results.movies" class="movies">
+      <SectionTitle v-if="results.movies && results.movies.length" :title="'Movies'" />
+      <div v-if="results.movies && results.movies.length" class="movies">
         <MovieEntry v-for="(item, index) in results.movies" :key="index" :data="item" />
       </div>
-      <div v-if="results.videos" class="videos">
+      <div v-if="results.videos && results.videos.length" class="videos">
         <VideoEntry v-for="(video, index) in results.videos" :key="index" :video="video" />
       </div>
     </div>
@@ -87,6 +97,7 @@ import VerticalShelf from '@/components/search/VerticalShelf';
 import Spinner from '@/components/Spinner';
 import GradientBackground from '@/components/GradientBackground.vue';
 import Dropdown from '@/components/filter/Dropdown';
+import SectionTitle from '@/components/SectionTitle';
 import SearchParams from '@/plugins/services/searchParams';
 import BadgeButton from '@/components/buttons/BadgeButton';
 // import Invidious from '@/plugins/services/invidious';
@@ -106,7 +117,8 @@ export default {
     MovieEntry,
     RelatedSearches,
     CompactShelf,
-    VerticalShelf
+    VerticalShelf,
+    SectionTitle
   },
   watchQuery: true,
   asyncData({ query }) {
@@ -253,7 +265,7 @@ export default {
     display: grid;
     grid-template-columns: 200px repeat(auto-fill, minmax(300px, 1fr));
     // grid-auto-rows: minmax(300px, auto);
-    grid-gap: 1em 2em;
+    gap: 1em 2em;
 
     @media screen and (max-width: $mobile-width) {
       grid-template-columns: 1fr;
@@ -263,32 +275,56 @@ export default {
       }
     }
 
+    .section-title {
+      grid-column: 1 / -1;
+      gap: 0;
+    }
     .related-searches-container {
       grid-row: 1;
       grid-column: 1 / -1;
     }
     .channels {
       height: 100%;
+      grid-column: 1;
       position: sticky;
       top: 0;
+
+      margin: 80px 0 0 0;
+
       .channel-entry {
-        // position: sticky;
-        // top: 0;
+        padding: 0;
       }
     }
     .vertical-shelf {
-      grid-column-start: 2;
+      &.channel {
+        grid-column-start: 2;
+      }
+
+      &.general {
+        grid-column-start: 1;
+      }
       grid-column-end: -1;
     }
     .compact-shelf {
       grid-column: 1 / -1;
     }
-    .playlists {
+    .playlists-container {
+      grid-column: 1 / -1;
+
+      .playlists {
+        grid-column: 1 / -1;
+        @include viewtube-grid;
+
+        .playlist-entry {
+          padding: 0;
+        }
+      }
     }
     .movies {
+      grid-column: 1 / -1;
     }
     .videos {
-      grid-column-start: 2;
+      grid-column-start: 1;
       grid-column-end: -1;
       @include viewtube-grid;
     }
diff --git a/client/pages/subscriptions/index.vue b/client/pages/subscriptions/index.vue
index 7065929ef..e61f629cd 100644
--- a/client/pages/subscriptions/index.vue
+++ b/client/pages/subscriptions/index.vue
@@ -198,6 +198,10 @@ export default {
     max-width: $main-width;
     margin: 0 auto;
 
+    .title {
+      margin: 0 0 0 15px;
+    }
+
     .manage-btn-container {
       width: auto;
       position: absolute;
@@ -205,7 +209,7 @@ export default {
       z-index: 11;
       height: 80px;
       display: grid;
-      padding: 0 20px 0 0;
+      padding: 0 15px 0 0;
       display: flex;
       flex-direction: row;
 
@@ -224,7 +228,7 @@ export default {
     z-index: 11;
     height: 40px;
     display: flex;
-    padding: 0 20px 0 20px;
+    padding: 0 15px 0 15px;
     box-sizing: border-box;
 
     .switch {
@@ -236,11 +240,10 @@ export default {
     width: 100%;
     max-width: $main-width;
     margin: 0 auto;
+    padding: 0 10px;
+    box-sizing: border-box;
     z-index: 10;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
+    @include viewtube-grid;
 
     @media screen and (max-width: $mobile-width) {
       flex-direction: column;
diff --git a/client/pages/watch.vue b/client/pages/watch.vue
index 17da8be6b..651516376 100644
--- a/client/pages/watch.vue
+++ b/client/pages/watch.vue
@@ -404,7 +404,6 @@ export default {
     .recommended-videos {
       background-color: var(--bgcolor-main);
       z-index: 400;
-      padding: 10px 0 0 0;
       width: 100%;
 
       @media screen and (min-width: $mobile-width) {
@@ -416,7 +415,7 @@ export default {
       width: 100%;
       display: flex;
       flex-direction: column;
-      padding: 10px;
+      padding: 0 10px;
       box-sizing: border-box;
       opacity: 1;
       transition: opacity 300ms $intro-easing;
@@ -426,6 +425,7 @@ export default {
 
       @media screen and (min-width: $mobile-width) {
         width: calc(100% - 340px);
+        padding: 10px;
       }
 
       .video-infobox-title {
diff --git a/server/core/search/search.mapper.ts b/server/core/search/search.mapper.ts
index 6eb9d89b9..1535776c9 100644
--- a/server/core/search/search.mapper.ts
+++ b/server/core/search/search.mapper.ts
@@ -1,4 +1,4 @@
-import { Result, Video, Channel, Playlist, Item } from 'ytsr';
+import { Result, Video, Channel, Playlist, Item, ShelfVertical } from 'ytsr';
 import { ISearchResponse } from './interface/search-response.interface';
 import { Common } from '../common';
 
@@ -42,12 +42,8 @@ export class SearchMapper {
           result.playlists.push(playlist);
           break;
         case 'shelf-vertical':
-          result.verticalShelf.push({
-            type: 'shelf-vertical',
-            title: source.title,
-            items: source.items.map(this.mapVideo),
-            position: index
-          });
+          const verticalShelf = { ...this.mapVerticalShelf(source), ...{ position: index } };
+          result.verticalShelf.push(verticalShelf);
           break;
         case 'search-refinements':
           result.searchRefinements.push({
@@ -68,6 +64,19 @@ export class SearchMapper {
     return result;
   }
 
+  static mapVerticalShelf(source: ShelfVertical): any {
+    let shelfType = 'general';
+    if (source.title.match(/latest from/gi)) {
+      shelfType = 'channel';
+    }
+    return {
+      type: 'shelf-vertical',
+      shelfType,
+      title: source.title,
+      items: source.items.map(this.mapVideo)
+    };
+  }
+
   static mapPlaylist(source: Playlist): any {
     const playlist = {
       type: 'playlist',
@@ -102,7 +111,7 @@ export class SearchMapper {
       type: 'video',
       title: source.title,
       author: source.author.name,
-      authorId: source.author.ref,
+      authorId: Common.getChannelIdFromUrl(source.author.ref),
       description: source.description,
       publishedText: source.uploaded_at,
       videoId: Common.getVideoIdFromUrl(source.link),