Merge pull request #491 from Materialious/update/1.1.10

Update/1.1.10

materialious/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "us.materialio.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 21
-        versionName "1.1.9"
+        versionCode 22
+        versionName "1.1.10"
         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.1.9",
+	"version": "1.1.10",
 	"description": "Modern material design for Invidious.",
 	"author": {
 		"name": "Ward Pearce",

materialious/package.json

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

materialious/src/lib/Comment.svelte

@@ -53,7 +53,7 @@
 				<i>edit</i>
 			{/if}
 		</div>
-		<p style="margin-bottom: 0;">
+		<p class="no-margin">
 			{@html commentTimestamps(comment.contentHtml)}
 		</p>
 		<div style="display: flex;">

materialious/src/lib/Search.svelte

@@ -87,7 +87,7 @@
 		<i class="front">search</i>
 		<input
 			id="search-box"
-			placeholder="Search (ctrl + K)"
+			placeholder="Search (ctrl + k)"
 			bind:value={search}
 			on:click={() => (showSearchBox = true)}
 		/>

materialious/src/lib/Thumbnail.svelte

@@ -2,15 +2,14 @@
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
-	import { getDeArrow, getThumbnail, getVideo, getVideoProgress } from './Api';
+	import { getChannel, getDeArrow, getThumbnail, getVideo, getVideoProgress } from './Api';
 	import type { Notification, PlaylistPageVideo, Video, VideoBase, VideoPlay } from './Api/model';
-	import ShareVideo from './ShareVideo.svelte';
 	import {
 		cleanNumber,
 		getBestThumbnail,
 		letterCase,
+		proxyGoogleImage,
 		proxyVideoUrl,
-		truncate,
 		videoLength
 	} from './misc';
 	import type { PlayerEvents } from './player';
@@ -39,6 +38,8 @@
 	let videoPreviewVolume: number = 0.4;
 	let imgHeight: number;
 
+	let authorImg: string = '';
+
 	let proxyVideos = get(playerProxyVideosStore);
 
 	let watchUrl = new URL(`${location.origin}/watch/${video.videoId}`);
@@ -77,6 +78,17 @@
 		else sideways = true;
 	}
 
+	async function loadAuthor() {
+		const channel = await getChannel(video.authorId);
+
+		const authorImgObject = new Image();
+		authorImgObject.src = proxyGoogleImage(getBestThumbnail(channel.authorThumbnails));
+
+		authorImgObject.onload = () => {
+			authorImg = authorImgObject.src;
+		};
+	}
+
 	onMount(async () => {
 		try {
 			thumbnailHidden = localStorage.getItem(`v_h_${video.videoId}`) === '1';
@@ -87,10 +99,15 @@
 			return;
 		}
 
+		// Load author details in background.
+		loadAuthor();
+
 		// Check if sideways should be enabled or disabled.
 		disableSideways();
 
-		addEventListener('resize', disableSideways);
+		addEventListener('resize', () => {
+			disableSideways();
+		});
 
 		let imageSrc = getBestThumbnail(video.videoThumbnails) as string;
 
@@ -223,20 +240,11 @@
 
 		imgHeight = document.getElementById('thumbnail-container')?.clientHeight as number;
 	}
-
-	function hideVideo() {
-		try {
-			localStorage.setItem(`v_h_${video.videoId}`, '1');
-			dispatch('videoHidden');
-			thumbnailHidden = true;
-		} catch {}
-	}
 </script>
 
 {#if !thumbnailHidden}
 	<div class:sideways-root={sideways}>
 		<div
-			style="position: relative;"
 			on:mouseover={previewVideo}
 			on:mouseleave={() => (showVideoPreview = false)}
 			on:focus={() => {}}
@@ -250,7 +258,9 @@
 				on:click={syncChangeVideo}
 			>
 				{#if loading}
-					<progress class="circle"></progress>
+					{#if !sideways}
+						<div class="secondary-container" style="width: 100%;height: 200px;"></div>
+					{/if}
 				{:else if loaded}
 					{#if showVideoPreview && videoPreview}
 						<div style="max-width: 100%; max-height: {imgHeight}px;">
@@ -318,47 +328,36 @@
 			{/if}
 		</div>
 
-		<div class="small-padding">
-			<nav class="no-margin">
-				<div class="max">
-					<a
-						href={watchUrl.toString()}
-						data-sveltekit-preload-data="off"
-						class:ellipsis-root={!sideways}
-					>
-						<span class="bold" class:ellipsis={!sideways}>
-							{#if sideways}
-								{truncate(letterCase(video.title), 30)}
-							{:else}{letterCase(video.title)}{/if}</span
-						>
-					</a>
+		<div class="video-title" style="padding: 0 1em 1em 1em;">
+			<a class="video-title" data-sveltekit-preload-data="off" href={watchUrl.toString()}>
+				<span class="bold">{letterCase(video.title.trimEnd())}</span>
+			</a>
 
-					<div>
-						<a class:author={!sideways} href={`/channel/${video.authorId}`}>{video.author}</a>
-						<span>
-							{#if !('publishedText' in video) && 'viewCountText' in video}
-								&nbsp;• {video.viewCountText}{/if}
-						</span>
-						<nav class="no-margin">
-							{#if 'publishedText' in video}
-								<div class="max">
-									{cleanNumber(video.viewCount)} • {video.publishedText}
-								</div>
-								<button class="transparent circle">
-									<i>more_vert</i>
-									<menu class="left no-wrap">
-										<a href="#hide" on:click={hideVideo}>
-											{$_('hideVideo')}
-										</a>
-										<div class="divider"></div>
-										<ShareVideo {video} />
-									</menu>
-								</button>
-							{/if}
-						</nav>
+			<div>
+				{#if !('publishedText' in video) && 'viewCountText' in video}
+					<span style="margin-top: 1em;">
+						{video.viewCountText}
+						{$_('views')}
+					</span>
+				{/if}
+
+				{#if 'publishedText' in video}
+					<div class="max">
+						{cleanNumber(video.viewCount)} • {video.publishedText}
 					</div>
+				{/if}
+
+				<div>
+					{#if authorImg !== ''}
+						<img class="circle small" src={authorImg} alt="Author" />
+					{:else}
+						<progress style="padding: 15px;" class="circle small"></progress>
+					{/if}
+					<a style="margin-left: 5px;" class:author={!sideways} href={`/channel/${video.authorId}`}
+						>{video.author}</a
+					>
 				</div>
-			</nav>
+			</div>
 		</div>
 	</div>
 {/if}
@@ -367,19 +366,6 @@
 <div id="video-container" style="display: none;"></div>
 
 <style>
-	.ellipsis-root {
-		display: flex;
-		justify-content: flex-start;
-		position: absolute;
-		width: 100%;
-	}
-
-	.ellipsis {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
 	.author {
 		margin-top: 1.4em;
 	}
@@ -394,12 +380,21 @@
 	}
 
 	.sideways-root {
+		height: 115px;
 		display: flex;
 		align-items: flex-start;
 	}
 
 	.sideways-root .thumbnail {
-		width: 180px;
+		width: 200px;
+	}
+
+	.video-title {
+		display: inline-block;
+		white-space: nowrap;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	@media screen and (max-width: 1499px) {

materialious/static/style.css

@@ -27,6 +27,10 @@
 	margin-right: 5px !important;
 }
 
+.vds-poster :where(img) {
+	object-fit: cover !important;
+}
+
 .infinite-status-prompt {
 	display: none !important;
 }

update_versions.py

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