Merge pull request #68 from stanleyowen/next

Version 0.2.1

Author: stanleyowen

.gitignore

@@ -16,6 +16,7 @@ debug.log
 .env.production.local
 
 **/img/*[.png][.jpg]
+dist
 docs
 node_modules
 dist

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lofi-player",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": true,
   "author": "Stanley Owen <stanleyowen06@gmail.com>",
   "dependencies": {
@@ -9,14 +9,13 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@types/node": "^16.7.4",
+    "@types/node": "^16.7.10",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",
-    "algoliasearch": "^4.10.5",
     "cross-env": "^7.0.3",
     "electron-is-dev": "^2.0.0",
-    "firebase": "^9.0.0",
+    "firebase": "^9.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.1",

src/App.css

@@ -123,10 +123,15 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
 .navbar div.mrl-10:last-child { margin-left: auto }
 
 /* Base Layout */
-.app { margin-left: 225px }
+.app {
+	display: flex;
+	height: 100vh;
+	flex-direction: column;
+	margin-left: 225px;
+}
 .base { margin-top: 100px }
 .app-ui {
-	height: 84vh;
+	flex: 9;
 	overflow: auto;
 }
 .card {
@@ -208,7 +213,7 @@ input:disabled { pointer-events: none !important }
 .w-40 { width: 40% !important }
 .w-50 { width: 50% !important }
 .w-70 { width: 70% !important }
-.w-80 { width: 80% !important; }
+.w-80 { width: 80% !important }
 .w-100 { width: 100%; }
 .p-10 { padding: 10px !important }
 .p-15 { padding: 15px !important }
@@ -218,8 +223,8 @@ input:disabled { pointer-events: none !important }
 .ml-10 { margin-left: 10px !important }
 .m-auto { margin: auto !important }
 svg {
-	display: block;
 	margin: auto;
+	display: block;
 }
 #version svg { margin: auto 0px; }
 #version p { font-weight: normal; }
@@ -301,16 +306,24 @@ button {
 }
 
 /* Search */
-.search { width: 50%; }
+.search { width: 50% }
 
 @media only screen and (max-width: 1200px) {
 	.col-3 { grid-template-columns: 50% 50% }
 	.col-4 { grid-template-columns: 33.3% 33.3% 33.3% }
-	.search { width: 60%; }
+	.search { width: 60% }
 }
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: 800px) {
 	.col-3 { grid-template-columns: 100% }
+	.col-4 { grid-template-columns: 50% 50% }
+	#version .w-50 { width: 90% !important }
+}
+@media only screen and (max-width: 700px) {
+	.search { width: 100% }
+	.navbar div.mrl-10:last-child {
+		display: none;
+		visibility: hidden;
+	}
 	.col-4 { grid-template-columns: 100% }
-	#version .w-50 { width: 100% !important; }
-	.search { width: 100%; }
+	#version .w-50 { width: 100% !important }
 }

src/components/base.component.tsx

@@ -9,7 +9,7 @@ const BaseLayout = ({ song, config, properties, handleSong }: any) => {
             { properties.activeTab === 'home' ?
                     <Home properties={properties} handleSong={handleSong} config={config} song={song} /> :
                     properties.activeTab === 'search' ?
-                        <Search properties={properties} handleSong={handleSong} /> :
+                        <Search properties={properties} handleSong={handleSong} config={config} /> :
                         <About /> }
         </div>
     )

src/components/home.component.tsx

