react-icons/fa#FaPause JavaScript Examples

render() {
    const paused = this.state.paused || this.state.audio === null;

    return (
      <Space
        size="small"
        style={{ width: "100%", alignItems: 'center' }}
        onClick={(e) => e.stopPropagation()}
      >
        <Button onClick={paused ? this.play : this.pause}>
          {paused ? <FaPlay /> : <FaPause />}
        </Button>

        {this.state.error ? (
          <div>Unable to play</div>
        ) : this.audio ? (
          <div style={{ display: "flex", flex: 1, alignItems: "center" }}>
            <PlaybackControl
              current={this.state.current}
              duration={this.state.duration}
              onChange={time => {
                this.audio.currentTime = time;
                if (paused) this.audio.pause();
              }}
            />
          </div>
        ) : null}
      </Space>
    );
  }

Controls = (props) => {
  return (
    <>
      <div className="loop">
        <ImLoop />
      </div>
      <div className="central-controls">
        <div>
          <div className="rewind">
            <TiMediaRewindOutline />
          </div>
          <div className="playpause">
            <FaPause />
          </div>
          <div className="foward">
            <TiMediaFastForwardOutline />
          </div>
        </div>

      </div>
      <div className="settings">
        <GoSettings />
      </div>
    </>
  )
}

LowerControls = (props) => {
  const { Playing, CurrentTime, Duration, section } = useContext(VideoContext)
  const [fullscreen, setfullscreen] = useState(false)

  const { video } = props
  function play(e) {
    video.current.play()
    if (props.onPlay) {
      props.onPlay(e)
    }
  }
  function forward(e) {
    let dur = (5 / 100) * video.current.duration

    video.current.currentTime += dur
  }
  function pause(e) {
    video.current.pause()
  }
  const enterFullScreen = (e) => {
    section.current.requestFullscreen()
    if (props.onEnterFullScreen) {
      props.onEnterFullScreen(e)
    }
    setfullscreen(true)

  }
  const exitFullScreen = (e) => {
    section.current.ownerDocument.exitFullscreen()
    setfullscreen(false)

  }
  return (
    <>
      <div className="controls">
        <div className="play">
          {Playing ? <FaPause onClick={pause} /> :
            <FaPlay onClick={play} />}
        </div>
        <div className="foward">
          <FaForward onClick={forward} />
        </div>
        <div className="timestamps">
          {CurrentTime} / {Duration}
        </div>
        <div className="settimgs">
          <div className="fullscreen">
            {fullscreen === false ? <RiFullscreenFill onClick={enterFullScreen} /> :
              <MdFullscreenExit onClick={exitFullScreen} />}
          </div>
          {props.nosettings ? <></> :
            <Settings {...props} />}
        </div>
      </div>
    </>
  )
}

ContextMenu = (props) => {
  const { contextmenu, CMposition, Playing, setcontextmenu, src, setplayback, video } = useContext(VideoContext)
  const { left, top } = CMposition
  function PictureInPicture(e) {
    video.current.requestPictureInPicture()
  }
  function play(e) {
    video.current.play()
  }
  function pause(e) {
    video.current.pause()
  }
  function setClipboard() {
    let text = video.current.currentSrc
    navigator.clipboard.writeText(text).then(function () {
    }, function () {
      // eslint-disable-next-line no-restricted-globals
      alert('failed to copy url')
    });
  }
  return (
    <div style={contextmenu === false ? { display: 'none' } : {}} onClick={(e) => { setcontextmenu(!contextmenu) }} className="contextcover">
      <div style={{ marginTop: top, marginLeft: left }} className="contextmenu">
        <div onClick={Playing ? pause : play} className="menuitem">
          {Playing ? <>
            <span className="icon">
              <FaPause />
            </span>
            <span className="item">Pause</span></> :
            <>
              <span className="icon">
                <FaPlay />
              </span>
              <span className="item">Play</span></>}
        </div>
        {props.nodownload ? <></> :
          <a download="video" href={src} className="menuitem">
            <span className="icon">
              <FiDownloadCloud />
            </span>
            <span className="item">Download</span>
          </a>}
        <div onClick={PictureInPicture} className="menuitem">
          <span className="icon">
            <MdPictureInPicture />
          </span>
          <span className="item">MiniPlayer</span>
        </div>
        <div onClick={(e) => { setplayback(true) }} className="menuitem">
          <span className="icon">
            <GiSpeedometer />
          </span>
          <span className="item">Playback Speed</span>
        </div>
        <div onClick={(e) => { setClipboard() }} className="menuitem">
          <span className="icon">
            <MdFlipToBack />
          </span>
          <span className="item">Copy Video Adress</span>
        </div>
      </div>
    </div>
  )
}

