working player

android/app/_BUCK

@@ -35,12 +35,12 @@ android_library(
 
 android_build_config(
     name = "build_config",
-    package = "com.atomm.musictest2",
+    package = "com.atomm.music",
 )
 
 android_resource(
     name = "res",
-    package = "com.atomm.musictest2",
+    package = "com.atomm.music",
     res = "src/main/res",
 )
 

android/app/build.gradle

@@ -131,7 +131,7 @@ android {
     compileSdkVersion rootProject.ext.compileSdkVersion
 
     defaultConfig {
-        applicationId "com.atomm.musictest2"
+        applicationId "com.atomm.music"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1

android/app/src/debug/java/com/atomm/ReactNativeFlipper.java

@@ -4,7 +4,7 @@
  * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
  * directory of this source tree.
  */
-package com.atomm.musictest2;
+package com.atomm.music;
 
 import android.content.Context;
 import com.facebook.flipper.android.AndroidFlipperClient;

android/app/src/main/AndroidManifest.xml

@@ -1,14 +1,17 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  package="com.atomm.musictest2">
+  package="com.atomm.music">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
 
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
-      android:roundIcon="@mipmap/ic_launcher_round"
+      android:roundIcon="@mipmap/ic_launcher"
       android:allowBackup="false"
+      android:requestLegacyExternalStorage="true"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"
@@ -19,6 +22,7 @@
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
+            <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
         </intent-filter>
       </activity>
     </application>

android/app/src/main/java/com/atomm/CustomMMKVJSIModulePackage.java

@@ -1,4 +1,4 @@
-package com.atomm.musictest2;
+package com.atomm.music;
 
 import com.facebook.react.bridge.JSIModuleSpec;
 import com.facebook.react.bridge.JavaScriptContextHolder;

android/app/src/main/java/com/atomm/MainActivity.java

@@ -1,4 +1,4 @@
-package com.atomm.musictest2;
+package com.atomm.music;
 
 import com.facebook.react.ReactActivity;
 

android/app/src/main/java/com/atomm/MainApplication.java

@@ -1,4 +1,4 @@
-package com.atomm.musictest2;
+package com.atomm.music;
 
 import android.app.Application;
 import android.content.Context;
@@ -8,7 +8,7 @@
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.bridge.JSIModulePackage;
-import com.atomm.musictest2.CustomMMKVJSIModulePackage;
+import com.atomm.music.CustomMMKVJSIModulePackage;
 import com.facebook.soloader.SoLoader;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
@@ -69,7 +69,7 @@ private static void initializeFlipper(
          We use reflection here to pick up the class that initializes Flipper,
         since Flipper library is not available in release mode
         */
-        Class<?> aClass = Class.forName("com.atomm.musictest2.ReactNativeFlipper");
+        Class<?> aClass = Class.forName("com.atomm.music.ReactNativeFlipper");
         aClass
             .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
             .invoke(null, context, reactInstanceManager);

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <background android:drawable="@mipmap/ic_launcher_background"/>
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

index.js

@@ -2,9 +2,9 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './src';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
 import TrackPlayer from 'react-native-track-player';
 

package.json

@@ -12,24 +12,32 @@
   "dependencies": {
     "@react-native-community/slider": "^4.1.10",
     "@react-navigation/bottom-tabs": "^6.0.9",
+    "@react-navigation/material-top-tabs": "^6.0.6",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.2.5",
     "@reduxjs/toolkit": "^1.6.2",
     "axios": "^0.23.0",
+    "lottie-react-native": "^5.0.1",
     "nanoid": "^3.1.30",
     "react": "17.0.2",
     "react-native": "0.66.0",
+    "react-native-blob-util": "^0.13.18",
     "react-native-bottomsheet-reanimated": "^0.0.44",
+    "react-native-element-dropdown": "^1.6.1",
     "react-native-elements": "^3.4.2",
     "react-native-fast-image": "^8.5.11",
     "react-native-gesture-bottom-sheet": "^1.0.9",
+    "react-native-gesture-handler": "^2.0.0",
+    "react-native-get-random-values": "^1.7.2",
     "react-native-image-colors": "^1.4.0",
     "react-native-interactable-reanimated": "^0.0.15",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-mmkv-storage": "^0.6.6",
-    "react-native-reanimated": "^2.2.3",
+    "react-native-pager-view": "^5.4.9",
+    "react-native-reanimated": "^2.2.4",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.8.0",
+    "react-native-tab-view": "^3.1.1",
     "react-native-text-ticker": "^1.14.0",
     "react-native-track-player": "^2.1.1",
     "react-native-vector-icons": "^8.1.0",

src/App.js

@@ -3,17 +3,26 @@ import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator, BottomTabBar } from '@react-navigation/bottom-tabs';
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import MaterialIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import Mt from 'react-native-vector-icons/MaterialIcons'
 import Player from './player/index'
 import { useDispatch, useSelector } from 'react-redux';
-import { setFocusSearch } from './store/features/playerSlice'
+import { setFocusSearch, setSettings } from './store/features/playerSlice'
 import HomeScreenStack from './navigation/HomeScreenStack';
+import YourScreenStack from './navigation/YourSpace'
+import CreatePlaylist from './components/Playlist/Create'
 import theme from './theme/theme';
 import { StatusBar, View } from 'react-native';
 import TrackPlayer, { Capability } from 'react-native-track-player';
 import SearchScreenStack from './navigation/SearchScreenStack';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import PlayerUI from './navigation/PlayerUI';
+import Overlay from './navigation/Overlay'
 import PlayListUI from './components/Playlist/index'
+import AddToPlaylist from './navigation/AddToPlaylist'
+import 'react-native-gesture-handler';
+import Settings from './components/Helpers/Settings';
+import { MMKV } from './storage';
+
 
 const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator()
@@ -67,6 +76,7 @@ const TabNavigation = () => {
       <Tab.Screen listeners={{
         tabPress: handlePress
       }} name="Search" component={SearchScreenStack} />
+      <Tab.Screen name="More" component={YourScreenStack} />
     </Tab.Navigator>
   )
 }
@@ -97,6 +107,26 @@ const StackNavigation = () => {
           headerShown: true,
           headerTransparent: false
         }} component={PlayListUI} />
+        <Stack.Screen name="cp" component={CreatePlaylist}
+          options={{
+            headerShown: false,
+          }} />
+        <Stack.Screen name="options" component={Overlay}
+          options={{
+            headerShown: false,
+          }} />
+        <Stack.Screen name="Add to Playlist" component={AddToPlaylist}
+          options={{
+            headerTitle: 'Add to Playlist',
+            headerTintColor: theme.txt,
+            headerStyle: {
+              backgroundColor: theme.sy,
+            },
+            headerTitleAlign: 'center',
+            headerShown: true,
+            headerTransparent: false,
+          }}
+        />
       </Stack.Group>
     </Stack.Navigator>
   )
@@ -138,6 +168,14 @@ const App = () => {
     return () => TrackPlayer.destroy();
   }, []);
 
