@fortawesome/free-solid-svg-icons#faMicrophone JavaScript Examples

Player = ({
  stream,
  width,
  className,
  onClick,
  showControls,
  name,
}) => {
  const [isMuted, setMuted] = useState(false);
  const videoRef = React.createRef();

  useEffect(() => {
    connectVideoToStream(videoRef.current, stream);
  }, [stream]);

  const toggleAudio = () => {
    videoRef.current.muted = !isMuted;
    setMuted(!isMuted);
  };

  if (stream) {
    return (
      <div className="video-container">
        <video
          autoPlay
          className={className}
          onClick={onClick}
          style={{ width }}
          ref={videoRef}
        />
        {showControls && (
          <div className="controls p-1 pr-2">
            <FontAwesomeIcon
              icon={isMuted ? faMicrophoneSlash : faMicrophone}
              onClick={toggleAudio}
              className="icon"
            />
            <span className="name">{name}</span>
          </div>
        )}
      </div>
    );
  }
  return <div className="video-placeholder" />;
}

render() {
    const {
      videoChat,
      roomId,
      username,
      syncSetup,
      logs,
      profiles,
      alone,
    } = this.state;
    // haven't confirmed room exists yet
    if (!roomId) return '';

    // wait for user to input name
    if (!username) {
      return (
        <>
          <Dialog
            ref={el => {
              this.dialog = el;
            }}
          />
        </>
      );
    }

    // wait for webrtc connection to setup
    if (!syncSetup) return '';

    // actual IDE
    return (
      <div className="room-container">
        {videoChat && <VideoChat />}
        <Container fluid>
          <Row>
            <Col xs={12} md={6} className="editor-col">
              <SharedMonacoEditor
                sharedEditorDidMount={ref => {
                  this.codeEditorRef = ref;
                }}
                id="code-editor"
                name="Code editor"
                language="python"
                className="code-editor"
                showDropdown
                loadTemplate={alone}
              />
            </Col>
            <Col xs={12} md={6} className="editor-col">
              <Terminal
                className="output-terminal"
                name="Room Log"
                profiles={profiles}
                logs={logs}
                onInput={this.sendMessage}
              />
            </Col>
          </Row>
          <Row className="control-bar">
            <Col>
              <ControlBar>
                <Row className="align-items-center">
                  <Col md={2}>
                    <Button
                      onClick={this.handleRunBtn}
                      variant="success"
                      size="sm"
                    >
                      Run
                    </Button>
                  </Col>
                  <Col md={6}>
                    <OverlayScrollbarsComponent
                      options={{
                        autoUpdate: true,
                        scrollbars: { autoHide: 'leave' },
                        overflowBehavior: {
                          x: 'scroll',
                          y: 'hidden',
                        },
                      }}
                    >
                      {profiles.map((profile, idx) => (
                        <div
                          // eslint-disable-next-line react/no-array-index-key
                          key={idx}
                          className="user-item p-2 d-inline"
                        >
                          <FontAwesomeIcon
                            className="mr-1"
                            icon={faCircle}
                            size="sm"
                            color={profile.color}
                          />
                          <span style={{ color: profile.color }}>
                            {profile.username}
                          </span>
                        </div>
                      ))}
                    </OverlayScrollbarsComponent>
                  </Col>
                  <Col md={4} className="d-flex justify-content-end">
                    {videoChat && (
                      <div className="media-controls mr-3 align-self-center">
                        <FontAwesomeIcon
                          className="mr-3 icon"
                          size="lg"
                          icon={
                            isMicOn()
                              ? faMicrophone
                              : faMicrophoneSlash
                          }
                          onClick={() => {
                            window.sync.toggleLocalAudio();
                            this.forceUpdate();
                          }}
                        />
                        <FontAwesomeIcon
                          size="lg"
                          icon={isCamOn() ? faVideo : faVideoSlash}
                          onClick={() => {
                            window.sync.toggleLocalVideo();
                            this.forceUpdate();
                          }}
                        />
                      </div>
                    )}
                    <Button
                      variant={videoChat ? 'danger' : 'primary'}
                      size="sm"
                      onClick={this.handleCallBtn}
                    >
                      {videoChat ? 'Stop Call' : 'Start Call'}
                    </Button>
                  </Col>
                </Row>
              </ControlBar>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }