chore: extract all API URLs into a global variable
This commit is contained in:
parent
1e970bcba8
commit
136d38faac
9 changed files with 47 additions and 30 deletions
|
@ -5,6 +5,7 @@
|
||||||
import ModelViewer from "./blobs/ModelViewer.svelte";
|
import ModelViewer from "./blobs/ModelViewer.svelte";
|
||||||
import VideoViewer from "./blobs/VideoViewer.svelte";
|
import VideoViewer from "./blobs/VideoViewer.svelte";
|
||||||
import HashBadge from "./HashBadge.svelte";
|
import HashBadge from "./HashBadge.svelte";
|
||||||
|
import { API_URL } from "../../lib/api";
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
|
|
||||||
|
@ -36,7 +37,7 @@
|
||||||
{#if handled}
|
{#if handled}
|
||||||
<div class="preview">
|
<div class="preview">
|
||||||
{#if model}
|
{#if model}
|
||||||
<ModelViewer lookonly src="api/raw/{address}" />
|
<ModelViewer lookonly src="{API_URL}/raw/{address}" />
|
||||||
{:else if web}
|
{:else if web}
|
||||||
{#if imageLoaded != address}
|
{#if imageLoaded != address}
|
||||||
<Spinner />
|
<Spinner />
|
||||||
|
@ -59,7 +60,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<img
|
<img
|
||||||
src="api/thumb/{address}"
|
src="{API_URL}/thumb/{address}"
|
||||||
alt="Thumbnail for {address}..."
|
alt="Thumbnail for {address}..."
|
||||||
on:load={() => (imageLoaded = address)}
|
on:load={() => (imageLoaded = address)}
|
||||||
on:error={() => (handled = false)}
|
on:error={() => (handled = false)}
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
import TextViewer from "./blobs/TextViewer.svelte";
|
import TextViewer from "./blobs/TextViewer.svelte";
|
||||||
import VideoViewer from "./blobs/VideoViewer.svelte";
|
import VideoViewer from "./blobs/VideoViewer.svelte";
|
||||||
import UpLink from "./UpLink.svelte";
|
import UpLink from "./UpLink.svelte";
|
||||||
|
import { API_URL } from "../../lib/api";
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
export let editable: boolean;
|
export let editable: boolean;
|
||||||
|
@ -58,12 +59,12 @@
|
||||||
{/if}
|
{/if}
|
||||||
{#if pdf}
|
{#if pdf}
|
||||||
<iframe
|
<iframe
|
||||||
src="api/raw/{address}?inline"
|
src="{API_URL}/raw/{address}?inline"
|
||||||
title="PDF document of {address}"
|
title="PDF document of {address}"
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{#if model}
|
{#if model}
|
||||||
<ModelViewer src="api/raw/{address}" />
|
<ModelViewer src="{API_URL}/raw/{address}" />
|
||||||
{/if}
|
{/if}
|
||||||
{#if web}
|
{#if web}
|
||||||
{#if imageLoaded != address}
|
{#if imageLoaded != address}
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
import Ellipsis from "../utils/Ellipsis.svelte";
|
import Ellipsis from "../utils/Ellipsis.svelte";
|
||||||
import UpLink from "./UpLink.svelte";
|
import UpLink from "./UpLink.svelte";
|
||||||
import { useEntity } from "../../lib/entity";
|
import { useEntity } from "../../lib/entity";
|
||||||
import { nativeOpen as nativeOpenApi } from "../../lib/api";
|
import { API_URL, nativeOpen as nativeOpenApi } from "../../lib/api";
|
||||||
import { readable } from "svelte/store";
|
import { readable } from "svelte/store";
|
||||||
import { notify, UpNotification } from "../../notifications";
|
import { notify, UpNotification } from "../../notifications";
|
||||||
import IconButton from "../utils/IconButton.svelte";
|
import IconButton from "../utils/IconButton.svelte";
|
||||||
|
@ -89,7 +89,7 @@
|
||||||
<div class="separator" />
|
<div class="separator" />
|
||||||
<div class="label" class:resolving title={displayLabel}>
|
<div class="label" class:resolving title={displayLabel}>
|
||||||
{#if banner && isFile}
|
{#if banner && isFile}
|
||||||
<a href="api/raw/{address}">
|
<a href="{API_URL}/raw/{address}">
|
||||||
<Ellipsis value={displayLabel} />
|
<Ellipsis value={displayLabel} />
|
||||||
</a>
|
</a>
|
||||||
{:else if link}
|
{:else if link}
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
import type WaveSurfer from "wavesurfer.js";
|
import type WaveSurfer from "wavesurfer.js";
|
||||||
import type { Region, RegionParams } from "wavesurfer.js/src/plugin/regions";
|
import type { Region, RegionParams } from "wavesurfer.js/src/plugin/regions";
|
||||||
import {
|
import {
|
||||||
|
API_URL,
|
||||||
deleteEntry,
|
deleteEntry,
|
||||||
fetchEntity,
|
fetchEntity,
|
||||||
putEntityAttribute,
|
putEntityAttribute,
|
||||||
|
@ -201,7 +202,7 @@
|
||||||
setTimeout(() => wavesurfer.setCurrentTime(region.start));
|
setTimeout(() => wavesurfer.setCurrentTime(region.start));
|
||||||
});
|
});
|
||||||
|
|
||||||
wavesurfer.load(`api/raw/${address}`);
|
wavesurfer.load(`${API_URL}/raw/${address}`);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
export let address: string;
|
export let address: string;
|
||||||
export let detail: boolean;
|
export let detail: boolean;
|
||||||
import { xywh } from "../../../util/fragments/xywh";
|
import { xywh } from "../../../util/fragments/xywh";
|
||||||
|
import { API_URL } from "../../../lib/api";
|
||||||
|
|
||||||
const { entity } = useEntity(address);
|
const { entity } = useEntity(address);
|
||||||
|
|
||||||
|
@ -20,7 +21,7 @@
|
||||||
<img
|
<img
|
||||||
class="preview-image"
|
class="preview-image"
|
||||||
class:imageLoaded
|
class:imageLoaded
|
||||||
src="api/{detail ? 'raw' : 'thumb'}/{objectAddress}#{$entity?.get(
|
src="{API_URL}/{detail ? 'raw' : 'thumb'}/{objectAddress}#{$entity?.get(
|
||||||
'W3C_FRAGMENT_SELECTOR'
|
'W3C_FRAGMENT_SELECTOR'
|
||||||
)}"
|
)}"
|
||||||
use:xywh
|
use:xywh
|
||||||
|
|
|
@ -1,7 +1,12 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { IEntry } from "upend/types";
|
import type { IEntry } from "upend/types";
|
||||||
|
|
||||||
import { deleteEntry, fetchEntity, putEntry } from "../../../lib/api";
|
import {
|
||||||
|
API_URL,
|
||||||
|
deleteEntry,
|
||||||
|
fetchEntity,
|
||||||
|
putEntry,
|
||||||
|
} from "../../../lib/api";
|
||||||
import { useEntity } from "../../../lib/entity";
|
import { useEntity } from "../../../lib/entity";
|
||||||
import IconButton from "../../utils/IconButton.svelte";
|
import IconButton from "../../utils/IconButton.svelte";
|
||||||
import Spinner from "../../utils/Spinner.svelte";
|
import Spinner from "../../utils/Spinner.svelte";
|
||||||
|
@ -226,7 +231,7 @@
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="preview-image"
|
class="preview-image"
|
||||||
src="api/{detail ? 'raw' : 'thumb'}/{address}"
|
src="{API_URL}/{detail ? 'raw' : 'thumb'}/{address}"
|
||||||
alt={address}
|
alt={address}
|
||||||
on:load={loaded}
|
on:load={loaded}
|
||||||
bind:this={imageEl}
|
bind:this={imageEl}
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import { throttle } from "lodash";
|
import { throttle } from "lodash";
|
||||||
import Spinner from "../../utils/Spinner.svelte";
|
import Spinner from "../../utils/Spinner.svelte";
|
||||||
import Icon from "../../utils/Icon.svelte";
|
import Icon from "../../utils/Icon.svelte";
|
||||||
|
import { API_URL } from "../../../lib/api";
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
export let detail: boolean;
|
export let detail: boolean;
|
||||||
|
@ -68,7 +69,7 @@
|
||||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||||
<img
|
<img
|
||||||
class="thumb"
|
class="thumb"
|
||||||
src="api/thumb/{address}?mime=video"
|
src="{API_URL}/thumb/{address}?mime=video"
|
||||||
alt="Preview for {address}"
|
alt="Preview for {address}"
|
||||||
on:load={() => (state = State.PREVIEW)}
|
on:load={() => (state = State.PREVIEW)}
|
||||||
on:mouseover={() => (state = State.PREVIEWING)}
|
on:mouseover={() => (state = State.PREVIEWING)}
|
||||||
|
@ -78,8 +79,8 @@
|
||||||
<!-- svelte-ignore a11y-media-has-caption -->
|
<!-- svelte-ignore a11y-media-has-caption -->
|
||||||
<video
|
<video
|
||||||
preload={detail ? "auto" : "metadata"}
|
preload={detail ? "auto" : "metadata"}
|
||||||
src="api/raw/{address}"
|
src="{API_URL}/raw/{address}"
|
||||||
poster="api/thumb/{address}?mime=video"
|
poster="{API_URL}/thumb/{address}?mime=video"
|
||||||
on:mousemove={updatePreviewPosition}
|
on:mousemove={updatePreviewPosition}
|
||||||
on:mouseleave={resetPreview}
|
on:mouseleave={resetPreview}
|
||||||
on:click|preventDefault={startPlaying}
|
on:click|preventDefault={startPlaying}
|
||||||
|
|
|
@ -13,15 +13,17 @@ import type {
|
||||||
} from "upend/types";
|
} from "upend/types";
|
||||||
import type { EntityListing } from "./entity";
|
import type { EntityListing } from "./entity";
|
||||||
|
|
||||||
|
export const API_URL = "api";
|
||||||
|
|
||||||
export async function fetchEntity(address: string): Promise<UpObject> {
|
export async function fetchEntity(address: string): Promise<UpObject> {
|
||||||
const entityFetch = await fetch(`api/obj/${address}`);
|
const entityFetch = await fetch(`${API_URL}/obj/${address}`);
|
||||||
const entityResult = (await entityFetch.json()) as EntityListing;
|
const entityResult = (await entityFetch.json()) as EntityListing;
|
||||||
const entityListing = new UpListing(entityResult.entries);
|
const entityListing = new UpListing(entityResult.entries);
|
||||||
return entityListing.getObject(address);
|
return entityListing.getObject(address);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchEntry(address: string) {
|
export async function fetchEntry(address: string) {
|
||||||
const response = await fetch(`api/raw/${address}`);
|
const response = await fetch(`${API_URL}/raw/${address}`);
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
const listing = new UpListing({ address: data });
|
const listing = new UpListing({ address: data });
|
||||||
return listing.entries[0];
|
return listing.entries[0];
|
||||||
|
@ -36,7 +38,11 @@ export async function queryOnce(query: string): Promise<UpListing> {
|
||||||
if (!inFlightRequests[query]) {
|
if (!inFlightRequests[query]) {
|
||||||
console.debug(`Querying: ${query}`);
|
console.debug(`Querying: ${query}`);
|
||||||
inFlightRequests[query] = new Promise((resolve, reject) => {
|
inFlightRequests[query] = new Promise((resolve, reject) => {
|
||||||
fetch("api/query", { method: "POST", body: query, keepalive: true })
|
fetch(`${API_URL}/query`, {
|
||||||
|
method: "POST",
|
||||||
|
body: query,
|
||||||
|
keepalive: true,
|
||||||
|
})
|
||||||
.then(async (response) => {
|
.then(async (response) => {
|
||||||
resolve(new UpListing(await response.json()));
|
resolve(new UpListing(await response.json()));
|
||||||
})
|
})
|
||||||
|
@ -53,7 +59,7 @@ export async function queryOnce(query: string): Promise<UpListing> {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function putEntry(entry: InEntry): Promise<PutResult> {
|
export async function putEntry(entry: InEntry): Promise<PutResult> {
|
||||||
const response = await fetch(`api/obj`, {
|
const response = await fetch(`${API_URL}/obj`, {
|
||||||
method: "PUT",
|
method: "PUT",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify(entry),
|
body: JSON.stringify(entry),
|
||||||
|
@ -67,7 +73,7 @@ export async function putEntityAttribute(
|
||||||
attribute: string,
|
attribute: string,
|
||||||
value: IValue
|
value: IValue
|
||||||
): Promise<Address> {
|
): Promise<Address> {
|
||||||
const response = await fetch(`api/obj/${entity}/${attribute}`, {
|
const response = await fetch(`${API_URL}/obj/${entity}/${attribute}`, {
|
||||||
method: "PUT",
|
method: "PUT",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify(value),
|
body: JSON.stringify(value),
|
||||||
|
@ -80,7 +86,7 @@ export async function uploadFile(file: File): Promise<PutResult> {
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append("file", file);
|
formData.append("file", file);
|
||||||
|
|
||||||
const response = await fetch("api/obj", {
|
const response = await fetch(`${API_URL}/obj`, {
|
||||||
method: "PUT",
|
method: "PUT",
|
||||||
body: formData,
|
body: formData,
|
||||||
});
|
});
|
||||||
|
@ -93,42 +99,42 @@ export async function uploadFile(file: File): Promise<PutResult> {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function deleteEntry(address: Address): Promise<void> {
|
export async function deleteEntry(address: Address): Promise<void> {
|
||||||
await fetch(`api/obj/${address}`, { method: "DELETE" });
|
await fetch(`${API_URL}/obj/${address}`, { method: "DELETE" });
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getRaw(address: Address, preview = false) {
|
export async function getRaw(address: Address, preview = false) {
|
||||||
return await fetch(`api/${preview ? "thumb" : "raw"}/${address}`);
|
return await fetch(`${API_URL}/${preview ? "thumb" : "raw"}/${address}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function refreshVault() {
|
export async function refreshVault() {
|
||||||
return await fetch("api/refresh", { method: "POST" });
|
return await fetch(`${API_URL}/refresh`, { method: "POST" });
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function nativeOpen(address: Address) {
|
export async function nativeOpen(address: Address) {
|
||||||
return fetch(`api/raw/${address}?native=1`);
|
return fetch(`${API_URL}/raw/${address}?native=1`);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchRoots(): Promise<ListingResult> {
|
export async function fetchRoots(): Promise<ListingResult> {
|
||||||
const response = await fetch("api/hier_roots");
|
const response = await fetch(`${API_URL}/hier_roots`);
|
||||||
return await response.json();
|
return await response.json();
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchJobs(): Promise<IJob[]> {
|
export async function fetchJobs(): Promise<IJob[]> {
|
||||||
const response = await fetch("api/jobs");
|
const response = await fetch(`${API_URL}/jobs`);
|
||||||
return await response.json();
|
return await response.json();
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchAllAttributes(): Promise<AttributeListingResult> {
|
export async function fetchAllAttributes(): Promise<AttributeListingResult> {
|
||||||
const response = await fetch("api/all/attributes");
|
const response = await fetch(`${API_URL}/all/attributes`);
|
||||||
return await response.json();
|
return await response.json();
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchInfo(): Promise<VaultInfo> {
|
export async function fetchInfo(): Promise<VaultInfo> {
|
||||||
const response = await fetch("api/info");
|
const response = await fetch(`${API_URL}/info`);
|
||||||
return await response.json();
|
return await response.json();
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fetchStoreInfo(): Promise<StoreInfo> {
|
export async function fetchStoreInfo(): Promise<StoreInfo> {
|
||||||
const response = await fetch("api/store");
|
const response = await fetch(`${API_URL}/store`);
|
||||||
return await response.json();
|
return await response.json();
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { derived, type Readable } from "svelte/store";
|
||||||
import { UpListing, UpObject } from "upend";
|
import { UpListing, UpObject } from "upend";
|
||||||
import type { ListingResult } from "upend/types";
|
import type { ListingResult } from "upend/types";
|
||||||
import { useSWR } from "../util/fetch";
|
import { useSWR } from "../util/fetch";
|
||||||
|
import { API_URL } from "./api";
|
||||||
|
|
||||||
export type EntityInfo =
|
export type EntityInfo =
|
||||||
| {
|
| {
|
||||||
|
@ -20,7 +21,7 @@ export interface EntityListing {
|
||||||
|
|
||||||
export function useEntity(address: string) {
|
export function useEntity(address: string) {
|
||||||
const { data, error, revalidate } = useSWR<EntityListing, unknown>(
|
const { data, error, revalidate } = useSWR<EntityListing, unknown>(
|
||||||
`api/obj/${address}`
|
`${API_URL}/obj/${address}`
|
||||||
);
|
);
|
||||||
|
|
||||||
const entity: Readable<UpObject | undefined> = derived(data, ($listing) => {
|
const entity: Readable<UpObject | undefined> = derived(data, ($listing) => {
|
||||||
|
@ -50,7 +51,7 @@ export function useEntity(address: string) {
|
||||||
export function query(query: string) {
|
export function query(query: string) {
|
||||||
console.debug(`Querying: ${query}`);
|
console.debug(`Querying: ${query}`);
|
||||||
const { data, error, revalidate } = useSWR<ListingResult, unknown>(
|
const { data, error, revalidate } = useSWR<ListingResult, unknown>(
|
||||||
"api/query",
|
`${API_URL}/query`,
|
||||||
{ method: "POST", body: query }
|
{ method: "POST", body: query }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue