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

The following examples show how to use @fortawesome/free-solid-svg-icons#faVideoSlash. 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: 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>
    );
  }