Skip to content

Commit ce96052

Browse files
firedev99firedev99
committed
updated frame resizing
1 parent cc30231 commit ce96052

File tree

17 files changed

+358
-41
lines changed

17 files changed

+358
-41
lines changed

‎.env

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
REACT_APP_BACK_URI=http://localhost:8080
1+
REACT_APP_BACK_URI=http://localhost:4000

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,5 @@
3939
"last 1 safari version"
4040
]
4141
},
42-
"proxy": "http://localhost:8080"
43-
}
42+
"proxy": "http://localhost:4000"
43+
}

‎src/App.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ function App() {
2020

2121
useEffect(() => {
2222
const { accessToken, error } = getHashParams(window && window.location.hash);
23-
const cancelSource = axios.CancelToken.source();
2423

2524
if (error) {
2625
setLoading(false);
@@ -32,8 +31,8 @@ function App() {
3231
window.location.hash = '';
3332

3433
const makeRequest = async () => {
35-
const reqUserInfo = reqWithToken('https://api.spotify.com/v1/me', accessToken, cancelSource);
36-
const reqUserPlaylists = reqWithToken('https://api.spotify.com/v1/me/playlists', accessToken, cancelSource)
34+
const reqUserInfo = reqWithToken('https://api.spotify.com/v1/me', accessToken);
35+
const reqUserPlaylists = reqWithToken('https://api.spotify.com/v1/me/playlists', accessToken)
3736
try {
3837
const [_userInfo, _userPlaylists] = await Promise.all([reqUserInfo(), reqUserPlaylists()]);
3938
setUserInfo(_userInfo.data);
@@ -53,8 +52,8 @@ function App() {
5352
setAuth(true);
5453

5554
const makeRequest = async () => {
56-
const reqUserInfo = reqWithToken('https://api.spotify.com/v1/me', access_token, cancelSource);
57-
const reqUserPlaylists = reqWithToken('https://api.spotify.com/v1/me/playlists', access_token, cancelSource)
55+
const reqUserInfo = reqWithToken('https://api.spotify.com/v1/me', access_token);
56+
const reqUserPlaylists = reqWithToken('https://api.spotify.com/v1/me/playlists', access_token)
5857

5958
try {
6059
const [_userInfo, _userPlaylists] = await Promise.all([reqUserInfo(), reqUserPlaylists()]);

‎src/components/footer/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import React from 'react';
1+
import React from 'react'
22
// styled-components
3-
import { Wrapper, Container, Content } from "./styles/footerStyles";
3+
import { Wrapper, Container, Content } from "./styles/footerStyles"
44

55
export default function Footer() {
66
return (
77
<Wrapper>
88
<Container>
99
<Content>
1010
<p>Preview of Spotify</p>
11-
<p className="s_u">Sign up to get unlimited songs and podcasts with occasional ads. No credit card needed.</p>
11+
<p className="s_u">This is a clone web app - not for any kind of commercial use - @firedev99. Check the real app <a draggable="false" target="_blank" rel="noreferrer noopener" href="https://open.spotify.com/">open.spotify.com</a></p>
1212
</Content>
1313
<button type="button">Sign up free</button>
1414
</Container>

‎src/components/footer/styles/footerStyles.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from "styled-components/macro";
1+
import styled from "styled-components/macro"
22

33
export const Wrapper = styled.footer`
44
grid-area: now-playing-bar;
@@ -37,10 +37,17 @@ export const Container = styled.div`
3737
export const Content = styled.div`
3838
display: flex;
3939
flex-direction: column;
40-
p {
40+
p, a {
4141
font-size: 15px;
4242
color: rgba(255, 255, 255, 0.9);
4343
}
44+
a {
45+
text-decoration: none;
46+
font-weight: 500;
47+
&:hover {
48+
text-decoration: underline;
49+
}
50+
}
4451
.s_u {
4552
margin-top: 2px;
4653
font-size: 16px;

‎src/components/header/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export default function Header() {
1616
const [toggle, setToggle] = useState(false);
1717

1818
const auth = useContext(LoginContext);
19-
const user = useContext(UserContext);
20-
const { country, display_name, images, id } = user;
19+
const { country, display_name, images, id } = useContext(UserContext);
20+
2121

2222
const escKey = useKeypress('Escape');
2323
useOnclickOutside(menuRef, () => setToggle(false));

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ export const Wrapper = styled.header`
88
align-items: center;
99
justify-content: space-between;
1010
position: sticky;
11+
top: 0;
1112
padding: 16px;
1213
user-select: none;
13-
/* width: calc(100% - (156px + 6vw)); */
1414
1515
`;
1616

‎src/components/props/categoryContainer.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React, { useContext, useEffect, useState } from 'react'
2+
import styled from 'styled-components/macro'
3+
// components
4+
import Frame from './frame'
5+
// context
6+
import { LoginContext, TokenContext } from '../../utils/context'
7+
// utils
8+
import reqWithToken from '../../utils/reqWithToken'
9+
// hooks
10+
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+
`;
31+
32+
export default function CategoryContainer({ title = "FireyBoi", tag, id, country = "US", children }) {
33+
const auth = useContext(LoginContext);
34+
const spotifyToken = useContext(TokenContext);
35+
const [playlists, setPlaylists] = useState([]);
36+
const { items: tracks } = playlists;
37+
38+
const [sectionsRef, dimensions] = useDimesions();
39+
40+
useEffect(() => {
41+
if (auth) {
42+
const getPlaylists = async () => {
43+
const categoryPlaylists = reqWithToken(`https://api.spotify.com/v1/browse/categories/${id}/playlists?country=${country}&limit=8`, spotifyToken);
44+
try {
45+
const { data: { playlists } } = await categoryPlaylists();
46+
setPlaylists(playlists);
47+
} catch (error) {
48+
console.log(error)
49+
}
50+
}
51+
52+
getPlaylists();
53+
}
54+
55+
}, [auth, spotifyToken, id, country])
56+
57+
return children ? (
58+
<Container>
59+
<SectionWrapper style={{ marginTop: "2px" }}>
60+
{children}
61+
</SectionWrapper>
62+
</Container>
63+
) : (
64+
<Container>
65+
<h3>{title}</h3>
66+
{tag && <p>{tag}</p>}
67+
{auth && (
68+
<SectionWrapper ref={sectionsRef} style={{ marginTop: "12px", gridTemplateColumns: dimensions.width < 1206 ? `repeat(${Math.ceil(dimensions.width / 220)}, minmax(0, 1fr)` : `repeat(6, minmax(0, 1fr)` }}>
69+
{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}`} />
71+
))}
72+
</SectionWrapper>
73+
)}
74+
</Container>
75+
)
76+
}

‎src/components/props/frame.js

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from 'react'
2+
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;
57+
58+
return children ? (
59+
<Container>
60+
{children}
61+
</Container>
62+
) : (
63+
<Container>
64+
<Link>
65+
<div className="poster">
66+
<img src={playlist && playlist.images[0].url} alt={`${playlist.name}-poster`} />
67+
</div>
68+
<div className="meta">
69+
<h3>{playlist && playlist.name}</h3>
70+
<p>{playlist && playlist.description}</p>
71+
</div>
72+
</Link>
73+
</Container>
74+
)
75+
}

‎src/components/props/stretchFrame.js

+64-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,75 @@
1-
import React from 'react';
2-
import styled from 'styled-components/macro';
1+
import React from 'react'
2+
import { Link } from "react-router-dom"
3+
import styled from 'styled-components/macro'
34

45
const Container = styled.div`
56
height: 80px;
67
width: auto;
7-
background: rgba(179, 179, 179, 0.15);
8-
border-radius: 4px;
9-
box-shadow: 0 16px 24px rgba(0, 0, 0, 0.3);
8+
a {
9+
transition: all 0.2s;
10+
background: rgba(179, 179, 179, 0.15);
11+
border-radius: 4px;
12+
box-shadow: 0 16px 24px rgba(0, 0, 0, 0.3);
13+
width: 100%;
14+
height: 100%;
15+
display: flex;
16+
align-items: center;
17+
text-decoration: none;
18+
.poster {
19+
max-width: 78px;
20+
width: 100%;
21+
height: 100%;
22+
box-shadow: 10px 0 24px rgba(0, 0, 0, 0.3);
23+
img {
24+
height: 100%;
25+
width: 100%;
26+
object-fit: cover;
27+
border-top-left-radius: 4px;
28+
border-bottom-left-radius: 4px;
29+
}
30+
}
31+
.meta {
32+
width: 100%;
33+
display: flex;
34+
align-items: center;
35+
justify-content: space-between;
36+
padding: 16px;
37+
button {
38+
height: 42px;
39+
width: 42px;
40+
border-radius: 50%;
41+
border: none;
42+
opacity: 0;
43+
}
44+
h3 {
45+
font-size: 15px !important;
46+
white-space: nowrap;
47+
width: 106px;
48+
overflow: hidden;
49+
text-overflow: ellipsis;
50+
}
51+
}
52+
&:hover {
53+
background: rgba(179, 179, 179, 0.35);
54+
}
55+
}
56+
1057
`;
1158

12-
export default function StretchFrame() {
59+
export default function StretchFrame({ items = {} }) {
60+
const { icons, images, name } = items;
61+
1362
return (
1463
<Container>
15-
Hello
64+
<Link to={'/'}>
65+
<div className="poster">
66+
{/* <img src={icons ? icons[0].url : images[0].url} alt={`${name}-poster`} /> */}
67+
</div>
68+
<div className="meta">
69+
<h3>{name}</h3>
70+
<button></button>
71+
</div>
72+
</Link>
1673
</Container>
1774
)
1875
}

‎src/components/sidebar/index.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import { Wrapper, Container, Banner, NavItems, NavRoot, ClientInfo, CreatePlayli
99

1010
export default function Sidebar() {
1111
const auth = useContext(LoginContext);
12-
const playlists = useContext(PlaylistContext);
13-
const { items } = playlists;
12+
const { items } = useContext(PlaylistContext);
1413

1514
return (
1615
<Wrapper>

‎src/hooks/useDimesions.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { useEffect, useRef, useState } from "react";
2+
3+
function debounce(fn, ms) {
4+
let timer;
5+
return _ => {
6+
clearTimeout(timer)
7+
timer = setTimeout(_ => {
8+
timer = null
9+
fn.apply(this, arguments)
10+
}, ms)
11+
}
12+
};
13+
14+
export const useDimesions = () => {
15+
const ref = useRef(null);
16+
const [dimensions, setDimensions] = useState({});
17+
18+
useEffect(() => {
19+
if (ref.current) {
20+
setDimensions({
21+
width: ref.current.getBoundingClientRect().width,
22+
height: ref.current.getBoundingClientRect().height
23+
})
24+
}
25+
26+
const debouncedHandleResize = debounce(function handleResize() {
27+
if (ref.current) {
28+
setDimensions({
29+
width: ref.current.getBoundingClientRect().width,
30+
height: ref.current.getBoundingClientRect().height
31+
})
32+
}
33+
}, 100)
34+
35+
window.addEventListener('resize', debouncedHandleResize);
36+
return _ => window.removeEventListener('resize', debouncedHandleResize);
37+
}, [])
38+
39+
return [ref, dimensions];
40+
}

0 commit comments

Comments
 (0)