New smooth header not using a store

client/components/buttons/BadgeButton.vue

@@ -1,11 +1,11 @@
 <template>
   <element
     :is="internalLink ? 'nuxt-link' : 'a'"
+    v-ripple
     :to="internalLink && href ? href : '#'"
     :target="internalLink ? '' : '_blank'"
     :href="href || '#'"
     :class="{ disabled }"
-    v-ripple
     class="badge-btn"
     rel="noreferrer noopener"
     @click="clickFunction"

client/components/header/MainHeader.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="header"
-    :class="{ hidden: $store.state.scroll.scrollDown }"
-  >
+  <div class="header" :class="{ absolute: posAbsolute }" :style="{ top: `${topPosition}px` }">
     <nuxt-link class="logo-link" to="/">
       <h1 class="logo">
         <span>View</span>
@@ -17,12 +14,14 @@
     </nuxt-link>
     <MainSearchBox />
     <UserMenu />
+    <portal-target class="header-portal" name="header" :class="{ visible: !posAbsolute }" />
   </div>
 </template>
 
 <script>
 import MainSearchBox from '@/components/MainSearchBox';
 import UserMenu from '@/components/header/UserMenu';
+import { Scroll } from '@/plugins/scroll';
 
 export default {
   name: 'MainHeader',
@@ -33,7 +32,10 @@ export default {
   props: {
     scrollTop: Boolean
   },
-  data: () => ({}),
+  data: () => ({
+    posAbsolute: false,
+    topPosition: 0
+  }),
   computed: {
     currentRouteName() {
       return this.$route.name;
@@ -42,8 +44,23 @@ export default {
       return this.$store.getters['user/isLoggedIn'];
     }
   },
-  mounted() {},
-  methods: {}
+  mounted() {
+    if (process.browser) {
+      window.addEventListener('scroll', this.handleScroll, {
+        passive: true
+      });
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll, { passive: true });
+  },
+  methods: {
+    handleScroll() {
+      const { posAbsolute, topPosition } = Scroll.setScrollPosition(window.pageYOffset);
+      this.posAbsolute = posAbsolute;
+      this.topPosition = topPosition;
+    }
+  }
 };
 </script>
 
@@ -61,12 +78,21 @@ export default {
   box-shadow: $medium-shadow;
   background-color: var(--header-bgcolor);
 
-  transition: box-shadow 300ms $intro-easing,
-    background-color 300ms $intro-easing,
+  transition: box-shadow 300ms $intro-easing, background-color 300ms $intro-easing,
     transform 300ms $dynamic-easing;
 
-  &.hidden {
-    transform: translate3d(0, -$header-height - 20px, 0);
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: -100%;
+    height: $header-height;
+    width: 100%;
+    background-color: var(--header-bgcolor);
+  }
+
+  &.absolute {
+    position: absolute;
   }
 
   .logo-link {
@@ -106,8 +132,7 @@ export default {
       margin: auto;
       height: calc(#{$header-height} - 20px);
       transform: scale(0.8) translateY(-2px);
-      transition: clip-path 300ms $intro-easing,
-        transform 300ms linear;
+      transition: clip-path 300ms $intro-easing, transform 300ms linear;
     }
 
     @media screen and (max-width: $mobile-width) {

client/layouts/default.vue

@@ -50,16 +50,8 @@ export default {
       this.$store.dispatch('instances/fetchInstances');
     }
     this.$refs.app.classList += ` ${this.getThemeClass()}`;
-    if (process.browser) {
-      window.addEventListener('scroll', this.handleScroll, {
-        passive: true
-      });
-    }
   },
   methods: {
-    handleScroll(e, position) {
-      this.$store.commit('scroll/setScrollPosition', window.pageYOffset);
-    },
     getThemeClass() {
       if (process.browser) {
         return `theme--${this.$store.getters['settings/theme']}`;

client/pages/channel.vue

@@ -16,18 +16,20 @@
         <ChannelDescription :description-html="channel.descriptionHtml" />
         <RelatedChannels :channel="channel" />
       </div>
-      <div class="channel-title-sticky" :class="{ top: $store.state.scroll.scrollDown }">
-        <div v-if="channel.authorThumbnails" class="channel-sticky-thumbnail">
-          <img :src="commons.proxyUrl + channel.authorThumbnails[0].url" alt="Author Image" />
+      <portal to="header">
+        <div class="channel-title-sticky">
+          <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>
+            <BadgeButton class="scroll-top-btn" :click="onScrollTop"><UpIcon /></BadgeButton>
+          </div>
         </div>
-        <div class="channel-sticky-name">
-          <h1>{{ channel.author }}</h1>
-          <SubscribeButton :channel-id="channel.authorId" />
-        </div>
-      </div>
+      </portal>
       <div class="channel-videos-container">
         <div class="channel-videos">
-          <VideoEntry v-for="video in channel.latestVideos" :key="video.videoId" :video="video" />
+          <VideoEntry v-for="(video, index) in channel.latestVideos" :key="index" :video="video" />
         </div>
       </div>
     </div>
@@ -43,7 +45,8 @@ import RelatedChannels from '@/components/channel/RelatedChannels';
 import ChannelDescription from '@/components/channel/ChannelDescription';
 import Spinner from '@/components/Spinner';
 import Invidious from '@/plugins/services/invidious';
-import SubscribeButton from '@/components/buttons/SubscribeButton';
+import BadgeButton from '@/components/buttons/BadgeButton';
+import UpIcon from 'vue-material-design-icons/ArrowUp';
 
 export default {
   name: 'Home',
@@ -54,7 +57,8 @@ export default {
     RelatedChannels,
     ChannelDescription,
     Spinner,
-    SubscribeButton
+    BadgeButton,
+    UpIcon
   },
   data: () => ({
     channel: null,
@@ -68,7 +72,6 @@ export default {
     invidious.api
       .channels({ id: params.id })
       .then(response => {
-        console.log(response.data);
         this.channel = response.data;
         this.loading = false;
         document.title = `${this.channel.author} :: ViewTube`;
@@ -78,8 +81,8 @@ export default {
       });
   },
   methods: {
-    handleScroll(e) {
-      this.$emit('scroll', e);
+    onScrollTop() {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
     }
   },
   head() {
@@ -115,6 +118,51 @@ export default {
 </script>
 
 <style lang="scss">
+.visible {
+  .channel-title-sticky {
+    transform: translate3d(0, $header-height, 0);
+  }
+}
+
+.channel-title-sticky {
+  background-color: var(--bgcolor-main);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: $header-height;
+  overflow: hidden;
+  z-index: 11;
+  display: flex;
+  flex-direction: row;
+  transform: translate3d(0, 0, 0);
+  transition: transform 300ms $dynamic-easing;
+  box-shadow: $low-shadow;
+
+  .channel-sticky-thumbnail {
+    height: $header-height;
+    margin: 0;
+    padding: 0;
+
+    img {
+      height: 100%;
+    }
+  }
+
+  .channel-sticky-name {
+    color: var(--title-color);
+    font-family: $default-font;
+    margin: 10px 0 10px 0;
+    font-size: 0.8rem;
+    margin: auto 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-grow: 1;
+    padding: 0 15px;
+  }
+}
+
 .loading-channel {
   position: absolute;
   left: 50%;
@@ -139,48 +187,6 @@ export default {
     z-index: 13;
   }
 
-  .channel-title-sticky {
-    background-color: var(--bgcolor-main);
-    position: fixed;
-    top: 0;
-    width: 100%;
-    height: $header-height;
-    overflow: hidden;
-    z-index: 11;
-    display: flex;
-    flex-direction: row;
-    transform: translate3d(0, $header-height, 0);
-    transition: transform 300ms $dynamic-easing;
-    box-shadow: $low-shadow;
-
-    &.top {
-      transform: translate3d(0, 0, 0);
-    }
-
-    .channel-sticky-thumbnail {
-      height: $header-height - 20px;
-      margin: 0;
-      padding: 10px;
-
-      img {
-        height: 100%;
-      }
-    }
-
-    .channel-sticky-name {
-      color: var(--title-color);
-      font-family: $default-font;
-      margin: 10px 0 10px 0;
-      font-size: 0.8rem;
-      margin: auto 0;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      flex-grow: 1;
-      padding: 0 15px 0 0;
-    }
-  }
-
   .channel-videos-container {
     width: 100%;
     z-index: 9;

client/plugins/scroll.js

@@ -0,0 +1,29 @@
+export const Scroll = {
+  scrollPosition: 0,
+  prevScrollPosition: 0,
+  absoluteStartPosition: 0,
+  posAbsolute: false,
+
+  setScrollPosition(pos) {
+    this.scrollPosition = pos;
+    if (this.scrollPosition > this.prevScrollPosition && this.posAbsolute === false) {
+      this.absoluteStartPosition = this.scrollPosition;
+      this.posAbsolute = true;
+    }
+    if (this.scrollPosition < this.absoluteStartPosition && this.posAbsolute === true) {
+      this.posAbsolute = false;
+    }
+    if (
+      this.scrollPosition < this.prevScrollPosition &&
+      this.scrollPosition > this.absoluteStartPosition + 80 &&
+      this.posAbsolute === true
+    ) {
+      this.absoluteStartPosition = this.scrollPosition - 80;
+    }
+    this.prevScrollPosition = this.scrollPosition;
+    return {
+      topPosition: this.posAbsolute ? this.absoluteStartPosition : 0,
+      posAbsolute: this.posAbsolute
+    };
+  }
+};