feat(vod): share button

Zibbp · Aug 12, 2023 · 0f3f914 · 0f3f914
1 parent 2d60f21
commit 0f3f914
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 14 deletions.
diff --git a/src/components/Vod/Menu.tsx b/src/components/Vod/Menu.tsx
@@ -18,6 +18,7 @@ import {
   IconTrashX,
   IconLock,
   IconLockOpen,
+  IconShare,
 } from "@tabler/icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
@@ -26,6 +27,7 @@ import { VodInfoModalContent } from "./InfoModalContent";
 import { VodPlaylistModalContent } from "./PlaylistModalContent";
 import { ROLES, useJsxAuth } from "../../hooks/useJsxAuth";
 import AdminVodDelete from "../Admin/Vods/Delete";
+import vodDataBus from "./EventBus";
 
 const useStyles = createStyles((theme) => ({
   action: {
@@ -135,6 +137,46 @@ export const VodMenu = ({ vod, style }: any) => {
     setDeletedOpened(false);
   };
 
+  const shareVideo = () => {
+    let shareUrl: string = "";
+    const url = window.location.origin;
+
+    // check if we are on a vod page
+    if (window.location.pathname.includes("/vods/") && window.location.pathname.includes(vod.id)) {
+      // get the current time
+      const { time } = vodDataBus.getData();
+      const roundedTime = Math.ceil(time);
+      // create the url
+      shareUrl = `${url}/vods/${vod.id}?t=${roundedTime}`;
+    } else {
+      // create the url
+      shareUrl = `${url}/vods/${vod.id}`;
+    }
+
+    // copy the url to the clipboard
+    try {
+      navigator.clipboard.writeText(shareUrl);
+
+      // show a notification
+      showNotification({
+        title: "Copied to Clipboard",
+        message: "The video url has been copied to your clipboard",
+      });
+
+    } catch (err) {
+      console.error(err);
+      // show a notification
+      showNotification({
+        title: "Error",
+        message: "The clipboard API requires HTTPS, falling back to a prompt",
+        color: "red",
+      });
+
+      // fallback to a prompt
+      prompt("Copy to clipboard: Ctrl+C, Enter", shareUrl);
+    }
+  }
+
   return (
     <div>
       <Menu shadow="md" width={200} position="top-end" withinPortal>
@@ -197,16 +239,22 @@ export const VodMenu = ({ vod, style }: any) => {
             loggedIn: true,
             roles: [ROLES.ADMIN],
           }) && (
-            <Menu.Item
-              color="red"
-              onClick={() => {
-                openDeleteModal();
-              }}
-              icon={<IconTrashX size={14} />}
-            >
-              Delete
-            </Menu.Item>
-          )}
+              <Menu.Item
+                color="red"
+                onClick={() => {
+                  openDeleteModal();
+                }}
+                icon={<IconTrashX size={14} />}
+              >
+                Delete
+              </Menu.Item>
+            )}
+          <Menu.Item
+            onClick={() => shareVideo()}
+            icon={<IconShare size={14} />}
+          >
+            Share
+          </Menu.Item>
         </Menu.Dropdown>
       </Menu>
       <Modal

diff --git a/src/components/Vod/VideoPlayer.tsx b/src/components/Vod/VideoPlayer.tsx
@@ -27,6 +27,7 @@ import {
 import ReactDOM from "react-dom";
 import TheaterModeIcon from "./TheaterModeIcon";
 import { escapeURL } from "../../util/util";
+import { useSearchParams } from 'next/navigation'
 
 const useStyles = createStyles((theme) => ({
   playerContainer: {
@@ -48,11 +49,13 @@ const NewVideoPlayer = ({ vod }: any) => {
   const player = useRef<MediaPlayerElement>(null);
   const playerRemote = useMediaRemote(player);
 
-  const [videoSource, setVideoSource] = useState<string>("");
+  const [videoSource, setVideoSource] = useState([{ src: "", type: "" }]);
   const [videoType, setVideoType] = useState<string>("");
   const [videoPoster, setVideoPoster] = useState<string>("");
   const [videoTitle, setVideoTitle] = useState<string>("");
 
+  const searchParams = useSearchParams()
+
   // Fetch playback data
   const { data } = useQuery({
     refetchOnWindowFocus: false,
@@ -91,9 +94,12 @@ const NewVideoPlayer = ({ vod }: any) => {
       type = "application/x-mpegURL";
     }
 
-    setVideoSource(
-      `${publicRuntimeConfig.CDN_URL}${escapeURL(vod.video_path)}`
-    );
+    setVideoSource([
+      {
+        src: `${publicRuntimeConfig.CDN_URL}${escapeURL(vod.video_path)}`,
+        type: type,
+      },
+    ]);
     setVideoType(type);
     setVideoTitle(vod.title);
 
@@ -125,6 +131,12 @@ const NewVideoPlayer = ({ vod }: any) => {
       player.current!.currentTime = data.time;
     }
 
+    // Check if time is set in the url
+    const time = searchParams.get("t");
+    if (time) {
+      player.current!.currentTime = parseInt(time);
+    }
+
     const mediaFullscreenButton = document.querySelector("media-menu");
     const buttonContainer = document.createElement("div");