Adds custom video.js hls quality selector plugin
This allows the quality selector plugin to stay active and listen for source changes on the player to prevent the need to recreate the player when switching between MP4's and M3U8's
## 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 5523: timestamps not interpreted in some cases
## Notes
`remark-breaks` previously kept repeating the same index in the loop, causing some corner-cases to be parsed oddly. I added code to address that.
Later, `remark-breaks` fixed the problem and we recently just bumped up the componnent version. My hack is no longer necesary.
## Issue
2731: Searches with forward slashes returns no results
## Change
The slash-removal came from (0db20834f9).
Removing the 2 `replace(/\//, ' ')` from lbry-desktop fixes it, but this PR assumes the slash-removal is intentional to cover something else. So, we'll make the Search side do the same thing to match what's happening in `doSearch`.
A little bit ugly, but there's already a comment about this in `makeSelectSearchUris`, so it'll probably get cleaned up in the future.
## 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.
- Fix i18n concat problem for some languages.
- Display the same label (specifically, the recommended aspect ratio) for both URL and UPLOAD. I think the string "File to upload" can be omitted, but I left it as-is.
- Remove old/unused strings.
Continually recreating video.js instance on render is bad.
Instead, persist a single instance, and simply update the source and poster on the existing instance.
I'm a bit wary of adding props to this component due to the 'dispose' call, but I think 'source' and 'claim' will update together, so it shouldn't be an issue?
## Issue
5308: Ability to choose default play speed and theatre mode or regular playback size
## Comments
Initially, I used the local storage, as per 'muted' and 'volume' -- I thought that would be appropriate.
Later, I saw that Theater Mode is already using Client Settings, so I re-did everything to match that.
Also, there is an accompanying commit in lbyr-redux.
## 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
## Issue
5204: Don't autoplay when commenting/video off screen
## Change
Previously, the checking was only done during a scroll event. We also need to check if the user has already scroll down before the component was invoked.
## Issue
- The previous regex uses lookback (I think ES2018?) which Safari has yet to implement.
- There were a few bugs in the previous regex too, like missing out multiple timestamps in a line, or parsing "62:02" as "2:02" (although YT does this as well).
- The previous method searched too deep (matchAll) on each 'locate' call, which was wasteful.
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
## Issue
5130: Support mailto hyperlinks / urls in markdown
## Change
The markdown components already support mailto, just that the logic here ended up making it a 'ClaimLink'
## Issue
5090: When sorting channels, switching between Trending/Top/New returns viewer to the top of the page
## Approach
- Add an optional parameter to `ClaimListDiscover/Header` to add an additional anchor ID when building a new search URL.
- Clients then add the anchor ID on the desired location.
- The code that handles the scrolling then checks if the `location` contains an anchor hash. If it does, we'll scroll to that element; else, the existing behavior will be used.
## Issues
(1) 4783: New search query does not reset to the top
(2) The current way that Tag Search resets the position can be overridden by the AppRouter's call.
## Approach
Listen to `search` changes as well. This basically covers any search param changes.
Components should probably not call `window.scrollTo` directly as the AppRouter's call might override it.
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
The "Trending for xxx" string was being resolved and translated twice, so it often re-appears in the string list during development.
## Change
It seems like `getHomepage` is repopulated every time, so I think it is safe to just resolve and translate `title` at that level.
## Extra
Remove unused "Creator analytics are down" message per recent changes.
## 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
4913: Can't slide volume slider in pop out mode
I first tried to handle this at the floating player level, but it was impossible to hack there due to how 'react-draggable' works (it already moved the window before the "move" handler is called, so we can't do much).
Fix by overriding the dragging behavior of the videojs' VolumeBar class by not propagating the event further. It is odd that videojs didn't already do this, since it's SeekBar does stop the propagation.
## Issue
4609: If claim search on latter page fails, don't clear out all previous data
## Note
This requires an accompanying change in `lbry-redux` to mark `claimSearchResultLastPageReached` during timeout and to not purge past results.
## Change
The previous flow was: increment the page, and expect the next render to either be 0 (timeout + purge) or fill in at least 1 new item.
Since it is now possible for no results to be returned for the new page (due to timeout + no purging), the code continues to make another query. This commit stops the perpetual querying.
## Test Case:
1. https://lbry.tv/$/discover?t=imherelbry&content=video&order=top&fresh=year
2. Scroll down a few pages until it timeout happens. Past results are gone.
## Issue
In the odysee branch, the tooltip for "Following" in the Sidebar was shown as "Following --[sidebar]--". In lbry.tv, the tooltip doesn't appear.
I believe the tooltip appeared due to the name change from 'label' to 'title' and then being passed to Button through '...passedProps'.
Fix by explicitly setting the Button's 'title' to the localized text.
I believe we don't translate these since this is already the translated form?
When the language is supported later, the English version will be added to the string database instead.
## Issue
4393: Tag query URL goes on indefinitely as you change between [Trending|New|Top]
## Change
Change from `append` to `set` when building the query to remove duplicates.
Flow hates null being not a string, so the FixMe was retained.
## Note from Russian translator
"To/From" in the 'automatic dark mode setting' cannot be re-used for the one in the 'Tip Modal'.
## Change
Wanted to split this into "general" and "time", but I'm guessing it won't satisfy all languages, so we'll just use the usage as the context since there's just 2 instances.
## Issue
4796 - i18n: Allow support for string overloading (multiple contexts)
## Approach
- Minimal code and process change.
- Handle on a case-by-case basis when reported by translators.
- Split the affected key in the string json by appending the context.
- Translators need to be aware of the new format and not translate context itself. Code is added to detect bad translations and will revert to English.
Sample in json:
"About --[About section in Help Page]--": "About",
"About --[tab title in Channel Page]--": "About",
Sample in client code:
title={__('About --[About section in Help Page]--')}
- "--[ ]--" was chosen as it's unique enough (unlikely for real strings to use it) and hopefully not that distracting in the client code.
- In the key itself, spaces are allowed after the string (i.e. before '--[') for neatness. It will be trimmed by the system.
## First example
"About" is used in 3 places:
- Channel Page
- Help Page
- Footer (in Odysee branch)
For Russian, the word "About" is "O" and is usually not used standalone, but requires something behind it. A translator said so, and seems to be the case in other sites as well.
"O xxx"
"O yyy"
## Other languages
For other languages that are not impacted, they can just clone the same translation for each of the split keys, just like in English.
## Possible enhancement in Transifex
I see that Transifex's API includes a `context` entry. It might be possible to move the context-metadata there during the upload, so translators will never see the "--[]--" messiness (it will be shown as "Context: xxx" in the Transifex GUI).
I'm not sure how to test the Transifex side, so I did not investigate further.
## Issue
4831: Videos start muted on Desktop (fresh install) and web (sometimes resets)
This covers the Desktop fresh install and Web fresh session (incognito) part. It doesn't cover the "sometimes reset" part as I don't know how to reproduce that.
## Change
`sessionStorage` is always empty when that piece of code is called, even for non-fresh Desktop and even in Brave. We now fallback to `1` when `volume` is `null`. Still not sure the purpose of that code, but leaving it there just in case something relies on it.
## Tests
[/] Desktop fresh-install is not muted.
[/] Desktop return session restores previous volume level.
[/] Web* fresh session (cleared data) is not muted.
[/] Web return session restores previous volume level.
*Web = Chrome, Firefox and Brave.
- "The publisher has chosen to" -- Fix incomplete string, probably broken by linter.
- Fix hardcoded email in invite snackbar.
- Fix 'Upload Settings' to new lower-case style.
- Add few more missing ones.
- Consolidated "Claim xxx" strings together.
- Removed duplicate "Confirming..." due to branch merging.
The "Report Content" button was the impetus for this, as there was no way to know what that button is for unless the user clicked it (or smart enough to decipher the icon).
3465
## 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.
This option allows users to bypass the "publish preview" modal. Users can disable it by checking "don't show this again" in the modal, and re-enable it in the Settings Page.
This requires an accompanying change in lbry-redux. Search for "SETTINGS.ENABLE_PUBLISH_PREVIEW" in the commit message to find the commit.
In Edit Mode, the preview will not appear. Not sure if it's needed, plus there are more things to handle in Edit mode (e.g. which items are changed)
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
- More missing strings
- Moved strings around to keep related strings together (easier for translators to guess the context)
- Removed translation macro for blank string
- Fix typo for 'Neetwork'
## Issue
4797: Markdown preview breaks when using a lbry link in angle brackets
This is similar to the Embed case in commit dbcd677e.
## Change
Replaced it with a dummy link that looks like what the final outcome would be, but would not be clickable.
Again, similar to the embed case, unless there is a way to pass the store over, I don't have an alternative that makes sense: Adding a dummy router or replacing it as a regular <a> will just make React spew security errors.
Not being able to click it is not ideal as we (as a user) can't verify our links, but it's better than the current case of not rendering anything at all.
remove previous changes,keep syncpref in wallet, change anon wallet pref key to local
sync choices wip
dont relocate syncenable setting
bump
no prefs on web unauth
bugfix redux bump
pull after sync change
bump
## Issue
Fixes 4477: `Price="free" yields nothing`
## Remarks
I didn't consult the documentation, but simply did a trial-and-error.
"=0" -- didn't work
"<=0" -- works
## 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
The previous code only handled the clamping if the FP is already floating when the main window is resized.
1. In fresh Odysee session, the floating player is always clipped on the right.
2. If you resize the desktop while not floating, the FP could be clipped when you go into floating mode.
## Changes
- Factor out the clamping code.
- Add another effect to handle 'isFloating' changes.
## Issue
4749: "Password updated successfully" kept showing up
## Change
In addition to the `passwordReset*` variables, reset the `passwordSet*` variables as well for `USER_PASSWORD_SET_CLEAR`.
## Issue
4741: `Pop out player disappears or is cut off`
## Approach:
- When dragging stops, determine the location of the floating player with respect to the main window in terms of percentage.
- When window is resized, roughly re-position based on the stored percentage.
## Issue
4669: `Download doesn't trigger on web until 2nd attempt`
The issue only happens when _Autoplay_ is disabled in the User Settings and the video hasn't been loaded when _Download_ is clicked.
The following code:
`if (didClickDownloadButton && streamingUrl)`
didn't triggered because:
1. `streamingUrl` has not resolved yet when the Effect ran.
2. When it did resolve, the parent component was also notified and unmounted things, causing `didClickDownloadButton` to reset.
## Approach
Avoid the unnecessary unmounting by not using a conditional section wrapper within a return statement. React probably couldn't do the diffs when the conditional is at a section level.
## Issue
- "See the" was not encapsulated with the translation macro.
- Split-strings are not translatable for some languages.
## Change
Combine the entire sentence into a single string with variable.
## 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.
## Issue
Fixes 4709 `Dragging floating player via video section pauses video`
## Changes
Don't propagate the key-up action if the window was dragged. Hopefully there isn't another sub-component that relies on the action being propagated.
## Note
If you drag at exactly the "Play" icon the control bar, the issue still happens.
## Issue
Fixes 4665 `Translated strings with trailing spaces not shown correctly`
## Changes
While there are other strings with trailing spaces, "Trending for " was the only one that mattered. The rest are standalone paragragphs or used in a single line, so it doesn't matter if the translation included the space or not.
## Issue
Users are annoyed with the constant reset of the 'channel' setting in the Publish page.
## Changes
1. Revert the previous attempt in ff7b4092. The `usePersistedState` method is bad, as it will clash with the Redux value.
2. Implemented the persistence in Redux -- requires "https://github.com/lbryio/lbry-redux/pull/347".
## Issue
The sidebar text stuck in English despite already translated.
I'm guessing the i18n macro only ran once for the global object.
## Change
Run the macro on the label when passing it to the `Button`.
## Issue
The previous commit was over-doing the manual syncing, causing other usages like the Repost Modal to always reset to a different channel.
## Fix
Only do the manual syncing when the channel does not exist.
At this point, we could also just take `channel[0]` as the new value.
## Issue
Fixes `4544 Channel-creation in "Tip|Support" Modal shouldn't submit LBC immediately`
## Changes
`Form` seems to have already tried to stop the propagation of `onSubmit`, so I'm not sure why it was still propagated.
Fix by using the same method used in the `CommentCreate`, which is simply to check for `CHANNEL_NEW` as the current selection.
## Issue
Fixes `4621 Can't create Comments if you recently deleted a channel`
The `channel` that the parent passes in is from a persisted state. If the channel has been deleted, `<select>` will automatically resolve to another selectable value. However, `onChange` will not be called for this scenario, so we now have a mismatch.
## Changes
- Manually check if the value has been auto-resolved and report it to the parent.
- An extra `setTimeout` was needed. It seems like `onChannelChange` needs to be called after the first `useEffect` of the parent, otherwise the call has no effect.
## Issue
In the `Autoplay` case, if the `WaitUntilOnPage` has already opened the gates previously, the next video's Related will be loaded regardless of scroll position.
## Changes
Add a `lastUpdateDate` prop to `WaitUntilOnPage` to allow the parent to reset the gating state.
I don't really like the `lastUpdateDate` prop since it's purpose is not intuitive. Is there a standard way to do a "one-time trigger" from the parent?
This allows `RecommendedContent` to render the Card but with an empty list, so that the area isn't totally blank while waiting for `WaitUntilOnPage` to debounce.
There are cases where `WaitUntilOnPage` will incorrectly render, such as at the beginning if the upper components hasn't expanded to full size, so `WaitUntilOnPage` would be briefly visible.
Added a 300ms debounce to fix this, which would also improve scrolling performance a bit by doing less. Hopefully 300ms is enough for the upper components to inflate to full size.
## Issue:
Fixes 4549 `Mature content + navigating to URLs directly`
_If a user navigates to mature content directly, we currently show the page even if mature content setting is not enabled. With our recent mature content verification setting, we should hide the page until the user turns it on - we can prompt directly on the file page._
## Changes:
1. Show basic info of the claim like URL and Title, so that user knows which page is being blocked.
2. Initially, I had 2 "boxes" -- one for the title and another for the message. It felt a bit messy, so `FileTitle` was augmented to house everything in one box.
## Issue
When navigating back and forth between a File and Channel page, the back-action will be laggy (no response) if the channel contains a lot of comments and is in the midst of resolving them.
## Changes
The "full" fix would be to batch-load comments, as this would improve the performance of fetching both Channel and File comments. For now, this commit focuses on the Back action problem only.
Skip fetching comments by not mounting 'ChannelDiscussion' until the tab is selected. I couldn't find anything in the Reach UI documentation on how to not render inactive `TabPanel`s, so I used the straight-forward state method.
## Issue:
Fixes 4411 `"SelectChannel=New" doesn't show all fields on re-entry`
## Code Changes:
`selectChannel`: Correct the value of `addingChannel` in the constructor based on the given props.
(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`.
## Issue:
Currently, the checkbox grayed-out state is only correctly updated when changing from "no-file" to "file selected". If you have selected a video file and later changed to a text file, the checkbox doesn't gray out.
## Code Changes:
`fileVid` wasn't being updated for the case of non-videos; now it does.
## Issue
Closes 3964 `Add Youtuber info to file page`
## Changes
(1) Refactor the YT-info query into `YoutubeBadge` component.
(2) For the File Page case, don't show "- last sync <date>" since the date has nothing to do with the file.
## Test
[x] YT Channel page
[x] YT Channel's claim page
[x] Non YT Channel page
[x] Non YT Channel's claim page
[x] No channel (anonymous) claim page
[x] Various RENDER_MODES
## Issue
Closes 4501 `Font size`
## New behavior
The Desktop app can now zoom the same way as browsers:
- Zoom In: "Ctrl+=" or "Ctrl+numpadPlus" or "Ctrl+WheelUp"
- Zoom Out: "Ctrl+-" or "Ctrl+numpadMinus" or "Ctrl+WheelDown"
- Zoom Reset: "Ctrl+0" or "Ctrl+numpad0"
## Code changes
(1) Electron provides this functionality through the `zoomIn|zoomOut|resetZoom` roles in the Menu, so it would have been a quick job.
However, given that Electron currently does not support having multiple accelerators for one item, we can't add `Ctrl+WheelUp` to the mix and would have to implement our own handler and use `webFrame`.
Given that we need to add code anyways, we handle both keyboard and mouse cases through the same handler, hence the existence of `zoomWindow.js`. It also provides the opportunity to few a few quirks with Electron's default implementation (e.g. stuck at both extremes)
(2) I recall there is another Issue for adding keyboard shortcuts. Given that these shortcuts are universally used in browsers, they are probably "reserved", so shouldn't clash with that task.
## Issue
Fixes 2675 `Claim search with exactly 20 results keep fetching next page`
## Changes
Use `claimSearchResultLastPageReached` (I didn't know it existed back then).
The unnecessary "loading" refresh will still happen one time, but at least now it doesn't happen every time we scroll to the bottom (and incorrectly incrementing 'page').
This is a follow-up on PR-4392.
## Issue:
The previous PR covered "pop from within the same page but with different query/order", but missed "pop after entering a claim".
1. Click `Your Tags`.
2. Set order to `New`.
3. Restart app or reload (crucial step)
4. Click `Your Tags`.
5. Click any claim.
6. `Back`. The order incorrectly resets to `Trending` -- it should stay at `New`.
## Issue
- The diff for new strings are polluted by the need to add a comma to the previous entry.
- Having to re-add the newline at the end of file before commiting is a repetitive pain.
## Caveats to this approach
- When manually adding strings, developers need to put it above the `--end--` entry. Hopefully it is obvious without having to put verbose comments like "^--- add new string before this line ---^"
- Translators will surely ask how to translate "--end--".
The `UserPasswordReset` can be accessed in two places:
(1) While signing in
(2) From the Settings Page when changing password.
This commit:
- maintains the existing `Cancel|X` behavior for case-1, which is to remain in the Sign-in page.
- For case-2 and any future direct-entry, we'll simply call `goBack()`.
CT - Chinese Traditional
CS - Chinese Simplified
Note that if English subsets like en-GB is enabled in the future, the default 'en' value used throughout the code (including in redux.git) needs to be changed to 'en-US'.
## Issue
Fixes 4293 `Better download link support`
- [x] make it so you can right click a download button > copy download URL
Given that this could be useful in mobile/web as well, I used a button+modal instead of the right-click approach.
- [ ] in share dialog, show download URL to copy for non-video content
This is already implemented, albeit hidden in the "More..." expansion.
## Issue
Fixes 4460 `unmuted state lost / reverted`
1. Play a video.
2. Press mute.
3. Drag the volume bar to unmute.
4. Play a new video --> the video starts muted.
## Fix
The `volumechange` handler was comparing against stale variables, so there are times where the state was not saved. Just save both `muted` and `volume` without additional gating (the gating is probably unnecessary in the first place, since we are in a onChange function).
- Missed the "Account Password" card that is used for authenticated case.
- For cards that are only used in Settings, listen to the language change in "select" instead of passing in as a prop. I think this is cleaner.
## Issue
4332: Video transcode setting not reflected correctly (MP3 incorrectly transcoded to MP4)
2 issues here:
(1) The checkbox is mixing between user state and logic state.
(2) The variables (e.g. `optimize`, `isVid`, `filePath`, etc) will have values from the previous operation when you enter Publish Page, so GUI issues beyond Transcode can be also produced (e.g. showing Transcode enabled for an image).
## Changes
The "Transcode" checkbox state (checked vs. unchecked) will now reflect the user's desire and will be a persisted state. Whether or not this setting is used will be reflected by the checkbox's grayed-out state (i.e. it can be checked for non videos, but it will be grayed out).
## 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.
## Fixes:
4351: "Infinite load won't work if the same sort option clicked"
Test case:
1. Click Following
2. Click New
3. Scroll down to load at least 1 extra page.
4. Go up and click New again.
## The Issue:
`scrollBottomCbMap[page]` in this case did not reset since the `id` remained the same.
## The Fix:
I don't know how else to notify the effect to run. Perhaps "when `page=1`" is one criteria, but I found that removing `scrollBottomCbMap` can also fix it.
I don't know what scenario that `scrollBottomCbMap` was originally meant to handle, so will need to depend of reviewer to confirm I did not break something else. This fix assumes that recent inf-scroll fixes and debouncing would have addressed the "weird stuff happening with fast scrolling" problem mentioned in the comments.
The previous code was simply delaying the handler, which served the intention of the time, which is to avoid using the wrong coordinate from querying too early. However, we ended up servicing each scroll message.
This is the proper fix, and should technically make scrolling smoother. Maybe this will fix 3576 as well, although I don't see much difference.
## Fixes:
3071: "Infinite scroll stops working when navigating to file page / back"
## The Issue:
In the POP operation, the `page` value is back to 1 due to the initializer `useState(1)`. If the results cache already contained more than 1 page's worth, then the rest of the logic thinks there's nothing to do.
## The Fix:
Previous fixes to Inf-Scroll added a "page correction" code to handle the mismatch. This fix simply adds this scenario to the list of scenarios to perform the correction.
## Fixes:
4214
## Approach:
`ClaimList` currently only shows the loading indicator if there is a header. We could make the indicator always appear at the top of the list when `loading=true`, but that would be the list jump up and down as the indicator appears/dissapears. I assume that is too distracting and is the reason why it was not made that way in the first place.
Show the indicator in place of the Refresh button while fetching instead.
## Fixes:
3641 Language switch does not take effect right away
## Assessment:
Although `Card`s in the Settings Page are actually being re-rendered, the `actions` within them might not be getting the signal, depending on their props.
## Changes:
(1) Pass the language variable to the `actions`'s props for items that are affected.
(2) Make the Wunderbar listen to language-changes as well (the only component outside of Settings that would need an immediate update).
1. Use a constant for the classname instead of being hardcoded.
2. Use existing 'debounce' function instead of introducing another.
3. Added changelog entry.
Fixes #-4021.
## Changes:
When the autoplay overlay gets partially off-screen, the timer will be stopped. We can tweak how much down it needs to be scrolled.
When timer is paused, the countdown resets.
The pausing mechanism has no effect on the floating player (since the 'top' can never go negative). This behavior is the same as another big video platform.
---Fixes:
#-2882: "Fix UX around publishing to already published URL".
---Changes:
1. Improved the error message (change color to red; emphasized the URL; tweaked the sentences a bit).
2. The `Publish` button will be grayed out in this scenario, until user explicitly decides to edit existing claim instead.
--- Issues:
(1) #-2669: Page does not restore to top when navigating new tags.
(2) "Encountered children with the same key" error (duplicate entries shown).
https://github.com/lbryio/lbry-desktop/issues/4367#issuecomment-645449206
--- Changes:
(1) Ignore the history if it's a new query (i.e. explicitly clicked). The BACK history will still behave as normal (doesn't reset to top).
(2) Previously, the `page` variable will continue to increment as you scroll and stay within the page (e.g. Trending vs New, or clicked another Tag). As you move between queries, we hit a scenario where `page` is significantly under or over the latest retrieved `claimSearchResult.length`. This messes up the rest of the code.
Fix by correcting the value of `page` according to the current `claimSearchResult.length` when necessary.
--- Issues:
(1) #-4394 add persistence to new support modal.
(2) Should collapse the custom field when presets are selected.
Even though the Send button repeats the amount for Tip, it's still confusing to see both the Preset being active and Custom numeric field visible.
(3) Missing localization tags.
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 bad scenario:
A less popular tag like 'kanji' yields only 23 results today. The code continues to increase the page count. We'll either see some blank page glitches at the bottom, or repeated entries being shown.
--- The fix:
Assume that an unfilled page means "no more results" and stop incrementing the page. This seems true based on empirical evidence.
If you are at the bottom and you hit the UP_ARROW key one time, the logic still thinks we are at the bottom, despite the component has clearly moved. Similar to the issue noted in the previous commit, this causes the page to increment incorrectly.
My wild guess is that the previous logic depends on the css height, so it might got broken due to css changes. Hopefully the new calculation is more robust and works for all cases.
---The bad scenario:
If you're at the bottom and you go up using UP_ARROW or HOME key, the coordinate is still at the bottom if we service the callback immediately. This causes 'contentWrapperAtBottomOfPage' to be true and we ended up incrementing the page unnecessarily (even for searches that no longer yield any extra results).
---Fix:
Fix by adding a delay. The value can probably be fine-tuned further.
---The issue:
When switching between tags, the selector defaults back to Trending even though you had another option already selected.
---Changes:
- 'orderParamUser' will store the last user state persistently. The persistent state is also made unique for each page (i.e. Your Tags and All Content will be unique).
- If the parent component passes in a specific order, that will be respected and will also become the new persisted value. One example is "Your Following", where it always starts at 'New'.
- Handled navigation history correctly
The test case:
- Enter "Your Tags" (assume start at 'Trending')
- Click 'New'
- Click 'Top'
- Back
- Back (it should return to 'Trending')
As the top page history does not have any "?order=" value, we ended up with a no-op for the last Back. 'orderParamEntry' is added to handle this.
Two issues:
1. Values not marked with __()
2. Split sentence.
For #2, it seems like there are translations that don't make sense when combined, because the values are being translated independently from full sentence in Transifex. Decided to just make it full sentences.
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.
Removed space to sync the text "LBRY takes privacy and choice seriously. Just a few questions before you enter the land of content freedom." with that from app-strings.jsx
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.
-- "/wallet" --
I believe this is a link and comes from redux, and shouldn't be translated.
-- "%message%" --
No point sending a variable-only to the translators -- the intended replacements are translated correctly.
-- "%name%" --
Unused.
-- "Something something something..." ---
Unused.
-- Obsolete strings (replaced by better string) --
"You are not able to see those stats right now. Make sure you are signed in with the correct email and have data sharing turned on."
"You are not able to see this channel's stats right now. Make sure you are signed in with the correct email and have data sharing turned on."
"There are no stats for this channel. Make sure you are signed in with the correct email and have data sharing turned on."
The only issue I have with this as a translator is that I have no idea what this sentence is about, as both chunks are variables. This fix is more for clarity.
#4239
Concatenating strings directly assumes that all languages have the same structure as English, which it is not. This fix allows translators to move the tokens around per their language/grammar requirements.
#4239
language and API consts
improve customization
custom homepages
get config from .env.default
custom title and logo
small changes
add pinned item to sidebar
rebase?
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.
--- Problem (#4173) ---
Messages under <i18nMessage> weren't localized although the translation is available. However, the tokens for these messages are localized, causing a mixed-language final string.
--- Fix ---
It appears that the original message (instead of the localized) was used in the token-substitution process.
Problems solved (second attempt):
A. Small typo for <div className="card__title card__t itle--deprecated"> (extra space in the word **t itle**)
B. More details about problems with languages:
1. The word blocked has two forms in other languages (one for plural and one for singular) and therefore must be put together with channel and channels words. Currently it can be translated in only one form.
2. In the case there are no blocked channels there is no need to show the 0 value and is more elegant the message 'You do not have blocked channels'
3. The link to manage the channels should not be visible in the case that there is no channel blocked, because there is no channel that need to be managed.
And about your statement: "Your change would make it harder for other languages to change this sentence."
It's quite the opossite, it's very clear and easy. They just have to translate (with examples in Romanian):
'%count% %channels%. ', (leave it as it is)
'You don't have' = 'Nu aveți'
'You have' = 'Aveți'
'blocked channel' = 'canal blocat'
'blocked channels' = 'canale blocat**e**' (see the change for plural forms for the word blocked, not only for channels word?)
I hope this time I explained better the need for the changes.
Thanks
Messages displayed:
Case with 0 blocked channels: You don't have blocked channels. (No Manage button displayed)
Case with 1 blocked channel: You have 1 blocked channel. **Manage** (manage link)
Case with 2 or more blocked channels: You have 2 blocked channels. **Manage** (manage link)
The best candidate is `aria-label`, followed by `description`.
Most of the existing elements already have these defined, so try to route it as the tooltip instead of having to explicitly define tooltips everywhere through a redundant `title` or <Tooltip> tag.
Minor side-effect:
This will cancel off any effect from a parent <Tooltip>, i.e. might confuse future developers who are trying to do "<Tooltip><Button></Button></Tooltip>".
The class was only returning a localized string for 'years' and 'months'; English was used for the rest.
- Fixed by handling the remaining cases.
- New strings were added (1) so that they will all be consistent language-wise until the translators handle them all (2) allows for cleaner code through variable re-use (%duration%).
