Port over Channel

src/routes/Channel.vue

@@ -1,39 +1,48 @@
 <template>
     <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
-
-    <div v-else-if="channel">
-        <h1 class="uk-text-center"><img height="48" width="48" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
-        <img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
-        <p style="white-space: pre-wrap">{{ channel.description }}</p>
-
-        <button
-            v-if="authenticated"
-            @click="subscribeHandler"
-            class="uk-button uk-button-small"
-            style="background: #222"
-            type="button"
-        >
-            {{ subscribed ? "Unsubscribe" : "Subscribe" }}
-        </button>
-
-        <hr />
-
-        <div class="uk-grid-xl" uk-grid="parallax: 0">
+    <v-container fluid v-else-if="channel">
+      <v-row>
+        <v-col md="8" offset-md="2">
+          <v-card class="pa-4">
             <div
-                class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
-                v-bind:key="video.url"
-                v-for="video in this.channel.relatedStreams"
+              style="justify-items: center; align-items: center; vertical-align: center; display: flex;"
             >
-                <VideoItem :video="video" height="94" width="168" hideChannel />
+              <div>
+                <v-img :src="channel.avatarUrl" height="48" width="48" class="rounded-circle" />
+              </div>
+              <div class="text-h5 ml-4">
+                {{ channel.name }}
+              </div>
             </div>
-        </div>
-    </div>
+            <v-card-text>
+              <div v-html="renderedDescription" />
+            </v-card-text>
+          </v-card>
+
+          <v-divider class="my-4" />
+
+          <div v-if="this.channel && this.channel.relatedStreams">
+            <v-row v-for="(row, rowId) in chunkedByFour" :key="rowId">
+              <v-col md="3" v-for="(video, videoId) in row" :key="videoId">
+                <VideoItem :height="270" :width="480" :video="video" />
+              </v-col>
+            </v-row>
+            <v-progress-linear indeterminate v-intersect="onRelatedStreamsEndIntersect" />
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
 </template>
 
 <script>
+import marked from 'marked'
+import { chunk as _chunk } from 'lodash-es'
+
 import ErrorHandler from '@/components/ErrorHandler'
 import VideoItem from '@/components/VideoItem.vue'
 
+import { LibPiped } from '@/tools/libpiped'
+
 export default {
   data () {
     return {
@@ -44,31 +53,11 @@ export default {
   mounted () {
     this.getChannelData()
   },
-  activated () {
-    window.addEventListener('scroll', this.handleScroll)
-  },
-  deactivated () {
-    window.removeEventListener('scroll', this.handleScroll)
-  },
   methods: {
-    async fetchSubscribedStatus () {
-      this.fetchJson(
-        this.apiUrl() + '/subscribed',
-        {
-          channelId: this.channel.id
-        },
-        {
-          headers: {
-            Authorization: this.getAuthToken()
-          }
-        }
-      ).then(json => {
-        this.subscribed = json.subscribed
-      })
-    },
     async fetchChannel () {
-      const url = this.apiUrl() + '/' + this.$route.params.path + '/' + this.$route.params.channelId
-      return await this.fetchJson(url)
+      return this.$store.dispatch('fetchJson', {
+        path: '/' + this.$route.params.path + '/' + this.$route.params.channelId
+      })
     },
     async getChannelData () {
       this.fetchChannel()
@@ -76,36 +65,37 @@ export default {
         .then(() => {
           if (!this.channel.error) {
             document.title = this.channel.name + ' - Piped'
-            if (this.authenticated) this.fetchSubscribedStatus()
           }
         })
     },
-    handleScroll () {
-      if (this.loading || !this.channel || !this.channel.nextpage) return
-      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
-        this.loading = true
-        this.fetchJson(this.apiUrl() + '/nextpage/channel/' + this.channel.id, {
-          nextpage: this.channel.nextpage
-        }).then(json => {
-          this.channel.relatedStreams.concat(json.relatedStreams)
-          this.channel.nextpage = json.nextpage
-          this.loading = false
-          json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream))
-        })
+
+    onRelatedStreamsEndIntersect (entries) {
+      if (entries[0].isIntersecting) {
+        this.fetchMoreVideos()
       }
     },
-    subscribeHandler () {
-      this.fetchJson(this.apiUrl() + (this.subscribed ? '/unsubscribe' : '/subscribe'), null, {
-        method: 'POST',
-        body: JSON.stringify({
-          channelId: this.channel.id
-        }),
-        headers: {
-          Authorization: this.getAuthToken(),
-          'Content-Type': 'application/json'
+
+    fetchMoreVideos () {
+      this.$store.dispatch('fetchJson', {
+        path: '/nextpage/channel/' + this.channel.id,
+        params: {
+          nextpage: this.channel.nextpage
         }
+      }).then(j => {
+        this.channel.relatedStreams = this.channel.relatedStreams.concat(j.relatedStreams)
+        this.channel.nextpage = j.nextpage
       })
-      this.subscribed = !this.subscribed
+    }
+  },
+  computed: {
+    renderedDescription () {
+      return LibPiped.purifyHTML(marked.parseInline(this.channel.description, {
+        breaks: true
+      }))
+    },
+
+    chunkedByFour () {
+      return _chunk(this.channel.relatedStreams, 4)
     }
   },
   components: {

src/routes/Playlist.vue

@@ -114,20 +114,6 @@ export default {
       this.fetchPlaylist()
         .then(data => (this.playlist = data))
         .then(() => (document.title = this.playlist.name + ' - Piped'))
-    },
-    handleScroll () {
-      if (this.loading || !this.playlist || !this.playlist.nextpage) return
-      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
-        this.loading = true
-        this.fetchJson(this.apiUrl() + '/nextpage/playlists/' + this.$route.query.list, {
-          nextpage: this.playlist.nextpage
-        }).then(json => {
-          this.playlist.relatedStreams.concat(json.relatedStreams)
-          this.playlist.nextpage = json.nextpage
-          this.loading = false
-          json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream))
-        })
-      }
     }
   },
   components: {