## Ticket
6946: Linked-comment scroll position is inconsistent
## Issues
- If it is a deeply-nested reply, the positioning is incorrect.
- If there are pinned comments, the positioning is way off.
- If there is a delay in mounting, the positioning doesn't happen.
- When clicking on the comment's date to highlight it, the comment goes missing and the scroll position is weird.
## Changes
- Take into account that replies can be linked-comments.
- Perform a "one-time" search for the linked-comment after the initial fetch, if necessary. The expensive DOM search is only be executed minimally.
Remove defunct "show comment menu on hover" implementation.
It was re-rendering on every mouse movement, plus the css classname no longer exists, and also it wasn't working right in the first place (reverted few Desktop revision back, and all it did was highlighting the menu rather than controlling the visibility).
If we want the "show comment menu on hover" behavior again in the future, the CPU usage problem can probably be addressed by debouncing/throttling state-change.
Trying to action this issue: Pressing escape in wunderbar should do something useful #2116, I also added ctrl-K as a keyboard shortcut to bring the wunderbar into focus.
## Issue
- While changing the "Back" behavior in the Settings Page PR, it was a pain to troubleshoot when the entire history list is listed as "odysee.com".
- If you have multiple tabs open, it's hard to know which is which for non-claim and non-channel pages.
## Approach
Initially, I thought of overriding the document's title through the `<Page>` component, since the titles are usually defined there. However, given that the router is already doing the overriding, I think it's best to do the same thing all in one place.
Downside: it might get missed when a new page is added.
## Unknown
- Not sure if are rules for titles. There seems to be a mix of sites -- some have specific titles per page, most just use the site title for each page.
- I think the `return` statement in the `useEffect` is unnecessary, since it'll just be setting to the same value now during the cleanup stage. (??)
## Issue
6956 Desktop: something wrong with Custom Comment Server setting
## Notes
- Should be calling `Comments.setServerUrl` to ensure all private variables are updated.
- Skip the react-setting update if there is no change.
## Issue
- #6840 Clean up https://odysee.com/$/big_hits
- `/big_hits` is being indexed and unnecessarily affecting the speed score (the "not found" page is surprisingly slow; will handle separately)
- Big-Hits metadata not working
## Notes
'big_hits' is only used in v1 homepages.
more improvements, fix url, do the same for cover
remember url, error if invalid
unneeded addition
Fix delayed message
Lint
Allow empty values (placeholder and Gerbil)
Fix filepath crash
Fix button
Previously, we decide when to display "Show More" based on the current fetched reply count vs. total replies in Commentron. It was already troublesome as `comment.List` and `comment.replies` give different values (one includes blocked content, while another does not).
Now, we are further filtering the list with Commentron blocklists (personal, admin, moderator), so it is not feasible to run the logic based on reply count.
## Solution
- Keep track of number of remaining pages instead and use that to determine when to display "Show More".
- While it doesn't solve the "Show N replies" mismatch (YT has this problem too), it prevents the button from lingering.
- In the event that all replies are blocked, just show an empty space (same as YT). I didn't like the previous version that cluttered the space with "comment(s) blocked".
## Issue
When you block Channel-X, Channel-X's comments will still be visible on someone else's content. This feels odd.
## Change
In addition to the blacklist, filter-list and muted-list, we now include the Commentron blocklists (personal, admin, moderator) when filtering out comments.
## Specifics
`makeSelectCommentsForUri`, `makeSelectTopLevelCommentsForUri` and `makeSelectRepliesForParentId` all perform the same filtering code. Factor that out to `makeSelectFilteredComments` and add the Commentron lists into the mix.
## Downsides
This probably adds to the already-high CPU usage in rendering comments.
The previous version treats each navigation as a link, ala Chrome Settings. I liked it because I can enter a settings section directly via URL, and can always back-track each section.
Anyway, changed it to the typical "up" behavior, traversing back the hierarchy of settings pages.
It was phrased negatively as the feedback back then was the string should match whatever is on the actual dialog (which was "Skip preview and confirmation"). But now it looks odd when we have an additional title string. We think titles should be positively phrased, hence the change.
Changed from constants to object. This allows us to skip prettier's auto line-breaking with just one comment (instead of for each constant), plus I like object style to group things together in general.
I think it looks better to not place the title within the card's border when there are multiple cards in a page, like in the case of the new Settings Layout. Otherwise, it's hard to differentiate between title and settings-row.
The proper method is to style Card itself, but this is a quick fix for the Settings Page PR. Will come back to it later.
All <Setting*> components will have an ID that corresponds to the sidebar link. When clicked, we scroll to the position of the card by searching for the element with the ID. It behaves simiar to # anchor navigation.
I like this model mainly because in Mobile, users don't need to keep opening the drawer to navigate -- they just need to scroll. This allows us to use the same design for Mobile and App.
Placed settings that we allow for unauthenticated users under <SettingUnauthenticated>. While it is redundant, it's easier to handle the grouping, and more readable overall.
Also made visual changes for the new Settings Page.
## SyncToggle:
It will no longer be under a dedicated Card, so the "Sync" title is not there to give context for the case of "no verified email".
Changed it such that the checkbox is always visible (it's label is self-explanatory) but disable when email is not set. The "Add Email" button will then appear below, so everything now makes sense in context.
* remove help card from lists page
* filtering to playlists page
* refactor
* clear playlists filter on escape
* rename
* no show playlist limit for now
## Issue
If the linked-comment is also a pinned comment, it was displayed twice.
## Fix
When separating out pinned comments, I forgot that `comment.ByID` was another place where we fetch comments.
* Automatically claim initial rewards (new_user & email_verified) when accessing creating channel, edit channel and upload
* Do not try to get initial rewards if already claimed.
## Tickets
- 5504 Signing out of account causes page to break in other tabs
- 6829 merged accounts - force log out / fail sync when x-auth-token and cookie auth token are different
## Steps to replicate
1. Login to odysee with account-A.
2. Open another tab, and split both tabs on the screen.
3. Logout from the 1st tab. Do not activate (focus) the 2nd tab.
4. On the 1st tab, login with account-B.
5. Activate (focus) the 2nd tab. The wallet would have been merged, and we are still logged in as account-A.
## Approach
Reload when the LBRY API token no longer matches the auth token.
## Ticket
5457 Create file thumbnail fallback image for odysee
## Approach
Since `background-image` does not invoke an `onerror` event, create a test Image instance to have the `onerror` capability. This technique is used by majority of plugins. No additional fetch is seen with this technique.
## Ticket
6879: Previously pinned livestream comments show as latest
## Issue
`comment.List` will always display the pinned comment first, hence the problem when the chat is refreshed.
## Approach
Completely split pinned comments from top-level comments in the Reducer, and the let the GUI (e.g. regular comments, livestream comments) decide how they want to display it.
For the case of livestream, there is no need to repeat the pinned comments in the regular chat area, since there is a dedicated area on top.
## Ticket
6886 Livestream auto-scroll problems
## Issue
- `performedInitialScroll` was problematic as it won't allow auto-scroll even when user scrolled back to the bottom.
- The dependence on `commentElement` seems to assume a certain comment height? Not sure.
## Approach
- Add a scroll listener and stash the last scroll position.
- When a message is received, check if it's at the bottom. If yes, maintain that position after the new comment is added. If not, leave as is.
- When submitting a comment, always reset to the bottom.
## Ticket
6743: Desktop: "Back" in Following Page no longer restores scroll position
## Issue
This was a side-effect of "6609 claimListDiscover: don't re-render until query is done". That PR did not handle the case of navigating backwards, which typically would just need to display past results. It ended up always starting with a blank list on mount, so the scroll position could not be restored correctly.
I don't know why it still worked on Web/Chrome -- maybe the latest browser knows how to move to desired scroll position when the height is available.
## Change
If navigating backwards, initialize the final URI list with the previous result. It is almost always correct, and if not, will be corrected in the effects. This saves us one re-render when navigating backwards too.
## Issue
6467 Add status indicators for messages from creator, delegated moderator, global moderator
## Changes
- Added the required icons.
- Added tooltip.
## Notes
- Left out "creator" since we are already highlighting the creator's name.
- Note that currently the status is only available via websocket deltas. `comment.List` does not provide the data.
- When `comment.List` includes the info, regular comments will automatically include these badges.
* remove unused conditional
get stuff ready for merge
bugfix and cleanup
requested changes
fixing flow errors
fix last flow error and touchups
fiat and lbc tabs coming along
support setting currency as the default tab via query param
add wallet fiat balance
fixing naming
add fiat transactions
using es6 to populate data
should be fine but keeps crashing
transaction listing working
add no transactions thing
about to add a third tab
add third tab
add card last 4 to transaction history
some renaming
show payments successfully
show filler for subscriptions
display if no transactions or subs
working but in the wrong component
approaching something thats working
showing total tipped amount
about to add last couple features
cleanup
More touchups
adding last features
calculate the total amount of unique creators tipped
couple touchups
remove transaction listings from settings
add view transactions buttons
small optimization
add subscriptions section
fix lot of linting errors and make command more userful
* some copy changes
* about to add last couple changes
* update still require verification
* fix button spacing
* hide subscriptions sections and fix links
* cleanups before merging
* more cleanup
* cleanup with last four fix
* changing tab functionality
* bugfix and fix presentation of cards
* fix transactions bug
* change order and remove logs
* remove unused code in account
* more linter fixes
* update account balance presentation
* fix flow errors
(1) The GUI currently behaves such that if MinTip is set, MinSuper will be ineffective. However, Commentron actually checks MinSuper first. Just zero out MinSuper for now to enforce our desired behavior.
(2) Add debouncing to numerical settings. Refresh everything during onBlur to always reflect what's in server (e.g. in case there was an error).
To avoid calling `setting.Get` excessively, we'll fetch the latest settings one last time before sending a tip. We'll also fetch in several areas, like when a comment action fails (most likely creator just enforced a minimum).
This will be easier when websocket send an update.
## General
- `setting.List`: returns full creator settings. Requires signature (i.e. you own the channel)
- `setting.Get`: returns a public subset of the creator settings. No signature required, and it is mainly used by the GUI to determine the constraints of a channel (e.g. comments enabled? min tip requirements? etc.). Does not include private settings like "blocked words list".
`doFetchCreatorSettings` will handle both of these. Clients that uses the stashed results (`settingsByChannelId`) just needs to be aware the result might not contain everything, depending on whether you own the channel or not.
## Misc Related Changes
- Finally fix the reducer for COMMENT_FETCH_SETTINGS_COMPLETED to not purge the data on each call.
- Change `doFetchCreatorSettings` to operate on a single channel instead of multiple. We ended up not using the multple mode anyway, so it was wasteful code trying to batch the promises.
- `commentsDisabledChannelIds` is no longer needed. Previously, this was created just to differentiate between Creator (full) and Channel (subset) settings. It's cleaner to just use one object, so eliminated this.
- Remove unused 'commentingEnabled'.
## Aside
- There are now 2 ways to know if a channel has disabled comments: (1) from `comment.list` and `setting.Get|List`. Both of them updates `settingsByChannelId`, so it'll still be a single place for the GUI to check against.
## Issue
> 5459 Add setting for changing your comment server. Visible on desktop (and possibly defaulting to Odysee URL), hidden on odysee.
## Comments
Not sure how this would actually work properly without the user recompiling the app to handle server differences. For example, even when we use our own server but switch between v1 and v2, some code changes are need to handle the differences. At that point, it seems easier for the user to just change the .env file? Anyway...
## Changes
- Added Desktop-only options to define custom server. [Settings > Advanced Settings > "Comment server" section].
* fix frontend bug
* show superchats in order properly
* scroll properly when switching tabs
* calculate fiat tips properly
* sum up lbc amounts
* refactor code a bit remove why isnt this working bit
* bugfix cant tip fiat if no lbc balance
* add toast when someone does a tip for a comment
* add error toast for card page
* show error on account connection page
* automatically truncate to two decimals
* close to working perfectly
* show decimals value better
* increase size of input value
* one bug left but almost working perfectly
* reverse so newest transactions come first
* fixing bug caused by floating point precision
* eslint fixes
* remove unused conditional
* get stuff ready for merge
* bugfix and cleanup
* requested changes
* fixing flow errors
* fix last flow error and touchups
* fix i18n and remove logs
Co-authored-by: Anthony <contact@anthonymayfield.com>
* raw ingredients done adding functionality
* essentially working just need a cleanup
* almost working with a couple bugs
* almost working but a bug or two
* seems to be working well
* seems to be working well but needs a cleanup
* couple of bug fixes
* basically working now cleaning up
* seems to be working pretty well
* cleanup unnecessary changes
* eslint fixes
* bugfix seek event
* bugfix and andrey fix and better docs
* getting ready to add last piece of functionality
* handle seek events properly
* add dynamic duration to calculate interval properly
* fix lint errors
* last couple changes
* only run watchman with analytics on and on prod
* flow fixes
Co-authored-by: zeppi <jessopb@gmail.com>
## Issue
6832: Pass through commenting error if it fails current error list
## Changes
- Refactor the error-msg-replacing code to make it easier to add new ones in the future.
- Made the new error message localizable (i.e. extract the variable value, pass to `__()`)
- Fallback to Commentron original message for those unhandled ones (usually fresh messages from Commentron).
Renamed variables for clarity while at it.
"Item added to %name%" is probably redundant due to toast passing through <i18nMessage>, causing a double translation.
Anyway, added all the resolved string for now to avoid them popping up in app-string during development.
Previous:
~~Although it was collecting info for all platforms, the data is only sent for Odysee.~~ Correction: it became enabled for all platform after `master` became Odysee.
New:
Only send out the telemetry for `IS_WEB` or if there's user consent.
## Issue
6366 Recsys Evaluation Telemetry
The recommended list from lighthouse is obtained from `makeSelectRecommendedContentForUri`. This list is further tweaked by the GUI (e.g. move autoplay next item to top, remove blocked content, etc.). Recsys wants the final recommendation list and the clicked index (in exact order), so we need pass these info to the videojs recsys plugin somehow. Also, Recsys wants a recommendation list ID as well as the parent (referrer) ID, we so need to track the clicks and navigation.
## General Approach
- It seems easiest to just spew back the final (displayed) list and all the required info to Redux, and the recsys plugin (or anyone else in the future) can grab it.
- Try to touch few files as possible. The dirty work should all reside in `<RecommendedContent>` only.
## Changes
- `ClaimPreview`: add optional parameters to store an ID of the container that it is in (for this case, it is `ClaimList`) as well as the index within the container.
- When clicked, we store the container ID in the navigation history `state` object.
- For general cases, anyone can check this state from `history.location.state` to know which container referred/navigated to the current page. For the recsys use case, we can use this as the `parentUUID`.
- `ClaimList`: just relay `onClick` and set IDs.
- `RecommendedContent`: now handles the uuid generation (for both parent and child) and stores the data in Redux.
## Issue
6721 Notifications: Thumbnail for "new content" not showing up in Desktop layout
## Change
The `className` wasn't propagated during the `FileThumbnail` refactoring to `Thumbs`.
## Issue
In the Channel Page, if the _Collections_ `claim_search` comes in after the main content's `claim_search`, the Collection's `ChannelContent` is being re-rendered despite not being in the active Tab. This causes a 0.4 CLS score (it's ridiculous that invisible components are taken into account). Apparently 41% of users are hitting this scenario, causing a poor aggregate.
## Change
Don't mount the `ChannelContent` components unless its tab is the active one. It doesn't seem like Reach Tab hides components under the inactive tab.
No functional change; just thought this is cleaner (group up the constants) and easier to type via IDE auto-complete, at the expense of creating an extra object.
## Issue
Creating Settings suddenly start to stop loading correctly for some of my channels.
## Change
`settings.List` now returns null instead of empty array. Double-checked the Commentron repo and this is indeed the case.
Updated the code to handle null.
## Issue
Closes 6490
Embeds in https://lbry.com/news/2002dtf was crashing in incognito
## Change
Ensure localStorage is available before using it. Jessop warned me before...
## 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
6542 Livestream listing and blocked list kills CLS score
This is basically a repeat of what was done on `claimTileDiscover` (homepage), but now on `claimListDiscover` (category pages).
This handles the unnecessary re-render when:
- the uri list temporarily being zero while waiting for new claim-search results.
- livestream claim-search invalidating the list.
## Changes
Store the last uri list and use that when we know that claim-search is still not done.
## Tests
1. Ran Lighthouse on category pages (force a livestream channel on it). CLS score must be green.
2. Block `claim_search` from Dev Tools and move to another category. The page should say "timed out" instead of "no results" (i.e. maintain existing behavior).
## Issue
6589
## Notes
`parseURI` will return `isChannel=false` due to the reposted channel URL not having the '@' symbol.
Since we already have the claim object, check `value_type` directly instead.
Pop up Menu Fixes and Improvements
Improve re-directs
Fix file deletion
Improve code, and more
Fix List Layout collection popup
Allow to edit list
Fix blocking when not logged or no channel
Fix Edit and Delete showing for not owned Lists
Fix actions breaking when not logged in
Fix List options not showing
Lint
Shorten logic
Lint
Recently changed to `<OptimizedImg>`, which was assuming the `src` never changes.
dejavu ... we also hit this issue when implementing the `IntersectionObserver` lazy-loading.
Objective:
- Get appropriately sized images to improve performance and Core Vitals score.
- Ensure images using "objectFit=cover" doesn't get stretched out if the source is large enough.
- Peg to 100px increments for better caching.
Notes:
- Skip images hosted in '/public'. If we really want to optimize it, then we'll need to provide the full path in the code, otherwise CDN lookup will fail.
If there are no API errors but no reactions returned, consider the requested IDs as "done" and stop requesting again. When a channel is being confirmed, Commentron doesn't return the reaction object.
Also added extra guard in case Commentron does return an object in the future, but an empty one.
- use `selectActiveChannelClaim` as that takes the current channel list into account (i.e. correct state when all channels are deleted).
- `selectActiveChannelId` should probably be removed or not exposed through a selector, as it is not updated when channel list changes?
## 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.
show visible card and add remove card button
show your transactions even if you dont have a card
fix presentational issues
show your transactions even if you dont have a card
fix presentational issues
add link to channel section
update yarn
show donation location
add remove card modal still needs completion and also changed how stripe is used on settings stripe card page
add confirm remove card modal to router
move bank account stuff to settings page
move account functionality to settings page
continuing to move account transactions to settings
list transactions for creator
updating copy
touchup tip error
do a better job autofocusing
bugfix
show an error on the card page if api returns 500
building out frontend for comment tip
display dollar sign if its a fiat tip
more frontend work
more frontend work
more frontend bug fixes
working with hardcoded payment intent id
working but with one bug
bugfixed
add toast if payment fails
add add card button
cant get claim id but otherwise done
more frontend work
call is working
show fiat for livestream comments
add is fiat on comments
round and show values properly
dont allow review if tiperror
copy displaying properly
disable buttons conditionally properly
remove card button working
remove card working with a workaround by refreshing page
bugfix
send toast when tip on comment
jeremy frontend changes
only show cart on lbc
In the event that Commentron returned an empty object, we'll end up re-requesting the same IDs again. Haven't seens this happen before, but since we don't know what's causing the spike, we'll just consider failures and "fetched" to stop the loop.
User can always click Refresh to repopulate the values.
Not sure if this will ever occur, but technically possible from the code point of view. Try adding this to see if it stops the spikes in `reaction.list` calls.
Someone mentioned about odysee.com showing "tip" related text when supporting own claim. Now it should default to "Boost" related text for own claims.
L167: Not edited but not sure if "claimIsMine" is needed there any more.
add watch later hover action
replace watch later popup item for favorites
lint
styling for watch_later overlay
Add label
Use just claim, add requiresAuth
Add list icon
Tone down text
Turn WL Hover Button into component
Change WL hover icons
small revert
Keep watch later in the menu
## Issue
- `Comment.replies` currently represent all replies, while `comment.List` returns a filtered version, so the actual replies could be less.
- The actual replies is represented by `total_filtered_items`, but we only get that after making a fetch. So, users could click "Show more" but get nothing.
## Fix
- Stop showing "Show more" based on `total_filtered_items`.
- If there is a balance, display 1 dummy comment to represent all blocked replies. This handles the case of "Show more" being displayed but ended up with 0 replies if all replies were blocked.
## Future
Note that `Comment.replies` might be changed to represented filtered comments in the near future (refer to Beamer), so the GUI is made such that the dummy just won't appear when that change happens.
Seeing the spinner too much can be annoying.
- This approach works, but currently, when the list is very long, something is taking up resources and the handler couldn't be processed, so the effect is lost (still seeing the spinner). See 6473.
- Since we are now prefetching, bumped the debounceMs a bit.
## Issue
6414 <Don't use "exact match" setting outside of main search - cuases no results in related>
`doSearch` was used in Wunderbar and Recommended, but it was adding in Wunderbar options all the time.
## Changes
- Fix `doSearch` to not use hardcoded options (take from arguments).
- Refactors the searchOption-creation code so that we don't duplicate the logic in both .js and .jsx.
## 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
#6332 <Thumbnail lazy-loader is too slow || Use browser-level lazy-loading>
## Change
Switch from "threshold-based check" to "viewport distance comparison" using the `rootMargin` parameter. The root is the viewport.
This change makes it closer to the native `loading="lazy"` behavior, where it starts to load when approaching the viewport. Chrome I believe uses 3000px distance -- I think 500px is a good compromise for now. Can adjust further.
## Future
- We are currently creating N instances of IntersectionObserver.
- https://developers.google.com/web/updates/2016/04/intersectionobserver
- "If you need to observe multiple elements, it is both possible and advised to observe multiple elements using the same IntersectionObserver instance by calling observe() multiple times."
This would probably need a refactor to make ClaimList (or something higher) own the IntersectionObserver.
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
It won't work with the hardcoded value.
Still waiting for commentron (error code + data) enhancement. It's pretty weird having to parse the number, then add it back in.
## 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.
## 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).
