Das Web bekommt ein Fundament und einen eigenen Server
Schritt 2 des Plans, erste Hälfte. Vite mit TypeScript, und ein Server ohne eine einzige Abhängigkeit — er soll auf einem kleinen Container laufen, nicht sein halbes Verzeichnis mitschleppen. Der Server ist nicht Zierde. Er löst zwei Dinge, gegen die keine Zeile im Frontend etwas ausrichten kann: Anfragen laufen über dieselbe Adresse wie die Seite, womit CORS erledigt ist, auch beim Streamen. Und läuft der Medienserver im Klartext, während die Seite verschlüsselt ausgeliefert wird, blockiert der Browser sonst den Strom. Geprüft: Weiterreichen mitsamt Autorisierung und richtig gesetztem Host, Ausliefern gebauter Dateien, unbekannte Wege landen auf der Seite — und ein Ausbruchsversuch mit "../../../etc/passwd" liefert die Seite statt der Passwortdatei. Der Körper wird durchgereicht statt gepuffert: ein Film ist ein Strom, und ihn erst vollständig einzulesen hieße, ihn zwischenzuspeichern. Die einzelne Datei bleibt vorerst, sie läuft ja. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
co-authored by
Claude Opus 5
Claude Opus 5
parent
87b9fae94b
commit
a04784ca15
@@ -0,0 +1,151 @@
|
||||
import type { Wiedergabeauskunft } from './types';
|
||||
|
||||
/* Der Draht zum Server.
|
||||
----------------------------------------------------------------------------
|
||||
**Alles geht über `/api`, nicht über die Adresse des Medienservers.** Das
|
||||
ist der Grund, warum es diesen Server überhaupt gibt: Er reicht die
|
||||
Anfragen weiter, und damit haben Seite und Daten dieselbe Herkunft. Kein
|
||||
CORS, kein Ärger mit gemischtem HTTP und HTTPS, und der Zugangsschlüssel
|
||||
bleibt beim Server statt im Browser zu liegen.
|
||||
|
||||
Die Endpunkte selbst sind dieselben, die auch die App benutzt — übernommen
|
||||
aus JellyfinKit, nicht geraten. */
|
||||
|
||||
const BASIS = '/api';
|
||||
|
||||
export const sitzung = {
|
||||
token: localStorage.getItem('flixy.token') ?? '',
|
||||
userId: localStorage.getItem('flixy.user') ?? '',
|
||||
geraet:
|
||||
localStorage.getItem('flixy.device') ??
|
||||
(() => {
|
||||
const id = 'flixy-web-' + Math.random().toString(36).slice(2, 12);
|
||||
localStorage.setItem('flixy.device', id);
|
||||
return id;
|
||||
})(),
|
||||
};
|
||||
|
||||
/** Die Kopfzeile, mit oder ohne Schlüssel.
|
||||
*
|
||||
* Die Anführungszeichen sind Pflicht, auch um Werte ohne Leerzeichen —
|
||||
* Jellyfin zerlegt die Zeile sonst falsch und meldet, man sei nicht
|
||||
* angemeldet, obwohl der Schlüssel stimmt. */
|
||||
function kopfzeile(): string {
|
||||
const teile = [
|
||||
'Client="Flixy Web"',
|
||||
'Device="Browser"',
|
||||
`DeviceId="${sitzung.geraet}"`,
|
||||
'Version="0.1"',
|
||||
];
|
||||
if (sitzung.token) teile.push(`Token="${sitzung.token}"`);
|
||||
return 'MediaBrowser ' + teile.join(', ');
|
||||
}
|
||||
|
||||
export class ServerFehler extends Error {
|
||||
constructor(public status: number, text: string) {
|
||||
super(text);
|
||||
}
|
||||
}
|
||||
|
||||
export async function api<T = unknown>(pfad: string, opts: RequestInit = {}): Promise<T> {
|
||||
const res = await fetch(BASIS + pfad, {
|
||||
...opts,
|
||||
headers: {
|
||||
Authorization: kopfzeile(),
|
||||
Accept: 'application/json',
|
||||
...(opts.body ? { 'Content-Type': 'application/json' } : {}),
|
||||
...opts.headers,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new ServerFehler(
|
||||
res.status,
|
||||
res.status === 401 ? 'Nicht angemeldet' : `HTTP ${res.status}`,
|
||||
);
|
||||
}
|
||||
return res.status === 204 ? (null as T) : ((await res.json()) as T);
|
||||
}
|
||||
|
||||
/** Eine Adresse für das <video>-Element oder ein <img>.
|
||||
*
|
||||
* Beide schicken keine Kopfzeilen mit, deshalb hängt der Schlüssel in der
|
||||
* Adresse. Denselben Umweg geht die App. */
|
||||
export function medienURL(pfad: string, query: Record<string, string | number> = {}): string {
|
||||
const u = new URL(BASIS + pfad, location.origin);
|
||||
for (const [k, v] of Object.entries(query)) {
|
||||
if (v !== '' && v != null) u.searchParams.set(k, String(v));
|
||||
}
|
||||
if (sitzung.token) u.searchParams.set('api_key', sitzung.token);
|
||||
return u.href;
|
||||
}
|
||||
|
||||
/* ---------- Anmeldung ---------- */
|
||||
|
||||
export async function anmelden(benutzer: string, passwort: string): Promise<void> {
|
||||
sitzung.token = '';
|
||||
const r = await api<{ AccessToken: string; User: { Id: string } }>(
|
||||
'/Users/AuthenticateByName',
|
||||
{ method: 'POST', body: JSON.stringify({ Username: benutzer, Pw: passwort }) },
|
||||
);
|
||||
sitzung.token = r.AccessToken;
|
||||
sitzung.userId = r.User.Id;
|
||||
localStorage.setItem('flixy.token', sitzung.token);
|
||||
localStorage.setItem('flixy.user', sitzung.userId);
|
||||
}
|
||||
|
||||
export function abmelden(): void {
|
||||
localStorage.removeItem('flixy.token');
|
||||
localStorage.removeItem('flixy.user');
|
||||
location.reload();
|
||||
}
|
||||
|
||||
export const angemeldet = (): boolean => Boolean(sitzung.token && sitzung.userId);
|
||||
|
||||
/* ---------- Wiedergabe ---------- */
|
||||
|
||||
/** Handelt mit dem Server aus, wie abgespielt wird.
|
||||
*
|
||||
* Das Geräteprofil sagt, was dieses Ende kann; die Antwort sagt, was daraus
|
||||
* folgt. Leere `DirectPlayProfiles` heißt: nichts geht unverändert, rechne
|
||||
* um. Im Browser ist das die ehrliche Auskunft — ein <video>-Element kann
|
||||
* kein MKV und kein DTS. */
|
||||
export function wiedergabeauskunft(
|
||||
itemID: string,
|
||||
wahl: { quality?: number; audio?: number | null; subtitle?: number | null } = {},
|
||||
): Promise<Wiedergabeauskunft> {
|
||||
const grenze = (wahl.quality ?? 0) > 0 ? wahl.quality! : 20000;
|
||||
const profil = {
|
||||
MaxStreamingBitrate: grenze * 1000,
|
||||
DirectPlayProfiles: [],
|
||||
TranscodingProfiles: [
|
||||
{
|
||||
Type: 'Video', Container: 'ts', Protocol: 'hls', VideoCodec: 'h264',
|
||||
AudioCodec: 'aac,mp3', Context: 'Streaming', MaxAudioChannels: '2',
|
||||
MinSegments: 1, BreakOnNonKeyFrames: true,
|
||||
},
|
||||
],
|
||||
SubtitleProfiles: [
|
||||
{ Format: 'vtt', Method: 'Hls' },
|
||||
{ Format: 'srt', Method: 'External' },
|
||||
],
|
||||
};
|
||||
|
||||
return api<Wiedergabeauskunft>(
|
||||
`/Items/${itemID}/PlaybackInfo?` + new URLSearchParams({ userId: sitzung.userId }),
|
||||
{
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
DeviceProfile: profil,
|
||||
UserId: sitzung.userId,
|
||||
MaxStreamingBitrate: profil.MaxStreamingBitrate,
|
||||
EnableDirectPlay: false,
|
||||
EnableDirectStream: false,
|
||||
EnableTranscoding: true,
|
||||
AutoOpenLiveStream: true,
|
||||
...(wahl.audio != null ? { AudioStreamIndex: wahl.audio } : {}),
|
||||
...((wahl.subtitle ?? -1) >= 0 ? { SubtitleStreamIndex: wahl.subtitle } : {}),
|
||||
}),
|
||||
},
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user