1. Lock the width of the second pane so that the layout doesn't shift after the image is fetched.
2. The image is huge, so pass through the optimizer.
- Wait until the container is mounted to get the exact image width.
Unfortunately, it still takes 0.8s on average to fetch the image, regardless of how small the image has been optimized.
Login graphic improvements
1. Lock the width of the second pane so that the layout doesn't shift after the image is fetched.
2. The image is huge, so pass through the optimizer.
- Wait until the container is mounted to get the exact image width.
Unfortunately, it still takes 1s (on average) to fetch the image, regardless of how small the image has been optimized.
## Issue
6135
While waiting for the lazy-loader IntersectionObserver to initialize, and for the real image to be fetched, an undefined `src` results in the "broken image" thumbnail.
## Fix
Use a transparent image as the starting point. This visually retains the current behavior but minus the "broken image" part.
## Issue
Closes "6056 Extend notificaiton text to show more characters"
## Notes
Looking at the code and comments, I couldn't figure out what was the reason for adding the width constraint (just in case this breaks something).
My guesses:
- Try not to make the rhs thumbnail too far apart from the lhs thumbnail.
- Try not to make the rhs thumbnail misaligned due to dynamic width of the "xx days ago" string on the far right.
## Changes:
Extended the width as much as possible, while retaining some gap before the "xx days ago" string and "unread dot" so that thumbnails stay align in the general case.
The components still reflows nicely (as it did previously) per window-size.
## Issue
GUI fix for 5979 `claim search runs twice sometimes and "refreshes" view`
The search query might encounter minor alterations after rendered (e.g. for the case of 5979, the `moderation.Blocklist` data came late). The code currently resets the result to 0 before initiating `claim_search`, so we see the GUI blink.
## Idea
There is a possibility that the query-change does not alter the final results in the end. Instead of reseting to the results to zero, hold on to the previous results until the fetch is done.
## Known issue
The tiles no longer blink if there is no change, but the "LIVE" indicator still does. I didn't want to propagate the info too deep, so leaving as is for now. It can be considered a feature ("blinking LIVE indicator" :))
## Results
- No blinking if results stay the same.
- Minimal tile-shifting if new ones are added or removed.
- In the current Odysee homepage, reduced React commits from 88 to 76 (save some CPU cycles).
## Issue
The "Muted Words" PR elevated Comment-API errors so we can handle it (previously, it goes unnoticed). This broke the other Comment functions because the spammer mitigation might return an error, causing `Promise.all` to bail early.
## Fix
Changed to `Promise.allSettled` and reconstructed the results. This will make it equivalent to the code prior to the "Muted Words" PR.
## Changes:
1) TagSearch: hide the "control tags" in the Creator Settings page (irrelevant).
2) TagSearch: show the "control tags" when creating/editing Channel (let's use `setting.CommentsEnabled` instead).
3) TagSearch: show the "control tags" when creating/editing Content (`disable-comments` can be used to block comments at the per-claim level, e.g. allow comments in general but block only for specific claims).
## Missing pieces:
For (2) and (3), some work is needed to hide the comment GUI when `setting.CommentsEnabled` is disabled for a particular channel. That flag is not ready in Commentron yet, so I'm not sure how this will be done at the moment. In other words, the checkbox does nothing at the moment.
## Potential flaw:
This change will hide all control tags. If we have more tags in the future and would like to selectively disable some, we'll have to change this parameter to an array instead. Since the usage is not widespread at the moment, a single `disableControlFlag` seems cleaner (don't over-think it yet).
## Issue
Part of `5834 Performance investigation`
In a homepage with 120 tiles, the lists get rendered 3 times during initial update. The sub-components are updating recursively (will investigate), so instead of 120 DateTime renders, we have 1000+ renders.
The resolved DateTime string for `timeAgo` rarely changes, and even if the string was "a few seconds ago", there's no real need to constantly update it.
## Change
Require a minimum 1-minute delta when deciding whether the component should update. Clients can change this value as needed.
## Test
- [x] Verified `shouldComponentUpdate` doesn't end up taking more time than not having it (it's in micro-second range, compared to the millisecond render).
- [x] Profiler showed no significant improvement for low number of DateTime components, but for the 120 DateTime case, almost 1/4 of a second is saved.
- 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).
* 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.
## Issue
- Closes 5998 Theme color problems
- "_Seeing the theme go blue when a modal pops up. There's a change in color on Odysee branch also when this happens (but not as apparent)_"
##
1. Fix overlay background color back to gray theme.
2. Also, fixed the Active Toggle Button back to primary colors.
3. Fix hard-to-read "videojs time tooltip". Using the primary colors is a nice touch, but people have complained in Discord that it's too dim given it's transparent background. Just use 'white' instead. Don't use '--color-white' since that's a bit dimmed down.
4. Fix odd highlight in the volume slider (the bright primary color was used in the background).
* Fix error text color for dark mode.
Don't alter --color-danger since that color works fine as a backdrop for the Toast Message.
* Remove duplicates
* Fix typo
* Fix primary/secondary button and notice_message
* Fix dimmed checkbox
* #6006 Switch from 'coolGray' to 'gray'
* Fix invisible nag (missing --color-orange)
## Issue
When opening a video directly in Chrome Incognito, the video should autoplay (since that's the default Lbry setting), but it doesn't due to browser policy
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
## Changes
- We don't want to forcefully mute the video when `autoplay=true`; we just want to do it when the browser policy is applied.
- Fortunately, there is already an existing code-block for us to check that.
## Test cases
- [x] "Autoplay=Off" should not be affected.
- [x] After manually unmuting, the next autoplayed video should not be muted (this is "user interacted" opening, so the policy allows autoplay)
- [x] If manually muting, the next autoplayed video should retain user's last setting.
## Known issues
- I've seen `error` occasionally being undefined in the `catch` block. In those cases, the solution doesn't work. We could remove `if (player.autoplay() && !player.muted())` and simply just try muting it, but for now it's better to ensure `NotAllowedError` is due to unmuted first before applying the fix.
- This doesn't work for Firefox as there is an explicit "Allow Autoplay" button in the address bar that user needs to click themselves. Applies to all sites.
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.
* Restore "use cdn for channel thumbnails"
This reverts commit e7adc607fa.
* ChannelThumbnail: disable optimization in Channel Page and for GIFs
## Issue
5564: Don't use optimized URLs on channel pages (profile/banner)
## Notes
This is not the best/full solution yet, but it is better than what we have to today (one step in the right direction).
Optimized channel thumbnail size is currently hardcoded to a lowest common denominator.
- Pro(s):
- For images used in multiple places (different sizes) in a page, the total time needed to get the optimized version for each size is too much. Also, the optimizer seems to increase the size of the image in some cases. So, getting 1 image and re-using it is faster for this scenario.
- Simpler code (no need to mount first -> get dimension -> load image)
- Cons:
- We aren't fully optimizing the size, so not really addressing Core Web Vitals score problem.
- e.g. in the front page, we could have used a smaller image for the channel thumbnails.
- We haven't address the problem with large screen sizes.
* Restore channel selector
This reverts b5cc0bb42d
* ChannelThumbnail: fix lazy-loading
- Closes 6066: Revisit lazy-loading Channel thumbnails
- Properly fixes 5933: Thumbnail lazy-load causes ChannelSelector icon to not update.
- Add effect-dependency on `channelThumbnail` and `thumbError`.
- Really perform the lazy-loading now.
- `data-src` was not used, so it wasn't actually lazy loading previously.
