이준성 / 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.
1 +import React from "react";
1 import './App.css'; 2 import './App.css';
2 import Login from "./Login"; 3 import Login from "./Login";
3 import Body from "./Body"; 4 import Body from "./Body";
4 5
5 -function App() { 6 +const qs= require('querystring');
6 - // let accessToken = null; 7 +const url = require('url')
7 - let accessToken = 1;
8 8
9 - return ( 9 +class App extends React.Component {
10 - <div className="app"> 10 + constructor(props){
11 - {!accessToken && <Login />} 11 + super(props);
12 - {accessToken && <Body />} 12 + this.state = {
13 - </div> 13 + isAuthenticated: false,
14 - ); 14 + }
15 + }
16 +
17 + componentDidMount(props){
18 + var urlQuery = url.parse(window.location.href).query;
19 + var param = qs.parse(urlQuery);
20 + this.setState({ isAuthenticated : param.authenticated}, () => {
21 + this.render();
22 + })
23 + }
24 +
25 + render(){
26 + return (
27 + <div className="app">
28 + {this.state.isAuthenticated?(<Body />):(<Login />)}
29 + </div>
30 + );
31 + }
15 } 32 }
16 33
17 export default App; 34 export default App;
......
...@@ -24,34 +24,36 @@ socket.on('chat message', (name, msg)=>{ ...@@ -24,34 +24,36 @@ socket.on('chat message', (name, msg)=>{
24 24
25 // 해당 채널을 재생하고자할 때 실행시켜주세요. 25 // 해당 채널을 재생하고자할 때 실행시켜주세요.
26 const listen = (channelName)=>{ 26 const listen = (channelName)=>{
27 + console.log(`listen ${channelName}`);
27 socket.emit("joinRoom", channelName, "dummy name") // name이 뭔지 대연이도 잘 모름. 28 socket.emit("joinRoom", channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
28 } 29 }
29 30
30 // 해당 채널을 재생 안하도록 할 때 실행시켜주세요. 31 // 해당 채널을 재생 안하도록 할 때 실행시켜주세요.
31 const quit = (channelName)=>{ 32 const quit = (channelName)=>{
33 + console.log(`quit ${channelName}`);
32 socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름. 34 socket.emit("leaveRoom". channelName, "dummy name") // name이 뭔지 대연이도 잘 모름.
33 } 35 }
34 36
35 -export function Channel(props) { 37 +export class Channel extends React.Component {
36 - const channel = props.channel; 38 + render(){
37 - 39 + return (
38 - return ( 40 + <div className="channel">
39 - <div className="channel"> 41 + <a href={this.props.channel.url} className="channel__url">
40 - <a href={channel.url} className="channel__url"> 42 + {this.props.channel.thumbnail && <img className="channel__thumbnail" src={this.props.channel.thumbnail} alt=""></img>}
41 - {channel.thumbnail && <img className="channel__thumbnail" src={channel.thumbnail} alt=""></img>} 43 + {!this.props.channel.thumbnail && <PersonIcon className="channel__icon"/>}
42 - {!channel.thumbnail && <PersonIcon className="channel__icon"/>} 44 + <div className="channel__box">
43 - <div className="channel__box"> 45 + <div className="channel__info">
44 - <div className="channel__info"> 46 + <div className="channel__name">{ `${this.props.channel.nickname} (${this.props.channel.id})` }</div>
45 - <div className="channel__name">{channel.name}</div> 47 + <div className="channel__game">{this.props.channel.category}</div>
46 - <div className="channel__game">{channel.game}</div> 48 + </div>
49 + <div className="channel__view">{this.props.channel.view}</div>
47 </div> 50 </div>
48 - <div className="channel__view">{channel.view}</div> 51 + </a>
49 - </div> 52 + {this.props.channel.isPlay && <PauseIcon className="pause__icon" onClick={this.props.onClick} />}
50 - </a> 53 + {!this.props.channel.isPlay && <PlayArrowIcon className="play__icon" onClick={this.props.onClick} />}
51 - {channel.isPlay && <PauseIcon className="pause__icon" onClick={props.onClick} />} 54 + </div>
52 - {!channel.isPlay && <PlayArrowIcon className="play__icon" onClick={props.onClick} />} 55 + )
53 - </div> 56 + }
54 - );
55 } 57 }
56 58
57 export class ChannelList extends React.Component { 59 export class ChannelList extends React.Component {
...@@ -60,22 +62,13 @@ export class ChannelList extends React.Component { ...@@ -60,22 +62,13 @@ export class ChannelList extends React.Component {
60 62
61 // data for test 63 // data for test
62 const test = [ 64 const test = [
63 - {"name": "umi0410 진수", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv/umi0410"}, 65 + {"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"}, 66 + {"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"}, 67 + {"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"},
67 - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
68 - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
69 - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
70 - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
71 - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
72 - {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
73 - {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
74 -
75 ] 68 ]
76 69
77 this.state = { 70 this.state = {
78 - channels: test, 71 + channels: [],
79 xisPlaying: null, 72 xisPlaying: null,
80 } 73 }
81 } 74 }
...@@ -85,6 +78,10 @@ export class ChannelList extends React.Component { ...@@ -85,6 +78,10 @@ export class ChannelList extends React.Component {
85 // 버튼을 누른 채널이 재생중일때 78 // 버튼을 누른 채널이 재생중일때
86 if (channel.isPlay === true) { 79 if (channel.isPlay === true) {
87 channels[index].isPlay = false; 80 channels[index].isPlay = false;
81 +
82 + // 기존 채널 재생 중지
83 + quit(channels[index].id);
84 +
88 this.setState({ 85 this.setState({
89 channels: channels, 86 channels: channels,
90 xisPlaying: null, 87 xisPlaying: null,
...@@ -98,11 +95,17 @@ export class ChannelList extends React.Component { ...@@ -98,11 +95,17 @@ export class ChannelList extends React.Component {
98 // 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경 95 // 기존에 재생되던 채널의 isPlay를 false로, 클릭 이벤트가 발생한 채널의 isPlay를 true로 변경
99 channels[this.state.xisPlaying].isPlay = false; 96 channels[this.state.xisPlaying].isPlay = false;
100 channels[index].isPlay = true; 97 channels[index].isPlay = true;
98 +
99 + // 기존 채널 재생을 중지하고 새로운 채널을 listen
100 + quit(channels[this.state.xisPlaying].id);
101 + listen(channels[index].id);
101 } 102 }
102 103
103 // xisPlaying이 null일 때 104 // xisPlaying이 null일 때
104 else { 105 else {
105 channels[index].isPlay = true; 106 channels[index].isPlay = true;
107 + // 채널 listen
108 + listen(channels[index].id);
106 } 109 }
107 110
108 this.setState({ 111 this.setState({
...@@ -112,6 +115,56 @@ export class ChannelList extends React.Component { ...@@ -112,6 +115,56 @@ export class ChannelList extends React.Component {
112 } 115 }
113 } 116 }
114 117
118 + componentDidMount() {
119 + console.log('channel cdm');
120 + fetch('http://localhost:3303/channels').then( res => res.json())
121 + .then(data => {
122 + var tmpChannels = [];
123 + data.map((channel, index) => {
124 + var tmp = {
125 + id: channel.display_name || " ",
126 + nickname: channel.name || " ",
127 + category: channel.game || "Not playing",
128 + view: channel.views || 0,
129 + url: channel.url || "https://www.twitch.tv/",
130 + isPlay: false,
131 + }
132 + tmpChannels.push(tmp);
133 + })
134 + return tmpChannels;
135 + }).then( channels => {
136 + this.setState({
137 + channels: channels,
138 + xisPlaying: null,
139 + })
140 + })
141 + }
142 + /* fetch('http://localhost:3303/list').then( res => res.json())
143 + .then(data => {
144 + var tmpChannels = []
145 + data.channels.map((channel, index) => {
146 + var tmp = {
147 + id: channel.id,
148 + nickname: channel.nickname,
149 + category: channel.category,
150 + view: channel.view,
151 + url: `https://www.twitch.tv/${channel.id}`,
152 + isPlay: false,
153 + }
154 + tmpChannels.push(tmp);
155 + })
156 +
157 + return tmpChannels;
158 + }).then( channels => {
159 + this.setState({
160 + channels: channels,
161 + xisPlaying: null,
162 + })
163 + }) */
164 +
165 +
166 +
167 +
115 render() { 168 render() {
116 return ( 169 return (
117 <div className="channel__list"> 170 <div className="channel__list">
......
1 +const test = [
2 + {"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},
3 + {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
4 + {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
5 + {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
6 + {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
7 + {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
8 + {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
9 + {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
10 + {"name": "name1", "view": 999, "game": "game1" ,"url": "https://www.twitch.tv", "thumbnail": "https://upload.wikimedia.org/wikipedia/commons/2/26/Twitch_logo.svg"},
11 + {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
12 +]
13 +
14 +console.log(test[1])
15 +test[1].isPlay = false
16 +const whatPlay = (elem) => elem.isPlay === true;
17 +console.log(test.findIndex(whatPlay))
...\ No newline at end of file ...\ No newline at end of file
This diff could not be displayed because it is too large.
1 +{
2 + "name": "khuwitch",
3 + "lockfileVersion": 2,
4 + "requires": true,
5 + "packages": {}
6 +}
This diff is collapsed. Click to expand it.