Update: add play & pause icon

ijunseong
Commit 922e5cf4b1ea380498db2435b3e05fe3d7ae93a4 922e5cf4 1 parent 0e0bd91a
Showing 2 changed files with 131 additions and 81 deletions
frontend/src/Chanel.css → frontend/src/Channel.css
frontend/src/Chanel.js → frontend/src/Channel.js
--- a/frontend/src/Chanel.css → frontend/src/Channel.css
View file @922e5cf
+++ b/frontend/src/Chanel.css → frontend/src/Channel.css
View file @922e5cf
-.chanel {
+.channel__list {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    flex: 0.3;
+    min-width: 500px;
+    height: 100vh;
+    color: white;
+    background-color: #0e0e0e;
+    box-sizing: border-box;
+}
+
+.channel__list__title {
+    display: flex;
+    padding: 25px;
+    width: 30vw;
+    min-width: 500px;
+    background-color: #0e0e0e;
+    font-size: 20px;
+    font-weight: bold;
+    position: fixed;
+    box-sizing: border-box;
+}
+
+.channel__list > ul {
+    list-style: none;
+    overflow: auto;
+    padding-top: 50px;
+}
+
+.channel__list > ul > li > hr {
+    border: 2px solid #282828;
+}
+
+.channel {
     display: flex;
     align-items: center;
     flex-direction: row;
-    padding-left: 10px;
     height: 100px;
-    background-color: #0e0e10;
+    background-color: #0e0e0e;
-    padding-left: 10px;
 }
-.chanel__url {
+.channel__url {
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -20,82 +52,59 @@
     padding-bottom: 20px;
 }
-.chanel__box {
+.channel__box {
     display: flex;
+    flex-basis: 80%;
     flex-direction: row;
     justify-content: space-between;
 }
-.chanel__box > input {
+.channel__thumbnail {
-    margin-right: 10px;
+    height: 25px;
+    width: 25px;
+    border-radius: 70%;
+    overflow: hidden;
+    margin-right: 30px;
+    background-color: white;
+}
+
+.channel__icon {
+    height: 25px;
+    width: 25px;
+    border-radius: 70%;
+    overflow: hidden;
+    margin-right: 30px;
 }
-.chanel__info {
+.channel__info {
-    width: 5vw;
+    flex-basis: 70%;
     margin-right: 20px;
 }
-.chanel__name {
+.channel__name {
     align-content: center;
     font-size: 16px;
 }
-.chanel__game {
+.channel__game {
     font-size: 12px;
     color: gray;
 }
-.chanel__view {
+.channel__view {
-    margin-left: 15px;
-    margin-right: 5px;
-    width: 4vw;
     text-align: right;
 }
-.chanel__thumbnail {
+.play__icon {
-    height: 25px;
+    margin-left: 10px;
-    width: 25px;
+    margin-right: 10px;
-    border-radius: 70%;
-    overflow: hidden;
-    margin-right: 30px;
-    background-color: white;
 }
-.chanel__icon {
+.pause__icon {
-    height: 25px;
+    margin-left: 10px;
-    width: 25px;
+    margin-right: 10px;
-    border-radius: 70%;
-    overflow: hidden;
-    margin-right: 30px;
 }
-.chanel__list {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    flex: 0.2;
-    padding-right: 10px;
-    min-width: 300px;
-    height: 100vh;
-    color: white;
-    background-color: #0e0e10;
-}
-.chanel__list > ul {
-    list-style: none;
-    overflow: auto;
-    padding-top: 50px;
-}
-
-.chanel__list > ul > li > hr {
-    border: 2px solid #282828;
-}
-.chanel__list > strong {
-    padding: 25px;
-    width: 17%;
-    background-color: #0e0e0e;
-    font-size: 20px;
-    position: fixed;
-}
\ No newline at end of file
--- a/frontend/src/Chanel.js → frontend/src/Channel.js
View file @922e5cf
+++ b/frontend/src/Chanel.js → frontend/src/Channel.js
View file @922e5cf
 import React from "react";
-import "./Chanel.css";
+import "./Channel.css";
 import "@material-ui/icons"
 import PersonIcon from "@material-ui/icons/Person";
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
-import StopIcon from '@material-ui/icons/Stop';
 import PauseIcon from '@material-ui/icons/Pause';
+import { WatchOutlined } from "@material-ui/icons";
-export function Chanel(props) {
+export function Channel(props) {
-    const chanel = props.chanel;
+    const channel = props.channel;
     return (
-        <div className="chanel">
+        <div className="channel">
-            <a href={chanel.url} className="chanel__url">
+            <a href={channel.url} className="channel__url">
-                {chanel.thumbnail && <img className="chanel__thumbnail" src={chanel.thumbnail} alt=""></img>}
+                {channel.thumbnail && <img className="channel__thumbnail" src={channel.thumbnail} alt=""></img>}
-                {!chanel.thumbnail && <PersonIcon className="chanel__icon"/>}
+                {!channel.thumbnail && <PersonIcon className="channel__icon"/>}
-                <div className="chanel__box">
+                <div className="channel__box">
-                    <div className="chanel__info">
+                    <div className="channel__info">
-                        <div className="chanel__name">{chanel.name}</div>
+                        <div className="channel__name">{channel.name}</div>
-                        <div className="chanel__game">{chanel.game}</div>
+                        <div className="channel__game">{channel.game}</div>
                     </div>
-                    <div className="chanel__view">{chanel.view}</div>
+                    <div className="channel__view">{channel.view}</div>
-                    <input type="radio" name="chanel"></input>
                 </div>
-                
             </a>
+            {channel.isPlay && <PauseIcon className="pause__icon" onClick={props.onClick} />}
+            {!channel.isPlay && <PlayArrowIcon className="play__icon" onClick={props.onClick} />}
         </div>
     );
 }
-export class ChanelList extends React.Component {
+export class ChannelList extends React.Component {
-    
+    constructor(props) {
-
+        super(props);
-    render() {
+        
         // data for test
         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"},
@@ -46,20 +46,61 @@ export class ChanelList extends React.Component {
             {"name": "name2", "view": 123124124, "game": "game2" , "url": "https://www.twitch.tv"},
         ]
-        const chanels = test;
+        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="chanel__list">
+            <div className="channel__list">
-                <strong>CHANELS</strong>
+                <div className="channel__list__title">  CHANNEL LIST</div>
                 <ul>
-                {chanels.map((chanel) => (
+                {this.state.channels.map((channel, index) => (
-                    <li>
+                    <li key={index}>
-                        <Chanel chanel={chanel}/>
+                        <Channel 
+                            channel={channel}
+                            onClick={ () => this.changeState(channel, index)}
+                        />
                         <hr />
                     </li>
                 ))}
                 </ul>
             </div>
+            
         );
     }
 }
\ No newline at end of file