Feature/iw 43 create song view

backend/src/main/java/com/wo/karaoke/CorsConfig.java

@@ -0,0 +1,20 @@
+package com.wo.karaoke; // Or whatever package you choose for configurations
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+public class CorsConfig implements WebMvcConfigurer {
+
+    @Override
+    public void addCorsMappings(CorsRegistry registry) {
+        registry
+            .addMapping("/api/**") // Adjust this to match your API base path
+            .allowedOrigins("http://localhost:8081")
+            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
+            .allowedHeaders("*")
+            .allowCredentials(true) // If you need to handle credentials
+            .maxAge(3600);
+    }
+}

frontend/.prettierrc

@@ -7,4 +7,4 @@
   "trailingComma": "all",
   "semi": true,
   "useTabs": false
-}
+}

frontend/app/(tabs)/_layout.tsx

@@ -1,8 +1,7 @@
 import { Tabs } from 'expo-router';
-import { Bookmark, House, List, LucideIcon, Search } from 'lucide-react-native';
+import { Bookmark, House, List, LucideIcon, Search, MicVocal } from 'lucide-react-native';
 import { useCallback, useState } from 'react';
 import { Platform } from 'react-native';
-
 import BottomNavTab, { BottomNavTabProps } from '@/components/tabs/BottomNavTab';
 import { BottomNavTabName } from '@/types/bottom-nav-tab-enum';
 
@@ -11,6 +10,7 @@ const TABS: { name: BottomNavTabName; icon: LucideIcon }[] = [
   { name: BottomNavTabName.SEARCH, icon: Search },
   { name: BottomNavTabName.QUEUE, icon: List },
   { name: BottomNavTabName.DOWNLOADS, icon: Bookmark },
+  { name: BottomNavTabName.KARAOKE, icon: MicVocal }
 ];
 
 export default function TabLayout() {

frontend/app/(tabs)/index.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Text, View } from 'react-native';
-
 import { mockPlaylists, mockSongs } from '@/components/home/mock-data';
 import TileModal from '@/components/modals/tile-modal';
 import { TileModalVariant } from '@/components/modals/types/tile-modal.enum';

frontend/app/(tabs)/karaoke.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ViewLayout from '@/components/wrappers/view-laytout';
+import SongViewText from '@/components/karaoke/KaraokeText';
+import ControlPanel from '@/components/karaoke/ControlPanel';
+
+
+const KaraokeScreen = () => {
+  return (
+    <ViewLayout>
+      <SongViewText />
+      <ControlPanel />
+    </ViewLayout>
+  );
+};
+
+export default KaraokeScreen;

frontend/app/(tabs)/search.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { useTrackPlayer } from '@/context/trackPlayerContext'
 
 import ViewLayout from '@/components/wrappers/view-laytout';
 
 const Search = () => {
+  const { loadSong } = useTrackPlayer();
   return (
     <ViewLayout>
       <View className="flex-1 justify-center items-center">
         <Text className="text-white text-[24px] font-bold font-roboto-mono">Search</Text>
+        <TouchableOpacity onPress={() => loadSong({title: "On melancholy hill", url: "",youtubeUrl: "https://www.youtube.com/watch?v=BGn2oo-0Dqc", duration: 208})}>
+          <Text className="text-white text-[24px] font-bold font-roboto-mono">On Melancholy Hill</Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => loadSong({title: "Linkin Park", url: "",youtubeUrl: "https://www.youtube.com/watch?v=eVTXPUF4Oz4", duration: 278})}>
+          <Text className="text-white text-[24px] font-bold font-roboto-mono">Linkin Park</Text>
+        </TouchableOpacity>
       </View>
     </ViewLayout>
   );

frontend/app/_layout.tsx

@@ -14,6 +14,7 @@ import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
 import { useEffect } from 'react';
 import { Platform } from 'react-native';
+import { TrackPlayerProvider } from '@/context/trackPlayerContext';
 /* eslint-enable */
 
 SplashScreen.preventAutoHideAsync();
@@ -42,10 +43,12 @@ export default function RootLayout() {
 
   return (
     <>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-      </Stack>
-      <StatusBar style="auto" />
+      <TrackPlayerProvider>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        </Stack>
+        <StatusBar style="auto" />
+      </TrackPlayerProvider>
     </>
   );
 }

frontend/components/karaoke/ControlPanel.tsx

