Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve App Design #95

Merged
merged 6 commits into from
Sep 20, 2021
Merged

Improve App Design #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
82fe0c7
Fixed Issue of Missing Active Attribute in Active Tab (#93)
stanleyowen Sep 19, 2021
25e9599
Improved Color Contrast for Active Tab
stanleyowen Sep 19, 2021
1ce7d84
Re-customize App Height
stanleyowen Sep 19, 2021
d3ae2cc
Added `enterDelay` and `enterNextDelay` props to `Tooltip` Component
stanleyowen Sep 20, 2021
3d9327d
Set `autocomplete` in search field to `false` (#96)
stanleyowen Sep 20, 2021
2287792
Use `Slider` Component to Replace Input type `Range` (#97)
stanleyowen Sep 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "lofi-player",
"version": "0.2.5",
"version": "0.3.2-beta",
"private": true,
"author": "Stanley Owen <stanleyowen06@gmail.com>",
"dependencies": {
Expand All @@ -11,7 +11,7 @@
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.0",
"@testing-library/user-event": "^13.2.1",
"@types/node": "^16.9.2",
"@types/node": "^16.9.4",
"@types/react": "^17.0.21",
"@types/react-dom": "^17.0.9",
"@types/react-router-dom": "^5.1.9",
Expand Down
18 changes: 11 additions & 7 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
--black: 0 0 0;
--white: 255 255 255;
--gray: 205 205 205;
--light-gray: 244 244 244;
--dark-gray: 56 56 56;
--light-gray: 244 244 244;
--blue: 25 118 210;
}

body {
Expand All @@ -13,7 +14,10 @@ body {
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}

/* App Background */
.backdrop {
Expand Down Expand Up @@ -98,7 +102,7 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
display: flex;
flex-direction: column;
}
#tabs .active { background: rgb(var(--gray) / 60%) }
#tabs .active { background: rgb(var(--blue) / 15%) }
#tabs :nth-child(3) { margin-top: auto }
.tab {
font-weight: 525;
Expand All @@ -109,7 +113,7 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
/* Navbar */
.navbar {
z-index: 99;
height: 80px;
height: 75px;
padding: 15px;
display: flex;
overflow: auto;
Expand All @@ -129,8 +133,8 @@ h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
}
.base {
overflow: auto;
margin-top: 80px;
height: calc(100% - 80px);
margin-top: 75px;
height: calc(100% - 75px);
}
.app-ui { height: calc(100% - 95px) }
.card {
Expand Down Expand Up @@ -276,7 +280,7 @@ button {

/* Controller */
.footer {
padding: 10px 20px;
padding: 10px 15px;
overflow: auto;
background: rgb(var(--white) / 60%);
color: rgb(var(--black));
Expand Down
5 changes: 3 additions & 2 deletions src/components/controls.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Slider, IconButton } from '@mui/material'
import React, { useState, useEffect } from 'react'
import { Audio, MutedAudio, SkipNext, SkipPrevious } from '../lib/icons.component'

Expand Down Expand Up @@ -53,14 +54,14 @@ const Controls = ({ song, handleSong }: any) => {
</div>
<div className="playback-bar">
<div className="progress-time center-align" id="current-duration">00:00</div>
<input type="range" className="progress-bar rounded-corner" max="100" value={property.progress} readOnly />
<Slider className="mrl-5" size="small" defaultValue={property.volume} value={property.progress} disableSwap={true} />
<div className="progress-time center-align">{parseTime(property.duration ? property.duration : 0)}</div>
</div>
</div>
<div className="w-30 flex center-flex">
<div className="w-50 audio">
<button onClick={() => handleChange('muted', !property.muted)}>{property.muted || property.volume === 0 ? MutedAudio() : Audio()}</button>
<input type="range" className="progress-bar rounded-corner m-10" max="100" value={property.volume} onChange={e => handleChange('volume', Number(e.target.value))} />
<Slider className="m-10" size="small" defaultValue={property.volume} value={property.volume} onChange={(_, value) => handleChange('volume', value)} />
</div>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/navbar.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,17 @@ const Navbar = ({ properties, handleChange }: any) => {
return (
<div className="navbar">
<div className="m-10-auto">
<Tooltip title="Go Back"><span>
<Tooltip title="Go Back" enterDelay={500} enterNextDelay={500}><div>
<IconButton onClick={goBackward} disabled={property.disablePrevious}><ChevronLeft /></IconButton>
</span></Tooltip>
</div></Tooltip>
</div>
<div className="m-10-auto">
<Tooltip title="Go Forward"><span>
<Tooltip title="Go Forward" enterDelay={500} enterNextDelay={500}><div>
<IconButton onClick={goForward} disabled={property.disableForward}><ChevronRight /></IconButton>
</span></Tooltip>
</div></Tooltip>
</div>
<div className="mrl-10">
<Tooltip title="View on GitHub" arrow>
<Tooltip title="View on GitHub" enterDelay={500} enterNextDelay={500}>
<IconButton href="https://github.com/stanleyowen/lofi-player" className="p-10" target="_blank"><GitHub /></IconButton>
</Tooltip>
</div>
Expand Down
7 changes: 2 additions & 5 deletions src/components/search.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,8 @@ const Search = ({ songData }: any) => {
return (
<div className="m-10">
<div className="flex">
<TextField label="Search" variant="outlined" className="search" value={keyword} onChange={e => setKeyword(e.target.value)} id="search-query" autoFocus />
<IconButton
className={(keyword ? null : 'none') + " p-10 close-btn"}
onClick={ClearQuery}
size="large">{Close()}</IconButton>
<TextField label="Search (Artists or Songs)" variant="outlined" className="search" value={keyword} onChange={e => setKeyword(e.target.value)} id="search-query" autoFocus autoComplete="off" />
<IconButton className={(keyword ? null : 'none') + " p-10 close-btn"} onClick={ClearQuery} size="large">{Close()}</IconButton>
</div>
<div className="mt-30 col-4" id="playlist">{items}</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/sidebar.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const SideBar = ({ handleChange, properties }: any) => {

useEffect(() => {
document.getElementById('tabs')?.childNodes.forEach(tab =>
(tab.childNodes[0] as HTMLElement).innerText.toLowerCase() === properties.activeTab ?
(tab.childNodes[1] as HTMLElement).innerText.toLowerCase() === properties.activeTab ?
(tab as HTMLElement).classList.add('active') :
(tab as HTMLElement).classList.remove('active')
)
Expand Down
2 changes: 1 addition & 1 deletion src/lib/icons.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function Close() {
return <svg width="1.2em" height="1.2em" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z" fill="currentColor"></path></svg>
}
export function GitHub() {
return <svg width="1.2em" height="1.2em" viewBox="0 0 1200 1200"><path d="M600 0C268.629 0 0 268.629 0 600s268.629 600 600 600s600-268.629 600-600S931.371 0 600 0zm0 65.332c295.289 0 534.668 239.379 534.668 534.668S895.289 1134.668 600 1134.668S65.332 895.289 65.332 600S304.711 65.332 600 65.332zM334.644 221.924c-15.228 44.26-20.507 92.298-6.885 134.253c-16.457 18.264-29.235 39.243-38.379 62.988c-24.371 77.026-18.418 175.425 34.937 234.961c18.743 20.548 44.172 37.441 76.172 50.684c31.999 13.241 73.127 21.688 123.413 25.343c-33.751 15.771-57.543 25.406-65.846 60.277c-37.646 25.156-83.427 19.153-116.602-8.203c-26.217-19.143-38.094-53.164-67.163-65.771c-1.828-1.826-7.539-3.188-17.139-4.103c-9.6-.913-17.146 1.811-22.632 8.203c-2.743 2.739-2.541 5.666.659 8.862c22.006 17.897 43.187 36.867 55.591 59.619c11.886 24.657 24.188 42.711 36.987 54.126c35.507 23.993 83.126 36.476 124.806 21.24c-4.86 29.329 8.252 75.13-1.393 101.367c-3.658 7.306-8.89 13.71-15.747 19.188c-6.111 5.962-25.06 13.42-21.24 22.56c1.828 4.108 8.219 6.631 19.189 7.544c24.151-.616 48.193-10.382 62.402-29.443c5.028-6.85 7.544-15.774 7.544-26.733V846.607c0-12.785 2.717-21.913 8.203-27.394c5.484-5.479 11.471-9.16 17.87-10.985v147.948c0 12.785-1.155 23.753-3.441 32.886c-2.286 9.134-4.324 15.536-6.152 19.189c-4.197 7.039-12.221 13.535-12.378 21.899c0 2.738 1.635 4.305 4.834 4.761c24.021-1.042 51.889-15.133 61.67-34.938c7.771-16.438 11.646-33.736 11.646-52.002V802.734h30.176v145.238c0 18.266 4.149 35.563 12.378 52.002s21.962 27.002 41.162 31.567c10.057 2.74 16.85 3.826 20.508 3.369c3.657-.457 5.291-2.021 4.834-4.761c-2.202-8.299-6.791-15.397-11.646-21.899c-6.4-8.219-9.596-25.591-9.596-52.075V808.229c6.4 1.825 12.588 5.507 18.53 10.985c5.942 5.479 8.862 14.607 8.862 27.394v112.279c0 10.959 2.515 19.885 7.544 26.733c15.283 19.437 38.314 29.297 62.401 29.443c10.973-.913 17.361-3.436 19.189-7.544c1.828-4.109.47-7.516-4.102-10.255s-10.281-6.824-17.14-12.305c-6.857-5.479-12.09-11.884-15.747-19.188c-4.104-47.109-.104-97.608-3.441-145.239c-6.589-51.979-26.597-69.079-66.504-88.989c47.543-3.653 86.633-12.376 117.261-26.074c91.558-44.484 116.875-113.258 117.261-205.443c-1.444-59.33-18.57-111.086-57.642-150.732c5.484-21.004 7.12-42.867 4.834-65.698c-2.286-22.831-7.115-43.405-14.43-61.67c-33.824 1.826-62.174 8.635-85.033 20.508c-22.857 11.873-39.31 21.957-49.365 30.176c-81.016-18.393-167.743-18.503-245.436 2.71c-39.748-32.517-89.018-50.632-135.784-53.396z" fill="currentColor"></path></svg>
return <svg width="1.1em" height="1.1em" viewBox="0 0 1200 1200"><path d="M600 0C268.629 0 0 268.629 0 600s268.629 600 600 600s600-268.629 600-600S931.371 0 600 0zm0 65.332c295.289 0 534.668 239.379 534.668 534.668S895.289 1134.668 600 1134.668S65.332 895.289 65.332 600S304.711 65.332 600 65.332zM334.644 221.924c-15.228 44.26-20.507 92.298-6.885 134.253c-16.457 18.264-29.235 39.243-38.379 62.988c-24.371 77.026-18.418 175.425 34.937 234.961c18.743 20.548 44.172 37.441 76.172 50.684c31.999 13.241 73.127 21.688 123.413 25.343c-33.751 15.771-57.543 25.406-65.846 60.277c-37.646 25.156-83.427 19.153-116.602-8.203c-26.217-19.143-38.094-53.164-67.163-65.771c-1.828-1.826-7.539-3.188-17.139-4.103c-9.6-.913-17.146 1.811-22.632 8.203c-2.743 2.739-2.541 5.666.659 8.862c22.006 17.897 43.187 36.867 55.591 59.619c11.886 24.657 24.188 42.711 36.987 54.126c35.507 23.993 83.126 36.476 124.806 21.24c-4.86 29.329 8.252 75.13-1.393 101.367c-3.658 7.306-8.89 13.71-15.747 19.188c-6.111 5.962-25.06 13.42-21.24 22.56c1.828 4.108 8.219 6.631 19.189 7.544c24.151-.616 48.193-10.382 62.402-29.443c5.028-6.85 7.544-15.774 7.544-26.733V846.607c0-12.785 2.717-21.913 8.203-27.394c5.484-5.479 11.471-9.16 17.87-10.985v147.948c0 12.785-1.155 23.753-3.441 32.886c-2.286 9.134-4.324 15.536-6.152 19.189c-4.197 7.039-12.221 13.535-12.378 21.899c0 2.738 1.635 4.305 4.834 4.761c24.021-1.042 51.889-15.133 61.67-34.938c7.771-16.438 11.646-33.736 11.646-52.002V802.734h30.176v145.238c0 18.266 4.149 35.563 12.378 52.002s21.962 27.002 41.162 31.567c10.057 2.74 16.85 3.826 20.508 3.369c3.657-.457 5.291-2.021 4.834-4.761c-2.202-8.299-6.791-15.397-11.646-21.899c-6.4-8.219-9.596-25.591-9.596-52.075V808.229c6.4 1.825 12.588 5.507 18.53 10.985c5.942 5.479 8.862 14.607 8.862 27.394v112.279c0 10.959 2.515 19.885 7.544 26.733c15.283 19.437 38.314 29.297 62.401 29.443c10.973-.913 17.361-3.436 19.189-7.544c1.828-4.109.47-7.516-4.102-10.255s-10.281-6.824-17.14-12.305c-6.857-5.479-12.09-11.884-15.747-19.188c-4.104-47.109-.104-97.608-3.441-145.239c-6.589-51.979-26.597-69.079-66.504-88.989c47.543-3.653 86.633-12.376 117.261-26.074c91.558-44.484 116.875-113.258 117.261-205.443c-1.444-59.33-18.57-111.086-57.642-150.732c5.484-21.004 7.12-42.867 4.834-65.698c-2.286-22.831-7.115-43.405-14.43-61.67c-33.824 1.826-62.174 8.635-85.033 20.508c-22.857 11.873-39.31 21.957-49.365 30.176c-81.016-18.393-167.743-18.503-245.436 2.71c-39.748-32.517-89.018-50.632-135.784-53.396z" fill="currentColor"></path></svg>
}
export function PrivacyPolicy() {
return <svg width="1.5em" height="1.5em" viewBox="0 0 48 48"><path d="M6 8.256L24.009 3L42 8.256v10.778A26.316 26.316 0 0 1 24.003 44h0A26.32 26.32 0 0 1 6 19.029V8.256z" stroke="currentColor" strokeWidth="4" strokeLinejoin="round" fill="none" fillRule="evenodd"></path></svg>
Expand Down
7 changes: 6 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2645,7 +2645,7 @@
resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==

"@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0", "@types/node@^16.9.2":
"@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0":
version "16.9.2"
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.2.tgz#81f5a039d6ed1941f8cc57506c74e7c2b8fc64b9"
integrity sha512-ZHty/hKoOLZvSz6BtP1g7tc7nUeJhoCf3flLjh8ZEv1vFKBWHXcnMbJMyN/pftSljNyy0kNW/UqI3DccnBnZ8w==
Expand All @@ -2655,6 +2655,11 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.17.tgz#4ec7b71bbcb01a4e55455b60b18b1b6a783fe31d"
integrity sha512-niAjcewgEYvSPCZm3OaM9y6YQrL2SEPH9PymtE6fuZAvFiP6ereCcvApGl2jKTq7copTIguX3PBvfP08LN4LvQ==

"@types/node@^16.9.4":
version "16.9.4"
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.4.tgz#a12f0ee7847cf17a97f6fdf1093cb7a9af23cca4"
integrity sha512-KDazLNYAGIuJugdbULwFZULF9qQ13yNWEBFnfVpqlpgAAo6H/qnM9RjBgh0A0kmHf3XxAKLdN5mTIng9iUvVLA==

"@types/normalize-package-data@^2.4.0":
version "2.4.1"
resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
Expand Down