lbry-desktop/ui/scss/component
infinite-persistence 3b47edc3b9
Livestream category improvements (#7115)
*  Remove old method of displaying active livestreams

Completely remove it for now to make the commit deltas clearer.
We'll replace it with the new method at the end.

* Fetch and store active-livestream info in redux

* Tiles can now query active-livestream state from redux instead of getting from parent.

*  ClaimTilesDiscover: revert and cleanup

## Simplify
- Simplify to just `uris` instead of having multiple arrays (`uris`, `modifiedUris`, `prevUris`)
- The `prevUris` is for CLS prevention. With this removal, the CLS issue is back, but we'll handle it differently later.
- Temporarily disable the view-count fetching. Code is left there so that I don't forget.

## Fix
- `shouldPerformSearch` was never true when `prefixUris` is present. Corrected the logic.
- Aside: prefix and pin is so similar in function. Hm ....

* ClaimTilesDiscover: factor out options

## Change
Move the `option` code outside and passed in as a pre-calculated prop.

## Reason
To skip rendering while waiting for `claim_search`, we need to add `React.memo(areEqual)`. However, the flag that determines if we are fetching `claim_search` (fetchingClaimSearchByQuery[]) depends on the derived options as the key.

Instead of calculating `options` twice, we moved it to the props so both sides can use it.

It also makes the component a bit more readable.

The downside is that the prop-passing might not be clear.

* ClaimTilesDiscover: reduce ~17 renders at startup to just 2.

* ClaimTilesDiscover: fill with placeholder while waiting for claim_search

## Issue
Livestream claims are fetched seperately, so they might already exists. While claim_search is running, the list only consists of livestreams (collapsed).

## Fix
Fill up the space with placeholders to prevent layout shift.

* Add 'useFetchViewCount' to handle fetching from lists

This effect also stashes fetched uris, so that we won't re-fetch the same uris during the same instance (e.g. during infinite scroll).

*  ClaimListDiscover: revert and cleanup

## Revert
- Removed the 'finalUris' stuff that was meant to "pause" visual changes when fetching. I think it'll be cleaner to use React.memo to achieve that.

## Alterations
- Added `renderUri` to make it clear which array that this component will render.
- Re-do the way we fetch view counts now that 'finalUris' is gone. Not the best method, but at least correct for now.

* ClaimListDiscover: add prefixUris, similar to ClaimTilesDiscover

This will be initially used to append livestreams at the top.

*  Re-enable active livestream tiles using the new method

* doFetchActiveLivestreams: add interval check

- Added a default minimum of 5 minutes between fetches. Clients can bypass this through `forceFetch` if needed.

* doFetchActiveLivestreams: add option check

We'll need to support different 'orderBy', so adding an "options check" when determining if we just made the same fetch.

* WildWest: limit livestream tiles + add ability to show more

Most likely this behavior will change in the future, so we'll leave `ClaimListDiscover` untouched and handle the logic at the page level.

This solution uses 2 `ClaimListDiscover` -- if the reduced livestream list is visible, it handles the header; else the normal list handles the header.

* Use better tile-count on larger screens.

Used the same method as how the homepage does it.
2021-09-24 10:26:21 -04:00
..
_ads.scss CLS: reserve space for injected video ads 2021-07-23 13:23:51 +08:00
_animation.scss Revert "Make dropdown menus actually dropdown" 2021-01-29 11:54:39 -05:00
_badge.scss theme orginization and cleanup 2021-04-30 15:05:58 -04:00
_block-list.scss Blocklist: paginate + search (#7055) 2021-09-10 11:36:08 -04:00
_button.scss Expanded Playback and List controls (#6921) 2021-09-02 16:05:32 -04:00
_card.scss Mobile view: Make comments expandable 2021-08-03 11:05:32 -04:00
_channel.scss Thumbnail upload fixes (#6860) 2021-08-24 20:28:23 -04:00
_claim-list.scss Fix dropdown caret spacing (#7096) 2021-09-15 15:18:17 -04:00
_claim-search.scss Fix dropdown caret spacing (#7096) 2021-09-15 15:18:17 -04:00
_collection.scss Playlist style fixes (#6509) 2021-07-16 15:13:28 -04:00
_comments.scss Explain that "Block" leads to modal with more options. (#7039) 2021-09-08 12:31:45 -04:00
_content.scss CodeSplit: Initial work 2021-06-25 16:00:44 +08:00
_dat-gui.scss Fix and enable 3D viewer: #4035 2020-04-27 14:27:04 -04:00
_embed-player.scss support embed preference (#7114) 2021-09-18 10:23:30 -04:00
_empty.scss winning claim style pass 2020-12-16 14:58:30 -05:00
_expandable.scss refactor floatingUri to allow inline players in comments/markdown 2020-10-21 15:29:29 -04:00
_file-drop.scss moonpay 2020-06-03 14:16:43 -04:00
_file-list.scss moonpay 2020-06-03 14:16:43 -04:00
_file-properties.scss unify some styles with master 2021-04-27 11:20:41 -04:00
_file-render.scss Embed: add replay button + msg resizing (#7141) 2021-09-21 11:48:05 -04:00
_footer.scss Fix footer in master 2021-06-08 01:19:41 +08:00
_form-field.scss Fix dropdown caret spacing (#7096) 2021-09-15 15:18:17 -04:00
_form-row.scss moonpay 2020-06-03 14:16:43 -04:00
_header.scss fix logo size on firefox 2021-08-01 14:26:59 -04:00
_icon.scss Vertically center 'icon--help' (redo) 2021-09-07 16:12:21 +08:00
_item-list.scss moonpay 2020-06-03 14:16:43 -04:00
_livestream.scss Livestream category improvements (#7115) 2021-09-24 10:26:21 -04:00
_main.scss Fix theater mode layout on small and medium screens (#7108) 2021-09-20 10:20:28 -04:00
_markdown-editor.scss Fix broken markdown editor border color 2021-02-26 11:04:25 -05:00
_markdown-preview.scss Markdown editor tweaks (#6096) 2021-05-20 15:31:14 -04:00
_media.scss Fix mobile view with long descriptions 2021-05-14 13:51:55 -04:00
_meme.scss meme style 2021-07-19 14:17:43 -04:00
_modal.scss Revert "Open the actual image when clicking on the image viewer" 2021-02-19 14:05:51 -05:00
_navigation.scss adjust channel staked indicator in side navigation 2021-06-17 10:28:16 -04:00
_notification.scss #6935 Direct reacting from notifications 2021-08-28 20:50:35 +08:00
_nudge.scss wip 2021-04-27 11:20:41 -04:00
_pagination.scss moonpay 2020-06-03 14:16:43 -04:00
_placeholder.scss fix placeholder tile margin 2021-03-08 14:05:02 -05:00
_post.scss Posts: restore "Tip unlock | Claim details" component (#6051) 2021-05-12 14:26:47 -04:00
_progress.scss add youtube sync to first run 2020-09-29 17:12:32 -04:00
_purchase.scss unify some styles with master 2021-04-27 11:20:41 -04:00
_search.scss SearchChannelField 2021-09-08 21:23:50 +08:00
_share.scss use web share api 2020-03-30 15:49:45 -04:00
_snack-bar.scss Fix recommended tab style issues 2021-07-08 16:08:13 -04:00
_spinner.scss moonpay 2020-06-03 14:16:43 -04:00
_splash.scss moonpay 2020-06-03 14:16:43 -04:00
_status-bar.scss Fix css "--spacing-?" renaming that recent PRs missed during the merge. 2020-06-04 10:53:32 -04:00
_stripe-card.scss Move transactions from Settings to Wallet (#6871) 2021-08-13 13:59:43 -04:00
_superchat.scss hyperchats 2021-04-23 16:20:17 -04:00
_syntax-highlighter.scss Add integrated light theme 2020-02-07 09:21:28 -05:00
_table.scss theme orginization and cleanup 2021-04-30 15:05:58 -04:00
_tags.scss Moderator Delegation GUI 2021-06-18 15:46:51 -04:00
_tooltip.scss add channel staked amount indicator on channel thumbnails 2021-02-18 01:14:39 -05:00
_txo-list.scss finish button links 2021-08-23 19:52:56 +02:00
_videojs.scss Revert lazy-loading videojs 2021-07-06 17:04:16 +08:00
_wallet-tip-send.scss updated code 2021-07-03 14:42:37 -04:00
_wunderbar.scss Wunderbar: re-arrange static buttons to the top 2021-09-14 15:07:30 +08:00
_yrbl.scss New repost flow 2020-12-16 09:47:28 -05:00
expanding-details.scss moonpay 2020-06-03 14:16:43 -04:00
menu-button.scss Fix CSS - separator lines 2021-08-28 20:48:48 +08:00
nag.scss wip 2021-04-27 11:20:41 -04:00
section.scss Convert "moderator search" to use the new widget 2021-09-08 21:27:25 +08:00
tabs.scss extra collection publish buttons, styling 2021-06-15 18:37:35 -04:00