(1) Reduced the debouncing duration so that the final element can be rendered asap after visible.
- If the user is scrolling non-stop, it would continue to debounce and the GUI ends up not showing the final element.
- 25ms seems enough to prevent the initial false-positive that occurs in the scenario of "adjacent/upper elements resized late, so our element was briefly on screen when mounted". If not enough, we can make this a parameter.
(2) Removed `lastUpdateDate` that was a quick hack for Recommended section. We don't use it on that element anymore, so remove the hack to keep the file clean.
(1) The previous code assumed the element is always smaller than the screen. When used on large items like "homepage categories", it'll never load because the element exceeds the screen width or height.
(2) Added optional placeholder element. This allows us to put a cheaper element while waiting, so that the layout doesn't shift when we finally render. This is visually better when scrolling, and complies with Web Vitals.
## Issue
Closes: 6196 Bright Theme is Broken
## Notes
I was trying to fix the problem of the border not visible in Desktop Dark because the highlight color was the same as the border color. The approach didn't take Light and Odysee into account ... oops.
Round 2.
wip
wip - everything but publish, autoplay, and styling
collection publishing
add channel to collection publish
cleanup
wip
bump
clear mass add after success
move collection item management controls
redirect replace to published collection id
bump
playlist selector on create
bump
use new collection add ui element
bump
wip
gitignore
add content json
wip
bump
context add to playlist
basic collections page style pass wip
wip: edits, buttons, styles...
change fileAuthor to claimAuthor
update, pending bugfixes, delete modal progress, collection header, other bugfixes
bump
cleaning
show page bugfix
builtin collection headers
no playlists, no grid title
wip
style tweaks
use normal looking claim previews for collection tiles
add collection changes
style library previews
collection menulist for delete/view on library
delete modal works for unpublished
rearrange collection publish tabs
clean up collection publishing and items
show on odysee
begin collectoin edit header and css renaming
better thumbnails
bump
fix collection publish redirect
view collection in menu does something
copy and thumbs
list previews, pending, context menus, list page
enter to add collection, lists page empty state
playable lists only, delete feature, bump
put fileListDownloaded back
better collection titles
improve collection claim details
fix horiz more icon
fix up channel page
style, copy, bump
refactor preview overlay properties,
fix reposts showing as floppydisk
add watch later toast,
small overlay properties on wunderbar results,
fix collection actions buttons
bump
cleanup
cleaning, refactoring
bump
preview thumb styling, cleanup
support discover page lists search
sync, bump
bump, fix sync more
enforce builtin order for now
new lists page empty state
try to indicate unpublished edits in lists
bump
fix autoplay and linting
consts, fix autoplay
bugs
fixes
cleanup
fix, bump
lists experimental ui, fixes
refactor listIndex out
hack in collection fallback thumb
bump
Since lbry.tv is going away, I tried not to touch the css file much so that the merge into `odysee` won't affect it. The side effect is that the links are now white instead of the regular link color.
## Issue
5873 Unify swap and buy flow // swaps round 2
## Changes
- Added "Buy|Swap" tab in the Buy Page and display the Swap component when needed.
- Removed 'Swap' button from Wallet Page.
- "Buy More" and related tooltips updated to "Buy or Swap Credits".
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.
* dont use no_channel_ids on channel content claim search
* ClaimMenuList not filtering own content initially
* fix errors
Co-authored-by: Thomas Zarebczan <thomas.zarebczan@gmail.com>
* own comments show first in controversial / best #5905
* workaround to place my recent comment at the top
* only most recent comment
* lint fix
Co-authored-by: Thomas Zarebczan <thomas.zarebczan@gmail.com>
* Release date -- initial attempt (squashed and rebased)
- Use white color for calendar buttons in release date input
- Update icon color for release date input
- Allow to set time in release date and display it under additional options
- Add release date field
* Upgrade to latest react-datetime-picker.
I believe this also picks up the y18n security fix.
* Handle dark theme and general style fixes.
* [+redux] Change how release_time is edited.
- `releaseTime` is now a number instead of a string, matching `release_time`. It was getting confusing what the variable units were.
- `releaseTime` will always match `release_time` for an edit. It will be used in the GUI to reset just the date to the original, instead of having to reset the entire form.
- `releaseTimeEdited` will be used by `updatePublishForm` in the GUI to represent the desired new release time. Set to `undefined` if we don't want to change the date.
* Add 'Reset|Now|Default' buttons instead of overloading the date-picker's "X" button.
Before this, the "X" button resets to the original (previous) publish date for Edits, and resets to current time for New Claims. This is very confusing, so added explicit text-based buttons -- hopefully this is more intuitive.
* bump redux to master
Co-authored-by: Franco Montenegro <franco.montenegro.ruke@gmail.com>
Co-authored-by: Thomas Zarebczan <thomas.zarebczan@gmail.com>
## Issue
6010: hyperchat send display issues with GIF profiles
The FreezeFrameWrapper have no `src` to freeze due to the lazy loading.
## Fix
Delay the freezing by making the lazy-load effect return a state to indicate when then `src` has been loaded.
Since the lazy-loader will `unobserve` after loading, the state will never go back to false, so we don't need to handle the case of preventing `new FreezeFrameWrapper` from being called multiple times from it's effect.
## Issue
Closes 6022 Notifications: Creator Commented
## Changes
- Beautify - show creator icon instead of generic bell.
- Link to comment directly instead of the claim.
* Add ICON.INFO - "i" within a circle.
Basically, an inverted ICON.ALERT.
* Posts: restore "Tip unlock | Claim details" component
## Issue
5882: tip unlock + claim id detials missing from markdown posts view
## Notes
The easiest solution would be to put `FileDescription` into posts, but I think that goes against the clean up of the Post layout, where the focus should be on the content. The faded style of the File Details section seems too distracting, plus we don't want the File Description anyway.
Fixed by:
- Make the existing "LBC amount" clickable to show credit details. An additional padlock will appear if the content is yours and you have tips to unlock.
- Add an "info" icon beside it to show file details.
These "link" buttons are usually lit, but I dimmed it in this case to make them stand out less. Again, focusing on Post content instead of buttons.
* Show full notification text via tooltip
The tooltip fixes the system notifications problem (mentioned below), and also allows one to quickly read the entire comment without actually having to visit the comment.
Currently, we only show about 50 characters in the notification, truncating it to an ellipsis when exceeded.
This is not much of a problem for dynamic text (e.g. comments) since the full text can be seen after clicking on the notification (brings you to the comment). For system notifications, this is problematic since there's no other way to know what the full text was.
Tried to dynamically change the font size to auto fit, but it wasn't fruitful. Even if it did work, it'll probably won't be legible for a 2000-character comment, plus the entire list will look weird with various font sizes.
* Beautify "missed out" notification; bring user to Verify page.
## Issue
6021: Notifications: Missed Out
## Changes
- The notification already brings the user to the `/rewards`. Tweaked it to directly enter the Verify Page.
- Use LBC icon instead of generic bell for this notification.
* Fix ability to delete own comments in livestream
## Issue
5832: can't remove own comments in live stream mode (if you have multiple channels?)
Looks like it was just missing `commentIsMine` for the new component.
* Disable editing livestream comments
It doesn't do anything at the moment, anyways.
* Disable deleting hyperchats
The "total tipped" will get deducted when hyperchats are deleted, which doesn't make sense (doesn't reflect actual total that the creator received).
* Swap: populate 'status' from 'btc/swap' response instead of waiting for first websocket input.
## Issue
Clsoes 5975: swap stop at processing even though response comes through
## Notes
Occasionally, the first websocket message doesn't come through (seems like the commerce didn't send?). There's really no need to wait for one more 'status=NEW' message to ensure the right data is being populated (being over-cautious here).
* Beautify the "exact amount" advice.
Scenarios where active livestreams will not appear:
- creation date is way back.
- homepage section options excludes livestreams.
Make an explicit `claim_search` but with `has_no_source` if the client wants `liveLivestreamsFirst`.
If there are lots of channels with livestreams, there's a possibility that the final list will be larger than what was requested. We could trim it to be within the original `options.pageSize` range, but I left that out for now.
It would have been a clean implementation through `renderProperties`, but due to the need to adjust the opacity of `claim-preview__file-property-overlay` (the parent elemtn), I ended up having to create a new `live` attribute.
Differences with the original from 'livestreamList/view.jsx':
- Returns null instead of an empty object for the empty case. This removes the need for clients to create a temp array to determine if the list is empty ('Object.keys(x).length').
- Allow option to not periodically refresh by setting the interval to 0.
While looking at the next RC, I noticed the new languages were lost. I recall the new language commit included some refactoring which had to be reverted due to some webpack issue.
Re-add those languages in the old (non-refactored) method.
## Issue
One of the items in 5865 Video shortcut issues
This one is not really an issue, but it would be nice to match what the arrow keys are doing. Also, in slower regions, seeking 10s will almost always end up buffering.
## Issue
Channel links were showing the "This channel isn't staking enough LBRY Credits for link previews." -- channel links shouldn't be showing previews in the first place.
## Change
Moved the logic into `ClaimLink`, which is the better place to put it anyway. I think I was trying to not touch as many components as possible (i.e. not passing `allowPreview` down too many layers) in the initial implementation. This caused the `isChannel` consideration to be missed.
These only work in the `selectThumbnail` component. If it's small enough, it'll get past the transaction limit-check, but ultimately it doesn't appear correctly in the claim list.
It'll probably appear correctly if we tweak the ClaimPreview code, but since this also fails the Google Video metadata test, I think we should disallow this.
## Issue
5923
Thumbnail errors were just being used in `selectThumbnail`. The form doesn't know about it and was using allowing invalid thumbnails like 'helloworld' to pass through.
I believe the rest of the GUI is setting 'thumbnail'.
'thumbnail_url' is only populated right before publishing.
So, the flag was always false -- we just never see the error on screen because the component is incorrectly hidden (fix for this is coming up next...)
* FileExporter: add 'fetch' hook + Web support
* Re-add ability to export transactions
Closes 4793: Export Wallet History For Taxation Purposes
* Move file-creation to the background.
Don't let the file-creation process block the GUI.
Requires lbry-redux update.
* Bump redux | doFetchTransactions: bump pageSize to 999999; remove doFetchSupport
* bump redux
Co-authored-by: Thomas Zarebczan <thomas.zarebczan@gmail.com>
* CopyableText: add 'onCopy' for clients to change the text-selection
* Swap: only copy the amount (without currency)
## Issue
5873: Rounds 2 of LBC swaps
## Notes
It was an intended feature to include the currency -- I can paste the full string into my note book, while pasting into wallet apps like Exodus will automatically trim off the currency anyway.
Regardless, removed the 'feature' :D
(1) Due to IAPI/commerce query limit, and also to not pollute the wallet with infinite chargeCodes, we'll only show the last 10 swaps. Beamer mentioned that it's possible to tracked back the past chargeCodes of the user, and potential provide a `list` endpoint to handle disputes.
(2) If a user explicitly removed an entry, don't repopulate that entry even if websocket returned an updated status for it. While it might be useful to handle accidental removals, it looks weird when the list gets repopulated with 'Expired' entries.
(3) Add sanitization when repopulating the chargeCodes from the wallet data (i.e. remove 'null' entries).
(4) Always repopulate the list per wallet data so every instance looks the same.
- For the active swap, switch from polling to websocket. The returned data is now the Charge data from the commerce, so some parsing will be required.
- Allow the user to send other coins that the commerce supports.
- Only save the 'chargeCode' to the wallet. The other data can be repopulated from this.
- Store the receipt currency. I'm not sure if the commerce supports sending bits from various coins. Take the coin that came with the 'COMPLETED' message for now.
- Fix 'lbc' calculation to match IAPI side.
- Allow users to see full detauls from "View Past Swaps".
- String cleanup
- GUI cleanup.
