Merge pull request #262 from estd20xx/features

Features

Author: estd20xx

android/app/build.gradle

@@ -18,8 +18,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 8
-        versionName "1.1.16"
-        
+        versionName "1.1.17"   
     }
     signingConfigs {
         debug {

src/Types/Types.ts

@@ -5,7 +5,7 @@ import {
   ChartsResponse,
   PlaylistResponse
 } from "../api/interface/module.interface"
-import { Docs } from "../screens/Home/Albums"
+import { Docs } from "../screens/Home/AudioBook"
 export interface NavigationStringsTypes {
   splash: string
   onboarding: string

src/api/service/Payload.service.ts

@@ -114,6 +114,14 @@ export class PayloadService extends ApiService {
       list_count: albumDetails.list_count,
       list_type: albumDetails.list_type,
       songs: albumDetails.list.map((current) => {
+        /**
+         * 
+         *  id: string
+  title: string
+  artist: string
+  artwork: string
+  url: string
+         */
         return {
           id: current.id,
           title: current.title.replaceAll(""", '"'),

src/components/DetailsScreen/Header.tsx

@@ -20,10 +20,13 @@ const Header: React.FC<Props> = ({ title, artwork, type, desc }) => {
         </Text>
       </View>
       <Show isVisible={desc != undefined && desc.length > 10}>
-        <Text className="px-3">
+        <Text className="px-3 mb-2">
           {desc?.slice(0, isFull ? desc.length : 150)}
           <Pressable onPress={() => setIsFull(!isFull)}>
-            <Text className="text-orange-400">...Tap to read more</Text>
+            <Text className="text-orange-400">
+              <Show isVisible={!isFull}>...Tap to read more</Show>
+              <Show isVisible={isFull}>...Tap to read less</Show>
+            </Text>
           </Pressable>
         </Text>
       </Show>

src/components/Player/BottomPlayer.tsx

@@ -5,30 +5,30 @@ import { TouchableOpacity, View } from "react-native"
 import { FAB } from "react-native-paper"
 import { PlaybackState, State } from "react-native-track-player"
 import { Icons } from "../../constants/Icon"
+import { useSongChange } from "../../hooks/useSongChange"
 import { applicationService } from "../../services/Tuneify.service"
 import { InitialCentralQueue } from "../../store/slices/Queue.slice"
 interface ControlersProps {
-  nextAndPrevious: (is: boolean) => void
   isRepeat: boolean
-  isShuffle: boolean
   playbackState:
     | PlaybackState
     | {
         state: undefined
       }
   applicationQueue: InitialCentralQueue
   dispatch: Dispatch<UnknownAction>
+  isShuffle: boolean
   toggleShuffle: () => void
 }
 const Control: React.FC<ControlersProps> = ({
-  nextAndPrevious,
   isRepeat,
-  isShuffle,
   playbackState,
   applicationQueue,
-  toggleShuffle,
-  dispatch
+  dispatch,
+  isShuffle,
+  toggleShuffle
 }) => {
+  const [previous, next] = useSongChange(isShuffle)
   return (
     <View className="h-18  w-full flex items-center justify-evenly flex-row mt-3">
       <View className="h-full flex items-center flex-row justify-around pl-2 w-[20%]">
@@ -40,7 +40,7 @@ const Control: React.FC<ControlersProps> = ({
         </TouchableOpacity>
       </View>
       <View className="h-full w-[60%] flex items-center justify-evenly flex-row">
-        <TouchableOpacity onPress={() => nextAndPrevious(false)}>
+        <TouchableOpacity onPress={() => previous()}>
           <Icons.KeyboardDown name="skip-previous" color={"white"} size={35} />
         </TouchableOpacity>
         <FAB
@@ -55,7 +55,7 @@ const Control: React.FC<ControlersProps> = ({
           loading={playbackState.state === State.Loading}
           style={{ backgroundColor: "#ff8216", borderRadius: 50 }}
         />
-        <TouchableOpacity onPress={() => nextAndPrevious(true)}>
+        <TouchableOpacity onPress={() => next()}>
           <Icons.KeyboardDown name="skip-next" color={"white"} size={35} />
         </TouchableOpacity>
       </View>

src/components/Player/Control.tsx

@@ -37,14 +37,14 @@ import { useDownloadProgress } from "../../hooks/useDownloadProgress"
 import { useLyricsView } from "../../hooks/useLyricsView"
 import { usePlayer } from "../../hooks/usePlayer"
 import { usePlaylist } from "../../hooks/usePlaylistSlide"
-import { useShuffle } from "../../hooks/useShuffle"
 import { useTimer } from "../../hooks/useTimer"
 import { StoreSongTypes } from "../../Interfaces/tuneifySlice.interface"
 import { musicService } from "../../services/localMedia.service"
 import { applicationService } from "../../services/Tuneify.service"
 import { getSongsLyrics } from "../../store/actions/lyrics.action"
 
 import { welcomeSong } from "../../constants/welcome"
+import { useShuffle } from "../../hooks/useShuffle"
 import {
   changeApplicationSetup,
   tunifyChild
@@ -76,33 +76,39 @@ const MAX_TRANSLATE_Y = -SCREEN_HEIGHT + offSet
 const MIN_TRANSLATE_Y = -BOTTOM_TAB_BAR_HEIGHT - 10
 
 const TuneifyPlayer = () => {
-  const [enableGesture, setEnableGesture] = useState(true)
+  const dispatch = useAppDispatch()
+  const [
+    isPlayer,
+    togglePlayer,
+    enableGesture,
+    toggleGesture,
+    showFullPlayer,
+    toggleFullScreen,
+    showMiniPlayer,
+    toggleMiniPlayer
+  ] = usePlayer()
 
-  const [isPlayer, togglePlayer] = usePlayer()
   const translateY = useSharedValue(MIN_TRANSLATE_Y)
   const Zindex = useSharedValue(20)
-  const [showFullPlayer, setShowFullPlayer] = useState(false)
-  const [showMiniPlayer, setShowMiniPlayer] = useState(true)
-
+  const [isShuffle, toggleShuffle] = useShuffle()
   const favourite = TypedSelectorHook(tuneifyFavourites)
   const lyrics = TypedSelectorHook(storedLyrics)
   const [isLyricsView, toggleLyricsView] = useLyricsView()
   const [timer, toggleTimer, isTimerModal, toggleModal, value, setTimerValue] =
     useTimer()
-  const [isShuffle, toggleShuffle] = useShuffle()
+
   const [downloadProgress, updateDownloadValue] = useDownloadProgress()
   const [isPlaylist, togglePlayist] = usePlaylist()
   const progress = useProgress()
   const [flip] = useState(new CustomAnimated.Value(0))
 
-  const dispatch = useAppDispatch()
   const playbackState: PlaybackState | { state: undefined } = usePlaybackState()
   const applicationQueue = TypedSelectorHook(centralQueue)
   const playerState = TypedSelectorHook(tunifyChild)
 
   useDerivedValue(() => {
-    runOnJS(setShowMiniPlayer)(translateY.value > MIN_TRANSLATE_Y - 40)
-    runOnJS(setShowFullPlayer)(translateY.value < MIN_TRANSLATE_Y - 40)
+    runOnJS(toggleMiniPlayer)(translateY.value > MIN_TRANSLATE_Y - 40)
+    runOnJS(toggleFullScreen)(translateY.value < MIN_TRANSLATE_Y - 40)
   }, [translateY])
 
   const gestureHandler = useAnimatedGestureHandler({
@@ -189,17 +195,6 @@ const TuneifyPlayer = () => {
   const backAnimatedStyle = {
     transform: [{ rotateY: backInterpolate }]
   }
-  const nextAndPrevious = async (isNext: boolean) => {
-    if (isShuffle) {
-      const index = (await TrackPlayer.getQueue()).length
-      const random = Math.floor(Math.random() * index)
-      await TrackPlayer.skip(random)
-      return
-    }
-
-    isNext ? await TrackPlayer.skipToNext() : await TrackPlayer.skipToPrevious()
-  }
-
   const checkFavAvailable = (currentId: string): boolean => {
     if (
       favourite.favouriteData.filter((liked: any) => liked.id == currentId)
@@ -383,9 +378,9 @@ const TuneifyPlayer = () => {
                 <Show isVisible={lyrics.data.lyrics?.length > 15}>
                   <ScrollView showsVerticalScrollIndicator={false}>
                     <Pressable
-                      onTouchStart={(e) => setEnableGesture(false)}
-                      onTouchMove={() => setEnableGesture(true)}
-                      onTouchEnd={() => setEnableGesture(true)}
+                      onTouchStart={(e) => toggleGesture(false)}
+                      onTouchMove={() => toggleGesture(true)}
+                      onTouchEnd={() => toggleGesture(true)}
                     >
                       <Text className="text-white  text-base  leading-8 flex items-center justify-center font-['300']">
                         {lyrics.data.lyrics?.replaceAll("<br>", "\n")}
@@ -403,7 +398,6 @@ const TuneifyPlayer = () => {
             <SongInfo currentTrack={applicationQueue.data.song} />
             <PlayerInfo progress={progress} />
             <Control
-              nextAndPrevious={nextAndPrevious}
               isRepeat={applicationQueue.isRepeat}
               playbackState={playbackState}
               applicationQueue={applicationQueue}

src/components/Player/MusicPlayer.tsx

@@ -48,7 +48,7 @@ const SideModal: React.FC<Props> = ({ isVisible, togglePlayist, song }) => {
     <Modal
       isVisible={isVisible}
       onBackButtonPress={togglePlayist}
-      className="w-full h-screen relative -left-5 bg-red-500"
+      className="w-full h-screen relative -left-5"
     >
       <Show isVisible={isInput}>
         <View className="bg-[#313c56c6] h-36 w-full absolute top-10 rounded-md  items-center justify-center blur-lg z-30">
@@ -73,9 +73,9 @@ const SideModal: React.FC<Props> = ({ isVisible, togglePlayist, song }) => {
           </View>
         </View>
       </Show>
-      <View className="w-full h-[70%] bg-white absolute bottom-0 rounded-t-3xl border-t-2 border-slate-300">
+      <View className="w-full h-[70%] bg-slate-950 absolute bottom-0 rounded-t-3xl border-t-2 border-slate-300">
         <View className="w-full p-2 overflow-hidden z-10">
-          <Text className="text-2xl font-['500'] border-b-2 border-gray-300 text-black mb-2 self-center">
+          <Text className="text-2xl font-['500'] border-b-2 border-gray-300 text-white mb-2 self-center">
             Playlists
           </Text>
           <ScrollView showsVerticalScrollIndicator={false}>

src/components/Player/SideModal.tsx

@@ -7,7 +7,6 @@ type Props = {
 }
 const Category: React.FC<Props> = ({ categoryData }) => {
   const [category, updateCategory] = useSearchCategory()
-  console.log(category)
   return (
     <View className="w-full  flex items-center justify-start flex-row  py-2 pl-2">
       {Object.keys(categoryData || {}).map((current, index) => {

src/components/Search/Category.tsx

@@ -1,7 +1,26 @@
-import React, { memo } from "react"
-import { View } from "react-native"
-import { audioBookImageBaseUrl } from "../../api/base/constrants"
-import { Docs } from "../../screens/Home/Albums"
+import React, { memo, useEffect } from "react"
+import {
+  ActivityIndicator,
+  FlatList,
+  Image,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View
+} from "react-native"
+import TrackPlayer from "react-native-track-player"
+import { audioBookImageBaseUrl, screens } from "../../api/base/constrants"
+import { TypedSelectorHook, useAppDispatch } from "../../hooks/store.hook"
+import { StoreSongTypes } from "../../Interfaces/tuneifySlice.interface"
+import { Docs } from "../../screens/Home/AudioBook"
+import { audioBookDetails } from "../../store/actions/audioBookDetails.action"
+import { audioBookDetailsWithChapters } from "../../store/slices/audioBookDetails.slice"
+import {
+  centralQueue,
+  SpecificQueue,
+  updateQueue
+} from "../../store/slices/Queue.slice"
+import Show from "../Common/Show"
 import Header from "../DetailsScreen/Header"
 interface AudioBookData {
   key: string
@@ -15,15 +34,113 @@ export interface AudioBookDetailsProps {
 }
 const AudioBookDetails: React.FC<AudioBookDetailsProps> = ({ route }) => {
   const { audios } = route.params
+  const dispatch = useAppDispatch()
+  const audioBookChapters = TypedSelectorHook(audioBookDetailsWithChapters)
+  const applicationQueue = TypedSelectorHook(centralQueue)
+
+  const changeQueueState = async (index: number, song: StoreSongTypes) => {
+    try {
+      if (audioBookChapters.data) {
+        if (applicationQueue.data.screenId != screens.favouriteScreenId) {
+          await TrackPlayer.reset()
+          await TrackPlayer.add(audioBookChapters.data)
+          await TrackPlayer.skip(index)
+          await TrackPlayer.play()
+          const newQueue: SpecificQueue = {
+            screenId: screens.audioBook,
+            isPlaying: true,
+            song: song
+          }
+          dispatch(updateQueue(newQueue))
+          return
+        }
+      }
+      await TrackPlayer.skip(index)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  useEffect(() => {
+    dispatch(
+      audioBookDetails.getAudioBookDetails({
+        identifier: audios.identifier,
+        creator: audios.creator
+      })
+    )
+  }, [])
   return (
-    <View>
+    <ScrollView showsVerticalScrollIndicator={false}>
       <Header
         title={audios.title}
         artwork={audioBookImageBaseUrl.concat(audios.identifier)}
         type={"Audio Book"}
         desc={audios.description}
       />
-    </View>
+      <Show isVisible={audioBookChapters.isLoading}>
+        <ActivityIndicator className="mt-5" />
+      </Show>
+      <Show
+        isVisible={
+          !audioBookChapters.isLoading && audioBookChapters?.data != null
+        }
+      >
+        <FlatList
+          data={audioBookChapters.data}
+          keyExtractor={(item) => item.id}
+          initialNumToRender={3}
+          showsVerticalScrollIndicator={false}
+          maxToRenderPerBatch={4}
+          contentContainerStyle={{ paddingBottom: 80 }}
+          removeClippedSubviews={true}
+          windowSize={10}
+          scrollEnabled={false}
+          renderItem={({ item, index }) => {
+            return (
+              <TouchableOpacity
+                className="w-full h-16 mt-2 flex flex-row items-center"
+                onPress={() => changeQueueState(index, item)}
+              >
+                <View className="h-16 w-20  pl-2">
+                  <Image
+                    source={{
+                      uri: audioBookImageBaseUrl.concat(audios.identifier)
+                    }}
+                    className="h-16 w-16"
+                    style={{
+                      borderRadius: 17
+                    }}
+                  />
+                </View>
+                <View className="w-4/5 ">
+                  <Text
+                    style={{
+                      color:
+                        item.id == applicationQueue.data.song?.id
+                          ? "#16FF00"
+                          : "white",
+                      fontSize: 14,
+                      fontFamily: "400"
+                    }}
+                  >
+                    {item.title.slice(0, 50)}
+                  </Text>
+                  <Text
+                    style={{
+                      fontSize: 10,
+                      color: "#d0d0d1",
+                      fontFamily: "200"
+                    }}
+                  >
+                    {item.artist}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            )
+          }}
+        />
+      </Show>
+    </ScrollView>
   )
 }
 export default memo(AudioBookDetails)