Skip to content

Commit c3153eb

Browse files
stanleyowenstanleyowen
authored
Merge pull request #126 from stanleyowen/next
Version 0.6.4
2 parents 7eb97c6 + 5d1768c commit c3153eb

13 files changed

+128
-49
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lofi-player",
3-
"version": "0.4.5",
3+
"version": "0.6.4",
44
"private": true,
55
"author": "Stanley Owen <stanleyowen06@gmail.com>",
66
"dependencies": {

‎src/App.css‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ h1, h2, h3, h4, h5, h6, p {
6262
border: 1px solid rgb(var(--black));
6363
}
6464
.backdrop-image {
65-
background: url('./img/d229bbf31eaeebc7c88897732d8b932d.webp') center/cover no-repeat;
65+
background: url('https://user-images.githubusercontent.com/69080584/135237771-30c727d6-e88f-48e1-a65c-4fcef9e91113.png') center/cover no-repeat;
6666
-webkit-filter: blur(25px);
6767
filter: blur(25px);
6868
-webkit-transform: scale(1.1);
@@ -81,9 +81,9 @@ h1, h2, h3, h4, h5, h6, p {
8181
height: 100%;
8282
position: absolute;
8383
background-blend-mode: normal, color, luminosity;
84-
background: linear-gradient(0deg, rgba(239, 239, 239, 0.3), rgba(239, 239, 239, 0.3)), rgba(239, 239, 239, 0.95) url('./img/aaddc3454ccbefbb2d8d8461f8f7f481.webp') center/196px repeat;
85-
background: -o-linear-gradient(bottom, rgba(239, 239, 239, 0.3), rgba(239, 239, 239, 0.3)), rgba(239, 239, 239, 0.95) url('./img/aaddc3454ccbefbb2d8d8461f8f7f481.webp') center/196px repeat;
86-
background: -webkit-gradient(linear, left bottom, left top, from(rgba(239, 239, 239, 0.3)), to(rgba(239, 239, 239, 0.3))), rgba(239, 239, 239, 0.95) url('./img/aaddc3454ccbefbb2d8d8461f8f7f481.webp') center/196px repeat;
84+
background: linear-gradient(0deg, rgba(239, 239, 239, 0.3), rgba(239, 239, 239, 0.3)), rgba(239, 239, 239, 0.95) url('https://user-images.githubusercontent.com/69080584/135238252-5fd29825-32dc-4035-bd75-98eabc473ac4.png') center/196px repeat;
85+
background: -o-linear-gradient(bottom, rgba(239, 239, 239, 0.3), rgba(239, 239, 239, 0.3)), rgba(239, 239, 239, 0.95) url('https://user-images.githubusercontent.com/69080584/135238252-5fd29825-32dc-4035-bd75-98eabc473ac4.png') center/196px repeat;
86+
background: -webkit-gradient(linear, left bottom, left top, from(rgba(239, 239, 239, 0.3)), to(rgba(239, 239, 239, 0.3))), rgba(239, 239, 239, 0.95) url('https://user-images.githubusercontent.com/69080584/135238252-5fd29825-32dc-4035-bd75-98eabc473ac4.png') center/196px repeat;
8787
}
8888

8989
/* Sidebar */
@@ -208,6 +208,10 @@ input:disabled { pointer-events: none !important }
208208
.center-align { text-align: center }
209209
.center-vert { margin: auto 0 !important; }
210210
.center-flex { align-items: center; justify-content: center; }
211+
.align-right {
212+
margin-left: auto !important;
213+
margin-right: 0 !important;
214+
}
211215
.warning {
212216
color: red;
213217
font-weight: bold;
@@ -311,6 +315,10 @@ button {
311315
align-items: center;
312316
}
313317

318+
/* Settings */
319+
#settings .MuiBox-root { padding: 0px !important }
320+
#settings svg { font-size: 1.5em }
321+
314322
/* Search */
315323
.search { width: 50% }
316324

‎src/components/about.component.tsx‎

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,49 +2,23 @@ import React from 'react'
22
import { Button, Accordion, AccordionSummary } from '@mui/material'
33

44
import { version } from '../../package.json'
5-
import { Themes, License, AboutOutline, PrivacyPolicy, Expand } from '../lib/icons.component'
5+
import { License, About as AboutIcon, PrivacyPolicy, Expand } from '../lib/icons.component'
66

7-
const About = ({ properties }: any) => {
8-
const setTheme = (url: string | Boolean) => {
9-
const background = document.getElementById('backdrop-image')
10-
if(url)
11-
import (`../../src/img/${url}`)
12-
.then(image => {
13-
if(background) background.style.background = `url(${image.default})`
14-
// localStorage.setItem('theme-session', )
15-
})
16-
.catch(() => console.log('Error in Rendering Image'))
17-
else background?.removeAttribute('style')
18-
}
19-
7+
const About = () => {
208
return (
219
<div className="m-10" id="version">
22-
<div className="flex w-50 card p-15">
10+
<div className="flex w-100 card p-15">
2311
<div className="flex w-80">
24-
<AboutOutline />
12+
<AboutIcon />
2513
<div className="ml-10">
2614
<p>LoFi Player</p>
2715
<p className="small">Version: {version}</p>
2816
</div>
2917
</div>
30-
<Button variant="outlined" onClick={() => navigator.clipboard.writeText(`Version: ${version}`)}>Copy</Button>
18+
<Button variant="outlined" onClick={() => navigator.clipboard.writeText(`Version: ${version}`)} className="align-right">Copy</Button>
3119
</div>
3220

33-
<Accordion className="w-50 card mt-10">
34-
<AccordionSummary expandIcon={<Expand />}>
35-
<div className="flex w-80">
36-
<Themes />
37-
<p className="ml-10">Themes</p>
38-
</div>
39-
</AccordionSummary>
40-
<div className="p-10">
41-
<Button onClick={() => setTheme(false)}>Default</Button>
42-
<Button onClick={() => setTheme('a9d4d30d6b483ee638a0dddab5bb047e.webp')}>Nature</Button>
43-
<Button onClick={() => setTheme('d14c82db65be85a729c042492447dc5d.webp')}>Sunset</Button>
44-
</div>
45-
</Accordion>
46-
47-
<Accordion className="w-50 card mt-10">
21+
<Accordion className="w-100 card mt-10">
4822
<AccordionSummary expandIcon={<Expand />}>
4923
<div className="flex w-80">
5024
<PrivacyPolicy />
@@ -59,7 +33,7 @@ const About = ({ properties }: any) => {
5933
</div>
6034
</Accordion>
6135

62-
<Accordion className="w-50 card mt-10">
36+
<Accordion className="w-100 card mt-10">
6337
<AccordionSummary expandIcon={<Expand />}>
6438
<div className="flex w-80">
6539
<License />

‎src/components/base.component.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import React from 'react'
2+
23
import Home from './home.component'
34
import Search from './search.component'
4-
import About from './about.component'
5+
import Settings from './settings.component'
56

67
const BaseLayout = ({ song, config, properties, songData, handleSong }: any) => {
78
return (
89
<div className="base">
910
{ properties.activeTab === 'home' ?
10-
<Home properties={properties} handleSong={handleSong} config={config} song={song} songData={songData} /> :
11-
properties.activeTab === 'search' ?
12-
<Search properties={properties} handleSong={handleSong} config={config} songData={songData} /> :
13-
<About /> }
11+
<Home properties={properties} handleSong={handleSong} config={config} song={song} songData={songData} /> :
12+
properties.activeTab === 'search' ?
13+
<Search properties={properties} handleSong={handleSong} config={config} songData={songData} /> :
14+
<Settings /> }
1415
</div>
1516
)
1617
}

‎src/components/preferences.component.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
import { Button, Accordion, AccordionSummary } from '@mui/material'
3+
4+
import Theme from '../lib/theme.json'
5+
import { Themes, Expand } from '../lib/icons.component'
6+
7+
const About = () => {
8+
const setTheme = (url: string | Boolean) => {
9+
const background = document.getElementById('backdrop-image')
10+
if(url && background) background.style.background = `url(${url})`
11+
else background?.removeAttribute('style')
12+
}
13+
14+
return (
15+
<div className="m-10" id="version">
16+
<Accordion className="w-100 card mt-10">
17+
<AccordionSummary expandIcon={<Expand />}>
18+
<div className="flex w-80">
19+
<Themes />
20+
<p className="ml-10">Themes</p>
21+
</div>
22+
</AccordionSummary>
23+
<div className="p-10">
24+
{
25+
Theme.map(theme => {
26+
return <Button onClick={() => setTheme(theme.image)}>
27+
{theme.type}
28+
</Button>
29+
})
30+
}
31+
</div>
32+
</Accordion>
33+
</div>
34+
)
35+
}
36+
37+
export default About

‎src/components/settings.component.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { useState } from 'react'
2+
import { Tab, Tabs } from '@mui/material'
3+
4+
import About from './about.component'
5+
import Preferences from './preferences.component'
6+
import { About as AboutIcon, Preferences as PreferencesIcon } from '../lib/icons.component'
7+
8+
interface TabPanelProps {
9+
children?: React.ReactNode;
10+
index: number,
11+
value: number
12+
}
13+
function TabPanel(props: TabPanelProps) {
14+
const { children, value, index, ...other } = props
15+
return (
16+
<div role="tabpanel" hidden={value !== index} id={`tabpanel-${index}`} {...other} className="w-80">
17+
{
18+
value === index && (<div>{children}</div>)
19+
}
20+
</div>
21+
)
22+
}
23+
24+
const Settings = () => {
25+
const [tabIndex, setTabIndex] = useState<number>(0)
26+
27+
return (
28+
<div className="flex-nowrap w-100" id="settings">
29+
<Tabs orientation="vertical" value={tabIndex} onChange={(_, index: number) => setTabIndex(index)} className="w-20">
30+
<Tab icon={<PreferencesIcon />} label="Preferences" />
31+
<Tab icon={<AboutIcon />} label="About" />
32+
</Tabs>
33+
<TabPanel value={tabIndex} index={0}><Preferences /></TabPanel>
34+
<TabPanel value={tabIndex} index={1}><About /></TabPanel>
35+
</div>
36+
)
37+
}
38+
39+
export default Settings

‎src/components/sidebar.component.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useState } from 'react'
22
import { Button, Dialog, Tooltip, DialogActions, DialogContent, DialogContentText } from '@mui/material'
3-
import { Beta, HomeSolid, HomeOutline, AboutSolid, AboutOutline, SearchSolid, SearchOutline } from '../lib/icons.component'
3+
import { Beta, HomeSolid, HomeOutline, SettingsSolid, SettingsOutline, SearchSolid, SearchOutline } from '../lib/icons.component'
44

55
const SideBar = ({ handleChange, properties }: any) => {
66
const [isOpen, setDialog] = useState<boolean>(false)
@@ -21,8 +21,8 @@ const SideBar = ({ handleChange, properties }: any) => {
2121
<div className="sidebar">
2222
<div id="tabs">
2323
{
24-
['Home', 'Search', 'About'].map((tab, index) => {
25-
const components: { [key: string]: any } = { HomeSolid, HomeOutline, SearchSolid, SearchOutline, AboutSolid, AboutOutline }
24+
['Home', 'Search', 'Settings'].map((tab, index) => {
25+
const components: { [key: string]: any } = { HomeSolid, HomeOutline, SearchSolid, SearchOutline, SettingsSolid, SettingsOutline }
2626
const SolidIcon = components[`${tab}Solid`]
2727
const OutlineIcon = components[`${tab}Outline`]
2828
return (

‎src/img/a9d4d30d6b483ee638a0dddab5bb047e.webp‎

-92.2 KB
Binary file not shown.

‎src/img/aaddc3454ccbefbb2d8d8461f8f7f481.webp‎

-31.7 KB
Binary file not shown.

‎src/img/d14c82db65be85a729c042492447dc5d.webp‎

-31.5 KB
Binary file not shown.

0 commit comments

Comments
 (0)