@axium/kino 0.1.3 → 0.1.4

package/dist/client/frontend.d.ts

@@ -1,3 +1,9 @@
 import type { KinoUpload } from '../common.js';
 export declare function uploadMovieFile(file: File, id: number): Promise<KinoUpload | undefined>;
 export declare function uploadEpisodeFile(file: File, id: number, season: number, episode: number): Promise<KinoUpload | undefined>;
+/** Handle a drop on a show page: `S01E07.mkv`, or `E07.mkv`/`07.mkv` inside an `S01`/`01` directory. */
+export declare function uploadShowDrop(entries: Iterable<FileSystemEntry>, id: number): Promise<number>;
+/** Handle a drop on a season page: `E07.mkv`, `07.mkv`, or `S01E07.mkv` for this season. */
+export declare function uploadSeasonDrop(entries: Iterable<FileSystemEntry>, id: number, season: number): Promise<number>;
+export declare function uploadMovieDrop(entries: Iterable<FileSystemEntry>, id: number): Promise<KinoUpload | undefined>;
+export declare function uploadEpisodeDrop(entries: Iterable<FileSystemEntry>, id: number, season: number, episode: number): Promise<KinoUpload | undefined>;

package/dist/client/frontend.js

@@ -1,6 +1,7 @@
 import { text } from '@axium/client';
 import { setProgressCancel, toast } from '@axium/client/toast';
 import * as io from 'ioium';
