Skip to content

Commit 39135cd

Browse files
karlhadwenkarlhadwen
committedJul 8, 2020
feat: video player
1 parent cdfba78 commit 39135cd

File tree

13 files changed

+164
-52
lines changed

13 files changed

+164
-52
lines changed
 

‎.eslintrc.json

+1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
"react/prefer-stateless-function": 0,
7171
"react/forbid-prop-types": 0,
7272
"react/no-unescaped-entities": 0,
73+
"jsx-a11y/media-has-caption": 0,
7374
"jsx-a11y/accessible-emoji": 0,
7475
"react/require-default-props": 0,
7576
"react/jsx-props-no-spreading": 0,

‎public/videos/bunny.mp4

770 KB
Binary file not shown.

‎src/components/card/index.js

+3-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useState, useContext, createContext } from 'react';
22
import CancelIcon from '@material-ui/icons/Cancel';
3-
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
43

54
import {
65
Container,
@@ -17,7 +16,6 @@ import {
1716
Entities,
1817
Item,
1918
Image,
20-
PlayButton,
2119
} from './styles/card';
2220

2321
export const FeatureContext = createContext();
@@ -77,11 +75,7 @@ Card.Image = function CardImage({ ...restProps }) {
7775
return <Image {...restProps} />;
7876
};
7977

80-
Card.PlayButton = function CardPlayButton({ children, ...restProps }) {
81-
return <PlayButton>{children}</PlayButton>;
82-
};
83-
84-
Card.Feature = function CardFeature({ category, ...restProps }) {
78+
Card.Feature = function CardFeature({ children, category, ...restProps }) {
8579
const { showFeature, itemFeature, setShowFeature } = useContext(FeatureContext);
8680

8781
return showFeature ? (
@@ -97,10 +91,8 @@ Card.Feature = function CardFeature({ category, ...restProps }) {
9791
{itemFeature.genre.charAt(0).toUpperCase() + itemFeature.genre.slice(1)}
9892
</FeatureText>
9993
</Group>
100-
<PlayButton>
101-
<PlayArrowIcon className="play" />
102-
Play
103-
</PlayButton>
94+
95+
{children}
10496
</Content>
10597
</Feature>
10698
) : null;

‎src/components/card/styles/card.js

-26
Original file line numberDiff line numberDiff line change
@@ -134,32 +134,6 @@ export const Content = styled.div`
134134
}
135135
`;
136136

137-
export const PlayButton = styled.button`
138-
background-color: #e50914;
139-
border-color: #ff0a16;
140-
width: 115px;
141-
height: 45px;
142-
text-transform: uppercase;
143-
font-weight: bold;
144-
color: white;
145-
font-size: 18px;
146-
height: 45px;
147-
cursor: pointer;
148-
display: flex;
149-
align-items: center;
150-
justify-content: center;
151-
padding-left: 0;
152-
153-
&:hover {
154-
transform: scale(1.05);
155-
background-color: #ff0a16;
156-
}
157-
158-
svg.play {
159-
margin-right: 5px;
160-
}
161-
`;
162-
163137
export const Maturity = styled.div`
164138
background-color: ${({ rating }) => (rating >= 15 ? 'red' : 'green')};
165139
border-radius: 15px;

‎src/components/header/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ Header.Feature = function HeaderFeature({ children, ...restProps }) {
6969
return <Feature>{children}</Feature>;
7070
};
7171

72-
Header.Picture = function HeaderPicture({ ...restProps }) {
73-
return <Picture {...restProps} />;
72+
Header.Picture = function HeaderPicture({ src, ...restProps }) {
73+
return <Picture {...restProps} src={`/images/users/${src}.png`} />;
7474
};
7575

7676
Header.Dropdown = function HeaderDropdown({ children, ...restProps }) {

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

+13-1
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,20 @@ export const Dropdown = styled.div`
9898
top: 32px;
9999
right: 10px;
100100
101+
${Group}:last-of-type ${Link} {
102+
cursor: pointer;
103+
}
104+
101105
${Group} {
102106
margin-bottom: 10px;
103107
104108
&:last-of-type {
105109
margin-bottom: 0;
106110
}
111+
112+
${Link}, ${Picture} {
113+
cursor: default;
114+
}
107115
}
108116
109117
button {
@@ -121,14 +129,18 @@ export const Profile = styled.div`
121129
display: flex;
122130
align-items: center;
123131
margin-left: 20px;
124-
cursor: pointer;
125132
position: relative;
126133
127134
svg {
128135
color: white;
129136
margin-left: 5px;
130137
}
131138
139+
button,
140+
svg {
141+
cursor: pointer;
142+
}
143+
132144
&:hover > ${Dropdown} {
133145
display: flex;
134146
flex-direction: column;

‎src/components/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@ export { default as Profiles } from './profiles';
88
export { default as Footer } from './footer';
99
export { default as Header } from './header';
1010
export { default as Loading } from './loading';
11+
export { default as Player } from './player';

‎src/components/loading/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function Loading({ src, ...restProps }) {
55
return (
66
<Spinner {...restProps}>
77
<LockBody />
8-
<Picture src={src} />
8+
<Picture src={`/images/users/${src}.png`} />
99
</Spinner>
1010
);
1111
}

‎src/components/player/index.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { useState, useEffect, useContext, createRef, createContext } from 'react';
2+
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
3+
import ReactDOM from 'react-dom';
4+
import { Container, Button, Overlay, Inner } from './styles/player';
5+
6+
export const PlayerContext = createContext();
7+
8+
export default function Player({ children, ...restProps }) {
9+
const [showPlayer, setShowPlayer] = useState(false);
10+
11+
return (
12+
<PlayerContext.Provider value={{ showPlayer, setShowPlayer }}>
13+
<Container {...restProps}>{children}</Container>
14+
</PlayerContext.Provider>
15+
);
16+
}
17+
18+
Player.Video = function PlayerVideo({ ...restProps }) {
19+
const { showPlayer, setShowPlayer } = useContext(PlayerContext);
20+
21+
return showPlayer
22+
? ReactDOM.createPortal(
23+
<Overlay onClick={() => setShowPlayer(false)}>
24+
<Inner>
25+
<video id="netflix-player" controls>
26+
<source src="/videos/bunny.mp4" type="video/mp4" />
27+
</video>
28+
</Inner>
29+
</Overlay>,
30+
document.body
31+
)
32+
: null;
33+
};
34+
35+
Player.Button = function PlayerButton({ ...restProps }) {
36+
const { showPlayer, setShowPlayer } = useContext(PlayerContext);
37+
38+
return (
39+
<Button onClick={() => setShowPlayer(!showPlayer)}>
40+
<PlayArrowIcon className="play" />
41+
Play
42+
</Button>
43+
);
44+
};

‎src/components/player/styles/player.js

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import styled from 'styled-components/macro';
2+
3+
export const Container = styled.div``;
4+
5+
export const Overlay = styled.div`
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: center;
9+
position: fixed;
10+
top: 0;
11+
left: 0;
12+
width: 100%;
13+
height: 100%;
14+
background: rgba(0, 0, 0, 0.5);
15+
margin: 0 20px;
16+
`;
17+
18+
export const Inner = styled.div`
19+
position: relative;
20+
width: 100%;
21+
max-width: 900px;
22+
margin: auto;
23+
24+
video {
25+
height: 100%;
26+
width: 100%;
27+
}
28+
`;
29+
30+
export const Close = styled.button`
31+
position: absolute;
32+
right: 15px;
33+
top: 15px;
34+
width: 22px;
35+
height: 22px;
36+
opacity: 0.3;
37+
background-color: transparent;
38+
border: 0;
39+
cursor: pointer;
40+
41+
&:hover {
42+
opacity: 1;
43+
}
44+
45+
&:before,
46+
&:after {
47+
position: absolute;
48+
left: 10px;
49+
top: 0;
50+
content: ' ';
51+
height: 22px;
52+
width: 2px;
53+
background-color: #333;
54+
}
55+
56+
&:before {
57+
transform: rotate(45deg);
58+
}
59+
&:after {
60+
transform: rotate(-45deg);
61+
}
62+
`;
63+
64+
export const Button = styled.button`
65+
background-color: #e50914;
66+
border-color: #ff0a16;
67+
width: 115px;
68+
height: 45px;
69+
text-transform: uppercase;
70+
font-weight: bold;
71+
color: white;
72+
font-size: 18px;
73+
height: 45px;
74+
cursor: pointer;
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
78+
padding-left: 0;
79+
80+
&:hover {
81+
transform: scale(1.05);
82+
background-color: #ff0a16;
83+
}
84+
85+
svg.play {
86+
margin-right: 5px;
87+
}
88+
`;

‎src/components/profiles/styles/profiles.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const Picture = styled.img`
4040
max-width: 150px;
4141
height: auto;
4242
border: 3px solid black;
43+
cursor: pointer;
4344
`;
4445

4546
export const Item = styled.li`
@@ -48,7 +49,6 @@ export const Item = styled.li`
4849
list-style-type: none;
4950
text-align: center;
5051
margin-right: 30px;
51-
cursor: pointer;
5252
5353
&:hover > ${Picture} {
5454
border: 3px solid white;

‎src/containers/browse.js

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect, useContext } from 'react';
22
import Fuse from 'fuse.js';
3-
import { Card, Header, Loading } from '../components';
3+
import { Card, Header, Loading, Player } from '../components';
44
import * as ROUTES from '../constants/routes';
55
import logo from '../logo.svg';
66
import { FirebaseContext } from '../context/firebase';
@@ -40,7 +40,7 @@ export function BrowseContainer({ slides }) {
4040

4141
return profile.displayName ? (
4242
<>
43-
{loading ? <Loading src={`/images/users/${user.photoURL}.png`} /> : <Loading.ReleaseBody />}
43+
{loading ? <Loading src={user.photoURL} /> : <Loading.ReleaseBody />}
4444

4545
<Header src="joker1">
4646
<Header.Frame>
@@ -56,15 +56,12 @@ export function BrowseContainer({ slides }) {
5656
<Header.Group>
5757
<Header.Search searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
5858
<Header.Profile>
59-
<Header.Picture src={`/images/users/${user.photoURL}.png`} />
59+
<Header.Picture src={user.photoURL} />
6060
<Header.Dropdown>
6161
<Header.Group>
62-
<Header.Picture src={`/images/users/${user.photoURL}.png`} />
62+
<Header.Picture src={user.photoURL} />
6363
<Header.TextLink>{user.displayName}</Header.TextLink>
6464
</Header.Group>
65-
<Header.Group>
66-
<Header.TextLink onClick={() => console.log('favourites')}>Favourites</Header.TextLink>
67-
</Header.Group>
6865
<Header.Group>
6966
<Header.TextLink onClick={() => firebase.auth().signOut()}>Sign out</Header.TextLink>
7067
</Header.Group>
@@ -99,7 +96,12 @@ export function BrowseContainer({ slides }) {
9996
</Card.Item>
10097
))}
10198
</Card.Entities>
102-
<Card.Feature category={category} />
99+
<Card.Feature category={category}>
100+
<Player>
101+
<Player.Button />
102+
<Player.Video />
103+
</Player>
104+
</Card.Feature>
103105
</Card>
104106
))}
105107
</Card.Group>

‎src/hooks/use-content.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { useEffect, useState, useContext } from 'react';
22
import { FirebaseContext } from '../context/firebase';
33

4-
// with the profile id updating, this is going to get called again and again,
5-
// need to figure out how to stop that
64
export default function useContent(target) {
75
const [content, setContent] = useState([]);
86
const { firebase } = useContext(FirebaseContext);

0 commit comments

Comments
 (0)
Please sign in to comment.