Update: separate channel.name to channel.id and channel.nickname
Showing
1 changed file
with
56 additions
and
29 deletions
... | @@ -32,26 +32,49 @@ const quit = (channelName)=>{ | ... | @@ -32,26 +32,49 @@ const quit = (channelName)=>{ |
32 | socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름. | 32 | socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름. |
33 | } | 33 | } |
34 | 34 | ||
35 | -export function Channel(props) { | 35 | +export class Channel extends React.Component { |
36 | - const channel = props.channel; | 36 | + constructor(props) { |
37 | + super(props); | ||
38 | + this.state = { | ||
39 | + id: props.channel.id, | ||
40 | + nickname: props.channel.nickname, | ||
41 | + url: props.channel.url, | ||
42 | + thumbnail: props.channel.thumbnail, | ||
43 | + category: props.channel.category, // game에서 category로 변경 | ||
44 | + view: props.channel.view, | ||
45 | + isPlay: props.channel.isPlay || false, | ||
46 | + } | ||
47 | + } | ||
48 | + | ||
49 | + componentDidUpdate() { | ||
50 | + if (this.props.isPlay !== this.state.isPlay){ | ||
51 | + console.log('cdu') | ||
52 | + console.log(this.state.isPlay) | ||
53 | + this.setState( {isPlay: this.props.isPlay}, () => { | ||
37 | 54 | ||
38 | - return ( | 55 | + } ); |
39 | - <div className="channel"> | 56 | + } |
40 | - <a href={channel.url} className="channel__url"> | 57 | + } |
41 | - {channel.thumbnail && <img className="channel__thumbnail" src={channel.thumbnail} alt=""></img>} | 58 | + |
42 | - {!channel.thumbnail && <PersonIcon className="channel__icon"/>} | 59 | + render(){ |
43 | - <div className="channel__box"> | 60 | + return ( |
44 | - <div className="channel__info"> | 61 | + <div className="channel"> |
45 | - <div className="channel__name">{channel.name}</div> | 62 | + <a href={this.state.url} className="channel__url"> |
46 | - <div className="channel__game">{channel.game}</div> | 63 | + {this.state.thumbnail && <img className="channel__thumbnail" src={this.state.thumbnail} alt=""></img>} |
64 | + {!this.state.thumbnail && <PersonIcon className="channel__icon"/>} | ||
65 | + <div className="channel__box"> | ||
66 | + <div className="channel__info"> | ||
67 | + <div className="channel__name">{ `${this.state.nickname} (${this.state.id})` }</div> | ||
68 | + <div className="channel__game">{this.state.category}</div> | ||
69 | + </div> | ||
70 | + <div className="channel__view">{this.state.view}</div> | ||
47 | </div> | 71 | </div> |
48 | - <div className="channel__view">{channel.view}</div> | 72 | + </a> |
49 | - </div> | 73 | + {this.props.channel.isPlay && <PauseIcon className="pause__icon" onClick={this.props.onClick} />} |
50 | - </a> | 74 | + {!this.props.channel.isPlay && <PlayArrowIcon className="play__icon" onClick={this.props.onClick} />} |
51 | - {channel.isPlay && <PauseIcon className="pause__icon" onClick={props.onClick} />} | 75 | + </div> |
52 | - {!channel.isPlay && <PlayArrowIcon className="play__icon" onClick={props.onClick} />} | 76 | + ) |
53 | - </div> | 77 | + } |
54 | - ); | ||
55 | } | 78 | } |
56 | 79 | ||
57 | export class ChannelList extends React.Component { | 80 | export class ChannelList extends React.Component { |
... | @@ -60,17 +83,17 @@ export class ChannelList extends React.Component { | ... | @@ -60,17 +83,17 @@ export class ChannelList extends React.Component { |
60 | 83 | ||
61 | // data for test | 84 | // data for test |
62 | const test = [ | 85 | const test = [ |
63 | - {"name": "umi0410 진수", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv/umi0410"}, | 86 | + {"id": "umi0410", "nickname": "진수", "view": 123124124, "category": "game2" , "url": "https://www.twitch.tv/umi0410", "isPlay": false}, |
64 | - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"}, | 87 | + {"id": "name1", "nickname": "nick", "view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false}, |
65 | - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"}, | 88 | + {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false}, |
66 | - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"}, | 89 | + /* {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false}, |
67 | - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"}, | 90 | + {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false}, |
68 | - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"}, | 91 | + {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false}, |
69 | - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"}, | 92 | + {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false}, |
70 | - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"}, | 93 | + {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false}, |
71 | - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"}, | 94 | + {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false}, |
72 | - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"}, | 95 | + {"id": "name1", "nickname": "nick","view": 999, "category": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg", "isPlay": false}, |
73 | - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"}, | 96 | + {"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false}, */ |
74 | 97 | ||
75 | ] | 98 | ] |
76 | 99 | ||
... | @@ -85,6 +108,8 @@ export class ChannelList extends React.Component { | ... | @@ -85,6 +108,8 @@ export class ChannelList extends React.Component { |
85 | // 버튼을 누른 채널이 재생중일때 | 108 | // 버튼을 누른 채널이 재생중일때 |
86 | if (channel.isPlay === true) { | 109 | if (channel.isPlay === true) { |
87 | channels[index].isPlay = false; | 110 | channels[index].isPlay = false; |
111 | + console.log(channels[index].isPlay); | ||
112 | + console.log(channels); | ||
88 | this.setState({ | 113 | this.setState({ |
89 | channels: channels, | 114 | channels: channels, |
90 | xisPlaying: null, | 115 | xisPlaying: null, |
... | @@ -93,6 +118,8 @@ export class ChannelList extends React.Component { | ... | @@ -93,6 +118,8 @@ export class ChannelList extends React.Component { |
93 | 118 | ||
94 | // 버튼을 누른 채널이 재생중이 아닐 때 | 119 | // 버튼을 누른 채널이 재생중이 아닐 때 |
95 | else { | 120 | else { |
121 | + console.log(channels[index].isPlay); | ||
122 | + console.log(channels); | ||
96 | // xisPlaying이 null이 아닐 때 | 123 | // xisPlaying이 null이 아닐 때 |
97 | if (this.state.xisPlaying !== null) { | 124 | if (this.state.xisPlaying !== null) { |
98 | // 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경 | 125 | // 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경 | ... | ... |
-
Please register or login to post a comment