From b3e28f04281b16a6ba8f592040ddcbbd9b1e6e7c Mon Sep 17 00:00:00 2001
From: Str1ien <villagrasaalain@gmail.com>
Date: Wed, 15 May 2024 23:17:22 +0200
Subject: [PATCH 1/2] trackplayer style

---
 PlayBeat/src/components/TrackPlayer.tsx | 128 ++++++++++++------------
 PlayBeat/src/screens/Queue.tsx          |   8 +-
 PlayBeat/src/utils/SkipToNext.ts        |   7 +-
 3 files changed, 77 insertions(+), 66 deletions(-)

diff --git a/PlayBeat/src/components/TrackPlayer.tsx b/PlayBeat/src/components/TrackPlayer.tsx
index a1d9ee8..c3066da 100644
--- a/PlayBeat/src/components/TrackPlayer.tsx
+++ b/PlayBeat/src/components/TrackPlayer.tsx
@@ -67,6 +67,7 @@ export default function TrackPlayerComponent({
         .catch(err => log.error('TrackPlayer -> ' + err));
   });
 
+  console.log('TrackPlayerComponent -> artist: ' + currentTrack?.artist);
   const navigator = useNavigation();
 
   return (
@@ -99,74 +100,66 @@ export default function TrackPlayerComponent({
             style={{width: 50, height: 50, marginLeft: 10}}
           />
           <View style={styles.title_author}>
-            <Text style={styles.title}>
-              {' '}
-              {(currentTrack?.title ?? '').length > 10
-                ? (currentTrack?.title ?? '').slice(0, 10).concat('...')
-                : currentTrack?.title}{' '}
+            <Text style={styles.title} numberOfLines={1}>
+              {currentTrack?.title}
             </Text>
-            <Text style={styles.common_text}>
-              {' '}
-              {(currentTrack?.artist ?? '').length > 15
-                ? (currentTrack?.artist ?? '').slice(0, 15).concat('...')
-                : currentTrack?.artist}{' '}
+            <Text style={styles.common_text} numberOfLines={1}>
+              {currentTrack?.artist}
             </Text>
           </View>
         </View>
-        <Icon
-          name="play-back"
-          color={AppColorPalette.white}
-          size={20}
-          style={styles.playerItem}
-          onPress={async () => {
-            const currentIdx = (await TrackPlayer.getActiveTrackIndex()) ?? 0;
-            currentIdx > 0 &&
-              TrackPlayer.skipToPrevious().catch(e =>
-                log.error(
-                  'TrackPlayer -> TrackPlayerComponent -> play-back-icon, onPress ->' +
-                    e,
-                ),
-              );
-          }}
-        />
-        {trackPlayerState === State.Playing ? (
+        <View style={styles.controlButtonsContainer}>
           <Icon
-            name="pause"
+            name="play-back"
             color={AppColorPalette.white}
-            size={35}
-            style={styles.playerItem}
-            onPress={() =>
-              TrackPlayer.pause().catch(e =>
-                log.error(
-                  'TrackPlayer -> TrackPlayerComponent -> pauseIcon, onPress ->' +
-                    e,
-                ),
-              )
-            }
+            size={20}
+            onPress={async () => {
+              const currentIdx = (await TrackPlayer.getActiveTrackIndex()) ?? 0;
+              currentIdx > 0 &&
+                TrackPlayer.skipToPrevious().catch(e =>
+                  log.error(
+                    'TrackPlayer -> TrackPlayerComponent -> play-back-icon, onPress ->' +
+                      e,
+                  ),
+                );
+            }}
           />
-        ) : (
+          {trackPlayerState === State.Playing ? (
+            <Icon
+              name="pause"
+              color={AppColorPalette.white}
+              size={40}
+              onPress={() =>
+                TrackPlayer.pause().catch(e =>
+                  log.error(
+                    'TrackPlayer -> TrackPlayerComponent -> pauseIcon, onPress ->' +
+                      e,
+                  ),
+                )
+              }
+            />
+          ) : (
+            <Icon
+              name="play"
+              color={AppColorPalette.white}
+              size={40}
+              onPress={() =>
+                TrackPlayer.play().catch(e =>
+                  log.error(
+                    'TrackPlayer -> TrackPlayerComponent -> playIcon, onPress ->' +
+                      e,
+                  ),
+                )
+              }
+            />
+          )}
           <Icon
-            name="play"
+            name="play-forward"
             color={AppColorPalette.white}
-            size={35}
-            style={styles.playerItem}
-            onPress={() =>
-              TrackPlayer.play().catch(e =>
-                log.error(
-                  'TrackPlayer -> TrackPlayerComponent -> playIcon, onPress ->' +
-                    e,
-                ),
-              )
-            }
+            size={20}
+            onPress={() => skipToNext(token)}
           />
-        )}
-        <Icon
-          name="play-forward"
-          color={AppColorPalette.white}
-          size={20}
-          style={styles.playerItem}
-          onPress={() => skipToNext(token)}
-        />
+        </View>
         <Icon
           name={userLikesSong ? 'heart' : 'heart-outline'}
           color={AppColorPalette.red}
@@ -210,13 +203,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'flex-start',
   },
-  songInfo: {
-    flex: 1,
+  controlButtonsContainer: {
+    flex: 3,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    // borderWidth: 1,
+    // borderColor: AppColorPalette.red,
   },
-  playerItem: {
+  songInfo: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
   },
   editIcon: {
     flex: 1,
@@ -243,8 +239,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
+    gap: 10,
   },
   title_author: {
+    flex: 1,
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
@@ -252,9 +250,13 @@ const styles = StyleSheet.create({
   title: {
     color: AppColorPalette.white,
     fontSize: 15,
+    width: 86,
   },
   common_text: {
     color: AppColorPalette.white,
     fontSize: 12,
+    width: 86,
+    // borderWidth: 1,
+    // borderColor: AppColorPalette.red,
   },
 });
diff --git a/PlayBeat/src/screens/Queue.tsx b/PlayBeat/src/screens/Queue.tsx
index 4d26858..dba4d53 100644
--- a/PlayBeat/src/screens/Queue.tsx
+++ b/PlayBeat/src/screens/Queue.tsx
@@ -73,7 +73,11 @@ const loadTrackPlayerQueueAudiosFromIndex = async (
           elements: {
             id: audio.idAudio,
             index: audio.path,
-            elements: songPEFromResponseData(audio, [track.artist ?? ''], token),
+            elements: songPEFromResponseData(
+              audio,
+              [track.artist ?? ''],
+              token,
+            ),
           },
           audiosInfo: audio,
         };
@@ -210,7 +214,7 @@ export default function Queue() {
         <Text style={styles.textHeader}> Cola de reproducción </Text>
       </View>
       <View style={styles.currentSong}>
-        <Text style={styles.textSubHeader}> Sonando ahora </Text>
+        <Text style={styles.textSubHeader}> Reproduciendo ahora </Text>
       </View>
       <View style={styles.currentSongTrack}>
         {tracksLoaded && queue.elements.length > 0 && (
diff --git a/PlayBeat/src/utils/SkipToNext.ts b/PlayBeat/src/utils/SkipToNext.ts
index 7e71075..8b87a28 100644
--- a/PlayBeat/src/utils/SkipToNext.ts
+++ b/PlayBeat/src/utils/SkipToNext.ts
@@ -4,7 +4,12 @@ import log from './Logging';
 import {trackFromAudio} from './TrackFromAudio';
 
 const skipToNext = async (token: string) => {
-  const queueLength = (await TrackPlayer.getQueue().catch(err => {log.error('BottomTab -> queueLength -> '+err); return []})).length;
+  const queueLength = (
+    await TrackPlayer.getQueue().catch(err => {
+      log.error('BottomTab -> queueLength -> ' + err);
+      return [];
+    })
+  ).length;
   const currentIdx =
     (await TrackPlayer.getActiveTrackIndex()) ?? queueLength - 1;
   if (currentIdx < queueLength - 1) {

From 816ddd627e0436a368962538beac41fc219377d8 Mon Sep 17 00:00:00 2001
From: Str1ien <villagrasaalain@gmail.com>
Date: Wed, 15 May 2024 23:58:37 +0200
Subject: [PATCH 2/2] fixed bug with songs played from explore page

---
 PlayBeat/src/screens/Explore.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/PlayBeat/src/screens/Explore.tsx b/PlayBeat/src/screens/Explore.tsx
index 2b9eec6..c517585 100644
--- a/PlayBeat/src/screens/Explore.tsx
+++ b/PlayBeat/src/screens/Explore.tsx
@@ -33,7 +33,7 @@ import UserScreen from './User';
 import AddSongToUserPlaylist from './AddSongToUserPlaylist';
 
 const getCreator = (audio: any) => {
-  const artistsOrOwners = audio.Artistas || audio.Propietarios;
+  const artistsOrOwners = audio.artistas;
   return artistsOrOwners
     ? artistsOrOwners.map((artist: any) => artist.nombreUsuario).join(', ')
     : '';