mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-17 21:58:03 +00:00
update
This commit is contained in:
qier222
parent
32050e4553
commit
6aee8ae38e
41 changed files with 523 additions and 415 deletions
|
|
@ -1,5 +1,5 @@
|
|||
import { fetchAudioSource, fetchTracks } from '@/web/api/track'
|
||||
import type { } from '@/web/api/track'
|
||||
import type {} from '@/web/api/track'
|
||||
import reactQueryClient from '@/web/utils/reactQueryClient'
|
||||
import { IpcChannels } from '@/shared/IpcChannels'
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const Artist = ({ artist }: { artist: Artist }) => {
|
|||
/>
|
||||
<div
|
||||
onClick={to}
|
||||
className='line-clamp-1 mt-2.5 text-12 font-medium text-neutral-700 dark:text-neutral-600 lg:text-14 lg:font-bold'
|
||||
className='mt-2.5 line-clamp-1 text-12 font-medium text-neutral-700 dark:text-neutral-600 lg:text-14 lg:font-bold'
|
||||
>
|
||||
{artist.name}
|
||||
</div>
|
||||
|
|
@ -46,7 +46,7 @@ const Placeholder = ({ row }: { row: number }) => {
|
|||
minWidth: '96px',
|
||||
}}
|
||||
/>
|
||||
<div className='line-clamp-1 mt-2.5 w-1/2 rounded-full text-12 font-medium text-transparent dark:bg-neutral-800 lg:text-14 lg:font-bold'>
|
||||
<div className='mt-2.5 line-clamp-1 w-1/2 rounded-full text-12 font-medium text-transparent dark:bg-neutral-800 lg:text-14 lg:font-bold'>
|
||||
NAME
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ const MenuItem = ({
|
|||
></div>
|
||||
|
||||
{/* 增加三角形，避免斜着移动到submenu时意外关闭菜单 */}
|
||||
<div className='absolute -right-8 -bottom-6 h-12 w-12 rotate-45'></div>
|
||||
<div className='absolute -bottom-6 -right-8 h-12 w-12 rotate-45'></div>
|
||||
<div className='absolute -right-8 -top-6 h-12 w-12 rotate-45'></div>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const Album = ({
|
|||
onMouseOver={prefetch}
|
||||
/>
|
||||
{title && (
|
||||
<div className='line-clamp-2 mt-2 text-14 font-medium text-neutral-300'>{title}</div>
|
||||
<div className='mt-2 line-clamp-2 text-14 font-medium text-neutral-300'>{title}</div>
|
||||
)}
|
||||
{subtitle && <div className='mt-1 text-14 font-medium text-neutral-700'>{subtitle}</div>}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ function DescriptionViewer({
|
|||
>
|
||||
<div className='relative'>
|
||||
{/* Title */}
|
||||
<div className='line-clamp-1 absolute -top-8 mx-44 max-w-2xl select-none text-32 font-extrabold text-neutral-100'>
|
||||
<div className='absolute -top-8 mx-44 line-clamp-1 max-w-2xl select-none text-32 font-extrabold text-neutral-100'>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const Layout = () => {
|
|||
{showPlayer && <Player />}
|
||||
|
||||
{window.env?.isMac && (
|
||||
<div className='fixed top-6 left-6 z-30 translate-y-0.5'>
|
||||
<div className='fixed left-6 top-6 z-30 translate-y-0.5'>
|
||||
<TrafficLight />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ const TabName = () => {
|
|||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'absolute bottom-8 right-0 left-0 z-10 flex rotate-180 select-none items-center font-bold text-brand-600 dark:text-brand-700',
|
||||
'absolute bottom-8 left-0 right-0 z-10 flex rotate-180 select-none items-center font-bold text-brand-600 dark:text-brand-700',
|
||||
css`
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
|
|
@ -144,7 +144,7 @@ const MenuBar = () => {
|
|||
<div
|
||||
className={cx(
|
||||
'app-region-drag relative flex h-full w-full flex-col justify-center',
|
||||
'lg:fixed lg:left-0 lg:top-0 lg:bottom-0',
|
||||
'lg:fixed lg:bottom-0 lg:left-0 lg:top-0',
|
||||
css`
|
||||
${bp.lg} {
|
||||
width: 104px;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ const Progress = () => {
|
|||
const { track, progress } = useSnapshot(player)
|
||||
|
||||
return (
|
||||
<div className='mt-9 mb-4 flex w-full flex-col'>
|
||||
<div className='mb-4 mt-9 flex w-full flex-col'>
|
||||
<Slider
|
||||
min={0}
|
||||
max={(track?.dt ?? 100000) / 1000}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const Player = () => {
|
|||
<MotionConfig transition={{ duration: 0.6 }}>
|
||||
<div
|
||||
className={cx(
|
||||
'fixed right-6 bottom-6 flex w-full flex-col justify-between overflow-hidden',
|
||||
'fixed bottom-6 right-6 flex w-full flex-col justify-between overflow-hidden',
|
||||
css`
|
||||
width: 318px;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const PlayerMobile = () => {
|
|||
uiStates.mobileShowPlayingNext = true
|
||||
}}
|
||||
className={cx(
|
||||
'absolute right-0 left-0 flex justify-center',
|
||||
'absolute left-0 right-0 flex justify-center',
|
||||
css`
|
||||
--height: 20px;
|
||||
height: var(--height);
|
||||
|
|
@ -100,7 +100,7 @@ const PlayerMobile = () => {
|
|||
>
|
||||
<div className='flex-shrink-0'>
|
||||
<div className='line-clamp-1 text-14 font-bold text-white'>{track?.name}</div>
|
||||
<div className='line-clamp-1 mt-1 text-12 font-bold text-white/60'>
|
||||
<div className='mt-1 line-clamp-1 text-12 font-bold text-white/60'>
|
||||
{track?.ar?.map(a => a.name).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -109,7 +109,7 @@ const PlayerMobile = () => {
|
|||
|
||||
<div
|
||||
className={cx(
|
||||
'absolute left-0 top-0 bottom-0 w-3 ',
|
||||
'absolute bottom-0 left-0 top-0 w-3 ',
|
||||
css`
|
||||
background: linear-gradient(to right, ${bgColor.to}, transparent);
|
||||
`
|
||||
|
|
@ -117,7 +117,7 @@ const PlayerMobile = () => {
|
|||
></div>
|
||||
<div
|
||||
className={cx(
|
||||
'absolute right-0 top-0 bottom-0 w-3 bg-red-200',
|
||||
'absolute bottom-0 right-0 top-0 w-3 bg-red-200',
|
||||
css`
|
||||
background: linear-gradient(to left, ${bgColor.to}, transparent);
|
||||
`
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const RepeatButton = () => {
|
|||
)}
|
||||
style={buttonStyle}
|
||||
>
|
||||
<div className='absolute top-1/2 left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 blur group-hover:opacity-100'></div>
|
||||
<div className='absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 blur group-hover:opacity-100'></div>
|
||||
<Icon name='repeat-1' className='h-7 w-7' />
|
||||
</motion.button>
|
||||
)
|
||||
|
|
@ -61,7 +61,7 @@ const ShuffleButton = () => {
|
|||
style={buttonStyle}
|
||||
>
|
||||
<Icon name='shuffle' className='h-7 w-7' />
|
||||
<div className='absolute top-1/2 left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 blur group-hover:opacity-100'></div>
|
||||
<div className='absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 blur group-hover:opacity-100'></div>
|
||||
</motion.button>
|
||||
)
|
||||
}
|
||||
|
|
@ -71,7 +71,7 @@ const Header = () => {
|
|||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'absolute top-0 left-0 z-20 flex w-full items-center justify-between bg-contain bg-repeat-x px-7 pb-6 text-14 font-bold lg:px-0'
|
||||
'absolute left-0 top-0 z-20 flex w-full items-center justify-between bg-contain bg-repeat-x px-7 pb-6 text-14 font-bold lg:px-0'
|
||||
)}
|
||||
>
|
||||
<div className='flex text-neutral-300'>
|
||||
|
|
@ -134,7 +134,7 @@ const Track = ({
|
|||
>
|
||||
{track?.name}
|
||||
</div>
|
||||
<div className='line-clamp-1 mt-1 text-14 font-bold text-neutral-200 dark:text-white/25'>
|
||||
<div className='mt-1 line-clamp-1 text-14 font-bold text-neutral-200 dark:text-white/25'>
|
||||
{track?.ar.map(a => a.name).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ function Tabs<T>({
|
|||
<div
|
||||
key={tab.id as string}
|
||||
className={cx(
|
||||
'mr-2.5 rounded-12 py-3 px-6 text-16 font-medium backdrop-blur transition duration-500',
|
||||
'mr-2.5 rounded-12 px-6 py-3 text-16 font-medium backdrop-blur transition duration-500',
|
||||
value === tab.id
|
||||
? 'bg-brand-700 text-white'
|
||||
: 'dark:bg-white/10 dark:text-white/20 hover:dark:bg-white/20 hover:dark:text-white/40'
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const TopbarDesktop = () => {
|
|||
return (
|
||||
<div
|
||||
className={cx(
|
||||
'app-region-drag fixed top-0 left-0 right-0 z-20 flex items-center justify-between bg-contain pt-11 pb-10 pr-6',
|
||||
'app-region-drag fixed left-0 right-0 top-0 z-20 flex items-center justify-between bg-contain pb-10 pr-6 pt-11',
|
||||
css`
|
||||
padding-left: 144px;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const Info = ({
|
|||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className='line-clamp-3 mt-6 whitespace-pre-wrap text-14 font-bold transition-colors duration-300 dark:text-white/40 dark:hover:text-white/60'
|
||||
className='mt-6 line-clamp-3 whitespace-pre-wrap text-14 font-bold transition-colors duration-300 dark:text-white/40 dark:hover:text-white/60'
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: description,
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -212,7 +212,7 @@ const Controls = ({
|
|||
visible: { y: 0, opacity: 1 },
|
||||
}}
|
||||
transition={animationTransition}
|
||||
className='absolute bottom-5 left-5 flex rounded-20 bg-black/70 py-3 px-5 backdrop-blur-3xl'
|
||||
className='absolute bottom-5 left-5 flex rounded-20 bg-black/70 px-5 py-3 backdrop-blur-3xl'
|
||||
>
|
||||
<button
|
||||
onClick={togglePlay}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const VideoRow = ({ videos }: { videos: Video[] }) => {
|
|||
src={video.coverUrl}
|
||||
className='aspect-video w-full rounded-24 border border-white/5 object-contain'
|
||||
/>
|
||||
<div className='line-clamp-2 mt-2 text-12 font-medium text-neutral-600'>
|
||||
<div className='mt-2 line-clamp-2 text-12 font-medium text-neutral-600'>
|
||||
{video.creator?.at(0)?.userName} - {video.title}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const useHoverLightSpot = (
|
|||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
className={cx(
|
||||
'pointer-events-none absolute top-0 left-0 rounded-full transition-opacity duration-400',
|
||||
'pointer-events-none absolute left-0 top-0 rounded-full transition-opacity duration-400',
|
||||
css`
|
||||
filter: blur(16px);
|
||||
background: rgb(255, 255, 255);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import zhCN from './locales/zh-cn.json'
|
|||
import enUS from './locales/en-us.json'
|
||||
|
||||
export const supportedLanguages = ['zh-CN', 'en-US'] as const
|
||||
export type SupportedLanguage = typeof supportedLanguages[number]
|
||||
export type SupportedLanguage = (typeof supportedLanguages)[number]
|
||||
|
||||
declare module 'react-i18next' {
|
||||
interface CustomTypeOptions {
|
||||
|
|
|
|||
|
|
@ -40,14 +40,14 @@
|
|||
"qrcode": "^1.5.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-ga4": "^1.4.1",
|
||||
"react-ga4": "^2.1.0",
|
||||
"react-hot-toast": "^2.4.0",
|
||||
"react-i18next": "^12.1.5",
|
||||
"react-router-dom": "^6.6.1",
|
||||
"react-use": "^17.4.0",
|
||||
"react-use-measure": "^2.1.1",
|
||||
"react-virtuoso": "^2.16.6",
|
||||
"valtio": "^1.8.0"
|
||||
"valtio": "^1.10.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^13.3.0",
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
"@types/qrcode": "^1.4.2",
|
||||
"@types/react": "^18.0.15",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@vitejs/plugin-react-swc": "^3.2.0",
|
||||
"@vitejs/plugin-react-swc": "^3.3.0",
|
||||
"@vitest/ui": "^0.26.3",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"c8": "^7.12.0",
|
||||
|
|
@ -69,10 +69,10 @@
|
|||
"prettier": "*",
|
||||
"prettier-plugin-tailwindcss": "*",
|
||||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typescript": "*",
|
||||
"vite": "^4.2.0",
|
||||
"vite-plugin-pwa": "^0.14.4",
|
||||
"vite": "^4.3.3",
|
||||
"vite-plugin-pwa": "^0.14.7",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vitest": "^0.26.3"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const Artist = () => {
|
|||
<div>
|
||||
<Header />
|
||||
{/* Dividing line */}
|
||||
<div className='mt-10 mb-7.5 h-px w-full bg-white/20'></div>
|
||||
<div className='mb-7.5 mt-10 h-px w-full bg-white/20'></div>
|
||||
<Popular />
|
||||
<ArtistAlbum />
|
||||
<ArtistVideos />
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const ArtistInfo = ({ artist, isLoading }: { artist?: Artist; isLoading: boolean
|
|||
(isLoading || isLoadingArtistFromApple ? (
|
||||
<div
|
||||
className={cx(
|
||||
'line-clamp-5 mt-6 text-14 font-bold text-transparent',
|
||||
'mt-6 line-clamp-5 text-14 font-bold text-transparent',
|
||||
css`
|
||||
min-height: 85px;
|
||||
`
|
||||
|
|
@ -68,7 +68,7 @@ const ArtistInfo = ({ artist, isLoading }: { artist?: Artist; isLoading: boolean
|
|||
) : (
|
||||
<div
|
||||
className={cx(
|
||||
'line-clamp-5 mt-6 overflow-hidden whitespace-pre-wrap text-14 font-bold text-white/40 transition-colors duration-500 hover:text-white/60',
|
||||
'mt-6 line-clamp-5 overflow-hidden whitespace-pre-wrap text-14 font-bold text-white/40 transition-colors duration-500 hover:text-white/60',
|
||||
css`
|
||||
height: 85px;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const Track = ({
|
|||
>
|
||||
{track?.name}
|
||||
</div>
|
||||
<div className='line-clamp-1 mt-1 text-14 font-bold text-neutral-200 dark:text-neutral-700'>
|
||||
<div className='mt-1 line-clamp-1 text-14 font-bold text-neutral-200 dark:text-neutral-700'>
|
||||
{track?.ar.map(a => a.name).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const categories = [
|
|||
{ id: 'charts', name: 'Charts', component: <Recommend /> },
|
||||
]
|
||||
const categoriesKeys = categories.map(c => c.id)
|
||||
type Key = typeof categoriesKeys[number]
|
||||
type Key = (typeof categoriesKeys)[number]
|
||||
|
||||
const Browse = () => {
|
||||
const [active, setActive] = useState<Key>('recommend')
|
||||
|
|
@ -60,7 +60,7 @@ const Browse = () => {
|
|||
{/* Topbar background */}
|
||||
<div
|
||||
className={cx(
|
||||
'pointer-events-none fixed top-0 left-10 z-10 hidden lg:block',
|
||||
'pointer-events-none fixed left-10 top-0 z-10 hidden lg:block',
|
||||
css`
|
||||
height: 230px;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import settings from '@/web/states/settings'
|
|||
import useUser from '@/web/api/hooks/useUser'
|
||||
|
||||
const collections = ['playlists', 'albums', 'artists', 'videos'] as const
|
||||
type Collection = typeof collections[number]
|
||||
type Collection = (typeof collections)[number]
|
||||
|
||||
const Albums = () => {
|
||||
const { data: albums } = useUserAlbums()
|
||||
|
|
@ -114,7 +114,7 @@ const CollectionTabs = ({ showBg }: { showBg: boolean }) => {
|
|||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className={cx(
|
||||
'pointer-events-none absolute right-0 left-0 z-10',
|
||||
'pointer-events-none absolute left-0 right-0 z-10',
|
||||
css`
|
||||
height: 230px;
|
||||
background-repeat: repeat;
|
||||
|
|
@ -164,7 +164,7 @@ const Collections = () => {
|
|||
<motion.div layout>
|
||||
<CollectionTabs showBg={isScrollReachBottom} />
|
||||
<div
|
||||
className={cx('no-scrollbar overflow-y-auto px-2.5 pt-16 pb-16 lg:px-0')}
|
||||
className={cx('no-scrollbar overflow-y-auto px-2.5 pb-16 pt-16 lg:px-0')}
|
||||
onScroll={onScroll}
|
||||
style={{
|
||||
height: `calc(100vh - ${topbarHeight}px)`,
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ const Lyrics = ({ tracksIDs }: { tracksIDs: number[] }) => {
|
|||
const Covers = memo(({ tracks }: { tracks: Track[] }) => {
|
||||
const navigate = useNavigate()
|
||||
return (
|
||||
<div className='mt-6 grid w-full flex-shrink-0 grid-cols-3 gap-2.5 lg:mt-0 lg:ml-8 lg:w-auto'>
|
||||
<div className='mt-6 grid w-full flex-shrink-0 grid-cols-3 gap-2.5 lg:ml-8 lg:mt-0 lg:w-auto'>
|
||||
{tracks.map(track => (
|
||||
<Image
|
||||
src={resizeImage(track.al.picUrl || '', 'md')}
|
||||
|
|
@ -127,7 +127,7 @@ const PlayLikedSongsCard = () => {
|
|||
<div className='flex justify-between'>
|
||||
<button
|
||||
onClick={handlePlay}
|
||||
className='rounded-full bg-brand-700 py-5 px-6 text-16 font-medium text-white'
|
||||
className='rounded-full bg-brand-700 px-6 py-5 text-16 font-medium text-white'
|
||||
>
|
||||
{t`my.playNow`}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -55,10 +55,10 @@ const Track = ({
|
|||
{track?.name}
|
||||
|
||||
{[1318912, 1310848].includes(track?.mark || 0) && (
|
||||
<Icon name='explicit' className='ml-2 mt-px mr-4 h-3.5 w-3.5 text-white/20' />
|
||||
<Icon name='explicit' className='ml-2 mr-4 mt-px h-3.5 w-3.5 text-white/20' />
|
||||
)}
|
||||
</div>
|
||||
<div className='line-clamp-1 mt-1 text-14 font-bold text-white/30'>
|
||||
<div className='mt-1 line-clamp-1 text-14 font-bold text-white/30'>
|
||||
{track?.ar.map((a, index) => (
|
||||
<Fragment key={a.id}>
|
||||
{index > 0 && ', '}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ const Track = ({
|
|||
>
|
||||
{track?.name}
|
||||
</div>
|
||||
<div className='line-clamp-1 mt-1 text-14 font-bold text-neutral-200 text-white/30'>
|
||||
<div className='mt-1 line-clamp-1 text-14 font-bold text-neutral-200 text-white/30'>
|
||||
{track?.ar.map(a => a.name).join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -151,7 +151,7 @@ const Search = () => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className='mt-6 mb-8 text-4xl font-semibold dark:text-white'>
|
||||
<div className='mb-8 mt-6 text-4xl font-semibold dark:text-white'>
|
||||
<span className='text-white/40'>搜索</span> "{keywords}"
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export function Select<T extends string>({
|
|||
<select
|
||||
onChange={e => onChange(e.target.value as T)}
|
||||
value={value}
|
||||
className='h-full w-full appearance-none bg-transparent py-1 pr-7 pl-3 focus:outline-none'
|
||||
className='h-full w-full appearance-none bg-transparent py-1 pl-3 pr-7 focus:outline-none'
|
||||
>
|
||||
{options.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
|
|
@ -71,7 +71,7 @@ export function Input({
|
|||
<div className='mb-1 text-14 font-medium text-white/30'>Host</div>
|
||||
<div className='inline-block rounded-md bg-neutral-800 font-medium text-neutral-400'>
|
||||
<input
|
||||
className='appearance-none bg-transparent py-1 px-3'
|
||||
className='appearance-none bg-transparent px-3 py-1'
|
||||
onChange={e => onChange(e.target.value)}
|
||||
{...{ type, value }}
|
||||
/>
|
||||
|
|
@ -80,11 +80,20 @@ export function Input({
|
|||
)
|
||||
}
|
||||
|
||||
export function Button({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
|
||||
export function Button({
|
||||
disalbed: disabled,
|
||||
children,
|
||||
onClick,
|
||||
}: {
|
||||
disalbed?: boolean
|
||||
children: React.ReactNode
|
||||
onClick: () => void
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className='rounded-md bg-neutral-800 py-1 px-3 font-medium text-neutral-400 transition-colors duration-300 hover:bg-neutral-700 hover:text-neutral-300'
|
||||
disabled={disabled}
|
||||
className='rounded-md bg-neutral-800 px-3 py-1 font-medium text-neutral-400 transition-colors duration-300 hover:bg-neutral-700 hover:text-neutral-300 disabled:opacity-10'
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
|
|
@ -104,5 +113,9 @@ export function Option({ children }: { children: React.ReactNode }) {
|
|||
}
|
||||
|
||||
export function OptionText({ children }: { children: React.ReactNode }) {
|
||||
return <div className='text-16 font-medium text-neutral-400'>{children}</div>
|
||||
return (
|
||||
<div className='line-clamp-1 flex-shrink-0 text-16 font-medium text-neutral-400'>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,14 @@ import Slider from '@/web/components/Slider'
|
|||
import { cx } from '@emotion/css'
|
||||
import player from '@/web/states/player'
|
||||
import { ceil } from 'lodash'
|
||||
import { useMutation, useQuery } from '@tanstack/react-query'
|
||||
import { IpcChannels } from '@/shared/IpcChannels'
|
||||
import { useCopyToClipboard } from 'react-use'
|
||||
|
||||
function Player() {
|
||||
return (
|
||||
<div className={cx(`space-y-7`)}>
|
||||
<FindTrackOnYouTube />
|
||||
<VolumeSlider />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -59,31 +61,4 @@ function FindTrackOnYouTube() {
|
|||
)
|
||||
}
|
||||
|
||||
function VolumeSlider() {
|
||||
const { t } = useTranslation()
|
||||
const { volume } = useSnapshot(player)
|
||||
const onChange = (volume: number) => {
|
||||
player.volume = volume
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<BlockTitle>{t(`settings.volume-control`)}</BlockTitle>
|
||||
<div className='pt-2 pr-1'>
|
||||
<Slider
|
||||
value={volume}
|
||||
min={0}
|
||||
max={1}
|
||||
onChange={onChange}
|
||||
alwaysShowTrack
|
||||
alwaysShowThumb
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-1 flex justify-between text-14 font-bold text-neutral-100'>
|
||||
<span>0</span>
|
||||
<span>{ceil(volume * 100)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Player
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import PageTransition from '@/web/components/PageTransition'
|
|||
import { ease } from '@/web/utils/const'
|
||||
|
||||
export const categoryIds = ['general', 'appearance', 'player', 'lab', 'about'] as const
|
||||
export type Category = typeof categoryIds[number]
|
||||
export type Category = (typeof categoryIds)[number]
|
||||
|
||||
const Sidebar = ({
|
||||
activeCategory,
|
||||
|
|
@ -42,7 +42,7 @@ const Sidebar = ({
|
|||
initial={{ y: 11.5 }}
|
||||
animate={indicatorAnimation}
|
||||
transition={{ type: 'spring', duration: 0.6, bounce: 0.36 }}
|
||||
className='absolute top-0 left-3 mr-2 h-4 w-1 rounded-full bg-brand-700'
|
||||
className='absolute left-3 top-0 mr-2 h-4 w-1 rounded-full bg-brand-700'
|
||||
></motion.div>
|
||||
|
||||
{categories.map(category => (
|
||||
|
|
|
|||
|
|
@ -16,42 +16,6 @@
|
|||
.no-drag {
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
.line-clamp-1 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.line-clamp-4 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 4;
|
||||
}
|
||||
|
||||
.line-clamp-5 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
|
@ -96,6 +60,9 @@ input {
|
|||
font-family: Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue,
|
||||
PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
|
||||
microsoft uighur, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizelegibility;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
const colors = require('tailwindcss/colors')
|
||||
// const pickedColors = require('./scripts/pickedColors.js')
|
||||
// import colors from "tailwindcss/colors"
|
||||
// import pickedColors = "./scripts/pickedColors"
|
||||
import type { Config } from 'tailwindcss'
|
||||
import containerQueryPlugin from '@tailwindcss/container-queries'
|
||||
|
||||
const fontSizeDefault = {
|
||||
lineHeight: '1.2',
|
||||
letterSpacing: '0.02em',
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
export default {
|
||||
content: ['./index.html', './**/*.{vue,js,ts,jsx,tsx}', '!./node_modules/**/*'],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
|
|
@ -121,5 +122,5 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
},
|
||||
plugins: [require('@tailwindcss/container-queries')],
|
||||
}
|
||||
plugins: [containerQueryPlugin],
|
||||
} satisfies Config
|
||||
|
|
@ -167,8 +167,8 @@ export async function calcCoverColor(coverUrl: string) {
|
|||
|
||||
export const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
|
||||
export const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
|
||||
export const isPWA =
|
||||
() => (navigator as any).standalone || window.matchMedia('(display-mode: standalone)').matches
|
||||
export const isPWA = () =>
|
||||
(navigator as any).standalone || window.matchMedia('(display-mode: standalone)').matches
|
||||
export const isIosPwa = isIOS && isPWA() && isSafari
|
||||
|
||||
export const sleep = (ms: number) => new Promise(r => setTimeout(r, ms))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue