Channel.js
4.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React from "react";
import "./Channel.css";
import "@material-ui/icons"
import PersonIcon from "@material-ui/icons/Person";
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import PauseIcon from '@material-ui/icons/Pause';
import { WatchOutlined } from "@material-ui/icons";
export function Channel(props) {
const channel = props.channel;
return (
<div className="channel">
<a href={channel.url} className="channel__url">
{channel.thumbnail && <img className="channel__thumbnail" src={channel.thumbnail} alt=""></img>}
{!channel.thumbnail && <PersonIcon className="channel__icon"/>}
<div className="channel__box">
<div className="channel__info">
<div className="channel__name">{channel.name}</div>
<div className="channel__game">{channel.game}</div>
</div>
<div className="channel__view">{channel.view}</div>
</div>
</a>
{channel.isPlay && <PauseIcon className="pause__icon" onClick={props.onClick} />}
{!channel.isPlay && <PlayArrowIcon className="play__icon" onClick={props.onClick} />}
</div>
);
}
export class ChannelList extends React.Component {
constructor(props) {
super(props);
// data for test
const test = [
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
{"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
{"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
]
this.state = {
channels: test,
xisPlaying: null,
}
}
changeState(channel, index){
const channels = this.state.channels;
// 버튼을 누른 채널이 재생중일때
if (channel.isPlay === true) {
channels[index].isPlay = false;
this.setState({
channels: channels,
xisPlaying: null,
});
}
// 버튼을 누른 채널이 재생중이 아닐 때
else {
// xisPlaying이 null이 아닐 때
if (this.state.xisPlaying !== null) {
// 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경
channels[this.state.xisPlaying].isPlay = false;
channels[index].isPlay = true;
}
// xisPlaying이 null일 때
else {
channels[index].isPlay = true;
}
this.setState({
channels: channels,
xisPlaying: index,
});
}
}
render() {
return (
<div className="channel__list">
<div className="channel__list__title"> CHANNEL LIST</div>
<ul>
{this.state.channels.map((channel, index) => (
<li key={index}>
<Channel
channel={channel}
onClick={ () => this.changeState(channel, index)}
/>
<hr />
</li>
))}
</ul>
</div>
);
}
}