mirror of
https://github.com/streamwall/streamwall.git
synced 2026-04-03 20:32:08 -04:00
Desaturate videos when loading
This commit is contained in:
@@ -75,7 +75,7 @@ function Overlay({
|
|||||||
activeColor={activeColor}
|
activeColor={activeColor}
|
||||||
isListening={isListening}
|
isListening={isListening}
|
||||||
>
|
>
|
||||||
<BlurCover isBlurred={isBlurred} />
|
<FilterCover isBlurred={isBlurred} isDesaturated={isLoading} />
|
||||||
{hasTitle && (
|
{hasTitle && (
|
||||||
<StreamTitle
|
<StreamTitle
|
||||||
position={position}
|
position={position}
|
||||||
@@ -322,13 +322,16 @@ const LoadingSpinner = styled(TailSpin)<{ isVisible: boolean }>`
|
|||||||
visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')};
|
visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')};
|
||||||
`
|
`
|
||||||
|
|
||||||
const BlurCover = styled.div`
|
const FilterCover = styled.div`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
backdrop-filter: ${({ isBlurred }) => (isBlurred ? 'blur(30px)' : 'blur(0)')};
|
backdrop-filter: ${({ isBlurred, isDesaturated }) =>
|
||||||
|
[isBlurred ? 'blur(30px)' : '', isDesaturated ? 'grayscale(75%)' : ''].join(
|
||||||
|
' ',
|
||||||
|
)};
|
||||||
`
|
`
|
||||||
|
|
||||||
const VersionText = styled.div`
|
const VersionText = styled.div`
|
||||||
|
|||||||
Reference in New Issue
Block a user