+import { mediaExtensions } from '../common.js';
 import { uploadEpisode, uploadMovie } from './api.js';
 /**
  * Report the outcome of an upload as a toast, reporting cancellation as info rather than an error.
@@ -31,3 +32,189 @@ export function uploadMovieFile(file, id) {
 export function uploadEpisodeFile(file, id, season, episode) {
     return toastUpload(signal => uploadEpisode(file, id, season, episode, { signal, onProgress: (uploaded, total) => io.progress(uploaded, total) }), file.name);
 }
+/**
+ * Recursively resolve dragged filesystem entries into files, remembering where each one came from.
+ *
+ * Dropped files have no `webkitRelativePath`, so the equivalent path is built while walking.
+ */
+async function collectDropped(entries, directories = []) {
+    const files = [];
+    for (const entry of entries) {
+        if (entry.isDirectory) {
+            const reader = entry.createReader();
+            // `readEntries` returns a limited number of entries at a time and an empty batch when done
+            const read = () => new Promise(reader.readEntries.bind(reader));
+            for (let batch = await read(); batch.length; batch = await read())
+                files.push(...(await collectDropped(batch, [...directories, entry.name])));
+        }
+        else {
+            const file = await new Promise(entry.file.bind(entry));
+            files.push({ file, directories });
+        }
+    }
+    return files;
+}
+/** Split a file name into its base name and lowercased extension */
+function splitExtension(name) {
+    const dot = name.lastIndexOf('.');
+    return dot < 1 ? [name, ''] : [name.slice(0, dot), name.slice(dot).toLowerCase()];
+}
+/**
+ * Anything that isn't a container we accept — subtitles, artwork, `.nfo` files — is dropped silently,
+ * since whole season directories are usually full of them.
+ */
+function onlyMedia(files) {
+    return files.filter(({ file }) => mediaExtensions.includes(splitExtension(file.name)[1]));
+}
+/** How a season number can be introduced: `S01`, `Season 01` */
+const seasonPrefix = 's(?:eason)?';
+/** How an episode number can be introduced: `E07`, `Ep07`, `Episode 07` */
+const episodePrefix = 'e(?:pisode|p)?';
+/**
+ * Anything that isn't a letter or a digit separates words, so `_`, `.`, `-` and spaces all count.
+ * `\b` is not used here since it treats `_` as part of a word.
+ */
+const boundary = '[^a-z0-9]';
+/** A number on its own, e.g. `07` */
+function parseBare(part) {
+    return /^\d+$/.test(part.trim()) ? Number(part.trim()) : null;
+}
+/** A prefixed number anywhere in `part`, so long as it starts and ends on a word boundary, e.g. `E07` in `Show_E07_1080p` */
+function parsePrefixed(part, prefix) {
+    const match = new RegExp(`(?:^|${boundary})${prefix}${boundary}*(\\d+)(?![a-z0-9])`, 'i').exec(part);
+    return match ? Number(match[1]) : null;
+}
+/** The season or episode number a name gives, either as the whole name (`07`) or as a prefixed part of it (`E07`, `Ep 7`) */
+function parseNumbered(part, prefix) {
+    return parseBare(part) ?? parsePrefixed(part, prefix);
+}
+/** Both numbers at once, e.g. `S01E07`, `Duck.S1Ep1`, or `Example_S01E01` */
+const codePattern = new RegExp(`(?:^|${boundary})${seasonPrefix}${boundary}*(\\d+)${boundary}*${episodePrefix}${boundary}*(\\d+)(?![a-z0-9])`, 'i');
+function parseCode(base) {
+    const match = codePattern.exec(base);
+    return match ? { season: Number(match[1]), episode: Number(match[2]) } : null;
+}
+/**
+ * Which episode a file dropped on a show page is for.
+ * Either the name contains an `S01E07` code, or it gives an episode number inside an `S01`/`01` directory.
+ */
+function showTarget({ file, directories }) {
+    const [base] = splitExtension(file.name);
+    const code = parseCode(base);
+    if (code)
+        return code;
+    const directory = directories.at(-1);
+    if (!directory)
+        return 'kino.invalid_show_files';
+    const season = parseNumbered(directory, seasonPrefix);
+    const episode = parseNumbered(base, episodePrefix);
+    return season === null || episode === null ? 'kino.invalid_show_files' : { season, episode };
+}
+/** Which episode a file dropped on a season page is for. The season is already known, so only the number matters. */
+function seasonTarget({ file }, season) {
+    const [base] = splitExtension(file.name);
+    const code = parseCode(base);
+    if (code)
+        return code.season == season ? code : 'kino.wrong_season_files';
+    const episode = parseNumbered(base, episodePrefix);
+    return episode === null ? 'kino.invalid_season_files' : { season, episode };
+}
+/**
+ * Upload episodes one at a time, reporting the overall progress in bytes via `io.progress`.
+ * The upload can be cancelled from the progress toast, which leaves already finished uploads in place.
+ *
+ * Returns how many were uploaded so callers know whether anything needs refreshing.
+ */
+async function uploadAll(id, uploads) {
+    const totalBytes = uploads.reduce((total, { file }) => total + file.size, 0);
+    let uploadedBytes = 0, count = 0;
+    const controller = new AbortController();
+    setProgressCancel(() => controller.abort());
+    io.start(uploads.length == 1
+        ? text('kino.uploading', { name: uploads[0].file.name })
+        : text('kino.uploading_many', { count: uploads.length }));
+    try {
+        for (const { file, season, episode } of uploads) {
+            await uploadEpisode(file, id, season, episode, {
+                signal: controller.signal,
+                onProgress: uploaded => io.progress(uploadedBytes + uploaded, totalBytes, uploads.length > 1 ? file.name : undefined),
+            });
+            uploadedBytes += file.size;
+            count++;
+        }
+        void toast('success', text('kino.upload_success'));
+    }
+    catch (e) {
+        if (e instanceof DOMException && e.name == 'AbortError')
+            void toast('info', text('kino.upload_cancelled'));
+        else
+            void toast('error', e);
+    }
+    finally {
+        io.done(true);
+    }
+    return count;
+}
+/**
+ * Resolve every dropped file to an episode, then upload them.
+ * Nothing is uploaded when a file can't be resolved, so a typo doesn't leave a half-finished drop behind.
+ */
+async function uploadDropped(id, files, resolve) {
+    const media = onlyMedia(files);
+    if (!media.length) {
+        void toast('error', text('kino.no_media_files'));
+        return 0;
+    }
+    const uploads = [];
+    /** Names of the files that couldn't be resolved, grouped by the reason they couldn't be */
+    const invalid = new Map();
+    for (const dropped of media) {
+        const target = resolve(dropped);
+        if (typeof target != 'string') {
+            uploads.push({ file: dropped.file, ...target });
+            continue;
+        }
+        const path = [...dropped.directories, dropped.file.name].join('/');
+        invalid.set(target, [...(invalid.get(target) ?? []), path]);
+    }
+    if (invalid.size) {
+        for (const [reason, names] of invalid)
+            void toast('error', text(reason, { names: names.join(', ') }));
+        return 0;
+    }
+    // Upload in episode order so the progress toast reads sensibly
+    uploads.sort((a, b) => a.season - b.season || a.episode - b.episode);
+    return await uploadAll(id, uploads);
+}
+/** Handle a drop on a show page: `S01E07.mkv`, or `E07.mkv`/`07.mkv` inside an `S01`/`01` directory. */
+export async function uploadShowDrop(entries, id) {
+    return await uploadDropped(id, await collectDropped(entries), showTarget);
+}
+/** Handle a drop on a season page: `E07.mkv`, `07.mkv`, or `S01E07.mkv` for this season. */
+export async function uploadSeasonDrop(entries, id, season) {
+    return await uploadDropped(id, await collectDropped(entries), file => seasonTarget(file, season));
+}
+/**
+ * The single file dropped on a movie or episode page.
+ * The name is irrelevant here since the target is already known.
+ */
+async function droppedFile(entries) {
+    const media = onlyMedia(await collectDropped(entries));
+    if (!media.length) {
+        void toast('error', text('kino.no_media_files'));
+        return;
+    }
+    if (media.length > 1) {
+        void toast('error', text('kino.one_file_only'));
+        return;
+    }
+    return media[0].file;
+}
+export async function uploadMovieDrop(entries, id) {
+    const file = await droppedFile(entries);
+    return file && (await uploadMovieFile(file, id));
+}
+export async function uploadEpisodeDrop(entries, id, season, episode) {
+    const file = await droppedFile(entries);
+    return file && (await uploadEpisodeFile(file, id, season, episode));
+}

