From 961721ef926100683604b60ad8ef3fc7eca58519 Mon Sep 17 00:00:00 2001
From: root <root@git.maharshi.ninja>
Date: Mon, 27 Dec 2021 00:28:00 +0530
Subject: [PATCH] Use Piped Material's internal 60pt grid at other places too

commit 67468646ea119b1fb7e1394c962cf06f7c27f3a6
Author: root <root@git.maharshi.ninja>
Date:   Thu Dec 23 04:14:05 2021 +0530

    Weird fix for a weird bug

commit c25daea8cc87b249f4eefb661f8e0f384ac73e4b
Author: root <root@git.maharshi.ninja>
Date:   Thu Dec 23 03:21:57 2021 +0530

    Remove padding on comments

commit ff44b929e17d1794171200a9a4a71d99513cb3c6
Author: root <root@git.maharshi.ninja>
Date:   Thu Dec 23 03:14:39 2021 +0530

    Optimize

commit 99b2bc16141f4cd71767ce4db7dcc15b94dfa927
Author: root <root@git.maharshi.ninja>
Date:   Thu Dec 23 03:10:25 2021 +0530

    Convert a few pages

commit 909f704eafa68a872790bdc1564aea51331489d1
Author: root <root@git.maharshi.ninja>
Date:   Thu Dec 23 03:02:13 2021 +0530

    Introduce own system for grid
---
 src/components/Grid/GridCol.vue | 20 +++++++++
 src/components/Grid/GridRow.vue | 30 +++++++++++++
 src/routes/Channel.vue          | 62 +++++++++++++--------------
 src/routes/FeedPage.vue         | 75 +++++++++++----------------------
 src/routes/SearchResults.vue    | 60 ++++++++++++++------------
 src/routes/WatchVideo.vue       |  2 +-
 6 files changed, 139 insertions(+), 110 deletions(-)
 create mode 100644 src/components/Grid/GridCol.vue
 create mode 100644 src/components/Grid/GridRow.vue

diff --git a/src/components/Grid/GridCol.vue b/src/components/Grid/GridCol.vue
new file mode 100644
index 0000000..5175e18
--- /dev/null
+++ b/src/components/Grid/GridCol.vue
@@ -0,0 +1,20 @@
+<template>
+    <div :class="colClass">
+        <slot />
+    </div>
+</template>
+
+<script>
+export default {
+	name: 'GridCol',
+	computed: {
+		colClass () {
+			if (this.$vuetify.breakpoint.smAndDown) {
+				return []
+			}
+			const colClass = this.$store.getters['prefs/getPreferenceNumber']('feedColumns', 4)
+			return ['grid-col', 'grid-col-' + (60 / colClass)]
+		}
+	}
+}
+</script>
diff --git a/src/components/Grid/GridRow.vue b/src/components/Grid/GridRow.vue
new file mode 100644
index 0000000..65e80ed
--- /dev/null
+++ b/src/components/Grid/GridRow.vue
@@ -0,0 +1,30 @@
+<template>
+    <div :class="$vuetify.breakpoint.mdAndUp ? 'grid' : undefined">
+        <slot />
+    </div>
+</template>
+
+<script>
+// A customized grid row container, to be used with GridCol
+export default {
+	name: 'GridRow'
+}
+</script>
+
+<style scoped>
+/* A 60-point grid generated for this page and this page only */
+/* Why, one might ask, when you have the Vuetify grid? */
+/* The reason being that Vuetify grid is 12-point, therefore 5 column layouts don't work */
+.grid {
+    display: grid;
+    grid-template-columns: repeat(60, 1fr);
+    grid-gap: 16px;
+}
+
+.grid-col {
+    max-width: 100%;
+}
+.grid-col-12{grid-column: span 12 / auto;}
+.grid-col-15{grid-column: span 15 / auto;}
+.grid-col-10{grid-column: span 10 / auto;}
+</style>
diff --git a/src/routes/Channel.vue b/src/routes/Channel.vue
index f2443a2..d0a9ab7 100644
--- a/src/routes/Channel.vue
+++ b/src/routes/Channel.vue
@@ -1,43 +1,45 @@
 <template>
     <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
     <v-container fluid v-else-if="channel">