+  useEffect(() => {
+    const settings = MMKV.getMap('setttings')
+
+    if (settings) {
+      dispatch(setSettings(settings))
+    }
+  }, [])
+
   return (
     <View style={{ backgroundColor: theme.bg, flex: 1 }}>
       <StatusBar
@@ -167,6 +205,11 @@ const screenOptions = ({ route }) => ({
       const iconName = focused ? 'search' : 'search-outline';
       return <Ionicons name={iconName} size={size} color={color} />
     }
+
+    if (route.name === 'More') {
+      const iconName = 'more-horiz';
+      return <Mt name={iconName} size={size} color={color} />
+    }
   },
   tabBarActiveTintColor: theme.txt,
   tabBarInactiveTintColor: theme.gray,
@@ -178,7 +221,7 @@ const screenOptions = ({ route }) => ({
     paddingBottom: 5,
     backgroundColor: theme.sy,
     fontWeight: '700',
-    borderTopColor: theme.sy
+    borderTopColor: theme.sy,
   }
 })
 

src/api/home.js

@@ -72,6 +72,7 @@ const formatData = (content) => content.map((item) => {
             data: current?.contents?.map((content) => {
                 return {
                     title: content?.musicTwoRowItemRenderer?.title.runs[0].text,
+                    aspectRatio: content?.musicTwoRowItemRenderer?.aspectRatio,
                     subtitle: content?.musicTwoRowItemRenderer?.subtitle.runs,
                     type: content?.musicTwoRowItemRenderer?.navigationEndpoint?.browseEndpoint?.browseEndpointContextSupportedConfigs?.browseEndpointContextMusicConfig?.pageType,
                     thumbnail: content?.musicTwoRowItemRenderer?.thumbnailRenderer.musicThumbnailRenderer?.thumbnail?.thumbnails[1]?.url,

src/assets/like.json

@@ -0,0 +1 @@
+{"v":"4.6.6","fr":30,"ip":0,"op":30,"w":300,"h":300,"nm":"2.0 A-首页-inline播放","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"形状图层 1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[150,150,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[50.67567567567568,50.67567567567568,100]}},"ao":0,"shapes":[{"d":1,"ty":"el","s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":2,"s":[0,0],"e":[29,29]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":7,"s":[29,29],"e":[0,0]},{"t":16}]},"p":{"a":1,"k":[{"i":{"x":0.52,"y":1},"o":{"x":0.6,"y":0},"n":"0p52_1_0p6_0","t":1,"s":[0,0],"e":[0,189],"to":[0,31.5],"ti":[0,-40]},{"i":{"x":0.38,"y":1},"o":{"x":0.333,"y":0},"n":"0p38_1_0p333_0","t":6,"s":[0,189],"e":[0,240],"to":[0,40],"ti":[0,-8.5]},{"t":15}]},"nm":"椭圆路径 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.9294117647058824,0.10980392156862745,0.1411764705882353,1]},"o":{"a":0,"k":100},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"rp","c":{"a":0,"k":8,"ix":1},"o":{"a":0,"k":0,"ix":2},"m":1,"ix":3,"tr":{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":45,"ix":4},"so":{"a":0,"k":100,"ix":5},"eo":{"a":0,"k":100,"ix":6},"nm":"变换"},"nm":"中继器 1","mn":"ADBE Vector Filter - Repeater"}],"ip":0,"op":250,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"Explosion Vol.1 08 / 1","cl":"1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[150,150,0]},"a":{"a":0,"k":[-120.395,32.605,0]},"s":{"a":1,"k":[{"i":{"x":[0,0,0.667],"y":[1.002,1.002,0.667]},"o":{"x":[1,1,0.333],"y":[0,0,0.333]},"n":["0_1p002_1_0","0_1p002_1_0","0p667_0p667_0p333_0p333"],"t":2,"s":[0,0,100],"e":[48.648648648648646,48.648648648648646,100]},{"t":14}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[367.211,367.211]},"p":{"a":0,"k":[0,0]},"nm":"椭圆路径 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.9294117647058824,0.10980392156862745,0.1411764705882353,1]},"o":{"a":0,"k":100},"w":{"a":1,"k":[{"i":{"x":[0.297],"y":[1]},"o":{"x":[0.588],"y":[0]},"n":["0p297_1_0p588_0"],"t":2,"s":[240],"e":[0]},{"t":14}]},"lc":1,"lj":1,"ml":4,"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[-120.395,32.605],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":30,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"“喜欢”轮廓","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0,"x":"var $bm_rt;\n$bm_rt = transform.rotation;"},"p":{"a":0,"k":[150,150,0],"x":"var $bm_rt;\n$bm_rt = transform.position;"},"a":{"a":0,"k":[25,22.5,0]},"s":{"a":1,"k":[{"i":{"x":[0.48,0.48,0.667],"y":[1,1,0.667]},"o":{"x":[0.333,0.333,0.167],"y":[0.115,0.115,0.167]},"n":["0p48_1_0p333_0p115","0p48_1_0p333_0p115","0p667_0p667_0p167_0p167"],"t":0,"s":[202.7027027027027,202.7027027027027,100],"e":[121.62162162162161,121.62162162162161,100]},{"i":{"x":[0.516,0.516,0.667],"y":[1,1,0.667]},"o":{"x":[0.264,0.264,0.333],"y":[0,0,0.333]},"n":["0p516_1_0p264_0","0p516_1_0p264_0","0p667_0p667_0p333_0p333"],"t":2,"s":[121.62162162162161,121.62162162162161,100],"e":[263.51351351351354,263.51351351351354,100]},{"i":{"x":[0.605,0.605,0.667],"y":[1.005,1.005,0.667]},"o":{"x":[0.373,0.373,0.333],"y":[0,0,0.333]},"n":["0p605_1p005_0p373_0","0p605_1p005_0p373_0","0p667_0p667_0p333_0p333"],"t":7,"s":[263.51351351351354,263.51351351351354,100],"e":[202.7027027027027,202.7027027027027,100]},{"i":{"x":[0.663,0.663,0.833],"y":[0.978,0.978,0.833]},"o":{"x":[0.32,0.32,0.167],"y":[0,0,0.167]},"n":["0p663_0p978_0p32_0","0p663_0p978_0p32_0","0p833_0p833_0p167_0p167"],"t":11,"s":[202.7027027027027,202.7027027027027,100],"e":[212.83783783783784,212.83783783783784,100]},{"i":{"x":[0.64,0.64,0.833],"y":[0.973,0.973,0.833]},"o":{"x":[0.29,0.29,0.167],"y":[0.002,0.002,0.167]},"n":["0p64_0p973_0p29_0p002","0p64_0p973_0p29_0p002","0p833_0p833_0p167_0p167"],"t":14,"s":[212.83783783783784,212.83783783783784,100],"e":[202.7027027027027,202.7027027027027,100]},{"t":19}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.401,0],[2.068,-3.674],[4.874,0],[0,-6.245],[-0.912,-0.537],[-0.234,0],[-0.209,0.124],[0,14.79]],"o":[[-4.875,0],[-2.067,-3.674],[-7.402,0],[0,14.79],[0.209,0.124],[0.234,0],[0.912,-0.537],[0,-6.245]],"v":[[11.176,-20.5],[0,-14.302],[-11.175,-20.5],[-23,-7.795],[-0.676,20.315],[0,20.5],[0.676,20.315],[23,-7.795]],"c":true}},"nm":"路径 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[0.9294117647058824,0.10980392156862745,0.1411764705882353,1]},"o":{"a":0,"k":100},"r":1,"nm":"填充 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"st","c":{"a":0,"k":[0.9294117647058824,0.10980392156862745,0.1411764705882353,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":3.6},"lc":2,"lj":2,"nm":"描边 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[25,22.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"变换"}],"nm":"组 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":250,"st":0,"bm":0,"sr":1}]}

src/components/Album/AlbumList.js

@@ -1,12 +1,16 @@
 import React from 'react'
-import { View, Text, StyleSheet, TouchableNativeFeedback } from 'react-native'
+import { View, Text, StyleSheet, TouchableNativeFeedback, TouchableHighlight } from 'react-native'
 import { getPlaylistThunk, getQueue, setPlayList, updatePlayer } from '../../store/features/playerSlice'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
 import theme from '../../theme/theme'
 import { useDispatch } from 'react-redux'
 import { PlaySong } from '../../utils/play'
+import { useNavigation } from '@react-navigation/native'
 
-export default function AlbumList({ list, i, obj }) {
+export default function AlbumList({ list, i, obj, albumList }) {
     const dispatch = useDispatch()
+    const navigation = useNavigation();
+
     let title, playlistId, videoId, subtitle, currentIndex, duration, index, isPlaylist = false;
     const thumbnail = obj.thumbnails
 
@@ -49,24 +53,46 @@ export default function AlbumList({ list, i, obj }) {
             isLoading: true
         }))
 
-        await PlaySong(currentIndex, videoId, thumbnail, playlistId)
+        if (list?.isOffline) {
+            await PlaySong(currentIndex, videoId, thumbnail, playlistId, list)
+        } else {
+            await PlaySong(currentIndex, videoId, thumbnail, playlistId)
+        }
+
+
+        let cPlaylist = []
+
+        if (obj.type === 'YourAlbum') {
+            cPlaylist = albumList
+        } else {
+            const { playlist } = await getQueue({ playlistId })
+            cPlaylist = playlist
+        }
 
-            const { playlist: cPlaylist } = await getQueue({ playlistId })
+        // console.log(cPlaylist)
+
+        if (cPlaylist) {
+            dispatch(setPlayList({
+                playlist: cPlaylist,
+            }))
+        }
+    }
 
