Merge branch 'master' into frontend-release

.github/actions/test-desktop-tool/action.yml

@@ -10,6 +10,11 @@ runs:
     - uses: browser-actions/setup-edge@latest
       with:
         edge-version: stable
+    - name: Fix macOS Chromedriver
+      if: runner.os == 'macOS'
+      run: |
+        rm /usr/local/bin/chromedriver
+      shell: bash
 
     - name: Set up Python 3.9
       uses: actions/setup-python@v4

MPCAutofill/MPCAutofill/settings.py

@@ -42,7 +42,7 @@
 GTAG = env("GTAG", default="")  # Google Analytics
 SITE_NAME = env("SITE_NAME", default="MPC Autofill")
 TARGET_EMAIL = env("TARGET_EMAIL", default="[email protected]")
-DISCORD = env("DISCORD", default="http://mprox.link/discord")
+DISCORD = env("DISCORD", default="https://discord.gg/magicproxies")
 REDDIT = env("REDDIT", default="https://www.reddit.com/r/mpcproxies/")
 THEME = env("THEME", default="superhero")
 DESCRIPTION = env("DESCRIPTION", default="")

desktop-tool/requirements.txt

@@ -14,5 +14,5 @@ pytest-retry~=1.5
 ratelimit~=2.2.1
 requests~=2.31.0
 sanitize-filename~=1.2.0
-selenium~=4.14.0
+selenium~=4.19.0
 wakepy==0.6.0

desktop-tool/src/webdrivers.py

@@ -0,0 +1,83 @@
+import sys
+from typing import Optional
+
+from selenium.webdriver import Chrome, Edge, Firefox
+from selenium.webdriver.chrome.options import Options as ChromeOptions
+from selenium.webdriver.chromium.options import ChromiumOptions
+from selenium.webdriver.chromium.webdriver import ChromiumDriver
+from selenium.webdriver.edge.options import Options as EdgeOptions
+from selenium.webdriver.firefox.options import Options as FirefoxOptions
+
+
+def get_chrome_driver(headless: bool = False, binary_location: Optional[str] = None) -> Chrome:
+    options = ChromeOptions()
+    options.add_argument("--no-sandbox")
+    options.add_argument("--log-level=3")
+    options.add_argument("--disable-dev-shm-usage")
+    if headless:
+        options.add_argument("--headless=new")
+    options.add_experimental_option("excludeSwitches", ["enable-logging"])
+    options.add_experimental_option("detach", True)
+    if binary_location is not None:
+        options.binary_location = binary_location
+    driver = Chrome(options=options)
+    driver.set_network_conditions(offline=False, latency=5, throughput=5 * 125000)
+    return driver
+
+
+def get_brave_driver(headless: bool = False, binary_location: Optional[str] = None) -> Chrome:
+    options = ChromeOptions()
+    options.add_argument("--no-sandbox")
+    options.add_argument("--log-level=3")
+    options.add_argument("--disable-dev-shm-usage")
+    if headless:
+        options.add_argument("--headless=new")
+    options.add_experimental_option("excludeSwitches", ["enable-logging"])
+    options.add_experimental_option("detach", True)
+
+    # the binary location for brave must be manually specified (otherwise chrome will open instead)
+    if binary_location is not None:
+        options.binary_location = binary_location
+    else:
+        default_binary_locations = {
+            "linux": "/usr/bin/brave-browser",
+            "darwin": "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
+            "win32": "C:\\Program Files\\BraveSoftware\\Brave-Browser\\Application\\brave.exe",
+        }
+        if sys.platform not in default_binary_locations.keys():
+            raise KeyError(
+                f"Cannot determine the default Brave binary location for the operating system {sys.platform}!"
+            )
+        options.binary_location = default_binary_locations[sys.platform]
+
+    driver = Chrome(options=options)
+    driver.set_network_conditions(offline=False, latency=5, throughput=5 * 125000)
+    return driver
+
+
+def get_edge_driver(headless: bool = False, binary_location: Optional[str] = None) -> ChromiumDriver:
+    options: ChromiumOptions = EdgeOptions()
+    options.add_argument("--no-sandbox")
+    options.add_argument("--log-level=3")
+    options.add_argument("--disable-dev-shm-usage")
+    if headless:
+        options.add_argument("--headless=new")
+    options.add_experimental_option("excludeSwitches", ["enable-logging"])
+    options.add_experimental_option("detach", True)
+    if binary_location is not None:
+        options.binary_location = binary_location
+    driver: ChromiumDriver = Edge(options=options)  # type: ignore
+    driver.set_network_conditions(offline=False, latency=5, throughput=5 * 125000)
+    return driver
+
+
+# note: firefox is not currently supported
+def get_firefox_driver(headless: bool = False, binary_location: Optional[str] = None) -> Firefox:
+    options = FirefoxOptions()
+    options.add_argument("--log-level=3")
+    if headless:
+        options.add_argument("--headless")
+    if binary_location is not None:
+        options.binary_location = binary_location
+    driver = Firefox(options=options)
+    return driver

frontend/src/features/card/card.tsx

@@ -51,6 +51,15 @@ const OutlinedBSCardSubtitle = styled(BSCard.Subtitle)`
   }
 `;
 
