build: try to fix sqlite for arm

.github/workflows/preview.yml

@@ -35,7 +35,7 @@ jobs:
         with:
           context: .
           file: ./Dockerfile
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm64
           push: true
           build-args: |
             COMMIT_TAG=${{ github.sha }}

Dockerfile

@@ -5,14 +5,14 @@ WORKDIR /app
 ARG TARGETPLATFORM
 ENV TARGETPLATFORM=${TARGETPLATFORM:-linux/amd64}
 
-RUN \
-  case "${TARGETPLATFORM}" in \
-  'linux/arm64' | 'linux/arm/v7') \
-  apk update && \
-  apk add --no-cache python3 make g++ gcc libc6-compat bash && \
-  yarn global add node-gyp \
-  ;; \
-  esac
+# RUN \
+#   case "${TARGETPLATFORM}" in \
+#   'linux/arm64' | 'linux/arm/v7') \
+#   apk update && \
+#   apk add --no-cache python3 make g++ gcc libc6-compat bash && \
+#   yarn global add node-gyp \
+#   ;; \
+#   esac
 
 COPY package.json yarn.lock ./
 RUN CYPRESS_INSTALL_BINARY=0 yarn install --frozen-lockfile --network-timeout 1000000

package.json

@@ -62,7 +62,6 @@
     "lodash": "4.17.21",
     "next": "12.3.4",
     "node-cache": "5.1.2",
-    "node-gyp": "9.3.1",
     "node-schedule": "2.1.1",
     "nodemailer": "6.9.1",
     "openpgp": "5.7.0",
@@ -86,7 +85,7 @@
     "reflect-metadata": "0.1.13",
     "secure-random-password": "0.2.3",
     "semver": "7.3.8",
-    "sqlite3": "5.1.4",
+    "sqlite3": "5.1.6",
     "swagger-ui-express": "4.6.2",
     "swr": "2.0.4",
     "typeorm": "0.3.12",
