## Issue
6068 Fix "Cumulative Layout Shift" for Core Web Vitals
In Posts, the Comments section appears first while we fetch the MD file. When the MD is fetched, Comments get pushed to the bottom (or shifted up for short posts), hence the red CLS scores.
## Approach
There are too many layers between `<FilePage>` and `<DocumentViewer>` to pass the `loading` state around to hide the Comments section, so just make Comments fade in after a 2s delay.
## Changes
- Posts: Add 2s fade-in delay to Comments.
- Posts: remove the gray placeholder. This improves the score a bit more, and reduces flicker as well. There's already a spinner from `FileRenderInline` to tell the user to be patient.
- Posts: add a minimum 30vh height so that short posts don't get collapsed too much, causing the `FileDetails` and Comments to shift. Small shifts are fine as long as CLS is below 0.1.
## Issue
6068
## Change
Lock all images to fit a 16:9 container. We have implemented 'ZoomableImg', so no reason in trying to display in full size.
This reduces CLS from 0.4xx to 0.01x.
## Flaws
CLS could probably be zero if not for the spinner shifting things slightly. Also, mobile CLS is 0.07.
The troublesome part in this PR is that FileRenderInitiator, FileRender and their subcomponents are broken apart and it's hard to synchronize their visibility and size. There are time gaps where none of them are visible, etc.
This PR only tackles the major part (most bang for buck), which is the elimination of variable height of the rendered image.
## Aside
I think `claimIsMine` is unused, so don't waste time requesting it.
## Root-cause
`https://github.com/videojs/video.js/pull/7098`
videojs was recently upgraded.
## Change
Override videojs default theme of hiding the time control in smaller layouts.
## Issue
The loading circle wasn't showing up, causing confusion.
Splitting CSS doesn't seem trivial as there seems to be a huge dependency on the load order. Pretty much similar to what this person is facing https://lihautan.com/css-code-splitting/#the-problem
## Change
This reverts videojs-specific changes from 4d638bcf.
* Markdown: make '>Quote' look less like a banner
Quotes should be subtle as it is primarily intended for redundant content, but currently it looks more like a banner that brings lots of focus.
This change is also background-independent. Currently, the Quotes in Posts doesn't look like it has a background color, because it happened to be the same as the Post's background. This makes it inconsistent with Quotes in Comments. Let's just always make it blend in + grayish text.
* Markdown: inline code tweak
- better symmetry
- less spacing to the left and right, since it's common to already have a space in the sentence (even if it doesn't, like in CJK, the new spacing looks sufficient).
* 4481: Use regular font in Markdown Editor
I think we should not use Monospace fonts for the Markdown Editor since we are not coding.
Similar to Github, code-blocks and inline-code only gets converted to monospace in the Preview.
## Issues
5349: Remove theater mode button from player in comments
5519: Theatre mode button doesn't do anything in full screen mode [Odysse/LBRY desktop app]
## Notes
5349: Wanted to hide for 'markdown' as well, but it seems useful for 'markdown' (to clear the screen from Related), so I did not include it.
## Issue
Closes#5392 better support for non-standard resolution videos
It's not actually cropped -- the control bar was opaque.
## Change
Use 0.80 opacity to somewhat see the full picture.
Using 0.5 or less would be even better, but due to the default tiny size of the control bar, the text becomes unreadable (it's readable if you zoom the browser to get larger text). Don't want to mess with sizing for now, so using 0.80 to get the best of both worlds.
## Issue:
5119 "Video: Mobile UI + overlay for keyboard shortcut feedback" was disabled because the feature broke the chromecast button in Android Chrome
Wider post area for bigger text, while keeping the character count the same or less.
Removed `overflow: auto;` as it was not required and was creating unnecessary scrollbars when margins were incorrectly calculated.
## Issue
- Personally annoyed of having to switch to landscape just to change the setting. There's still space for it.
- This serves as a quick fix until "4712: Video: Allow access to all control in small screen" is figured out
## Issue:
5044: Auto hide cursor on video on static hover
## Approach
The existing code only hides the cursor when playing in fullscreen. Extend that to normal mode as well.
## Extra
Add in few new strings
## Fixes:
4220
## Changes:
For `vjs-layout-small`, there is still space to display the said controls. This layout covers devices like Galaxy S5 up to Nexus 6P.
For layouts smaller that that (e.g. 'vjs-layout-xsmall'), they will remain hidden.
Implementation:
- The code is placed in <VideoJs> instead of <VideoViewer> as we need to control the video itself. It's more self-contained here, rather than trying to pass refs around between parent and child.
- useState cannot be used as it will cause a re-render when the hint it clicked and dismissed. The DOM is used to hide the button.
