@axium/kino 0.0.1

package/routes/kino/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { MediaGrid, RecentGrid } from '@axium/kino/components';
+
+	const { data } = $props();
+
+	const movies = $derived(data.movies.map(movie => ({ ...movie, type: 'movie' as const })));
+	const shows = $derived(data.shows.map(show => ({ ...show, type: 'tv' as const })));
+</script>
+
+<svelte:head>
+	<title>{text('page.kino.title')}</title>
+</svelte:head>
+
+<h1>{text('page.kino.heading')}</h1>
+
+{#if data.views.length}
+	<section>
+		<h2>{text('page.kino.recently_watched')}</h2>
+		<RecentGrid views={data.views} empty={text('page.kino.no_recent')} />
+	</section>
+{/if}
+
+{#if !movies.length && !shows.length}
+	<p class="subtle">{text('page.kino.empty')}</p>
+{:else}
+	{#if movies.length}
+		<section>
+			<h2>{text('page.kino.recent_movies')}</h2>
+			<MediaGrid items={movies} empty={text('page.kino.movies.empty')} />
+		</section>
+	{/if}
+
+	{#if shows.length}
+		<section>
+			<h2>{text('page.kino.recent_tv')}</h2>
+			<MediaGrid items={shows} empty={text('page.kino.tv.empty')} />
+		</section>
+	{/if}
+{/if}
+
+<style>
+	h1 {
+		margin: 0;
+	}
+
+	section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75em;
+	}
+
+	h2 {
+		margin: 0;
+		font-size: 1.15em;
+	}
+</style>

package/routes/kino/+page.ts

@@ -0,0 +1,19 @@
+import { getUploadedMovies, getUploadedShows, getViews } from '@axium/kino/client';
+import { redirect } from '@sveltejs/kit';
+
+export const ssr = false;
+
+export async function load({ parent }) {
+	const { session } = await parent();
+
+	if (!session) redirect(307, '/login?after=/kino');
+
+	const [movies, shows, views] = await Promise.all([
+		getUploadedMovies(),
+		getUploadedShows(),
+		// The library is the point of the page, so don't fail it over the recently watched list
+		getViews().catch(() => []),
+	]);
+
+	return { movies, shows, views };
+}

package/routes/movies/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { MediaGrid } from '@axium/kino/components';
+
+	const { data } = $props();
+
+	const movies = $derived(data.movies.map(movie => ({ ...movie, type: 'movie' as const })));
+</script>
+
+<svelte:head>
+	<title>{text('page.kino.movies.title')}</title>
+</svelte:head>
+
+<h1>{text('page.kino.movies.title')}</h1>
+
+<MediaGrid items={movies} empty={text('page.kino.movies.empty')} />
+
+<style>
+	h1 {
+		margin: 0;
+	}
+</style>

package/routes/movies/+page.ts

@@ -0,0 +1,12 @@
+import { getUploadedMovies } from '@axium/kino/client';
+import { redirect } from '@sveltejs/kit';
+
+export const ssr = false;
+
+export async function load({ parent }) {
+	const { session } = await parent();
+
+	if (!session) redirect(307, '/login?after=/movies');
+
+	return { movies: await getUploadedMovies() };
+}

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

@@ -0,0 +1,36 @@
+<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';
+
+	const { data } = $props();
+
+	const movie = $derived(data.movie);
+
+	let upload = $state(data.movie.upload);
+</script>
+
+<svelte:head>
+	<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}
+>
+	{#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>

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

@@ -0,0 +1,7 @@
+import { getMovie } from '@axium/kino/client';
+
+export const ssr = false;
+
+export async function load({ params }) {
+	return { movie: await getMovie(Number(params.id)) };
+}

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { Video } from '@axium/client/components';
+	import { MediaState } from '@axium/client/reactive';
+	import { movieDataURL } from '@axium/kino/client';
+	import { trackWatch } from '@axium/kino/watch';
+
+	const { data } = $props();
+
+	const { movie, upload } = $derived(data);
+
+	const media = new MediaState();
+
+	trackWatch({ media, target: { type: 'movie', id: data.movie.id }, resumeFrom: data.view?.position });
+</script>
+
+<svelte:head>
+	<title>{text('page.kino.watch_title', { name: movie.title })}</title>
+</svelte:head>
+
+<div class="watch">
+	<a class="subtle" href="/movies/{movie.id}">{movie.title}</a>
+	<Video {media} src={movieDataURL(movie.id)} size={upload.size} type={upload.type} name={movie.title} />
+</div>
+
+<style>
+	.watch {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+		height: 80vh;
+		min-height: 0;
+	}
+</style>

package/routes/movies/[id]/watch/+page.ts

@@ -0,0 +1,18 @@
+import { getMovie, getViews } from '@axium/kino/client';
+import { error } from '@sveltejs/kit';
+
+export const ssr = false;
+
+export async function load({ params }) {
+	const id = Number(params.id);
+
+	const movie = await getMovie(id);
+
+	if (!movie.upload) error(404, 'This movie has not been uploaded');
+
+	// Used to resume where the last session left off; not worth failing the page over
+	const views = await getViews().catch(() => []);
+	const view = views.find(v => v.type == 'movie' && v.movie.id == id);
+
+	return { movie, upload: movie.upload, view };
+}

package/routes/tsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": ["../tsconfig.json", "../.svelte-kit/tsconfig.json"],
+	"compilerOptions": {
+		"moduleResolution": "bundler",
+		"module": "esnext",
+		"noEmit": true,
+		"target": "esnext",
+		"rootDir": ".."
+	},
+	"include": ["**/*", "../lib/*"],
+	"references": [{ "path": ".." }]
+}

package/routes/tv/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { MediaGrid } from '@axium/kino/components';
+
+	const { data } = $props();
+
+	const shows = $derived(data.shows.map(show => ({ ...show, type: 'tv' as const })));
+</script>
+
+<svelte:head>
+	<title>{text('page.kino.tv.title')}</title>
+</svelte:head>
+
+<h1>{text('page.kino.tv.title')}</h1>
+
+<MediaGrid items={shows} empty={text('page.kino.tv.empty')} />
+
+<style>
+	h1 {
+		margin: 0;
+	}
+</style>

package/routes/tv/+page.ts

@@ -0,0 +1,12 @@
+import { getUploadedShows } from '@axium/kino/client';
+import { redirect } from '@sveltejs/kit';
+
+export const ssr = false;
+
+export async function load({ parent }) {
+	const { session } = await parent();
+
+	if (!session) redirect(307, '/login?after=/tv');
+
+	return { shows: await getUploadedShows() };
+}

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { MediaDetail, SeasonList } from '@axium/kino/components';
+
+	const { data } = $props();
+
+	const show = $derived(data.show);
+</script>
+
+<svelte:head>
+	<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}
+>
+	<section>
+		<h2>{text('kino.seasons')}</h2>
+		<SeasonList id={show.id} seasons={show.seasons} />
+	</section>
+</MediaDetail>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75em;
+	}
+
+	h2 {
+		margin: 0;
+		font-size: 1.15em;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import { getTv } from '@axium/kino/client';
+
+export const ssr = false;
+
+export async function load({ params }) {
+	return { show: await getTv(Number(params.id)) };
+}

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { EpisodeList, MediaDetail } from '@axium/kino/components';
+
+	const { data } = $props();
+
+	const { show, season } = $derived(data);
+</script>
+
+<svelte:head>
+	<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}
+>
+	{#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>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75em;
+	}
+
+	h2 {
+		margin: 0;
+		font-size: 1.15em;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import { getSeason, getTv } from '@axium/kino/client';
+
+export const ssr = false;
+
+export async function load({ params }) {
+	const id = Number(params.id);
+
+	const [show, season] = await Promise.all([getTv(id), getSeason(id, Number(params.season))]);
+
+	return { show, season };
+}

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

@@ -0,0 +1,46 @@
+<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';
+
+	const { data } = $props();
+
+	const { show, season, episode } = $derived(data);
+
+	const code = $derived(text('kino.episode_code', { season, episode: episode.episode_number }));
+
+	let upload = $state(data.episode.upload);
+</script>
+
+<svelte:head>
+	<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}
+>
+	{#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>

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

@@ -0,0 +1,12 @@
+import { getEpisode, getTv } from '@axium/kino/client';
+
+export const ssr = false;
+
+export async function load({ params }) {
+	const id = Number(params.id),
+		season = Number(params.season);
+
+	const [show, episode] = await Promise.all([getTv(id), getEpisode(id, season, Number(params.episode))]);
+
+	return { show, season, episode };
+}

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { Video } from '@axium/client/components';
+	import { MediaState } from '@axium/client/reactive';
+	import { episodeDataURL } from '@axium/kino/client';
+	import { trackWatch } from '@axium/kino/watch';
+
+	const { data } = $props();
+
+	const { show, season, episode, upload } = $derived(data);
+
+	const code = $derived(text('kino.episode_code', { season, episode: episode.episode_number }));
+
+	const media = new MediaState();
+
+	trackWatch({
+		media,
+		target: { type: 'tv', id: data.show.id, season: data.season, episode: data.episode.episode_number },
+		resumeFrom: data.view?.position,
+	});
+</script>
+
+<svelte:head>
+	<title>{text('page.kino.watch_title', { name: `${show.name} ${code}` })}</title>
+</svelte:head>
+
+<div class="watch">
+	<a class="subtle" href="/tv/{show.id}/{season}/{episode.episode_number}">{show.name} — {code} — {episode.name}</a>
+	<Video
+		{media}
+		src={episodeDataURL(show.id, season, episode.episode_number)}
+		size={upload.size}
+		type={upload.type}
+		name={episode.name}
+	/>
+</div>
+
+<style>
+	.watch {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+		height: 80vh;
+		min-height: 0;
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import { getEpisode, getTv, getViews } from '@axium/kino/client';
+import { error } from '@sveltejs/kit';
+
+export const ssr = false;
+
+export async function load({ params }) {
+	const id = Number(params.id),
+		season = Number(params.season),
+		episodeNumber = Number(params.episode);
+
+	const [show, episode] = await Promise.all([getTv(id), getEpisode(id, season, episodeNumber)]);
+
+	if (!episode.upload) error(404, 'This episode has not been uploaded');
+
+	// Used to resume where the last session left off; not worth failing the page over
+	const views = await getViews().catch(() => []);
+	const view = views.find(
+		v => v.type == 'tv' && v.show.id == id && v.episode.season_number == season && v.episode.episode_number == episodeNumber
+	);
+
+	return { show, season, episode, upload: episode.upload, view };
+}