dark mode toggle added on swipe menu

package.json

@@ -5,30 +5,24 @@
   "dependencies": {
     "@material-ui/core": "^4.4.0",
     "@material-ui/icons": "^4.2.1",
-    "@material-ui/lab": "^4.0.0-alpha.25",
     "axios": "^0.18.1",
     "axios-jsonp": "^1.0.2",
     "dexie": "^2.0.4",
     "dexie-observable": "^1.0.0-beta.5",
     "framer-motion": "^1.6.7",
-    "history": "^4.9.0",
     "html-entities": "^1.2.1",
     "material-ui": "^0.20.2",
     "react": "^16.9.0",
-    "react-audio-spectrum": "0.0.9",
     "react-circle-slider": "^1.6.2",
     "react-dom": "^16.9.0",
     "react-ga": "^2.6.0",
-    "react-pose": "^4.0.8",
     "react-recaptcha-v3": "^1.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
     "react-swipeable": "^5.4.0",
-    "react-swipeable-views": "^0.13.3",
     "react-virtualized": "^9.21.1",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.6.0-alpha.1",
-    "styled-components": "^4.3.2",
     "typeface-roboto": "0.0.75"
   },
   "scripts": {
@@ -57,7 +51,6 @@
     "eslint-config-airbnb": "^17.1.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.14.3",
-    "react-snap": "^1.23.0"
+    "eslint-plugin-react": "^7.14.3"
   }
 }

src/components/RenderDatabase.js