@@ -24,7 +24,15 @@ const Home = ({ song, config, handleSong }: any) => {
 
     useEffect(() => {
         initializeApp(config)
-        onValue(ref(getDatabase(), 'data/'), (snapshot) => setData(snapshot.val()))
+        onValue(ref(getDatabase(), 'data-dev/'), (snapshot) => {
+            var rawData = snapshot.val(), index = rawData.length, randIndex
+            while(index !== 0) {
+                randIndex = Math.floor(Math.random() * index)
+                index--
+                [rawData[index], rawData[randIndex]] = [rawData[randIndex], rawData[index]]
+            }
+            setData(rawData)
+        })
         setTimeout(() =>
             onValue(ref(getDatabase(), '.info/connected'), (snapshot) => snapshot.val() ? null : console.log("Client Disconnected from Server"))
         , 5000)
@@ -41,13 +49,14 @@ const Home = ({ song, config, handleSong }: any) => {
             <h2 className="m-10">Good {greeting}</h2>
             <div className="col-3" id="recent-playlist">
                 {
-                    data?.music ? data.music.map((album: any, index: number) => {
+                    data ? data.map((song: any, index: number) => {
+                        if(index > 5) return;
                         return (
                             <div className="m-10" key={index}>
-                                <a className="card flex" href={album.link}>
-                                    <img src={album.image} alt={album.title} />
-                                    <p className="m-auto w-50">{album.title}</p>
-                                    <button className="play-btn m-auto" onClick={e => triggerAudio(e, album)} id={(album.title+album.author).replace(/\s/g, "-")}></button>
+                                <a className="card flex" href={song.link}>
+                                    <img src={song.image} alt={song.title} />
+                                    <p className="m-auto w-50">{song.title}</p>
+                                    <button className="play-btn m-auto" onClick={e => triggerAudio(e, song)} id={(song.title+song.author).replace(/\s/g, "-")}></button>
                                 </a>
                             </div>
                         )
@@ -56,17 +65,18 @@ const Home = ({ song, config, handleSong }: any) => {
             </div>
             <div className="mt-30 col-4" id="playlist">
                 {
-                    data?.album ? data.album.map((album: any, index: number) => {
+                    data ? data.map((song: any, index: number) => {
+                        if(index < 6 || index >= 14) return;
                         return (
                             <div className="m-10" key={index}>
-                                <a className="large-card" href={album.link}>
-                                    <img src={album.image} alt={album.title} />
+                                <a className="large-card" href={song.link}>
+                                    <img src={song.image} alt={song.title} />
                                     <div className="flex">
                                         <div className="m-auto w-70">
-                                            <h3 className="mt-10">{album.title}</h3>
-                                            <p className="author">{album.author}</p>
+                                            <h3 className="mt-10">{song.title}</h3>
+                                            <p className="author">{song.author}</p>
                                         </div>
-                                        <button className="play-btn m-auto" onClick={e => triggerAudio(e, album)} id={(album.title+album.author).replace(/\s/g, "-")}></button>
+                                        <button className="play-btn m-auto" onClick={e => triggerAudio(e, song)} id={(song.title+song.author).replace(/\s/g, "-")}></button>
                                     </div>
                                 </a>
                             </div>

src/components/navbar.component.tsx

@@ -22,12 +22,12 @@ const Navbar = ({ properties, handleChange }: any) => {
         <div className="navbar">
             <div className="mrl-10">
                 <Tooltip title="Go Back"><span>
-                        <IconButton onClick={goBackward} disabled={property.disablePrevious}><ChevronLeft /></IconButton>
+                    <IconButton onClick={goBackward} disabled={property.disablePrevious}><ChevronLeft /></IconButton>
                 </span></Tooltip>
             </div>
             <div className="mrl-10">
                 <Tooltip title="Go Forward"><span>
-                        <IconButton onClick={goForward} disabled={property.disableForward}><ChevronRight /></IconButton>
+                    <IconButton onClick={goForward} disabled={property.disableForward}><ChevronRight /></IconButton>
                 </span></Tooltip>
             </div>
             <div className="mrl-10">

src/components/search.component.tsx

@@ -1,28 +1,38 @@
 import React, { useState, useEffect } from 'react'
-import algoliasearch from 'algoliasearch'
 import { Skeleton } from '@material-ui/lab'
+import { initializeApp } from 'firebase/app'
 import { Close } from '../lib/icons.component'
 import { TextField, IconButton } from '@material-ui/core'
+import { getDatabase, ref, onValue } from 'firebase/database'
 
-const Search = ({ properties }: any) => {
+const Search = ({ properties, config }: any) => {
     const items: any = []
+    const [results, setResult] = useState<any>()
+    const [rawData, setRawData] = useState<any>()
     const [keyword, setKeyword] = useState<string>('')
-    const [data, setData] = useState<any>({
-        isFetching: false,
-        keyword: '',
-        result: ''
-    })
+    const [isFetching, setFetching] = useState<boolean>(false)
 
     useEffect(() => {
-        setData({ ...data, isFetching: true})
-        if(keyword)
-            algoliasearch(String(process.env.REACT_APP_ALGOLIA_ID), String(process.env.REACT_APP_ALGOLIA_API_KEY)).initIndex('music').search(keyword)
-            .then(({ hits }) => setData({ ...data, isFetching: false, result: hits }))
-            // eslint-disable-next-line
+        onValue(ref(getDatabase(), 'data-dev/'), (snapshot) => setRawData(snapshot.val()))
+    }, [config])
+
+    useEffect(() => {
+        setFetching(true)
+        if(keyword) {
+            var result: any = []
+            for (let i=0; i<rawData.length; i++) {
+                if(String(rawData[i].title).toLowerCase().includes(keyword)) {
+                     result.push(rawData[i])
+                }
+            }
+            setResult(result)
+        }
+        setFetching(false)
+        // eslint-disable-next-line
     }, [keyword])
 
     if(keyword)
-        if(data.result?.length === 0 && data.isFetching)
+        if(results?.length === 0 && isFetching)
             for(let i=0; i<4; i++) {
                 items.push(
                     <div className="m-10" key={i}>
@@ -36,8 +46,8 @@ const Search = ({ properties }: any) => {
                     </div>
                 )
             }
-        else if (data.result?.length > 0)
-            data.result?.map((music: any, index: any) => {
+        else if (results?.length > 0)
+            results.map((music: any, index: any) => {
                 return items.push(
                     <div className="m-10" key={index}>
                         <a className="large-card" href={music.link}>
@@ -53,7 +63,7 @@ const Search = ({ properties }: any) => {
                     </div>
                 )
             })
-        else if(!data.isFetching && data.result?.length === 0) items.push(<div>No Results Found for <b>{keyword}</b></div>)
+        else if(!isFetching && results?.length === 0) items.push(<div>No Results Found for <b>{keyword}</b></div>)
 
     const ClearQuery = (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault()

src/components/sidebar.component.tsx

@@ -28,8 +28,8 @@ const SideBar = ({ handleChange, properties }: any) => {
                         const SolidIcon = components[`${tab}Solid`]
                         const OutlineIcon = components[`${tab}Outline`]
                         return (
-                            <Tooltip title={tab} enterDelay={500}>
-                                <Button className="w-100 rounded-corner p-10 tab" id={tab.toLowerCase()} key={index}>
+                            <Tooltip title={tab} enterDelay={500} enterNextDelay={500} key={index}>
+                                <Button className="w-100 rounded-corner p-10 tab" id={tab.toLowerCase()}>
                                     <div className="w-30">{properties.activeTab === tab.toLowerCase() ? <SolidIcon /> : <OutlineIcon />}</div>
                                     <div className="w-70 left-align">{tab.toLowerCase()}</div>
                                 </Button>