Crop thumbnails above 180px height

materialious/src/lib/api/youtubejs/subscriptions.ts

@@ -65,7 +65,7 @@ export async function parseChannelRSS(channelId: string): Promise<void> {
 			entry.getElementsByTagName('published')[0]?.textContent || new Date()
 		);
 		const published = publishedAt.getTime();
-		const publishedText = relativeTimestamp(published);
+		const publishedText = relativeTimestamp(published, false);
 		const author =
 			entry.getElementsByTagName('author')[0]?.getElementsByTagName('name')[0]?.textContent ||
 			'Unknown Author';
@@ -131,16 +131,22 @@ export async function parseChannelRSS(channelId: string): Promise<void> {
 export async function getFeedYTjs(maxResults: number, page: number): Promise<Feed> {
 	const channelSubscriptions = await localDb.channelSubscriptions.toArray();
 
+	const toUpdatePromises: Promise<void>[] = [];
+
 	const now = new Date();
 	for (const channel of channelSubscriptions) {
 		const lastRSSFetch = new Date(channel.lastRSSFetch);
 		const timeDifference = now.getTime() - lastRSSFetch.getTime();
 		const oneDayInMillis = 6 * 60 * 60 * 1000;
 		if (timeDifference > oneDayInMillis) {
-			parseChannelRSS(channel.channelId);
+			toUpdatePromises.push(parseChannelRSS(channel.channelId));
 		}
 	}
 
+	if (toUpdatePromises) {
+		await Promise.all(toUpdatePromises);
+	}
+
 	const videos = await localDb.subscriptionFeed.toArray();
 	videos.sort((a, b) => b.published - a.published);
 

materialious/src/lib/components/Thumbnail.svelte

@@ -23,6 +23,7 @@
 		synciousStore
 	} from '../store';
 	import { queueGetWatchProgress } from '$lib/api/apiExtended';
+	import { relativeTimestamp } from '$lib/time';
 
 	interface Props {
 		video: VideoBase | Video | Notification | PlaylistPageVideo;
@@ -175,7 +176,9 @@
 				{#if !thumbnail}
 					<div class="secondary-container" style="width: 100%;height: {placeholderHeight}px;"></div>
 				{:else}
-					<img class="responsive" loading="lazy" src={thumbnail.src} alt="Thumbnail for video" />
+					<div class:crop={thumbnail.height > 180}>
+						<img class="responsive" loading="lazy" src={thumbnail.src} alt="Thumbnail for video" />
+					</div>
 				{/if}
 			{/if}
 			{#if progress}
@@ -243,9 +246,12 @@
 					{$_('views')}
 				{/if}
 
-				{#if 'publishedText' in video}
+				{#if 'published' in video}
 					<div class="max">
-						{video.viewCountText ?? cleanNumber(video.viewCount ?? 0)} • {video.publishedText}
+						{video.viewCountText ?? cleanNumber(video.viewCount ?? 0)} • {relativeTimestamp(
+							video.published,
+							false
+						)}
 					</div>
 				{/if}
 			</div>
@@ -254,6 +260,22 @@
 </div>
 
 <style>
+	.crop {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+	}
+
+	.crop img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		clip-path: inset(30px 0 30px 0);
+		display: block;
+		transform: translateY(-30px);
+		margin-bottom: -60px;
+	}
+
 	.thumbnail {
 		width: 100%;
 		overflow: hidden;

materialious/src/lib/components/settings/Interface.svelte

@@ -78,6 +78,7 @@
 	function clearPreviousInstance() {
 		logoutStores();
 		ui('#dialog-settings');
+		goto(resolve('/', {}), { replaceState: true });
 		location.reload();
 	}
 

materialious/src/lib/time.ts

@@ -13,26 +13,28 @@ export function humanizeTimestamp(epochTime: number): string {
 	return dayjs.utc(epochTime).local().format('hh:mm A DD/MM/YYYY');
 }
 
-export function relativeTimestamp(epochTime: number): string {
+export function relativeTimestamp(epochTime: number, includeTime: boolean = true): string {
 	const now = dayjs();
 	const timestamp = dayjs.utc(epochTime).local();
 
 	const isSameDay = now.isSame(timestamp, 'day');
 	const isSameWeek = now.isSame(timestamp, 'week');
-	const isSameMonth = now.isSame(timestamp, 'month');
 	const isThisYear = now.isSame(timestamp, 'year');
 
 	const diffMilliseconds = timestamp.diff(now);
 	const diffDuration = dayjs.duration(diffMilliseconds);
 
+	let time = '';
+	if (includeTime) {
+		time += 'h:mm A';
+	}
+
 	if (isSameDay || isSameWeek) {
 		return diffDuration.humanize(true);
-	} else if (isSameMonth) {
-		return timestamp.format('Do h:mm A');
 	} else if (isThisYear) {
-		return timestamp.format('MMMM Do h:mm A');
+		return timestamp.format(`MMMM Do ${time}`);
 	} else {
-		return timestamp.format('MMMM Do YYYY h:mm A');
+		return timestamp.format(`MMMM Do YYYY ${time}`);
 	}
 }