+export function getImageKey(
+  cardDocument: CardDocument,
+  small: boolean
+): string {
+  return `${cardDocument.identifier}-${
+    small ? "small" : "large"
+  }-${cardDocument.source_type?.toLowerCase().replace(" ", "_")}`;
+}
+
 interface CardImageProps {
   maybeCardDocument: CardDocument | null;
   hidden: boolean;
@@ -73,23 +82,33 @@ function CardImage({
   //# region state
 
   const [imageState, setImageState] = useState<
-    "loading" | "loaded" | "errored"
-  >("loading");
+    | "loading-from-bucket"
+    | "loading-from-fallback"
+    | "loaded-from-bucket"
+    | "loaded-from-fallback"
+    | "errored"
+  >("loading-from-bucket");
   const image = useRef<HTMLImageElement>(null);
 
   //# endregion
 
   //# region callbacks
 
   const onLoadingComplete: OnLoadingComplete = (img) => {
-    setImageState("loaded");
+    if (imageState === "loading-from-bucket") {
+      setImageState("loaded-from-bucket");
+    } else if (imageState === "loading-from-fallback") {
+      setImageState("loaded-from-fallback");
+    }
   };
   const onError: React.ReactEventHandler<HTMLImageElement> = (img) => {
     img.preventDefault();
     img.currentTarget.onerror = null;
-    if (imageState !== "errored") {
-      setImageState("errored");
-    }
+    setImageState((value) =>
+      value === "loading-from-bucket" || value === "loaded-from-bucket"
+        ? "loading-from-fallback"
+        : "errored"
+    );
   };
   const handleShowDetailedView = () => {
     if (showDetailedViewOnClick && maybeCardDocument != null) {
@@ -111,34 +130,57 @@ function CardImage({
      */
 
     setImageState(
-      image.current == null || !image.current.complete ? "loading" : "loaded"
+      image.current == null || !image.current.complete
+        ? "loading-from-bucket"
+        : "loaded-from-bucket"
     );
   }, [maybeCardDocument?.identifier]);
 
   //# endregion
 
   //# region computed constants
 
-  // TODO: always point at image server once it's stable
-  // TODO: introduce the concept of source types which need to go through the CDN
-  const imageCDNURL = process.env.NEXT_PUBLIC_IMAGE_CDN_URL;
-  const smallThumbnailURL =
-    imageCDNURL != null && maybeCardDocument?.source_type
-      ? `${imageCDNURL}/images/google_drive/small/${maybeCardDocument?.identifier}.jpg`
-      : maybeCardDocument?.small_thumbnail_url;
-  const mediumThumbnailURL =
-    imageCDNURL != null && maybeCardDocument?.source_type
-      ? `${imageCDNURL}/images/google_drive/large/${maybeCardDocument?.identifier}.jpg`
-      : maybeCardDocument?.medium_thumbnail_url;
-  const imageSrc = small ? smallThumbnailURL : mediumThumbnailURL;
+  // attempt to load directly from bucket first
+  const imageBucketURL = process.env.NEXT_PUBLIC_IMAGE_BUCKET_URL;
+  const imageBucketURLValid =
+    imageBucketURL != null && !!maybeCardDocument?.source_type;
+
+  const loadFromBucket =
+    imageBucketURLValid &&
+    (imageState === "loading-from-bucket" ||
+      imageState === "loaded-from-bucket");
+  const imageKey = maybeCardDocument && getImageKey(maybeCardDocument, small);
+  const thumbnailBucketURL = `${imageBucketURL}/${imageKey}`;
+
+  // if image is unavailable in bucket, fall back on loading from worker if possible
+  const imageWorkerURL = process.env.NEXT_PUBLIC_IMAGE_WORKER_URL;
+  const imageWorkerURLValid =
+    imageWorkerURL != null && !!maybeCardDocument?.source_type;
+
+  const smallThumbnailURL = imageWorkerURLValid
+    ? `${imageWorkerURL}/images/google_drive/small/${maybeCardDocument?.identifier}.jpg`
+    : maybeCardDocument?.small_thumbnail_url;
+  const mediumThumbnailURL = imageWorkerURLValid
+    ? `${imageWorkerURL}/images/google_drive/large/${maybeCardDocument?.identifier}.jpg`
+    : maybeCardDocument?.medium_thumbnail_url;
+  const thumbnailFallbackURL = small ? smallThumbnailURL : mediumThumbnailURL;
+  const imageSrc = loadFromBucket ? thumbnailBucketURL : thumbnailFallbackURL;
+
+  // if loading from fallback fails, display a 404 error image
   const errorImageSrc = small ? "/error_404.png" : "/error_404_med.png";
+
+  // a few other computed constants
   const imageAlt = maybeCardDocument?.name ?? "Unnamed Card";
+  const imageIsLoading =
+    imageState === "loading-from-bucket" ||
+    imageState === "loading-from-fallback";
+  const showSpinner = imageIsLoading && !hidden;
 
   //# endregion
 
   return (
     <>
-      {imageState === "loading" && !hidden && <Spinner zIndex={2} />}
+      {showSpinner && <Spinner zIndex={2} />}
       {imageSrc != null &&
         (hidden ? (
           <HiddenImage
@@ -167,7 +209,7 @@ function CardImage({
                 ref={image}
                 className="card-img card-img-fade-in"
                 loading="lazy"
-                imageIsLoading={imageState === "loading"}
+                imageIsLoading={imageIsLoading}
                 showDetailedViewOnClick={showDetailedViewOnClick}
                 src={imageSrc}
                 onLoadingComplete={onLoadingComplete}