fix: fixed sharebutton's behaviour during fullscreen

Author: Gslmao

src/components/ShareButton.tsx

@@ -1,62 +1,70 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   Dialog,
-  DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  DialogContent,
 } from "./ui/dialog";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Copy } from "lucide-react";
 import toast from "react-hot-toast";
 import { FaShare } from "react-icons/fa";
 import QR from "./qr";
 import { Button } from "./ui/button";
 import { usePathname } from "next/navigation";
 
-export default function ShareButton() {
+interface ShareButtonProps {
+  isFullscreen: boolean;
+  viewerRef: React.RefObject<HTMLDivElement>;
+}
+
+export default function ShareButton({ isFullscreen, viewerRef }: ShareButtonProps) {
   const [origin, setOrigin] = useState("");
+  const pathname = usePathname();
 
   useEffect(() => {
-    if (typeof window !== "undefined") {
-      setOrigin(window.location.origin);
-    }
+    setOrigin(window.location.origin);
   }, []);
 
-  const pathname = usePathname();
   const paperPath = origin + pathname;
+  console.log("isFullscreen:", isFullscreen, "container:", isFullscreen ? viewerRef.current : document.body);
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button className="aspect-square h-10 w-10 p-0 rounded text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]" title="Share this paper">
+        <Button
+          className="aspect-square h-10 w-10 p-0 rounded text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]"
+          title="Share this paper"
+        >
           <FaShare />
         </Button>
       </DialogTrigger>
-      <DialogContent className="max-w-96">
+      <DialogContent
+        container={isFullscreen ? viewerRef.current : document.body}
+        className="max-w-96"
+      >
         <DialogHeader>
           <DialogTitle>Share Papers with your friends!</DialogTitle>
           <DialogDescription>
             Either scan the QR or copy the link and share
           </DialogDescription>
         </DialogHeader>
         <div className="flex flex-col items-center justify-center gap-5">
-          <QR url={paperPath}></QR>
+          <QR url={paperPath} />
           <Button
-            type="submit"
+            type="button"
             size="sm"
             className="flex w-fit items-center justify-between gap-5 px-3"
             title="Copy link to clipboard"
             onClick={async () => {
-              await toast.promise(
-                navigator.clipboard.writeText(paperPath), // This is a promise
-                {
-                  success: "Link copied successfully",
-                  loading: "Copying link...",
-                  error: "Error copying link",
-                },
-              );
+              await toast.promise(navigator.clipboard.writeText(paperPath), {
+                success: "Link copied successfully",
+                loading: "Copying link...",
+                error: "Error copying link",
+              });
             }}
           >
             <p>Copy Link To Clipboard</p>
@@ -66,4 +74,4 @@ export default function ShareButton() {
       </DialogContent>
     </Dialog>
   );
-}
+}

src/components/newPdfViewer.tsx

@@ -25,6 +25,7 @@ interface ControlProps {
   forceMobile?: boolean;
   isMobile: boolean;
   isSmall: boolean;
+  viewerRef: React.RefObject<HTMLDivElement>;
 }
 
 interface PdfViewerProps {
@@ -57,7 +58,7 @@ function useBreakpoint() {
 }
 
 const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscreen, onDownload,
-  forceMobile, isMobile, isSmall}: ControlProps) {
+  forceMobile, isMobile, isSmall, viewerRef}: ControlProps) {
 
   const { provides: zoomProv, state: zoomState } = useZoom(documentId);
   const { provides: scrollProv, state: scrollState } = useScroll(documentId);
@@ -127,7 +128,7 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
         <Download size={24} />
       </Button>
 
-      <ShareButton />
+      <ShareButton isFullscreen={isFullscreen} viewerRef={viewerRef} />
 
       <Button
         onClick={zoomOut}
@@ -492,47 +493,48 @@ if (isLoading || !engine) {
                 forceMobile={true}
                 isMobile={isMobile}
                 isSmall={isSmall}
+                viewerRef={viewerRef}
               />}
               <DocumentContent documentId={activeDocumentId}>
-            {({ isLoaded }) => (
-              <>
-                <div
-            className="absolute inset-0 z-50 flex items-center justify-center bg-[#070114]"
-            style={{
-            opacity: isLoaded ? 0 : 1,
-            pointerEvents: isLoaded ? "none" : "auto",
-            transition: "opacity 0.3s",
-            backgroundColor: effectiveBackgroundColor,
-          }}
-          >
-            <Loader
-              backgroundColor={effectiveBackgroundColor}
-              textColor={loaderTextColor}
-            />
-          </div>
-      <Viewport
-        documentId={activeDocumentId}
-        style={{
-          backgroundColor: effectiveBackgroundColor,
-          visibility: isLoaded ? "visible" : "hidden",
-        }}
-      >
-        <Scroller
-          documentId={activeDocumentId}
-          renderPage={({ width, height, pageIndex }) => (
-            <div
-              style={{ width, height }}
-              onClick={(e) => e.stopPropagation()}
-            >
-              <RenderLayer documentId={activeDocumentId} pageIndex={pageIndex} />
-            </div>
-          )}
-        />
-      </Viewport>
-    </>
-  )}
-</DocumentContent>
-              
+                {({ isLoaded }) => (
+                  <>
+                    <div
+                      className="absolute inset-0 z-50 flex items-center justify-center bg-[#070114]"
+                      style={{
+                      opacity: isLoaded ? 0 : 1,
+                      pointerEvents: isLoaded ? "none" : "auto",
+                      transition: "opacity 0.3s",
+                      backgroundColor: effectiveBackgroundColor,
+                      }}
+                    >
+                      <Loader
+                        backgroundColor={effectiveBackgroundColor}
+                        textColor={loaderTextColor}
+                      />
+                    </div>
+                    <Viewport
+                      documentId={activeDocumentId}
+                      style={{
+                        backgroundColor: effectiveBackgroundColor,
+                        visibility: isLoaded ? "visible" : "hidden",
+                      }}
+                    >
+                      <Scroller
+                        documentId={activeDocumentId}
+                        renderPage={({ width, height, pageIndex }) => (
+                          <div
+                            style={{ width, height }}
+                            onClick={(e) => e.stopPropagation()}
+                          >
+                            <RenderLayer documentId={activeDocumentId} pageIndex={pageIndex} />
+                          </div>
+                        )}
+                      />
+                    </Viewport>
+                  </>
+                )}
+              </DocumentContent>
+                  
               {!hideControls && (!isMobile || isFullscreen) && (
                 <Controls
                   documentId={activeDocumentId}
@@ -542,6 +544,7 @@ if (isLoading || !engine) {
                   forceMobile={false}
                   isMobile={isMobile}
                   isSmall={isSmall}
+                  viewerRef={viewerRef}
                 />
               )}
             </>

src/components/ui/dialog.tsx

@@ -30,9 +30,11 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    container?: HTMLElement | null
+  }
 >(({ className, children, ...props }, ref) => (
-  <DialogPortal>
+  <DialogPortal container={props.container}>
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}