df2a717e8d
## Ticket 1526: strange thumbnail size requested on mobile layout (pc only?) ## General Problem It was trying to fetch based on the exact size of the video container, which would satisfy Core Vitals (in an overkill way), but would bring several issues: - server-side caching would not work since everyone's window size is different in a responsive layout design. - the additional 200ms wait for container size to settle down is not good (hardcoded wait time). - the code did not account for device-pixel-ratio, so it's quite a futile effort. Aside: In the past, we used to take the same image url as the tiles, so the video poster would appear immediately from due to browser cache, but the quality is bad because the tile requested a much smaller size. The embed wrapper was not going through the CDN either as a null `containerRef` was passed in. ## Change Removed the container-size check and just request for 1280x720. Reasons for this size: - On average, that would be the ballpark of the final calculated value anyway for the average screen (+DPR consideration). - That seems to be the current suggested thumbnail size in most recommendations. - Our YT Sync is grabbing a much smaller size anyway.
19 lines
596 B
JavaScript
19 lines
596 B
JavaScript
// @flow
|
|
import { getThumbnailCdnUrl } from 'util/thumbnail';
|
|
import React from 'react';
|
|
// $FlowFixMe cannot resolve ...
|
|
import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
|
|
|
|
export default function useGetPoster(claimThumbnail: ?string) {
|
|
const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
|
|
|
|
React.useEffect(() => {
|
|
if (!claimThumbnail) {
|
|
setThumbnail(FileRenderPlaceholder);
|
|
} else {
|
|
setThumbnail(getThumbnailCdnUrl({ thumbnail: claimThumbnail, width: 1280, height: 720 }));
|
|
}
|
|
}, [claimThumbnail]);
|
|
|
|
return thumbnail;
|
|
}
|