Skip to content

Fix/spotify export #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Zack3720 merged 2 commits into from
Dec 8, 2025
Merged

Fix/spotify export #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f50fb1
small fix to youtube export modal
avaamsel Dec 7, 2025
2243df6
Fixed model so all export information can be read and access without …
vliu526 Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 44 additions & 33 deletions vynl/src/components/SpotifyExportModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,8 +254,8 @@ export default function SpotifyExportModal({
activeOpacity={1}
onPress={onClose}
/>
<View style={[styles.modalContentWrapper, { marginBottom: insets.bottom }]}>
<LinearGradient colors={['#F8F9FD', '#FFFFFF']} style={styles.modalContent}>
<View style={styles.modalContentWrapper}>
<LinearGradient colors={['#F8F9FD', '#FFFFFF']} style={[styles.modalContent, { paddingBottom: Math.max(16, insets.bottom) }]}>
<View style={styles.header}>
<Text style={styles.title}>Export to Spotify</Text>
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
Expand Down Expand Up @@ -313,11 +313,12 @@ export default function SpotifyExportModal({
</View>
) : exportResult ? (
<View style={styles.successSection}>
<Ionicons name="checkmark-circle" size={64} color="#1DB954" style={styles.successIcon} />
<Text style={styles.successTitle}>Export Complete!</Text>
<Text style={styles.successText}>
Found {exportResult.tracksFound} out of {exportResult.tracksTotal} tracks
</Text>
<View style={styles.playlistInfoCompact}>
<Text style={styles.playlistNameCompact}>{playlistName}</Text>
<Text style={styles.songCountCompact}>
Found {exportResult.tracksFound} out of {exportResult.tracksTotal} tracks
</Text>
</View>
<View style={styles.buttonContainer}>
<AppButton
title="Open in Spotify"
Expand Down Expand Up @@ -347,18 +348,10 @@ export default function SpotifyExportModal({
</View>
) : (
<View style={styles.readySection}>
<Ionicons name="musical-notes" size={64} color="#1DB954" style={styles.spotifyIcon} />
<Text style={styles.readyTitle}>Ready to Export</Text>
<Text style={styles.readyDescription}>
Export "{playlistName}" with {songs.length} song{songs.length !== 1 ? 's' : ''} to
Spotify?
</Text>
<View style={styles.playlistInfo}>
<Text style={styles.playlistInfoText}>
<Text style={styles.bold}>Playlist:</Text> {playlistName}
</Text>
<Text style={styles.playlistInfoText}>
<Text style={styles.bold}>Songs:</Text> {songs.length}
<View style={styles.playlistInfoCompact}>
<Text style={styles.playlistNameCompact}>{playlistName}</Text>
<Text style={styles.songCountCompact}>
{songs.length} song{songs.length !== 1 ? 's' : ''}
</Text>
</View>
<View style={styles.buttonContainer}>
Expand Down Expand Up @@ -393,15 +386,14 @@ const styles = StyleSheet.create({
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
overflow: 'hidden',
maxHeight: '80%',
minHeight: 300,
maxHeight: '85%',
width: '100%',
},
modalContent: {
paddingTop: 16,
paddingBottom: 16,
paddingHorizontal: 24,
maxHeight: '100%',
flex: 1,
minHeight: 200,
},
header: {
flexDirection: 'row',
Expand All @@ -422,11 +414,10 @@ const styles = StyleSheet.create({
padding: 8,
},
content: {
flex: 1,
maxHeight: '100%',
flexShrink: 1,
},
contentContainer: {
paddingBottom: 24,
paddingBottom: 16,
flexGrow: 1,
},
centerContent: {
Expand Down Expand Up @@ -493,8 +484,8 @@ const styles = StyleSheet.create({
color: '#6F7A88',
},
successSection: {
alignItems: 'center',
paddingVertical: 16,
alignItems: 'stretch',
paddingVertical: 4,
},
successIcon: {
marginBottom: 12,
Expand All @@ -513,8 +504,8 @@ const styles = StyleSheet.create({
paddingHorizontal: 8,
},
readySection: {
alignItems: 'center',
paddingVertical: 12,
alignItems: 'stretch',
paddingVertical: 4,
},
readyTitle: {
fontSize: 22,
Expand Down Expand Up @@ -542,16 +533,36 @@ const styles = StyleSheet.create({
color: '#001133',
marginBottom: 8,
},
playlistInfoCompact: {
width: '100%',
backgroundColor: 'white',
borderRadius: 12,
padding: 16,
marginBottom: 16,
alignItems: 'center',
},
playlistNameCompact: {
fontSize: 20,
fontWeight: '700',
color: '#001133',
marginBottom: 8,
textAlign: 'center',
},
songCountCompact: {
fontSize: 16,
color: '#6F7A88',
textAlign: 'center',
},
bold: {
fontWeight: '700',
},
buttonContainer: {
width: '100%',
marginBottom: 12,
marginBottom: 10,
},
disconnectButton: {
marginTop: 8,
padding: 12,
marginTop: 4,
padding: 10,
width: '100%',
},
disconnectText: {
Expand Down
87 changes: 49 additions & 38 deletions vynl/src/components/YouTubeExportModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,11 +180,11 @@ export default function YouTubeExportModal({
onSuccess?.(result.playlistUrl);

Alert.alert(
'Exported to YouTube Music',
`Found ${result.tracksFound} of ${result.tracksTotal} tracks`,
'Success!',
`Playlist exported to YouTube Music!\n\nFound ${result.tracksFound} out of ${result.tracksTotal} tracks.`,
[
{
text: 'Open Playlist',
text: 'Open in YouTube Music',
onPress: () => {
if (Platform.OS === 'web') {
if (typeof window !== 'undefined') {
Expand All @@ -195,7 +195,7 @@ export default function YouTubeExportModal({
}
},
},
{ text: 'Close', onPress: onClose },
{ text: 'OK', onPress: onClose },
]
);
} catch (error: any) {
Expand Down Expand Up @@ -278,16 +278,16 @@ export default function YouTubeExportModal({
>
<View style={styles.modalOverlay}>
<TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={onClose} />
<View style={[styles.modalContentWrapper, { marginBottom: insets.bottom }]}>
<LinearGradient colors={['#F8F9FD', '#FFFFFF']} style={styles.modalContent}>
<View style={styles.modalContentWrapper}>
<LinearGradient colors={['#F8F9FD', '#FFFFFF']} style={[styles.modalContent, { paddingBottom: Math.max(16, insets.bottom) }]}>
<View style={styles.header}>
<Text style={styles.title}>Export to YouTube Music</Text>
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
<Ionicons name="close" size={24} color="#001133" />
</TouchableOpacity>
</View>

<ScrollView
<ScrollView
style={styles.content}
contentContainerStyle={styles.contentContainer}
showsVerticalScrollIndicator={false}
Expand Down Expand Up @@ -340,11 +340,12 @@ export default function YouTubeExportModal({
</View>
) : exportResult ? (
<View style={styles.successSection}>
<Ionicons name="checkmark-circle" size={64} color="#1DB954" style={styles.successIcon} />
<Text style={styles.successTitle}>All set!</Text>
<Text style={styles.successText}>
Found {exportResult.tracksFound} of {exportResult.tracksTotal} tracks.
</Text>
<View style={styles.playlistInfoCompact}>
<Text style={styles.playlistNameCompact}>{playlistName}</Text>
<Text style={styles.songCountCompact}>
Found {exportResult.tracksFound} of {exportResult.tracksTotal} tracks
</Text>
</View>
<View style={styles.buttonContainer}>
<AppButton
title="Open in YouTube Music"
Expand Down Expand Up @@ -374,18 +375,10 @@ export default function YouTubeExportModal({
</View>
) : (
<View style={styles.readySection}>
<Ionicons name="logo-youtube" size={64} color="#FF0000" style={styles.youtubeIcon} />
<Text style={styles.readyTitle}>Ready to Export</Text>
<Text style={styles.readyDescription}>
Export "{playlistName}" with {songs.length} song{songs.length !== 1 ? 's' : ''} to YouTube
Music.
</Text>
<View style={styles.playlistInfo}>
<Text style={styles.playlistInfoText}>
<Text style={styles.bold}>Playlist:</Text> {playlistName}
</Text>
<Text style={styles.playlistInfoText}>
<Text style={styles.bold}>Songs:</Text> {songs.length}
<View style={styles.playlistInfoCompact}>
<Text style={styles.playlistNameCompact}>{playlistName}</Text>
<Text style={styles.songCountCompact}>
{songs.length} song{songs.length !== 1 ? 's' : ''}
</Text>
</View>
<View style={styles.buttonContainer}>
Expand Down Expand Up @@ -420,15 +413,14 @@ const styles = StyleSheet.create({
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
overflow: 'hidden',
maxHeight: '80%',
minHeight: 300,
maxHeight: '85%',
width: '100%',
},
modalContent: {
paddingTop: 16,
paddingBottom: 16,
paddingHorizontal: 24,
maxHeight: '100%',
flex: 1,
minHeight: 200,
},
header: {
flexDirection: 'row',
Expand All @@ -449,11 +441,10 @@ const styles = StyleSheet.create({
padding: 8,
},
content: {
flex: 1,
maxHeight: '100%',
flexShrink: 1,
},
contentContainer: {
paddingBottom: 24,
paddingBottom: 16,
flexGrow: 1,
},
centerContent: {
Expand Down Expand Up @@ -520,8 +511,8 @@ const styles = StyleSheet.create({
color: '#6F7A88',
},
successSection: {
alignItems: 'center',
paddingVertical: 16,
alignItems: 'stretch',
paddingVertical: 4,
},
successIcon: {
marginBottom: 12,
Expand All @@ -540,8 +531,8 @@ const styles = StyleSheet.create({
paddingHorizontal: 8,
},
readySection: {
alignItems: 'center',
paddingVertical: 12,
alignItems: 'stretch',
paddingVertical: 4,
},
readyTitle: {
fontSize: 22,
Expand Down Expand Up @@ -569,16 +560,36 @@ const styles = StyleSheet.create({
color: '#001133',
marginBottom: 8,
},
playlistInfoCompact: {
width: '100%',
backgroundColor: 'white',
borderRadius: 12,
padding: 16,
marginBottom: 16,
alignItems: 'center',
},
playlistNameCompact: {
fontSize: 20,
fontWeight: '700',
color: '#001133',
marginBottom: 8,
textAlign: 'center',
},
songCountCompact: {
fontSize: 16,
color: '#6F7A88',
textAlign: 'center',
},
bold: {
fontWeight: '700',
},
buttonContainer: {
width: '100%',
marginBottom: 12,
marginBottom: 10,
},
disconnectButton: {
marginTop: 8,
padding: 12,
marginTop: 4,
padding: 10,
width: '100%',
},
disconnectText: {
Expand Down
Loading