Merge pull request #29 from Numble3/sukyung

feat: hls player
Numble3 · May 12, 2022 · dc3fe58 · dc3fe58
2 parents 11dddcc + 6a75fbc
commit dc3fe58
Show file tree

Hide file tree

Showing 4 changed files with 627 additions and 457 deletions.
diff --git a/components/custom/hls-player.tsx b/components/custom/hls-player.tsx
@@ -0,0 +1,34 @@
+import { useRef } from "react";
+import React from "react";
+import dynamic from "next/dynamic";
+
+const ReactHlsPlayer = dynamic(() => import("react-hls-player"), {
+  ssr: false,
+});
+
+interface PlayerProps {
+  width?: string;
+  height?: string;
+  controls?: boolean;
+  videoSrc: string;
+}
+const HlsPlayer = ({
+  width = "100%",
+  height = "auto",
+  controls = true,
+  videoSrc,
+}: PlayerProps) => {
+  const playerRef = useRef<HTMLVideoElement>(null);
+  return (
+    <ReactHlsPlayer
+      src={videoSrc}
+      autoPlay={false}
+      controls={controls}
+      width={width}
+      height={height}
+      playerRef={playerRef}
+    />
+  );
+};
+
+export default HlsPlayer;