Btn

web/packages/base/components/utils/theme.ts

@@ -546,7 +546,8 @@ const components: Components = {
             // This is required to prevent console errors about aria-hiding a
             // focused button when the dialog is closed.
             //
-            // https://github.com/mui/material-ui/issues/43106#issuecomment-2314809028
+            // - https://github.com/mui/material-ui/issues/43106#issuecomment-2314809028
+            // - https://issues.chromium.org/issues/392121909
             closeAfterTransition: false,
         },
         styleOverrides: {

web/packages/gallery/components/viewer/FileViewer.tsx

@@ -13,7 +13,9 @@ if (process.env.NEXT_PUBLIC_ENTE_WIP_PS5) {
     throw new Error("Whoa");
 }
 
+import { isDesktop } from "@/base/app";
 import { type ModalVisibilityProps } from "@/base/components/utils/modal";
+import { lowercaseExtension } from "@/base/file-name";
 import type { LocalUser } from "@/base/local-user";
 import log from "@/base/log";
 import {
@@ -21,7 +23,9 @@ import {
     type FileInfoExif,
     type FileInfoProps,
 } from "@/gallery/components/FileInfo";
+import { FileType } from "@/media/file-type";
 import type { EnteFile } from "@/media/file.js";
+import { isHEICExtension, needsJPEGConversion } from "@/media/formats";
 import { ImageEditorOverlay } from "@/new/photos/components/ImageEditorOverlay";
 import { Button, styled } from "@mui/material";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -145,7 +149,8 @@ const FileViewer: React.FC<FileViewerProps> = ({
         (file: EnteFile) => {
             const fileID = file.id;
             const isOwnFile = file.ownerID == user?.id;
-            return { fileID, isOwnFile };
+            const isEditableImage = fileIsEditableImage(file);
+            return { fileID, isOwnFile, isEditableImage };
         },
         [user],
     );
@@ -227,7 +232,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
             onClose: handleClose,
             onAnnotate: handleAnnotate,
             onViewInfo: handleViewInfo,
-            onEditImage: handleEditImage
+            onEditImage: handleEditImage,
         });
         pswpRef.current = pswp;
 
@@ -289,6 +294,8 @@ const FileViewer: React.FC<FileViewerProps> = ({
     );
 };
 
+export default FileViewer;
+
 const Container = styled("div")`
     border: 1px solid red;
 
@@ -298,4 +305,20 @@ const Container = styled("div")`
     }
 `;
 
-export default FileViewer;
+const fileIsEditableImage = (file: EnteFile) => {
+    // Only images are editable.
+    if (file.metadata.fileType !== FileType.image) return false;
+
+    const extension = lowercaseExtension(file.metadata.title);
+    // Assume it is editable;
+    let isRenderable = true;
+    if (extension && needsJPEGConversion(extension)) {
+        // See if the file is on the whitelist of extensions that we know
+        // will not be directly renderable.
+        if (!isDesktop) {
+            // On the web, we only support HEIC conversion.
+            isRenderable = isHEICExtension(extension);
+        }
+    }
+    return isRenderable;
+};

web/packages/gallery/components/viewer/icons.tsx

@@ -21,6 +21,8 @@ const paths = {
     info: '<path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" transform="translate(3.5, 3.5)"',
     // "@mui/icons-material/ErrorOutline"
     error: '<path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8" transform="translate(7, 5.7) scale(0.85)"',
+    // "@mui/icons-material/Edit"
+    edit: '<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z" transform="translate(3, 3) scale(0.97)"',
 };
 
 /**

web/packages/gallery/components/viewer/photoswipe.ts

@@ -5,6 +5,7 @@ import log from "@/base/log";
 import type { EnteFile } from "@/media/file";
 import { FileType } from "@/media/file-type";
 import { t } from "i18next";
+import { pt } from "@/base/i18n";
 import {
     forgetExif,
     forgetExifForItemData,
@@ -50,8 +51,13 @@ type FileViewerPhotoSwipeOptions = {
     onViewInfo: (annotatedFile: FileViewerAnnotatedFile) => void;
     /**
      * Called when the user activates the edit action on an image.
+     *
+     * If this callback is not provided, then the edit button is never shown. If
+     * this callback is provided, then the visibility of the edit button is
+     * determined by the {@link isEditableImage} property of
+     * {@link FileViewerFileAnnotation} for the file.
      */
-    onEditImage: (annotatedFile: FileViewerAnnotatedFile) => void;
+    onEditImage?: (annotatedFile: FileViewerAnnotatedFile) => void;
 } & Pick<FileViewerProps, "files" | "initialIndex" | "disableDownload">;
 
 /**
@@ -69,6 +75,13 @@ export interface FileViewerFileAnnotation {
      * `true` if this file is owned by the logged in user (if any).
      */
     isOwnFile: boolean;
+    /**
+     * `true` if this is an image which can be edited.
+     *
+     * The edit button is shown when this is true. See also the
+     * {@link onEditImage} option for {@link FileViewerPhotoSwipe} constructor.
+     */
+    isEditableImage: boolean;
 }
 
 /**
@@ -147,6 +160,7 @@ export class FileViewerPhotoSwipe {
         onClose,
         onAnnotate,
         onViewInfo,
+        onEditImage,
     }: FileViewerPhotoSwipeOptions) {
         this.files = files;
         this.opts = { disableDownload };
@@ -405,11 +419,33 @@ export class FileViewerPhotoSwipe {
             pswp.ui.registerElement({
                 name: "info",
                 title: t("info"),
-                order: 15,
+                order: 16,
                 isButton: true,
                 html: createPSRegisterElementIconHTML("info"),
                 onClick: withCurrentAnnotatedFile(onViewInfo),
             });
+
+            if (onEditImage) {
+                pswp.ui.registerElement({
+                    name: "edit",
+                    // TODO(PS):
+                    // title: t("edit_image"),
+                    title: pt("Edit image"),
+                    order: 15,
+                    isButton: true,
+                    html: createPSRegisterElementIconHTML("edit"),
+                    onClick: withCurrentAnnotatedFile(onEditImage),
+                    onInit: (buttonElement, pswp) => {
+                        pswp.on("change", () => {
+                            const { annotation } = currentAnnotatedFile();
+                            buttonElement.classList.toggle(
+                                "pswp--ui-visible",
+                                annotation.isEditableImage,
+                            );
+                        });
+                    },
+                });
+            }
         });
 
         // Modify the default UI elements.