Improve thumbnail list responsiveness

materialious/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "us.materialio.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 58
-        versionName "1.6.7"
+        versionCode 59
+        versionName "1.6.8"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

materialious/electron/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Materialious",
-	"version": "1.6.7",
+	"version": "1.6.8",
 	"description": "Modern material design for Invidious.",
 	"author": {
 		"name": "Ward Pearce",

materialious/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "materialious",
-	"version": "1.6.7",
+	"version": "1.6.8",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

materialious/src/lib/VideoList.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
 	import { removePlaylistVideo } from './Api';
@@ -7,18 +8,28 @@
 	import { authStore } from './store';
 
 	export let videos: VideoBase[] | Video[] | Notification[] | PlaylistPageVideo[] = [];
-	export let oneItemPerRow: boolean = false;
 	export let playlistId: string = '';
 	export let playlistAuthor: string = '';
 
 	let hiddenVideos: string[] = [];
 	let auth = get(authStore);
+	let largeCol = '2';
 
 	async function removePlaylistItem(indexId: string, videoId: string) {
 		if (!playlistId) return;
 		await removePlaylistVideo(playlistId, indexId);
 		hiddenVideos = [...hiddenVideos, videoId];
 	}
+
+	onMount(() => {
+		addEventListener('resize', () => {
+			if (innerWidth <= 1750) {
+				largeCol = '6';
+			} else {
+				largeCol = '2';
+			}
+		});
+	});
 </script>
 
 <div class="page right active">
@@ -26,7 +37,7 @@
 	<div class="grid">
 		{#each videos as video}
 			{#if !hiddenVideos.includes(video.videoId)}
-				<div class={`s12 m${oneItemPerRow ? '12' : '6'} l${oneItemPerRow ? '12' : '2'}`}>
+				<div class="s12 m6 l{largeCol}">
 					<article class="no-padding" style="height: 100%;">
 						<Thumbnail
 							on:videoHidden={() => (hiddenVideos = [...hiddenVideos, video.videoId])}

update_versions.py

@@ -5,7 +5,7 @@ import json
 import os
 import re
 
-LATEST_VERSION = "1.6.7"
+LATEST_VERSION = "1.6.8"
 WORKING_DIR = os.path.join(os.path.dirname(os.path.realpath(__file__)), "materialious")
 
 ROOT_PACKAGE = os.path.join(WORKING_DIR, "package.json")