local music player

MusicPlayer/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

MusicPlayer/.gitignore

@@ -0,0 +1,13 @@
+node_modules/
+.expo/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

MusicPlayer/App.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
+import AppNavigator from './app/navigation/AppNavigator';
+import AudioProvider from './app/context/AudioProvider';
+import color from './app/misc/color';
+
+const MyTheme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    background: color.APP_BG,
+  },
+};
+
+export default function App() {
+  return (
+    <AudioProvider>
+      <NavigationContainer theme={MyTheme}>
+        <AppNavigator />
+      </NavigationContainer>
+    </AudioProvider>
+  );
+}

MusicPlayer/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "audio-player",
+    "slug": "audio-player",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      },
+      "package": "com.jestful.audioplayer"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

MusicPlayer/app/components/AudioListItem.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  Dimensions,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { Entypo } from '@expo/vector-icons';
+import color from '../misc/color';
+
+const getThumbnailText = filename => filename[0];
+
+const convertTime = minutes => {
+  if (minutes) {
+    const hrs = minutes / 60;
+    const minute = hrs.toString().split('.')[0];
+    const percent = parseInt(hrs.toString().split('.')[1].slice(0, 2));
+    const sec = Math.ceil((60 * percent) / 100);
+
+    if (parseInt(minute) < 10 && sec < 10) {
+      return `0${minute}:0${sec}`;
+    }
+
+    if (parseInt(minute) < 10) {
+      return `0${minute}:${sec}`;
+    }
+
+    if (sec < 10) {
+      return `${minute}:0${sec}`;
+    }
+
+    return `${minute}:${sec}`;
+  }
+};
+
+const renderPlayPauseIcon = isPlaying => {
+  if (isPlaying)
+    return (
+      <Entypo name='controller-paus' size={24} color={color.ACTIVE_FONT} />
+    );
+  return <Entypo name='controller-play' size={24} color={color.ACTIVE_FONT} />;
+};
+
+const AudioListItem = ({
+  title,
+  duration,
+  onOptionPress,
+  onAudioPress,
+  isPlaying,
+  activeListItem,
+}) => {
+  return (
+    <>
+      <View style={styles.container}>
+        <TouchableWithoutFeedback onPress={onAudioPress}>
+          <View style={styles.leftContainer}>
+            <View
+              style={[
+                styles.thumbnail,
+                {
+                  backgroundColor: activeListItem
+                    ? color.ACTIVE_BG
+                    : color.FONT_LIGHT,
+                },
+              ]}
+            >
+              <Text style={styles.thumbnailText}>
+                {activeListItem
+                  ? renderPlayPauseIcon(isPlaying)
+                  : getThumbnailText(title)}
+              </Text>
+            </View>
+            <View style={styles.titleContainer}>
+              <Text numberOfLines={1} style={styles.title}>
+                {title}
+              </Text>
+              <Text style={styles.timeText}>{convertTime(duration)}</Text>
+            </View>
+          </View>
+        </TouchableWithoutFeedback>
+        <View style={styles.rightContainer}>
+          <Entypo
+            onPress={onOptionPress}
+            name='dots-three-vertical'
+            size={20}
+            color={color.FONT_MEDIUM}
+            style={{ padding: 10 }}
+          />
+        </View>
+      </View>
+      <View style={styles.separator} />
+    </>
+  );
+};
+const { width } = Dimensions.get('window');
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+    width: width - 80,
+  },
+  leftContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  rightContainer: {
+    flexBasis: 50,
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  thumbnail: {
+    height: 50,
+    flexBasis: 50,
+    backgroundColor: color.FONT_LIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 25,
+  },
+  thumbnailText: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    color: color.FONT,
+  },
+  titleContainer: {
+    width: width - 180,
+    paddingLeft: 10,
+  },
+  title: {
+    fontSize: 16,
+    color: color.FONT,
+  },
+  separator: {
+    width: width - 80,
+    backgroundColor: '#333',
+    opacity: 0.3,
+    height: 0.5,
+    alignSelf: 'center',
+    marginTop: 10,
+  },
+  timeText: {
+    fontSize: 14,
+    color: color.FONT_LIGHT,
+  },
+});
+
+export default AudioListItem;

MusicPlayer/app/components/OptionModal.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Modal,
+  StatusBar,
+  Text,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import color from '../misc/color';
+
+const OptionModal = ({
+  visible,
+  currentItem,
+  onClose,
+  options,
+  onPlayPress,
+  onPlayListPress,
+}) => {
+  const { filename } = currentItem;
+  return (
+    <>
+      <StatusBar hidden />
+      <Modal animationType='slide' transparent visible={visible}>
+        <View style={styles.modal}>
+          <Text style={styles.title} numberOfLines={2}>
+            {filename}
+          </Text>
+          <View style={styles.optionContainer}>
+            {options.map(optn => {
+              return (
+                <TouchableWithoutFeedback
+                  key={optn.title}
+                  onPress={optn.onPress}
+                >
+                  <Text style={styles.option}>{optn.title}</Text>
+                </TouchableWithoutFeedback>
+              );
+            })}
+            {/* <TouchableWithoutFeedback onPress={onPlayPress}>
+              <Text style={styles.option}>Play</Text>
+            </TouchableWithoutFeedback>
+            <TouchableWithoutFeedback onPress={onPlayListPress}>
+              <Text style={styles.option}>Add to Playlist</Text>
+            </TouchableWithoutFeedback> */}
+          </View>
+        </View>
+        <TouchableWithoutFeedback onPress={onClose}>
+          <View style={styles.modalBg} />
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    left: 0,
+    backgroundColor: color.APP_BG,
+    borderTopRightRadius: 20,
+    borderTopLeftRadius: 20,
+    zIndex: 1000,
+  },
+  optionContainer: {
+    padding: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    padding: 20,
+    paddingBottom: 0,
+    color: color.FONT_MEDIUM,
+  },
+  option: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: color.FONT,
+    paddingVertical: 10,
+    letterSpacing: 1,
+  },
+  modalBg: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    bottom: 0,
+    backgroundColor: color.MODAL_BG,
+  },
+});
+
+export default OptionModal;