remove react-player and use video tag instead

MarconLP · Jul 15, 2023 · 705a07b · 705a07b · vercel · Jul 15, 2023
1 parent 4f2f629
commit 705a07b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 96 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,7 +50,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-media-recorder": "^1.6.6",
-    "react-player": "^2.12.0",
     "react-popper": "^2.3.0",
     "recordrtc": "^5.6.2",
     "stripe": "^12.12.0",

diff --git a/src/pages/share/[videoId].tsx b/src/pages/share/[videoId].tsx
@@ -2,7 +2,6 @@ import { type NextPage } from "next";
 import Head from "next/head";
 
 import { api } from "~/utils/api";
-import ReactPlayer from "react-player";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import Image from "next/image";
@@ -127,36 +126,39 @@ const VideoList: NextPage = () => {
         <div className="flex h-full w-full grow flex-col items-center justify-start overflow-auto bg-[#fbfbfb]">
           <div className="flex aspect-video max-h-[calc(100vh_-_169px)] w-full justify-center bg-black 2xl:max-h-[1160px]">
             {video?.video_url && (
-              <ReactPlayer
-                width="100%"
-                height="100%"
-                controls={true}
-                onPlay={() =>
-                  posthog?.capture("play video", {
-                    videoId: video.id,
-                    videoCreatedAt: video.createdAt,
-                    videoUpdatedAt: video.updatedAt,
-                    videoUser: video.user.id,
-                    videoSharing: video.sharing,
-                    videoDeleteAfterLinkExpires:
-                      video.delete_after_link_expires,
-                    videoShareLinkExpiresAt: video.shareLinkExpiresAt,
-                  })
-                }
-                onPause={() =>
-                  posthog?.capture("pause video", {
-                    videoId: video.id,
-                    videoCreatedAt: video.createdAt,
-                    videoUpdatedAt: video.updatedAt,
-                    videoUser: video.user.id,
-                    videoSharing: video.sharing,
-                    videoDeleteAfterLinkExpires:
-                      video.delete_after_link_expires,
-                    videoShareLinkExpiresAt: video.shareLinkExpiresAt,
-                  })
-                }
-                url={video.video_url}
-              />
+              <>
+                <video
+                  controls
+                  onPlay={() =>
+                    posthog?.capture("play video", {
+                      videoId: video.id,
+                      videoCreatedAt: video.createdAt,
+                      videoUpdatedAt: video.updatedAt,
+                      videoUser: video.user.id,
+                      videoSharing: video.sharing,
+                      videoDeleteAfterLinkExpires:
+                        video.delete_after_link_expires,
+                      videoShareLinkExpiresAt: video.shareLinkExpiresAt,
+                    })
+                  }
+                  onPause={() =>
+                    posthog?.capture("pause video", {
+                      videoId: video.id,
+                      videoCreatedAt: video.createdAt,
+                      videoUpdatedAt: video.updatedAt,
+                      videoUser: video.user.id,
+                      videoSharing: video.sharing,
+                      videoDeleteAfterLinkExpires:
+                        video.delete_after_link_expires,
+                      videoShareLinkExpiresAt: video.shareLinkExpiresAt,
+                    })
+                  }
+                  className="h-full w-full"
+                >
+                  <source src={video.video_url} />
+                  Your browser does not support the video tag.
+                </video>
+              </>
             )}
           </div>
           <div className="mb-10 mt-4 w-full max-w-[1800px] pl-[24px]">