-            console.log(cPlaylist[0])
 
-            if (cPlaylist) {
-                dispatch(setPlayList({
-                    playlist: cPlaylist,
-                }))
-            }
+    const handleOptions = () => {
+        navigation.navigate('options', {
+            thumbnail,
+            title,
+            list,
+            remove: obj.type === 'YourAlbum' ? true : false,
+        })
     }
 
     return (
         <TouchableNativeFeedback onPress={getNextList}>
             <View style={styles.container}>
                 <View style={{ flexDirection: 'row', flex: 2 }}>
-                    <Text style={styles.index}>{index}</Text>
+                    <Text style={styles.index}>{String(index).length === 1 ? `0${index}` : index}</Text>
                     <View style={{ flex: 2 }}>
                         <Text style={styles.itemText}>{title}</Text>
                         <Text numberOfLines={1} style={styles.subtitle}>
@@ -76,7 +102,15 @@ export default function AlbumList({ list, i, obj }) {
                         </Text>
                     </View>
                 </View>
-                {duration && (<Text style={styles.duration}>{duration}</Text>)}
+                {duration ?
+                    (<Text style={styles.duration}>{duration}</Text>)
+                    :
+                    (
+                        <TouchableHighlight onPress={handleOptions} style={styles.options}>
+                            <MaterialIcon name='more-vert' size={20} color={theme.txtSy} />
+                        </TouchableHighlight>
+                    )
+                }
             </View>
         </TouchableNativeFeedback>
     )
@@ -106,13 +140,15 @@ const styles = StyleSheet.create({
     },
     index: {
         padding: 8,
+        marginLeft: 9,
         fontSize: 16,
         marginRight: 13,
         width: 35,
         color: theme.txtSy
     },
     duration: {
         color: theme.txtSy,
-    }
+    },
+    options: { padding: 5, borderRadius: 8, justifyContent: 'center', alignItems: 'center' }
 
 })