Change poster-fetch implementation

## 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.

ui/component/fileRenderInitiator/view.jsx

@@ -76,8 +76,6 @@ export default function FileRenderInitiator(props: Props) {
 
   const isMobile = useIsMobile();
 
-  const containerRef = React.useRef<any>();
-
   const { search, href, state: locationState, pathname } = location;
   const urlParams = search && new URLSearchParams(search);
   const collectionId = urlParams && urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
@@ -108,7 +106,7 @@ export default function FileRenderInitiator(props: Props) {
   // in case of a livestream outside of the livestream page component, like embed
   useFetchLiveStatus(isLivestreamClaim && !livestreamPage ? channelClaimId : undefined, doFetchChannelLiveStatus);
 
-  const thumbnail = useGetPoster(claimThumbnail, containerRef);
+  const thumbnail = useGetPoster(claimThumbnail);
 
   function handleClick() {
     if (embedded && !isPlayable) {
@@ -157,7 +155,6 @@ export default function FileRenderInitiator(props: Props) {
 
   return (
     <div
-      ref={containerRef}
       onClick={disabled ? undefined : shouldRedirect ? doAuthRedirect : handleClick}
       style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")` } : {}}
       className={

ui/effects/use-get-poster.js

@@ -4,31 +4,16 @@ import React from 'react';
 // $FlowFixMe cannot resolve ...
 import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png';
 
-export default function useGetPoster(claimThumbnail: ?string, containerRef: any) {
+export default function useGetPoster(claimThumbnail: ?string) {
   const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
 
   React.useEffect(() => {
     if (!claimThumbnail) {
-      return setThumbnail(FileRenderPlaceholder);
+      setThumbnail(FileRenderPlaceholder);
+    } else {
+      setThumbnail(getThumbnailCdnUrl({ thumbnail: claimThumbnail, width: 1280, height: 720 }));
     }
-
+  }, [claimThumbnail]);
-    const timer = setTimeout(() => {
-      let newThumbnail = claimThumbnail;
-
-      // generate the thumbnail url served by the cdn
-      if (containerRef.current?.parentElement?.offsetWidth) {
-        const w = containerRef.current.parentElement.offsetWidth;
-        newThumbnail = getThumbnailCdnUrl({ thumbnail: newThumbnail, width: w, height: w });
-      }
-
-      // update new thumbnail in state
-      if (newThumbnail !== thumbnail) {
-        setThumbnail(newThumbnail);
-      }
-    }, 200);
-
-    return () => clearTimeout(timer);
-  }, [claimThumbnail, containerRef, thumbnail]);
 
   return thumbnail;
 }

ui/page/embedWrapper/view.jsx

@@ -92,7 +92,6 @@ export default function EmbedWrapperPage(props: Props) {
     location: { search },
   } = useHistory();
 
-  const containerRef = React.useRef<any>();
   const [livestreamsFetched, setLivestreamsFetched] = React.useState(false);
 
   const channelUrl = channelUri && formatLbryChannelName(channelUri);
@@ -119,7 +118,7 @@ export default function EmbedWrapperPage(props: Props) {
         (outpoint.txid === txid && outpoint.nout === nout)
     );
 
-  const thumbnail = useGetPoster(claimThumbnail, containerRef);
+  const thumbnail = useGetPoster(claimThumbnail);
 
   React.useEffect(() => {
     if (!latestClaimUrl && liveContentPath && claimId) {