diff --git a/app/assets/styles/blink/_ConferenceParticipantSelf.scss b/app/assets/styles/blink/_ConferenceParticipantSelf.scss index 98d08fe..22ccd2b 100644 --- a/app/assets/styles/blink/_ConferenceParticipantSelf.scss +++ b/app/assets/styles/blink/_ConferenceParticipantSelf.scss @@ -1,11 +1,21 @@ .container { flex: 1; width: 120px; height: 90px; elevation: 5; } .video { height:100%; width: 100%; } + +.muteIcon { + position: absolute; + top: 30px; + width: 100%; + z-index: 2; +} +.icon { + margin: 0 auto; +} diff --git a/app/components/ConferenceParticipantSelf.js b/app/components/ConferenceParticipantSelf.js index a269a95..4d8fe75 100644 --- a/app/components/ConferenceParticipantSelf.js +++ b/app/components/ConferenceParticipantSelf.js @@ -1,96 +1,98 @@ 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 { Surface } 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} ); } } ConferenceParticipantSelf.propTypes = { stream: PropTypes.object.isRequired, identity: PropTypes.object.isRequired, audioMuted: PropTypes.bool.isRequired, generatedVideoTrack: PropTypes.bool }; export default ConferenceParticipantSelf;