/
SongPreview.tsx
111 lines (101 loc) · 3.35 KB
/
SongPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { useState, useEffect, FunctionComponent } from "react";
import { Text, View, TouchableOpacity, StyleSheet, Alert } from "react-native";
import { NavigationScreenComponent } from "react-navigation";
import { NavigationStackOptions, NavigationStackProp } from "react-navigation-stack/lib/typescript/types";
import SongRender from "../components/SongRender";
import SongTransformer from "../components/SongTransformer";
import { getService } from "../services";
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import ChordSheetJS from 'chordsheetjs';
import { Artist, Song } from "../db";
import { ROUTES } from "../AppNavigation";
import { SongViewParams } from "./SongView";
interface SongPreviewProps {
navigation: NavigationStackProp<{}, { path: string, serviceName: string }>
}
const SongPreview: FunctionComponent<SongPreviewProps> & NavigationScreenComponent<
NavigationStackOptions,
NavigationStackProp
> = (props) => {
const [chordSheet, setChordCheet] = useState<string | null>(null)
const [isSaving, setIsSaving] = useState(false)
let serviceName = props.navigation.getParam('serviceName')
let path = props.navigation.getParam('path')
useEffect(() => {
const fetchData = async () => {
let service = getService(serviceName)!
let chordPro = await service.getChordProSong(path)
setChordCheet(chordPro)
};
fetchData();
}, []);
function saveSong() {
if (isSaving) return
setIsSaving(true)
const parser = new ChordSheetJS.ChordProParser();
const parsedSong = parser.parse(chordSheet!);
let artistName = parsedSong.getMetaData('artist')!
let songTitle = parsedSong.getMetaData('title')!
let headerlessContent = chordSheet!
headerlessContent = headerlessContent.replace(/{artist:[^}]*}\n/g, '')
headerlessContent = headerlessContent.replace(/{title:[^}]*}\n/g, '')
let artist: Artist | undefined = Artist.getByName(artistName)
if (artist == null) {
artist = Artist.create(artistName)
}
let song = Song.create(artist, songTitle, headerlessContent)
let params: SongViewParams = { id: song.id, title: song.title }
props.navigation.replace(ROUTES.SongView, params)
Alert.alert('Info', 'Song downloaded')
}
return (
<View style={{ flex: 1 }}>
{chordSheet == null ? <Text>Loading...</Text> :
<SongTransformer
transposeDelta={0}
chordProSong={chordSheet}
>
{({ chords, htmlSong }) => (
<View style={{ flex: 1 }}>
<SongRender
chordProContent={htmlSong}
/>
<TouchableOpacity
style={styles.fabButton}
onPress={saveSong}>
<Icon
color="white"
size={30}
name="download"
/>
</TouchableOpacity>
</View>
)}
</SongTransformer>
}
</View>
);
}
export default SongPreview
const styles = StyleSheet.create({
fabButton: {
position: 'absolute',
bottom: 10,
right: 10,
borderRadius: 100,
backgroundColor: 'tomato',
padding: 15
},
item: {
paddingTop: 20,
paddingBottom: 20,
paddingLeft: 20,
borderBottomWidth: 1,
borderColor: '#eee',
backgroundColor: 'white',
justifyContent: 'flex-start'
},
itemTitle: {
fontSize: 18
}
});