Lyrics implementation prototype (#224)

* Lyrics implementation prototype

* feat: update lyrics view

* chore: add docs

* chore: cleanup

* feat: animate active text

* fix: hide lyrics button when there are none

* feat: create lyrics preview in now playing modal

* fix: header overlay color

Closes #224 
Closes #151 
Closes #100 

---------

Co-authored-by: Lei Nelissen <lei@codified.nl>
This commit is contained in:
Abubakr Khabebulloev
2024-07-25 20:07:23 +09:00
committed by GitHub
parent a64f52c4f9
commit c5b1406e16
22 changed files with 599 additions and 40 deletions

View File

@@ -6,24 +6,37 @@ import Queue from './components/Queue';
import ConnectionNotice from './components/ConnectionNotice';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import StreamStatus from './components/StreamStatus';
import { Platform } from 'react-native';
import {Platform} from 'react-native';
import BackButton from './components/Backbutton';
import Timer from './components/Timer';
import styled from 'styled-components/native';
import { ColoredBlurView } from '@/components/Colors.tsx';
import LyricsPreview from './components/LyricsPreview.tsx';
export default function Player() {
const Group = styled.View`
flex-direction: row;
justify-content: space-between;
`;
export default function Player() {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
{Platform.OS === 'android' && (<BackButton />)}
<Queue header={(
<>
<NowPlaying />
<ConnectionNotice />
<StreamStatus />
<ProgressBar />
<MediaControls />
<Timer />
</>
)} />
<ColoredBlurView>
{Platform.OS === 'android' && (<BackButton />)}
<Queue header={(
<>
<NowPlaying />
<ConnectionNotice />
<StreamStatus />
<ProgressBar />
<MediaControls />
<Group>
<Timer />
</Group>
<LyricsPreview />
</>
)} />
</ColoredBlurView>
</GestureHandlerRootView>
);
}
}