snipcola/FilmHaven
1
0
Fork 0
Code Actions Packages

dont wait for images to load

Browse Source
This commit is contained in:
Snipcola 2024-02-03 20:10:33 +00:00
parent a1b0ecd2ba
commit b0f2d2cc30
10 changed files with 57 additions and 31 deletions

4
site/src/scripts/cache.js

@ -16,14 +16,14 @@ export function isDeletable(image) {
return !cachedImages.includes(image);
}
export async function preloadImages(images, onAmount, save) {
export async function preloadImages(images, save) {
if (save) cachedImages.push(...images);
let count = 0;
async function loadImage(url) {
return new Promise(function (resolve) {
function checkCount() {
if (count >= (onAmount || images.length)) {
if (count >= images.length) {
resolve();
}
}

25
site/src/scripts/components/area.js

@ -1,5 +1,5 @@
import { config } from "../config.js";
import { splitArray, onWindowResize, removeWindowResize, elementExists, onSwipe } from "../functions.js";
import { splitArray, onWindowResize, removeWindowResize, elementExists, onSwipe, transparentImage } from "../functions.js";
import { preloadImages } from "../cache.js";
import { getTrending } from "../api/trending.js";
import { getRated } from "../api/rated.js";
@ -66,6 +66,7 @@ export function initializeArea(area, initialSlides, labelText, failed, customSpl
function add(info) {
const card = document.createElement("div");
const image = document.createElement("img");
const loadImage = document.createElement("img");
const title = document.createElement("div");
const footer = document.createElement("div");
@ -83,13 +84,20 @@ export function initializeArea(area, initialSlides, labelText, failed, customSpl
if (info.id) card.setAttribute("data-id", info.id);
if (info.type) card.setAttribute("data-type", info.type);
card.className = "card";
image.className = "image";
image.src = info.image;
image.alt = info.title;
loadImage.className = "image load-image";
loadImage.src = transparentImage();
loadImage.alt = "";
title.className = "title";
image.addEventListener("load", function () {
card.classList.add("loaded");
});
if (info.continue) {
const typeInfo = document.createElement("div");
@ -178,6 +186,7 @@ export function initializeArea(area, initialSlides, labelText, failed, customSpl
play.append(playIcon);
card.append(image);
card.append(loadImage);
card.append(title);
card.append(footer);
card.append(play);
@ -293,7 +302,7 @@ export function initializeAreas() {
trendingMovies.splice(0, config.carousel.amount);
trendingMovies.splice(config.area.amount, trendingMovies.length);
await preloadImages(trendingMovies.map((i) => i.image), config.area.split[desktop ? "desktop" : "mobile"], true);
preloadImages(trendingMovies.map((i) => i.image), true);
initializeArea(moviesTrendingArea, trendingMovies, label);
}
}
@ -318,7 +327,7 @@ export function initializeAreas() {
trendingShows.splice(0, config.carousel.amount);
trendingShows.splice(config.area.amount, trendingShows.length);
await preloadImages(trendingShows.map((i) => i.image), config.area.split[desktop ? "desktop" : "mobile"], true);
preloadImages(trendingShows.map((i) => i.image), true);
initializeArea(showsTrendingArea, trendingShows, label);
}
}
@ -348,7 +357,7 @@ export function initializeAreas() {
initializeArea(moviesRatedArea, null, label, true);
} else {
ratedMovies.splice(config.area.amount, ratedMovies.length);
await preloadImages(ratedMovies.map((i) => i.image), config.area.split[desktop ? "desktop" : "mobile"], true);
preloadImages(ratedMovies.map((i) => i.image), true);
initializeArea(moviesRatedArea, ratedMovies, label);
}
}
@ -371,7 +380,7 @@ export function initializeAreas() {
initializeArea(showsRatedArea, null, label, true);
} else {
ratedShows.splice(config.area.amount, ratedShows.length);
await preloadImages(ratedShows.map((i) => i.image), config.area.split[desktop ? "desktop" : "mobile"], true);
preloadImages(ratedShows.map((i) => i.image), true);
initializeArea(showsRatedArea, ratedShows, label);
}
}
@ -401,7 +410,7 @@ export function initializeAreas() {
initializeArea(moviesNewArea, null, label, true);
} else {
newMovies.splice(config.area.amount, newMovies.length);
await preloadImages(newMovies.map((i) => i.image), config.area.split[desktop ? "desktop" : "mobile"], true);
preloadImages(newMovies.map((i) => i.image), true);
initializeArea(moviesNewArea, newMovies, label);
}
}
@ -424,7 +433,7 @@ export function initializeAreas() {
initializeArea(showsNewArea, null, label, true);
} else {
newShows.splice(config.area.amount, newShows.length);
await preloadImages(newShows.map((i) => i.image), config.area.split[desktop ? "desktop" : "mobile"], true);
preloadImages(newShows.map((i) => i.image), true);
initializeArea(showsNewArea, newShows, label);
}
}

4
site/src/scripts/components/carousel.js

@ -149,7 +149,7 @@ export function initializeCarousels() {
if (movies) {
movies.splice(config.carousel.amount, movies.length);
preloadImages(movies.map((i) => i.backdrop), null, true);
preloadImages(movies.map((i) => i.backdrop), true);
initializeCarousel(moviesCard, movies);
}
}
@ -170,7 +170,7 @@ export function initializeCarousels() {
if (shows) {
shows.splice(config.carousel.amount, shows.length)
preloadImages(shows.map((i) => i.backdrop), null, true);
preloadImages(shows.map((i) => i.backdrop), true);
initializeCarousel(showsCard, shows);
}
}

6
site/src/scripts/components/continue.js

@ -62,7 +62,7 @@ export async function initializeContinue() {
checkControlActive();
});
async function initializeContinueWatching() {
function initializeContinueWatching() {
initializeArea(homeContinueArea, null, label);
if (!continueWatching || continueWatching.length === 0) {
@ -70,7 +70,7 @@ export async function initializeContinue() {
controlActive = false;
control.remove();
} else {
await preloadImages(continueWatching.map((i) => i.image), config.area.split[desktop ? "desktop" : "mobile"]);
preloadImages(continueWatching.map((i) => i.image));
initializeArea(homeContinueArea, continueWatching, label);
homeContinueArea.classList.remove("inactive");
homeContinueArea.append(control);
@ -85,7 +85,7 @@ export async function initializeContinue() {
if (continueWatching.length === 0 && newContinueWatching.length > 0 || JSON.stringify(newContinueWatching) !== JSON.stringify(continueWatching)) {
continueWatching = newContinueWatching;
await initializeContinueWatching();
initializeContinueWatching();
}
if (!isMobile && (controlActive && !isHovered(homeContinueArea))) {

6
site/src/scripts/components/genres.js

@ -43,7 +43,7 @@ async function modal(info, type) {
const popularContentImages = getNonCachedImages(popularContent.map((i) => i.image));
images.push(...popularContentImages);
await preloadImages(popularContentImages, config.area.split[desktop ? "desktop" : "mobile"], true);
preloadImages(popularContentImages, true);
initializeArea(popularArea, popularContent, label);
}
}
@ -61,7 +61,7 @@ async function modal(info, type) {
const ratedContentImages = getNonCachedImages(ratedContent.map((i) => i.image));
images.push(...ratedContentImages);
await preloadImages(ratedContentImages, config.area.split[desktop ? "desktop" : "mobile"], true);
preloadImages(ratedContentImages, true);
initializeArea(ratedArea, ratedContent, label);
}
}
@ -79,7 +79,7 @@ async function modal(info, type) {
const newContentImages = getNonCachedImages(newContent.map((i) => i.image));
images.push(...newContentImages);
await preloadImages(newContentImages, config.area.split[desktop ? "desktop" : "mobile"], true);
preloadImages(newContentImages, true);
initializeArea(newArea, newContent, label);
}
}

13
site/src/scripts/components/search.js

@ -1,5 +1,5 @@
import { config } from "../config.js";
import { onWindowResize, splitArray, debounce, removeWindowResize, elementExists, scrollToElement, onKeyPress, onSwipe } from "../functions.js";
import { onWindowResize, splitArray, debounce, removeWindowResize, elementExists, scrollToElement, onKeyPress, onSwipe, transparentImage } from "../functions.js";
import { preloadImages, getNonCachedImages, unloadImages } from "../cache.js";
import { getSearchResults } from "../api/search.js";
import { watchContent } from "./watch.js";
@ -80,6 +80,7 @@ function initializeSearch(area, placeholder) {
function add(info) {
const card = document.createElement("div");
const image = document.createElement("img");
const loadImage = document.createElement("img");
const title = document.createElement("div");
const typeInfo = document.createElement("div");
@ -100,10 +101,17 @@ function initializeSearch(area, placeholder) {
image.className = "image";
image.src = info.image;
image.alt = info.title;
loadImage.className = "image load-image";
loadImage.src = transparentImage();
loadImage.alt = "";
title.className = "title";
typeInfo.className = "type-info";
typeInfo.innerText = info.type?.toUpperCase();
image.addEventListener("load", function () {
card.classList.add("loaded");
});
card.addEventListener("click", function () {
input.value = "";
clear.classList.remove("active");
@ -167,6 +175,7 @@ function initializeSearch(area, placeholder) {
play.append(playIcon);
card.append(image);
card.append(loadImage);
card.append(title);
card.append(typeInfo);
card.append(footer);
@ -297,7 +306,7 @@ function initializeSearch(area, placeholder) {
const searchImages = getNonCachedImages(searchResults.map((i) => i.image));
images.push(...searchImages);
await preloadImages(searchImages, config.area.split[desktop ? "desktop" : "mobile"], true);
preloadImages(searchImages, true);
if (input.value.length === 0) {
cleanup();

14
site/src/scripts/components/watch.js

@ -1270,17 +1270,13 @@ function initializeWatchModalCheck() {
if (info && info.title) {
let recommendationImages = [];
if (info.seasons && getWatchSection("Seasons")) preloadImages(info.seasons.map((s) => s.episodes.map((e) => e.image)).flat(1));
if (info.cast && getWatchSection("Cast")) preloadImages(info.cast.map((p) => p.image));
if (info.reviews && getWatchSection("Reviews")) preloadImages(info.reviews.filter((r) => r.avatar).map((r) => r.avatar));
if (info.recommendations && getWatchSection("Recommendations")) {
recommendationImages = getNonCachedImages(info.recommendations.map((r) => r.image));
preloadImages(recommendationImages, null, true);
}
if (info.recommendations && getWatchSection("Recommendations")) recommendationImages = getNonCachedImages(info.recommendations.map((r) => r.image));
modal(info, recommendationImages);
if (info.cast && getWatchSection("Cast")) preloadImages(info.cast.map((p) => p.image));
if (info.reviews && getWatchSection("Reviews")) preloadImages(info.reviews.filter((r) => r.avatar).map((r) => r.avatar));
preloadImages(recommendationImages, null, true);
} else {
removeQuery(config.query.modal);
}

4
site/src/scripts/functions.js

@ -1,3 +1,7 @@
export function transparentImage() {
return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVYAAAIACAQAAABzmYx/AAADrklEQVR42u3SAQkAAADCMO1f2hzCFuG8gROVALOCWTErmBXMilnBrGBWzApmBbNiVjArmBWzglnBrJgVzApmxaxgVjArZgWzglkxK5gVs4JZwayYFcwKZsWsYFYwK2YFs4JZMSuYFcyKWcGsYFbMCmYFs2JWMCuYFbOCWcGsmBXMilnBrGBWzApmBbNiVjArmBWzglnBrJgVzApmxaxgVjArZgWzglkxK5gVzIpZwaxgVswKZsWsYFYwK2YFs4JZMSuYFcyKWcGsYFbMCmYFs2JWMCuYFbOCWcGsmBXMCmbFrGBWMCtmBbNiVjArmBWzglnBrJgVzApmxaxgVjArZgWzglkxK5gVzIpZwaxgVswKZgWzYlYwK5gVs4JZMSuYFcyKWcGsYFbMCmYFs2JWMCuYFbOCWcGsmBXMCmbFrGBWMCtmBbOCWTErmBXMilnBrJgVzApmxaxgVjArZgWzglkxK5gVzIpZwaxgVswKZgWzYlYwK5gVs4JZwayYFcwKZsWsYFbMCmYFs2JWMCuYFbOCWcGsmBXMCmbFrGBWMCtmBbOCWTErmBXMilnBrGBWzApmBbNiVjArZgWzglkxK5gVzIpZwaxgVswKZgWzYlYwK5gVs4JZwayYFcwKZsWsYFYwK2YFs2JWCTArmBWzglnBrJgVzApmxaxgVjArZgWzglkxK5gVzIpZwaxgVswKZgWzYlYwK5gVs4JZMSuYFcyKWcGsYFbMCmYFs2JWMCuYFbOCWcGsmBXMCmbFrGBWMCtmBbOCWTErmBXMilnBrJgVzApmxaxgVjArZgWzglkxK5gVzIpZwaxgVswKZgWzYlYwK5gVs4JZwayYFcwKZsWsYFbMCmYFs2JWMCuYFbOCWcGsmBXMCmbFrGBWMCtmBbOCWTErmBXMilnBrGBWzApmBbNiVjArZgWzglkxK5gVzIpZwaxgVswKZgWzYlYwK5gVs4JZwayYFcwKZsWsYFYwK2YFs4JZMSuYFbOCWcGsmBXMCmbFrGBWMCtmBbOCWTErmBXMilnBrGBWzApmBbNiVjArmBWzglnBrJgVzIpZwaxgVswKZgWzYlYwK5gVs4JZwayYFcwKZsWsYFYwK2YFs4JZMSuYFcyKWcGsYFbMCmbFrGBWMCtmBbOCWTErmBXMilnBrGBWzApmBbNiVjArmBWzglnBrJgVzApmxaxgVjArZgWzYlYwK5gVs4JZwayYFcwKZsWsYFYwK2YFs4JZMSuYFcyKWcGsYFZ+DVe+AgHBddcXAAAAAElFTkSuQmCC";
}
export function onSwipe(element, callback) {
let startX, startY, endX, endY;
let touchStart, touchMove, touchEnd;

4
site/src/styles/body.css

@ -39,6 +39,6 @@ body.modal-active > .container {
user-select: none;
}
img {
font-size: 0;
img {
font-size: 0;
}

8
site/src/styles/components/card.css

@ -34,6 +34,14 @@
overflow: hidden;
}
.card.loaded .load-image {
display: none;
}
.card:not(.loaded) .image:not(.load-image) {
display: none;
}
@media (hover: hover) {
.card:hover {
background-color: var(--lighter);