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

The following examples show how to use @fortawesome/free-solid-svg-icons#faVideo. 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: index.js    From Webiu with MIT License 6 votes vote down vote up 
VideoPlayer = ({ videoSrcURL, title, header, width, height }) => {

  return (
    <div>
      {header ? <div className="header-component">
            <h2 className="title">
              <FontAwesomeIcon className="icon-h2" icon={faVideo} /> {header}
            </h2>
      </div> : null}
      <div className="videoplayer-component">
        {videoSrcURL ? 
            <iframe width={width} height={height}
                    src={videoSrcURL}
                    title="YouTube video player" frameborder="0" 
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                    allowfullscreen>
            </iframe>
         : null}
         {title ? <p className="video-para">{title}</p> : null}
      </div>
    </div>
  )
}
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>
    );
  }
Example #3
Source File: TagsBlock.jsx    From movies with MIT License 4 votes vote down vote up 
function TagsBlock({ t, data }) {
  const {
    production_countries, genres, release_date, runtime
  } = data;

  if (
    (production_countries.length < 1) &&
    (genres.length < 1) &&
    !release_date &&
    !runtime
  ) return null;

  const getDuration = (mins) => {
    const h = Math.floor(mins / 60);
    let m = mins % 60;
    m = m < 10 ? `0${m}` : m;
    return `${h}${t('movie_details.duration.hours')} ${m}${t('movie_details.duration.minutes')}`;
  };

  const getReleaseDate = (val) => val.split('-').reverse().join('.');

  const mapWithSemicolons = (list) => list.map((item, index) => {

    const value = (
      <span className="tag-value">
        {capitalize(item.name)}
      </span>
    );

    return (
      <Fragment key={`${index}_${item.name}`}>
        {index !== (list.length - 1)
          ? (
            <>
              {value}
              <span className={styles.tagSemicolon}>,</span>
            </>
          )
          : value}
      </Fragment>
    );
  });

  const tags = [];

  const fields = [
    {
      value: genres, icon: faVideo, func: mapWithSemicolons, cls: styles.tagGenres
    },
    {
      value: production_countries, icon: faGlobe, func: mapWithSemicolons, cls: 'countries'
    },
    {
      value: release_date, icon: faCalendarAlt, func: getReleaseDate, cls: 'release-date'
    },
    {
      value: runtime, icon: faHistory, func: getDuration, cls: 'runtime'
    },
  ];

  fields.forEach(({
    value, icon, cls, func
  }) => {
    if (!isEmpty(value)) {
      tags.push({ icon, cls, text: func(value) });
    }
  });

  return (
    <div className={styles.tagsBlock}>
      {tags.map((item, index) => (
        <span
          key={`${index}_${item.text}`}
          className={cn(styles.tagItem, item.cls)}
        >
          <FontAwesomeIcon
            className={styles.tagIcon}
            icon={item.icon}
          />
          <span className={styles.tagText}>
            {item.text}
          </span>
        </span>
      ))}
    </div>
  );
}