Channel.js
5.73 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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";
import io from 'socket.io-client'
import tts from './tts';
// audioQueue에서 하나씩 뽑아서 재생한다.
tts.enableAudio()
const socket = io.connect("http://localhost:3303")
socket.on("connect", event=>{
// 테스트용으로 umi0410에게 입장.
// 다른 거 아무거나 채널이름을 넣으면 되겠지만, 그렇게 하고싶으면 백엔드에서 인자설정을 해줘야함.
socket.emit("joinRoom", 'umi0410', '진수봇')
})
// 말해야할 메시지가 왔을 때. 이건 따로 Component와 묶지 않아도 알아서 실행됩니다.
socket.on('chat message', (name, msg)=>{
console.log(msg)
console.log("got message")
//tts를 audio로 변경해 audioQueue에 집어넣는다.
tts.enqueueTTS(msg)
})
// 해당 채널을 재생하고자할 때 실행시켜주세요.
const listen = (channelName)=>{
socket.emit("joinRoom", channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
}
// 해당 채널을 재생 안하도록 할 때 실행시켜주세요.
const quit = (channelName)=>{
socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
}
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": "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"},
]
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>
);
}
}