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

The following examples show how to use @fortawesome/free-solid-svg-icons#faMicrophone. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: video-player.jsx    From codeinterview-frontend with Apache License 2.0 5 votes vote down vote up 
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" />;
}
Example #2
Source File: room.jsx    From codeinterview-frontend with Apache License 2.0 4 votes vote down vote up 
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>
    );
  }