@fortawesome/free-solid-svg-icons#faBolt TypeScript Examples

export default function Home() {

  useEffect(() => {
    ReactGA.initialize('UA-55073449-9');
    ReactGA.pageview(window.location.pathname + window.location.search);
  })

  function shareOnFacebook() {
    window.open(
      'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent('https://www.zwiftworkout.com/'),
      'facebook-share-dialog',
      'width=626,height=436');
    return false;
  }

  return (
    <div className="home">
      <Helmet>
        <meta name="description" content="Edit and share your Zwift workouts directly from your browser" />
        <meta property="og:title" content="Zwift Workout Editor" />
        <meta property="og:description" content="Edit and share your Zwift workouts directly from your browser" />
        <link rel="canonical" href="https://www.zwiftworkout.com/" />  
        <meta property="og:url" content="https://www.zwiftworkout.com/" />      
      </Helmet>
      <div className="hero">
        <img src={Icon} alt="logo" width="100" />
        <h1>Zwift Workout Editor</h1>
        <Link to="/editor/new" className="btn btn-primary btn-xl">Open Editor</Link>
      </div>
      <div className="features">
        <h2>Top features</h2>
        <p>Why should I use it?</p>
        <div className="perks">
          <div>
            <h3><FontAwesomeIcon icon={faBiking} fixedWidth /><FontAwesomeIcon icon={faRunning} fixedWidth /> Bike & Run</h3>
            <p>Works both for Running and Cycling workouts</p>
          </div>
          <div>
            <h3><FontAwesomeIcon icon={faBolt} fixedWidth /> Fast</h3>
            <p>Super fast Online editor for your Zwift workout files.</p>
          </div>
          <div>
            <h3><FontAwesomeIcon icon={faLaptop} fixedWidth /> CPU Friendly</h3>
            <p>Edit your workout files outside Zwift - don't overload you computer</p>
          </div>
          <div>
            <h3><FontAwesomeIcon icon={faCloud} fixedWidth /> Share</h3>
            <p>Easily share your workout files with your friends</p>
          </div>
          <div>
            <h3><FontAwesomeIcon icon={faPiggyBank} fixedWidth /> Open Source</h3>
            <p>This software is free to use.</p>
          </div>
        </div>
      </div>
      <div className="blue">
        <div className="share" id="share">
          <h2>Do you like this?</h2>
          <p>Please help me out by sharing this page on Social Media</p>
          <a href="https://twitter.com/intent/tweet?text=Check%20out%20this%20Zwift%20Workout%20%20Editor%20https://www.zwiftworkout.com/">
            <img src={Twitter} alt="Twitter" width="80" />
          </a>
          <a href="#share" onClick={shareOnFacebook}>
            <img src={Facebook} alt="Facebook" width="80" />
          </a>
        </div>
      </div>
      <div className="black">
        <div className="about">
          <h2>About me</h2>
          <div className="bio">
            <h3>Bio</h3>
            <p>I'm a full stack developer and I love cycling. I joined Zwift during the 2020 lockdown and I loved it.</p>
            <p>Find me on Zwift (Carlo Schiesaro <span role="img" aria-label="Italy">??</span>) or follow on <a href="https://www.strava.com/athletes/4523127" target="blank">Strava</a></p>
          </div>
          <div className="contact">
            <h3>Support</h3>
            <p>If you'd like to report for a bug or ask for a new feature please use my <a href="https://github.com/breiko83/zwo-editor" target="blank">github repository</a>.</p>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  )
}

Label = (props: {
  sportType: string;
  duration: string;
  distance?: number;
  power?: number;
  powerStart?: number;
  powerEnd?: number;
  weight?: number;
  ftp?: number;
  pace?: number;
  cadence?: number;
  setCadence?: Function;
  speed?: number;
  speedStart?: number;
  speedEnd?: number;
}) => {
  const paces = ["1M", "5K", "10K", "HM", "M"];

  return (
    <div className="label">
      {props.duration && props.duration !== '00:00' && (
        <div>
          <FontAwesomeIcon icon={faClock} fixedWidth /> {props.duration}
        </div>
      )}
      {props.power && props.sportType === "bike" && (
        <div>
          <FontAwesomeIcon icon={faBolt} fixedWidth /> {props.power}W
        </div>
      )}
      {props.powerStart && props.powerEnd && props.sportType === "bike" && (
        <div>
          <FontAwesomeIcon icon={faBolt} fixedWidth /> {props.powerStart}W -{" "}
          {props.powerEnd}W
        </div>
      )}
      {props.weight && props.power && props.ftp && props.sportType === "bike" && (
        <div>
          {(props.power / props.weight).toFixed(1)}W/Kg &middot;{" "}
          {((props.power / props.ftp) * 100).toFixed(0)}% FTP
        </div>
      )}
      {props.powerStart &&
        props.powerEnd &&
        props.ftp &&
        props.sportType === "bike" && (
          <div>
            {((props.powerStart / props.ftp) * 100).toFixed(0)}% FTP -{" "}
            {((props.powerEnd / props.ftp) * 100).toFixed(0)}% FTP
          </div>
        )}
      {props.sportType === "run" && props.distance !== undefined && props.distance !== 0 && (
        <div>
          <FontAwesomeIcon icon={faRuler} fixedWidth />{" "}
          {props.distance.toFixed(0)} m
        </div>
      )}
      {props.power &&
        props.ftp &&
        props.pace !== null &&
        props.sportType === "run" && (
          <div>
            {((props.power / props.ftp) * 100).toFixed(1).replace(/[.]0$/, "")}%{" "}
            {paces[props.pace || 0]} pace
          </div>
        )}
      {props.powerStart &&
        props.powerEnd &&
        props.ftp &&
        props.pace !== null &&
        props.sportType === "run" && (
          <div>
            {((props.powerStart / props.ftp) * 100).toFixed(0)}% to{" "}
            {((props.powerEnd / props.ftp) * 100).toFixed(0)}%{" "}
            {paces[props.pace || 0]} pace
          </div>
        )}
      {props.sportType === "bike" && (
        <div className="cadence-row">
          <label className="cadenceLabel">Cadence</label>
          <input
            type="number"
            min="40"
            max="150"
            step="5"
            name="cadence"
            value={props.cadence || ""}
            onChange={(e) => {
              if (props.setCadence) props.setCadence(parseInt(e.target.value));
            }}
            onClick={(e) => {
              e.stopPropagation();
            }}
            className="textField cadence"
          />
        </div>
      )}
      {props.sportType === "run" && props.speed && (
        <div>{props.speed?.toFixed(1)} Km/h</div>
      )}
      {props.sportType === "run" && props.speedStart && props.speedEnd && (
        <div>
          {props.speedStart?.toFixed(1)} Km/h - {props.speedEnd?.toFixed(1)}{" "}
          Km/h
        </div>
      )}
    </div>
  );
}

PreJoinPage = () => {
  // state to pass onto room
  const [url, setUrl] = useState('ws://localhost:7880');
  const [token, setToken] = useState<string>('');
  const [simulcast, setSimulcast] = useState(true);
  const [dynacast, setDynacast] = useState(true);
  const [adaptiveStream, setAdaptiveStream] = useState(true);
  const [videoEnabled, setVideoEnabled] = useState(false);
  const [audioEnabled, setAudioEnabled] = useState(true);
  // disable connect button unless validated
  const [connectDisabled, setConnectDisabled] = useState(true);
  const [videoTrack, setVideoTrack] = useState<LocalVideoTrack>();
  const [audioDevice, setAudioDevice] = useState<MediaDeviceInfo>();
  const [videoDevice, setVideoDevice] = useState<MediaDeviceInfo>();
  const navigate = useNavigate();

  useEffect(() => {
    if (token && url) {
      setConnectDisabled(false);
    } else {
      setConnectDisabled(true);
    }
  }, [token, url]);

  const toggleVideo = async () => {
    if (videoTrack) {
      videoTrack.stop();
      setVideoEnabled(false);
      setVideoTrack(undefined);
    } else {
      const track = await createLocalVideoTrack({
        deviceId: videoDevice?.deviceId,
      });
      setVideoEnabled(true);
      setVideoTrack(track);
    }
  };

  useEffect(() => {
    // enable video by default
    createLocalVideoTrack({
      deviceId: videoDevice?.deviceId,
    }).then((track) => {
      setVideoEnabled(true);
      setVideoTrack(track);
    });
  }, [videoDevice]);

  const toggleAudio = () => {
    if (audioEnabled) {
      setAudioEnabled(false);
    } else {
      setAudioEnabled(true);
    }
  };

  const selectVideoDevice = (device: MediaDeviceInfo) => {
    setVideoDevice(device);
    if (videoTrack) {
      if (videoTrack.mediaStreamTrack.getSettings().deviceId === device.deviceId) {
        return;
      }
      // stop video
      videoTrack.stop();
    }
  };

  const connectToRoom = async () => {
    if (videoTrack) {
      videoTrack.stop();
    }

    if (
      window.location.protocol === 'https:' &&
      url.startsWith('ws://') &&
      !url.startsWith('ws://localhost')
    ) {
      alert('Unable to connect to insecure websocket from https');
      return;
    }

    const params: { [key: string]: string } = {
      url,
      token,
      videoEnabled: videoEnabled ? '1' : '0',
      audioEnabled: audioEnabled ? '1' : '0',
      simulcast: simulcast ? '1' : '0',
      dynacast: dynacast ? '1' : '0',
      adaptiveStream: adaptiveStream ? '1' : '0',
    };
    if (audioDevice) {
      params.audioDeviceId = audioDevice.deviceId;
    }
    if (videoDevice) {
      params.videoDeviceId = videoDevice.deviceId;
    } else if (videoTrack) {
      // pass along current device id to ensure camera device match
      const deviceId = await videoTrack.getDeviceId();
      if (deviceId) {
        params.videoDeviceId = deviceId;
      }
    }
    navigate({
      pathname: '/room',
      search: '?' + new URLSearchParams(params).toString(),
    });
  };

  let videoElement: ReactElement;
  if (videoTrack) {
    videoElement = <VideoRenderer track={videoTrack} isLocal={true} />;
  } else {
    videoElement = <div className="placeholder" />;
  }

  return (
    <div className="prejoin">
      <main>
        <h2>LiveKit Video</h2>
        <hr />
        <div className="entrySection">
          <div>
            <div className="label">LiveKit URL</div>
            <div>
              <input type="text" name="url" value={url} onChange={(e) => setUrl(e.target.value)} />
            </div>
          </div>
          <div>
            <div className="label">Token</div>
            <div>
              <input
                type="text"
                name="token"
                value={token}
                onChange={(e) => setToken(e.target.value)}
              />
            </div>
          </div>
          <div className="options">
            <div>
              <input
                id="simulcast-option"
                type="checkbox"
                name="simulcast"
                checked={simulcast}
                onChange={(e) => setSimulcast(e.target.checked)}
              />
              <label htmlFor="simulcast-option">Simulcast</label>
            </div>
            <div>
              <input
                id="dynacast-option"
                type="checkbox"
                name="dynacast"
                checked={dynacast}
                onChange={(e) => setDynacast(e.target.checked)}
              />
              <label htmlFor="dynacast-option">Dynacast</label>
            </div>
            <div>
              <input
                id="adaptivestream-option"
                type="checkbox"
                name="adaptiveStream"
                checked={adaptiveStream}
                onChange={(e) => setAdaptiveStream(e.target.checked)}
              />
              <label htmlFor="adaptivestream-option">Adaptive Stream</label>
            </div>
          </div>
        </div>

        <div className="videoSection">
          <AspectRatio ratio={16 / 9}>{videoElement}</AspectRatio>
        </div>

        <div className="controlSection">
          <div>
            <AudioSelectButton
              isMuted={!audioEnabled}
              onClick={toggleAudio}
              onSourceSelected={setAudioDevice}
            />
            <VideoSelectButton
              isEnabled={videoTrack !== undefined}
              onClick={toggleVideo}
              onSourceSelected={selectVideoDevice}
            />
          </div>
          <div className="right">
            <ControlButton
              label="Connect"
              disabled={connectDisabled}
              icon={faBolt}
              onClick={connectToRoom}
            />
          </div>
        </div>
      </main>
      <footer>
        This page is built with <a href="https://github.com/livekit/livekit-react">LiveKit React</a>
        &nbsp; (
        <a href="https://github.com/livekit/livekit-react/blob/master/example/src/PreJoinPage.tsx">
          source
        </a>
        )
      </footer>
    </div>
  );
}