+
{pageSubtitle}
{/if}
@@ -132,7 +138,7 @@
}
.subnav-page-content.wide {
- max-width: 800px;
+ max-width: 700px;
}
.subnav-page-content.padding {
@@ -170,6 +176,11 @@
.subnav-subtitle {
padding: 0;
+ transition: opacity 0.1s;
+ }
+
+ .subnav-subtitle.hidden {
+ opacity: 0;
}
.subnav-subtitle.center {
diff --git a/web/src/components/subnav/PageNavTab.svelte b/web/src/components/subnav/PageNavTab.svelte
index 380b9c03..898174fd 100644
--- a/web/src/components/subnav/PageNavTab.svelte
+++ b/web/src/components/subnav/PageNavTab.svelte
@@ -47,6 +47,8 @@
text-decoration: none;
text-decoration-line: none;
+
+ cursor: pointer;
}
.subnav-tab-left {
@@ -93,6 +95,7 @@
.subnav-tab.active {
background: var(--secondary);
color: var(--primary);
+ cursor: default;
}
.subnav-tab-text {
diff --git a/web/src/lib/api/api.ts b/web/src/lib/api/api.ts
index 74993a90..19f27c94 100644
--- a/web/src/lib/api/api.ts
+++ b/web/src/lib/api/api.ts
@@ -1,12 +1,16 @@
import { get } from "svelte/store";
import settings from "$lib/state/settings";
+import lazySettingGetter from "$lib/settings/lazy-get";
+
import { getSession } from "$lib/api/session";
import { currentApiURL } from "$lib/api/api-url";
+import { turnstileLoaded } from "$lib/state/turnstile";
import { apiOverrideWarning } from "$lib/api/safety-warning";
+import { cachedInfo, getServerInfo } from "$lib/api/server-info";
+
import type { Optional } from "$lib/types/generic";
import type { CobaltAPIResponse, CobaltErrorResponse } from "$lib/types/api";
-import lazySettingGetter from "$lib/settings/lazy-get";
const request = async (url: string) => {
const getSetting = lazySettingGetter(get(settings));
@@ -34,11 +38,32 @@ const request = async (url: string) => {
await apiOverrideWarning();
- const usingCustomInstance = getSetting("processing", "enableCustomInstances")
- && getSetting("processing", "customInstanceURL");
+ await getServerInfo();
+
+ const getCachedInfo = get(cachedInfo);
+
+ if (!getCachedInfo) {
+ return {
+ status: "error",
+ error: {
+ code: "error.api.unreachable"
+ }
+ } as CobaltErrorResponse;
+ }
+
+ if (getCachedInfo?.info?.cobalt?.turnstileSitekey && !get(turnstileLoaded)) {
+ return {
+ status: "error",
+ error: {
+ code: "error.captcha_ongoing"
+ }
+ } as CobaltErrorResponse;
+ }
+
const api = currentApiURL();
- // FIXME: rewrite this to allow custom instances to specify their own turnstile tokens
- const session = usingCustomInstance ? undefined : await getSession();
+
+ const session = getCachedInfo?.info?.cobalt?.turnstileSitekey
+ ? await getSession() : undefined;
let extraHeaders = {}
diff --git a/web/src/lib/api/server-info.ts b/web/src/lib/api/server-info.ts
index 51a3a90a..8a3e1b60 100644
--- a/web/src/lib/api/server-info.ts
+++ b/web/src/lib/api/server-info.ts
@@ -1,3 +1,5 @@
+import { browser } from "$app/environment";
+
import { get, writable } from "svelte/store";
import { currentApiURL } from "$lib/api/api-url";
@@ -50,6 +52,17 @@ export const getServerInfo = async () => {
info: freshInfo,
origin: currentApiURL(),
});
+
+ /*
+ reload the page if turnstile sitekey changed.
+ there's no other proper way to do this, at least i couldn't find any :(
+ */
+ if (cache?.info?.cobalt?.turnstileSitekey && freshInfo?.cobalt?.turnstileSitekey) {
+ if (browser) {
+ window.location.reload();
+ }
+ }
+
return true;
}
diff --git a/web/src/lib/download.ts b/web/src/lib/download.ts
index b0c80d31..827b33b1 100644
--- a/web/src/lib/download.ts
+++ b/web/src/lib/download.ts
@@ -4,16 +4,31 @@ import settings from "$lib/state/settings";
import { device } from "$lib/device";
import { t } from "$lib/i18n/translations";
-
import { createDialog } from "$lib/dialogs";
-import type { DialogInfo } from "$lib/types/dialog";
-const openSavingDialog = ({ url, file, body }: { url?: string, file?: File, body?: string }) => {
+import type { DialogInfo } from "$lib/types/dialog";
+import type { CobaltFileUrlType } from "$lib/types/api";
+
+type DownloadFileParams = {
+ url?: string,
+ file?: File,
+ urlType?: CobaltFileUrlType,
+}
+
+type SavingDialogParams = {
+ url?: string,
+ file?: File,
+ body?: string,
+ urlType?: CobaltFileUrlType,
+}
+
+const openSavingDialog = ({ url, file, body, urlType }: SavingDialogParams) => {
const dialogData: DialogInfo = {
type: "saving",
id: "saving",
file,
url,
+ urlType,
}
if (body) dialogData.bodyText = body;
@@ -60,13 +75,13 @@ export const copyURL = async (url: string) => {
return await navigator?.clipboard?.writeText(url);
}
-export const downloadFile = ({ url, file }: { url?: string, file?: File }) => {
+export const downloadFile = ({ url, file, urlType }: DownloadFileParams) => {
if (!url && !file) throw new Error("attempted to download void");
const pref = get(settings).save.savingMethod;
if (pref === "ask") {
- return openSavingDialog({ url, file });
+ return openSavingDialog({ url, file, urlType });
}
/*
@@ -77,12 +92,15 @@ export const downloadFile = ({ url, file }: { url?: string, file?: File }) => {
navigator.userActivation.isActive makes sure that we're still able to
invoke an action without the user agent interrupting it.
if not, we show a saving dialog for user to re-invoke that action.
+
+ if browser is old or doesn't support this API, we just assume that it expired.
*/
- if (!navigator.userActivation.isActive) {
+ if (!navigator?.userActivation?.isActive) {
return openSavingDialog({
url,
file,
body: get(t)("dialog.saving.timeout"),
+ urlType
});
}
@@ -98,7 +116,8 @@ export const downloadFile = ({ url, file }: { url?: string, file?: File }) => {
if (url) {
if (pref === "share" && device.supports.share) {
return shareURL(url);
- } else if (pref === "download" && device.supports.directDownload) {
+ } else if (pref === "download" && device.supports.directDownload
+ && !(device.is.iOS && urlType === "redirect")) {
return openURL(url);
} else if (pref === "copy" && !file) {
return copyURL(url);
@@ -106,5 +125,5 @@ export const downloadFile = ({ url, file }: { url?: string, file?: File }) => {
}
} catch { /* catch & ignore */ }
- return openSavingDialog({ url, file });
+ return openSavingDialog({ url, file, urlType });
}
diff --git a/web/src/lib/env.ts b/web/src/lib/env.ts
index 734f482d..53b93a34 100644
--- a/web/src/lib/env.ts
+++ b/web/src/lib/env.ts
@@ -14,7 +14,6 @@ const variables = {
PLAUSIBLE_HOST: getEnv('PLAUSIBLE_HOST'),
PLAUSIBLE_ENABLED: getEnv('HOST') && getEnv('PLAUSIBLE_HOST'),
DEFAULT_API: getEnv('DEFAULT_API'),
- TURNSTILE_KEY: getEnv('TURNSTILE_KEY'),
}
const contacts = {
diff --git a/web/src/lib/i18n/translations.ts b/web/src/lib/i18n/translations.ts
index 24dc3057..9a65c761 100644
--- a/web/src/lib/i18n/translations.ts
+++ b/web/src/lib/i18n/translations.ts
@@ -7,7 +7,7 @@ import type {
LocalizationContent
} from '$lib/types/i18n';
-import languages from '$i18n/languages.json';
+import _languages from '$i18n/languages.json';
const locFiles = import.meta.glob('$i18n/*/**/*.json');
const parsedLocfiles: StructuredLocfileInfo = {};
@@ -22,6 +22,8 @@ for (const [path, loader] of Object.entries(locFiles)) {
}
const defaultLocale = 'en';
+const languages: Record
= _languages;
+
const config: Config<{
value?: string;
formats?: string;
@@ -30,6 +32,8 @@ const config: Config<{
}> = {
fallbackLocale: defaultLocale,
translations: Object.keys(parsedLocfiles).reduce((obj, lang) => {
+ languages[lang] ??= `${lang} (missing name)`;
+
return {
...obj,
[lang]: { languages }
diff --git a/web/src/lib/polyfills.ts b/web/src/lib/polyfills.ts
new file mode 100644
index 00000000..621c9b2b
--- /dev/null
+++ b/web/src/lib/polyfills.ts
@@ -0,0 +1,2 @@
+import "./polyfills/user-activation";
+import "./polyfills/abortsignal-timeout";
diff --git a/web/src/lib/polyfills/abortsignal-timeout.ts b/web/src/lib/polyfills/abortsignal-timeout.ts
new file mode 100644
index 00000000..8d9b3c66
--- /dev/null
+++ b/web/src/lib/polyfills/abortsignal-timeout.ts
@@ -0,0 +1,10 @@
+import { browser } from "$app/environment";
+
+if (browser && 'AbortSignal' in window && !window.AbortSignal.timeout) {
+ window.AbortSignal.timeout = (milliseconds: number) => {
+ const controller = new AbortController();
+ setTimeout(() => controller.abort("timed out"), milliseconds);
+
+ return controller.signal;
+ }
+}
diff --git a/web/src/lib/polyfills/user-activation.ts b/web/src/lib/polyfills/user-activation.ts
new file mode 100644
index 00000000..fc2e968e
--- /dev/null
+++ b/web/src/lib/polyfills/user-activation.ts
@@ -0,0 +1,54 @@
+import { browser } from "$app/environment";
+import type { Writeable } from "$lib/types/generic";
+
+if (browser && !navigator.userActivation) {
+ const TRANSIENT_TIMEOUT = navigator.userAgent.includes('Firefox') ? 5000 : 2000;
+ let _timeout: number | undefined;
+
+ const userActivation: Writeable = {
+ isActive: false,
+ hasBeenActive: false
+ };
+
+ const receiveEvent = (e: Event) => {
+ // An activation triggering input event is any event whose isTrusted attribute is true [...]
+ if (!e.isTrusted) return;
+
+ // and whose type is one of:
+ if (e instanceof PointerEvent) {
+ if (
+ // "pointerdown", provided the event's pointerType is "mouse";
+ (e.type === 'pointerdown' && e.pointerType !== 'mouse')
+ // "pointerup", provided the event's pointerType is not "mouse";
+ || (e.type === 'pointerup' && e.pointerType === 'mouse')
+ )
+ return;
+ } else if (e instanceof KeyboardEvent) {
+ // "keydown", provided the key is neither the Esc key nor a shortcut key
+ // reserved by the user agent;
+ if (e.ctrlKey || e.shiftKey || e.altKey || e.metaKey)
+ return;
+
+ // the handling for this is a bit more complex,
+ // but this is fine for our use case
+ if (e.key !== 'Return' && e.key !== 'Enter' && e.key.length > 1)
+ return;
+ }
+
+ userActivation.hasBeenActive = true;
+ userActivation.isActive = true;
+
+ clearTimeout(_timeout);
+ _timeout = window.setTimeout(() => {
+ userActivation.isActive = false;
+ _timeout = undefined;
+ }, TRANSIENT_TIMEOUT);
+ }
+
+ // https://html.spec.whatwg.org/multipage/interaction.html#the-useractivation-interface
+ for (const event of [ 'keydown', 'mousedown', 'pointerdown', 'pointerup', 'touchend' ]) {
+ window.addEventListener(event, receiveEvent);
+ }
+
+ (navigator.userActivation as UserActivation) = userActivation;
+}
diff --git a/web/src/lib/types/api.ts b/web/src/lib/types/api.ts
index 4df054aa..b2e47a40 100644
--- a/web/src/lib/types/api.ts
+++ b/web/src/lib/types/api.ts
@@ -40,6 +40,8 @@ type CobaltTunnelResponse = {
status: CobaltResponseType.Tunnel,
} & CobaltPartialURLResponse;
+export type CobaltFileUrlType = "redirect" | "tunnel";
+
export type CobaltSession = {
token: string,
exp: number,
@@ -51,6 +53,7 @@ export type CobaltServerInfo = {
url: string,
startTime: string,
durationLimit: number,
+ turnstileSitekey?: string,
services: string[]
},
git: {
@@ -64,6 +67,6 @@ export type CobaltSessionResponse = CobaltSession | CobaltErrorResponse;
export type CobaltServerInfoResponse = CobaltServerInfo | CobaltErrorResponse;
export type CobaltAPIResponse = CobaltErrorResponse
- | CobaltPickerResponse
- | CobaltRedirectResponse
- | CobaltTunnelResponse;
+ | CobaltPickerResponse
+ | CobaltRedirectResponse
+ | CobaltTunnelResponse;
diff --git a/web/src/lib/types/dialog.ts b/web/src/lib/types/dialog.ts
index fa0df5fe..69e27b5d 100644
--- a/web/src/lib/types/dialog.ts
+++ b/web/src/lib/types/dialog.ts
@@ -1,3 +1,4 @@
+import type { CobaltFileUrlType } from "$lib/types/api";
import type { MeowbaltEmotions } from "$lib/types/meowbalt";
export type DialogButton = {
@@ -43,6 +44,7 @@ type SavingDialog = Dialog & {
bodyText?: string,
url?: string,
file?: File,
+ urlType?: CobaltFileUrlType,
};
export type DialogInfo = SmallDialog | PickerDialog | SavingDialog;
diff --git a/web/src/lib/types/generic.ts b/web/src/lib/types/generic.ts
index 9807cea5..59844106 100644
--- a/web/src/lib/types/generic.ts
+++ b/web/src/lib/types/generic.ts
@@ -9,3 +9,4 @@ export type RecursivePartial = {
export type DefaultImport = () => Promise<{ default: T }>;
export type Optional = T | undefined;
+export type Writeable = { -readonly [P in keyof T]: T[P] };
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index ce6066ac..ed02b345 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -7,7 +7,9 @@
import { updated } from "$app/stores";
import { browser } from "$app/environment";
import { afterNavigate } from "$app/navigation";
+ import { getServerInfo, cachedInfo } from "$lib/api/server-info";
+ import "$lib/polyfills";
import env from "$lib/env";
import settings from "$lib/state/settings";
import locale from "$lib/i18n/locale";
@@ -30,10 +32,16 @@
$settings.appearance.reduceTransparency ||
device.prefers.reducedTransparency;
- afterNavigate(() => {
+ $: spawnTurnstile = !!$cachedInfo?.info?.cobalt?.turnstileSitekey;
+
+ afterNavigate(async() => {
const to_focus: HTMLElement | null =
document.querySelector("[data-first-focus]");
to_focus?.focus();
+
+ if ($page.url.pathname === "/") {
+ await getServerInfo();
+ }
});
@@ -76,7 +84,7 @@
- {#if (env.TURNSTILE_KEY && $page.url.pathname === "/") || $turnstileCreated}
+ {#if (spawnTurnstile && $page.url.pathname === "/") || $turnstileCreated}
{/if}
@@ -135,6 +143,7 @@
);
--safe-area-inset-top: env(safe-area-inset-top);
+ --safe-area-inset-bottom: env(safe-area-inset-bottom);
--switcher-padding: var(--sidebar-inner-padding);
@@ -483,6 +492,14 @@
margin-block-start: 0.3em;
}
+ :global(.long-text-noto.about .heading-container) {
+ padding-top: calc(var(--padding) / 2);
+ }
+
+ :global(.long-text-noto.about section:first-of-type .heading-container) {
+ padding-top: 0;
+ }
+
@media screen and (max-width: 535px) {
:global(.long-text-noto),
:global(.long-text-noto *:not(h1, h2, h3, h4, h5, h6)) {
diff --git a/web/src/routes/_headers/+server.ts b/web/src/routes/_headers/+server.ts
new file mode 100644
index 00000000..375c6bcd
--- /dev/null
+++ b/web/src/routes/_headers/+server.ts
@@ -0,0 +1,21 @@
+export function GET() {
+ const _headers = {
+ "/*": {
+ "Cross-Origin-Opener-Policy": "same-origin",
+ "Cross-Origin-Embedder-Policy": "require-corp",
+ }
+ }
+
+ return new Response(
+ Object.entries(_headers).map(
+ ([path, headers]) => [
+ path,
+ Object.entries(headers).map(
+ ([key, value]) => ` ${key}: ${value}`
+ )
+ ].flat().join("\n")
+ ).join("\n\n")
+ );
+}
+
+export const prerender = true;
diff --git a/web/src/routes/about/[page]/+page.svelte b/web/src/routes/about/[page]/+page.svelte
new file mode 100644
index 00000000..68bad426
--- /dev/null
+++ b/web/src/routes/about/[page]/+page.svelte
@@ -0,0 +1,6 @@
+
+
+
diff --git a/web/src/routes/about/[page]/+page.ts b/web/src/routes/about/[page]/+page.ts
new file mode 100644
index 00000000..be5c7a33
--- /dev/null
+++ b/web/src/routes/about/[page]/+page.ts
@@ -0,0 +1,29 @@
+import type { ComponentType, SvelteComponent } from 'svelte';
+import { get } from 'svelte/store';
+import { error } from '@sveltejs/kit';
+
+import type { PageLoad } from './$types';
+
+import locale from '$lib/i18n/locale';
+import type { DefaultImport } from '$lib/types/generic';
+import { defaultLocale } from '$lib/i18n/translations';
+
+const pages = import.meta.glob('$i18n/*/about/*.md');
+
+export const load: PageLoad = async ({ params }) => {
+ const getPage = (locale: string) => Object.keys(pages).find(
+ file => file.endsWith(`${locale}/about/${params.page}.md`)
+ );
+
+ const componentPath = getPage(get(locale)) || getPage(defaultLocale);
+ if (componentPath) {
+ type Component = ComponentType
;
+ const componentImport = pages[componentPath] as DefaultImport;
+
+ return { component: (await componentImport()).default }
+ }
+
+ error(404, 'Not found');
+};
+
+export const prerender = true;
diff --git a/web/src/routes/about/credits/+page.svelte b/web/src/routes/about/credits/+page.svelte
deleted file mode 100644
index a9148275..00000000
--- a/web/src/routes/about/credits/+page.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
- meowbalt
-
- meowbalt is cobalt's speedy mascot. he is an extremely expressive cat that loves fast internet.
-
-
- all amazing drawings of meowbalt that you see in cobalt were made by
- GlitchyPSI.
- he is also the original designer of the character.
-
-
- you cannot use or modify GlitchyPSI's artworks of meowbalt without his explicit permission.
-
-
- you cannot use or modify the meowbalt character design commercially or in any form that isn't fan art.
-
-
-
- cobalt licenses
-
- cobalt processing server is open source and licensed under AGPL-3.0.
-
-
- cobalt frontend is
- source first
- and licensed under
- CC-BY-NC-SA 4.0.
- we decided to use this license to stop grifters from profiting off our work & from creating malicious clones that deceive people and hurt our public identity.
-
-
- we rely on many open source libraries, create & distribute our own.
- you can see the full list of dependencies on github.
-
-
-
-
- best way to save what you love
-
- cobalt lets you save anything from your favorite websites: video, audio, photos or gifs — cobalt can do it all!
-
-
- no ads, trackers, or paywalls, no nonsense. just a convenient web app that works everywhere.
-
-
-
-
- leading privacy
-
- all requests to backend are anonymous and all tunnels are encrypted.
- we have a strict zero log policy and don't track anything at all.
-
-
- to avoid caching or storing downloaded files, cobalt processes them on-fly, sending processed pieces directly to client.
- this technology is used when your request needs additional processing, such as when source service stores video & audio in separate files.
-
-
- for even higher level of protection, you can ask cobalt to always tunnel everything.
- when enabled, cobalt will proxy everything through itself. no one will know what you download, even your network provider/admin.
- all they'll see is that you're using cobalt.
-
-
-
-
- blazing speed
-
- since we don't rely on any existing downloaders and develop our own from ground up,
- cobalt is extremely efficient and a processing server can run on basically any hardware.
-
-
- main processing instances are hosted on several dedicated servers in several countries,
- to reduce latency and distribute the traffic.
-
-
- we constantly improve our infrastructure along with our long-standing partner,
- royalehosting.net!
- you're in good hands, and will get what you need within seconds.
-
-
-
-
-
-
- on-device processing
-
- new features, such as remuxing, work on-device.
- on-device processing is efficient and never sends anything over the internet.
- it perfectly aligns with our future goal of moving as much processing as possible to client.
-
-
-
-
- general terms
-
- cobalt's privacy policy is simple: we don't collect or store anything about you. what you do is solely your business, not ours or anyone else's.
-
-
- these terms are applicable only when using the official cobalt instance. in other cases, you may need to contact the hoster for accurate info.
-
-
-
-
- on-device processing
-
- tools that use on-device processing work offline, locally, and never send any data anywhere. they are explicitly marked as such whenever applicable.
-
-
-
-
- saving
-
- when using saving functionality, in some cases cobalt will encrypt & temporarily store information needed for tunnelling. it's stored in processing server's RAM for 90 seconds and irreversibly purged afterwards. no one has access to it, even instance owners, as long as they don't modify the official cobalt image.
-
-
- processed/tunnelled files are never cached anywhere. everything is tunnelled live. cobalt's saving functionality is essentially a fancy proxy service.
-
-
-
-
- encryption
-
- temporarily stored tunnel data is encrypted using the AES-256 standard. decryption keys are only included in the access link and never logged/cached/stored anywhere. only the end user has access to the link & encryption keys. keys are generated uniquely for each requested tunnel.
-
-
-
- {#if env.PLAUSIBLE_ENABLED}
-
- anonymous traffic analytics
-
- for sake of privacy, we use
- plausible's anonymous traffic analytics
- to get an approximate number of active cobalt users. no identifiable information about you or your requests is ever stored. all data is anonymized and aggregated. the plausible instance we use is hosted & managed by us.
-
-
-
- plausible doesn't use cookies and is fully compliant with GDPR, CCPA, and PECR.
-
-
-
-
- {$t("settings.privacy.analytics.learnmore")}
-
-
-
-
- if you wish to opt out of anonymous analytics, you can do it in privacy settings.
-
-
- {/if}
-
-
- web privacy & security
-
- we use cloudflare services for ddos & bot protection. we also use cloudflare pages for deploying & hosting the static web app. all of these are required to provide the best experience for everyone. it's the most private & reliable provider that we know of.
-
-
- cloudflare is fully compliant with GDPR and HIPAA.
-
-
-
- learn more about cloudflare's dedication to privacy.
-
-
-
-
-
-
- general terms
-
- these terms are applicable only when using the official cobalt instance. in other cases, you may need to contact the hoster for accurate info.
-
-
- saving
-
- saving functionality simplifies downloading content from the internet and takes zero liability for what the saved content is used for. processing servers work like advanced proxies and don't ever write any content to disk. everything is handled in RAM and permanently purged once the tunnel is done. we have no downloading logs and can't identify anyone.
-
-
- you can read more about how tunnels work in our privacy policy.
-
-
-
-
- responsibilities
-
- you (end user) are responsible for what you do with our tools, how you use and distribute resulting content. please be mindful when using content of others and always credit original creators. make sure you don't violate any terms or licenses.
-
-
- when used in educational purposes, always cite sources and credit original creators.
-
-
- fair use and credits benefit everyone.
-
-
-
-
- reporting abuse
-
- we have no way of detecting abusive behavior automatically, as cobalt is 100% anonymous. however, you can report such activities to us and we will do our best to comply manually: safety@imput.net
-
-
-