@axium/kino 0.0.1

package/dist/server/media.js

@@ -0,0 +1,136 @@
+import { getConfig } from '@axium/core';
+import * as io from 'ioium/node';
+import * as kt from 'kinotool';
+import { spawn } from 'node:child_process';
+import { existsSync, renameSync, rmSync } from 'node:fs';
+import { join } from 'node:path';
+import { mediaExtensions, mediaTypes } from '../common.js';
+export { extensionForType, mediaExtensions, mediaTypes } from '../common.js';
+/** Path of a movie's files, without an extension */
+export function moviePath(id) {
+    return join(getConfig('@axium/kino').data_dir, 'movie', id.toString());
+}
+/** Path of an episode's files, without an extension */
+export function episodePath(id, season, episode) {
+    return join(getConfig('@axium/kino').data_dir, 'tv', id.toString(), season.toString(), episode.toString());
+}
+/**
+ * Pick which of an item's files to serve.
+ *
+ * This deliberately ignores the `remux` config: it can be changed at any time, and files written under
+ * an older setting still have to be served. Only what is actually on disk decides.
+ *
+ * Playback prefers the MP4, since browsers can seek it without reading the whole file.
+ * Downloads prefer the original upload, which still has every audio track and subtitle.
+ */
+export function resolveMedia(base, download = false) {
+    const order = download ? ['.mkv', '.mp4'] : ['.mp4', '.mkv'];
+    for (const ext of order) {
+        if (existsSync(base + ext))
+            return { path: base + ext, ext, type: mediaTypes[ext] };
+    }
+    return null;
+}
+/** Every file belonging to an item, including a partial remux left behind by a crash */
+export function mediaFiles(base) {
+    return [...mediaExtensions.map(ext => base + ext), base + '.mp4.part'].filter(existsSync);
+}
+/** Remove all of an item's files. Returns the paths that were removed. */
+export function removeMedia(base) {
+    const files = mediaFiles(base);
+    for (const file of files)
+        rmSync(file, { force: true });
+    return files;
+}
+/** Bases with a remux already running, so a retry can't start a second ffmpeg on the same file */
+const remuxing = new Set();
+/**
+ * Start remuxing a freshly uploaded MKV to MP4, if the config asks for it.
+ *
+ * Remuxing multi-GB files takes minutes, so ffmpeg is spawned rather than run through
+ * `kt.mkv.remuxToMp4`, whose synchronous `trackCommand` would block the event loop for the duration.
+ * Until it finishes, `resolveMedia` keeps serving the MKV.
+ */
+export function remuxUpload(base) {
+    const { remux } = getConfig('@axium/kino');
+    if (remux == 'original')
+        return;
+    const input = base + '.mkv', output = base + '.mp4';
+    // Nothing to do for files that were uploaded as MP4 or have already been remuxed
+    if (!existsSync(input) || existsSync(output))
+        return;
+    if (remuxing.has(base))
+        return;
+    let plan;
+    try {
+        plan = kt.mkv.planRemuxToMp4(input, output);
+    }
+    catch (e) {
+        // e.g. HEVC video, which would need a real transcode
+        io.warn(`Kino: cannot remux ${input}: ` + io.errorText(e));
+        return;
+    }
+    remuxing.add(base);
+    io.info(`Kino: remuxing ${input}`);
+    const child = spawn('ffmpeg', plan.args, { stdio: 'ignore' });
+    child.on('error', e => {
+        remuxing.delete(base);
+        rmSync(plan.temp, { force: true });
+        io.warn(`Kino: could not run ffmpeg: ` + io.errorText(e));
+    });
+    child.on('exit', code => {
+        remuxing.delete(base);
+        if (code !== 0) {
+            rmSync(plan.temp, { force: true });
+            io.warn(`Kino: remux of ${input} failed with code ${code}`);
+            return;
+        }
+        try {
+            renameSync(plan.temp, output);
+        }
+        catch (e) {
+            rmSync(plan.temp, { force: true });
+            io.warn(`Kino: could not finish remux of ${input}: ` + io.errorText(e));
+            return;
+        }
+        io.info(`Kino: remuxed ${input}`);
+        /**
+         * Deleting the original is safe while it is being read: the inode survives until every
+         * open handle is closed, and new requests resolve to the MP4.
+         */
+        if (getConfig('@axium/kino').remux == 'replace')
+            rmSync(input, { force: true });
+    });
+    // Don't hold the process open for a remux
+    child.unref();
+}
+/**
+ * Apply TMDB metadata to a freshly written file.
+ *
+ * Only Matroska is handled: `mkvpropedit` edits the header in place, so it finishes in milliseconds
+ * regardless of file size. `kt.mp4.setFromMovie` would rewrite the entire container, and it runs
+ * synchronously, so calling it here would block the event loop for as long as the copy takes.
+ *
+ * A remuxed MP4 still picks up the title through the remux's `-map_metadata`.
+ *
+ * @todo Tag directly-uploaded MP4s once kinotool can plan the rewrite the way `planRemuxToMp4` does,
+ * so ffmpeg can be spawned instead of run inline.
+ */
+export async function applyMetadata(path, ext, data) {
+    if (ext != '.mkv') {
+        io.debug('Kino: skipping metadata for ' + path + ' (only Matroska can be tagged in place)');
+        return;
+    }
+    try {
+        if ('title' in data)
+            await kt.mkv.setFromMovie(path, data);
+        else
+            await kt.mkv.setFromEpisode(path, data);
+        // Browsers take the first audio track, which is often something they can't decode
+        kt.mkv.setAacDefaultAudio(path, kt.mkv.getInfo(path));
+    }
+    catch (e) {
+        // A file we can't tag is still playable, so don't fail the upload over it
+        io.warn('Kino: could not write metadata to ' + path + ': ' + io.errorText(e));
+    }
+}