package/lib/DropZone.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { drag } from '@axium/client/attachments';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Shown next to the cursor while files are dragged over */
+		label: string;
+		/** Drops are ignored when false, e.g. for media that has already been uploaded */
+		enabled?: boolean;
+		onDrop(entries: FileSystemEntry[]): unknown;
+		children: Snippet;
+	}
+
+	const { label, enabled = true, onDrop, children }: Props = $props();
+</script>
+
+<div class="DropZone" {@attach enabled && drag.uploadTarget(label, onDrop)}>
+	{@render children()}
+</div>
+
+<style>
+	.DropZone {
+		min-height: 100%;
+
+		:global(&.drag-over) {
+			outline: var(--border-accent);
+			outline-offset: 0.5em;
+			border-radius: 1em;
+			background-color: hsl(from var(--bg-elevated) h s l / 0.5);
+		}
+	}
+</style>

package/lib/index.ts

@@ -1,3 +1,4 @@
+export { default as DropZone } from './DropZone.svelte';
 export { default as EpisodeList } from './EpisodeList.svelte';
 export { default as MediaActions } from './MediaActions.svelte';
 export { default as MediaCard } from './MediaCard.svelte';

package/locales/en.json

@@ -61,8 +61,20 @@
 		"upload_movie": "Upload movie",
 		"upload_episode": "Upload episode",
 		"uploading": "Uploading {name}",
+		"uploading_many": "Uploading {count} files",
 		"upload_success": "Upload complete",
 		"upload_cancelled": "Upload cancelled",
