playlist created

src/app/index.tsx

@@ -4,7 +4,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Header, Slider, Visualizer } from '../components';
 import { useResize } from '../hooks';
 
-import { ADD_SONGS, PAUSE_SONG, PLAY_SONG, RESUME_SONG } from '../redux';
+import {
+  ADD_SONGS,
+  DELETE_SONG,
+  PAUSE_SONG,
+  PLAY_SONG,
+  RESUME_SONG,
+} from '../redux';
 import AudioSession from '../services/audio-session';
 import { Home, NowPlaying, Playlist } from '../views';
 import './styles.css';
@@ -14,6 +20,7 @@ function App() {
 
   const [ref, size] = useResize();
 
+  const input = useRef(null);
   const audio = useRef(null);
   const dispatch = useDispatch();
 
@@ -58,10 +65,15 @@ function App() {
         });
       }
     } catch (error) {
-      console.log(error);
+      dispatch(PLAY_SONG(0));
     }
   };
 
+  const stop = () => {
+    const htmlAudio: HTMLAudioElement = audioPlayer();
+    htmlAudio.src = '';
+  };
+
   const nextSong = () => {
     if (isSongsThere()) {
       dispatch(PLAY_SONG((playState.index + 1) % songs.length));
@@ -94,6 +106,11 @@ function App() {
     }
   };
 
+  const deleteSong = (index: number) => {
+    dispatch(PLAY_SONG(-2));
+    dispatch(DELETE_SONG(index));
+  };
+
   useEffect(() => {
     if (
       JSON.stringify(prevPlayState.current) !== JSON.stringify(playState) &&
@@ -108,6 +125,9 @@ function App() {
         dispatch(PLAY_SONG(0));
       } else if (index === prevIndex) {
         play();
+      } else if (index === -2) {
+        // stop song
+        stop();
       } else {
         start(index);
       }
@@ -131,15 +151,23 @@ function App() {
     }
   };
 
+  const addSongs = () => {
+    if (input.current) {
+      const filePicker: HTMLInputElement = input.current!;
+      filePicker.click();
+    }
+  };
+
   return (
     <div ref={ref} className="app__wrapper">
       <div className="app__container">
-        <Header />
+        <Header onRightIconClick={() => addSongs()} />
         <Home
           playlist={
             <Playlist
               songs={songs}
               playState={playState}
+              onDelete={(index: number) => deleteSong(index)}
               onClick={(index: number) =>
                 index === playState.index
                   ? playState.playing
@@ -169,6 +197,7 @@ function App() {
             hidden
             multiple
             type="file"
+            ref={input}
             accept="audio/mp3"
             onChange={e => dispatch(ADD_SONGS(e.target.files))}
           />
@@ -183,6 +212,7 @@ function App() {
         <NowPlaying
           percent={range}
           width={size.width}
+          open={playState.index > -1}
           playing={playState.playing}
           song={songs[playState.index]}
           onPlay={() => resumeSong()}

src/components/header/index.tsx

@@ -1,21 +1,30 @@
 import './styles.css';
 
-import back from '../../assets/icons/back.svg';
-import menu from '../../assets/icons/menu.svg';
+import more from '../../assets/icons/more.svg';
+import add from '../../assets/icons/add.svg';
 
-type HeaderProps = {};
+type HeaderProps = {
+  onLeftIconClick?: Function;
+  onRightIconClick?: Function;
+};
 
-const Header = ({}: HeaderProps) => {
+const Header = ({ onLeftIconClick, onRightIconClick }: HeaderProps) => {
   return (
     <div className="header">
       <div className="header__menu__left">
-        <div className="header__icon">
-          <img alt="close" src={back} />
+        <div
+          className="header__icon"
+          onClick={() => onLeftIconClick && onLeftIconClick()}
+        >
+          <img alt="close" src={more} />
         </div>
       </div>
       <div className="header__menu__right">
-        <div className="header__icon">
-          <img alt="close" src={menu} />
+        <div
+          className="header__icon"
+          onClick={() => onRightIconClick && onRightIconClick()}
+        >
+          <img alt="close" src={add} />
         </div>
       </div>
     </div>

src/components/header/styles.css

@@ -6,15 +6,15 @@
   justify-content: space-between;
 }
 .header__menu__left {
-  padding-left: var(--padding);
+  padding-left: calc(var(--padding) * 1.15);
 }
 .header__menu__right {
-  padding-right: var(--padding);
+  padding-right: calc(var(--padding) * 1.15);
 }
 
 .header__icon {
-  width: 42px;
-  height: 42px;
+  width: 48px;
+  height: 48px;
   display: flex;
   cursor: pointer;
   border-radius: 24px;
@@ -25,3 +25,7 @@
 .header__icon:hover {
   background: var(--bg-color-accent);
 }
+
+.header__icon img {
+  width: 30px;
+}

src/redux/actions/index.ts

@@ -3,13 +3,19 @@ import {
   T_PLAY_SONG,
   T_PAUSE_SONG,
   T_RESUME_SONG,
+  T_REMOVE_SONGS,
 } from '../types';
 
 export const ADD_SONGS = (songs: any) => ({
   type: T_ADD_SONGS,
   songs,
 });
 
+export const DELETE_SONG = (index: any) => ({
+  type: T_REMOVE_SONGS,
+  index,
+});
+
 export const PLAY_SONG = (index: number) => ({
   type: T_PLAY_SONG,
   index,

src/redux/reducers/index.ts

@@ -15,7 +15,7 @@ export const songReducer = (state = [], action: any) => {
       );
     }
     case T_REMOVE_SONGS: {
-      return state.filter((_, index) => index !== action.id);
+      return state.filter((_, index) => index !== action.index);
     }
     default: {
       return state;

src/views/now-playing/styles.css

@@ -6,13 +6,13 @@
   align-items: flex-end;
   justify-content: center;
   transform: translateY(150%);
-  transition: transform 0.3s ease;
+  transition: transform 0.5s ease;
   --padding-here: calc(var(--padding) * 0.8);
 }
 
 .nowplaying.nowplaying--open {
   transform: translateY(0%);
-  transition: transform 0.3s ease;
+  transition: transform 0.5s ease;
 }
 
 .nowplaying__container {

src/views/playlist/index.tsx

@@ -2,18 +2,21 @@ import './styles.css';
 
 import play from '../../assets/icons/play.svg';
 import pause from '../../assets/icons/pause.svg';
+import del from '../../assets/icons/delete.svg';
 
 type PlaylistProps = {
   songs: any[];
   grid?: boolean;
   playState?: any;
-  onClick: Function;
+  onClick?: Function;
+  onDelete?: Function;
 };
 
 const Playlist = ({
   grid = false,
   songs,
   onClick,
+  onDelete,
   playState = {},
 }: PlaylistProps) => {
   const { index, playing } = playState;
@@ -33,6 +36,12 @@ const Playlist = ({
           <div title={name} className="playlist__name">
             {name}
           </div>
+          <div
+            className="playlist__icon playlist__icon--right"
+            onClick={() => onDelete && onDelete(i)}
+          >
+            <img alt="play" src={del} />
+          </div>
         </div>
       ))}
     </div>

src/views/playlist/styles.css

@@ -41,5 +41,11 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  width: calc(100% - 56px);
+  width: calc(100% - 56px - 56px);
+}
+
+.playlist__icon--right {
+  margin-right: 0px;
+  background: transparent;
+  margin-left: var(--item-padding);
 }