Skip to content

Commit

Permalink
Merge pull request #56 from stanleyowen/next
Browse files Browse the repository at this point in the history
Version 0.1.3
  • Loading branch information
stanleyowen authored Aug 29, 2021
2 parents ab655eb + 5c41fe1 commit 91de541
Show file tree
Hide file tree
Showing 13 changed files with 2,311 additions and 2,019 deletions.
11 changes: 11 additions & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
REACT_APP_VERSION = $npm_package_version
REACT_APP_API_KEY = ******************
REACT_APP_AUTH_DOMAIN = ******************
REACT_APP_DB_URL = ******************
REACT_APP_PROJECT_ID = ******************
REACT_APP_STORAGE_BUCKET = ******************
REACT_APP_SENDER_ID = ******************
REACT_APP_ID = ******************
REACT_APP_MEASUREMENT_ID = ******************
REACT_APP_ALGOLIA_ID = ******************
REACT_APP_ALGOLIA_API_KEY = ******************
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ build
debug.log
.netlify

.env
.DS_Store
.env
.env.local
.env.development
.env.development.local
.env.test.local
.env.production.local
Expand Down
18 changes: 10 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
{
"name": "lofi-player",
"version": "0.1.2",
"version": "0.1.3",
"private": true,
"dependencies": {
"@material-ui/core": "^4.12.3",
"@material-ui/lab": "^4.0.0-alpha.60",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/node": "^16.6.2",
"@types/node": "^16.7.4",
"@types/react": "^17.0.19",
"@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.8",
"algoliasearch": "^4.10.3",
"dotenv": "^10.0.0",
"firebase": "^8.9.1",
"algoliasearch": "^4.10.5",
"firebase": "^9.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"typescript": "^4.3.5",
"react-router-dom": "^5.2.1",
"react-scripts": "^4.0.3",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
Expand All @@ -45,5 +44,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"dotenv": "^10.0.0"
}
}
30 changes: 21 additions & 9 deletions src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,20 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
.sidebar {
width: 225px;
height: 100%;
padding: 10px;
position: fixed;
padding-top: 30px;
overflow-x: hidden;
box-sizing: border-box;
background: rgb(var(--white) / 40%);
}
#tabs {
height: 100%;
display: flex;
flex-direction: column;
}
#tabs .active { background: rgb(var(--gray) / 60%) }
#tabs :nth-child(3) { margin-top: auto }
.tab {
font-weight: 525;
color: rgb(var(--black) / 70%) !important;
Expand Down Expand Up @@ -123,12 +131,12 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
}
.card {
width: 100%;
border-radius: 5px;
transition: all .3s;
border-radius: 5px !important;
transition: all .3s !important;
box-sizing: border-box;
flex-wrap: nowrap !important;
background-color: rgb(var(--white) / 20%);
box-shadow: 0px 4px 8px rgb(var(--black) / 5%);
background-color: rgb(var(--white) / 20%) !important;
box-shadow: 0px 4px 8px rgb(var(--black) / 5%) !important;
}
.large-card {
width: 100%;
Expand All @@ -141,7 +149,7 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
background-color: rgb(var(--white) / 20%);
box-shadow: 0px 4px 8px rgb(var(--black) / 5%);
}
.card:hover { background-color: rgb(var(--white) / 50%) }
.card:hover { background-color: rgb(var(--white) / 50%) !important }
.large-card:hover { background-color: rgb(var(--white) / 50%) }
.card img {
border-top-left-radius: 5px;
Expand Down Expand Up @@ -179,10 +187,7 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
/* Properties */
.none { display: none !important }
button:disabled,
input:disabled {
cursor: not-allowed !important;
pointer-events: visible !important;
}
input:disabled { pointer-events: none !important }
.flex { display: flex; flex-wrap: wrap; }
.mrl-10 { margin: 0 10px; padding: 0; }
.rounded-corner { border-radius: 5px }
Expand All @@ -203,8 +208,10 @@ input:disabled {
.w-40 { width: 40% !important }
.w-50 { width: 50% !important }
.w-70 { width: 70% !important }
.w-80 { width: 80% !important; }
.w-100 { width: 100%; }
.p-10 { padding: 10px !important }
.p-15 { padding: 15px !important }
.m-10 { margin: 10px !important }
.mt-10 { margin-top: 10px !important }
.mt-30 { margin-top: 30px !important }
Expand All @@ -214,6 +221,10 @@ svg {
display: block;
margin: auto;
}
#version svg { margin: auto 0px; }
#version p { font-weight: normal; }
#version .MuiIconButton-root { padding: 10px !important; }
.small { font-size: 12px; font-weight: normal !important; }
button {
border: none;
cursor: pointer;
Expand Down Expand Up @@ -300,5 +311,6 @@ button {
@media only screen and (max-width: 700px) {
.col-3 { grid-template-columns: 100% }
.col-4 { grid-template-columns: 100% }
#version .w-50 { width: 100% !important; }
.search { width: 100%; }
}
3 changes: 1 addition & 2 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useState, useEffect, useCallback } from 'react'
import firebase from 'firebase/app'
import 'firebase/database'
import { BrowserRouter as Router } from 'react-router-dom'

Expand Down Expand Up @@ -38,7 +37,7 @@ export default function App() {
...properties,
previousTab: a.goBackward ? '' : properties.activeTab,
nextTab: a.goBackward ? properties.activeTab : '',
[a.id]: a.value,
[a.id]: a.value
})
, [properties])

Expand Down
59 changes: 59 additions & 0 deletions src/components/about.component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from 'react'
import { Button, Accordion, AccordionSummary } from '@material-ui/core'
import { AboutOutline, PrivacyPolicy, ExpandMoreIcon, License } from '../lib/icons.component'
import { version } from '../../package.json'

const About = ({ properties }: any) => {
return (
<div className="m-10" id="version">
<div className="flex w-50 card p-15">
<div className="flex w-80">
<AboutOutline />
<div className="ml-10">
<p>LoFi Player</p>
<p className="small">Version: {version}</p>
</div>
</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>
</div>
</AccordionSummary>
<p className="p-10">LoFi Player does not collect, store, share or publish any personal information.</p>
</Accordion>
<Accordion className="w-50 card mt-10">
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<div className="flex w-80">
<License />
<p className="ml-10">License</p>
</div>
</AccordionSummary>
<div className="p-10">
<p><b>MIT License</b></p>
<p className="mt-10"><b>Copyright (c) 2021 LoFi Player</b></p>
<p className="mt-10">Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:</p>
<p className="mt-10">The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.</p>
<p className="mt-10">THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.</p>
</div>
</Accordion>
</div>
)
}

export default About
5 changes: 4 additions & 1 deletion src/components/base.component.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import React from 'react'
import Home from './home.component'
import Search from './search.component'
import About from './about.component'

const BaseLayout = ({ song, config, properties, handleSong }: any) => {
return (
<div className="base">
{ properties.activeTab === 'home' ?
<Home properties={properties} handleSong={handleSong} config={config} song={song} /> :
<Search properties={properties} handleSong={handleSong} /> }
properties.activeTab === 'search' ?
<Search properties={properties} handleSong={handleSong} /> :
<About /> }
</div>
)
}
Expand Down
13 changes: 8 additions & 5 deletions src/components/home.component.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'
import firebase from 'firebase/app'
import { initializeApp } from 'firebase/app'
import { getDatabase, ref, onValue } from 'firebase/database'

