react router model view added

page loader changed

public/index.html

@@ -31,7 +31,8 @@
       bottom: 0;
     }
 
-    .full-page-loader > img {
+    .full-page-loader > svg {
+      width: 200px;
       animation: 1.8s infinite heartbeat;
     }
 
@@ -43,7 +44,7 @@
         transform: scale(1.05);
       }
       50% {
-        transform: scale(1);
+        transform: scale(1) rotate(360deg);
       }
       75% {
         transform: scale(1.05);
@@ -62,11 +63,20 @@ <h1>
     </noscript>
     <div id="root">
       <div class="full-page-loader">
-        <img
-          width="250"
-          src="%PUBLIC_URL%/icons/icon-512x512.png"
-          alt="Ylight Logo"
-        />
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          data-prefix="fas"
+          data-icon="compact-disc"
+          role="img"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 496 512"
+        >
+          <path
+            fill="#e91e63"
+            d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM88 256H56c0-105.9 86.1-192 192-192v32c-88.2 0-160 71.8-160 160zm160 96c-53 0-96-43-96-96s43-96 96-96 96 43 96 96-43 96-96 96zm0-128c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32z"
+          ></path>
+        </svg>
       </div>
     </div>
   </body>

src/components/App.js

@@ -14,4 +14,4 @@ function App() {
 
 export default App;
 
-// this do not works 
+// this do not works

src/components/AppContainer.js

@@ -65,8 +65,8 @@ const AppContainer = () => {
     >
       <Router>
         <SimpleAppBar />
-        <CurrentSection />
-        <Route path={"/"} component={MainPlayer} />
+        <Route component={CurrentSection} />
+
         <SwipeMenu />
       </Router>
       <SnackbarMessage />

src/components/CurrentSection.js

@@ -42,7 +42,7 @@ import {
 
 import SettingsPage from "./sections/SettingsPage";
 // import the db from save song
-
+import MainPlayer from "../components/player/MainPlayer";
 // pages
 const LoginPage = lazy(() => import("./LoginPage"));
 const RenderDatabase = lazy(() => import("./RenderDatabase"));
@@ -85,16 +85,15 @@ const CustomTabs = withStyles({
 })(Tab);
 
 let deferredPrompt = undefined;
+let previousLocation, modifiedLocation;
 
 window.addEventListener("beforeinstallprompt", e => {
   // Stash the event so it can be triggered later.
   deferredPrompt = e;
 });
 
 const CurrentSection = ({ history, location }) => {
-  const [{ currentVideoSnippet, searchResult }] = useContext(
-    GlobalContext
-  );
+  const [{ currentVideoSnippet, searchResult }] = useContext(GlobalContext);
   console.log(currentVideoSnippet);
 
   const [songsHistoryState, setSongsHistory] = useState([]);
@@ -159,15 +158,35 @@ const CurrentSection = ({ history, location }) => {
     if (isThisNewUser === "no") {
       setRedirectState(true);
     }
+    // if this is not a new user redirect it to home
+    previousLocation = location;
+    const unlisten = history.listen(location => {
+      if (location.pathname !== "/play") {
+        previousLocation = location;
+        console.log(previousLocation);
+      }
+    });
   }, []);
 
   useEffect(() => {
     // we will redirect everytime user comes to root page
     if (redirectState && history.location.pathname === "/") {
       history.replace("/home");
     }
+
+    // if the location is not play then we will push new location
   }, [setRedirectState, history, redirectState]);
 
+
+
+  const checkPrevLocation = () => {
+    if (location.pathname === "/play") {
+      return previousLocation;
+    } else {
+      return location;
+    }
+  };
+
   // we will load the homepage with all the playlists
   const continueToHome = () => {
     localStorage.setItem("isThisNew", "no");
@@ -187,67 +206,82 @@ const CurrentSection = ({ history, location }) => {
       });
     }
   };
+
+  const returnMainPlayer = props => {
+    // we will return the main player if the path is not the "/"
+
+    if (window.location.pathname !== "/") {
+      return <MainPlayer {...props} />;
+    } else {
+      return null;
+    }
+  };
+
   // the set tab value will keep the tab active on their route
   // there are 4 tabs so there will be 3 indexes
   return (
     <div>
       <Suspense fallback={circularLoader}>
-        <Route
-          exact
-          path="/"
-          render={props => {
-            return <LoginPage continueToHome={continueToHome} />;
-          }}
-        />
-        <Route
-          path="/search"
-          render={props => <SearchResult videos={searchResult} />}
-        />
-        <Route
-          path="/home"
-          render={props => {
-            setTabValue(0);
-            return <HomePage />;
-          }}
-        />
-        <Route
-          path="/liked"
-          render={props => {
-            setTabValue(1);
-            return <RenderDatabase songs={songsLikedState} {...props} />;
-          }}
-        />
-        <Route
-          path="/downloads"
-          render={props => {
-            setTabValue(2);
-            return <RenderDatabase songs={songsDownloadedState} />;
-          }}
-        />
-        <Route
-          path="/history"
-          render={props => {
-            setTabValue(3);
+        <Switch location={checkPrevLocation()}>
+          <Route
+            exact
+            path="/"
+            render={props => {
+              return <LoginPage continueToHome={continueToHome} />;
+            }}
+          />
+          <Route
+            path="/search"
+            render={props => <SearchResult videos={searchResult} />}
+          />
+          <Route
+            path="/home"
+            render={props => {
+              setTabValue(0);
+              return <HomePage />;
+            }}
+          />
+          <Route
+            path="/liked"
+            render={props => {
+              setTabValue(1);
+              return <RenderDatabase songs={songsLikedState} {...props} />;
+            }}
+          />
+          <Route
+            path="/downloads"
+            render={props => {
+              setTabValue(2);
+              return <RenderDatabase songs={songsDownloadedState} />;
+            }}
+          />
+          <Route
+            path="/history"
+            render={props => {
+              setTabValue(3);
 
-            return <RenderDatabase songs={songsHistoryState} />;
-          }}
-        />
-        <Route
-          path="/app"
-          render={props => {
-            window.location.replace(
-              "https://play.google.com/store/apps/details?id=com.ylightmusic.app"
-            );
-            return <div>Redirecting you to play store</div>;
-          }}
-        />
+              return <RenderDatabase songs={songsHistoryState} />;
+            }}
+          />
+          <Route
+            path="/app"
+            render={props => {
+              window.location.replace(
+                "https://play.google.com/store/apps/details?id=com.ylightmusic.app"
+              );
+              return <div>Redirecting you to play store</div>;
+            }}
+          />
+
+          <Route path="/settings" component={SettingsPage} />
+          <Route path="/privacy" component={PrivacyPage} />
 
-        <Route path="/settings" component={SettingsPage} />
-        <Route path="/privacy" component={PrivacyPage} />
+          <Route path="/feedback" component={FeedbackForm} />
+          <Route path="/donate" component={DonatePage} />
+          <Route path="/contributors" component={ContributorsPage} />
+        </Switch>
+        <Route path="/" render={props => returnMainPlayer(props)} />
 
-        <Route path="/feedback" component={FeedbackForm} />
-        <Route path="/donate" component={DonatePage} />
-        <Route path="/contributors" component={ContributorsPage} />
         <div style={{ height: currentVideoSnippet.id ? "100px" : "50px" }} />
       </Suspense>
       {/* if the player is on then return 100px else 50px*/}

src/components/player/MainPlayer.js

@@ -309,7 +309,8 @@ const MainPlayer = ({ location, history }) => {
       setMinimized(true);
       history.push({
         pathname: "/play",
-        search: `?id=${currentVideoSnippet.id}`
+        search: `?id=${currentVideoSnippet.id}`,
+        state: { modal: true }
       });
     }
   };
@@ -565,9 +566,6 @@ const MainPlayer = ({ location, history }) => {
         }}
         id="audio-element"
         onLoadedData={updateSongDB}
-        onCanPlay={() => {
-          setAudioState("loaded");
-        }}
         // crossOrigin="anonymous"
         onPlay={() => setAudioState("playing")}
         onPlaying={() => setAudioState("playing")}

src/components/player/MiniMusicArt.js

@@ -20,7 +20,7 @@ const MiniMuiscArt = ({ playPause, data, playNext, emptyPlayer }) => {
     <div className={"mainContainer"}>
       <div className={"overflow-hidden"}>
         <div className="details">
-          <Typography variant="body1">{data.title.slice(0, 14)}</Typography>
+          <Typography variant="body1">{data.title}</Typography>
           <Typography variant="body2">{data.channelTitle}</Typography>
         </div>
         <div className="buttons">

src/components/player/MiniMusicStyle.css

@@ -5,6 +5,7 @@
   transform: translate3d(0, 0, 0);
 }
 
+
 .miniArtContainer {
   width: 90px;
   height: 90px;
@@ -39,6 +40,13 @@ div.details {
   margin: 5px 8px;
 }
 
+.mainContainer .details * {
+  width: 35%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 
 div.buttons {
   position: fixed;

src/components/player/MusicArt.js

@@ -142,7 +142,7 @@ const MusicArt = ({ data, rating, audioEl }) => {
         />
       </motion.div>
       <br />
-      <Typography color="primary" variant="h5" className="musicArtTitle">
+      <Typography color="primary" variant="h5" className="musicArtTitle" align="center">
         {shortTitle(data)}
       </Typography>
       <Typography color="primary" variant="subtitle1">