Merge pull request #2 from shellord/dev

feat: add new speakers and font change

Author: shellord

mobile/src/app/(home)/player/index.tsx

@@ -32,6 +32,7 @@ const PlayerScreen = () => {
         <Button
           onPress={handleClose}
           className="w-10 h-10 items-center justify-center"
+          hitSlop={20}
         >
           <Ionicons name="chevron-down" size={24} color="white" />
         </Button>

mobile/src/components/NowPlaying.tsx

@@ -28,7 +28,7 @@ const NowPlaying = ({
         <View className="flex-row items-center flex-1">
           {typeIcon(podcast.type)}
           <View className="ml-3 flex-1">
-            <Font className="text-sm font-medium" numberOfLines={1}>
+            <Font className="text-md font-medium" numberOfLines={1}>
               {podcast.title}
             </Font>
           </View>

mobile/src/components/PodcastCard.tsx

@@ -230,27 +230,27 @@ const PodcastCard = ({ podcast, onDelete }: Props) => {
       <GestureDetector gesture={panGesture}>
         <Animated.View style={cardStyle}>
           <Button onPress={handleCardPress}>
-            <View className="flex-row items-center py-4 bg-white/5 rounded-lg h-14">
+            <View className="flex-row items-center py-4 bg-white/5 rounded-xl h-16">
               {/* TYPE ICON */}
-              <View className="w-14 h-14 bg-white/10 items-center justify-center mr-4">
+              <View className="w-16 h-16 bg-white/10 items-center justify-center mr-4">
                 {typeIcon(podcast.type)}
               </View>
 
-              <View className="flex-1 mr-2">
+              <View className="flex-1">
                 <Font
-                  className="text-sm font-medium text-gray-200"
+                  className="text-lg md:text-xl font-medium text-gray-200"
                   numberOfLines={2}
                 >
                   {podcast.title}
                 </Font>
                 <View className="flex-row items-center justify-between">
                   {podcast.status !== "COMPLETED" ? (
-                    <Font className="text-xs text-gray-400">
+                    <Font className="text-sm text-gray-400">
                       {renderStatusIndicator()}
                     </Font>
                   ) : (
                     podcast.durationMinutes && (
-                      <Font className="text-white/60 text-xs">
+                      <Font className="text-white/60 text-sm">
                         {Math.floor(podcast.durationMinutes / 60)}:
                         {String(podcast.durationMinutes % 60).padStart(2, "0")}
                       </Font>

mobile/tailwind.config.js

@@ -53,6 +53,13 @@ module.exports = {
         },
       },
     },
+    screens: {
+      xs: "0px",
+      sm: "360px", // small phones
+      md: "400px", // big phones
+      lg: "600px", // small tablets
+      xl: "768px", // tablets
+    },
   },
   plugins: [],
 };

server/src/main/resources/data.sql

@@ -11,9 +11,23 @@ VALUES
   (
     2,
     'Alice',
-    'NFG5qt843uXKj4pFvR7C',
+    '56AoDkrOh6qfVPDXZ7Pt',
     'Clear, articulate speaker perfect for educational content',
     'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150&h=150&fit=crop&crop=face'
+  ),
+  (
+    3,
+    'Farah',
+    '4wf10lgibMnboGJGCLrP',
+    'Arabic female voice with with warm, clearn and expressive tone',
+    "https://images.unsplash.com/photo-1625987306773-8b9e554b25e2?w=150&h=150&fit=cover&crop=face"
+  ),
+  (
+    5,
+    'Derek',
+    'mcuuWJIofmzgKEGk3EMA',
+    'Deep african american male voice (age 30 - 40)',
+    "https://images.unsplash.com/photo-1679480911476-3ee732578062?w=150&h=150&fit=cover&crop=face"
   ) ON CONFLICT (id) DO NOTHING;
 
 INSERT INTO