+		"drop_movie": "Drop a movie file to upload",
+		"drop_episode": "Drop an episode file to upload",
+		"drop_season": "Drop episodes to upload",
+		"drop_show": "Drop episodes to upload",
+		"drop_season_hint": "Drop episode files here to upload them. Each name needs an episode number, like E01, Ep01, or S01E01, or must be just the number.",
+		"drop_show_hint": "Drop episode files here to upload them. Each name needs a season and episode, like S01E01 or S1Ep1, or an episode number inside a folder named S01 or 01.",
+		"no_media_files": "No video files were dropped. Only .mkv and .mp4 can be uploaded.",
+		"one_file_only": "Only one file can be uploaded here",
+		"invalid_season_files": "No episode number in the name (e.g. E01, Ep01, S01E01, or just 01): {names}",
+		"invalid_show_files": "No season and episode in the name (e.g. S01E01 or S1Ep1), and not in a season folder: {names}",
+		"wrong_season_files": "Named for a different season than this one: {names}",
 		"not_uploaded": "This has not been uploaded yet.",
 		"uploaded_detail": "Uploaded {date} · {size}",
 		"overview": "Overview",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/kino",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Movies and TV for Axium",
 	"funding": {

package/routes/movies/[id]/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { text } from '@axium/client';
 	import { deleteMovieUpload, movieDataURL } from '@axium/kino/client';
-	import { uploadMovieFile } from '@axium/kino/client/frontend';
-	import { MediaActions, MediaDetail } from '@axium/kino/components';
+	import { uploadMovieDrop, uploadMovieFile } from '@axium/kino/client/frontend';
+	import { DropZone, MediaActions, MediaDetail } from '@axium/kino/components';
 
 	const { data } = $props();
 
@@ -15,22 +15,31 @@
 	<title>{movie.title}</title>
 </svelte:head>
 
-<MediaDetail
-	title={movie.title}
-	imagePath={movie.poster_path}
-	backdropPath={movie.backdrop_path}
-	date={movie.release_date}
-	overview={movie.overview}
+<DropZone
+	label={text('kino.drop_movie')}
+	enabled={!upload}
+	onDrop={async entries => {
+		const result = await uploadMovieDrop(entries, movie.id);
+		if (result) upload = result;
+	}}
 >
-	{#snippet actions()}
-		<MediaActions
-			bind:upload
-			watchHref="/movies/{movie.id}/watch"
-			dataURL={movieDataURL(movie.id, true)}
-			uploadText={text('kino.upload_movie')}
-			canDelete={data.session?.user.isAdmin}
-			uploadFile={file => uploadMovieFile(file, movie.id)}
-			deleteUpload={() => deleteMovieUpload(movie.id)}
-		/>
-	{/snippet}
-</MediaDetail>
+	<MediaDetail
+		title={movie.title}
+		imagePath={movie.poster_path}
+		backdropPath={movie.backdrop_path}
+		date={movie.release_date}
+		overview={movie.overview}
+	>
+		{#snippet actions()}
+			<MediaActions
+				bind:upload
+				watchHref="/movies/{movie.id}/watch"
+				dataURL={movieDataURL(movie.id, true)}
+				uploadText={text('kino.upload_movie')}
+				canDelete={data.session?.user.isAdmin}
+				uploadFile={file => uploadMovieFile(file, movie.id)}
+				deleteUpload={() => deleteMovieUpload(movie.id)}
+			/>
+		{/snippet}
+	</MediaDetail>
+</DropZone>

package/routes/tv/[id]/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { invalidateAll } from '$app/navigation';
 	import { text } from '@axium/client';
-	import { MediaDetail, SeasonList } from '@axium/kino/components';
+	import { uploadShowDrop } from '@axium/kino/client/frontend';
+	import { DropZone, MediaDetail, SeasonList } from '@axium/kino/components';
 
 	const { data } = $props();
 
@@ -11,19 +13,27 @@
 	<title>{show.name}</title>
 </svelte:head>
 
-<MediaDetail
-	title={show.name}
-	imagePath={show.poster_path}
-	backdropPath={show.backdrop_path}
-	date={show.first_air_date}
-	dateKind="aired"
-	overview={show.overview}
+<DropZone
+	label={text('kino.drop_show')}
+	onDrop={async entries => {
+		if (await uploadShowDrop(entries, show.id)) await invalidateAll();
+	}}
 >
-	<section>
-		<h2>{text('kino.seasons')}</h2>
-		<SeasonList id={show.id} seasons={show.seasons} />
-	</section>
-</MediaDetail>
+	<MediaDetail
+		title={show.name}
+		imagePath={show.poster_path}
+		backdropPath={show.backdrop_path}
+		date={show.first_air_date}
+		dateKind="aired"
+		overview={show.overview}
+	>
+		<section>
+			<h2>{text('kino.seasons')}</h2>
+			<SeasonList id={show.id} seasons={show.seasons} />
+			<span class="subtle hint">{text('kino.drop_show_hint')}</span>
+		</section>
+	</MediaDetail>
+</DropZone>
 
 <style>
 	section {
@@ -36,4 +46,8 @@
 		margin: 0;
 		font-size: 1.15em;
 	}
+
+	.hint {
+		font-size: 0.85em;
+	}
 </style>

package/routes/tv/[id]/[season]/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { invalidateAll } from '$app/navigation';
 	import { text } from '@axium/client';
-	import { EpisodeList, MediaDetail } from '@axium/kino/components';
+	import { uploadSeasonDrop } from '@axium/kino/client/frontend';
+	import { DropZone, EpisodeList, MediaDetail } from '@axium/kino/components';
 
 	const { data } = $props();
 
@@ -11,23 +13,31 @@
 	<title>{show.name} — {season.name}</title>
 </svelte:head>
 
-<MediaDetail
-	title={season.name}
-	imagePath={season.poster_path}
-	backdropPath={show.backdrop_path}
-	date={season.air_date}
-	dateKind="aired"
-	overview={season.overview}
+<DropZone
+	label={text('kino.drop_season')}
+	onDrop={async entries => {
+		if (await uploadSeasonDrop(entries, show.id, season.season_number)) await invalidateAll();
+	}}
 >
-	{#snippet context()}
-		<a href="/tv/{show.id}">{show.name}</a>
-	{/snippet}
+	<MediaDetail
+		title={season.name}
+		imagePath={season.poster_path}
+		backdropPath={show.backdrop_path}
+		date={season.air_date}
+		dateKind="aired"
+		overview={season.overview}
+	>
+		{#snippet context()}
+			<a href="/tv/{show.id}">{show.name}</a>
+		{/snippet}
 
-	<section>
-		<h2>{text('kino.episodes')}</h2>
-		<EpisodeList id={show.id} season={season.season_number} episodes={season.episodes} />
-	</section>
-</MediaDetail>
+		<section>
+			<h2>{text('kino.episodes')}</h2>
+			<EpisodeList id={show.id} season={season.season_number} episodes={season.episodes} />
+			<span class="subtle hint">{text('kino.drop_season_hint')}</span>
+		</section>
+	</MediaDetail>
+</DropZone>
 
 <style>
 	section {
@@ -40,4 +50,8 @@
 		margin: 0;
 		font-size: 1.15em;
 	}
+
+	.hint {
+		font-size: 0.85em;
+	}
 </style>

package/routes/tv/[id]/[season]/[episode]/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { text } from '@axium/client';
 	import { deleteEpisodeUpload, episodeDataURL } from '@axium/kino/client';
-	import { uploadEpisodeFile } from '@axium/kino/client/frontend';
-	import { MediaActions, MediaDetail } from '@axium/kino/components';
+	import { uploadEpisodeDrop, uploadEpisodeFile } from '@axium/kino/client/frontend';
+	import { DropZone, MediaActions, MediaDetail } from '@axium/kino/components';
 
 	const { data } = $props();
 
@@ -17,30 +17,39 @@
 	<title>{show.name} — {code}</title>
 </svelte:head>
 
-<MediaDetail
-	title={episode.name}
-	imagePath={episode.still_path}
-	imageType="still"
-	backdropPath={show.backdrop_path}
-	date={episode.air_date}
-	dateKind="aired"
-	overview={null}
+<DropZone
+	label={text('kino.drop_episode')}
+	enabled={!upload}
+	onDrop={async entries => {
+		const result = await uploadEpisodeDrop(entries, show.id, season, episode.episode_number);
+		if (result) upload = result;
+	}}
 >
-	{#snippet context()}
-		<a href="/tv/{show.id}">{show.name}</a>
-		·
-		<a href="/tv/{show.id}/{season}">{code}</a>
-	{/snippet}
+	<MediaDetail
+		title={episode.name}
+		imagePath={episode.still_path}
+		imageType="still"
+		backdropPath={show.backdrop_path}
+		date={episode.air_date}
+		dateKind="aired"
+		overview={null}
+	>
+		{#snippet context()}
+			<a href="/tv/{show.id}">{show.name}</a>
+			·
+			<a href="/tv/{show.id}/{season}">{code}</a>
+		{/snippet}
 
-	{#snippet actions()}
-		<MediaActions
-			bind:upload
-			watchHref="/tv/{show.id}/{season}/{episode.episode_number}/watch"
-			dataURL={episodeDataURL(show.id, season, episode.episode_number, true)}
-			uploadText={text('kino.upload_episode')}
-			canDelete={data.session?.user.isAdmin}
-			uploadFile={file => uploadEpisodeFile(file, show.id, season, episode.episode_number)}
-			deleteUpload={() => deleteEpisodeUpload(show.id, season, episode.episode_number)}
-		/>
-	{/snippet}
-</MediaDetail>
+		{#snippet actions()}
+			<MediaActions
+				bind:upload
+				watchHref="/tv/{show.id}/{season}/{episode.episode_number}/watch"
+				dataURL={episodeDataURL(show.id, season, episode.episode_number, true)}
+				uploadText={text('kino.upload_episode')}
+				canDelete={data.session?.user.isAdmin}
+				uploadFile={file => uploadEpisodeFile(file, show.id, season, episode.episode_number)}
+				deleteUpload={() => deleteEpisodeUpload(show.id, season, episode.episode_number)}
+			/>
+		{/snippet}
+	</MediaDetail>
+</DropZone>