Adds watermark to Camera Feed and disables access to context menu. (#…

…7885)

* Adds watermark and disable context menu access in camera feed

* Update src/Components/CameraFeed/CameraFeed.tsx

src/Components/CameraFeed/CameraFeed.tsx

@@ -10,6 +10,7 @@ import FeedNetworkSignal from "./FeedNetworkSignal";
 import NoFeedAvailable from "./NoFeedAvailable";
 import FeedControls from "./FeedControls";
 import Fullscreen from "../../CAREUI/misc/Fullscreen";
+import FeedWatermark from "./FeedWatermark";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 
 interface Props {
@@ -87,7 +88,6 @@ export default function CameraFeed(props: Props) {
     setState("loading");
     initializeStream();
   };
-
   return (
     <Fullscreen fullscreen={isFullscreen} onExit={() => setFullscreen(false)}>
       <div
@@ -120,6 +120,7 @@ export default function CameraFeed(props: Props) {
         <div className="group relative aspect-video">
           {/* Notifications */}
           <FeedAlert state={state} />
+          {player.status === "playing" && <FeedWatermark />}
 
           {/* No Feed informations */}
           {state === "host_unreachable" && (
@@ -150,6 +151,7 @@ export default function CameraFeed(props: Props) {
                 url={streamUrl}
                 ref={playerRef.current as LegacyRef<ReactPlayer>}
                 controls={false}
+                pip={false}
                 playsinline
                 playing
                 muted
@@ -167,10 +169,12 @@ export default function CameraFeed(props: Props) {
             </div>
           ) : (
             <video
+              onContextMenu={(e) => e.preventDefault()}
               className="absolute inset-0 w-full"
               id="mse-video"
               autoPlay
               muted
+              disablePictureInPicture
               playsInline
               onPlay={player.onPlayCB}
               onEnded={() => player.setStatus("stop")}

src/Components/CameraFeed/FeedWatermark.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from "react";
+import useAuthUser from "../../Common/hooks/useAuthUser";
+
+export default function FeedWatermark() {
+  const me = useAuthUser();
+  return (
+    <>
+      <Watermark className="left-1/3 top-1/3 -translate-x-1/2 -translate-y-1/2">
+        {me.username}
+      </Watermark>
+      <Watermark className="right-1/3 top-1/3 -translate-y-1/2 translate-x-1/2">
+        {me.username}
+      </Watermark>
+      <Watermark className="bottom-1/3 left-1/3 -translate-x-1/2 translate-y-1/2">
+        {me.username}
+      </Watermark>
+      <Watermark className="bottom-1/3 right-1/3 translate-x-1/2 translate-y-1/2">
+        {me.username}
+      </Watermark>
+    </>
+  );
+}
+
+const Watermark = (props: { children: string; className: string }) => {
+  const ref = useRef<HTMLSpanElement>(null);
+  const parentRef = useRef<HTMLElement | null>(null);
+
+  // This adds the element back if the element was removed from the DOM
+  useEffect(() => {
+    parentRef.current = ref.current?.parentElement || null;
+    let animationFrameId: number;
+
+    const checkWatermark = () => {
+      const watermark = ref.current;
+      const parent = parentRef.current;
+      if (watermark && parent && !parent.contains(watermark)) {
+        parent.appendChild(watermark);
+      }
+      animationFrameId = requestAnimationFrame(checkWatermark);
+    };
+
+    animationFrameId = requestAnimationFrame(checkWatermark);
+
+    return () => cancelAnimationFrame(animationFrameId);
+  }, []);
+
+  return (
+    <span
+      ref={ref}
+      className={`absolute z-10 text-2xl font-bold text-white/30 ${props.className}`}
+    >
+      {props.children}
+    </span>
+  );
+};