이준성 / khuwitch

Go to a project
Toggle navigation Toggle navigation pinning
김대연
20978f46 2 parents f66ddf03 a8154555

Merge branch 'channel' into 'master' 

Channel

* Update Login page

* Change channel component's structure and Add listen/quit event

See merge request !15
Expand all
Inline Side-by-side
Showing 8 changed files with 135 additions and 41 deletions
This diff could not be displayed because it is too large.
import React from "react";
import './App.css';
import Login from "./Login";
import Body from "./Body";
function App() {
// let accessToken = null;
let accessToken = 1;
const qs= require('querystring');
const url = require('url')
return (
<div className="app">
{!accessToken && <Login />}
{accessToken && <Body />}
</div>
);
class App extends React.Component {
constructor(props){
super(props);
this.state = {
isAuthenticated: false,
}
}
componentDidMount(props){
var urlQuery = url.parse(window.location.href).query;
var param = qs.parse(urlQuery);
this.setState({ isAuthenticated : param.authenticated}, () => {
this.render();
})
}
render(){
return (
<div className="app">
{this.state.isAuthenticated?(<Body />):(<Login />)}
</div>
);
}
}
export default App;
......
......@@ -24,34 +24,36 @@ socket.on('chat message', (name, msg)=>{
// 해당 채널을 재생하고자할 때 실행시켜주세요.
const listen = (channelName)=>{
console.log(`listen ${channelName}`);
socket.emit("joinRoom", channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
}
// 해당 채널을 재생 안하도록 할 때 실행시켜주세요.
const quit = (channelName)=>{
console.log(`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>
export class Channel extends React.Component {
render(){
return (
<div className="channel">
<a href={this.props.channel.url} className="channel__url">
{this.props.channel.thumbnail && <img className="channel__thumbnail" src={this.props.channel.thumbnail} alt=""></img>}
{!this.props.channel.thumbnail && <PersonIcon className="channel__icon"/>}
<div className="channel__box">
<div className="channel__info">
<div className="channel__name">{ `${this.props.channel.nickname} (${this.props.channel.id})` }</div>
<div className="channel__game">{this.props.channel.category}</div>
</div>
<div className="channel__view">{this.props.channel.view}</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>
);
</a>
{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,22 +62,13 @@ 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},
]
this.state = {
channels: test,
channels: [],
xisPlaying: null,
}
}
......@@ -85,6 +78,10 @@ export class ChannelList extends React.Component {
// 버튼을 누른 채널이 재생중일때
if (channel.isPlay === true) {
channels[index].isPlay = false;
// 기존 채널 재생 중지
quit(channels[index].id);
this.setState({
channels: channels,
xisPlaying: null,
......@@ -98,11 +95,17 @@ export class ChannelList extends React.Component {
// 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경
channels[this.state.xisPlaying].isPlay = false;
channels[index].isPlay = true;
// 기존 채널 재생을 중지하고 새로운 채널을 listen
quit(channels[this.state.xisPlaying].id);
listen(channels[index].id);
}
// xisPlaying이 null일 때
else {
channels[index].isPlay = true;
// 채널 listen
listen(channels[index].id);
}
this.setState({
......@@ -112,6 +115,56 @@ export class ChannelList extends React.Component {
}
}
componentDidMount() {
console.log('channel cdm');
fetch('http://localhost:3303/channels').then( res => res.json())
.then(data => {
var tmpChannels = [];
data.map((channel, index) => {
var tmp = {
id: channel.display_name || " ",
nickname: channel.name || " ",
category: channel.game || "Not playing",
view: channel.views || 0,
url: channel.url || "https://www.twitch.tv/",
isPlay: false,
}
tmpChannels.push(tmp);
})
return tmpChannels;
}).then( channels => {
this.setState({
channels: channels,
xisPlaying: null,
})
})
}
/* fetch('http://localhost:3303/list').then( res => res.json())
.then(data => {
var tmpChannels = []
data.channels.map((channel, index) => {
var tmp = {
id: channel.id,
nickname: channel.nickname,
category: channel.category,
view: channel.view,
url: `https://www.twitch.tv/${channel.id}`,
isPlay: false,
}
tmpChannels.push(tmp);
})
return tmpChannels;
}).then( channels => {
this.setState({
channels: channels,
xisPlaying: null,
})
}) */
render() {
return (
<div className="channel__list">
......
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", "isPlay": true},
{"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"},
]
console.log(test[1])
test[1].isPlay = false
const whatPlay = (elem) => elem.isPlay === true;
console.log(test.findIndex(whatPlay))
\ No newline at end of file
This diff could not be displayed because it is too large.
{
"name": "khuwitch",
"lockfileVersion": 2,
"requires": true,
"packages": {}
}
This diff is collapsed. Click to expand it.