Skip to content

Instantly share code, notes, and snippets.

@enappd

enappd/album.index.js

Created May 9, 2019 18:55
Show Gist options
  • Save enappd/c2b4f5bdfbc2da26324baf3637356ae8 to your computer and use it in GitHub Desktop.
Save enappd/c2b4f5bdfbc2da26324baf3637356ae8 to your computer and use it in GitHub Desktop.
Download ZIP
JS file for album page in Spotify React Native app
Raw
album.index.js
/**
* Audrix (https://www.enappd.com/audrix)
*
* Copyright © 2018-present Enappd. All rights reserved.
*
* This source code is licensed as per the terms found in the
* LICENSE.md file in the root directory of this source tree.
*/
import React, { Component } from "react";
import {
Container,
Content,
View,
Button,
Text,
ListItem,
Body,
Title,
Subtitle,
Icon,
Header,
Left,
Right,
ActionSheet,
Toast,
Footer
} from "native-base";
import { Image, TouchableOpacity, FlatList } from "react-native";
import TouchableNativeFeed from "../../component/TouchableNativeFeedback";
import styles from "./styles";
import MusicPlayerWrapper from "../musicPlayerWrapper/index";
import albumData from "./data";
import Data from "../../constants/constantData";
const { player } = Data;
const songs = albumData.data;
const { PLAYLIST_BUTTONS } = albumData;
const { PLAYLIST_DESTRUCTIVE_INDEX } = albumData;
const { PLAYLIST_CANCEL_INDEX } = albumData;
const { SONG_BUTTONS } = albumData;
const { SONG_DESTRUCTIVE_INDEX } = albumData;
const { SONG_CANCEL_INDEX } = albumData;
class Album extends Component {
static navigationOptions = {
header: null
};
constructor(props) {
super(props);
this.state = {
following: false
};
}
follow = () => {
this.setState({
following: !this.state.following
});
Toast.show({
text: `You are now following ${
this.props.navigation.state.params.playlistName
}!`,
duration: 2500,
type: "success"
});
};
unfollow = () => {
this.setState({
following: !this.state.following
});
Toast.show({
text: `You unfollowed ${
this.props.navigation.state.params.playlistName
}!`,
duration: 2500,
type: "success"
});
};
render() {
return (
<Container style={styles.container}>
<Header
style={styles.header}
androidStatusBarColor="#222325"
iosBarStyle="light-content"
>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="ios-arrow-back" style={{ color: "white" }} />
</Button>
</Left>
<Body>
<Title style={styles.playListTitle}>
{this.props.navigation.state.params.playlistName}
</Title>
<Subtitle style={styles.playListSubTitle}>Playlist</Subtitle>
</Body>
<Right>
<Button
transparent
onPress={() =>
ActionSheet.show(
{
options: PLAYLIST_BUTTONS,
cancelButtonIndex: PLAYLIST_CANCEL_INDEX,
destructiveButtonIndex: PLAYLIST_DESTRUCTIVE_INDEX,
title: "Playlist Options"
},
buttonIndex => {
this.setState({ clicked: PLAYLIST_BUTTONS[buttonIndex] });
}
)
}
>
<Icon name="md-more" style={styles.icon} />
</Button>
</Right>
</Header>
<Content>
<View style={styles.center}>
<Image
source={this.props.navigation.state.params.playlistImg}
style={styles.albumImg}
/>
<View style={styles.albumNameView}>
<Text style={styles.albumName}>
{this.props.navigation.state.params.playlistName}
</Text>
</View>
<View style={{ marginVertical: 5 }}>
{!this.state.following ? (
<Button
small
bordered
rounded
iconLeft
style={styles.followBtn}
onPress={this.follow}
>
<Icon name="ios-add" style={styles.icon} />
<Text style={styles.followBtnTitle}>Follow</Text>
</Button>
) : (
<Button
small
bordered
rounded
iconLeft
style={styles.unFollowBtn}
onPress={this.unfollow}
>
<Icon name="ios-checkmark" style={styles.icon} />
<Text style={styles.unFollowBtnTitle}>Following</Text>
</Button>
)}
</View>
<View style={{ marginVertical: 5 }}>
<Button
rounded
large
onPress={() =>
this.props.navigation.navigate({
key: "Player",
routeName: "Player",
params: {
tunes: songs,
currentTrackIndex: 0,
playlistName: this.props.navigation.state.params
.playlistName
}
})
}
style={styles.shuffleBtn}
>
<Text uppercase style={styles.shuffle}>
Shuffle Play
</Text>
</Button>
</View>
</View>
<View>
<FlatList
data={songs}
keyExtractor={song => song.name}
removeClippedSubviews={false}
renderItem={song => (
<ListItem noBorder style={{ height: 50 }}>
<TouchableNativeFeed
onPress={() => {
this.props.navigation.navigate({
key: player.key,
routeName: player.routeName,
params: {
tunes: songs,
currentTrackIndex: song.index,
playlistName: this.props.navigation.state.params
.playlistName
}
});
}}
>
<View style={styles.listItemContainerStyle}>
<View style={{ flex: 0.95 }}>
<View>
<Text
style={styles.songName}
lineBreakMode="tail"
ellipsizeMode="tail"
numberOfLines={1}
>
{song.item.name}
</Text>
</View>
<View>
<Text
style={styles.songArtist}
lineBreakMode="tail"
ellipsizeMode="tail"
numberOfLines={1}
>
{song.item.artists}
</Text>
</View>
</View>
<View style={{ flex: 0.01 }} />
<View style={{ flex: 0.04 }}>
<TouchableOpacity
activeOpacity={1}
onPress={() =>
ActionSheet.show(
{
options: SONG_BUTTONS,
cancelButtonIndex: SONG_CANCEL_INDEX,
destructiveButtonIndex: SONG_DESTRUCTIVE_INDEX,
title: "Song Options"
},
buttonIndex => {
this.setState({
clicked: SONG_BUTTONS[buttonIndex]
});
}
)
}
>
<Icon name="md-more" style={styles.icon} />
</TouchableOpacity>
</View>
</View>
</TouchableNativeFeed>
</ListItem>
)}
/>
</View>
</Content>
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate({
key: player.key,
routeName: player.routeName,
params: {
tunes: [
{
name: player.params.tunes[0].name,
artists: player.params.tunes[0].artists,
img: player.params.tunes[0].img,
url: player.params.tunes[0].url
}
],
currentTrackIndex: player.params.currentTrackIndex,
playlistName: player.params.playlistName
}
});
}}
>
<Footer style={styles.footer}>
<MusicPlayerWrapper minimal />
</Footer>
</TouchableOpacity>
</Container>
);
}
}
export default Album;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment