Skip to content

Thumbnails: Cache pending thumbnail request #1718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 31, 2025
Merged

Thumbnails: Cache pending thumbnail request #1718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 52 additions & 52 deletions demo/scripts/components/ThumbnailPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,24 +73,24 @@ export default function ThumbnailPreview({

startSpinnerTimeoutIfNotAlreadyStarted();

// load thumbnail after a timer to avoid doing too many requests when the
// user quickly moves its pointer or whatever is calling this
loadThumbnailTimeout = window.setTimeout(() => {
loadThumbnailTimeout = null;
Copy link
Collaborator Author

@peaBerberian peaBerberian Jul 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here I just moved the setTimeout so it only applies to when the thumbnail is loaded through the VideoThumbnailLoader

// There's two available ways of displaying thumbnails
//
// 1. Through what's called a "trickmode track", which is a video track
// only containing intra-frames. Such thumbnails are shown through a
// video tag thanks the the `VideoThumbnailLoader` tool
//
// 2. Through an especially-purposed "thumbnail track" in a Manifest
// which usually is based on tiles of jpg/png images. Those are loaded
// through specific RxPlayer method.
if (showVideoThumbnail) {
if (videoThumbnailLoader === null) {
return;
}
// load thumbnail after a timer to avoid doing too many requests when the
// user quickly moves the pointer or whatever is calling this
loadThumbnailTimeout = window.setTimeout(() => {
loadThumbnailTimeout = null;

// There's two available ways of displaying thumbnails
//
// 1. Through what's called a "trickmode track", which is a video track
// only containing intra-frames. Such thumbnails are shown through a
// video tag thanks the the `VideoThumbnailLoader` tool
//
// 2. Through an especially-purposed "thumbnail track" in a Manifest
// which usually is based on tiles of jpg/png images. Those are loadd
// through specific RxPlayer method.
if (showVideoThumbnail) {
if (videoThumbnailLoader === null) {
return;
}
videoThumbnailLoader
.setTime(ceiledTime)
.then(hideSpinner)
Expand All @@ -108,43 +108,43 @@ export default function ThumbnailPreview({
console.error("Error while loading thumbnails:", err);
}
});
} else {
const metadata = player.actions.getAvailableThumbnailTracks(ceiledTime);
const thumbnailTrack = metadata.reduce((acc: IThumbnailTrackInfo | null, t) => {
if (acc === null || acc.height === undefined) {
return t;
}
if (t.height === undefined) {
return acc;
}
if (acc.height > t.height) {
return t.height > 100 ? t : acc;
} else {
return acc.height > 100 ? acc : t;
}
}, null);
if (thumbnailTrack === null || imageThumbnailRef.current === null) {
hideSpinner();
return;
}, 30);
} else {
const metadata = player.actions.getAvailableThumbnailTracks(ceiledTime);
const thumbnailTrack = metadata.reduce((acc: IThumbnailTrackInfo | null, t) => {
if (acc === null || acc.height === undefined) {
return t;
}
player.actions
.renderThumbnail(imageThumbnailRef.current, ceiledTime, thumbnailTrack.id)
.then(hideSpinner)
.catch((err) => {
if (
typeof err === "object" &&
err !== null &&
(err as Partial<Record<string, unknown>>).code === "ABORTED"
) {
return;
} else {
hideSpinner();
// eslint-disable-next-line no-console
console.warn("Error while loading thumbnails:", err);
}
});
if (t.height === undefined) {
return acc;
}
if (acc.height > t.height) {
return t.height > 100 ? t : acc;
} else {
return acc.height > 100 ? acc : t;
}
}, null);
if (thumbnailTrack === null || imageThumbnailRef.current === null) {
hideSpinner();
return;
}
}, 30);
player.actions
.renderThumbnail(imageThumbnailRef.current, ceiledTime, thumbnailTrack.id)
.then(hideSpinner)
.catch((err) => {
if (
typeof err === "object" &&
err !== null &&
(err as Partial<Record<string, unknown>>).code === "ABORTED"
) {
return;
} else {
hideSpinner();
// eslint-disable-next-line no-console
console.warn("Error while loading thumbnails:", err);
}
});
}

return () => {
if (loadThumbnailTimeout !== null) {
Expand Down
10 changes: 2 additions & 8 deletions src/core/fetchers/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import type {
import ManifestFetcher from "./manifest";
import type { SegmentQueue, ISegmentQueueCreatorBackoffOptions } from "./segment";
import SegmentQueueCreator from "./segment";
import createThumbnailFetcher, { getThumbnailFetcherRequestOptions } from "./thumbnails";
import createThumbnailFetcher from "./thumbnails";
import type { IThumbnailFetcher } from "./thumbnails";

export type {
Expand All @@ -34,10 +34,4 @@ export type {
SegmentQueue,
IThumbnailFetcher,
};
export {
CdnPrioritizer,
ManifestFetcher,
SegmentQueueCreator,
createThumbnailFetcher,
getThumbnailFetcherRequestOptions,
};
export { CdnPrioritizer, ManifestFetcher, SegmentQueueCreator, createThumbnailFetcher };
5 changes: 1 addition & 4 deletions src/core/fetchers/thumbnails/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import createThumbnailFetcher, {
getThumbnailFetcherRequestOptions,
} from "./thumbnail_fetcher";
import createThumbnailFetcher from "./thumbnail_fetcher";
import type { IThumbnailFetcher } from "./thumbnail_fetcher";

export default createThumbnailFetcher;
export { getThumbnailFetcherRequestOptions };
export type { IThumbnailFetcher };
Loading
Loading