@@ -166,7 +165,6 @@
     "typescript": "4.9.5"
   },
   "resolutions": {
-    "sqlite3/node-gyp": "8.4.1",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/express-session": "1.17.6"

snap/snapcraft.yaml

@@ -16,7 +16,7 @@ architectures:
 parts:
   overseerr:
     plugin: nodejs
-    nodejs-version: '18.18.2'
+    nodejs-version: '18.8.2'
     nodejs-package-manager: 'yarn'
     nodejs-yarn-version: v1.22.19
     build-packages:

src/components/Layout/PullToRefresh/index.tsx

@@ -4,15 +4,17 @@ import { useEffect, useRef, useState } from 'react';
 
 const PullToRefresh = () => {
   const router = useRouter();
-  const [pullStartPoint, setPullStartPoint] = useState<number>(0);
-  const [pullChange, setPullChange] = useState<number>(0);
-  const [iconPlacement, setIconPlacement] = useState<number>(0);
+
+  const [pullStartPoint, setPullStartPoint] = useState(0);
+  const [pullChange, setPullChange] = useState(0);
   const refreshDiv = useRef<HTMLDivElement>(null);
 
-  // If pull change is greater than 20, we have passed
-  // the initialization threshold of the pull to refresh
-  // (the icon will start to show). If it hits 120,
-  // the reload will start on release
+  // Various pull down thresholds that determine icon location
+  const pullDownInitThreshold = pullChange > 20;
+  const pullDownStopThreshold = 120;
+  const pullDownReloadThreshold = pullChange > 340;
+  const pullDownIconLocation = pullChange / 3;
+
   useEffect(() => {
     // Reload function that is called when reload threshold has been hit
     // Add loading class to determine when to add spin animation
@@ -35,9 +37,8 @@ const PullToRefresh = () => {
         refreshDiv.current?.classList.remove('hidden');
         document.body.style.touchAction = 'none';
         document.body.style.overscrollBehavior = 'none';
-
         if (html) {
-          html.style.overscrollBehavior = 'none';
+          html.style.overscrollBehaviorY = 'none';
         }
       } else {
         refreshDiv.current?.classList.remove('block');
@@ -46,17 +47,13 @@ const PullToRefresh = () => {
     };
 
     // Tracks how far we have pulled down the refresh icon
-    const pullDown = (e: TouchEvent) => {
+    const pullDown = async (e: TouchEvent) => {
       const screenY = e.targetTouches[0].screenY;
+
       const pullLength =
         pullStartPoint < screenY ? Math.abs(screenY - pullStartPoint) : 0;
 
       setPullChange(pullLength);
-
-      // Lock the body when the icon is shown
-      if (iconPlacement > 50) {
-        document.body.style.overflow = 'hidden';
-      }
     };
 
     // Will reload the page if we are past the threshold
@@ -64,17 +61,16 @@ const PullToRefresh = () => {
     const pullFinish = () => {
       setPullStartPoint(0);
 
-      if (pullChange > 340) {
+      if (pullDownReloadThreshold) {
         forceReload();
       } else {
         setPullChange(0);
       }
 
       document.body.style.touchAction = 'auto';
-      document.body.style.overscrollBehavior = 'auto';
-      document.body.style.overflow = 'scroll';
+      document.body.style.overscrollBehaviorY = 'auto';
       if (html) {
-        html.style.overscrollBehavior = 'auto';
+        html.style.overscrollBehaviorY = 'auto';
       }
     };
 
@@ -82,28 +78,26 @@ const PullToRefresh = () => {
     window.addEventListener('touchmove', pullDown, { passive: false });
     window.addEventListener('touchend', pullFinish, { passive: false });
 
-    // Determines the position of the icon based on
-    // the pull-down distance to touch
-    if (pullChange / 3 < 120 && pullChange > 20) {
-      setIconPlacement(pullChange / 3);
-    } else if (pullChange > 20) {
-      setIconPlacement(120);
-    } else {
-      setIconPlacement(0);
-    }
-
     return () => {
       window.removeEventListener('touchstart', pullStart);
       window.removeEventListener('touchmove', pullDown);
       window.removeEventListener('touchend', pullFinish);
     };
-  }, [iconPlacement, pullChange, pullStartPoint, router]);
+  }, [pullDownInitThreshold, pullDownReloadThreshold, pullStartPoint, router]);
 
   return (
     <div
       ref={refreshDiv}
-      className="absolute left-0 right-0 z-50 m-auto w-fit transition-all ease-out"
-      style={{ top: iconPlacement }}
+      className="absolute left-0 right-0 top-0 z-50 m-auto w-fit transition-all ease-out"
+      id="refreshIcon"
+      style={{
+        top:
+          pullDownIconLocation < pullDownStopThreshold && pullDownInitThreshold
+            ? pullDownIconLocation
+            : pullDownInitThreshold
+            ? pullDownStopThreshold
+            : '',
+      }}
     >
       <div
         className={`${
@@ -113,7 +107,7 @@ const PullToRefresh = () => {
       >
         <ArrowPathIcon
           className={`rounded-full ${
-            pullChange > 340 && 'rotate-180'
+            pullDownReloadThreshold && 'rotate-180'
           } text-indigo-500 transition-all duration-300`}
         />
       </div>

src/styles/globals.css

@@ -524,3 +524,22 @@
     height: calc(4rem + env(safe-area-inset-bottom));
   }
 }
+
+.ptr--ptr {
+  box-shadow: initial !important;
+  position: absolute !important;
+  z-index: 30 !important;
+}
+
+.ptr--refresh {
+  overflow: visible !important;
+  z-index: 30 !important;
+}
+
+.ptr--pull {
+  z-index: 30 !important;
+}
+
+.ptr--box {
+  margin-bottom: -13px !important;
+}

yarn.lock

@@ -10179,7 +10179,7 @@ node-fetch@^2.6.0, node-fetch@^2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
-node-gyp@8.4.1, node-gyp@8.x:
+node-gyp@8.x:
   version "8.4.1"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-8.4.1.tgz#3d49308fc31f768180957d6b5746845fbd429937"
   integrity sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==
@@ -10195,7 +10195,7 @@ node-gyp@8.4.1, node-gyp@8.x:
     tar "^6.1.2"
     which "^2.0.2"
 
-node-gyp@9.3.1, node-gyp@^9.0.0, node-gyp@^9.1.0:
+node-gyp@^9.0.0, node-gyp@^9.1.0:
   version "9.3.1"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-9.3.1.tgz#1e19f5f290afcc9c46973d68700cbd21a96192e4"
   integrity sha512-4Q16ZCqq3g8awk6UplT7AuxQ35XN4R/yf/+wSAwcBUAjg7l58RTactWaP8fIDTi0FzI7YcVLujwExakZlfWkXg==
@@ -12603,10 +12603,10 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-sqlite3@5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/sqlite3/-/sqlite3-5.1.4.tgz#35f83d368963168b324ad2f0fffce09f3b8723a7"
-  integrity sha512-i0UlWAzPlzX3B5XP2cYuhWQJsTtlMD6obOa1PgeEQ4DHEXUuyJkgv50I3isqZAP5oFc2T8OFvakmDh2W6I+YpA==
+sqlite3@5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/sqlite3/-/sqlite3-5.1.6.tgz#1d4fbc90fe4fbd51e952e0a90fd8f6c2b9098e97"
+  integrity sha512-olYkWoKFVNSSSQNvxVUfjiVbz3YtBwTJj+mfV5zpHmqW3sELx2Cf4QCdirMelhM5Zh+KDVaKgQHqCxrqiWHybw==
   dependencies:
     "@mapbox/node-pre-gyp" "^1.0.0"
     node-addon-api "^4.2.0"