diff --git a/src/components/Vod/Menu.tsx b/src/components/Vod/Menu.tsx index 18d557b..c08b120 100644 --- 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: { @@ -74,8 +76,8 @@ export const VodMenu = ({ vod, style }: any) => { ).then(() => { queryClient.invalidateQueries(["playback-data"]); showNotification({ - title: "Als gesehen markiert", - message: "VOD wurde erfolgreich als angesehen markiert", + title: "Marked as Watched", + message: "VOD has been successfully marked as watched", }); }); }, @@ -94,8 +96,8 @@ export const VodMenu = ({ vod, style }: any) => { ).then(() => { queryClient.invalidateQueries(["vod", vod.id]); showNotification({ - title: "Video aktualisiert", - message: `Das Video wurde ${lock ? "gesperrt" : "entsperrt"}`, + title: "Video Updated", + message: `Video has been ${lock ? "locked" : "unlocked"}`, }); if (lock == true) { isLocked.current = true; @@ -120,8 +122,8 @@ export const VodMenu = ({ vod, style }: any) => { ).then(() => { queryClient.invalidateQueries(["playback-data"]); showNotification({ - title: "Als ungesehen markiert", - message: "VOD wurde erfolgreich als ungesehen markiert", + title: "Marked as Unwatched", + message: "VOD has been successfully marked as unwatched", }); }); }, @@ -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 (