@comapeo/core-react 6.0.0 → 6.1.0

package/dist/commonjs/hooks/projects.d.ts

@@ -626,7 +626,13 @@ export declare function useExportGeoJSON({ projectId }: {
     mutate: import("@tanstack/react-query").UseMutateFunction<string, Error, {
         path: string;
         exportOptions: {
-            observations?: boolean;
+            observations
+            /**
+             * Update the settings of a project.
+             *
+             * @param opts.projectId Public ID of the project to apply changes to.
+             */
+            ?: boolean;
             tracks?: boolean;
             lang?: string;
         };
@@ -634,7 +640,13 @@ export declare function useExportGeoJSON({ projectId }: {
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<string, Error, {
         path: string;
         exportOptions: {
-            observations?: boolean;
+            observations
+            /**
+             * Update the settings of a project.
+             *
+             * @param opts.projectId Public ID of the project to apply changes to.
+             */
+            ?: boolean;
             tracks?: boolean;
             lang?: string;
         };
@@ -646,7 +658,13 @@ export declare function useExportGeoJSON({ projectId }: {
     mutate: import("@tanstack/react-query").UseMutateFunction<string, Error, {
         path: string;
         exportOptions: {
-            observations?: boolean;
+            observations
+            /**
+             * Update the settings of a project.
+             *
+             * @param opts.projectId Public ID of the project to apply changes to.
+             */
+            ?: boolean;
             tracks?: boolean;
             lang?: string;
         };
@@ -654,7 +672,13 @@ export declare function useExportGeoJSON({ projectId }: {
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<string, Error, {
         path: string;
         exportOptions: {
-            observations?: boolean;
+            observations
+            /**
+             * Update the settings of a project.
+             *
+             * @param opts.projectId Public ID of the project to apply changes to.
+             */
+            ?: boolean;
             tracks?: boolean;
             lang?: string;
         };

package/dist/commonjs/hooks/projects.js

@@ -29,6 +29,7 @@ const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const projects_js_1 = require("../lib/react-query/projects.js");
 const sync_js_1 = require("../lib/sync.js");
+const urls_js_1 = require("../lib/urls.js");
 const client_js_1 = require("./client.js");
 /**
  * Retrieve the project settings for a project.
@@ -185,13 +186,10 @@ function useManyMembers({ projectId }) {
  */
 function useIconUrl({ projectId, iconId, ...mimeBasedOpts }) {
     const { data: projectApi } = useSingleProject({ projectId });
-    const { data, error, isRefetching } = (0, react_query_1.useSuspenseQuery)((0, projects_js_1.iconUrlQueryOptions)({
-        ...mimeBasedOpts,
-        projectApi,
-        projectId,
-        iconId,
-    }));
-    return { data, error, isRefetching };
+    const { data: port, error, isRefetching } = useMediaServerPort({ projectApi });
+    const baseUrl = `http://127.0.0.1:${port}`;
+    const iconUrl = (0, urls_js_1.getIconUrl)(baseUrl, iconId, mimeBasedOpts);
+    return { data: iconUrl, error, isRefetching };
 }
 /**
  * Retrieve a URL that points to a desired blob resource.
@@ -246,10 +244,18 @@ function useIconUrl({ projectId, iconId, ...mimeBasedOpts }) {
  */
 function useAttachmentUrl({ projectId, blobId, }) {
     const { data: projectApi } = useSingleProject({ projectId });
-    const { data, error, isRefetching } = (0, react_query_1.useSuspenseQuery)((0, projects_js_1.attachmentUrlQueryOptions)({
+    const { data: port, error, isRefetching } = useMediaServerPort({ projectApi });
+    const baseUrl = `http://127.0.0.1:${port}`;
+    const blobUrl = (0, urls_js_1.getBlobUrl)(baseUrl, blobId);
+    return { data: blobUrl, error, isRefetching };
+}
+/**
+ * @internal
+ * Hack to retrieve the media server port.
+ */
+function useMediaServerPort({ projectApi }) {
+    const { data, error, isRefetching } = (0, react_query_1.useSuspenseQuery)((0, projects_js_1.mediaServerPortQueryOptions)({
         projectApi,
-        projectId,
-        blobId,
     }));
     return { data, error, isRefetching };
 }

package/dist/commonjs/lib/react-query/projects.d.ts

@@ -1,4 +1,4 @@
-import type { BlobApi, IconApi } from '@comapeo/core' with { 'resolution-mode': 'import' };
+import type { BlobApi } from '@comapeo/core' with { 'resolution-mode': 'import' };
 import type { MapeoClientApi, MapeoProjectApi } from '@comapeo/ipc' with { 'resolution-mode': 'import' };
 import type { ProjectSettings } from '@comapeo/schema' with { 'resolution-mode': 'import' };
 import { type QueryClient, type UnusedSkipTokenOptions } from '@tanstack/react-query';
@@ -19,27 +19,16 @@ export declare function getMemberByIdQueryKey({ projectId, deviceId, }: {
     projectId: string;
     deviceId: string;
 }): readonly ["@comapeo/core-react", "projects", string, "members", string];
-export declare function getIconUrlQueryKey({ projectId, iconId, ...mimeBasedOpts }: {
-    projectId: string;
-    iconId: string;
-} & (IconApi.BitmapOpts | IconApi.SvgOpts)): readonly ["@comapeo/core-react", "projects", string, "icons", string, {
-    mimeType: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant["mimeType"], "image/png">;
-    pixelDensity: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant, {
-        mimeType: "image/png";
-    }>["pixelDensity"];
-    size: import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).ValidSizes;
-} | {
-    mimeType: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant["mimeType"], "image/svg+xml">;
-    size: import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).ValidSizes;
-}];
 export declare function getDocumentCreatedByQueryKey({ projectId, originalVersionId, }: {
     projectId: string;
     originalVersionId: string;
 }): readonly ["@comapeo/core-react", "projects", string, "document_created_by", string];
-export declare function getAttachmentUrlQueryKey({ projectId, blobId, }: {
-    projectId: string;
-    blobId: BlobApi.BlobId;
-}): readonly ["@comapeo/core-react", "projects", string, "attachments", import("@comapeo/core/dist/types.js", { with: { "resolution-mode": "import" } }).BlobId];
+/**
+ * We call this within a project hook, because that's the only place the API is
+ * exposed right now, but it is the same for all projects, so no need for
+ * scoping the query key to the project
+ */
+export declare function getMediaServerPortQueryKey(): readonly ["@comapeo/core-react", "media_server_port"];
 export declare function projectsQueryOptions({ clientApi, }: {
     clientApi: MapeoClientApi;
 }): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<import("@comapeo/core/dist/mapeo-manager.js", { with: { "resolution-mode": "import" } }).ListedProject[], Error, import("@comapeo/core/dist/mapeo-manager.js", { with: { "resolution-mode": "import" } }).ListedProject[], readonly ["@comapeo/core-react", "projects"]>, "queryFn"> & {
@@ -99,45 +88,6 @@ export declare function projectOwnRoleQueryOptions({ projectApi, projectId, }: {
         [dataTagErrorSymbol]: Error;
     };
 };
-export declare function iconUrlQueryOptions({ projectApi, projectId, iconId, ...mimeBasedOpts }: {
-    projectApi: MapeoProjectApi;
-    projectId: string;
-    iconId: Parameters<MapeoProjectApi['$icons']['getIconUrl']>[0];
-} & (IconApi.BitmapOpts | IconApi.SvgOpts)): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<string, Error, string, readonly ["@comapeo/core-react", "projects", string, "icons", string, {
-    mimeType: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant["mimeType"], "image/png">;
-    pixelDensity: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant, {
-        mimeType: "image/png";
-    }>["pixelDensity"];
-    size: import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).ValidSizes;
-} | {
-    mimeType: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant["mimeType"], "image/svg+xml">;
-    size: import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).ValidSizes;
-}]>, "queryFn"> & {
-    queryFn?: import("@tanstack/react-query").QueryFunction<string, readonly ["@comapeo/core-react", "projects", string, "icons", string, {
-        mimeType: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant["mimeType"], "image/png">;
-        pixelDensity: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant, {
-            mimeType: "image/png";
-        }>["pixelDensity"];
-        size: import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).ValidSizes;
-    } | {
-        mimeType: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant["mimeType"], "image/svg+xml">;
-        size: import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).ValidSizes;
-    }], never> | undefined;
-} & {
-    queryKey: readonly ["@comapeo/core-react", "projects", string, "icons", string, {
-        mimeType: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant["mimeType"], "image/png">;
-        pixelDensity: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant, {
-            mimeType: "image/png";
-        }>["pixelDensity"];
-        size: import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).ValidSizes;
-    } | {
-        mimeType: Extract<import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).IconVariant["mimeType"], "image/svg+xml">;
-        size: import("@comapeo/core/dist/icon-api.js", { with: { "resolution-mode": "import" } }).ValidSizes;
-    }] & {
-        [dataTagSymbol]: string;
-        [dataTagErrorSymbol]: Error;
-    };
-};
 export declare function documentCreatedByQueryOptions({ projectApi, projectId, originalVersionId, }: {
     projectApi: MapeoProjectApi;
     projectId: string;
@@ -150,14 +100,12 @@ export declare function documentCreatedByQueryOptions({ projectApi, projectId, o
         [dataTagErrorSymbol]: Error;
     };
 };
-export declare function attachmentUrlQueryOptions({ projectApi, projectId, blobId, }: {
+export declare function mediaServerPortQueryOptions({ projectApi, }: {
     projectApi: MapeoProjectApi;
-    projectId: string;
-    blobId: BlobApi.BlobId;
-}): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<string, Error, string, readonly ["@comapeo/core-react", "projects", string, "attachments", import("@comapeo/core/dist/types.js", { with: { "resolution-mode": "import" } }).BlobId]>, "queryFn"> & {
-    queryFn?: import("@tanstack/react-query").QueryFunction<string, readonly ["@comapeo/core-react", "projects", string, "attachments", import("@comapeo/core/dist/types.js", { with: { "resolution-mode": "import" } }).BlobId], never> | undefined;
+}): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<string, Error, string, readonly ["@comapeo/core-react", "media_server_port"]>, "queryFn"> & {
+    queryFn?: import("@tanstack/react-query").QueryFunction<string, readonly ["@comapeo/core-react", "media_server_port"], never> | undefined;
 } & {
-    queryKey: readonly ["@comapeo/core-react", "projects", string, "attachments", import("@comapeo/core/dist/types.js", { with: { "resolution-mode": "import" } }).BlobId] & {
+    queryKey: readonly ["@comapeo/core-react", "media_server_port"] & {
         [dataTagSymbol]: string;
         [dataTagErrorSymbol]: Error;
     };

package/dist/commonjs/lib/react-query/projects.js

@@ -6,18 +6,16 @@ exports.getProjectSettingsQueryKey = getProjectSettingsQueryKey;
 exports.getProjectRoleQueryKey = getProjectRoleQueryKey;
 exports.getMembersQueryKey = getMembersQueryKey;
 exports.getMemberByIdQueryKey = getMemberByIdQueryKey;
-exports.getIconUrlQueryKey = getIconUrlQueryKey;
 exports.getDocumentCreatedByQueryKey = getDocumentCreatedByQueryKey;
-exports.getAttachmentUrlQueryKey = getAttachmentUrlQueryKey;
+exports.getMediaServerPortQueryKey = getMediaServerPortQueryKey;
 exports.projectsQueryOptions = projectsQueryOptions;
 exports.projectByIdQueryOptions = projectByIdQueryOptions;
 exports.projectSettingsQueryOptions = projectSettingsQueryOptions;
 exports.projectMembersQueryOptions = projectMembersQueryOptions;
 exports.projectMemberByIdQueryOptions = projectMemberByIdQueryOptions;
 exports.projectOwnRoleQueryOptions = projectOwnRoleQueryOptions;
-exports.iconUrlQueryOptions = iconUrlQueryOptions;
 exports.documentCreatedByQueryOptions = documentCreatedByQueryOptions;
-exports.attachmentUrlQueryOptions = attachmentUrlQueryOptions;
+exports.mediaServerPortQueryOptions = mediaServerPortQueryOptions;
 exports.addServerPeerMutationOptions = addServerPeerMutationOptions;
 exports.removeServerPeerMutationOptions = removeServerPeerMutationOptions;
 exports.createProjectMutationOptions = createProjectMutationOptions;
@@ -52,16 +50,6 @@ function getMembersQueryKey({ projectId }) {
 function getMemberByIdQueryKey({ projectId, deviceId, }) {
     return [shared_js_1.ROOT_QUERY_KEY, 'projects', projectId, 'members', deviceId];
 }
-function getIconUrlQueryKey({ projectId, iconId, ...mimeBasedOpts }) {
-    return [
-        shared_js_1.ROOT_QUERY_KEY,
-        'projects',
-        projectId,
-        'icons',
-        iconId,
-        mimeBasedOpts,
-    ];
-}
 function getDocumentCreatedByQueryKey({ projectId, originalVersionId, }) {
     return [
         shared_js_1.ROOT_QUERY_KEY,
@@ -71,8 +59,13 @@ function getDocumentCreatedByQueryKey({ projectId, originalVersionId, }) {
         originalVersionId,
     ];
 }
-function getAttachmentUrlQueryKey({ projectId, blobId, }) {
-    return [shared_js_1.ROOT_QUERY_KEY, 'projects', projectId, 'attachments', blobId];
+/**
+ * We call this within a project hook, because that's the only place the API is
+ * exposed right now, but it is the same for all projects, so no need for
+ * scoping the query key to the project
+ */
+function getMediaServerPortQueryKey() {
+    return [shared_js_1.ROOT_QUERY_KEY, 'media_server_port'];
 }
 function projectsQueryOptions({ clientApi, }) {
     return (0, react_query_1.queryOptions)({
@@ -128,15 +121,6 @@ function projectOwnRoleQueryOptions({ projectApi, projectId, }) {
         },
     });
 }
-function iconUrlQueryOptions({ projectApi, projectId, iconId, ...mimeBasedOpts }) {
-    return (0, react_query_1.queryOptions)({
-        ...(0, shared_js_1.baseQueryOptions)(),
-        queryKey: getIconUrlQueryKey({ ...mimeBasedOpts, projectId, iconId }),
-        queryFn: async () => {
-            return projectApi.$icons.getIconUrl(iconId, mimeBasedOpts);
-        },
-    });
-}
 function documentCreatedByQueryOptions({ projectApi, projectId, originalVersionId, }) {
     return (0, react_query_1.queryOptions)({
         ...(0, shared_js_1.baseQueryOptions)(),
@@ -147,16 +131,31 @@ function documentCreatedByQueryOptions({ projectApi, projectId, originalVersionI
         queryFn: async () => {
             return projectApi.$originalVersionIdToDeviceId(originalVersionId);
         },
+        staleTime: 'static',
+        gcTime: Infinity,
     });
 }
-function attachmentUrlQueryOptions({ projectApi, projectId, blobId, }) {
+// Used as a placeholder so that we can read the server port from the $blobs.getUrl() method
+const FAKE_BLOB_ID = {
+    type: 'photo',
+    variant: 'original',
+    name: 'name',
+    driveId: 'drive-id',
+};
+function mediaServerPortQueryOptions({ projectApi, }) {
     return (0, react_query_1.queryOptions)({
         ...(0, shared_js_1.baseQueryOptions)(),
-        queryKey: getAttachmentUrlQueryKey({ projectId, blobId }),
+        // HACK: The server doesn't yet expose a method to get its port, so we use
+        // the existing $blobs.getUrl() to get the port with a fake BlobId. The port
+        // is the same regardless of the blobId, so it's not necessary to include it
+        // as a dep for the query key.
+        queryKey: getMediaServerPortQueryKey(),
         queryFn: async () => {
-            // TODO: Might need a refresh token? (similar to map style url)
-            return projectApi.$blobs.getUrl(blobId);
+            const url = await projectApi.$blobs.getUrl(FAKE_BLOB_ID);
+            return new URL(url).port;
         },
+        staleTime: 'static',
+        gcTime: Infinity,
     });
 }
 function addServerPeerMutationOptions({ projectApi, projectId, queryClient, }) {

package/dist/commonjs/lib/urls.d.ts

@@ -0,0 +1,12 @@
+import type { BlobApi, IconApi } from '@comapeo/core';
+/**
+ * Get a url for a blob based on its BlobId
+ */
+export declare function getBlobUrl(baseUrl: string, blobId: BlobApi.BlobId): string;
+/**
+ * @param {string} iconId
+ * @param {BitmapOpts | SvgOpts} opts
+ *
+ * @returns {Promise<string>}
+ */
+export declare function getIconUrl(baseUrl: string, iconId: string, opts: IconApi.BitmapOpts | IconApi.SvgOpts): string;

package/dist/commonjs/lib/urls.js

@@ -0,0 +1,62 @@
+"use strict";
+// TODO: Move these into a separate "@comapeo/asset-server" module which can
+// export them to be imported directly in a client.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBlobUrl = getBlobUrl;
+exports.getIconUrl = getIconUrl;
+const MIME_TO_EXTENSION = {
+    'image/png': '.png',
+    'image/svg+xml': '.svg',
+};
+/**
+ * Get a url for a blob based on its BlobId
+ */
+function getBlobUrl(baseUrl, blobId) {
+    const { driveId, type, variant, name } = blobId;
+    if (!baseUrl.endsWith('/')) {
+        baseUrl += '/';
+    }
+    return baseUrl + `${driveId}/${type}/${variant}/${name}`;
+}
+/**
+ * @param {string} iconId
+ * @param {BitmapOpts | SvgOpts} opts
+ *
+ * @returns {Promise<string>}
+ */
+function getIconUrl(baseUrl, iconId, opts) {
+    if (!baseUrl.endsWith('/')) {
+        baseUrl += '/';
+    }
+    const mimeExtension = MIME_TO_EXTENSION[opts.mimeType];
+    const pixelDensity = opts.mimeType === 'image/svg+xml' ||
+        // if the pixel density is 1, we can omit the density suffix in the resulting url
+        // and assume the pixel density is 1 for applicable mime types when using the url
+        opts.pixelDensity === 1
+        ? undefined
+        : opts.pixelDensity;
+    return (baseUrl +
+        constructIconPath({
+            pixelDensity,
+            size: opts.size,
+            extension: mimeExtension,
+            iconId,
+        }));
+}
+/**
+ * General purpose path builder for an icon
+ */
+function constructIconPath({ size, pixelDensity, iconId, extension, }) {
+    if (iconId.length === 0 || size.length === 0 || extension.length === 0) {
+        throw new Error('iconId, size, and extension cannot be empty strings');
+    }
+    let result = `${iconId}/${size}`;
+    if (typeof pixelDensity === 'number') {
+        if (pixelDensity < 1) {
+            throw new Error('pixelDensity must be a positive number');
+        }
+        result += `@${pixelDensity}x`;
+    }
+    result += extension.startsWith('.') ? extension : '.' + extension;
+    return result;
+}

package/dist/esm/hooks/projects.d.ts

@@ -626,7 +626,13 @@ export declare function useExportGeoJSON({ projectId }: {
     mutate: import("@tanstack/react-query").UseMutateFunction<string, Error, {
         path: string;
         exportOptions: {
-            observations?: boolean;
+            observations
+            /**
+             * Update the settings of a project.
+             *
+             * @param opts.projectId Public ID of the project to apply changes to.
+             */
+            ?: boolean;
             tracks?: boolean;
             lang?: string;
         };
@@ -634,7 +640,13 @@ export declare function useExportGeoJSON({ projectId }: {
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<string, Error, {
         path: string;
         exportOptions: {
-            observations?: boolean;
+            observations
+            /**
+             * Update the settings of a project.
+             *
+             * @param opts.projectId Public ID of the project to apply changes to.
+             */
+            ?: boolean;
             tracks?: boolean;
             lang?: string;
         };
@@ -646,7 +658,13 @@ export declare function useExportGeoJSON({ projectId }: {
     mutate: import("@tanstack/react-query").UseMutateFunction<string, Error, {
         path: string;
         exportOptions: {
-            observations?: boolean;
+            observations
+            /**
+             * Update the settings of a project.
+             *
+             * @param opts.projectId Public ID of the project to apply changes to.
+             */
+            ?: boolean;
             tracks?: boolean;
             lang?: string;
         };
@@ -654,7 +672,13 @@ export declare function useExportGeoJSON({ projectId }: {
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<string, Error, {
         path: string;
         exportOptions: {
-            observations?: boolean;
+            observations
+            /**
+             * Update the settings of a project.
+             *
+             * @param opts.projectId Public ID of the project to apply changes to.
+             */
+            ?: boolean;
             tracks?: boolean;
             lang?: string;
         };

package/dist/esm/hooks/projects.js

@@ -1,7 +1,8 @@
 import { useMutation, useQueryClient, useSuspenseQuery, } from '@tanstack/react-query';
 import { useSyncExternalStore } from 'react';
-import { addServerPeerMutationOptions, attachmentUrlQueryOptions, connectSyncServersMutationOptions, createBlobMutationOptions, createProjectMutationOptions, disconnectSyncServersMutationOptions, documentCreatedByQueryOptions, exportGeoJSONMutationOptions, exportZipFileMutationOptions, iconUrlQueryOptions, importProjectConfigMutationOptions, leaveProjectMutationOptions, projectByIdQueryOptions, projectMemberByIdQueryOptions, projectMembersQueryOptions, projectOwnRoleQueryOptions, projectSettingsQueryOptions, projectsQueryOptions, removeServerPeerMutationOptions, setAutostopDataSyncTimeoutMutationOptions, startSyncMutationOptions, stopSyncMutationOptions, updateProjectSettingsMutationOptions, } from '../lib/react-query/projects.js';
+import { addServerPeerMutationOptions, connectSyncServersMutationOptions, createBlobMutationOptions, createProjectMutationOptions, disconnectSyncServersMutationOptions, documentCreatedByQueryOptions, exportGeoJSONMutationOptions, exportZipFileMutationOptions, importProjectConfigMutationOptions, leaveProjectMutationOptions, mediaServerPortQueryOptions, projectByIdQueryOptions, projectMemberByIdQueryOptions, projectMembersQueryOptions, projectOwnRoleQueryOptions, projectSettingsQueryOptions, projectsQueryOptions, removeServerPeerMutationOptions, setAutostopDataSyncTimeoutMutationOptions, startSyncMutationOptions, stopSyncMutationOptions, updateProjectSettingsMutationOptions, } from '../lib/react-query/projects.js';
 import { SyncStore } from '../lib/sync.js';
+import { getBlobUrl, getIconUrl } from '../lib/urls.js';
 import { useClientApi } from './client.js';
 /**
  * Retrieve the project settings for a project.
@@ -158,13 +159,10 @@ export function useManyMembers({ projectId }) {
  */
 export function useIconUrl({ projectId, iconId, ...mimeBasedOpts }) {
     const { data: projectApi } = useSingleProject({ projectId });
-    const { data, error, isRefetching } = useSuspenseQuery(iconUrlQueryOptions({
-        ...mimeBasedOpts,
-        projectApi,
-        projectId,
-        iconId,
-    }));
-    return { data, error, isRefetching };
+    const { data: port, error, isRefetching } = useMediaServerPort({ projectApi });
+    const baseUrl = `http://127.0.0.1:${port}`;
+    const iconUrl = getIconUrl(baseUrl, iconId, mimeBasedOpts);
+    return { data: iconUrl, error, isRefetching };
 }
 /**
  * Retrieve a URL that points to a desired blob resource.
@@ -219,10 +217,18 @@ export function useIconUrl({ projectId, iconId, ...mimeBasedOpts }) {
  */
 export function useAttachmentUrl({ projectId, blobId, }) {
     const { data: projectApi } = useSingleProject({ projectId });
-    const { data, error, isRefetching } = useSuspenseQuery(attachmentUrlQueryOptions({
+    const { data: port, error, isRefetching } = useMediaServerPort({ projectApi });
+    const baseUrl = `http://127.0.0.1:${port}`;
+    const blobUrl = getBlobUrl(baseUrl, blobId);
+    return { data: blobUrl, error, isRefetching };
+}
+/**
+ * @internal
+ * Hack to retrieve the media server port.
+ */
+function useMediaServerPort({ projectApi }) {
+    const { data, error, isRefetching } = useSuspenseQuery(mediaServerPortQueryOptions({
         projectApi,
-        projectId,
-        blobId,
     }));
     return { data, error, isRefetching };
 }

package/dist/esm/lib/react-query/projects.d.ts

@@ -1,4 +1,4 @@
-import type { BlobApi, IconApi } from '@comapeo/core' with { 'resolution-mode': 'import' };
+import type { BlobApi } from '@comapeo/core' with { 'resolution-mode': 'import' };
 import type { MapeoClientApi, MapeoProjectApi } from '@comapeo/ipc' with { 'resolution-mode': 'import' };
 import type { ProjectSettings } from '@comapeo/schema' with { 'resolution-mode': 'import' };
 import { type QueryClient, type UnusedSkipTokenOptions } from '@tanstack/react-query';
@@ -19,27 +19,16 @@ export declare function getMemberByIdQueryKey({ projectId, deviceId, }: {
     projectId: string;
     deviceId: string;
 }): readonly ["@comapeo/core-react", "projects", string, "members", string];
-export declare function getIconUrlQueryKey({ projectId, iconId, ...mimeBasedOpts }: {
-    projectId: string;
-    iconId: string;
-} & (IconApi.BitmapOpts | IconApi.SvgOpts)): readonly ["@comapeo/core-react", "projects", string, "icons", string, {
-    mimeType: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant["mimeType"], "image/png">;
-    pixelDensity: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant, {
-        mimeType: "image/png";
-    }>["pixelDensity"];
-    size: import("@comapeo/core/dist/icon-api.js").ValidSizes;
-} | {
-    mimeType: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant["mimeType"], "image/svg+xml">;
-    size: import("@comapeo/core/dist/icon-api.js").ValidSizes;
-}];
 export declare function getDocumentCreatedByQueryKey({ projectId, originalVersionId, }: {
     projectId: string;
     originalVersionId: string;
 }): readonly ["@comapeo/core-react", "projects", string, "document_created_by", string];
-export declare function getAttachmentUrlQueryKey({ projectId, blobId, }: {
-    projectId: string;
-    blobId: BlobApi.BlobId;
-}): readonly ["@comapeo/core-react", "projects", string, "attachments", import("@comapeo/core/dist/types.js").BlobId];
+/**
+ * We call this within a project hook, because that's the only place the API is
+ * exposed right now, but it is the same for all projects, so no need for
+ * scoping the query key to the project
+ */
+export declare function getMediaServerPortQueryKey(): readonly ["@comapeo/core-react", "media_server_port"];
 export declare function projectsQueryOptions({ clientApi, }: {
     clientApi: MapeoClientApi;
 }): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<import("@comapeo/core/dist/mapeo-manager.js").ListedProject[], Error, import("@comapeo/core/dist/mapeo-manager.js").ListedProject[], readonly ["@comapeo/core-react", "projects"]>, "queryFn"> & {
@@ -99,45 +88,6 @@ export declare function projectOwnRoleQueryOptions({ projectApi, projectId, }: {
         [dataTagErrorSymbol]: Error;
     };
 };
-export declare function iconUrlQueryOptions({ projectApi, projectId, iconId, ...mimeBasedOpts }: {
-    projectApi: MapeoProjectApi;
-    projectId: string;
-    iconId: Parameters<MapeoProjectApi['$icons']['getIconUrl']>[0];
-} & (IconApi.BitmapOpts | IconApi.SvgOpts)): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<string, Error, string, readonly ["@comapeo/core-react", "projects", string, "icons", string, {
-    mimeType: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant["mimeType"], "image/png">;
-    pixelDensity: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant, {
-        mimeType: "image/png";
-    }>["pixelDensity"];
-    size: import("@comapeo/core/dist/icon-api.js").ValidSizes;
-} | {
-    mimeType: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant["mimeType"], "image/svg+xml">;
-    size: import("@comapeo/core/dist/icon-api.js").ValidSizes;
-}]>, "queryFn"> & {
-    queryFn?: import("@tanstack/react-query").QueryFunction<string, readonly ["@comapeo/core-react", "projects", string, "icons", string, {
-        mimeType: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant["mimeType"], "image/png">;
-        pixelDensity: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant, {
-            mimeType: "image/png";
-        }>["pixelDensity"];
-        size: import("@comapeo/core/dist/icon-api.js").ValidSizes;
-    } | {
-        mimeType: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant["mimeType"], "image/svg+xml">;
-        size: import("@comapeo/core/dist/icon-api.js").ValidSizes;
-    }], never> | undefined;
-} & {
-    queryKey: readonly ["@comapeo/core-react", "projects", string, "icons", string, {
-        mimeType: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant["mimeType"], "image/png">;
-        pixelDensity: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant, {
-            mimeType: "image/png";
-        }>["pixelDensity"];
-        size: import("@comapeo/core/dist/icon-api.js").ValidSizes;
-    } | {
-        mimeType: Extract<import("@comapeo/core/dist/icon-api.js").IconVariant["mimeType"], "image/svg+xml">;
-        size: import("@comapeo/core/dist/icon-api.js").ValidSizes;
-    }] & {
-        [dataTagSymbol]: string;
-        [dataTagErrorSymbol]: Error;
-    };
-};
 export declare function documentCreatedByQueryOptions({ projectApi, projectId, originalVersionId, }: {
     projectApi: MapeoProjectApi;
     projectId: string;
@@ -150,14 +100,12 @@ export declare function documentCreatedByQueryOptions({ projectApi, projectId, o
         [dataTagErrorSymbol]: Error;
     };
 };
-export declare function attachmentUrlQueryOptions({ projectApi, projectId, blobId, }: {
+export declare function mediaServerPortQueryOptions({ projectApi, }: {
     projectApi: MapeoProjectApi;
-    projectId: string;
-    blobId: BlobApi.BlobId;
-}): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<string, Error, string, readonly ["@comapeo/core-react", "projects", string, "attachments", import("@comapeo/core/dist/types.js").BlobId]>, "queryFn"> & {
-    queryFn?: import("@tanstack/react-query").QueryFunction<string, readonly ["@comapeo/core-react", "projects", string, "attachments", import("@comapeo/core/dist/types.js").BlobId], never> | undefined;
+}): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<string, Error, string, readonly ["@comapeo/core-react", "media_server_port"]>, "queryFn"> & {
+    queryFn?: import("@tanstack/react-query").QueryFunction<string, readonly ["@comapeo/core-react", "media_server_port"], never> | undefined;
 } & {
-    queryKey: readonly ["@comapeo/core-react", "projects", string, "attachments", import("@comapeo/core/dist/types.js").BlobId] & {
+    queryKey: readonly ["@comapeo/core-react", "media_server_port"] & {
         [dataTagSymbol]: string;
         [dataTagErrorSymbol]: Error;
     };

package/dist/esm/lib/react-query/projects.js

@@ -18,16 +18,6 @@ export function getMembersQueryKey({ projectId }) {
 export function getMemberByIdQueryKey({ projectId, deviceId, }) {
     return [ROOT_QUERY_KEY, 'projects', projectId, 'members', deviceId];
 }
-export function getIconUrlQueryKey({ projectId, iconId, ...mimeBasedOpts }) {
-    return [
-        ROOT_QUERY_KEY,
-        'projects',
-        projectId,
-        'icons',
-        iconId,
-        mimeBasedOpts,
-    ];
-}
 export function getDocumentCreatedByQueryKey({ projectId, originalVersionId, }) {
     return [
         ROOT_QUERY_KEY,
@@ -37,8 +27,13 @@ export function getDocumentCreatedByQueryKey({ projectId, originalVersionId, })
         originalVersionId,
     ];
 }
-export function getAttachmentUrlQueryKey({ projectId, blobId, }) {
-    return [ROOT_QUERY_KEY, 'projects', projectId, 'attachments', blobId];
+/**
+ * We call this within a project hook, because that's the only place the API is
+ * exposed right now, but it is the same for all projects, so no need for
+ * scoping the query key to the project
+ */
+export function getMediaServerPortQueryKey() {
+    return [ROOT_QUERY_KEY, 'media_server_port'];
 }
 export function projectsQueryOptions({ clientApi, }) {
     return queryOptions({
@@ -94,15 +89,6 @@ export function projectOwnRoleQueryOptions({ projectApi, projectId, }) {
         },
     });
 }
-export function iconUrlQueryOptions({ projectApi, projectId, iconId, ...mimeBasedOpts }) {
-    return queryOptions({
-        ...baseQueryOptions(),
-        queryKey: getIconUrlQueryKey({ ...mimeBasedOpts, projectId, iconId }),
-        queryFn: async () => {
-            return projectApi.$icons.getIconUrl(iconId, mimeBasedOpts);
-        },
-    });
-}
 export function documentCreatedByQueryOptions({ projectApi, projectId, originalVersionId, }) {
     return queryOptions({
         ...baseQueryOptions(),
@@ -113,16 +99,31 @@ export function documentCreatedByQueryOptions({ projectApi, projectId, originalV
         queryFn: async () => {
             return projectApi.$originalVersionIdToDeviceId(originalVersionId);
         },
+        staleTime: 'static',
+        gcTime: Infinity,
     });
 }
-export function attachmentUrlQueryOptions({ projectApi, projectId, blobId, }) {
+// Used as a placeholder so that we can read the server port from the $blobs.getUrl() method
+const FAKE_BLOB_ID = {
+    type: 'photo',
+    variant: 'original',
+    name: 'name',
+    driveId: 'drive-id',
+};
+export function mediaServerPortQueryOptions({ projectApi, }) {
     return queryOptions({
         ...baseQueryOptions(),
-        queryKey: getAttachmentUrlQueryKey({ projectId, blobId }),
+        // HACK: The server doesn't yet expose a method to get its port, so we use
+        // the existing $blobs.getUrl() to get the port with a fake BlobId. The port
+        // is the same regardless of the blobId, so it's not necessary to include it
+        // as a dep for the query key.
+        queryKey: getMediaServerPortQueryKey(),
         queryFn: async () => {
-            // TODO: Might need a refresh token? (similar to map style url)
-            return projectApi.$blobs.getUrl(blobId);
+            const url = await projectApi.$blobs.getUrl(FAKE_BLOB_ID);
+            return new URL(url).port;
         },
+        staleTime: 'static',
+        gcTime: Infinity,
     });
 }
 export function addServerPeerMutationOptions({ projectApi, projectId, queryClient, }) {

package/dist/esm/lib/urls.d.ts

@@ -0,0 +1,12 @@
+import type { BlobApi, IconApi } from '@comapeo/core';
+/**
+ * Get a url for a blob based on its BlobId
+ */
+export declare function getBlobUrl(baseUrl: string, blobId: BlobApi.BlobId): string;
+/**
+ * @param {string} iconId
+ * @param {BitmapOpts | SvgOpts} opts
+ *
+ * @returns {Promise<string>}
+ */
+export declare function getIconUrl(baseUrl: string, iconId: string, opts: IconApi.BitmapOpts | IconApi.SvgOpts): string;

package/dist/esm/lib/urls.js

@@ -0,0 +1,58 @@
+// TODO: Move these into a separate "@comapeo/asset-server" module which can
+// export them to be imported directly in a client.
+const MIME_TO_EXTENSION = {
+    'image/png': '.png',
+    'image/svg+xml': '.svg',
+};
+/**
+ * Get a url for a blob based on its BlobId
+ */
+export function getBlobUrl(baseUrl, blobId) {
+    const { driveId, type, variant, name } = blobId;
+    if (!baseUrl.endsWith('/')) {
+        baseUrl += '/';
+    }
+    return baseUrl + `${driveId}/${type}/${variant}/${name}`;
+}
+/**
+ * @param {string} iconId
+ * @param {BitmapOpts | SvgOpts} opts
+ *
+ * @returns {Promise<string>}
+ */
+export function getIconUrl(baseUrl, iconId, opts) {
+    if (!baseUrl.endsWith('/')) {
+        baseUrl += '/';
+    }
+    const mimeExtension = MIME_TO_EXTENSION[opts.mimeType];
+    const pixelDensity = opts.mimeType === 'image/svg+xml' ||
+        // if the pixel density is 1, we can omit the density suffix in the resulting url
+        // and assume the pixel density is 1 for applicable mime types when using the url
+        opts.pixelDensity === 1
+        ? undefined
+        : opts.pixelDensity;
+    return (baseUrl +
+        constructIconPath({
+            pixelDensity,
+            size: opts.size,
+            extension: mimeExtension,
+            iconId,
+        }));
+}
+/**
+ * General purpose path builder for an icon
+ */
+function constructIconPath({ size, pixelDensity, iconId, extension, }) {
+    if (iconId.length === 0 || size.length === 0 || extension.length === 0) {
+        throw new Error('iconId, size, and extension cannot be empty strings');
+    }
+    let result = `${iconId}/${size}`;
+    if (typeof pixelDensity === 'number') {
+        if (pixelDensity < 1) {
+            throw new Error('pixelDensity must be a positive number');
+        }
+        result += `@${pixelDensity}x`;
+    }
+    result += extension.startsWith('.') ? extension : '.' + extension;
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@comapeo/core-react",
-	"version": "6.0.0",
+	"version": "6.1.0",
 	"description": "React wrapper for working with @comapeo/core",
 	"repository": {
 		"type": "git",