const Home = ({ song, config, handleSong }: any) => {
const [greeting, setGreeting] = useState<string>()
Expand All @@ -22,15 +23,17 @@ const Home = ({ song, config, handleSong }: any) => {
}, [])

useEffect(() => {
firebase.apps.length ? firebase.app() : firebase.initializeApp(config)
firebase.database().ref().child('data').get()
.then(data => setData(data.val()))
.catch(err => console.log(err))
initializeApp(config)
onValue(ref(getDatabase(), 'data/'), (snapshot) => setData(snapshot.val()))
setTimeout(() =>
onValue(ref(getDatabase(), '.info/connected'), (snapshot) => snapshot.val() ? null : console.log("Client Disconnected from Server"))
, 5000)
}, [config])

useEffect(() => {
const btn = document.getElementById((song.title+song.author).replace(/\s/g, "-"))
song.playing ? btn?.classList.add('pause') : btn?.classList.remove('pause')
// eslint-disable-next-line
}, [song.playing])

return (
Expand Down
12 changes: 10 additions & 2 deletions src/components/navbar.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,16 @@ const Navbar = ({ properties, handleChange }: any) => {

return (
<div className="navbar">
<div className="mrl-10"><IconButton onClick={goBackward} disabled={property.disablePrevious} title="Go Back"><ChevronLeft /></IconButton></div>
<div className="mrl-10"><IconButton onClick={goForward} disabled={property.disableForward} title="Go Forward"><ChevronRight /></IconButton></div>
<div className="mrl-10">
<Tooltip title="Go Back"><span>
<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>
</span></Tooltip>
</div>
<div className="mrl-10">
<Tooltip title="View on GitHub" arrow>
<IconButton href="https://github.com/stanleyowen/lofi-player" className="p-10" target="_blank"><GitHub /></IconButton>
Expand Down
8 changes: 5 additions & 3 deletions src/components/search.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@ const Search = ({ properties }: any) => {
result: ''
})

const client = algoliasearch(String(process.env.REACT_APP_ALGOLIA_ID), String(process.env.REACT_APP_ALGOLIA_API_KEY))
useEffect(() => {
setData({ ...data, isFetching: true})
if(keyword) client.initIndex('music').search(keyword).then(({hits}) => setData({ ...data, isFetching: false, result: hits }))
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
}, [keyword])

if(keyword)
Expand All @@ -36,7 +38,7 @@ const Search = ({ properties }: any) => {
}
else if (data.result?.length > 0)
data.result?.map((music: any, index: any) => {
items.push(
return items.push(
<div className="m-10" key={index}>
<a className="large-card" href={music.link}>
<img src={music.image} alt={music.title} />
Expand Down
35 changes: 22 additions & 13 deletions src/components/sidebar.component.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
import { Button, Dialog, DialogActions, DialogContent, DialogContentText } from '@material-ui/core'
import { Beta, HomeOutline, HomeSolid, SearchSolid, SearchOutline } from '../lib/icons.component'
import { Button, Dialog, Tooltip, DialogActions, DialogContent, DialogContentText } from '@material-ui/core'
import { Beta, HomeOutline, HomeSolid, AboutSolid, AboutOutline, SearchSolid, SearchOutline } from '../lib/icons.component'

const SideBar = ({ handleChange, properties }: any) => {
const [isOpen, setDialog] = useState<boolean>(false)
Expand All @@ -21,24 +21,33 @@ const SideBar = ({ handleChange, properties }: any) => {

return (
<div className="sidebar">
<div className="m-10" id="tabs" onClick={switchTab}>
<div id="tabs" onClick={switchTab}>
{
['Home', 'Search'].map((tab, index) => {
const components: { [key: string]: any } = { HomeSolid, HomeOutline, SearchSolid, SearchOutline }
['Home', 'Search', 'About'].map((tab, index) => {
const components: { [key: string]: any } = { HomeSolid, HomeOutline, SearchSolid, SearchOutline, AboutSolid, AboutOutline }
const SolidIcon = components[`${tab}Solid`]
const OutlineIcon = components[`${tab}Outline`]
return (
<Button className="w-100 rounded-corner p-10 tab" id={tab.toLowerCase()} key={index}>
<div className="w-30">{properties.activeTab === tab.toLowerCase() ? <SolidIcon /> : <OutlineIcon />}</div>
<div className="w-70 left-align">{tab.toLowerCase()}</div>
</Button>
<Tooltip title={tab} enterDelay={500}>
<Button className="w-100 rounded-corner p-10 tab" id={tab.toLowerCase()} key={index}>
<div className="w-30">{properties.activeTab === tab.toLowerCase() ? <SolidIcon /> : <OutlineIcon />}</div>
<div className="w-70 left-align">{tab.toLowerCase()}</div>
</Button>
</Tooltip>
)
})
}
<Button className="w-100 rounded-corner p-10 tab" id="beta" onClick={() => setDialog(true)}>
<div className="w-30"><Beta /></div>
<div className="w-70 left-align">Beta</div>
</Button>
{
process.env.REACT_APP_CONTEXT === 'production' ?
(<Button className="w-100 rounded-corner p-10 tab" id="beta" onClick={() => setDialog(true)}>
<div className="w-30"><Beta /></div>
<div className="w-70 left-align">Beta</div>
</Button>) :
(<Button className="w-100 rounded-corner p-10 tab" id="beta" onClick={() => window.location.href = `${window.location.protocol}//${window.location.host.slice(6)}`}>
<div className="w-30"><Beta /></div>
<div className="w-70 left-align">Stable</div>
</Button>)
}
</div>

<Dialog open={isOpen} onClose={() => setDialog(false)}>
Expand Down
Loading

0 comments on commit 91de541

Please sign in to comment.