* Refactor CommentBadge
* Refactor livestreamComment component
* Refactor and split livestreamComment CSS
* Refactor livestreamComments component
* Refactor and split livestreamComments CSS
* Remove never used spinner
* Refactor livestream Page
* Refactor page component
* Refactor livestreamLayout component
* Break apart livestreamComments into separate sibling components
- This helps separating LivestreamComments to deal with only the comments, and the LivestreamLayout to be used for its own Page as a Popout option, and also for a layered approach for mobile
* Create Popout Chat Page, Add Popout Chat Menu Option
* Add Hide Chat option
* sockety improvements
* Websocket changes
Co-authored-by: Thomas Zarebczan <thomas.zarebczan@gmail.com>
* Add ordering Icons
* Refactor doCollectionEdit
- It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead.
- There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter
* Add List Reordering changes
* Add toggle button for list editing
* Add toggle on content page collection sidebar
* Enable drag-n-drop to re-order list items
https://www.youtube.com/watch?v=aYZRRyukuIw
* Allow removing all unavailable claims from a List
* Fix <g> on icons
* Fix section buttons positioning
* Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim
* Change dragging cursor
* Fix sizing
* Fix dragging component
* Restrict dragging to vertical axis
* Ignore shuffle state for ordering
* Fix console errors
* Mobile fixes
* Fix sidebar spacing
* Fix grey on mobile after click
- The graphic was meant to be 50% of the card width, but was squished.
- Try to reduce scrolling by making everything fit in a 100% zoom on a 1080p screen.
* Dont show countdown on Lists
* Add Repeat icon
* Add Shuffle icon
* Add Replay Icon
* Add Replay Option to autoplayCountdown
* Add Loop Control for Lists
* Add Shuffle control for Lists
* Improve View List Link and Fetch action
* Add Play Button to List page
* Add Shuffle Play Option on List Page and Menus
* Fix Modal Remove Collection I18n
* CSS: Fix Large list titles
* Fix List playback on Floating Player
* Add Theater Mode to its own class and fix bar text display
* Add Play Next VJS component
* Add Play Next Button
* Add Play Previous VJS Component
* Add Play Previous Button
* Add Autoplay Next Button
* Add separate control for autoplay next in list
* Bump redux
* Update CHANGELOG.md
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.
## 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.
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.
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.
