From 60321111c2bf7dd94a2fc3b8dcfdb9616f560017 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sun, 7 Apr 2024 10:44:01 +0530
Subject: [PATCH] Remove isCanvasBlocked checker

We don't really support running without canvas access, we need it for image
manipulation. The firefox feature seems poorly implemented -
https://bugzilla.mozilla.org/show_bug.cgi?id=1429865 - and if someone _really_
wishes to not add an exclusion for our open source web app, then they can
download our desktop app.
---
 .../photos/src/components/Upload/Uploader.tsx | 18 -------
 .../src/utils/upload/isCanvasBlocked.ts       | 53 -------------------
 .../next/locales/en-US/translation.json       |  2 -
 3 files changed, 73 deletions(-)
 delete mode 100644 web/apps/photos/src/utils/upload/isCanvasBlocked.ts

diff --git a/web/apps/photos/src/components/Upload/Uploader.tsx b/web/apps/photos/src/components/Upload/Uploader.tsx
index 68c016201..f1d6d03ff 100644
--- a/web/apps/photos/src/components/Upload/Uploader.tsx
+++ b/web/apps/photos/src/components/Upload/Uploader.tsx
@@ -16,7 +16,6 @@ import isElectron from "is-electron";
 import { AppContext } from "pages/_app";
 import { GalleryContext } from "pages/gallery";
 import { useContext, useEffect, useRef, useState } from "react";
-import { Trans } from "react-i18next";
 import billingService from "services/billingService";
 import { getLatestCollections } from "services/collectionService";
 import ImportService from "services/importService";
@@ -49,7 +48,6 @@ import {
     UploadFileNames,
 } from "types/upload/ui";
 import { getOrCreateAlbum } from "utils/collection";
-import { downloadApp } from "utils/common";
 import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery";
 import {
     getDownloadAppMessage,
@@ -60,7 +58,6 @@ import {
     getImportSuggestion,
     groupFilesBasedOnParentFolder,
 } from "utils/upload";
-import { isCanvasBlocked } from "utils/upload/isCanvasBlocked";
 import { SetCollectionNamerAttributes } from "../Collections/CollectionNamer";
 import UploadProgress from "./UploadProgress";
 import UploadStrategyChoiceModal from "./UploadStrategyChoiceModal";
@@ -310,21 +307,6 @@ export default function Uploader(props: Props) {
                     return;
                 }
             }
-            if (isCanvasBlocked()) {
-                addLogLine("canvas blocked, blocking upload");
-                appContext.setDialogMessage({
-                    title: t("CANVAS_BLOCKED_TITLE"),
-
-                    content: <Trans i18nKey="CANVAS_BLOCKED_MESSAGE" />,
-                    close: { text: t("CLOSE") },
-                    proceed: {
-                        text: t("DOWNLOAD"),
-                        action: downloadApp,
-                        variant: "accent",
-                    },
-                });
-                return;
-            }
             uploadRunning.current = true;
             props.closeUploadTypeSelector();
             props.setLoading(true);
diff --git a/web/apps/photos/src/utils/upload/isCanvasBlocked.ts b/web/apps/photos/src/utils/upload/isCanvasBlocked.ts
deleted file mode 100644
index e9f9b5abe..000000000
--- a/web/apps/photos/src/utils/upload/isCanvasBlocked.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-//
-// Canvas Blocker &
-// Firefox privacy.resistFingerprinting Detector.
-// (c) 2018 // JOHN OZBAY // CRYPT.EE
-// MIT License
-
-// Credits: https://github.com/johnozbay/canvas-block-detector/blob/master/isCanvasBlocked.js
-
-//
-export function isCanvasBlocked() {
-    // create a 1px image data
-    let blocked = false;
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-
-    // some blockers just return an undefined ctx. So let's check that first.
-    if (ctx) {
-        const imageData = ctx.createImageData(1, 1);
-        const originalImageData = imageData.data;
-
-        // set pixels to RGB 128
-        originalImageData[0] = 128;
-        originalImageData[1] = 128;
-        originalImageData[2] = 128;
-        originalImageData[3] = 255;
-
-        // set this to canvas
-        ctx.putImageData(imageData, 1, 1);
-
-        try {
-            // now get the data back from canvas.
-            const checkData = ctx.getImageData(1, 1, 1, 1).data;
-
-            // If this is firefox, and privacy.resistFingerprinting is enabled,
-            // OR a browser extension blocking the canvas,
-            // This will return RGB all white (255,255,255) instead of the (128,128,128) we put.
-
-            // so let's check the R and G to see if they're 255 or 128 (matching what we've initially set)
-            if (
-                originalImageData[0] !== checkData[0] &&
-                originalImageData[1] !== checkData[1]
-            ) {
-                blocked = true;
-            }
-        } catch (error) {
-            // some extensions will return getImageData null. this is to account for that.
-            blocked = true;
-        }
-    } else {
-        blocked = true;
-    }
-    return blocked;
-}
diff --git a/web/packages/next/locales/en-US/translation.json b/web/packages/next/locales/en-US/translation.json
index 72960fa72..5fdb380d5 100644
--- a/web/packages/next/locales/en-US/translation.json
+++ b/web/packages/next/locales/en-US/translation.json
@@ -422,8 +422,6 @@
     "ENTER_TWO_FACTOR_OTP": "Enter the 6-digit code from your authenticator app.",
     "CREATE_ACCOUNT": "Create account",
     "COPIED": "Copied",
-    "CANVAS_BLOCKED_TITLE": "Unable to generate thumbnail",
-    "CANVAS_BLOCKED_MESSAGE": "<p>It looks like your browser has disabled access to canvas, which is necessary to generate thumbnails for your photos </p> <p> Please enable access to your browser's canvas, or check out our desktop app</p>",
     "WATCH_FOLDERS": "Watch folders",
     "UPGRADE_NOW": "Upgrade now",
     "RENEW_NOW": "Renew now",