Merge branch 'dev-str1ien'

UNIZAR-30226-2024-03 · May 15, 2024 · 476d349 · 476d349
2 parents 766b860 + 816ddd6
commit 476d349
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 67 deletions.
diff --git 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,18 +239,24 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
+    gap: 10,
   },
   title_author: {
+    flex: 1,
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
   },
   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/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(', ')
     : '';

diff --git 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
@@ -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) {