Bespoke

web/apps/photos/src/pages/shared-albums.tsx

@@ -1,6 +1,6 @@
 import { NavbarBase, SelectionBar } from "@/base/components/Navbar";
 import { sharedCryptoWorker } from "@/base/crypto";
-import { useIsTouchscreen } from "@/base/hooks";
+import { useIsMobileWidth, useIsTouchscreen } from "@/base/hooks";
 import log from "@/base/log";
 import downloadManager from "@/new/photos/services/download";
 import { EnteFile } from "@/new/photos/types/file";
@@ -27,6 +27,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import DownloadIcon from "@mui/icons-material/Download";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 import MoreHoriz from "@mui/icons-material/MoreHoriz";
+import type { ButtonProps, IconButtonProps } from "@mui/material";
 import { Box, Button, IconButton, Stack, Tooltip } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import bs58 from "bs58";
@@ -62,6 +63,7 @@ import {
     syncPublicFiles,
     verifyPublicCollectionPassword,
 } from "services/publicCollectionService";
+import uploadManager from "services/upload/uploadManager";
 import { Collection } from "types/collection";
 import {
     SelectedState,
@@ -170,9 +172,11 @@ export default function PublicCollectionGallery() {
             return updater;
         };
 
-    const openUploader = () => {
-        setUploadTypeSelectorView(true);
-    };
+    const onAddPhotos = useMemo(() => {
+        return publicCollection?.publicURLs?.[0]?.enableCollect
+            ? () => setUploadTypeSelectorView(true)
+            : undefined;
+    }, [publicCollection]);
 
     const closeUploadTypeSelectorView = () => {
         setUploadTypeSelectorView(false);
@@ -331,26 +335,26 @@ export default function PublicCollectionGallery() {
     }, [publicCollection, publicFiles]);
 
     useEffect(() => {
-        if (publicCollection?.publicURLs?.[0]?.enableCollect) {
-            setPhotoListFooter({
-                item: (
-                    <CenteredFlex sx={{ marginTop: "56px" }}>
-                        <UploadButton
-                            disableShrink
-                            openUploader={openUploader}
-                            text={t("ADD_MORE_PHOTOS")}
-                            color="accent"
-                            icon={<AddPhotoAlternateOutlined />}
-                        />
-                    </CenteredFlex>
-                ),
-                itemType: ITEM_TYPE.FOOTER,
-                height: 104,
-            });
-        } else {
-            setPhotoListFooter(null);
-        }
-    }, [publicCollection]);
+        setPhotoListFooter(
+            onAddPhotos
+                ? {
+                      item: (
+                          <CenteredFlex sx={{ marginTop: "56px" }}>
+                              <UploadButton
+                                  disableShrink
+                                  openUploader={onAddPhotos}
+                                  text={t("ADD_MORE_PHOTOS")}
+                                  color="accent"
+                                  icon={<AddPhotoAlternateOutlined />}
+                              />
+                          </CenteredFlex>
+                      ),
+                      itemType: ITEM_TYPE.FOOTER,
+                      height: 104,
+                  }
+                : null,
+        );
+    }, [onAddPhotos]);
 
     const syncWithRemote = async () => {
         const collectionUID = getPublicCollectionUID(token.current);
@@ -551,12 +555,7 @@ export default function PublicCollectionGallery() {
                         getFolderSelectorInputProps,
                     }}
                 />
-                <SharedAlbumNavbar
-                    showUploadButton={
-                        publicCollection?.publicURLs?.[0]?.enableCollect
-                    }
-                    openUploader={openUploader}
-                />
+                <SharedAlbumNavbar onAddPhotos={onAddPhotos} />
                 <PhotoFrame
                     page={PAGES.SHARED_ALBUMS}
                     files={publicFiles}
@@ -610,24 +609,28 @@ export default function PublicCollectionGallery() {
     );
 }
 
-function SharedAlbumNavbar({ showUploadButton, openUploader }) {
+interface SharedAlbumNavbarProps {
+    /**
+     * If provided, then an "Add Photos" button will be shown in the navbar.
+     */
+    onAddPhotos: React.MouseEventHandler<HTMLButtonElement> | undefined;
+}
+const SharedAlbumNavbar: React.FC<SharedAlbumNavbarProps> = ({
+    onAddPhotos,
+}) => {
     return (
         <NavbarBase>
             <FluidContainer>
                 <EnteLinkLogo />
             </FluidContainer>
-            {showUploadButton ? (
-                <UploadButton
-                    openUploader={openUploader}
-                    icon={<AddPhotoAlternateOutlined />}
-                    text={t("ADD_PHOTOS")}
-                />
+            {onAddPhotos ? (
+                <AddPhotosButton onClick={onAddPhotos} />
             ) : (
                 <GoToEnte />
             )}
         </NavbarBase>
     );
-}
+};
 
 const EnteLinkLogo: React.FC = () => {
     return (
@@ -648,6 +651,32 @@ const EnteLinkLogo: React.FC = () => {
     );
 };
 
+const AddPhotosButton: React.FC<ButtonProps & IconButtonProps> = (props) => {
+    const disabled = !uploadManager.shouldAllowNewUpload();
+    const isMobileWidth = useIsMobileWidth();
+
+    const icon = <AddPhotoAlternateOutlined />;
+
+    return (
+        <Box>
+            {isMobileWidth ? (
+                <IconButton {...props} disabled={disabled}>
+                    {icon}
+                </IconButton>
+            ) : (
+                <Button
+                    {...props}
+                    disabled={disabled}
+                    color={"secondary"}
+                    startIcon={icon}
+                >
+                    {t("ADD_PHOTOS")}
+                </Button>
+            )}
+        </Box>
+    );
+};
+
 const GoToEnte: React.FC = () => {
     // Touchscreen devices are overwhemingly likely to be Android or iOS.
     const isTouchscreen = useIsTouchscreen();