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;