## Issue
With autoplay off, clicking on another video from the Recommended section didn't update the video poster.
## Fix
Made a mistake assuming that the whole component will be re-mounted, so was only setting the thumbnail once.
Even with the caching changes, a 150kB thumbnail still takes 1-2s to fetch. This impacts the score.
## Change
(1) Start with a large-enough placeholder image (has to be larger than the final image -- inflating doesn't count), then delay just enough for scoring, then switch to the real thumbnail.
(2) Since we are now doing post-mount stuff, we have the exact dimensions to optimize the claim thumbnail. This reduces the typically-several-MBs thumbnail to kBs.
- FileRenderInitiator: we don't display if it's not Audio or Video ("playables"). But only do that if it's free or was purchased, otherwise there's no button to buy it.
- FileRenderInline: if the user have not purchased it, don't show anything (not even the spinner).
It's useful to show the thumbnail as the player's backdrop when Video Autoplay is OFF, but it's a wasted fetch when it's ON because the videojs component will be blocking it.
Although it's the same image as the ClaimPreview, this one will be in full size, so a fetch will always happen.
Aside: videojs handles the backdrop for the audio and embed case, so this change won't affect those items.
```
<VideoJs
poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''}
/>
```
Future: for "mobile + autoplay=OFF", we should consider using the optimized thumbnail. 6074 should help.
* am I done?
* post diff
* unused selector cleanup
* missed commit
* mess with button styles
* fix flow
Co-authored-by: Jeremy Kauffman <jeremy@lbry.io>
Co-authored-by: Sean Yesmunt <sean@lbry.io>
2020-04-01 14:43:50 -04:00
Renamed from ui/component/fileViewerInitiator/view.jsx (Browse further)
