Port to Redux and add settings
This commit is contained in:
Lei Nelissen
@@ -1,18 +1,15 @@
|
||||
import React, { Component, useCallback } from 'react';
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import TrackPlayer from 'react-native-track-player';
|
||||
import { StackScreenProps } from '@react-navigation/stack';
|
||||
import { RootStackParamList, AlbumTrack } from '../types';
|
||||
import { Text, ScrollView, Dimensions, FlatList, Button, TouchableOpacity } from 'react-native';
|
||||
import { retrieveAlbumTracks, getImage, generateTrack } from '../../../utility/JellyfinApi';
|
||||
import { StackParams } from '../types';
|
||||
import { Text, ScrollView, Dimensions, Button, TouchableOpacity } from 'react-native';
|
||||
import { generateTrack, useGetImage } from '../../../utility/JellyfinApi';
|
||||
import styled from 'styled-components/native';
|
||||
import { useRoute, RouteProp } from '@react-navigation/native';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useTypedSelector } from '../../../store';
|
||||
import { fetchTracksByAlbum } from '../../../store/music/actions';
|
||||
|
||||
interface Props extends StackScreenProps<RootStackParamList, 'Album'> {
|
||||
//
|
||||
}
|
||||
|
||||
interface State {
|
||||
tracks: AlbumTrack[];
|
||||
}
|
||||
type Route = RouteProp<StackParams, 'Album'>;
|
||||
|
||||
const Screen = Dimensions.get('screen');
|
||||
|
||||
@@ -49,48 +46,50 @@ const TouchableTrack: React.FC<TouchableTrackProps> = ({ id, onPress, children
|
||||
);
|
||||
};
|
||||
|
||||
export default class Album extends Component<Props, State> {
|
||||
state: State = {
|
||||
tracks: [],
|
||||
}
|
||||
const Album: React.FC = () => {
|
||||
// Retrieve state
|
||||
const { params: { id } } = useRoute<Route>();
|
||||
const tracks = useTypedSelector((state) => state.music.tracks.entities);
|
||||
const album = useTypedSelector((state) => state.music.albums.entities[id]);
|
||||
const credentials = useTypedSelector((state) => state.settings.jellyfin);
|
||||
|
||||
async componentDidMount() {
|
||||
const tracks = await retrieveAlbumTracks(this.props.route.params.id);
|
||||
this.setState({ tracks });
|
||||
}
|
||||
// Retrieve helpers
|
||||
const dispatch = useDispatch();
|
||||
const getImage = useGetImage();
|
||||
|
||||
selectTrack = async (id: string) => {
|
||||
const track = await generateTrack(id);
|
||||
await TrackPlayer.add([ track ]);
|
||||
await TrackPlayer.skip(id);
|
||||
// Set callbacks
|
||||
const selectTrack = useCallback(async (trackId) => {
|
||||
const newTrack = generateTrack(tracks[trackId], credentials);
|
||||
console.log(newTrack);
|
||||
await TrackPlayer.add([ newTrack ]);
|
||||
await TrackPlayer.skip(trackId);
|
||||
TrackPlayer.play();
|
||||
}
|
||||
|
||||
playAlbum = async () => {
|
||||
const tracks = await Promise.all(this.state.tracks.map(track => generateTrack(track.Id)));
|
||||
}, [tracks, credentials]);
|
||||
const playAlbum = useCallback(async () => {
|
||||
const newTracks = album.Tracks.map((trackId) => generateTrack(tracks[trackId], credentials));
|
||||
await TrackPlayer.removeUpcomingTracks();
|
||||
await TrackPlayer.add(tracks);
|
||||
await TrackPlayer.skip(tracks[0].id);
|
||||
await TrackPlayer.add(newTracks);
|
||||
await TrackPlayer.skip(album.Tracks[0]);
|
||||
TrackPlayer.play();
|
||||
}
|
||||
}, [tracks, credentials]);
|
||||
|
||||
render() {
|
||||
const { tracks } = this.state;
|
||||
const { album } = this.props.route.params;
|
||||
// Retrieve album tracks on load
|
||||
useEffect(() => { dispatch(fetchTracksByAlbum(id)); }, []);
|
||||
|
||||
return (
|
||||
<ScrollView style={{ backgroundColor: '#f6f6f6', padding: 20, paddingBottom: 50 }}>
|
||||
<AlbumImage source={{ uri: getImage(album.Id) }} />
|
||||
<Text style={{ fontSize: 36, fontWeight: 'bold' }} >{album.Name}</Text>
|
||||
<Text style={{ fontSize: 24, opacity: 0.5, marginBottom: 24 }}>{album.AlbumArtist}</Text>
|
||||
<Button title="Play Album" onPress={this.playAlbum} />
|
||||
{tracks.length ? tracks.map((track) =>
|
||||
<TouchableTrack key={track.Id} id={track.Id} onPress={this.selectTrack}>
|
||||
<Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>{track.IndexNumber}</Text>
|
||||
<Text>{track.Name}</Text>
|
||||
</TouchableTrack>
|
||||
) : undefined}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<ScrollView style={{ backgroundColor: '#f6f6f6', padding: 20, paddingBottom: 50 }}>
|
||||
<AlbumImage source={{ uri: getImage(album.Id) }} />
|
||||
<Text style={{ fontSize: 36, fontWeight: 'bold' }} >{album?.Name}</Text>
|
||||
<Text style={{ fontSize: 24, opacity: 0.5, marginBottom: 24 }}>{album?.AlbumArtist}</Text>
|
||||
<Button title="Play Album" onPress={playAlbum} />
|
||||
{album?.Tracks?.length ? album.Tracks.map((trackId) =>
|
||||
<TouchableTrack key={trackId} id={trackId} onPress={selectTrack}>
|
||||
<Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>{tracks[trackId]?.IndexNumber}</Text>
|
||||
<Text>{tracks[trackId]?.Name}</Text>
|
||||
</TouchableTrack>
|
||||
) : undefined}
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Album;
|
||||
@@ -1,19 +1,13 @@
|
||||
import React, { Component, useCallback } from 'react';
|
||||
import { retrieveAlbums, getImage } from '../../../utility/JellyfinApi';
|
||||
import { Album, RootStackParamList } from '../types';
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import { useGetImage } from '../../../utility/JellyfinApi';
|
||||
import { Album, NavigationProp } from '../types';
|
||||
import { Text, SafeAreaView, FlatList, Dimensions } from 'react-native';
|
||||
import styled from 'styled-components/native';
|
||||
import { TouchableOpacity } from 'react-native-gesture-handler';
|
||||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
|
||||
interface Props {
|
||||
navigation: StackNavigationProp<RootStackParamList, 'Albums'>;
|
||||
}
|
||||
|
||||
interface State {
|
||||
albums: Album[];
|
||||
refreshing: boolean;
|
||||
}
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useTypedSelector } from '../../../store';
|
||||
import { fetchAllAlbums } from '../../../store/music/actions';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
|
||||
const Screen = Dimensions.get('screen');
|
||||
|
||||
@@ -57,51 +51,44 @@ const TouchableAlbumItem: React.FC<TouchableAlbumItemProps> = ({ id, onPress, c
|
||||
);
|
||||
};
|
||||
|
||||
class Albums extends Component<Props, State> {
|
||||
state: State = {
|
||||
albums: [],
|
||||
refreshing: false,
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.retrieveData();
|
||||
}
|
||||
|
||||
retrieveData = async () => {
|
||||
this.setState({ refreshing: true });
|
||||
const albums = await retrieveAlbums() as Album[];
|
||||
this.setState({ albums, refreshing: false });
|
||||
}
|
||||
const Albums: React.FC = () => {
|
||||
// Retrieve data from store
|
||||
const { ids, entities: albums } = useTypedSelector((state) => state.music.albums);
|
||||
const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
|
||||
|
||||
selectAlbum = (id: string) => {
|
||||
const album = this.state.albums.find((d) => d.Id === id) as Album;
|
||||
this.props.navigation.navigate('Album', { id, album });
|
||||
}
|
||||
// Initialise helpers
|
||||
const dispatch = useDispatch();
|
||||
const navigation = useNavigation<NavigationProp>();
|
||||
const getImage = useGetImage();
|
||||
|
||||
render() {
|
||||
const { albums, refreshing } = this.state;
|
||||
// Set callbacks
|
||||
const retrieveData = useCallback(() => dispatch(fetchAllAlbums()), [dispatch]);
|
||||
const selectAlbum = useCallback((id: string) => navigation.navigate('Album', { id, album: albums[id] as Album }), [navigation, albums]);
|
||||
|
||||
// Retrieve data on mount
|
||||
useEffect(() => { retrieveData(); }, []);
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Container>
|
||||
<FlatList
|
||||
data={ids as string[]}
|
||||
refreshing={isLoading}
|
||||
onRefresh={retrieveData}
|
||||
numColumns={2}
|
||||
keyExtractor={d => d}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableAlbumItem id={item} onPress={selectAlbum}>
|
||||
<AlbumImage source={{ uri: getImage(item) }} />
|
||||
<Text>{albums[item]?.Name}</Text>
|
||||
<Text style={{ opacity: 0.5 }}>{albums[item]?.AlbumArtist}</Text>
|
||||
</TouchableAlbumItem>
|
||||
)}
|
||||
/>
|
||||
</Container>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<SafeAreaView>
|
||||
<Container>
|
||||
<FlatList
|
||||
data={albums}
|
||||
keyExtractor={(item: Album) => item.Id}
|
||||
refreshing={refreshing}
|
||||
onRefresh={this.retrieveData}
|
||||
numColumns={2}
|
||||
renderItem={({ item }: { item: Album }) => (
|
||||
<TouchableAlbumItem id={item.Id} onPress={this.selectAlbum}>
|
||||
<AlbumImage source={{ uri: getImage(item.Id) }} />
|
||||
<Text>{item.Name}</Text>
|
||||
<Text style={{ opacity: 0.5 }}>{item.AlbumArtist}</Text>
|
||||
</TouchableAlbumItem>
|
||||
)}
|
||||
/>
|
||||
</Container>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Albums;
|
||||
Reference in New Issue
Block a user