이준성 / khuwitch

Go to a project
Toggle navigation Toggle navigation pinning
ijunseong
25d5c86b 1 parent a2b93076

Update: separate channel.name to channel.id and channel.nickname

Inline Side-by-side
Showing 1 changed file with 49 additions and 22 deletions
......@@ -32,26 +32,49 @@ const quit = (channelName)=>{
socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
}
export function Channel(props) {
const channel = props.channel;
export class Channel extends React.Component {
constructor(props) {
super(props);
this.state = {
id: props.channel.id,
nickname: props.channel.nickname,
url: props.channel.url,
thumbnail: props.channel.thumbnail,
category: props.channel.category, // game에서 category로 변경
view: props.channel.view,
isPlay: props.channel.isPlay || false,
}
}
componentDidUpdate() {
if (this.props.isPlay !== this.state.isPlay){
console.log('cdu')
console.log(this.state.isPlay)
this.setState( {isPlay: this.props.isPlay}, () => {
} );
}
}
render(){
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"/>}
<a href={this.state.url} className="channel__url">
{this.state.thumbnail && <img className="channel__thumbnail" src={this.state.thumbnail} alt=""></img>}
{!this.state.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 className="channel__name">{ `${this.state.nickname} (${this.state.id})` }</div>
<div className="channel__game">{this.state.category}</div>
</div>
<div className="channel__view">{channel.view}</div>
<div className="channel__view">{this.state.view}</div>
</div>
</a>
{channel.isPlay && <PauseIcon className="pause__icon" onClick={props.onClick} />}
{!channel.isPlay && <PlayArrowIcon className="play__icon" onClick={props.onClick} />}
{this.props.channel.isPlay && <PauseIcon className="pause__icon" onClick={this.props.onClick} />}
{!this.props.channel.isPlay && <PlayArrowIcon className="play__icon" onClick={this.props.onClick} />}
</div>
);
)
}
}
export class ChannelList extends React.Component {
......@@ -60,17 +83,17 @@ export class ChannelList extends React.Component {
// data for test
const test = [
{"name": "umi0410 진수", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv/umi0410"},
{"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"},
{"id": "umi0410", "nickname": "진수", "view": 123124124, "category": "game2" , "url": "https://www.twitch.tv/umi0410", "isPlay": false},
{"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},
{"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
/* {"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},
{"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
{"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},
{"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
{"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},
{"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false},
{"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},
{"id": "name2", "nickname": "nick","view": 123124124, "category": "game2" , "url": "https://www.twitch.tv", "isPlay": false}, */
]
......@@ -85,6 +108,8 @@ export class ChannelList extends React.Component {
// 버튼을 누른 채널이 재생중일때
if (channel.isPlay === true) {
channels[index].isPlay = false;
console.log(channels[index].isPlay);
console.log(channels);
this.setState({
channels: channels,
xisPlaying: null,
......@@ -93,6 +118,8 @@ export class ChannelList extends React.Component {
// 버튼을 누른 채널이 재생중이 아닐 때
else {
console.log(channels[index].isPlay);
console.log(channels);
// xisPlaying이 null이 아닐 때
if (this.state.xisPlaying !== null) {
// 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경
......