Merge pull request #151 from anultravioletaurora/59-improve-onboarding-experience

2026-02-09 03:58:33 -06:00 · 2025-02-19 07:03:48 -06:00
parent 359b99cb5e 793f74819f
commit b78838d176
7 changed files with 343 additions and 16 deletions
--- a/api/queries/functions/images.ts
+++ b/api/queries/functions/images.ts
@@ -3,7 +3,7 @@ import { getImageApi } from "@jellyfin/sdk/lib/utils/api"
 import _ from "lodash"
 import Client from "../../../api/client"

-export function fetchItemImage(itemId: string, imageType: ImageType) {
+export function fetchItemImage(itemId: string, imageType: ImageType, width: number, height: number) {
    
    return new Promise<string>(async (resolve, reject) => {

@@ -12,13 +12,13 @@ export function fetchItemImage(itemId: string, imageType: ImageType) {
        if (!!!Client.api) 
            return reject("Client instance not set")
        else
-            getImageApi(Client.api!)
+            getImageApi(Client.api)
                .getItemImage({
                    itemId,
                    imageType,
-                    width: 1000, // We just care about one big nice image 
-                    height: 1000, // to keep in cache to use for all instants of
-                    format: ImageFormat.Png // the image
+                    width: Math.ceil(width / 100) * 100 * 2, // Round to the nearest 100 for simplicity and to avoid 
+                    height: Math.ceil(height / 100) * 100 * 2, // redundant images in storage, then double it to make sure it's crispy
+                    format: ImageFormat.Png
                },
                {
                    responseType: 'blob',
--- a/components/Global/components/blurhashed-image.tsx
+++ b/components/Global/components/blurhashed-image.tsx
@@ -23,13 +23,17 @@ export default function BlurhashedImage({
    borderRadius
 } : BlurhashLoadingProps) : React.JSX.Element {

+    console.debug(`Rendering image`);
+
    const { data: image, isSuccess } = useQuery({
        queryKey: [
            QueryKeys.ItemImage, 
            item.AlbumId ? item.AlbumId : item.Id!, 
            type ?? ImageType.Primary, 
+            Math.ceil(width / 100) * 100, // Images are fetched at a higher, generic resolution
+            Math.ceil(height ?? width / 100) * 100 // So these keys need to match
        ],
-        queryFn: () => fetchItemImage(item.AlbumId ? item.AlbumId : item.Id!, type ?? ImageType.Primary),
+        queryFn: () => fetchItemImage(item.AlbumId ? item.AlbumId : item.Id!, type ?? ImageType.Primary, width, height ?? width),
    });

    const blurhash = !isEmpty(item.ImageBlurHashes) 
--- a/components/Player/component.config.ts
+++ b/components/Player/component.config.ts
@@ -16,4 +16,4 @@ export const TextTickerConfig : TextTickerProps = {
 * We're going to move the decimal place over so that Tamagui's slider
 * can be more precise
 */
-export const ProgressMultiplier = 10 ^ 3
+export const ProgressMultiplier = 10 ^ 5
--- a/components/Player/screens/index.tsx
+++ b/components/Player/screens/index.tsx
@@ -273,12 +273,16 @@ export default function PlayerScreen({
                        )}
                    </XStack>

-                    { useMemo(() => {
-                        return (

                        <XStack marginHorizontal={20} marginTop={"$3"} marginBottom={"$2"}>
                        <XStack flex={1} justifyContent="flex-start">
-                            <RunTimeSeconds>{Math.floor(progressState / ProgressMultiplier)}</RunTimeSeconds>
+                            { useMemo(() => {
+                                return (
+                                    <RunTimeSeconds>{Math.floor(progressState / ProgressMultiplier)}</RunTimeSeconds>
+                                )
+                            }, [
+                                progressState,
+                            ])}
                        </XStack>

                        <XStack flex={1} justifyContent="space-between">
@@ -301,11 +305,6 @@ export default function PlayerScreen({
                            </RunTimeSeconds>
                        </XStack>
                    </XStack>
-                        )
-                    }, [
-                        progressState,
-                        progress?.duration
-                    ])}

                    { useMemo(() => {
                        return (
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
        "@react-navigation/native": "^7.0.14",
        "@react-navigation/native-stack": "^7.1.1",
        "@react-navigation/stack": "^7.1.0",
+        "@sentry/react-native": "^6.7.0",
        "@tamagui/config": "^1.124.17",
        "@tamagui/toast": "^1.124.17",
        "@tanstack/query-sync-storage-persister": "^5.66.0",
@@ -5821,6 +5822,303 @@
        "join-component": "^1.1.0"
      }
    },
+    "node_modules/@sentry-internal/browser-utils": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.54.0.tgz",
+      "integrity": "sha512-DKWCqb4YQosKn6aD45fhKyzhkdG7N6goGFDeyTaJFREJDFVDXiNDsYZu30nJ6BxMM7uQIaARhPAC5BXfoED3pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/feedback": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.54.0.tgz",
+      "integrity": "sha512-nQqRacOXoElpE0L0ADxUUII0I3A94niqG9Z4Fmsw6057QvyrV/LvTiMQBop6r5qLjwMqK+T33iR4/NQI5RhsXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/replay": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.54.0.tgz",
+      "integrity": "sha512-8xuBe06IaYIGJec53wUC12tY2q4z2Z0RPS2s1sLtbA00EvK1YDGuXp96IDD+HB9mnDMrQ/jW5f97g9TvPsPQUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "8.54.0",
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.54.0.tgz",
+      "integrity": "sha512-K/On3OAUBeq/TV2n+1EvObKC+WMV9npVXpVyJqCCyn8HYMm8FUGzuxeajzm0mlW4wDTPCQor6mK9/IgOquUzCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/replay": "8.54.0",
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/babel-plugin-component-annotate": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-3.1.2.tgz",
+      "integrity": "sha512-5h2WXRJ6swKA0TwxHHryC8M2QyOfS9QhTAL6ElPfkEYe9HhJieXmxsDpyspbqAa26ccnCUcmwE5vL34jAjt4sQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@sentry/browser": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.54.0.tgz",
+      "integrity": "sha512-BgUtvxFHin0fS0CmJVKTLXXZcke0Av729IVfi+2fJ4COX8HO7/HAP02RKaSQGmL2HmvWYTfNZ7529AnUtrM4Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "8.54.0",
+        "@sentry-internal/feedback": "8.54.0",
+        "@sentry-internal/replay": "8.54.0",
+        "@sentry-internal/replay-canvas": "8.54.0",
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/cli": {
+      "version": "2.41.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-2.41.1.tgz",
+      "integrity": "sha512-0GVmDiTV7R1492wkVY4bGcfC0fSmRmQjuxaaPI8CIV9B2VP9pBVCUizi1mevXaaE4I3fM60LI+XYrKFEneuVog==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "https-proxy-agent": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "progress": "^2.0.3",
+        "proxy-from-env": "^1.1.0",
+        "which": "^2.0.2"
+      },
+      "bin": {
+        "sentry-cli": "bin/sentry-cli"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@sentry/cli-darwin": "2.41.1",
+        "@sentry/cli-linux-arm": "2.41.1",
+        "@sentry/cli-linux-arm64": "2.41.1",
+        "@sentry/cli-linux-i686": "2.41.1",
+        "@sentry/cli-linux-x64": "2.41.1",
+        "@sentry/cli-win32-i686": "2.41.1",
+        "@sentry/cli-win32-x64": "2.41.1"
+      }
+    },
+    "node_modules/@sentry/cli-darwin": {
+      "version": "2.41.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.41.1.tgz",
+      "integrity": "sha512-7pS3pu/SuhE6jOn3wptstAg6B5nUP878O6s+2svT7b5fKNfYUi/6NPK6dAveh2Ca0rwVq40TO4YFJabWMgTpdQ==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-arm": {
+      "version": "2.41.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.41.1.tgz",
+      "integrity": "sha512-wNUvquD6qjOCczvuBGf9OiD29nuQ6yf8zzfyPJa5Bdx1QXuteKsKb6HBrMwuIR3liyuu0duzHd+H/+p1n541Hg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-arm64": {
+      "version": "2.41.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.41.1.tgz",
+      "integrity": "sha512-EzYCEnnENBnS5kpNW+2dBcrPZn1MVfywh2joGVQZTpmgDL5YFJ59VOd+K0XuEwqgFI8BSNI14KXZ75s4DD1/Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-i686": {
+      "version": "2.41.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.41.1.tgz",
+      "integrity": "sha512-urpQCWrdYnSAsZY3udttuMV88wTJzKZL10xsrp7sjD/Hd+O6qSLVLkxebIlxts70jMLLFHYrQ2bkRg5kKuX6Fg==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-linux-x64": {
+      "version": "2.41.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.41.1.tgz",
+      "integrity": "sha512-ZqpYwHXAaK4MMEFlyaLYr6mJTmpy9qP6n30jGhLTW7kHKS3s6GPLCSlNmIfeClrInEt0963fM633ZRnXa04VPw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "linux",
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-win32-i686": {
+      "version": "2.41.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.41.1.tgz",
+      "integrity": "sha512-AuRimCeVsx99DIOr9cwdYBHk39tlmAuPDdy2r16iNzY0InXs4xOys4gGzM7N4vlFQvFkzuc778Su0HkfasgprA==",
+      "cpu": [
+        "x86",
+        "ia32"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/cli-win32-x64": {
+      "version": "2.41.1",
+      "resolved": "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.41.1.tgz",
+      "integrity": "sha512-6JcPvXGye61+wPp0xdzfc2YLE/Dcud8JdaK8VxLM3b/8+Em7E+UyliDu3uF8+YGUqizY5JYTd3fs17DC8DZhLw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@sentry/core": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.54.0.tgz",
+      "integrity": "sha512-03bWf+D1j28unOocY/5FDB6bUHtYlm6m6ollVejhg45ZmK9iPjdtxNWbrLsjT1WRym0Tjzowu+A3p+eebYEv0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/react": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-8.54.0.tgz",
+      "integrity": "sha512-42T/fp8snYN19Fy/2P0Mwotu4gcdy+1Lx+uYCNcYP1o7wNGigJ7qb27sW7W34GyCCHjoCCfQgeOqDQsyY8LC9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/browser": "8.54.0",
+        "@sentry/core": "8.54.0",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || 17.x || 18.x || 19.x"
+      }
+    },
+    "node_modules/@sentry/react-native": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react-native/-/react-native-6.7.0.tgz",
+      "integrity": "sha512-nTduSbhIJG0CHGgNLGCF0bhx14H55PyiCBil6m6lKMPjMa+yUava6UcPW5agHXCcYEa/3FRVX/9+lkWUvjDJPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/babel-plugin-component-annotate": "3.1.2",
+        "@sentry/browser": "8.54.0",
+        "@sentry/cli": "2.41.1",
+        "@sentry/core": "8.54.0",
+        "@sentry/react": "8.54.0",
+        "@sentry/types": "8.54.0",
+        "@sentry/utils": "8.54.0"
+      },
+      "bin": {
+        "sentry-expo-upload-sourcemaps": "scripts/expo-upload-sourcemaps.js"
+      },
+      "peerDependencies": {
+        "expo": ">=49.0.0",
+        "react": ">=17.0.0",
+        "react-native": ">=0.65.0"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@sentry/types": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-8.54.0.tgz",
+      "integrity": "sha512-wztdtr7dOXQKi0iRvKc8XJhJ7HaAfOv8lGu0yqFOFwBZucO/SHnu87GOPi8mvrTiy1bentQO5l+zXWAaMvG4uw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/utils": {
+      "version": "8.54.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-8.54.0.tgz",
+      "integrity": "sha512-JL8UDjrsKxKclTdLXfuHfE7B3KbrAPEYP7tMyN/xiO2vsF6D84fjwYyalO0ZMtuFZE6vpSze8ZOLEh6hLnPYsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.54.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
    "node_modules/@sideway/address": {
      "version": "4.1.5",
      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -7708,6 +8006,18 @@
        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
      }
    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
    "node_modules/aggregate-error": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -12153,6 +12463,19 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/human-signals": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/native-stack": "^7.1.1",
    "@react-navigation/stack": "^7.1.0",
+    "@sentry/react-native": "^6.7.0",
    "@tamagui/config": "^1.124.17",
    "@tamagui/toast": "^1.124.17",
    "@tanstack/query-sync-storage-persister": "^5.66.0",
--- a/player/config.ts
+++ b/player/config.ts
@@ -1 +1 @@
-export const UPDATE_INTERVAL: number = 200
+export const UPDATE_INTERVAL: number = 100 // 100 milliseconds