-      <v-card class="pa-4">
-        <div
-          style="justify-items: center; align-items: center; vertical-align: center; display: flex;"
-        >
-          <div>
-            <v-img :src="channel.avatarUrl" height="48" width="48" class="rounded-circle" />
-          </div>
-          <div class="text-h5 ml-4">
-            {{ channel.name }}
-          </div>
-          <SubscriptionButton :channel-id="this.channel.id" />
+        <v-card class="pa-4">
+            <div
+                style="justify-items: center; align-items: center; vertical-align: center; display: flex;"
+            >
+                <div>
+                    <v-img :src="channel.avatarUrl" height="48" width="48" class="rounded-circle" />
+                </div>
+                <div class="text-h5 ml-4">
+                    {{ channel.name }}
+                </div>
+                <SubscriptionButton :channel-id="channel.id" />
+            </div>
+            <v-card-text>
+                <div v-html="renderedDescription" />
+            </v-card-text>
+        </v-card>
+
+        <v-divider class="my-4" />
+
+        <div v-if="channel && channel.relatedStreams">
+            <GridRow>
+                <GridCol v-for="(video, videoId) in channel.relatedStreams" :key="videoId">
+                    <VideoItem :height="270" :width="480" :video="video" max-height />
+                </GridCol>
+            </GridRow>
+            <v-progress-linear v-if="channel.nextpage != null" indeterminate
+                               v-intersect="onRelatedStreamsEndIntersect" />
         </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" max-height />
-          </v-col>
-        </v-row>
-        <v-progress-linear v-if="channel.nextpage != null" indeterminate v-intersect="onRelatedStreamsEndIntersect" />
-      </div>
     </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 SubscriptionButton from '@/components/SubscriptionButton'
+import GridRow from '@/components/Grid/GridRow'
+import GridCol from '@/components/Grid/GridCol'
 
 import { LibPiped } from '@/tools/libpiped'
 
@@ -129,13 +131,11 @@ export default {
 			return LibPiped.purifyHTML(marked.parseInline(this.channel.description, {
 				breaks: true
 			}))
-		},
-
-		chunkedByFour () {
-			return _chunk(this.channel.relatedStreams, 4)
 		}
 	},
 	components: {
+		GridRow,
+		GridCol,
 		SubscriptionButton,
 		ErrorHandler,
 		VideoItem
diff --git a/src/routes/FeedPage.vue b/src/routes/FeedPage.vue
index 486e6cb..74b2157 100644
--- a/src/routes/FeedPage.vue
+++ b/src/routes/FeedPage.vue
@@ -1,30 +1,36 @@
 <template>
-  <v-container fluid>
-    <h3 class="text-h4 justify-center">{{ $t('titles.' + feedName) }}</h3>
-    <v-btn outlined color="primary" class="mt-2" v-if="$store.getters['auth/isCurrentlyAuthenticated']" link to="/subscriptions">Your Subscriptions</v-btn>
-    <v-btn
-      outlined color="primary" class="mt-2 ml-2"
-      v-if="$store.getters['auth/isCurrentlyAuthenticated']"
-      link :href="$store.getters['prefs/apiUrl'] + '/feed/rss?authToken=' + $store.getters['auth/authToken']"
-    >
-      <v-icon>mdi-rss</v-icon> RSS of Your Subscriptions
-    </v-btn>
+    <v-container fluid>
+        <h3 class="text-h4 justify-center">{{ $t('titles.' + feedName) }}</h3>
+        <v-btn outlined color="primary" class="mt-2" v-if="$store.getters['auth/isCurrentlyAuthenticated']" link
+               to="/subscriptions">Your Subscriptions
+        </v-btn>
+        <v-btn
+            outlined color="primary" class="mt-2 ml-2"
+            v-if="$store.getters['auth/isCurrentlyAuthenticated']"
+            link :href="$store.getters['prefs/apiUrl'] + '/feed/rss?authToken=' + $store.getters['auth/authToken']"
+        >
+            <v-icon>mdi-rss</v-icon>
+            RSS of Your Subscriptions
+        </v-btn>
 
-    <v-divider class="my-4" />
+        <v-divider class="my-4" />
 
-    <NGErrorHandler :error="error" :errorIsJSON="errorIsJSON" />
-    <div v-for="(row, rowId) in splitIntoRows" :key="rowId" :class="$vuetify.breakpoint.mdAndUp ? 'grid' : undefined">
-      <VideoItem :video="video" v-for="(video, videoId) in row" :key="videoId" :class="columnClass" />
-    </div>
-  </v-container>
+        <NGErrorHandler :error="error" :errorIsJSON="errorIsJSON" />
+        <GridRow>
+            <GridCol v-for="video in videos" :key="video.url">
+                <VideoItem :video="video" max-height />
+            </GridCol>
+        </GridRow>
+    </v-container>
 </template>
 
 <script>
-import { chunk as _chunk } from 'lodash-es'
 import axios from 'axios'
 
 import VideoItem from '@/components/VideoItem.vue'
 import NGErrorHandler from '@/components/NGErrorHandler'
+import GridRow from '@/components/Grid/GridRow'
+import GridCol from '@/components/Grid/GridCol'
 
 let lastAbortController = new AbortController()
 
@@ -105,42 +111,11 @@ export default {
 			}
 		}
 	},
-	computed: {
-		rowSize () {
-			return this.$store.getters['prefs/getPreferenceNumber']('feedColumns', 4)
-		},
-
-		columnClass () {
-			if (!this.$vuetify.breakpoint.mdAndUp) {
-				return
-			}
-			return 'span-col-' + (60 / this.rowSize) + ' mb-4'
-		},
-
-		splitIntoRows () {
-			return _chunk(this.videos, this.rowSize)
-		}
-	},
 	components: {
+		GridRow,
+		GridCol,
 		NGErrorHandler,
 		VideoItem
 	}
 }
 </script>
-
-<style scoped>
-/* A 60-point grid generated for this page and this page only */
-/* Why, one might ask, when you have the Vuetify grid? */
-/* The reason being that Vuetify grid is 12-point, therefore 5 column layouts don't work */
-.grid {
-  display: grid;
-  grid-template-columns: repeat(60, 1fr);
-  grid-gap: 16px;
-}
-
-.span-col-12{grid-column: span 12 / auto;}
-
-.span-col-15{grid-column: span 15 / auto;}
-
-.span-col-10{grid-column: span 10 / auto;}
-</style>
diff --git a/src/routes/SearchResults.vue b/src/routes/SearchResults.vue
index a39d2b6..096346b 100644
--- a/src/routes/SearchResults.vue
+++ b/src/routes/SearchResults.vue
@@ -1,37 +1,46 @@
 <template>
-  <v-container fluid>
-    <h5 class="text-h5 text-center">
-      {{ $route.query.search_query }}
-    </h5>
+    <v-container fluid>
+        <h5 class="text-h5 text-center">
+            {{ $route.query.search_query }}
+        </h5>
 
-    <v-select
-      label="Filter videos"
-      v-model="selectedFilter"
-      :items="availableFilters"
-    />
-    <v-divider class="my-4" />
+        <v-select
+            label="Filter videos"
+            v-model="selectedFilter"
+            :items="availableFilters"
+        />
+        <v-divider class="my-4" />
 
-    <div v-if="results && results.items">
-      <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" max-height v-if="video.type === 'VIDEO'" />
-          <GenericDisplayItem :height="270" :width="480" :item="video" v-else />
-        </v-col>
-      </v-row>
-      <v-progress-linear indeterminate v-intersect="onSearchResultsEndIntersect" v-if="results.nextpage != null" />
-    </div>
-  </v-container>
+        <div v-if="results && results.items">
+            <GridRow>
+                <GridCol v-for="(video, videoId) in results.items" :key="videoId">
+                    <VideoItem :height="270" :width="480" :video="video" max-height v-if="video.type === 'VIDEO'" />
+                    <GenericDisplayItem :height="270" :width="480" :item="video" v-else />
+                </GridCol>
+            </GridRow>
+            <v-progress-linear
+                indeterminate
+                v-intersect="onSearchResultsEndIntersect"
+                v-if="results.nextpage != null"
+            />
+        </div>
+    </v-container>
 </template>
 
 <script>
-import { chunk as _chunk } from 'lodash-es'
-
 import { LibPiped } from '@/tools/libpiped'
 import VideoItem from '@/components/VideoItem'
 import GenericDisplayItem from '@/components/GenericDisplayItem'
+import GridRow from '@/components/Grid/GridRow'
+import GridCol from '@/components/Grid/GridCol'
 
 export default {
-	components: { GenericDisplayItem, VideoItem },
+	components: {
+		GridRow,
+		GridCol,
+		GenericDisplayItem,
+		VideoItem
+	},
 	data () {
 		return {
 			results: null,
@@ -57,11 +66,6 @@ export default {
 	mounted () {
 		this.updateResults()
 	},
-	computed: {
-		chunkedByFour () {
-			return _chunk(this.results.items, 4)
-		}
-	},
 	watch: {
 		selectedFilter () {
 			this.updateResults()
diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue
index 061e3b4..8b28295 100644
--- a/src/routes/WatchVideo.vue
+++ b/src/routes/WatchVideo.vue
@@ -81,7 +81,7 @@
     <v-row>
       <v-col md="8" offset-md="1" v-if="comments && comments.comments">
         <h5 class="text-h4 text-center my-4">Comments</h5>
-        <VideoComment v-for="comment in comments.comments" :key="comment.commentId" :comment="comment" :video="video" class="my-4" />
+        <VideoComment v-for="comment in comments.comments" :key="comment.commentId" :comment="comment" :video="video" />
         <v-progress-linear indeterminate v-intersect="onCommentsProgressIntersect" v-if="comments.comments.length !== 0 && comments.nextpage != null" />
       </v-col>
       <v-col md="2" v-if="video && video.relatedStreams">