diff --git a/app/assets/styles/blink/_ConferenceParticipantSelf.scss b/app/assets/styles/blink/_ConferenceParticipantSelf.scss index 9dc438e..e0e4e2b 100644 --- a/app/assets/styles/blink/_ConferenceParticipantSelf.scss +++ b/app/assets/styles/blink/_ConferenceParticipantSelf.scss @@ -1,8 +1,14 @@ .container { flex: 1; + width: 120px; + height: 90px; + box-shadow: 0 2px 3.84px #ccc; + shadowOpacity: 0.5; + elevation: 6; } .video { - height: 100px; - width: 100px; -} \ No newline at end of file + height:100%; + width: 100%; + border: 1px solid #fff; +} diff --git a/app/components/ConferenceParticipantSelf.js b/app/components/ConferenceParticipantSelf.js index 4dd8d43..35d8c38 100644 --- a/app/components/ConferenceParticipantSelf.js +++ b/app/components/ConferenceParticipantSelf.js @@ -1,98 +1,96 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import PropTypes from 'prop-types'; //const hark = require('hark'); import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { RTCView } from 'react-native-webrtc'; import { Card } from 'react-native-paper'; import styles from '../assets/styles/blink/_ConferenceParticipantSelf.scss'; class ConferenceParticipantSelf extends Component { constructor(props) { super(props); this.state = { active: false, hasVideo: false, sharesScreen: false, } // this.speechEvents = null; } componentDidMount() { // factor it out to a function to avoid lint warning about calling setState here this.attachSpeechEvents(); // this.refs.videoElement.onresize = (event) => { // this.handleResize(event) // }; } handleResize(event) { const resolutions = [ '1280x720', '960x540', '640x480', '640x360', '480x270','320x180']; const videoResolution = event.target.videoWidth + 'x' + event.target.videoHeight; if (resolutions.indexOf(videoResolution) === -1) { this.setState({sharesScreen: true}); } else { this.setState({sharesScreen: false}); } } componentWillUnmount() { // if (this.speechEvents !== null) { // this.speechEvents.stop(); // this.speechEvents = null; // } } attachSpeechEvents() { this.setState({hasVideo: this.props.stream.getVideoTracks().length > 0}); // const options = { // interval: 150, // play: false // }; // this.speechEvents = hark(this.props.stream, options); // this.speechEvents.on('speaking', () => { // this.setState({active: true}); // }); // this.speechEvents.on('stopped_speaking', () => { // this.setState({active: false}); // }); } render() { if (this.props.stream == null) { return false; } // const tooltip = ( // {this.props.identity.displayName || this.props.identity.uri} // ); let muteIcon if (this.props.audioMuted) { muteIcon = ( ); } return ( - - - {muteIcon} - - - + + {muteIcon} + + ); } } ConferenceParticipantSelf.propTypes = { stream: PropTypes.object.isRequired, identity: PropTypes.object.isRequired, audioMuted: PropTypes.bool.isRequired, generatedVideoTrack: PropTypes.bool }; export default ConferenceParticipantSelf;