Desaturate videos when loading

This commit is contained in:
Max Goodhart
2026-01-26 00:35:35 -08:00
parent d2636f756a
commit 1978bda59f

View File

@@ -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`