diff --git a/static/img/fileRenderPlaceholder.png b/static/img/fileRenderPlaceholder.png new file mode 100644 index 000000000..12babce33 Binary files /dev/null and b/static/img/fileRenderPlaceholder.png differ diff --git a/ui/component/fileRenderInitiator/index.js b/ui/component/fileRenderInitiator/index.js index 8e8865ecc..ad57e20e8 100644 --- a/ui/component/fileRenderInitiator/index.js +++ b/ui/component/fileRenderInitiator/index.js @@ -23,7 +23,7 @@ import FileRenderInitiator from './view'; import { doAnaltyicsPurchaseEvent } from 'redux/actions/app'; const select = (state, props) => ({ - thumbnail: makeSelectThumbnailForUri(props.uri)(state), + claimThumbnail: makeSelectThumbnailForUri(props.uri)(state), fileInfo: makeSelectFileInfoForUri(props.uri)(state), obscurePreview: makeSelectShouldObscurePreview(props.uri)(state), isPlaying: makeSelectIsPlaying(props.uri)(state), diff --git a/ui/component/fileRenderInitiator/view.jsx b/ui/component/fileRenderInitiator/view.jsx index 5034356cd..e3ac0204f 100644 --- a/ui/component/fileRenderInitiator/view.jsx +++ b/ui/component/fileRenderInitiator/view.jsx @@ -9,7 +9,10 @@ import * as PAGES from 'constants/pages'; import * as RENDER_MODES from 'constants/file_render_modes'; import Button from 'component/button'; import isUserTyping from 'util/detect-typing'; +import { getThumbnailCdnUrl } from 'util/thumbnail'; import Nag from 'component/common/nag'; +// $FlowFixMe cannot resolve ... +import FileRenderPlaceholder from 'static/img/fileRenderPlaceholder.png'; const SPACE_BAR_KEYCODE = 32; @@ -23,7 +26,7 @@ type Props = { location: { search: ?string, pathname: string }, obscurePreview: boolean, insufficientCredits: boolean, - thumbnail?: string, + claimThumbnail?: string, autoplay: boolean, hasCostInfo: boolean, costInfo: any, @@ -45,7 +48,7 @@ export default function FileRenderInitiator(props: Props) { insufficientCredits, history, location, - thumbnail, + claimThumbnail, renderMode, hasCostInfo, costInfo, @@ -68,6 +71,29 @@ export default function FileRenderInitiator(props: Props) { const fileStatus = fileInfo && fileInfo.status; const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode); const isText = RENDER_MODES.TEXT_MODES.includes(renderMode); + const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder); + const containerRef = React.useRef(); + + React.useEffect(() => { + if (claimThumbnail) { + setTimeout(() => { + let newThumbnail = claimThumbnail; + + // @if TARGET='web' + if ( + containerRef.current && + containerRef.current.parentElement && + containerRef.current.parentElement.offsetWidth + ) { + const dimen = containerRef.current.parentElement.offsetWidth; + newThumbnail = getThumbnailCdnUrl({ thumbnail: newThumbnail, width: dimen, height: dimen }); + } + // @endif + + setThumbnail(newThumbnail); + }, 200); + } + }, []); // eslint-disable-line react-hooks/exhaustive-deps function doAuthRedirect() { history.push(`/$/${PAGES.AUTH}?redirect=${encodeURIComponent(location.pathname)}`); @@ -131,8 +157,9 @@ export default function FileRenderInitiator(props: Props) { return (