@axium/kino 0.0.1

package/lib/RecentGrid.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { type KinoView, viewProgress } from '@axium/kino/common';
+	import Poster from './Poster.svelte';
+	import ProgressBar from './ProgressBar.svelte';
+
+	const { views, empty }: { views: KinoView[]; empty: string } = $props();
+
+	function key(view: KinoView): string {
+		return view.type == 'movie'
+			? `movie:${view.movie.id}`
+			: `tv:${view.show.id}:${view.episode.season_number}:${view.episode.episode_number}`;
+	}
+</script>
+
+<div class="RecentGrid">
+	{#each views as view (key(view))}
+		{const title = view.type == 'movie' ? view.movie.title : view.show.name}
+		<!-- Resume where they left off rather than starting over -->
+		<a
+			class="recent"
+			href={view.type == 'movie'
+				? `/movies/${view.movie.id}/watch`
+				: `/tv/${view.show.id}/${view.episode.season_number}/${view.episode.episode_number}/watch`}
+		>
+			<Poster path={view.type == 'movie' ? view.movie.poster_path : view.show.poster_path} type="poster" size="w342" alt={title} />
+
+			{const progress = viewProgress(view)}
+			{#if progress !== null}
+				<ProgressBar value={progress} />
+			{/if}
+
+			<span class="title">{title}</span>
+
+			{#if view.type == 'tv'}
+				<span class="subtle detail">
+					{text('kino.episode_code', { season: view.episode.season_number, episode: view.episode.episode_number })}
+					· {view.episode.name}
+				</span>
+			{/if}
+		</a>
+	{:else}
+		<p class="subtle">{empty}</p>
+	{/each}
+</div>
+
+<style>
+	.RecentGrid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
+		gap: 1em;
+		align-items: start;
+
+		&:has(> p) {
+			display: block;
+		}
+	}
+
+	.recent {
+		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;
+	}
+
+	.detail {
+		font-size: 0.85em;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

package/lib/SearchBar.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { searchMedia } from '@axium/kino/client';
+	import type { KinoSearchResults } from '@axium/kino/common';
+	import Poster from './Poster.svelte';
+
+	let query = $state(''),
+		results = $state<KinoSearchResults>([]),
+		open = $state(false),
+		pending = $state(false),
+		failed = $state(false);
+
+	let debounce: ReturnType<typeof setTimeout> | undefined;
+
+	/** Responses can arrive out of order, so only the newest one is applied */
+	let latest = 0;
+
+	function search() {
+		clearTimeout(debounce);
+
+		const value = query.trim();
+
+		if (!value) {
+			latest++;
+			results = [];
+			pending = false;
+			failed = false;
+			open = false;
+			return;
+		}
+
+		open = true;
+		pending = true;
+		failed = false;
+
+		debounce = setTimeout(async () => {
+			const id = ++latest;
+			try {
+				const found = await searchMedia(value);
+				if (id != latest) return;
+				results = found;
+			} catch {
+				if (id != latest) return;
+				results = [];
+				failed = true;
+			} finally {
+				if (id == latest) pending = false;
+			}
+		}, 300);
+	}
+
+	function close() {
+		open = false;
+	}
+</script>
+
+<div
+	class="KinoSearch"
+	onfocusout={e => {
+		if (!e.currentTarget.contains(e.relatedTarget as Node | null)) close();
+	}}
+>
+	<div class="input icon-text">
+		<Icon i="magnifying-glass" />
+		<input
+			type="search"
+			bind:value={query}
+			oninput={search}
+			onfocus={() => (open = !!query.trim())}
+			onkeydown={e => e.key == 'Escape' && close()}
+			placeholder={text('kino.search.placeholder')}
+			aria-label={text('kino.search.label')}
+		/>
+	</div>
+
+	{#if open}
+		<div class="results">
+			{#if pending}
+				<i class="subtle message">{text('kino.search.searching')}</i>
+			{:else if failed}
+				<i class="subtle message">{text('kino.search.failed')}</i>
+			{:else}
+				{#each results as item (item.type + item.id)}
+					{const title = item.type == 'movie' ? item.title : item.name}
+					{const date = item.type == 'movie' ? item.release_date : item.first_air_date}
+					<a class="result" href={item.type == 'movie' ? `/movies/${item.id}` : `/tv/${item.id}`} onclick={close}>
+						<Poster path={item.poster_path} type="poster" size="w92" alt={title} />
+						<span class="name">{title}</span>
+						<span class="subtle meta">
+							{text(item.type == 'movie' ? 'kino.search.movie' : 'kino.search.tv')}
+							{#if date}· {date.getFullYear()}{/if}
+						</span>
+					</a>
+				{:else}
+					<i class="subtle message">{text('kino.search.no_results')}</i>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.KinoSearch {
+		position: relative;
+		width: min(30em, 100%);
+	}
+
+	.input {
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+		padding: 0.5em 0.75em;
+		border-radius: 0.5em;
+		background-color: var(--bg-alt);
+		border: var(--border-accent);
+	}
+
+	input {
+		flex: 1 1 auto;
+		min-width: 0;
+		border: none;
+		outline: none;
+		background: none;
+		color: inherit;
+		font: inherit;
+	}
+
+	.results {
+		position: absolute;
+		inset: calc(100% + 0.25em) 0 auto 0;
+		z-index: 7;
+		max-height: 24em;
+		overflow-y: auto;
+		border-radius: 0.5em;
+		border: var(--border-accent);
+		background-color: var(--bg-elevated);
+		padding: 0.25em;
+	}
+
+	.message {
+		display: block;
+		padding: 0.75em;
+	}
+
+	.result {
+		display: grid;
+		grid-template-columns: 2.5em 1fr;
+		grid-template-rows: auto auto;
+		column-gap: 0.75em;
+		align-items: center;
+		padding: 0.5em;
+		border-radius: 0.5em;
+		text-decoration: none;
+		color: inherit;
+
+		&:hover {
+			background-color: var(--bg-strong);
+		}
+
+		& :global(.Poster) {
+			grid-row: 1 / 3;
+		}
+	}
+
+	.name {
+		align-self: end;
+	}
+
+	.meta {
+		align-self: start;
+		font-size: 0.85em;
+	}
+</style>

package/lib/SeasonList.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import type * as kt from 'kinotool';
+	import Poster from './Poster.svelte';
+
+	const { id, seasons }: { id: number; seasons?: kt.Season[] } = $props();
+</script>
+
+<div class="SeasonList">
+	{#each seasons || [] as season (season.season_number)}
+		<a class="season" href="/tv/{id}/{season.season_number}">
+			<Poster path={season.poster_path} type="poster" size="w185" alt={season.name} />
+			<span class="name">{season.name}</span>
+			{#if season.air_date}
+				<span class="subtle year">{season.air_date.getFullYear()}</span>
+			{/if}
+		</a>
+	{:else}
+		<p class="subtle">{text('kino.no_episodes')}</p>
+	{/each}
+</div>
+
+<style>
+	.SeasonList {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
+		gap: 1em;
+		align-items: start;
+
+		&:has(> p) {
+			display: block;
+		}
+	}
+
+	.season {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25em;
+		text-decoration: none;
+		color: inherit;
+
+		&:hover .name {
+			color: var(--fg-strong);
+		}
+	}
+
+	.year {
+		font-size: 0.85em;
+	}
+</style>

package/lib/index.ts

@@ -0,0 +1,10 @@
+export { default as EpisodeList } from './EpisodeList.svelte';
+export { default as MediaActions } from './MediaActions.svelte';
+export { default as MediaCard } from './MediaCard.svelte';
+export { default as MediaDetail } from './MediaDetail.svelte';
+export { default as MediaGrid } from './MediaGrid.svelte';
+export { default as Poster } from './Poster.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as RecentGrid } from './RecentGrid.svelte';
+export { default as SearchBar } from './SearchBar.svelte';
+export { default as SeasonList } from './SeasonList.svelte';

package/lib/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": ["../tsconfig.json", "../.svelte-kit/tsconfig.json"],
+	"compilerOptions": {
+		"rootDir": "..",
+		"noEmit": true,
+		"module": "preserve",
+		"moduleResolution": "Bundler"
+	},
+	"include": ["**/*.svelte", "**/*.ts"],
+	"exclude": [],
+	"references": [{ "path": ".." }]
+}

package/lib/watch.svelte.ts

@@ -0,0 +1,93 @@
+import type { MediaState } from '@axium/client/reactive';
+import { recordView, recordViewClosing } from '@axium/kino/client';
+import type { KinoViewInit, KinoViewTarget } from '@axium/kino/common';
+import * as io from 'ioium';
+
+export interface WatchTrackerOptions {
+	/** Identifies the movie or episode, without the progress fields */
+	target: KinoViewTarget;
+	media: MediaState;
+	/** Position to seek to once the media is ready, in seconds */
+	resumeFrom?: number | null;
+	/** How often to report while playing, in milliseconds */
+	interval?: number;
+}
+
+/**
+ * Resume playback where the viewer left off and report progress as they watch.
+ *
+ * Registers effects, so it has to be called while a component is initializing.
+ */
+export function trackWatch({ target, media, resumeFrom, interval = 15_000 }: WatchTrackerOptions): void {
+	let lastSent = -1;
+
+	function current(): KinoViewInit {
+		// `duration` is NaN until metadata loads, and Infinity for streams of unknown length
+		const duration = Number.isFinite(media.duration) && media.duration > 0 ? media.duration : undefined;
+
+		return { ...target, position: media.currentTime || 0, duration } as KinoViewInit;
+	}
+
+	/** Skip writes from a player sitting on the same frame */
+	function changed(init: KinoViewInit): boolean {
+		if (Math.abs(init.position - lastSent) < 1) return false;
+		lastSent = init.position;
+		return true;
+	}
+
+	function send(): void {
+		const init = current();
+		if (!changed(init)) return;
+
+		// A failed progress update should never interrupt playback
+		recordView(init).catch(e => io.debug('Kino: could not record progress: ' + io.errorText(e)));
+	}
+
+	function sendClosing(): void {
+		const init = current();
+		if (changed(init)) recordViewClosing(init);
+	}
+
+	let resumed = false;
+
+	$effect(() => {
+		/**
+		 * Seeking needs a loaded element and a known duration, so this waits for both.
+		 * Positions near the end are ignored so finishing something doesn't strand the next play at the credits.
+		 */
+		if (resumed || !resumeFrom || !media.element || !media.duration) return;
+
+		resumed = true;
+		if (resumeFrom < media.duration - 10) media.currentTime = resumeFrom;
+	});
+
+	$effect(() => {
+		// Record straight away so it shows as recently watched even if they leave immediately
+		send();
+
+		const timer = setInterval(() => {
+			if (!media.paused) send();
+		}, interval);
+
+		/**
+		 * A backgrounded tab can be killed without ever firing `pagehide` or `beforeunload`, so
+		 * `visibilitychange` is the only reliable signal on mobile. `pagehide` covers desktop
+		 * navigations and bfcache entry, where `visibilitychange` does not always fire first.
+		 */
+		function onHide() {
+			if (document.visibilityState == 'hidden') sendClosing();
+		}
+
+		document.addEventListener('visibilitychange', onHide);
+		addEventListener('pagehide', sendClosing);
+
+		return () => {
+			clearInterval(timer);
+			document.removeEventListener('visibilitychange', onHide);
+			removeEventListener('pagehide', sendClosing);
+
+			// Client-side navigation away from the page: the document survives, so a normal request is fine
+			send();
+		};
+	});
+}

package/locales/en.json

@@ -0,0 +1,103 @@
+{
+	"app_name": {
+		"kino": "Movies and TV"
+	},
+	"kino": {
+		"config": {
+			"remux": "Playback format",
+			"cache_mode": "Image cache mode",
+			"image_size": "Image size",
+			"poster_size": "Largest cached poster",
+			"backdrop_size": "Largest cached backdrop",
+			"logo_size": "Largest cached logo",
+			"profile_size": "Largest cached profile image",
+			"still_size": "Largest cached still"
+		},
+		"remux": {
+			"original": "Serve the uploaded file as-is",
+			"both": "Keep the original and serve a remuxed copy",
+			"replace": "Remux on upload and discard the original"
+		},
+		"cache_mode": {
+			"disabled": "Don't cache images",
+			"fallback": "Only when TMDB is unavailable",
+			"exact-size": "Only at the requested size",
+			"quality": "At the requested size or larger",
+			"prefer": "Always prefer cached images"
+		},
+		"image_size": {
+			"w45": "45px wide",
+			"w92": "92px wide",
+			"w154": "154px wide",
+			"w185": "185px wide",
+			"w300": "300px wide",
+			"w342": "342px wide",
+			"w500": "500px wide",
+			"w780": "780px wide",
+			"w1280": "1280px wide",
+			"h632": "632px tall",
+			"original": "Original"
+		},
+		"tab": {
+			"home": "Home",
+			"movies": "Movies",
+			"tv": "TV Shows"
+		},
+		"search": {
+			"label": "Search",
+			"placeholder": "Search movies and TV shows",
+			"searching": "Searching…",
+			"no_results": "No results",
+			"failed": "Search failed",
+			"movie": "Movie",
+			"tv": "TV Show"
+		},
+		"watch": "Watch",
+		"download": "Download",
+		"upload": "Upload",
+		"delete": "Delete upload",
+		"delete_confirm": "Delete this upload and its files? This cannot be undone.",
+		"delete_success": "Upload deleted",
+		"upload_movie": "Upload movie",
+		"upload_episode": "Upload episode",
+		"uploading": "Uploading {name}",
+		"upload_success": "Upload complete",
+		"upload_cancelled": "Upload cancelled",
+		"not_uploaded": "This has not been uploaded yet.",
+		"uploaded_detail": "Uploaded {date} · {size}",
+		"overview": "Overview",
+		"no_overview": "No overview available.",
+		"seasons": "Seasons",
+		"episodes": "Episodes",
+		"no_episodes": "No episodes are listed for this season.",
+		"season": "Season {number}",
+		"specials": "Specials",
+		"episode_number": "Episode {number}",
+		"episode_code": "S{season}E{episode}",
+		"aired": "Aired {date}",
+		"released": "Released {date}",
+		"unreleased": "Release date unknown",
+		"back_to_show": "Back to show",
+		"back_to_season": "Back to season"
+	},
+	"page": {
+		"kino": {
+			"title": "Movies and TV",
+			"heading": "Your library",
+			"empty": "Nothing has been uploaded yet.",
+			"recently_watched": "Recently watched",
+			"no_recent": "You haven't watched anything yet.",
+			"recent_movies": "Movies",
+			"recent_tv": "TV Shows",
+			"movies": {
+				"title": "Movies",
+				"empty": "No movies have been uploaded yet."
+			},
+			"tv": {
+				"title": "TV Shows",
+				"empty": "No TV shows have been uploaded yet."
+			},
+			"watch_title": "Watching {name}"
+		}
+	}
+}

package/package.json

@@ -0,0 +1,102 @@
+{
+	"name": "@axium/kino",
+	"version": "0.0.1",
+	"author": "James Prevett <axium@jamespre.dev>",
+	"description": "Movies and TV for Axium",
+	"funding": {
+		"type": "individual",
+		"url": "https://github.com/sponsors/james-pre"
+	},
+	"license": "LGPL-3.0-or-later",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/james-pre/axium.git"
+	},
+	"homepage": "https://github.com/james-pre/axium#readme",
+	"bugs": {
+		"url": "https://github.com/james-pre/axium/issues"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": "./dist/index.js",
+		"./client": "./dist/client/index.js",
+		"./*": "./dist/*.js",
+		"./components": "./lib/index.js",
+		"./components/*": "./lib/*.svelte",
+		"./watch": "./lib/watch.svelte.js"
+	},
+	"files": [
+		"dist",
+		"lib",
+		"routes",
+		"locales",
+		"db.json"
+	],
+	"scripts": {
+		"build": "tsc"
+	},
+	"peerDependencies": {
+		"@axium/client": ">=0.36.0",
+		"@axium/core": ">=0.38.0",
+		"@axium/server": ">=0.54.0",
+		"@sveltejs/kit": "^2.27.3",
+		"kysely": "^0.29.0",
+		"utilium": "^3.0.0"
+	},
+	"dependencies": {
+		"commander": "^15.0.0",
+		"ioium": "^1.6.0",
+		"kinotool": "^0.2.1",
+		"mime": "^4.1.0",
+		"tmdb-ts": "^2.3.0",
+		"zod": "^4.0.5"
+	},
+	"axium": {
+		"server": {
+			"routes": "routes",
+			"hooks": "./dist/server/hooks.js",
+			"db": "./db.json",
+			"web_client_hooks": "./dist/client/web_hook.js"
+		},
+		"client": {
+			"hooks": "./dist/client/hooks.js",
+			"cli": "./dist/client/cli.js"
+		},
+		"apps": [
+			{
+				"id": "kino",
+				"name": "Movies and TV",
+				"icon": "popcorn"
+			}
+		],
+		"update_checks": true,
+		"config": {
+			"allow_user_uploads": true,
+			"data_dir": "/srv/axium/kino",
+			"tmdb_api_key": "",
+			"remux": "original",
+			"upload": {
+				"temp_dir": "/tmp/axium",
+				"timeout": 15
+			},
+			"images": {
+				"cache": {
+					"mode": "quality",
+					"max_size": 1000,
+					"largest_only": false,
+					"directory": "/var/cache/axium/kino/images",
+					"max_image_sizes": {
+						"poster": "w500",
+						"backdrop": "w1280",
+						"logo": "w185",
+						"profile": "w185",
+						"still": "w300"
+					}
+				},
+				"base_url": "https://image.tmdb.org/t/p/"
+			}
+		}
+	}
+}

package/routes/+layout.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { SidebarLayout } from '@axium/client/components';
+	import { SearchBar } from '@axium/kino/components';
+
+	let { children, data } = $props();
+</script>
+
+<SidebarLayout tabs={data.tabs}>
+	<div class="kino">
+		<SearchBar />
+		{@render children()}
+	</div>
+</SidebarLayout>
+
+<style>
+	.kino {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5em;
+		padding: 0.5em;
+	}
+</style>

package/routes/+layout.ts

@@ -0,0 +1,21 @@
+import { text } from '@axium/client';
+import { getCurrentSession } from '@axium/client/user';
+import type { Session, User } from '@axium/core';
+
+export const ssr = false;
+
+export async function load({ route, parent }) {
+	let { session }: { session?: (Session & { user: User }) | null } = await parent();
+
+	session ||= await getCurrentSession().catch(() => null);
+
+	const id = route.id || '';
+
+	const tabs = [
+		{ name: text('kino.tab.home'), href: '/kino', icon: 'house', active: id.endsWith('/kino') },
+		{ name: text('kino.tab.movies'), href: '/movies', icon: 'film', active: id.includes('/movies') },
+		{ name: text('kino.tab.tv'), href: '/tv', icon: 'tv', active: id.includes('/tv') },
+	];
+
+	return { session, tabs };
+}