Make columns configurable between 4, 5 and 6

src/routes/FeedPage.vue

@@ -16,8 +16,8 @@
       <span v-if="!errorIsJSON">{{ $t(error) }}</span>
       <JSONViewer v-else :value="error" />
     </v-alert>
-    <v-row v-for="(row, rowId) in chunkedBySix" :key="rowId">
-      <v-col md="2" v-for="(video, videoId) in row" :key="videoId">
+    <v-row v-for="(row, rowId) in splitIntoRows" :key="rowId">
+      <v-col v-for="(video, videoId) in row" :key="videoId">
         <VideoItem :video="video" max-height />
       </v-col>
     </v-row>
@@ -102,8 +102,12 @@ export default {
     }
   },
   computed: {
-    chunkedBySix () {
-      return _chunk(this.videos, 6)
+    rowSize () {
+      return this.$store.getters['prefs/getPreferenceNumber']('feedColumns', 4)
+    },
+
+    splitIntoRows () {
+      return _chunk(this.videos, this.rowSize)
     }
   },
   components: {

src/routes/Preferences.vue

@@ -79,6 +79,26 @@ export default {
             }
           ]
         },
+        {
+          id: 'feedColumns',
+          type: 'select',
+          label: 'Amount of Columns on Feed Pages',
+          default: 4,
+          options: [
+            {
+              text: '4 columns',
+              value: 4
+            },
+            {
+              text: '5 columns',
+              value: 5
+            },
+            {
+              text: '5 columns',
+              value: 5
+            }
+          ]
+        },
         {
           id: 'quality',
           type: 'select',

src/translations/en.json

@@ -50,6 +50,7 @@
         "enabled_codecs": "Enabled Codecs (Multiple)"
     },
     "preferences": {
+        "feedColumns": "Count of Columns in Feed Pages",
         "sponsorblock": "Enable Sponsorblock",
         "selectedSkip": "Segments to Skip",
         "disableLBRY": "Disable LBRY",