Merge in react app code

From  sluchajfun and youtube-heardle-template

2 files changed, 145 insertions, 0 deletions

diff --git a/src/components/Player/index.styled.ts b/src/components/Player/index.styled.ts
new file mode 100644
index 0000000..4200fe1
--- /dev/null
+++ b/src/components/Player/index.styled.ts
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+export const ProgressBackground = styled.div`
+  position: relative;
+  z-index: -1;
+
+  width: 100%;
+  height: 20px;
+  background-color: ${({ theme }) => theme.gray};
+  border-radius: 2px;
+
+  margin-top: 5%;
+`;
+
+export const Progress = styled.div<{ value: number }>`
+  width: ${({ value }) => value * 6.25}%;
+  height: 20px;
+
+  align-self: flex-start;
+
+  background-color: ${({ theme }) => theme.green};
+
+  border-radius: 2px;
+
+  transition: width 0.5s;
+`;
+
+export const Separator = styled.div`
+  position: absolute;
+  top: 0;
+
+  width: 0.8px;
+  height: 100%;
+
+  background-color: ${({ theme }) => theme.border100};
+`;
+
+export const TimeStamps = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+`;
+
+export const TimeStamp = styled.p`
+  color: ${({ theme }) => theme.text};
+`;
diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx
new file mode 100644
index 0000000..82f600e
--- /dev/null
+++ b/src/components/Player/index.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import YouTube from "react-youtube";
+import { IoPlay } from "react-icons/io5";
+import { event } from "react-ga";
+
+import { playTimes } from "../../constants";
+
+import * as Styled from "./index.styled";
+
+interface Props {
+  id: string;
+  currentTry: number;
+}
+
+export function Player({ id, currentTry }: Props) {
+  const opts = {
+    width: "0",
+    height: "0",
+  };
+
+  // react-youtube doesn't export types for this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const playerRef = React.useRef<any>(null);
+
+  const currentPlayTime = playTimes[currentTry];
+
+  const [play, setPlay] = React.useState<boolean>(false);
+
+  const [currentTime, setCurrentTime] = React.useState<number>(0);
+
+  const [isReady, setIsReady] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    setInterval(() => {
+      playerRef.current?.internalPlayer
+        .getCurrentTime()
+        .then((time: number) => {
+          setCurrentTime(time);
+        });
+    }, 250);
+  }, []);
+
+  React.useEffect(() => {
+    if (play) {
+      if (currentTime * 1000 >= currentPlayTime) {
+        playerRef.current?.internalPlayer.pauseVideo();
+        playerRef.current?.internalPlayer.seekTo(0);
+        setPlay(false);
+      }
+    }
+  }, [play, currentTime]);
+
+  // don't call play video each time currentTime changes
+  const startPlayback = React.useCallback(() => {
+    playerRef.current?.internalPlayer.playVideo();
+    setPlay(true);
+    event({
+      category: "Player",
+      action: "Played song",
+    });
+  }, []);
+
+  const setReady = React.useCallback(() => {
+    setIsReady(true);
+  }, []);
+
+  return (
+    <>
+      <YouTube opts={opts} videoId={id} onReady={setReady} ref={playerRef} />
+      {isReady ? (
+        <>
+          <Styled.ProgressBackground>
+            {currentTime !== 0 && <Styled.Progress value={currentTime} />}
+            {playTimes.map((playTime) => (
+              <Styled.Separator
+                style={{ left: `${(playTime / 16000) * 100}%` }}
+                key={playTime}
+              />
+            ))}
+          </Styled.ProgressBackground>
+          <Styled.TimeStamps>
+            <Styled.TimeStamp>1s</Styled.TimeStamp>
+            <Styled.TimeStamp>16s</Styled.TimeStamp>
+          </Styled.TimeStamps>
+          <IoPlay
+            style={{ cursor: "pointer" }}
+            size={40}
+            color="#fff"
+            onClick={startPlayback}
+          />
+        </>
+      ) : (
+        <p>Loading player...</p>
+      )}
+    </>
+  );
+}