Skip to content

Commit d65cad5

Browse files
firedev99firedev99
committed
playlist updated
1 parent ce96052 commit d65cad5

32 files changed

+724
-184
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"@testing-library/react": "^11.1.0",
88
"@testing-library/user-event": "^12.1.10",
99
"axios": "^0.21.1",
10+
"lodash": "^4.17.21",
1011
"prop-types": "^15.7.2",
1112
"react": "^17.0.2",
1213
"react-dom": "^17.0.2",
@@ -40,4 +41,4 @@
4041
]
4142
},
4243
"proxy": "http://localhost:4000"
43-
}
44+
}

‎src/App.js

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { Route } from "react-router-dom";
33
import axios from "axios";
44
// pages
55
import { HomePage, SearchPage } from "./pages";
6+
// templates
7+
import { PlaylistTemplate } from './templates'
68
// components
79
import Layout from "./components/layout";
810
// utils
@@ -82,6 +84,7 @@ function App() {
8284
<Layout>
8385
<Route path='/' exact component={HomePage} />
8486
<Route path='/search' component={SearchPage} />
87+
<Route path="/playlist/:id" component={PlaylistTemplate} />
8588
</Layout>
8689
</PlaylistContext.Provider>
8790
</UserContext.Provider>

‎src/components/header/index.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,13 @@ import { ChevronDownIcon } from "../../helpers/icons";
1111
// styled-components
1212
import { Wrapper, LocationNavigators, Navigations, UserNavigators, DisplayPicture } from "./styles/headerStyles";
1313

14-
export default function Header() {
14+
export default function Header({ bg = 'transperant' }) {
1515
const menuRef = useRef(null);
1616
const [toggle, setToggle] = useState(false);
1717

1818
const auth = useContext(LoginContext);
1919
const { country, display_name, images, id } = useContext(UserContext);
2020

21-
2221
const escKey = useKeypress('Escape');
2322
useOnclickOutside(menuRef, () => setToggle(false));
2423

@@ -29,16 +28,16 @@ export default function Header() {
2928
}, [escKey])
3029

3130
return (
32-
<Wrapper>
31+
<Wrapper style={{ background: bg }}>
3332
<LocationNavigators />
3433
{auth ? (
3534
<UserNavigators ref={menuRef} style={{ backgroundColor: toggle && `rgba(179, 179, 179, 0.15)` }} onClick={() => setToggle(!toggle)}>
3635
<DisplayPicture>
37-
<img src={images && images[0].url} alt={`user-dp`} />
36+
<img src={images && images[0].url} alt='user-dp' loading="eager" />
3837
</DisplayPicture>
3938
<span>{display_name}</span>
4039
<ChevronDownIcon />
41-
{toggle && (<UserMenu userID={id} country={country} />)}
40+
{toggle && (<UserMenu userID={id} country={country && country} />)}
4241
</UserNavigators>
4342
) : (
4443
<Navigations>

‎src/components/header/styles/headerStyles.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import styled from "styled-components/macro";
22

33
export const Wrapper = styled.header`
4-
background: rgba(18, 18, 18, 1);
4+
/* background: rgba(18, 18, 18, 1); */
5+
/* background: #121212; */
56
height: 58px;
67
width: 100%;
78
display: flex;
89
align-items: center;
910
justify-content: space-between;
10-
position: sticky;
11+
position: absolute;
12+
/* position: sticky; */
13+
z-index: 50;
1114
top: 0;
1215
padding: 16px;
1316
user-select: none;
14-
1517
`;
1618

1719
export const Navigations = styled.div`
@@ -53,7 +55,6 @@ export const UserNavigators = styled.div`
5355
justify-content: space-between;
5456
padding: 4px 6px;
5557
width: 112px;
56-
background-color: rgba(0, 0, 0, 0.9);
5758
border-radius: 20px;
5859
transition: all 0.3s;
5960
svg {

‎src/components/header/userMenu.js

-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const Container = styled.div`
1515
background-color: #282828;
1616
border-radius: 4px;
1717
box-shadow: 0 16px 24px rgba(0, 0, 0, 0.3);
18-
position: absolute;
1918
ul {
2019
list-style: none;
2120
li {

‎src/components/layout/index.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
import React from 'react';
2-
import PropTypes from "prop-types";
2+
import PropTypes from "prop-types"
33
// components
4-
import Sidebar from '../sidebar';
5-
import Footer from "../footer";
6-
import Header from "../header";
4+
import Sidebar from '../sidebar'
5+
import Footer from "../footer"
6+
import Header from "../header"
77
// styled-components
8-
import GlobalStyles from '../../globalStyles';
9-
import { Wrapper, MainView } from "./styles/layoutStyles";
8+
import GlobalStyles from '../../globalStyles'
9+
import { Wrapper, MainView } from "./styles/layoutStyles"
1010

1111
export default function Layout({ children }) {
12+
1213
return (
1314
<>
1415
<GlobalStyles />
1516
<Wrapper>
1617
<Sidebar />
1718
<MainView>
18-
<Header />
19+
{/* <Header /> */}
1920
<main>
2021
{children}
2122
</main>

‎src/components/layout/styles/layoutStyles.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ export const Wrapper = styled.div`
1616
export const MainView = styled.div`
1717
position: relative;
1818
background-image: linear-gradient(rgba(0,0,0,.75) 0,#121212 100%);
19+
height: 100%;
1920
width: 100%;
2021
grid-area: main-view;
2122
display: flex;
2223
flex-direction: column;
23-
overflow-y: hidden;
2424
main {
2525
display: flex;
2626
flex: 1;

‎src/components/props/categoryContainer.js

+3-22
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useContext, useEffect, useState } from 'react'
2-
import styled from 'styled-components/macro'
32
// components
43
import Frame from './frame'
54
// context
@@ -8,26 +7,8 @@ import { LoginContext, TokenContext } from '../../utils/context'
87
import reqWithToken from '../../utils/reqWithToken'
98
// hooks
109
import { useDimesions } from "../../hooks/useDimesions"
11-
12-
const Container = styled.div`
13-
width: 100%;
14-
min-height: 256px;
15-
margin-bottom: 16px;
16-
h3 {
17-
font-size: 24px !important;
18-
}
19-
p {
20-
font-size: 14px;
21-
}
22-
`;
23-
24-
const SectionWrapper = styled.div`
25-
display: grid;
26-
width: 100%;
27-
height: 100%;
28-
grid-template-columns: repeat(6, minmax(156px, 1fr));
29-
column-gap: 24px;
30-
`;
10+
// styled-components
11+
import { Container, SectionWrapper } from './styles/categoryContainerStyles'
3112

3213
export default function CategoryContainer({ title = "FireyBoi", tag, id, country = "US", children }) {
3314
const auth = useContext(LoginContext);
@@ -67,7 +48,7 @@ export default function CategoryContainer({ title = "FireyBoi", tag, id, country
6748
{auth && (
6849
<SectionWrapper ref={sectionsRef} style={{ marginTop: "12px", gridTemplateColumns: dimensions.width < 1206 ? `repeat(${Math.ceil(dimensions.width / 220)}, minmax(0, 1fr)` : `repeat(6, minmax(0, 1fr)` }}>
6950
{tracks && tracks.filter((playlist, index) => (dimensions.width < 1206 ? (index < Math.ceil(dimensions.width / 220)) : (index < 6))).map((playlist, index) => (
70-
<Frame playlist={playlist} key={`playlist-${playlist.id}`} />
51+
<Frame items={playlist} key={`playlist-${playlist.id}`} />
7152
))}
7253
</SectionWrapper>
7354
)}

‎src/components/props/frame.js

+11-59
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,25 @@
11
import React from 'react'
22
import { Link } from 'react-router-dom'
3-
import styled from 'styled-components'
4-
5-
const Container = styled.div`
6-
height: 272px;
7-
width: auto;
8-
background: rgba(24, 24, 24, 1);
9-
border-radius: 4px;
10-
box-shadow: 0 16px 24px rgba(0, 0, 0, 0.3);
11-
transition: all 0.25s;
12-
a {
13-
text-decoration: none;
14-
width: 100%;
15-
height: 100%;
16-
transition: all 0.25s;
17-
cursor: pointer;
18-
.poster {
19-
height: 70%;
20-
padding: 16px;
21-
img {
22-
box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.3);
23-
border-radius: 2px;
24-
width: 100%;
25-
height: 100%;
26-
object-fit: cover;
27-
}
28-
}
29-
.meta {
30-
padding: 0 16px 16px 16px;
31-
h3 {
32-
font-size: 16px !important;
33-
color: rgba(255, 255, 255, 0.9);
34-
white-space: nowrap;
35-
text-overflow: ellipsis;
36-
overflow: hidden;
37-
}
38-
p {
39-
overflow: hidden;
40-
text-overflow: ellipsis;
41-
display: -webkit-box;
42-
-webkit-box-orient: vertical;
43-
line-clamp: 2;
44-
-webkit-line-clamp: 2;
45-
color: rgba(179, 179, 179, 0.9);
46-
font-weight: 500;
47-
}
48-
}
49-
}
50-
&:hover {
51-
background: rgba(179, 179, 179, 0.18);
52-
}
53-
`;
54-
55-
export default function Frame({ children, playlist }) {
56-
// const { images } = playlist;
3+
// icons
4+
import { PlayIcon } from '../../helpers/icons'
5+
// styled-components
6+
import { Container } from './styles/frameStyles'
577

8+
export default function Frame({ children, items, ...props }) {
589
return children ? (
59-
<Container>
10+
<Container {...props}>
6011
{children}
6112
</Container>
6213
) : (
6314
<Container>
64-
<Link>
15+
<Link to={`/playlist/${items.id}`}>
6516
<div className="poster">
66-
<img src={playlist && playlist.images[0].url} alt={`${playlist.name}-poster`} />
17+
<img src={items && items.images[0].url} alt={`${items.name}-poster`} loading="lazy" />
18+
<button><PlayIcon /></button>
6719
</div>
6820
<div className="meta">
69-
<h3>{playlist && playlist.name}</h3>
70-
<p>{playlist && playlist.description}</p>
21+
<h3>{items && items.name}</h3>
22+
<p>{items && items.description}</p>
7123
</div>
7224
</Link>
7325
</Container>

‎src/components/props/pageBanner.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
// utils
3+
import { msToTime } from '../../utils/getTime'
4+
// icons
5+
import { PlayIcon, HeartOutlineIcon } from '../../helpers/icons'
6+
import { Wrapper, Container, Poster, PageMeta, Overlay, Functionality } from "./styles/bannerStyles"
7+
8+
9+
export default function PageBanner({ infos, image, title, type, description, owner, songs, duration, children, bg }) {
10+
const { minutes, seconds, hours } = msToTime(duration);
11+
return (
12+
<Wrapper>
13+
<Container style={{ background: `${bg}` }}>
14+
<Poster>
15+
<img src={image} loading="eager" alt="" />
16+
</Poster>
17+
<PageMeta>
18+
<span className="type">playlist</span>
19+
<h2 style={{ fontSize: title && title.length > 18 ? `46px` : `96px`, lineHeight: title && title.length > 18 ? `64px` : `88px` }}>{title}</h2>
20+
<span className="description">{description}</span>
21+
<div className="instance">
22+
<span className="owner">Spotify &#8226; </span>
23+
<span className="songs_count">{`${songs} songs, `}</span>
24+
<span className="durations_count">{hours === 0 ? `${minutes} min ${seconds} sec` : `${hours} hr ${minutes} min`}</span>
25+
</div>
26+
</PageMeta>
27+
</Container>
28+
<Overlay style={{ backgroundImage: `linear-gradient(${bg} 0%,#121212 100%)` }} />
29+
<Functionality>
30+
<button className="round">
31+
<PlayIcon />
32+
</button>
33+
<button className="like">
34+
<HeartOutlineIcon />
35+
</button>
36+
</Functionality>
37+
{children}
38+
</Wrapper>
39+
)
40+
}

0 commit comments

Comments
 (0)