It was waiting too near the viewport to load on certain zoom levels. This will maintain the same physical distance for the "approaching viewport" buffer regardless of zoom levels.
## Changes
- Change to canonical_url (with ':').
- The old format of 'claimName/claimId' needs to be supported still, since we shipped with it.
## Notes
- It would be nice to use regex instead of 2 separate paths, but I couldn't figure out how to make the koa variables work.
We currently handle major errors through ErrorBoundary. If the error is network related, ErrorBoundary ends up blank if it's components are lazy-loaded.
#codesplit
## Issue
Sub item in <6119 Creator Settings: beyond "Muted Words">
## Changes
- Removed the existing 5s min gap on livestreams.
- Enabled the 'slow mode min gap' in Creator Settings
This change now affects both comments in claims and livestream comments.
## 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.
## Issue
When seeking on a video, RecommendedContent gets re-rendered, which causes the 20 ClaimPreviews to be re-rendered, several times. ClaimPreview has lots of children, plus it's constantly checking against the blacklist, among other things.
## Fix
The culprit seems to be the `recommendedContent` array -- the address may be different, but the contents are the same.
Do a deep compare instead.
- [x] (6332) The IntersectionObserver method of lazy-loading loads cached images visibly late on slower devices. Previously, it was also showing the "broken image" icon briefly, which we mended by placing a dummy transparent image as the initial src.
- Reverted that ugly transparent image fix.
- Use the browser's built-in `loading="lazy"` instead. Sorry, Safari.
- [x] Size-optimization did not take "device pixel ratio" into account.
- When resizing an image through the CDN, we can't just take the dimensions of the tag in pixels directly -- we need to take zooming into account, otherwise the image ends up blurry.
- Previously, we quickly disabled optimization for the channel avatar in the Channel Page because of this. Now that we know the root-cause, the change was reverted and we now go through the CDN with appropriate sizes. This also improves our Web Vital scores.
- [x] Size-optimization wasn't really implemented for all ChannelThumbnail instances.
- The CDN-optimized size was hardcoded to the largest instance, so small images like sidebar thumbnails are still loading images that are unnecessarily larger.
- There's a little-bit of hardcoding of values from CSS here, but I think it's a ok compromise (not something we change often). It also doesn't need to be exact -- the "device pixel ratio" calculate will ensure it's slightly larger than what we need.
- [x] Set `width` and `height` of `<img>` to improve CLS.
- Addresses Ligthhouse complaints, although technically the shifting was addressed at the `ClaimPreviewTile` level (sub-container dimensions are well defined).
- Notes: the values don't need to be the final CSS-adjusted sizes. It just needs to be in the right aspect ratio to help the browser pre-allocate space to avoid shifts.
- [x] Add option to disable lazy-load Channel Thumbnails
- The guidelines mentioned that items that are already in the viewport should not enable `loading="lazy"`.
- We have a few areas where it doesn't make sense to lazy-load (e.g. thumbnail in Header, channel selector dropdown, publish preview, etc.).
## Issue
The scroll listener never unregisters, and is always registering itself on every scroll. I believe it was done that way to also handle the case of "element is already in viewport when mounted".
## Change
Tried to separate both "element is already in viewport when mounted" and "element scrolled into viewport" into different effects.
The timeout value used is a bit arbitrary, but is needed because the initial size is (0, 0), and to debounce any layout shifts. Reasoning: If an element is explicitly placed under this wrapper, the additional delay is acceptable since it's meant to be lazy-loaded anyway.
about to test something
generate programatically
beginning of the frontend
stripe integration page seems to be working
add user
put functionality behind conditional tag
connect frontend working well
adding environment variables to save success and failure url
bugfix
bugfix
final clean up
adding credit card page
seems to be coming along
calls successfully coming from the frontend
fixing up frontend
cleaning up
frontend coming along
client secret working
basic frontend in place
adding tip page
adding more to the tip frontend
frontend almost done
tabs coming along
one last thing to do for frontend
adding explainer text as custom function
putting finishing touches on tabs
support tabs working well
disable fiat toggle when card not connected
fix frontend gui bug
bugfix and pull out label function
fix symbol for tip gui
modal when card is not yet saved
fix fiat disabled bug
knowing whether card is added programatically
sending tip with frontend
tip functionality working
show unpaid balance
add frontend for card add section
update frontend
update frontend
bugfix
change to use react instead of css
update how stripe is instantiated
fix bug
use customer setup
coming along
working but needs optimization
persist if card is saved
adding anonymous tip functionality
fix nan bug
build stripe endpoints programatically
show for all users for time being
allow the stripe key to automatically switch to live environment
bugfix
bugfix
fix jslint
fix channel page support button
better docs
show customer transactions on frontend
basic table in place
various page updates per jeremys notes
showing card details
nicer tip history table
add better prompt to add card on file viewer page
some linting
time
put connect account behind fiat enabled
no persist fiat mode
wallet calls
tip stuff
## Issue
3779 RSS feed for channels
## Initial implementation details
- RSS only (not atom)
- Grabs latest 10 entries (Beamer have concerns)
## Credit
Referenced the community version mentioned in 3779
- The `rateChange` event now logs the updated speed,
not just the time at which it occurred.
- The `scrub` now (more) accurately logs the position
it came from before the destination.
- The recsys events get consolidated for logical consistency.
## 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.
These are chunks that will be requested immediately after ui.js when opening the homepage, so consolidate them into 1 chunk to reduce network overhead.
More work can/should be done to reduce the secondary chunk.
Make immediate GUI feedback to convey the current status, which can be the following:
- typing
- waiting lighthouse results
- waiting claim resolve
- no results or failed.
## Issue
6301: don't use CDN for GIF thumbnails
## Note
Just a minor mistake in the recent thumbnail refactoring; left out the handling when `allowGif` is true.
While Lighthouse allows looser searching like "Tom from LBRY", it doesn't show the expected results when direct channel name with partial ID is entered to disambiguate.
## Issue
6236 Add context menu to file page
## Notes
The download button actually handles a lot of things -- generating 'streamingUrl', differences between Web and Desktop, download progress for Desktop, etc. A simpler fix would be to put something else (maybe "Share") into the overflow menu instead.
Anyway, went ahead to do it per 6236, but retained the item for Desktop since we need a progress label.
This is the list of channels that authorized me as a moderator.
Similar to `moderation.BlockList`, this will only be fetched at startup/reload for now. I don't think there is a need to constantly monitor this. Users just need to refresh to see the moderator GUI elements after the delegator has granted them access.
## Issue
Closes 6159 "Support Comments Enabled/Disabled for comment.List API"
## New behavior
- `disable-comments` tag will block the comments component entirely.
- `settings.commentsEnabled`:
- When false, will pause comment fetching, posting and replying.
- Any already-fetched comments will stay on screen (unless user reloads/F5).
(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.
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
## 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
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).
## 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).
## 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.
