mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-01 10:23:33 +00:00
Migrate to Mantine v8 and Design Changes (#961)
* mantine v8 migration * various design changes and improvements
This commit is contained in:
Jeff
GitHub
parent
bea55d48a8
commit
c1330d92b2
473 changed files with 12469 additions and 11607 deletions
|
|
@ -0,0 +1,13 @@
|
|||
.search-item {
|
||||
all: unset;
|
||||
box-sizing: border-box !important;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: var(--theme-btn-default-fg-hover);
|
||||
background: var(--theme-btn-default-bg-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +1,27 @@
|
|||
import { Divider, Group, Stack } from '@mantine/core';
|
||||
import { useForm } from '@mantine/form';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import { openModal } from '@mantine/modals';
|
||||
import orderBy from 'lodash/orderBy';
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import styles from './lyrics-search-form.module.css';
|
||||
|
||||
import i18n from '/@/i18n/i18n';
|
||||
import { ScrollArea, Spinner, Text, TextInput } from '/@/renderer/components';
|
||||
import { useLyricSearch } from '/@/renderer/features/lyrics/queries/lyric-search-query';
|
||||
import { Divider } from '/@/shared/components/divider/divider';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
|
||||
import { Spinner } from '/@/shared/components/spinner/spinner';
|
||||
import { Stack } from '/@/shared/components/stack/stack';
|
||||
import { TextInput } from '/@/shared/components/text-input/text-input';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import {
|
||||
InternetProviderLyricSearchResponse,
|
||||
LyricSource,
|
||||
LyricsOverride,
|
||||
} from '/@/shared/types/domain-types';
|
||||
|
||||
const SearchItem = styled.button`
|
||||
all: unset;
|
||||
box-sizing: border-box !important;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
color: var(--btn-default-fg-hover);
|
||||
background: var(--btn-default-bg-hover);
|
||||
}
|
||||
`;
|
||||
|
||||
interface SearchResultProps {
|
||||
data: InternetProviderLyricSearchResponse;
|
||||
onClick?: () => void;
|
||||
|
|
@ -46,28 +38,31 @@ const SearchResult = ({ data, onClick }: SearchResultProps) => {
|
|||
source === LyricSource.GENIUS ? id.replace(/^((http[s]?|ftp):\/)?\/?([^:/\s]+)/g, '') : id;
|
||||
|
||||
return (
|
||||
<SearchItem onClick={onClick}>
|
||||
<button
|
||||
className={styles.searchItem}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Group
|
||||
noWrap
|
||||
position="apart"
|
||||
justify="space-between"
|
||||
wrap="nowrap"
|
||||
>
|
||||
<Stack
|
||||
gap={0}
|
||||
maw="65%"
|
||||
spacing={0}
|
||||
>
|
||||
<Text
|
||||
fw={600}
|
||||
size="md"
|
||||
weight={600}
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
<Text $secondary>{artist}</Text>
|
||||
<Text isMuted>{artist}</Text>
|
||||
<Group
|
||||
noWrap
|
||||
spacing="sm"
|
||||
gap="sm"
|
||||
wrap="nowrap"
|
||||
>
|
||||
<Text
|
||||
$secondary
|
||||
isMuted
|
||||
size="sm"
|
||||
>
|
||||
{[source, cleanId].join(' — ')}
|
||||
|
|
@ -76,7 +71,7 @@ const SearchResult = ({ data, onClick }: SearchResultProps) => {
|
|||
</Stack>
|
||||
<Text>{percentageScore}%</Text>
|
||||
</Group>
|
||||
</SearchItem>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -141,13 +136,12 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
|
|||
<Spinner container />
|
||||
) : (
|
||||
<ScrollArea
|
||||
h={400}
|
||||
offsetScrollbars
|
||||
pr="1rem"
|
||||
type="auto"
|
||||
w="100%"
|
||||
style={{
|
||||
height: '400px',
|
||||
paddingRight: '1rem',
|
||||
}}
|
||||
>
|
||||
<Stack spacing="md">
|
||||
<Stack gap="md">
|
||||
{searchResults.map((result) => (
|
||||
<SearchResult
|
||||
data={result}
|
||||
|
|
|
|||
21
src/renderer/features/lyrics/lyric-line.module.css
Normal file
21
src/renderer/features/lyrics/lyric-line.module.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.lyric-line {
|
||||
padding: 0 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--theme-colors-foreground);
|
||||
opacity: 0.5;
|
||||
transition:
|
||||
opacity 0.3s ease-in-out,
|
||||
transform 0.3s ease-in-out;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.unsynchronized {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.synchronized {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.lyric-line {
|
||||
color: var(--main-fg);
|
||||
font-weight: 400;
|
||||
|
||||
font-size: 2.5vmax;
|
||||
transform: scale(0.95);
|
||||
opacity: 0.5;
|
||||
|
||||
.active {
|
||||
font-weight: 800 !important;
|
||||
transform: scale(1) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.active.unsynchronized {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.lyric-line.active {
|
||||
font-weight: 800;
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
import { TitleProps } from '@mantine/core';
|
||||
import clsx from 'clsx';
|
||||
import { ComponentPropsWithoutRef } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { TextTitle } from '/@/renderer/components/text-title';
|
||||
import styles from './lyric-line.module.css';
|
||||
|
||||
import { TextTitle } from '/@/shared/components/text-title/text-title';
|
||||
|
||||
interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
|
||||
alignment: 'center' | 'left' | 'right';
|
||||
|
|
@ -10,39 +11,17 @@ interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
|
|||
text: string;
|
||||
}
|
||||
|
||||
const StyledText = styled(TextTitle)<TitleProps & { $alignment: string; $fontSize: number }>`
|
||||
padding: 0 1rem;
|
||||
font-size: ${(props) => props.$fontSize}px;
|
||||
font-weight: 600;
|
||||
color: var(--main-fg);
|
||||
text-align: ${(props) => props.$alignment};
|
||||
opacity: 0.5;
|
||||
|
||||
transition:
|
||||
opacity 0.3s ease-in-out,
|
||||
transform 0.3s ease-in-out;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.unsynchronized {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.synchronized {
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
export const LyricLine = ({ alignment, fontSize, text, ...props }: LyricLineProps) => {
|
||||
export const LyricLine = ({ alignment, className, fontSize, text, ...props }: LyricLineProps) => {
|
||||
return (
|
||||
<StyledText
|
||||
$alignment={alignment}
|
||||
$fontSize={fontSize}
|
||||
<TextTitle
|
||||
className={clsx(styles.lyricLine, className)}
|
||||
style={{
|
||||
fontSize,
|
||||
textAlign: alignment,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{text}
|
||||
</StyledText>
|
||||
</TextTitle>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
import { Box, Center, Group, Select, SelectItem } from '@mantine/core';
|
||||
import isElectron from 'is-electron';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RiAddFill, RiSubtractFill } from 'react-icons/ri';
|
||||
|
||||
import { Button, NumberInput, Tooltip } from '/@/renderer/components';
|
||||
import { openLyricSearchModal } from '/@/renderer/features/lyrics/components/lyrics-search-form';
|
||||
import {
|
||||
useCurrentSong,
|
||||
|
|
@ -11,11 +8,18 @@ import {
|
|||
useSettingsStore,
|
||||
useSettingsStoreActions,
|
||||
} from '/@/renderer/store';
|
||||
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
|
||||
import { Button } from '/@/shared/components/button/button';
|
||||
import { Center } from '/@/shared/components/center/center';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { NumberInput } from '/@/shared/components/number-input/number-input';
|
||||
import { Select } from '/@/shared/components/select/select';
|
||||
import { Tooltip } from '/@/shared/components/tooltip/tooltip';
|
||||
import { LyricsOverride } from '/@/shared/types/domain-types';
|
||||
|
||||
interface LyricsActionsProps {
|
||||
index: number;
|
||||
languages: SelectItem[];
|
||||
languages: { label: string; value: string }[];
|
||||
|
||||
onRemoveLyric: () => void;
|
||||
onResetLyric: () => void;
|
||||
|
|
@ -38,7 +42,7 @@ export const LyricsActions = ({
|
|||
const { setSettings } = useSettingsStoreActions();
|
||||
const { delayMs, sources } = useLyricsSettings();
|
||||
|
||||
const handleLyricOffset = (e: number) => {
|
||||
const handleLyricOffset = (e: number | string) => {
|
||||
setSettings({
|
||||
lyrics: {
|
||||
...useSettingsStore.getState().lyrics,
|
||||
|
|
@ -51,7 +55,7 @@ export const LyricsActions = ({
|
|||
const isDesktop = isElectron();
|
||||
|
||||
return (
|
||||
<Box style={{ position: 'relative', width: '100%' }}>
|
||||
<div style={{ position: 'relative', width: '100%' }}>
|
||||
{languages.length > 1 && (
|
||||
<Center>
|
||||
<Select
|
||||
|
|
@ -64,7 +68,7 @@ export const LyricsActions = ({
|
|||
</Center>
|
||||
)}
|
||||
|
||||
<Group position="center">
|
||||
<Group justify="center">
|
||||
{isDesktop && sources.length ? (
|
||||
<Button
|
||||
disabled={isActionsDisabled}
|
||||
|
|
@ -81,13 +85,12 @@ export const LyricsActions = ({
|
|||
{t('common.search', { postProcess: 'titleCase' })}
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
<ActionIcon
|
||||
aria-label="Decrease lyric offset"
|
||||
icon="minus"
|
||||
onClick={() => handleLyricOffset(delayMs - 50)}
|
||||
variant="subtle"
|
||||
>
|
||||
<RiSubtractFill />
|
||||
</Button>
|
||||
/>
|
||||
<Tooltip
|
||||
label={t('setting.lyricOffset', { postProcess: 'sentenceCase' })}
|
||||
openDelay={500}
|
||||
|
|
@ -100,13 +103,12 @@ export const LyricsActions = ({
|
|||
width={55}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Button
|
||||
<ActionIcon
|
||||
aria-label="Increase lyric offset"
|
||||
icon="plus"
|
||||
onClick={() => handleLyricOffset(delayMs + 50)}
|
||||
variant="subtle"
|
||||
>
|
||||
<RiAddFill />
|
||||
</Button>
|
||||
/>
|
||||
{isDesktop && sources.length ? (
|
||||
<Button
|
||||
disabled={isActionsDisabled}
|
||||
|
|
@ -119,7 +121,7 @@ export const LyricsActions = ({
|
|||
) : null}
|
||||
</Group>
|
||||
|
||||
<Box style={{ position: 'absolute', right: 0, top: 0 }}>
|
||||
<div style={{ position: 'absolute', right: 0, top: 0 }}>
|
||||
{isDesktop && sources.length ? (
|
||||
<Button
|
||||
disabled={isActionsDisabled}
|
||||
|
|
@ -130,9 +132,9 @@ export const LyricsActions = ({
|
|||
{t('common.clear', { postProcess: 'sentenceCase' })}
|
||||
</Button>
|
||||
) : null}
|
||||
</Box>
|
||||
</div>
|
||||
|
||||
<Box style={{ position: 'absolute', right: 0, top: -50 }}>
|
||||
<div style={{ position: 'absolute', right: 0, top: -50 }}>
|
||||
{isDesktop && sources.length ? (
|
||||
<Button
|
||||
disabled={isActionsDisabled}
|
||||
|
|
@ -143,7 +145,7 @@ export const LyricsActions = ({
|
|||
{t('common.translation', { postProcess: 'sentenceCase' })}
|
||||
</Button>
|
||||
) : null}
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
49
src/renderer/features/lyrics/lyrics.module.css
Normal file
49
src/renderer/features/lyrics/lyrics.module.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
.actions-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.lyrics-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
.actions-container {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
mask-image: linear-gradient(
|
||||
180deg,
|
||||
transparent 5%,
|
||||
rgb(0 0 0 / 100%) 20%,
|
||||
rgb(0 0 0 / 100%) 85%,
|
||||
transparent 95%
|
||||
);
|
||||
}
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
import { Center, Group } from '@mantine/core';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RiInformationFill } from 'react-icons/ri';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import styles from './lyrics.module.css';
|
||||
|
||||
import { queryKeys } from '/@/renderer/api/query-keys';
|
||||
import { Spinner, TextTitle } from '/@/renderer/components';
|
||||
import { ErrorFallback } from '/@/renderer/features/action-required';
|
||||
import { LyricsActions } from '/@/renderer/features/lyrics/lyrics-actions';
|
||||
import {
|
||||
|
|
@ -25,72 +23,13 @@ import {
|
|||
} from '/@/renderer/features/lyrics/unsynchronized-lyrics';
|
||||
import { queryClient } from '/@/renderer/lib/react-query';
|
||||
import { useCurrentSong, useLyricsSettings, usePlayerStore } from '/@/renderer/store';
|
||||
import { Center } from '/@/shared/components/center/center';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Icon } from '/@/shared/components/icon/icon';
|
||||
import { Spinner } from '/@/shared/components/spinner/spinner';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import { FullLyricsMetadata, LyricSource, LyricsOverride } from '/@/shared/types/domain-types';
|
||||
|
||||
const ActionsContainer = styled.div`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const LyricsContainer = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
${ActionsContainer} {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ScrollContainer = styled(motion.div)`
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
mask-image: linear-gradient(
|
||||
180deg,
|
||||
transparent 5%,
|
||||
rgb(0 0 0 / 100%) 20%,
|
||||
rgb(0 0 0 / 100%) 85%,
|
||||
transparent 95%
|
||||
);
|
||||
|
||||
&.mantine-ScrollArea-root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& .mantine-ScrollArea-viewport {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
& .mantine-ScrollArea-viewport > div {
|
||||
height: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Lyrics = () => {
|
||||
const currentSong = useCurrentSong();
|
||||
const lyricsSettings = useLyricsSettings();
|
||||
|
|
@ -210,7 +149,7 @@ export const Lyrics = () => {
|
|||
|
||||
return (
|
||||
<ErrorBoundary FallbackComponent={ErrorFallback}>
|
||||
<LyricsContainer>
|
||||
<div className={styles.lyricsContainer}>
|
||||
{isLoadingLyrics ? (
|
||||
<Spinner
|
||||
container
|
||||
|
|
@ -221,20 +160,18 @@ export const Lyrics = () => {
|
|||
{hasNoLyrics ? (
|
||||
<Center w="100%">
|
||||
<Group>
|
||||
<RiInformationFill size="2rem" />
|
||||
<TextTitle
|
||||
order={3}
|
||||
weight={700}
|
||||
>
|
||||
<Icon icon="info" />
|
||||
<Text>
|
||||
{t('page.fullscreenPlayer.noLyrics', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</TextTitle>
|
||||
</Text>
|
||||
</Group>
|
||||
</Center>
|
||||
) : (
|
||||
<ScrollContainer
|
||||
<motion.div
|
||||
animate={{ opacity: 1 }}
|
||||
className={styles.scrollContainer}
|
||||
initial={{ opacity: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
|
|
@ -249,11 +186,11 @@ export const Lyrics = () => {
|
|||
translatedLyrics={showTranslation ? translatedLyrics : null}
|
||||
/>
|
||||
)}
|
||||
</ScrollContainer>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)}
|
||||
<ActionsContainer>
|
||||
<div className={styles.actionsContainer}>
|
||||
<LyricsActions
|
||||
index={index}
|
||||
languages={languages}
|
||||
|
|
@ -263,8 +200,8 @@ export const Lyrics = () => {
|
|||
onTranslateLyric={handleOnTranslateLyric}
|
||||
setIndex={setIndex}
|
||||
/>
|
||||
</ActionsContainer>
|
||||
</LyricsContainer>
|
||||
</div>
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
3
src/renderer/features/lyrics/synchronized-lyrics.css
Normal file
3
src/renderer/features/lyrics/synchronized-lyrics.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.active {
|
||||
opacity: 1;
|
||||
}
|
||||
21
src/renderer/features/lyrics/synchronized-lyrics.module.css
Normal file
21
src/renderer/features/lyrics/synchronized-lyrics.module.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10vh 0 50vh;
|
||||
overflow: scroll;
|
||||
word-break: break-all;
|
||||
mask-image: linear-gradient(
|
||||
180deg,
|
||||
transparent 5%,
|
||||
rgb(0 0 0 / 100%) 20%,
|
||||
rgb(0 0 0 / 100%) 85%,
|
||||
transparent 95%
|
||||
);
|
||||
transform: translateY(-2rem);
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
padding: 5vh 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
import clsx from 'clsx';
|
||||
import isElectron from 'is-electron';
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import styles from './synchronized-lyrics.module.css';
|
||||
import './synchronized-lyrics.css';
|
||||
|
||||
import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
|
||||
import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
|
||||
|
|
@ -22,38 +25,6 @@ const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
|
|||
const utils = isElectron() ? window.api.utils : null;
|
||||
const mpris = isElectron() && utils?.isLinux() ? window.api.mpris : null;
|
||||
|
||||
const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${(props) => props.$gap || 5}px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10vh 0 50vh;
|
||||
overflow: scroll;
|
||||
word-break: break-word;
|
||||
|
||||
-webkit-mask-image: linear-gradient(
|
||||
180deg,
|
||||
transparent 5%,
|
||||
rgb(0 0 0 / 100%) 20%,
|
||||
rgb(0 0 0 / 100%) 85%,
|
||||
transparent 95%
|
||||
);
|
||||
|
||||
mask-image: linear-gradient(
|
||||
180deg,
|
||||
transparent 5%,
|
||||
rgb(0 0 0 / 100%) 20%,
|
||||
rgb(0 0 0 / 100%) 85%,
|
||||
transparent 95%
|
||||
);
|
||||
transform: translateY(-2rem);
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
padding: 5vh 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export interface SynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
|
||||
lyrics: SynchronizedLyricsArray;
|
||||
translatedLyrics?: null | string;
|
||||
|
|
@ -344,12 +315,12 @@ export const SynchronizedLyrics = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<SynchronizedLyricsContainer
|
||||
$gap={settings.gap}
|
||||
className="synchronized-lyrics overlay-scrollbar"
|
||||
<div
|
||||
className={clsx(styles.container, 'synchronized-lyrics overlay-scrollbar')}
|
||||
id="sychronized-lyrics-scroll-container"
|
||||
onMouseEnter={showScrollbar}
|
||||
onMouseLeave={hideScrollbar}
|
||||
style={{ gap: `${settings.gap}px` }}
|
||||
>
|
||||
{settings.showProvider && source && (
|
||||
<LyricLine
|
||||
|
|
@ -388,6 +359,6 @@ export const SynchronizedLyrics = ({
|
|||
)}
|
||||
</div>
|
||||
))}
|
||||
</SynchronizedLyricsContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10vh 0 6vh;
|
||||
overflow: scroll;
|
||||
mask-image: linear-gradient(
|
||||
180deg,
|
||||
transparent 5%,
|
||||
rgb(0 0 0 / 100%) 20%,
|
||||
rgb(0 0 0 / 100%) 85%,
|
||||
transparent 95%
|
||||
);
|
||||
transform: translateY(-2rem);
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
padding: 5vh 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { useMemo } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import styles from './unsynchronized-lyrics.module.css';
|
||||
|
||||
import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
|
||||
import { useLyricsSettings } from '/@/renderer/store';
|
||||
|
|
@ -10,37 +11,6 @@ export interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyr
|
|||
translatedLyrics?: null | string;
|
||||
}
|
||||
|
||||
const UnsynchronizedLyricsContainer = styled.div<{ $gap: number }>`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${(props) => props.$gap || 5}px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10vh 0 6vh;
|
||||
overflow: scroll;
|
||||
|
||||
-webkit-mask-image: linear-gradient(
|
||||
180deg,
|
||||
transparent 5%,
|
||||
rgb(0 0 0 / 100%) 20%,
|
||||
rgb(0 0 0 / 100%) 85%,
|
||||
transparent 95%
|
||||
);
|
||||
|
||||
mask-image: linear-gradient(
|
||||
180deg,
|
||||
transparent 5%,
|
||||
rgb(0 0 0 / 100%) 20%,
|
||||
rgb(0 0 0 / 100%) 85%,
|
||||
transparent 95%
|
||||
);
|
||||
transform: translateY(-2rem);
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
padding: 5vh 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export const UnsynchronizedLyrics = ({
|
||||
artist,
|
||||
lyrics,
|
||||
|
|
@ -59,9 +29,9 @@ export const UnsynchronizedLyrics = ({
|
|||
}, [translatedLyrics]);
|
||||
|
||||
return (
|
||||
<UnsynchronizedLyricsContainer
|
||||
$gap={settings.gapUnsync}
|
||||
className="unsynchronized-lyrics"
|
||||
<div
|
||||
className={styles.container}
|
||||
style={{ gap: `${settings.gapUnsync}px` }}
|
||||
>
|
||||
{settings.showProvider && source && (
|
||||
<LyricLine
|
||||
|
|
@ -98,6 +68,6 @@ export const UnsynchronizedLyrics = ({
|
|||
)}
|
||||
</div>
|
||||
))}
|
||||
</UnsynchronizedLyricsContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue