## Issue
6068 Fix "Cumulative Layout Shift" for Core Web Vitals
In Posts, the Comments section appears first while we fetch the MD file. When the MD is fetched, Comments get pushed to the bottom (or shifted up for short posts), hence the red CLS scores.
## Approach
There are too many layers between `<FilePage>` and `<DocumentViewer>` to pass the `loading` state around to hide the Comments section, so just make Comments fade in after a 2s delay.
## Changes
- Posts: Add 2s fade-in delay to Comments.
- Posts: remove the gray placeholder. This improves the score a bit more, and reduces flicker as well. There's already a spinner from `FileRenderInline` to tell the user to be patient.
- Posts: add a minimum 30vh height so that short posts don't get collapsed too much, causing the `FileDetails` and Comments to shift. Small shifts are fine as long as CLS is below 0.1.
## Issue
6068
## Change
Lock all images to fit a 16:9 container. We have implemented 'ZoomableImg', so no reason in trying to display in full size.
This reduces CLS from 0.4xx to 0.01x.
## Flaws
CLS could probably be zero if not for the spinner shifting things slightly. Also, mobile CLS is 0.07.
The troublesome part in this PR is that FileRenderInitiator, FileRender and their subcomponents are broken apart and it's hard to synchronize their visibility and size. There are time gaps where none of them are visible, etc.
This PR only tackles the major part (most bang for buck), which is the elimination of variable height of the rendered image.
## Aside
I think `claimIsMine` is unused, so don't waste time requesting it.
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
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.
## Root-cause
`https://github.com/videojs/video.js/pull/7098`
videojs was recently upgraded.
## Change
Override videojs default theme of hiding the time control in smaller layouts.
## Issue
The loading circle wasn't showing up, causing confusion.
Splitting CSS doesn't seem trivial as there seems to be a huge dependency on the load order. Pretty much similar to what this person is facing https://lihautan.com/css-code-splitting/#the-problem
## Change
This reverts videojs-specific changes from 4d638bcf.
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
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.
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
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.
* 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).
* 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>
* 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.
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.
* 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>
- The icon makes the screen too busy when there are lots of images in a page.
- Use src as the last resort for the text (I though `title` and `alt` was mandatory in markdown; apparently not).
## Issue
4945: Simplify / revamp search filters for odysee (and lbry.tv)
## Changes
- Tweaked the "claim type = file | channel | everything" a little to hopefully make it more intuitive.
- Added "Sort By".
- Added "Upload Date".
- Fixed the affected files to handle both Desktop and Odysee.
- Tweaked the layout to be more condensed so that we can see some results as we change the filter.
- Added animations.
- Added "Exact match" option that helps user to surround with quotes.
## Issue
- Redo 5636: Disable video previews in comments/posts made by channels below a certain channel staked level
- Closes 5738: expand video preview level requierment to markdown images also
## Issue
Closes 5721: Publish-Preview updates
## Changes
(1) Match the recent "incognito" change that sets the channel to `undefined` via `updatePublishForm`. This change would also cover `null` -- I don't think it's being used to represent something else, so showing "Anonymous" for `null` should be fine.
(2) Added channel icons, so it'll be more obvious to the user if they accidentally selected the wrong channel.
## Issue
- Second attempt at 5500: Allow right click + report feature on tiles
- Related: PR_5531
## Notes
Although the link can already be easily copied on web, the menu item is still retained for consistency between the platforms.
Looking at a few other files hoping to understand the convention for components, I moved the videojs.scss file to where all CSS related files appear to be in the project.
* initial support for block/mute
* hide blocked + muted content everywhere
* add info message for blocked/muted characteristics
* sort blocked list by most recent block first
* add 'blocked' message on channel page for channels that you have blocked
* cleanup
* delete unused files
* always pass mute/block list to claim_search on homepage
* PR cleanup
## Issues
5349: Remove theater mode button from player in comments
5519: Theatre mode button doesn't do anything in full screen mode [Odysse/LBRY desktop app]
## Notes
5349: Wanted to hide for 'markdown' as well, but it seems useful for 'markdown' (to clear the screen from Related), so I did not include it.
## Issue
Closes#5392 better support for non-standard resolution videos
It's not actually cropped -- the control bar was opaque.
## Change
Use 0.80 opacity to somewhat see the full picture.
Using 0.5 or less would be even better, but due to the default tiny size of the control bar, the text becomes unreadable (it's readable if you zoom the browser to get larger text). Don't want to mess with sizing for now, so using 0.80 to get the best of both worlds.
## Issue
5438: Keep floating player in view area
## Changes
- Restore correct z-index
- The bug came as a side effect of cbac2174. Redo cbac2174 to cover both close button and floating player.
- Remove wobbling when dragging to bottom-right.
- The extra gap introduced is fighting against react-draggable. If gaps are needed, handle it entire ourselves or do it somewhere in react-draggable; neither is worth the effort, so the gap was removed.
## Issue
5221: floating player won't close during autoplay countdown
## Change
Change the z-index when hover to ensure it is really on top of everything.
## Issue:
5119 "Video: Mobile UI + overlay for keyboard shortcut feedback" was disabled because the feature broke the chromecast button in Android Chrome
Clearer display of takeover amounts
Repost from empty search result, from top page, or from claim
review changes
final touches
bump
empty comment copy
they
emptier
validation cleanup
extra
Wider post area for bigger text, while keeping the character count the same or less.
Removed `overflow: auto;` as it was not required and was creating unnecessary scrollbars when margins were incorrectly calculated.
## Issue
- Personally annoyed of having to switch to landscape just to change the setting. There's still space for it.
- This serves as a quick fix until "4712: Video: Allow access to all control in small screen" is figured out
The only downside to this new implementation is that the top-most (or right-most?) scrollbar won't get the customization. Any other sub-components (e.g. sidebar) will get the customization.
My guess is that the "top-most" scrollbar is above the `main-wrapper`. I'm not sure if we can (or should) add another className higher than App.
The impetus for the customization was the ugly sidebar anyway, so at least we covered that.
## Issue
4727: Sidebar's transient scrollbar doesn't fit in the Dark Theme
## Approach
The 'webkit' API works on Chrome, but Firefox ignores it and uses it's own fancy scrollbar when 'webkit' is used (can't seem to change any properties). It's better than the current look, but still doesn't fit our theme, plus it makes the product look different on different browsers.
Firefox now supports the new 'scrollbar' API, so we can now tweak the scrollbar, but the API only provides limited attributes.
Don't wanna complicate things by using Javascript, so we'll use Firefox's limited attributes as the common denominator and just live with a plain, rectangle scroll bar BUT with better color to match the theme.
## Issue:
5044: Auto hide cursor on video on static hover
## Approach
The existing code only hides the cursor when playing in fullscreen. Extend that to normal mode as well.
## Extra
Add in few new strings
## Issue
The abrupt cut-off of the expandable section bugs me (looks like a rendering glitch), especially when it cuts off in the middle of a line.
## Change
In addition to the existing 'More' button, we fade out the section to provide additional visual cues.
## Approach
This solution doesn't require the background color to be known, so it will work regardless where <Expandable> is used, or whatever color-scheme is chosen.
However, it does utilize non-standard css -- for older browsers, it should simply cut-off like the before.
Many of the creators including myself use transparency to achieve some effect. We all love PNGs and GIFs, so please dont shoot in your leg by limiting creative potential :)
For example: you can see the effect here, you can inspect lement and remove background color from channel "profile image": https://lbry.tv/@LBRYlytics:4
## Issue
4644: Markdown Preview breaks when <iframe> is present
Error: "Invariant violation: could not find 'store' ..."
## Change
Until we figure out a way to pass the store to the SimpleMDE preview formatter, just replace the embed with a stub region.
## Issue
4708: Bring back tag list in side bar when Tags view selected
## Approach
- Instead of displaying either Channels or Tags, both will now be displayed.
- The tags will simply be a the same button component as the "channels", but with a "#" prefix. This simplifies the CSS-side changes, and looks better overall as well.
(1) This reverts commit 8641a3ee1c.
(2) Fix floating-player misalignment due to YT badge in mobile by hiding the badge.
At first, the suggestion to truncate the left URI to keep the entire thing single-lined was implemented, but during testing, I realized that the YT badge will take up the entire width anyway (especially on other languages). The URI is more important than the badge, and truncating both of them would be ugly.
Given the preference to not have 2 lines for this, we'll just hide the badge for the mobile case.
For the Channel Page case, let's make it single-line through "4454: URL / top claims overlap" instead. We'll keep this commit/PR limited to fixing the YT badge.
## Issue
Fixes 4524 `[mobile] in channel search not available`
## Changes
There are currently 3 wunderbars: (1) header (2) channel list (3) downloaded list.
The additional `wrapperStyle` in the header made it hard to find a solution that works for all 3, so I split 2 and 3 into `wunderbar__input--inline`.
## Fixes:
4220
## Changes:
For `vjs-layout-small`, there is still space to display the said controls. This layout covers devices like Galaxy S5 up to Nexus 6P.
For layouts smaller that that (e.g. 'vjs-layout-xsmall'), they will remain hidden.
Implementation:
- The code is placed in <VideoJs> instead of <VideoViewer> as we need to control the video itself. It's more self-contained here, rather than trying to pass refs around between parent and child.
- useState cannot be used as it will cause a re-render when the hint it clicked and dismissed. The DOM is used to hide the button.
The MDE used in the "new" section has a parent width parameter to limit itself, while the MDE used in the "edit" section didn't.
Fix by limiting ".comment__body_container" to 80%, which takes into account the space taken by the author's avatar. This feels a little bit dirty since it's hard-coded. If there's a way to calculate the avatar width from here, it will be more robust.
Currently, the input field goes off-screen if the read-only prefix is too long.
Given that the prefix is read-only, the user probably knows what the prefix is from context. e.g. In the case of the Repost Modal, the prefix is repeated in a selection field above. So, it's probably ok to just truncate the text to an ellipsis.
The input field is the more important one here, so giving it 60% width when truncation is needed.
Implementation:
- <StatusBar> listens to 'update-target-url' and will show/hide itself as needed.
- Handled the display of "lbry://" protocol.
CSS:
- The colors chosen should work on both Light and Dark Theme.
- The delay is necessary to avoid blinkies when the mouse is moving around.
#4259
Fixed color issues that were making things hard to read:
- selected text color, including inline code.
- HTML tags
- Horizontal rule not visible in Preview mode. While at it, I changed the color in Edit mode as well as syntax highlighting.
- blockquote (was gray over gray)
Attempted to fix uneven margins between top and bottom for inline-code and codeblock. Also, removed the extra margin to make it more nice and cosy, instead of far apart.
Technically, the other modes can have a quick-action button as well, but for now it's not implemented since it's unlikely to be used.
The first usage will be to house the "toggle markdown editor" button, but it can be used for anything. The caller will handle the action.
It will be located at the upper-right, which is a better place for such a button. Putting the "toggle markdown editor" button on the bottom seems too far away and seems to make the 'Done|Cancel' area too busy/cluttered.