@@ -0,0 +1,58 @@
+import React, { useRef, useState } from 'react';
+import { View, TouchableOpacity, Text, Animated } from 'react-native';
+import { ChevronDown, ChevronUp } from 'lucide-react-native';
+import { useTrackPlayer } from '@/context/trackPlayerContext';
+import SongSpinner from '@/components/karaoke/SongSpinner';
+import Controls from '@/components/karaoke/Controls';
+
+export default function ControlPanel() {
+  const { currentTrack } = useTrackPlayer();
+  const [isOpen, setIsOpen] = useState(false);
+  const animation = useRef(new Animated.Value(0)).current;
+
+  const togglePanel = () => {
+    setIsOpen(!isOpen);
+    Animated.timing(animation, {
+      toValue: isOpen ? 0 : 1,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  const animatedHeight = animation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 150], // Adjust the height range as needed
+  });
+
+  return (
+    <View className="pt-1 bg-gray-300 border-t border-gray-400 justify-around items-center flex flex-col absolute w-full bottom-0 left-0">
+      <View className="px-3 w-full flex flex-row justify-between items-center">
+        <Text className="text-base font-roboto-mono truncate">
+          {currentTrack ? currentTrack.title : ' '}
+        </Text>
+        <TouchableOpacity className="items-center h-[30px] w-[30px] flex justify-center align-center" onPress={togglePanel}>
+          {isOpen ? <ChevronDown /> : <ChevronUp />}
+        </TouchableOpacity>
+      </View>
+      <Animated.View
+        style={{
+          height: animatedHeight,
+          overflow: 'hidden',
+          width: '100%',
+        }}
+      >
+        <View className="w-full items-center justify-around flex flex-col h-full">
+          <View className='w-full h-[1px] my-0 bg-slate-gray'/>
+          <SongSpinner />
+          <View className="px-3 w-full flex flex-row justify-around">
+            <Text>Vocal Volume</Text>
+            <Text>VocalSpinner</Text>
+          </View>
+        </View>
+      </Animated.View>
+      <View className='w-full h-[1px] mb-2 bg-slate-gray'/>
+      <Controls />
+      <View className='w-full h-[1px] my-0 bg-slate-gray'/>
+    </View>
+  );
+};

frontend/components/karaoke/Controls.tsx

@@ -0,0 +1,21 @@
+import { useTrackPlayer } from "@/context/trackPlayerContext";
+import { Pause, Play, SkipBack, SkipForward } from "lucide-react-native";
+import { TouchableOpacity, View } from "react-native";
+
+
+export default function Controls() {
+    const { playNextSong, toggleSong, playPreviousSong, isPlaying } = useTrackPlayer();
+    return (
+    <View className="flex flex-row justify-around items-center w-full pb-2">
+        <TouchableOpacity className="items-center" onPress={playPreviousSong}>
+            <SkipBack size={32} color="black" />
+        </TouchableOpacity>
+        <TouchableOpacity className="items-center" onPress={toggleSong}>
+            {isPlaying ? <Pause size={32} color="black" /> : <Play size={32} color="black" />}
+        </TouchableOpacity>
+        <TouchableOpacity className="items-center" onPress={playNextSong}>
+            <SkipForward size={32} color="black" />
+        </TouchableOpacity>
+    </View>
+  )
+}

frontend/components/karaoke/KaraokeText.tsx

@@ -0,0 +1,25 @@
+import { View, Text } from 'react-native';
+import { useTrackPlayer } from '@/context/trackPlayerContext';
+
+export default function SongViewText() {
+  const { songLines } = useTrackPlayer();
+  return (
+    <View className="w-full h-full flex justify-center items-center bg-[#191414]">
+      <View className="relative w-full flex justify-center items-center">
+        <Text className="text-[22px] font-roboto-mono text-white text-center my-2 z-0">
+          {songLines.previousLine}
+        </Text>
+        <View className="absolute w-full h-full top-0 left-0 z-1 bg-gradient-to-b from-[rgba(25,20,20,1)] from-[75%_rgba(25,20,20,0.5)] to-[rgba(0,0,0,0)]" />
+      </View>
+      <Text className="text-[22px] font-roboto-mono text-lime text-center my-2">
+        {songLines.currentLine}
+      </Text>
+      <View className="relative w-full flex justify-center items-center">
+        <Text className="text-[22px] font-roboto-mono text-white text-center my-2 z-0">
+          {songLines.nextLine}
+        </Text>
+        <View className="absolute w-full h-full top-0 left-0 z-1 bg-gradient-to-t from-[rgba(25,20,20,1)] from-[75%_rgba(25,20,20,0.5)] to-[rgba(0,0,0,0)]" />
+      </View>
+    </View>
+  );
+};

frontend/components/karaoke/SongSpinner.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Text } from 'react-native';
+import { useProgress } from 'react-native-track-player';
+
+export default function SongSpinner() {
+  const progress = useProgress();
+
+  return (
+    <>
+      <View>
+        <Text>
+          Elapsed Time: {Math.floor(progress.position)}/{Math.floor(progress.duration)}s
+        </Text>
+        <View
+          style={{ height: 10, backgroundColor: '#e0e0e0', borderRadius: 5, overflow: 'hidden' }}>
+          <View
+            style={{
+              height: '100%',
+              width: `${(progress.duration > 0 ? progress.position / progress.duration : 0) * 100}%`,
+              backgroundColor: '#3b5998',
+            }}
+          />
+        </View>
+      </View>
+    </>
+  );
+}

frontend/constants/apiRoutes.ts

@@ -0,0 +1,6 @@
+const API_ROUTES = {
+    API_AUDIO_URL: 'http://localhost:8080/api/audio',
+    API_BASE_URL: 'http://localhost:8080'
+};
+
+export default API_ROUTES;