diff --git a/public/icons/meetingroom/button-icon.svg b/public/icons/meetingroom/button-icon.svg new file mode 100644 index 0000000..b0e7df5 --- /dev/null +++ b/public/icons/meetingroom/button-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/meetingroom/VideoRoomComponent copy.js b/src/components/meetingroom/VideoRoomComponent copy.js index 57dcfe2..d2420c7 100644 --- a/src/components/meetingroom/VideoRoomComponent copy.js +++ b/src/components/meetingroom/VideoRoomComponent copy.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import axios from 'axios'; import './VideoRoomComponent.css'; import { OpenVidu } from 'openvidu-browser'; -import StreamComponent from './stream/StreamComponent'; +import StreamComponent from './stream/StreamComponent copy'; import DialogExtensionComponent from './dialog-extension/DialogExtension'; import ChatComponent from './chat/ChatComponent'; @@ -241,25 +241,50 @@ class VideoRoomComponent extends Component { ); } - leaveSession() { + leaveSession(sessionId) { const mySession = this.state.session; if (mySession) { mySession.disconnect(); } - // Empty all properties... this.OV = null; this.setState({ session: undefined, subscribers: [], - mySessionId: 'SessionA', - myUserName: 'OpenVidu_User' + Math.floor(Math.random() * 100), + mySessionId: undefined, + myUserName: 'OpenVidu_User' + Math.floor(Math.random() * 100), localUser: undefined, }); if (this.props.leaveSession) { this.props.leaveSession(); } + + return new Promise((resolve, reject) => { + const token = localStorage.getItem("accessToken"); + axios + .delete(process.env.REACT_APP_SERVER_URL + `/meetings/1/room`, { + data: { + sessionToken: postData.sessionToken, + // logMeeting: this.state.time / 60, //총공부한시간 + logMeeting: 60, //총공부한시간 + logStartTime: postData.meetingStartTime , + }, + + headers: { + Authorization: "Bearer " + token, + "Content-Type": "application/json", + }, + }) + .then((response) => { + console.log("Leave", response); + resolve(response.data.token); + }) + .catch((error) => { + console.log("LEAVE ERROR : " + error); + reject(error); + }); + }); } camStatusChanged() { localUser.setVideoActive(!localUser.isVideoActive()); @@ -643,6 +668,8 @@ class VideoRoomComponent extends Component { > @@ -656,6 +683,8 @@ class VideoRoomComponent extends Component { > diff --git a/src/components/meetingroom/stream/StreamComponent copy.js b/src/components/meetingroom/stream/StreamComponent copy.js new file mode 100644 index 0000000..cd06533 --- /dev/null +++ b/src/components/meetingroom/stream/StreamComponent copy.js @@ -0,0 +1,261 @@ +import React, { Component } from 'react'; +import './StreamComponent.css'; +import OvVideoComponent from './OvVideo'; +import Modal from '../../modal'; +import axios from 'axios'; + +import MicOff from '@material-ui/icons/MicOff'; +import VideocamOff from '@material-ui/icons/VideocamOff'; +import VolumeUp from '@material-ui/icons/VolumeUp'; +import VolumeOff from '@material-ui/icons/VolumeOff'; +import FormControl from '@material-ui/core/FormControl'; +import Input from '@material-ui/core/Input'; +import InputLabel from '@material-ui/core/InputLabel'; +import IconButton from '@material-ui/core/IconButton'; +import HighlightOff from '@material-ui/icons/HighlightOff'; +import FormHelperText from '@material-ui/core/FormHelperText'; + +const token = localStorage.getItem('accessToken'); +export default class StreamComponent extends Component { + constructor(props) { + super(props); + this.state = { + nickname: this.props.user.getNickname(), + showForm: false, + mutedSound: false, + isFormValid: true, + isHovering: false, + modalOpen: false, + Msg:'', + }; + this.handleChange = this.handleChange.bind(this); + this.handlePressKey = this.handlePressKey.bind(this); + this.toggleNicknameForm = this.toggleNicknameForm.bind(this); + this.toggleSound = this.toggleSound.bind(this); + this.handlerMouseON = this.handlerMouseON.bind(this); + this.handlerMouseOff = this.handlerMouseOff.bind(this); + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + this.handleExitUser = this.handleExitUser.bind(this); + } + + handleExitUser() { + // `/meetings/${this.props.meetingSeq}/kick/${this.props.user_seq}`, + + return new Promise((resolve, reject) => { + axios + .get( + process.env.REACT_APP_SERVER_URL + + `/meetings/${this.props.meetingSeq}/kick/28`, + { + headers: { + Authorization: 'Bearer ' + token, + 'Content-Type': 'application/json', + }, + } + ) + .then((res) => { + const STATUS = res.data.statusCode; + resolve(res.data.statusCode); + if (STATUS === 200) { + this.setState({ Msg:'강퇴완료' }); + console.log(STATUS); + } else if (STATUS === 201) { + this.setState({ Msg:'강퇴완료' }); + } else if (STATUS === 409) { + this.setState({ Msg:'host가 아닙니다' }); + } + }) + .catch((err) => { + console.log(err); + reject(err); + }); + + console.log('강퇴'); + this.closeModal(); + }); + } + + openModal() { + this.setState({ modalOpen: true }); + } + + closeModal() { + this.setState({ modalOpen: false }); + } + + handlerMouseON() { + this.setState({ isHovering: true }); + } + + handlerMouseOff() { + this.setState({ isHovering: false }); + } + + handleChange(event) { + this.setState({ nickname: event.target.value }); + event.preventDefault(); + } + + toggleNicknameForm() { + if (this.props.user.isLocal()) { + this.setState({ showForm: !this.state.showForm }); + } + } + + toggleSound() { + this.setState({ mutedSound: !this.state.mutedSound }); + } + + handlePressKey(event) { + if (event.key === 'Enter') { + console.log(this.state.nickname); + if (this.state.nickname.length >= 3 && this.state.nickname.length <= 20) { + this.props.handleNickname(this.state.nickname); + this.toggleNicknameForm(); + this.setState({ isFormValid: true }); + } else { + this.setState({ isFormValid: false }); + } + } + } + + render() { + return ( +
+ {this.props.user !== undefined && + this.props.user.getStreamManager() !== undefined ? ( +
+ {/* {this.props.user.isAudioActive()?():()} */} + + {this.props.user.isVideoActive() ? ( +
{this.state.nickname}
+ ) : ( +
{this.state.nickname}
+ )} +
02:48
+ {this.props.user.type === 'remote' && this.props.local.host && ( +
+ {this.state.isHovering && ( +
+ + + + +
+ )} + + +
+ {this.state.nickname}을 강퇴하시겠습니까? +
+ + + + +
+ )} + +
+ {/* {!this.props.user.isVideoActive() ? ( +
+ +
+ ) : null} */} + + {!this.props.user.isAudioActive() ? ( +
+ + + + + + + + + + + + + + +
+ ) : null} +
+
+ {!this.props.user.isLocal() && ( + + {this.state.mutedSound ? ( + + ) : ( + + )} + + )} +
+
+ ) : null} +
+ ); + } +} diff --git a/src/components/meetingroom/stream/StreamComponent.css b/src/components/meetingroom/stream/StreamComponent.css index 63a9c14..9993e89 100644 --- a/src/components/meetingroom/stream/StreamComponent.css +++ b/src/components/meetingroom/stream/StreamComponent.css @@ -42,7 +42,18 @@ text-align: center; padding: 6px; } - +#exitIcon{ + text-align: center; + padding: 6px; + top: 0; + right: 0; + width: -moz-fit-content; + width: fit-content; + height: -moz-fit-content; + height: fit-content; + position: absolute; + margin: 0 0 20px 20px; +} #fullscreenButton { position: absolute; bottom: 1px;