package/dist/server/tmdb.d.ts

@@ -0,0 +1,2 @@
+import { TMDB } from 'tmdb-ts';
+export declare function tmdb(): TMDB;

package/dist/server/tmdb.js

@@ -0,0 +1,7 @@
+import { getConfig } from '@axium/core';
+import { TMDB } from 'tmdb-ts';
+let api;
+export function tmdb() {
+    api ||= new TMDB(getConfig('@axium/kino').tmdb_api_key);
+    return api;
+}

package/lib/EpisodeList.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { viewProgress, type KinoEpisode } from '@axium/kino/common';
+	import Poster from './Poster.svelte';
+	import ProgressBar from './ProgressBar.svelte';
+
+	const { id, season, episodes }: { id: number; season: number; episodes?: KinoEpisode[] } = $props();
+</script>
+
+<div class="EpisodeList">
+	{#each episodes || [] as episode (episode.episode_number)}
+		{@const progress = viewProgress(episode.progress)}
+		<a class="episode" href="/tv/{id}/{season}/{episode.episode_number}">
+			<div class="art">
+				<Poster path={episode.still_path} type="still" size="w185" alt={episode.name} />
+				{#if progress !== null}
+					<ProgressBar value={progress} />
+				{/if}
+			</div>
+
+			<div class="info">
+				<span class="number subtle">{text('kino.episode_number', { number: episode.episode_number })}</span>
+				<span class="name">{episode.name}</span>
+			</div>
+
+			<Icon i={episode.upload ? 'circle-play' : 'upload'} class="status" />
+		</a>
+	{:else}
+		<p class="subtle">{text('kino.no_episodes')}</p>
+	{/each}
+</div>
+
+<style>
+	.EpisodeList {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+	}
+
+	/* Explicit columns: artwork, then the label, then the status icon pinned to the right */
+	.episode {
+		display: grid;
+		grid-template-columns: 8em 1fr auto;
+		gap: 1em;
+		align-items: center;
+		padding: 0.5em;
+		border-radius: 0.5em;
+		text-decoration: none;
+		color: inherit;
+
+		&:hover {
+			background-color: var(--bg-strong);
+		}
+
+		:global(.status) {
+			--fill: var(--fg-accent);
+		}
+	}
+
+	.art {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25em;
+		min-width: 0;
+	}
+
+	.info {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	.number {
+		font-size: 0.85em;
+	}
+
+	.name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	@media (width < 700px) {
+		.episode {
+			grid-template-columns: 5em 1fr auto;
+		}
+	}
+</style>

package/lib/MediaActions.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { FormDialog, Icon } from '@axium/client/components';
+	import { toast } from '@axium/client/toast';
+	import { formatBytes } from '@axium/core/format';
+	import { mediaAccept, type KinoUpload } from '@axium/kino/common';
+
+	interface Props {
+		/** The upload backing this movie/episode, or nullish when nothing has been uploaded */
+		upload?: KinoUpload | null;
+		/** Where the "watch" button links to */
+		watchHref: string;
+		/** The `/raw` URL the file is downloaded from */
+		dataURL: string;
+		/** Label for the upload button */
+		uploadText: string;
+		/** Whether the current user may delete the upload */
+		canDelete?: boolean;
+		/** Performs the upload, resolving with the new upload once it finishes */
+		uploadFile(file: File): Promise<KinoUpload | undefined>;
+		/** Deletes the upload and its files */
+		deleteUpload?(): Promise<unknown>;
+	}
+
+	let { upload = $bindable(), watchHref, dataURL, uploadText, canDelete, uploadFile, deleteUpload }: Props = $props();
+
+	let input = $state<HTMLInputElement>();
+	let deleteDialog = $state<HTMLDialogElement>();
+
+	function onPicked(event: Event & { currentTarget: HTMLInputElement }) {
+		const file = event.currentTarget.files?.[0];
+
+		// Clear it so picking the same file again still fires a change event
+		event.currentTarget.value = '';
+
+		if (!file) return;
+
+		// Progress is reported by a toast, so there is nothing to wait on here
+		void uploadFile(file).then(result => {
+			if (result) upload = result;
+		});
+	}
+
+	async function confirmDelete() {
+		try {
+			await deleteUpload!();
+			upload = null;
+			void toast('success', text('kino.delete_success'));
+		} catch (e) {
+			void toast('error', e);
+		}
+	}
+</script>
+
+<div class="MediaActions">
+	{#if upload}
+		<a class="action icon-text" href={watchHref}>
+			<Icon i="play" />
+			{text('kino.watch')}
+		</a>
+		<a class="action icon-text" href={dataURL} download={upload.name}>
+			<Icon i="download" />
+			{text('kino.download')}
+		</a>
+		{#if canDelete && deleteUpload}
+			<button class="icon-text danger" onclick={() => deleteDialog?.showModal()}>
+				<Icon i="trash" />
+				{text('kino.delete')}
+			</button>
+		{/if}
+		<span class="subtle">
+			{text('kino.uploaded_detail', { date: upload.uploadedAt.toLocaleDateString(), size: formatBytes(upload.size) })}
+		</span>
+	{:else}
+		<button class="icon-text" onclick={() => input?.click()}>
+			<Icon i="upload" />
+			{uploadText}
+		</button>
+		<span class="subtle">{text('kino.not_uploaded')}</span>
+	{/if}
+
+	<input bind:this={input} type="file" accept={mediaAccept} onchange={onPicked} hidden />
+</div>
+
+<FormDialog bind:dialog={deleteDialog} submitText={text('kino.delete')} submitDanger submit={confirmDelete}>
+	<span>{text('kino.delete_confirm')}</span>
+</FormDialog>
+
+<style>
+	.MediaActions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 1em;
+	}
+
+	.action {
+		border: var(--border-accent);
+		background-color: var(--bg-normal);
+		border-radius: 0.5em;
+		padding: 0.4em 0.75em;
+		text-decoration: none;
+		color: inherit;
+		cursor: pointer;
+
+		&:hover {
+			background-color: var(--bg-accent);
+		}
+	}
+</style>

package/lib/MediaCard.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { KinoSearchResults } from '@axium/kino/common';
+	import Poster from './Poster.svelte';
+
+	const { item }: { item: KinoSearchResults[number] } = $props();
+
+	const href = $derived(item.type == 'movie' ? `/movies/${item.id}` : `/tv/${item.id}`);
+	const title = $derived(item.type == 'movie' ? item.title : item.name);
+	const date = $derived(item.type == 'movie' ? item.release_date : item.first_air_date);
+</script>
+
+<a class="MediaCard" {href}>
+	<Poster path={item.poster_path} type="poster" size="w342" alt={title} />
+	<span class="title">{title}</span>
+	{#if date}
+		<span class="subtle year">{date.getFullYear()}</span>
+	{/if}
+</a>
+
+<style>
+	.MediaCard {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25em;
+		text-decoration: none;
+		color: inherit;
+
+		&:hover .title {
+			color: var(--fg-strong);
+		}
+	}
+
+	.title {
+		text-wrap: balance;
+		line-height: 1.2;
+	}
+
+	.year {
+		font-size: 0.85em;
+	}
+</style>

package/lib/MediaDetail.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { imageURL } from '@axium/kino/client';
+	import type { ImageType } from '@axium/kino/common';
+	import type { Snippet } from 'svelte';
+	import Poster from './Poster.svelte';
+
+	interface Props {
+		title: string;
+		/** Shown above the title, e.g. the show a season belongs to */
+		context?: Snippet;
+		/** The artwork shown beside the title */
+		imagePath?: string | null;
+		imageType?: ImageType;
+		backdropPath?: string | null;
+		date?: Date | null;
+		/** Whether the date is a release date (movies) or an air date (TV) */
+		dateKind?: 'released' | 'aired';
+		overview?: string | null;
+		/** Watch/download/upload buttons */
+		actions?: Snippet;
+		/** Anything below the header, e.g. a season or episode list */
+		children?: Snippet;
+	}
+
+	const {
+		title,
+		context,
+		imagePath,
+		imageType = 'poster',
+		backdropPath,
+		date,
+		dateKind = 'released',
+		overview,
+		actions,
+		children,
+	}: Props = $props();
+
+	const backdrop = $derived(imageURL(backdropPath, 'backdrop', 'w1280'));
+</script>
+
+<div class="MediaDetail">
+	<div class="header">
+		{#if backdrop}
+			<div class="backdrop" style:background-image="url('{backdrop}')"></div>
+		{/if}
+
+		<div class="art"><Poster path={imagePath} type={imageType} size={imageType == 'poster' ? 'w342' : 'w300'} alt={title} /></div>
+
+		<div class="info">
+			{#if context}<span class="subtle">{@render context()}</span>{/if}
+			<h1>{title}</h1>
+			<span class="subtle">
+				{date
+					? text(dateKind == 'aired' ? 'kino.aired' : 'kino.released', { date: date.toLocaleDateString() })
+					: text('kino.unreleased')}
+			</span>
+
+			{#if actions}<div class="actions">{@render actions()}</div>{/if}
+
+			<h2>{text('kino.overview')}</h2>
+			<p class="overview">{overview || text('kino.no_overview')}</p>
+		</div>
+	</div>
+
+	{#if children}{@render children()}{/if}
+</div>
+
+<style>
+	.MediaDetail {
+		display: flex;
+		flex-direction: column;
+		gap: 2em;
+	}
+
+	.header {
+		position: relative;
+		display: grid;
+		grid-template-columns: 14em 1fr;
+		gap: 2em;
+		padding: 1.5em;
+		border-radius: 1em;
+		overflow: hidden;
+		isolation: isolate;
+	}
+
+	.backdrop {
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+		background-size: cover;
+		background-position: center;
+		opacity: 0.25;
+		/* Keep the text readable over busy artwork */
+		mask-image: linear-gradient(to right, transparent, black 40%);
+	}
+
+	.info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+		min-width: 0;
+	}
+
+	h1 {
+		margin: 0;
+		text-wrap: balance;
+	}
+
+	h2 {
+		margin: 0.5em 0 0;
+		font-size: 1.05em;
+	}
+
+	.overview {
+		margin: 0;
+		max-width: 60ch;
+		text-wrap: pretty;
+	}
+
+	.actions {
+		margin-top: 0.5em;
+	}
+
+	@media (width < 700px) {
+		.header {
+			grid-template-columns: 1fr;
+			gap: 1em;
+			padding: 1em;
+		}
+
+		.art {
+			width: 10em;
+		}
+
+		.backdrop {
+			mask-image: linear-gradient(to bottom, transparent, black 60%);
+		}
+	}
+</style>

package/lib/MediaGrid.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { KinoSearchResults } from '@axium/kino/common';
+	import MediaCard from './MediaCard.svelte';
+
+	const { items, empty }: { items: KinoSearchResults; empty: string } = $props();
+</script>
+
+<div class="MediaGrid">
+	{#each items as item (item.type + item.id)}
+		<MediaCard {item} />
+	{:else}
+		<p class="subtle">{empty}</p>
+	{/each}
+</div>
+
+<style>
+	.MediaGrid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
+		gap: 1em;
+		align-items: start;
+
+		&:has(> p) {
+			display: block;
+		}
+	}
+</style>

package/lib/Poster.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Icon } from '@axium/client/components';
+	import { imageURL } from '@axium/kino/client';
+	import type { ImageSize, ImageType } from '@axium/kino/common';
+
+	const { path, type = 'poster', size, alt = '' }: { path?: string | null; type?: ImageType; size?: ImageSize; alt?: string } = $props();
+
+	const src = $derived(imageURL(path, type, size));
+</script>
+
+{#if src}
+	<img class="Poster {type}" {src} {alt} loading="lazy" />
+{:else}
+	<div class="Poster placeholder {type}">
+		<Icon i={type == 'poster' ? 'film' : 'photo-film'} --size="2em" />
+	</div>
+{/if}
+
+<style>
+	.Poster {
+		display: block;
+		width: 100%;
+		border-radius: 0.5em;
+		background-color: var(--bg-alt);
+		object-fit: cover;
+	}
+
+	.poster {
+		aspect-ratio: 2 / 3;
+	}
+
+	.still,
+	.backdrop {
+		aspect-ratio: 16 / 9;
+	}
+
+	.logo,
+	.profile {
+		aspect-ratio: 1;
+		object-fit: contain;
+	}
+
+	.placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		--fill: var(--fg-disabled);
+	}
+</style>

package/lib/ProgressBar.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	/** How far through the item the viewer is, from 0 to 1 */
+	const { value }: { value: number } = $props();
+</script>
+
+<div class="ProgressBar" role="progressbar" aria-valuenow={Math.round(value * 100)} aria-valuemin={0} aria-valuemax={100}>
+	<div class="fill" style:width="{value * 100}%"></div>
+</div>
+
+<style>
+	.ProgressBar {
+		height: 3px;
+		border-radius: 2px;
+		background-color: var(--bg-strong);
+		overflow: hidden;
+
+		.fill {
+			height: 100%;
+			background-color: var(--fg-accent);
+		}
+	}
+</style>