Header = () => {
  const [type, setType] = useState<string>(DIJKSTRA);
  const [pause, setPause] = useState<boolean>(false);
  const context = useContext<ContextType>(Context);
  const {
    begin,
    end,
    updateItem,
    delay,
    pathFinder,
    clear,
    clearPath,
    board,
    isVisualized,
    setIsPathExist,
    setIsVisualized,
    setIsHelped,
  } = context;

  const onAlgoChange = (e: ElementEvent<HTMLSelectElement>) => {
    setType(e.target.value);
  };

  const onDelayChange = (e: ElementEvent<HTMLSelectElement>) => {
    delay.current = Number(e.target.value);
  };

  const onVisualize = () => {
    if (isVisualized) return;
    clearPath();
    setIsVisualized(true);

    pathFinder.current = new PathFinder[type]({
      begin: begin.current,
      end: end.current,
      updateItem,
      board: board.current,
    });
    const isPossiblePath = pathFinder.current.execute();
    setIsPathExist(isPossiblePath);
  };

  const onClearAll = () => {
    if (isVisualized && !pause) return;
    if (pause) setPause(false);
    setIsVisualized(false);

    clear();
  };

  const onClearPath = () => {
    if (isVisualized && !pause) return;
    if (pause) setPause(false);
    setIsVisualized(false);

    clearPath();
  };

  const onPause = () => {
    if (pause) {
      setPause(false);
      pathFinder.current.resumeTimers();
    } else {
      setPause(true);
      pathFinder.current.stopTimers();
    }
  };

  const onHelp = () => {
    setIsHelped(true);
  };

  return (
    <div className="content-header">
      <select
        className="content-header__select"
        onChange={onAlgoChange}
        id="algorithm"
        disabled={isVisualized}
      >
        <option value={DIJKSTRA} defaultChecked>
          Dijkstra
        </option>
        <option value={BELLMAN_FORD}>Bellman-Ford</option>
        <option value={BFS}>0-1 BFS</option>
        <option value={DFS}>DFS</option>
        <option value={A_STAR}>A*</option>
      </select>
      <select
        className="content-header__select"
        onChange={onDelayChange}
        defaultValue={300}
        disabled={isVisualized}
      >
        <option value={DELAY_SLOW}>slowest</option>
        <option value={DELAY_SLOWEST}>slow</option>
        <option value={DELAY_NORMAL}>normal</option>
        <option value={DELAY_FAST}>fast</option>
        <option value={DELAY_FASTEST}>fastest</option>
      </select>
      <button
        className="content-header__button"
        onClick={onVisualize}
        disabled={isVisualized}
        type="button"
      >
        Visualize!
      </button>
      <button
        className="content-header__button"
        onClick={onClearAll}
        disabled={isVisualized && !pause}
        type="button"
      >
        Clear All
      </button>
      <button
        className="content-header__button"
        onClick={onClearPath}
        disabled={isVisualized && !pause}
        type="button"
      >
        Clear Path
      </button>
      <button
        className="content-header__button--pause"
        onClick={onPause}
        disabled={!isVisualized}
        type="button"
      >
        {pause ? <FaPlay /> : <FaPause />}
      </button>
      <button
        className="content-header__button--usage"
        onClick={onHelp}
        disabled={isVisualized && !pause}
        type="button"
      >
        How to use?
      </button>
    </div>
  );
}

