Merge pull request #117 from stanleyowen/next

Version 0.4.5

package.json

@@ -1,19 +1,18 @@
 {
   "name": "lofi-player",
-  "version": "0.3.7",
+  "version": "0.4.5",
   "private": true,
   "author": "Stanley Owen <stanleyowen06@gmail.com>",
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@mui/lab": "^5.0.0-alpha.47",
-    "@mui/material": "^5.0.0",
-    "@types/node": "^16.9.6",
+    "@mui/material": "^5.0.1",
+    "@types/node": "^16.10.1",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.3.0",
     "electron-is-dev": "^2.0.0",
-    "firebase": "^9.0.2",
+    "firebase": "^9.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
@@ -24,11 +23,13 @@
   "homepage": "./",
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "build:win": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "release": "yarn build && electron-builder --publish=always",
     "build:electron": "node ./scripts/prebuild.js && yarn build && electron-builder && node ./scripts/postbuild.js",
+    "build:win:electron": "node ./scripts/prebuild.js && yarn build:win && electron-builder && node ./scripts/postbuild.js",
     "start:electron": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""
   },
   "build": {
@@ -70,9 +71,9 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
+    "@testing-library/react": "^12.1.1",
     "@testing-library/user-event": "^13.2.1",
-    "concurrently": "^6.2.1",
+    "concurrently": "^6.2.2",
     "cross-env": "^7.0.3",
     "dotenv": "^10.0.0",
     "electron": "^15.0.0",

src/App.css

@@ -103,6 +103,7 @@ h1, h2, h3, h4, h5, h6, p {
 }
 #tabs .active { background: rgb(var(--blue) / 15%) }
 #tabs :nth-child(3) { margin-top: auto }
+#tabs svg { font-size: 1.5em !important; }
 .tab {
 	font-weight: 525;
 	color: rgb(var(--black) / 70%) !important;
@@ -242,6 +243,9 @@ svg {
 	text-decoration: none;
 }
 #version a:hover { text-decoration: underline }
+#version svg { font-size: 1.2em !important }
+#version .MuiPaper-root:before{ display: none !important }
+
 .small { font-size: 12px; font-weight: normal !important; }
 button {
 	border: none;
@@ -310,16 +314,35 @@ button {
 /* Search */
 .search { width: 50% }
 
+/* Scroll Bar */
+::-webkit-scrollbar {
+	width: 15px;
+	background: transparent;
+}
+::-webkit-scrollbar-thumb {
+	background: rgb(var(--black) / 75%);
+	border-radius: 7px;
+	/* border-radius: calc(15px / 2); */
+	background-clip: content-box;
+	border: 4px solid transparent;
+}
+::-webkit-scrollbar-thumb:hover {
+	background: rgb(var(--black));
+	background-clip: content-box;
+}
+
 @media only screen and (max-width: 1200px) {
 	.col-3 { grid-template-columns: 50% 50% }
 	#version .w-50 { width: 70% !important }
+	.w-50.audio { width: 70% !important }
 	.col-4 { grid-template-columns: 33.3% 33.3% 33.3% }
 	.search { width: 60% }
 }
 @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 }
+	.w-50.audio { width: 100% !important }
 }
 @media only screen and (max-width: 700px) {
 	.search { width: 100% }

src/components/about.component.tsx

@@ -1,9 +1,22 @@
 import React from 'react'
 import { Button, Accordion, AccordionSummary } from '@mui/material'
-import { AboutOutline, PrivacyPolicy, ExpandMoreIcon, License } from '../lib/icons.component'
+
 import { version } from '../../package.json'
+import { Themes, License, AboutOutline, PrivacyPolicy, Expand } from '../lib/icons.component'
 
 const About = ({ properties }: any) => {
+    const setTheme = (url: string | Boolean) => {
+        const background = document.getElementById('backdrop-image')
+        if(url)
+            import (`../../src/img/${url}`)
+            .then(image => {
+                if(background) background.style.background = `url(${image.default})`
+                // localStorage.setItem('theme-session', )
+            })
+            .catch(() => console.log('Error in Rendering Image'))
+        else background?.removeAttribute('style')
+    }
+
     return (
         <div className="m-10" id="version">
             <div className="flex w-50 card p-15">
@@ -16,12 +29,27 @@ const About = ({ properties }: any) => {
                 </div>
                 <Button variant="outlined" onClick={() => navigator.clipboard.writeText(`Version: ${version}`)}>Copy</Button>
             </div>
+
             <Accordion className="w-50 card mt-10">
-                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <div className="flex w-80">
-                    <PrivacyPolicy />
-                    <p className="ml-10">Privacy Policy</p>
+                <AccordionSummary expandIcon={<Expand />}>
+                    <div className="flex w-80">
+                        <Themes />
+                        <p className="ml-10">Themes</p>
+                    </div>
+                </AccordionSummary>
+                <div className="p-10">
+                    <Button onClick={() => setTheme(false)}>Default</Button>
+                    <Button onClick={() => setTheme('a9d4d30d6b483ee638a0dddab5bb047e.webp')}>Nature</Button>
+                    <Button onClick={() => setTheme('d14c82db65be85a729c042492447dc5d.webp')}>Sunset</Button>
                 </div>
+            </Accordion>
+
+            <Accordion className="w-50 card mt-10">
+                <AccordionSummary expandIcon={<Expand />}>
+                    <div className="flex w-80">
+                        <PrivacyPolicy />
+                        <p className="ml-10">Privacy Policy</p>
+                    </div>
                 </AccordionSummary>
                 <div className="p-10">
                     <p><i>Personal Information Collection</i></p>
@@ -30,8 +58,9 @@ const About = ({ properties }: any) => {
                     <p>LoFi Player does not collect, store, share or publish any non-personal information.</p>
                 </div>
             </Accordion>
+
             <Accordion className="w-50 card mt-10">
-                <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <AccordionSummary expandIcon={<Expand />}>
                     <div className="flex w-80">
                         <License />
                         <p className="ml-10">License</p>

src/components/app.component.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { initializeApp } from 'firebase/app'
 import { getDatabase, ref, onValue } from 'firebase/database'
-import { Alert } from '@mui/lab'
-import { Slide, Snackbar } from '@mui/material'
+import { Alert, Slide, Snackbar, LinearProgress, SlideProps } from '@mui/material'
 
 import Navbar from './navbar.component'
 import BaseLayout from './base.component'

src/components/home.component.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Skeleton } from '@mui/lab'
+import { Skeleton } from '@mui/material'
 
 const Home = ({ song, songData, handleSong }: any) => {
     const [greeting, setGreeting] = useState<string>()

src/components/navbar.component.tsx

@@ -15,19 +15,21 @@ const Navbar = ({ properties, handleChange }: any) => {
         })
     }, [properties])
 
-    const goBackward = (e: React.MouseEvent<HTMLElement>) => handleChange({ id: 'activeTab', value: properties.previousTab, goBackward: true })
-    const goForward = (e: React.MouseEvent<HTMLElement>) => handleChange({ id: 'activeTab', value: properties.nextTab, goForward: true })
+    const triggerAction = (type: 'next' | 'previous') => {
+        if(type === 'previous') handleChange({ id: 'activeTab', value: properties.previousTab, goBackward: true })
+        else handleChange({ id: 'activeTab', value: properties.nextTab, goForward: true })
+    }
 
     return (
         <div className="navbar">
             <div className="m-10-auto">
                 <Tooltip title="Go Back" enterDelay={500} enterNextDelay={500}><div>
-                    <IconButton onClick={goBackward} disabled={property.disablePrevious}><ChevronLeft /></IconButton>
+                    <IconButton onClick={() => triggerAction('previous')} disabled={property.disablePrevious}><ChevronLeft /></IconButton>
                 </div></Tooltip>
             </div>
             <div className="m-10-auto">
                 <Tooltip title="Go Forward" enterDelay={500} enterNextDelay={500}><div>
-                    <IconButton onClick={goForward} disabled={property.disableForward}><ChevronRight /></IconButton>
+                    <IconButton onClick={() => triggerAction('next')} disabled={property.disableForward}><ChevronRight /></IconButton>
                 </div></Tooltip>
             </div>
             <div className="mrl-10">

src/components/search.component.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { Skeleton } from '@mui/lab'
 import { Close } from '../lib/icons.component'
-import { TextField, IconButton } from '@mui/material'
+import { Skeleton, TextField, IconButton } from '@mui/material'
 
 const Search = ({ songData }: any) => {
     const items: any = []

src/components/sidebar.component.tsx

@@ -59,7 +59,7 @@ const SideBar = ({ handleChange, properties }: any) => {
                 </DialogContent>
                 <DialogActions>
                     <Button onClick={() => setDialog(false)}>Cancel</Button>
-                    <Button color="secondary" onClick={() => window.location.href = String(process.env.REACT_APP_BETA)}>Continue</Button>
+                    <Button color="error" onClick={() => window.location.href = String(process.env.REACT_APP_BETA)}>Continue</Button>
                 </DialogActions>
             </Dialog>
         </div>