@@ -45,7 +45,6 @@ export const useSongMethods = songId => {
 
   const setSnackbarMsg = React.useCallback(
     data => {
-
       dispatch({ type: "setSnackbarMsg", snippet: data });
     },
     [dispatch]
@@ -80,8 +79,6 @@ export const useSongMethods = songId => {
     setDontAskPopup(true);
   };
 
-
-
   const deleteTheSong = async checkBox => {
     const deleted = await deleteSongAudio(currentId);
     setDeleteDialogState(false);
@@ -133,6 +130,8 @@ const RenderDatabase = props => {
     dispatch({ type: "setSnakbarMsg", snippet: data });
   };
 
+  const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+
   const handleClick = song => {
     // set all the info of current clicked video in this object
     setCurrentVideoSnippet({
@@ -141,9 +140,7 @@ const RenderDatabase = props => {
       thumbnail: song.thumbnail,
       title: song.title,
       channelTitle: song.channelTitle,
-      maxThumbnail: `https://img.youtube.com/vi/${
-        song.videoId
-      }/maxresdefault.jpg`,
+      maxThumbnail: `https://img.youtube.com/vi/${song.videoId}/maxresdefault.jpg`,
       sdThumbnail: `https://img.youtube.com/vi/${song.videoId}/sddefault.jpg`
       // this is the url of the max resolution of thumbnail
     });
@@ -182,6 +179,10 @@ const RenderDatabase = props => {
     }
   };
 
+  useEffect(() => {
+    setWindowHeight(window.innerHeight);
+  });
+
   const renderResult = songs.map((song, index) => {
     return (
       <>
@@ -238,7 +239,15 @@ const RenderDatabase = props => {
   });
 
   const renderItem = React.forwardRef((row, ref) => (
-    <div ref={ref} style={{ ...row.style,  maxWidth: "1000px", left: "50%", transform: "translateX(-50%)"}}>
+    <div
+      ref={ref}
+      style={{
+        ...row.style,
+        maxWidth: "1000px",
+        left: "50%",
+        transform: "translateX(-50%)"
+      }}
+    >
       {renderResult[row.index]}
       <Divider />
     </div>
@@ -248,7 +257,7 @@ const RenderDatabase = props => {
       {deleteDialogComponent}
 
       <List
-        height={window.innerHeight - 100}
+        height={windowHeight}
         itemCount={songs.length}
         width={window.innerWidth}
       >

src/components/SwipeMenu.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState, useContext, useEffect, useCallback } from "react";
 
 import {
   SwipeableDrawer,
@@ -21,25 +21,50 @@ import {
   People,
   Settings
 } from "@material-ui/icons";
+
+import { motion, AnimatePresence } from "framer-motion";
+
 import { Link } from "react-router-dom";
 
 import { GlobalContext } from "./GlobalState";
 import "./darkMode.css";
+import moon from "../images/moon-solid.svg";
+import sun from "../images/sun-solid.svg";
 
 const SwipeMenu = () => {
-  const largeAvator = {
-    width: "50px",
-    height: "50px",
-    margin: "25px 0",
-    background: "#e91e63"
-  };
-
-  const [{ menuOpen }, dispatch] = useContext(GlobalContext);
+  const [{ menuOpen, themeSelectValue }, dispatch] = useContext(GlobalContext);
 
   const setMenuOpen = data => {
     dispatch({ type: "setMenuOpen", snippet: data });
   };
 
+  const setThemeSelectValue = useCallback(
+    data => {
+      dispatch({ type: "setThemeSelectValue", snippet: data });
+    },
+    [dispatch]
+  );
+
+  const [isNight, setIsNight] = useState(false);
+
+  useEffect(() => {
+    if (themeSelectValue === "Dark") {
+      setIsNight(true);
+    } else {
+      setIsNight(false);
+    }
+  }, [themeSelectValue]);
+
+  useEffect(() => {
+   if (isNight) {
+     //if the is night is true we will make the theme night else default
+     setThemeSelectValue("Dark")
+   } else {
+    setThemeSelectValue("Default")
+
+   }
+  }, [isNight, setThemeSelectValue])
+
   return (
     <SwipeableDrawer
       open={menuOpen}
@@ -49,30 +74,27 @@ const SwipeMenu = () => {
       <div style={{ width: "300px" }}>
         <div
           style={{
-            padding: "15px"
+            margin: "35px",
+            position: "relative",
+            width: "30px",
+            height: "30px"
           }}
         >
-          <Avatar
-            style={largeAvator}
-            alt="Remy Sharp"
-            // src="/static/images/avatar/1.jpg"
-          >
-            <AccountCircle fontSize="large" />
-          </Avatar>
-          {/* <Button
-            variant="outlined"
-            color="primary"
-            //  onClick={handleAuthClick}
-          >
-            <img
-              src={gIcon}
-              height="25px"
-              alt=""
-              style={{ marginRight: "8px" }}
+          <AnimatePresence>
+            <motion.img
+              key={isNight ? sun : moon}
+              initial={{ scale: 0 }}
+              animate={{ scale: 1.5, rotate: "360deg" }}
+              exit={{ scale: 0 }}
+              // transition={{ duration: 0.5 }}
+              src={isNight ? sun : moon}
+              onClick={() => setIsNight(!isNight)}
+              className="dayNightToggleBtn"
+              alt="sun moon icon"
             />
-            Sign In
-          </Button> */}
+          </AnimatePresence>
         </div>
+
         <Divider />
 
         <List

src/components/player/MainPlayer.js

@@ -573,6 +573,7 @@ const MainPlayer = ({ location, history }) => {
         onEnded={songEnded}
         autoPlay
         ref={audioPlayer}
+        // type="audio/mp4"
       />
     </div>
   );

src/components/sections/SettingsPage.js

@@ -35,7 +35,7 @@ export const useCheckDarkmode = () => {
         if (hrs >= 18 || hrs <= 6) {
           setThemeSelectValue("Dark");
         } else {
-          setThemeSelectValue("Auto");
+          setThemeSelectValue("Default");
         }
       }
     }

src/style.css

@@ -116,6 +116,15 @@ svg.songHeart.left {
   transform : translateY(-418px);
 }
 
+/* short the title based on space */
+.musicArtTitle {
+  width: 88vw;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+
 /* style for the playlist of related videos */
 
 .RelatedVideoContainer {
@@ -163,14 +172,14 @@ div.grecaptcha-badge {
   display: none;
 }
 
-/* short the title based on space */
-.musicArtTitle {
-  width: 88vw;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+.dayNightToggleBtn{
+  height: 25px;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
+
 /* fix on small screen */
 @media (max-height: 570px) {
   .musicArtContainer {