AudioPlayer = ({ src }) => {
  /** @type {import("react").RefObject<HTMLAudioElement>} */
  const audio = useRef();
  const wasPlaying = useRef(false);
  const [enabled, setEnabled] = useState(false);

  const [state, dispatch] = useReducer((state, action) => {
    switch(action.type) {
      case "duration": return { ...state, duration: action.payload };
      case "current": return { ...state, currentTime: action.payload };
      case "loaded": return { ...state, loaded: true };
      case "error": return { ...state, error: true };
      case "play": return { ...state, playing: true };
      case "pause": return { ...state, playing: false };
      case "buffer": return { ...state, buffer: action.payload };
    }
  }, initialState);

  const format = useMemo(() => {
    if (state.duration >= 3600) {
      return ["hours", "minutes", "seconds"];
    } else {
      return ["minutes", "seconds"];
    }
  }, [state.duration]);

  const play = useCallback(() => {
    audio?.current?.play?.();
  }, [audio]);

  const pause = useCallback(() => {
    audio?.current?.pause?.();
  }, [audio]);

  const togglePlay = useCallback(() => {
    globalAudioRef.current?.pause();
    state.playing ? pause() : play();
    globalAudioRef.current = audio.current;
  }, [audio, state, play, pause]);

  const onSeekStart = useCallback(() => {
    wasPlaying.current = state.playing;
    if (state.playing) audio.current.pause();
  }, [audio, state, wasPlaying]);

  const onSeekEnd = useCallback(() => {
    if (wasPlaying.current) {
      audio.current.play();
    }
  }, [audio, wasPlaying]);

  const onSeek = useCallback((time) => {
    audio.current.currentTime = time;
  }, [audio]);

  const waitForPlayer = useCallback(() => {
    if (state?.error) {
      return;
    } else if (state?.loaded) {
      play();
    } else {
      setTimeout(() => waitForPlayer(), 10);
    }
  }, [state]);

  return enabled ? (
    <Block name="player" onClick={e => e.stopPropagation()}>
      {state.error ? (
        <Elem name="loading">
          Unable to play
        </Elem>
      ) : state.loaded ? (
        <Elem name="playback">
          <Elem name="controls" tag={Space} spread>
            <Space size="small">
              <Elem name="play" onClick={togglePlay}>
                {state.playing ? <FaPause/> : <FaPlay/>}
              </Elem>
              <Elem name="track">
                {filename(src)}
              </Elem>
            </Space>
            <Elem tag={Space} size="small" name="time">
              <Duration value={state.currentTime} format={format}/>
              {" / "}
              <Duration value={state.duration} format={format}/>
            </Elem>
          </Elem>

          <AudioSeeker
            currentTime={state.currentTime}
            duration={state.duration}
            buffer={state.buffer}
            onSeekStart={onSeekStart}
            onSeekEnd={onSeekEnd}
            onChange={onSeek}
          />
        </Elem>
      ) : (
        <Elem name="loading">
          <Spinner size="24"/>
        </Elem>
      )}

      <audio
        ref={audio}
        controls={false}
        preload="metadata"
        onPlay={() => dispatch({ type: 'play' })}
        onPause={() => dispatch({ type: 'pause' })}
        onTimeUpdate={() => dispatch({ type: "current", payload: audio.current.currentTime })}
        onDurationChange={() => dispatch({ type: "duration", payload: audio.current.duration })}
        onCanPlay={() => dispatch({ type: "loaded" })}
        onProgress={() => dispatch({ type: "buffer", payload: audio.current.buffered })}
        onError={() => dispatch({ type: "error" })}
      >
        <source src={src} type="audio/wav"/>
      </audio>
    </Block>
  ) : (
    <Block name="player" onClick={(e) => {
      e.stopPropagation();
      setEnabled(true);
      waitForPlayer();
    }}>
      <Elem name="controls" tag={Space} spread>
        <Space size="small">
          <Elem name="play">
            <FaPlay/>
          </Elem>
          <Elem name="track">
            Click to load
          </Elem>
        </Space>
        <Elem tag={Space} size="small" name="time">
        </Elem>
      </Elem>
    </Block>
  );

}