antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 02:13:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add transparency/opacity for queue sidebar (#231)

Browse source 
* add opacity

* add background for song metadata

* Add padding and border radius to opacity elements

* Remove font-weight transition on active lyrics (#233)

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
Kendall Garner 2023-09-10 22:03:46 +00:00 • committed by GitHub
parent 0ae53b023c
commit c8397bb5ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 47 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/renderer/features/player/components/full-screen-player-image.tsx
View file

@ -37,7 +37,15 @@ const ImageContainer = styled(motion.div)`
margin-bottom: 1rem;
`;
const MetadataContainer = styled(Stack)`
interface TransparentMetadataContainer {
opacity: number;
}
const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
padding: 1rem;
border-radius: 5px;
h1 {
font-size: 3.5vh;
}
@ -120,7 +128,7 @@ const ImageWithPlaceholder = ({
export const FullScreenPlayerImage = () => {
const { queue } = usePlayerData();
const useImageAspectRatio = useFullScreenPlayerStore((state) => state.useImageAspectRatio);
const { opacity, useImageAspectRatio } = useFullScreenPlayerStore();
const currentSong = queue.current;
const { color: background } = useFastAverageColor({
algorithm: 'dominant',
@ -208,6 +216,7 @@ export const FullScreenPlayerImage = () => {
<MetadataContainer
className="full-screen-player-image-metadata"
maw="100%"
opacity={opacity}
spacing="xs"
>
<TextTitle

16
src/renderer/features/player/components/full-screen-player-queue.tsx
View file

@ -41,14 +41,21 @@ const HeaderItemWrapper = styled.div`
z-index: 2;
`;
const GridContainer = styled.div`
interface TransparendGridContainerProps {
opacity: number;
}
const GridContainer = styled.div<TransparendGridContainerProps>`
padding: 1rem;
background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
display: grid;
grid-template-rows: auto minmax(0, 1fr);
grid-template-columns: 1fr;
border-radius: 5px;
`;
export const FullScreenPlayerQueue = () => {
const { activeTab } = useFullScreenPlayerStore();
const { activeTab, opacity } = useFullScreenPlayerStore();
const { setStore } = useFullScreenPlayerStoreActions();
const headerItems = [
@ -73,7 +80,10 @@ export const FullScreenPlayerQueue = () => {
];
return (
<GridContainer className="full-screen-player-queue-container">
<GridContainer
className="full-screen-player-queue-container"
opacity={opacity}
>
<Group
grow
align="center"

18
src/renderer/features/player/components/full-screen-player.tsx
View file

@ -70,7 +70,8 @@ const BackgroundImageOverlay = styled.div`
`;
const Controls = () => {
const { dynamicBackground, expanded, useImageAspectRatio } = useFullScreenPlayerStore();
const { dynamicBackground, expanded, opacity, useImageAspectRatio } =
useFullScreenPlayerStore();
const { setStore } = useFullScreenPlayerStoreActions();
const { setSettings } = useSettingsStoreActions();
const lyricConfig = useLyricsSettings();
@ -134,6 +135,21 @@ const Controls = () => {
/>
</Option.Control>
</Option>
{dynamicBackground && (
<Option>
<Option.Label>Opacity</Option.Label>
<Option.Control>
<Slider
defaultValue={opacity}
label={(e) => `${e} %`}
max={100}
min={1}
w="100%"
onChangeEnd={(e) => setStore({ opacity: Number(e) })}
/>
</Option.Control>
</Option>
)}
<Option>
<Option.Label>Use image aspect ratio</Option.Label>
<Option.Control>