diff --git a/materialious/src/lib/Search.svelte b/materialious/src/lib/Search.svelte
index ecbad408..ec68d16e 100644
--- a/materialious/src/lib/Search.svelte
+++ b/materialious/src/lib/Search.svelte
@@ -87,7 +87,7 @@
search
(showSearchBox = true)}
/>
diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index 58ba6301..a4f1c206 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/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}`);
@@ -73,8 +74,21 @@
function disableSideways() {
if (!startedSideways) return;
- if (window.innerWidth <= 1500) sideways = false;
- else sideways = true;
+ if (window.innerWidth <= 1500) {
+ sideways = false;
+ if (typeof authorImg === 'undefined') loadAuthor();
+ } 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 () => {
@@ -87,10 +101,17 @@
return;
}
+ // Load author details in background.
+ if (!sideways) {
+ 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 +244,11 @@
imgHeight = document.getElementById('thumbnail-container')?.clientHeight as number;
}
-
- function hideVideo() {
- try {
- localStorage.setItem(`v_h_${video.videoId}`, '1');
- dispatch('videoHidden');
- thumbnailHidden = true;
- } catch {}
- }
{#if !thumbnailHidden}
(showVideoPreview = false)}
on:focus={() => {}}
@@ -250,7 +262,9 @@
on:click={syncChangeVideo}
>
{#if loading}
-
+ {#if !sideways}
+
+ {/if}
{:else if loaded}
{#if showVideoPreview && videoPreview}
@@ -318,47 +332,42 @@
{/if}
-
-