|
|
|
@ -1,5 +1,5 @@
|
|
|
|
import { NavigationProp, RouteProp } from "@react-navigation/native";
|
|
|
|
import { NavigationProp, RouteProp, useNavigation } from "@react-navigation/native";
|
|
|
|
import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity } from "react-native";
|
|
|
|
import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity, ScrollView, Pressable } from "react-native";
|
|
|
|
import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, useDerivedValue, useSharedValue, Value, withSpring, withTiming } from "react-native-reanimated";
|
|
|
|
import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, useDerivedValue, useSharedValue, Value, withSpring, withTiming } from "react-native-reanimated";
|
|
|
|
import { BlurView } from 'expo-blur';
|
|
|
|
import { BlurView } from 'expo-blur';
|
|
|
|
import qs from "qs";
|
|
|
|
import qs from "qs";
|
|
|
|
@ -14,215 +14,143 @@ import Music from "../Model/Music";
|
|
|
|
import SpotifyService from "../services/spotify/spotify.service";
|
|
|
|
import SpotifyService from "../services/spotify/spotify.service";
|
|
|
|
import { SharedElement } from "react-navigation-shared-element";
|
|
|
|
import { SharedElement } from "react-navigation-shared-element";
|
|
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
|
|
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
|
|
|
|
|
|
import Icons from "../assets/icons/icons/icon";
|
|
|
|
|
|
|
|
import FontAwesome from 'react-native-vector-icons/FontAwesome';
|
|
|
|
|
|
|
|
import { Feather as Icon } from "@expo/vector-icons";
|
|
|
|
|
|
|
|
import { HorizontalFlatList } from "../components/HorizontalFlatList";
|
|
|
|
|
|
|
|
import { LittleCard } from "../components/littleCard";
|
|
|
|
|
|
|
|
import normalize from "../components/Normalize";
|
|
|
|
|
|
|
|
import { Circle } from "react-native-svg";
|
|
|
|
|
|
|
|
import { AntDesign } from '@expo/vector-icons';
|
|
|
|
|
|
|
|
import * as SecureStore from 'expo-secure-store';
|
|
|
|
|
|
|
|
|
|
|
|
const halfPi = Math.PI/2;
|
|
|
|
const halfPi = Math.PI/2;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//@ts-ignore
|
|
|
|
//@ts-ignore
|
|
|
|
const MusicDetail = ({ route }) => {
|
|
|
|
const MusicDetail = ({ route }) => {
|
|
|
|
const music : Music = route.params.music;
|
|
|
|
const music : Music = route.params.music;
|
|
|
|
const [currentspot, setCurrentspot] = useState(music);
|
|
|
|
const [currentspot, setCurrentSpot] = useState(music);
|
|
|
|
const [sound, setSound] = useState(null);
|
|
|
|
const [simularMusic, setSimularMusic] = useState<Music[]>([]);
|
|
|
|
|
|
|
|
|
|
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
|
|
const loader = useSharedValue(0);
|
|
|
|
const [sound, setSound] = useState(null);
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
loader.value = isPlaying ? 1 : 0
|
|
|
|
|
|
|
|
}, [isPlaying,loader ]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const transition = useDerivedValue(()=>{
|
|
|
|
const navigator = useNavigation();
|
|
|
|
return withTiming(loader.value, {duration : 1000})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [testtoken, setTesttoken] = useState('')
|
|
|
|
|
|
|
|
|
|
|
|
// const styleAniamatedButton = useAnimatedStyle(() => {
|
|
|
|
const sheet = async () => {
|
|
|
|
// const verticalAxis =interpolate(
|
|
|
|
SecureStore.getItemAsync('MySecureAuthStateKey').then(result => { setTesttoken(result)});
|
|
|
|
// transition.value,
|
|
|
|
|
|
|
|
// [0,1],
|
|
|
|
|
|
|
|
// [circumference, 0]
|
|
|
|
|
|
|
|
// )
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// return {
|
|
|
|
}
|
|
|
|
// top : withSpring( verticalAxis),
|
|
|
|
|
|
|
|
// left : withSpring(horizontalAxis),
|
|
|
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
sheet();
|
|
|
|
|
|
|
|
getSimilarTrack();
|
|
|
|
|
|
|
|
}, [testtoken]);
|
|
|
|
|
|
|
|
|
|
|
|
const playTrackPreview = async () => {
|
|
|
|
// const getSimilarTrack = async () => {
|
|
|
|
console.log("===============================================================================================================");
|
|
|
|
// const service = new SpotifyService(testtoken);
|
|
|
|
|
|
|
|
// const simularMusic = await service.getSimilarTrack(currentspot.id, 5, 'FR');
|
|
|
|
|
|
|
|
// console.log("suggesstd", simularMusic)
|
|
|
|
|
|
|
|
// setSimularMusic(simularMusic);
|
|
|
|
|
|
|
|
|
|
|
|
console.log('get in Sound');
|
|
|
|
// }
|
|
|
|
|
|
|
|
const getSimilarTrack = async () => {
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
const service = new SpotifyService(testtoken);
|
|
|
|
|
|
|
|
const simularMusic = await service.getSimilarTrack(currentspot.id, 5, 'FR');
|
|
|
|
|
|
|
|
console.log("suggesstd", simularMusic);
|
|
|
|
|
|
|
|
setSimularMusic(simularMusic);
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error('Error ================ in getSimilarTrack', error);
|
|
|
|
|
|
|
|
// Handle the error here.
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const { sound } = await Audio.Sound.createAsync({uri :music.trackPreviewUrl});
|
|
|
|
const handlePlaySound = async () => {
|
|
|
|
//@ts-ignore
|
|
|
|
if (sound === null) {
|
|
|
|
setSound(sound);
|
|
|
|
const { sound: newSound } = await Audio.Sound.createAsync(
|
|
|
|
console.log('Playing Sound');
|
|
|
|
{ uri: music.trackPreviewUrl },
|
|
|
|
await sound.playAsync();
|
|
|
|
{ shouldPlay: true }
|
|
|
|
setIsPlaying(true);
|
|
|
|
);
|
|
|
|
|
|
|
|
setSound(newSound);
|
|
|
|
|
|
|
|
setIsPlaying(true);
|
|
|
|
// const soundObject = new Audio.Sound();
|
|
|
|
|
|
|
|
// try {
|
|
|
|
} else {
|
|
|
|
// await soundObject.loadAsync({ uri: trackPreviewUrl });
|
|
|
|
setIsPlaying(true);
|
|
|
|
// await soundObject.playAsync();
|
|
|
|
//@ts-ignore
|
|
|
|
// setIsPlaying(true);
|
|
|
|
await sound.playAsync();
|
|
|
|
// } catch (error) {
|
|
|
|
}
|
|
|
|
// console.log('Error loading sound:', error);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handlePlaySound = async () => {
|
|
|
|
const handleStopSound = async () => {
|
|
|
|
if (sound === null) {
|
|
|
|
if (sound !== null) {
|
|
|
|
const { sound: newSound } = await Audio.Sound.createAsync(
|
|
|
|
setIsPlaying(false);
|
|
|
|
{ uri: music.trackPreviewUrl },
|
|
|
|
|
|
|
|
{ shouldPlay: true }
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
setSound(newSound);
|
|
|
|
|
|
|
|
setIsPlaying(true);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
setIsPlaying(true);
|
|
|
|
|
|
|
|
//@ts-ignore
|
|
|
|
|
|
|
|
await sound.playAsync();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleStopSound = async () => {
|
|
|
|
|
|
|
|
if (sound !== null) {
|
|
|
|
|
|
|
|
setIsPlaying(false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//@ts-ignore
|
|
|
|
|
|
|
|
await sound.stopAsync();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
else{
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
return sound ? () => {
|
|
|
|
|
|
|
|
console.log('Unloading Sound');
|
|
|
|
|
|
|
|
//@ts-ignore
|
|
|
|
//@ts-ignore
|
|
|
|
sound.unloadAsync();
|
|
|
|
await sound.stopAsync();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
: undefined;
|
|
|
|
else{
|
|
|
|
}, [sound]);
|
|
|
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
|
|
|
// if(isPlaying){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const sensor = useAnimatedSensor(SensorType.ROTATION);
|
|
|
|
|
|
|
|
const styleAniamatedImage = useAnimatedStyle(() => {
|
|
|
|
|
|
|
|
const {yaw, pitch, roll} = sensor.sensor.value;
|
|
|
|
|
|
|
|
const verticalAxis =interpolate(
|
|
|
|
|
|
|
|
pitch,
|
|
|
|
|
|
|
|
[-halfPi*2,halfPi*2],
|
|
|
|
|
|
|
|
[-45, 45]
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
const horizontalAxis =interpolate(
|
|
|
|
|
|
|
|
roll,
|
|
|
|
|
|
|
|
[-halfPi*2,halfPi*2],
|
|
|
|
|
|
|
|
[-45, 45]
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
top : withSpring( verticalAxis),
|
|
|
|
|
|
|
|
left : withSpring(horizontalAxis),
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
// const CLIENT_ID = "1f1e34e4b6ba48b388469dba80202b10";
|
|
|
|
|
|
|
|
// const CLIENT_SECRET = "779371c6d4994a68b8dd6e84b0873c82";
|
|
|
|
|
|
|
|
// const spotify = "BQA2IAFZ-7ta4-_4_Uqdcdrqi_peE6Hlf1jwxFqjXTbwes0z8xgVGx0rE3zv4cQlusd1ILJhRwkxzPsL1YakzSvCxaTI1P7kOzBrrMqlkDgk4vlFvzLjScB0hBLULbpZyn3ylgx4RyZBEWfmc24wZPQOsrJU58AYCveA52UxYVSIc_Frr7LZyRmwjzGB68MPZeBD"
|
|
|
|
|
|
|
|
// var authOptions = {
|
|
|
|
|
|
|
|
// method: 'GET',
|
|
|
|
|
|
|
|
// url: 'https://api.spotify.com/v1/me/player/currently-playing',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// headers: {
|
|
|
|
|
|
|
|
// 'Authorization': 'Bearer ' + spotify,
|
|
|
|
|
|
|
|
// 'Content-Type' : 'application/json',
|
|
|
|
|
|
|
|
// 'market' : 'FR',
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// json: true
|
|
|
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// var id = '0cFS3AMF9Lhj3CNoFvwjvY'
|
|
|
|
|
|
|
|
// const requestor = new RequestHandler()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// const getCurrentTrack = async () => {
|
|
|
|
|
|
|
|
// try {
|
|
|
|
|
|
|
|
// const opt : FetchRequest ={headers : Record}
|
|
|
|
|
|
|
|
// requestor.spotifyFetch(`tracks${id}`,)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // var GetTrackOptions = {
|
|
|
|
|
|
|
|
// // method: 'GET',
|
|
|
|
|
|
|
|
// // url: 'https://api.spotify.com/v1/tracks/'+id,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // headers: {
|
|
|
|
|
|
|
|
// // 'Authorization': 'Bearer ' + spotify,
|
|
|
|
|
|
|
|
// // 'Content-Type' : 'application/json',
|
|
|
|
|
|
|
|
// // 'market' : 'FR',
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// // json: true
|
|
|
|
|
|
|
|
// // };
|
|
|
|
|
|
|
|
// // const resp = await axios(GetTrackOptions)
|
|
|
|
|
|
|
|
// // console.log("============");
|
|
|
|
|
|
|
|
// // console.log(resp.data.href);
|
|
|
|
|
|
|
|
// // console.log("================================"+resp.data.album.images[0].url+ "================================");
|
|
|
|
|
|
|
|
// // var tmp = currentspot;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // tmp.sourceUrl = resp.data.album.images[0].url;
|
|
|
|
|
|
|
|
// // setCurrentspot(tmp);
|
|
|
|
|
|
|
|
// // await axios(authOptions).then(async (response) =>{
|
|
|
|
|
|
|
|
// // console.log(response.data.item.preview_url);
|
|
|
|
|
|
|
|
// // const id = response.data.item.id;
|
|
|
|
|
|
|
|
// // var GetTrackOptions = {
|
|
|
|
|
|
|
|
// // method: 'GET',
|
|
|
|
|
|
|
|
// // url: 'https://api.spotify.com/v1/tracks/'+id,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // headers: {
|
|
|
|
|
|
|
|
// // 'Authorization': 'Bearer ' + spotify,
|
|
|
|
|
|
|
|
// // 'Content-Type' : 'application/json',
|
|
|
|
|
|
|
|
// // 'market' : 'FR',
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// // json: true
|
|
|
|
|
|
|
|
// // };
|
|
|
|
|
|
|
|
// // console.log("============");
|
|
|
|
|
|
|
|
// // const music = await axios(GetTrackOptions);
|
|
|
|
|
|
|
|
// // console.log("================================"+music.data+ "================================");
|
|
|
|
|
|
|
|
// // currentspot.sourceUrl = music.data.images[0];
|
|
|
|
|
|
|
|
// // setCurrentspot(currentspot);
|
|
|
|
|
|
|
|
// // })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // const response = await fetch('https://api.spotify.com/v1/me', {
|
|
|
|
|
|
|
|
// // method: 'GET',
|
|
|
|
|
|
|
|
// // headers: {
|
|
|
|
|
|
|
|
// // Authorization: 'Bearer ' + spotify,
|
|
|
|
|
|
|
|
// // 'Content-Type': 'application/json',
|
|
|
|
|
|
|
|
// // },
|
|
|
|
|
|
|
|
// // });
|
|
|
|
|
|
|
|
// // response.json()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // destructure the response and rename the properties to be in camelCase to satisfy my linter ;)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// } catch (err) {
|
|
|
|
|
|
|
|
// console.error(err);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
const animationState = new Value(State.UNDETERMINED);
|
|
|
|
|
|
|
|
const playMusic = async (id: string) => {
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
|
|
|
const service = new SpotifyService("BQDWJTPvSloZPYDqLc1YWri2LEcognvqoM5bdoCWMuHR9In2FhaKq5tW3-VC5JET9dD9K-W4Rmm0IiyhtX-fSL3Tb8RTHMJUc5GKFq2jxWlH7QXxsiYZV8Fhw2qU1eCpSof1qkPsBd1R36GOgcBaXq2N6kLTP5UcfP-gzjz65x_fVRSxoP6znK2dkvL6saQ6WwzoEFopqpqo") ;
|
|
|
|
|
|
|
|
console.log("=====================================================)))))))))))))))"+id+"================================")
|
|
|
|
|
|
|
|
await service.playMusic(id);
|
|
|
|
|
|
|
|
}catch(error){}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
return sound ? () => {
|
|
|
|
|
|
|
|
console.log('Unloading Sound');
|
|
|
|
|
|
|
|
//@ts-ignore
|
|
|
|
|
|
|
|
sound.unloadAsync();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
: undefined;
|
|
|
|
|
|
|
|
}, [sound]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const sensor = useAnimatedSensor(SensorType.ROTATION);
|
|
|
|
|
|
|
|
const styleAniamatedImage = useAnimatedStyle(() => {
|
|
|
|
|
|
|
|
const {yaw, pitch, roll} = sensor.sensor.value;
|
|
|
|
|
|
|
|
const verticalAxis =interpolate(
|
|
|
|
|
|
|
|
pitch,
|
|
|
|
|
|
|
|
[-halfPi*2,halfPi*2],
|
|
|
|
|
|
|
|
[-45, 45]
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
const horizontalAxis =interpolate(
|
|
|
|
|
|
|
|
roll,
|
|
|
|
|
|
|
|
[-halfPi*2,halfPi*2],
|
|
|
|
|
|
|
|
[-45, 45]
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
top : withSpring( verticalAxis),
|
|
|
|
|
|
|
|
left : withSpring(horizontalAxis),
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<SafeAreaView style={styles.mainSafeArea}>
|
|
|
|
<View style={styles.body}>
|
|
|
|
|
|
|
|
<View style={styles.backgroundSection}>
|
|
|
|
|
|
|
|
<Image
|
|
|
|
|
|
|
|
blurRadius={133}
|
|
|
|
|
|
|
|
style={styles.back_drop}
|
|
|
|
|
|
|
|
source={{
|
|
|
|
|
|
|
|
uri: currentspot.image,
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
></Image>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* <LinearGradient
|
|
|
|
|
|
|
|
// Background Linear Gradient
|
|
|
|
|
|
|
|
colors={['rgba(0,0,0,0.8)', 'transparent']}
|
|
|
|
|
|
|
|
/> */}
|
|
|
|
|
|
|
|
<LinearGradient style={styles.gradientFade}
|
|
|
|
|
|
|
|
// Button Linear Gradient
|
|
|
|
|
|
|
|
colors={['rgba(56,56,56,0)', 'rgba(14,14,14,1)']}>
|
|
|
|
|
|
|
|
</LinearGradient>
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
<View style={styles.background1}>
|
|
|
|
|
|
|
|
<ScrollView style={styles.list} showsVerticalScrollIndicator={false} scrollEventThrottle={4}>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<View style={{ flex: 1, justifyContent : 'flex-start', alignItems : 'center' }}>
|
|
|
|
<View style={styles.section1}>
|
|
|
|
|
|
|
|
<View style={{ flex: 1,justifyContent : 'flex-start', alignItems : 'center' }}>
|
|
|
|
{/* <SharedElement id={spot.name} style={{ flex: 1 }}> */}
|
|
|
|
{/* <SharedElement id={spot.name} style={{ flex: 1 }}> */}
|
|
|
|
<View>
|
|
|
|
<View>
|
|
|
|
|
|
|
|
|
|
|
|
@ -233,53 +161,66 @@ const MusicDetail = ({ route }) => {
|
|
|
|
style={[
|
|
|
|
style={[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
|
|
width: 370,
|
|
|
|
// width: 370,
|
|
|
|
height: 370,
|
|
|
|
// width: 400,
|
|
|
|
|
|
|
|
width: 392,
|
|
|
|
|
|
|
|
height: 392,
|
|
|
|
borderRadius : 24,
|
|
|
|
borderRadius : 24,
|
|
|
|
resizeMode: 'stretch',
|
|
|
|
resizeMode: 'stretch',
|
|
|
|
},styleAniamatedImage
|
|
|
|
},styleAniamatedImage
|
|
|
|
|
|
|
|
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<Button title="Play Track On Device"
|
|
|
|
|
|
|
|
onPress={() => {
|
|
|
|
|
|
|
|
playMusic(currentspot.id)
|
|
|
|
|
|
|
|
// promptAsync();
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
{/* Button */}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* <TapGestureHandler {...gestureHandler}> */}
|
|
|
|
|
|
|
|
<Animated.View>
|
|
|
|
|
|
|
|
<TouchableOpacity style={{
|
|
|
|
|
|
|
|
backgroundColor: '#1DB954',
|
|
|
|
|
|
|
|
paddingVertical: 12,
|
|
|
|
|
|
|
|
paddingHorizontal: 24,
|
|
|
|
|
|
|
|
borderRadius: 24,
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
onPressOut={handleStopSound}
|
|
|
|
|
|
|
|
onLongPress={handlePlaySound}
|
|
|
|
|
|
|
|
delayLongPress={1000}>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Text style={ {
|
|
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
|
|
|
fontWeight: 'bold',}}>
|
|
|
|
|
|
|
|
{isPlaying ? 'Playing...' : 'Play'}
|
|
|
|
|
|
|
|
</Text>
|
|
|
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
|
|
|
</Animated.View>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* </TapGestureHandler> */}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* Button */}
|
|
|
|
|
|
|
|
{/* </SharedElement> */}
|
|
|
|
|
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
</SafeAreaView>
|
|
|
|
<View style={{marginTop : 45,flex: 1, flexDirection : 'row', }}>
|
|
|
|
|
|
|
|
<View>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
<TouchableOpacity activeOpacity={0.5} style={{
|
|
|
|
|
|
|
|
backgroundColor: '#F80404',
|
|
|
|
|
|
|
|
borderRadius: 100,
|
|
|
|
|
|
|
|
padding: normalize(23)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}}>
|
|
|
|
|
|
|
|
<View style={{flex: 1, justifyContent : 'center', alignContent : 'center'}}>
|
|
|
|
|
|
|
|
<FontAwesome name="play" size={32} color="#FFFF" ></FontAwesome>
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<View style ={{flex: 1, flexDirection : 'row', justifyContent :'space-evenly', width : '100%' }}>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<TouchableOpacity activeOpacity={0.6} style={{ flexDirection : 'row', justifyContent : 'space-evenly',alignItems: 'center', width: 180,
|
|
|
|
|
|
|
|
height: 64, borderRadius: 8, opacity: 0.86 ,backgroundColor: '#0B0606', }}>
|
|
|
|
|
|
|
|
<FontAwesome name="bookmark" size={24} color="#FFFF" ></FontAwesome>
|
|
|
|
|
|
|
|
<Text style={{ fontSize: normalize(16), fontWeight:"700", color : '#FFFFFF' }}>Dans ma collection</Text>
|
|
|
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
|
|
|
<TouchableOpacity activeOpacity={0.6} style={{ flexDirection : 'row', justifyContent : 'space-evenly',alignItems: 'center', width: 180,
|
|
|
|
|
|
|
|
height: 64, borderRadius: 8, opacity: 0.86 ,backgroundColor: '#0B0606', }}>
|
|
|
|
|
|
|
|
<Icon name="share" size={24} color="#FFFF"></Icon>
|
|
|
|
|
|
|
|
{/* <FontAwesome name="bookmark" size={24} color="#FF0000" ></FontAwesome> */}
|
|
|
|
|
|
|
|
<Text style={{ fontSize: normalize(16), fontWeight:"700", color : '#FFFFFF' }}>Partagedr cette music</Text>
|
|
|
|
|
|
|
|
</TouchableOpacity>
|
|
|
|
|
|
|
|
{/* <Pressable style={{flexDirection : 'row', justifyContent : 'space-between', alignItems: 'center', height: "10%" , borderRadius: 8, opacity: 84 ,backgroundColor: 'rgba(29, 16, 16, 0.84)' }}>
|
|
|
|
|
|
|
|
<FontAwesome name="bookmark" size={16} color="#FF0000" ></FontAwesome>
|
|
|
|
|
|
|
|
<Text style={{ fontSize: 16, fontWeight:"700",lineHeight:12, color : '#FFFFFF' }}>Dans ma collection 2</Text>
|
|
|
|
|
|
|
|
</Pressable> */}
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
{simularMusic.length !== 0 && (
|
|
|
|
|
|
|
|
<HorizontalFlatList title={'Similar'} data={simularMusic}>
|
|
|
|
|
|
|
|
{(props) => (
|
|
|
|
|
|
|
|
<Pressable onLongPress={() => { navigator.navigate("MusicDetail", {"music": props}) }} >
|
|
|
|
|
|
|
|
<LittleCard image={props.image} title ={props.title}/>
|
|
|
|
|
|
|
|
</Pressable>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</HorizontalFlatList>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</ScrollView>
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
@ -290,5 +231,31 @@ const styles = StyleSheet.create ({
|
|
|
|
mainSafeArea: {
|
|
|
|
mainSafeArea: {
|
|
|
|
flex: 1,
|
|
|
|
flex: 1,
|
|
|
|
backgroundColor: "#141414",
|
|
|
|
backgroundColor: "#141414",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
body: {
|
|
|
|
|
|
|
|
backgroundColor: "#0E0E0E"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
backgroundSection: {
|
|
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
|
|
width: "100%",
|
|
|
|
|
|
|
|
position: "absolute"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
back_drop: {
|
|
|
|
|
|
|
|
height: "160%",
|
|
|
|
|
|
|
|
width: '430%',
|
|
|
|
|
|
|
|
position: "absolute",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
gradientFade: {
|
|
|
|
|
|
|
|
height: "100%",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
background1: {
|
|
|
|
|
|
|
|
height: '100%',
|
|
|
|
|
|
|
|
width: '100%',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
list: {
|
|
|
|
|
|
|
|
height: "100%"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
section1: {
|
|
|
|
|
|
|
|
paddingHorizontal: 25
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
