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
2024-12-06 19:26:36 +01:00 · 2021-12-27 00:28:00 +05:30
parent 1477a5f6e7
commit 961721ef92
6 changed files with 139 additions and 110 deletions
@@ -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>
@@ -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>
@@ -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
@@ -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>
@@ -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()
@@ -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">