(player.currentTime = cue.startTime)}
+ onclick={() => (player.currentTime = cue.startTime)}
class:secondary-container={currentTime >= cue.startTime && currentTime <= cue.endTime}
>
{videoLength(cue.startTime)}
diff --git a/materialious/src/lib/components/VideoList.svelte b/materialious/src/lib/components/VideoList.svelte
index b3ec51b8..8cac21de 100644
--- a/materialious/src/lib/components/VideoList.svelte
+++ b/materialious/src/lib/components/VideoList.svelte
@@ -7,11 +7,15 @@
import { authStore } from '../store';
import ContentColumn from './ContentColumn.svelte';
- export let videos: VideoBase[] | Video[] | Notification[] | PlaylistPageVideo[] = [];
- export let playlistId: string = '';
- export let playlistAuthor: string = '';
+ interface Props {
+ videos?: VideoBase[] | Video[] | Notification[] | PlaylistPageVideo[];
+ playlistId?: string;
+ playlistAuthor?: string;
+ }
- let hiddenVideos: string[] = [];
+ let { videos = [], playlistId = '', playlistAuthor = '' }: Props = $props();
+
+ let hiddenVideos: string[] = $state([]);
let auth = get(authStore);
async function removePlaylistItem(indexId: string, videoId: string) {
@@ -36,7 +40,7 @@
{#if auth && decodeURIComponent(auth.username) === playlistAuthor && 'indexId' in video}
@@ -324,7 +329,7 @@
{#if $navigating}
{:else}
-
+ {@render children?.()}
{/if}
diff --git a/materialious/src/routes/(app)/+page.svelte b/materialious/src/routes/(app)/+page.svelte
index b0f1e7df..f7ff58f8 100644
--- a/materialious/src/routes/(app)/+page.svelte
+++ b/materialious/src/routes/(app)/+page.svelte
@@ -2,7 +2,7 @@
import VideoList from '$lib/components/VideoList.svelte';
import { activePageStore } from '$lib/store';
- export let data;
+ let { data } = $props();
activePageStore.set('home');
diff --git a/materialious/src/routes/(app)/channel/[slug]/+page.svelte b/materialious/src/routes/(app)/channel/[slug]/+page.svelte
index 73b8bc3a..ad1453d4 100644
--- a/materialious/src/routes/(app)/channel/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/channel/[slug]/+page.svelte
@@ -15,15 +15,16 @@
import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
import { get } from 'svelte/store';
- export let data;
+ let { data } = $props();
activePageStore.set(null);
- let isSubscribed = false;
+ let isSubscribed = $state(false);
- let tab: 'videos' | 'playlists' | 'streams' | 'shorts' = 'videos';
+ let tab: 'videos' | 'playlists' | 'streams' | 'shorts' = $state('videos');
- let displayContent: ChannelContentPlaylists | ChannelContentVideos | undefined = undefined;
+ let displayContent: ChannelContentPlaylists | ChannelContentVideos | undefined =
+ $state(undefined);
async function loadMore(event: InfiniteEvent) {
if (typeof displayContent === 'undefined') return;
@@ -61,7 +62,7 @@
displayContent = await getChannelContent(data.channel.authorId, { type: tab });
}
- let channelPfp: string;
+ let channelPfp: string | undefined = $state();
onMount(async () => {
displayContent = await getChannelContent(data.channel.authorId, { type: 'videos' });
@@ -118,7 +119,7 @@