Restructure

materialious/src/lib/api/youtubejs/video.ts

@@ -100,8 +100,6 @@ export async function getVideoYTjs(videoId: string): Promise<VideoPlay> {
 		video.streaming_data.adaptive_formats = video.streaming_data.adaptive_formats.filter(
 			(format) => format.xtags !== 'CgcKAnZiEgEx'
 		);
-	} else {
-		throw new Error('Video did not provide streaming data.');
 	}
 
 	const adaptiveFormats: AdaptiveFormats[] = [];

materialious/src/lib/components/layout/ItemsList.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import Thumbnail from '$lib/components/Thumbnail.svelte';
 	import { _ } from '$lib/i18n';
-	import { removePlaylistVideo } from '../api';
-	import { invidiousAuthStore, feedLastItemId, isAndroidTvStore } from '../store';
-	import ContentColumn from './ContentColumn.svelte';
+	import { removePlaylistVideo } from '$lib/api';
+	import { invidiousAuthStore, feedLastItemId, isAndroidTvStore } from '$lib/store';
+	import ContentColumn from '$lib/components/layout/ContentColumn.svelte';
 	import { onMount, onDestroy, tick } from 'svelte';
 	import Mousetrap from 'mousetrap';
+	import Thumbnail from '$lib/components/thumbnail/VideoThumbnail.svelte';
 	import { extractUniqueId, timeout, type feedItems } from '$lib/misc';
-	import ChannelThumbnail from './ChannelThumbnail.svelte';
-	import PlaylistThumbnail from './PlaylistThumbnail.svelte';
-	import HashtagThumbnail from './HashtagThumbnail.svelte';
-	import NoResults from './NoResults.svelte';
+	import ChannelThumbnail from '$lib/components/thumbnail/ChannelThumbnail.svelte';
+	import PlaylistThumbnail from '$lib/components/thumbnail/PlaylistThumbnail.svelte';
+	import HashtagThumbnail from '$lib/components/thumbnail/HashtagThumbnail.svelte';
+	import NoResults from '$lib/components/NoResults.svelte';
 
 	interface Props {
 		items?: feedItems;

materialious/src/lib/components/player/Player.svelte

@@ -16,8 +16,8 @@
 	import { _ } from '$lib/i18n';
 	import { get } from 'svelte/store';
 	import { Slider } from 'melt/builders';
-	import { deleteVideoProgress, getVideoProgress, saveVideoProgress } from '../api';
-	import type { VideoPlay } from '../api/model';
+	import { deleteVideoProgress, getVideoProgress, saveVideoProgress } from '$lib/api';
+	import type { VideoPlay } from '$lib/api/model';
 	import {
 		invidiousAuthStore,
 		invidiousInstanceStore,
@@ -43,8 +43,8 @@
 		sponsorBlockUrlStore,
 		synciousInstanceStore,
 		synciousStore
-	} from '../store';
-	import { setStatusBarColor } from '../theme';
+	} from '$lib/store';
+	import { setStatusBarColor } from '$lib/theme';
 	import { getVideoYTjs } from '$lib/api/youtubejs/video';
 	import {
 		goToNextVideo,
@@ -53,19 +53,19 @@
 		playerDoubleTapSeek
 	} from '$lib/player/index';
 	import { manifestDomainInclusion } from '$lib/player/manifest';
-	import { injectSabr } from '$lib/sabr';
+	import { injectSabr } from '$lib/player/sabr';
 	import type { SabrStreamingAdapter } from 'googlevideo/sabr-streaming-adapter';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { Network, type ConnectionStatus } from '@capacitor/network';
 	import { fade } from 'svelte/transition';
-	import { addToast } from './Toast.svelte';
+	import { addToast } from '$lib/components/Toast.svelte';
 	import { getPublicEnv, isMobile, isUnrestrictedPlatform, isYTBackend, truncate } from '$lib/misc';
 	import {
 		generateThumbnailWebVTT,
 		drawTimelineThumbnail,
 		storyboardThumbnails,
 		type TimelineThumbnail
-	} from '$lib/timelineThumbnails';
+	} from '$lib/player/thumbnails';
 	import { isOwnBackend } from '$lib/shared';
 
 	interface Props {

materialious/src/lib/components/thumbnail/ChannelThumbnail.svelte

@@ -5,9 +5,9 @@
 	import { onMount } from 'svelte';
 	import { _ } from '$lib/i18n';
 	import { get } from 'svelte/store';
-	import type { Channel } from '../api/model';
-	import { insecureRequestImageHandler, truncate } from '../misc';
-	import { interfaceLowBandwidthMode } from '../store';
+	import type { Channel } from '$lib/api/model';
+	import { insecureRequestImageHandler, truncate } from '$lib/misc';
+	import { interfaceLowBandwidthMode } from '$lib/store';
 
 	interface Props {
 		channel: Channel;

materialious/src/lib/components/thumbnail/HashtagThumbnail.svelte

@@ -2,8 +2,8 @@
 	import { resolve } from '$app/paths';
 	import { cleanNumber } from '$lib/numbers';
 	import { _ } from '$lib/i18n';
-	import type { HashTag } from '../api/model';
-	import { truncate } from '../misc';
+	import type { HashTag } from '$lib/api/model';
+	import { truncate } from '$lib/misc';
 
 	interface Props {
 		hashtag: HashTag;

materialious/src/lib/components/thumbnail/PlaylistThumbnail.svelte

@@ -5,9 +5,9 @@
 	import { onMount } from 'svelte';
 	import { _ } from '$lib/i18n';
 	import { get } from 'svelte/store';
-	import type { Playlist, PlaylistPage } from '../api/model';
-	import { insecureRequestImageHandler, truncate } from '../misc';
-	import { interfaceLowBandwidthMode } from '../store';
+	import type { Playlist, PlaylistPage } from '$lib/api/model';
+	import { insecureRequestImageHandler, truncate } from '$lib/misc';
+	import { interfaceLowBandwidthMode } from '$lib/store';
 
 	interface Props {
 		playlist: Playlist | PlaylistPage;

materialious/src/lib/components/thumbnail/VideoThumbnail.svelte

@@ -6,10 +6,10 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { _ } from '$lib/i18n';
 	import { get } from 'svelte/store';
-	import { getDeArrow, getThumbnail } from '../api';
-	import type { Notification, PlaylistPageVideo, Video, VideoBase } from '../api/model';
-	import { createVideoUrl, insecureRequestImageHandler, isYTBackend } from '../misc';
-	import type { PlayerEvents } from '../player';
+	import { getDeArrow, getThumbnail } from '$lib/api';
+	import type { Notification, PlaylistPageVideo, Video, VideoBase } from '$lib/api/model';
+	import { createVideoUrl, insecureRequestImageHandler, isYTBackend } from '$lib/misc';
+	import type { PlayerEvents } from '$lib/player';
 	import {
 		invidiousAuthStore,
 		deArrowEnabledStore,
@@ -21,7 +21,7 @@
 		syncPartyPeerStore,
 		synciousInstanceStore,
 		synciousStore
-	} from '../store';
+	} from '$lib/store';
 	import { queueGetWatchProgress } from '$lib/api/apiExtended';
 	import { relativeTimestamp } from '$lib/time';
 

materialious/src/lib/components/watch/Transcript.svelte

@@ -3,9 +3,9 @@
 	import Fuse from 'fuse.js';
 	import { type VTTCue, parseText, type ParsedCaptionsResult } from 'media-captions';
 	import { _ } from '$lib/i18n';
-	import type { VideoPlay } from '../api/model';
-	import { decodeHtmlCharCodes } from '../misc';
-	import { invidiousInstanceStore } from '../store';
+	import type { VideoPlay } from '$lib/api/model';
+	import { decodeHtmlCharCodes } from '$lib/misc';
+	import { invidiousInstanceStore } from '$lib/store';
 
 	interface Props {
 		video: VideoPlay;
@@ -57,8 +57,11 @@
 
 		isLoading = true;
 		transcript = null;
+
 		const resp = await fetch(urlConstructed);
+		if (!resp.ok) return;
 		transcript = await parseText(await resp.text(), { strict: false });
+
 		transcriptCues = transcript.cues;
 
 		isLoading = false;

materialious/src/lib/player/sabr/ShakaPlayerAdapter.ts

@@ -23,7 +23,7 @@ import {
 	createRecoverableError,
 	headersToGenericObject,
 	makeResponse
-} from '$lib/sabr/helpers';
+} from '$lib/player/sabr/helpers';
 
 interface ShakaResponseArgs {
 	uri: string;
@@ -216,6 +216,7 @@ export class ShakaPlayerAdapter implements SabrPlayerAdapter {
 		// If it is not supported, returning the whole segment when
 		// it's ready (as xhr)
 		if (!response.body) {
+			console.log('NOT STREAMING');
 			const arrayBuffer = await response.arrayBuffer();
 			const currentTime = Date.now();
 

materialious/src/lib/player/sabr/index.ts

@@ -34,8 +34,6 @@ export async function injectSabr(
 	});
 
 	sabrAdapter.onReloadPlayerResponse(async (reloadContext) => {
-		console.log('[SABR]', 'Reloading player response...');
-
 		if (!video.ytjs) return;
 
 		const reloadedInfo = await video.ytjs.innertube.actions.execute('/player', {

materialious/src/lib/player/thumbnails.ts

@@ -1,7 +1,7 @@
-import type { StoryBoard } from './api/model';
-import { ImageCache } from './images';
+import type { StoryBoard } from '$lib/api/model';
+import { ImageCache } from '$lib/images';
 import { parseText } from 'media-captions';
-import { findElementForTime } from './misc';
+import { findElementForTime } from '$lib/misc';
 
 export interface TimelineThumbnail {
 	url: string;

materialious/src/routes/(app)/+layout.svelte

@@ -10,8 +10,8 @@
 	import Search from '$lib/components/Search.svelte';
 	import Settings from '$lib/components/settings/Settings.svelte';
 	import SyncParty from '$lib/components/SyncParty.svelte';
-	import Thumbnail from '$lib/components/Thumbnail.svelte';
-	import Player from '$lib/components/Player.svelte';
+	import Thumbnail from '$lib/components/thumbnail/VideoThumbnail.svelte';
+	import Player from '$lib/components/player/Player.svelte';
 	import '$lib/css/global.css';
 	import { getPages } from '$lib/navPages';
 	import {

materialious/src/routes/(app)/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ItemsList from '$lib/components/ItemsList.svelte';
+	import ItemsList from '$lib/components/layout/ItemsList.svelte';
 	import { _ } from '$lib/i18n/index';
 	import { feedCacheStore } from '$lib/store';
 

materialious/src/routes/(app)/channel/[slug]/+page.svelte

@@ -9,7 +9,7 @@
 	import { Capacitor } from '@capacitor/core';
 	import { _ } from '$lib/i18n';
 	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
-	import ItemsList from '$lib/components/ItemsList.svelte';
+	import ItemsList from '$lib/components/layout/ItemsList.svelte';
 	import Author from '$lib/components/Author.svelte';
 	import { onMount } from 'svelte';
 	import { page } from '$app/state';

materialious/src/routes/(app)/hashtag/[slug]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getHashtag } from '$lib/api';
 	import type { Video } from '$lib/api/model';
-	import ItemsList from '$lib/components/ItemsList.svelte';
+	import ItemsList from '$lib/components/layout/ItemsList.svelte';
 	import { onMount } from 'svelte';
 	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
 

materialious/src/routes/(app)/playlist/[slug]/+page.svelte

@@ -6,7 +6,7 @@
 	import { Clipboard } from '@capacitor/clipboard';
 	import { Capacitor } from '@capacitor/core';
 	import { _ } from '$lib/i18n';
-	import ItemsList from '$lib/components/ItemsList.svelte';
+	import ItemsList from '$lib/components/layout/ItemsList.svelte';
 
 	let { data } = $props();
 </script>

materialious/src/routes/(app)/search/[slug]/+page.svelte

@@ -4,7 +4,7 @@
 	import { searchCacheStore } from '$lib/store';
 	import { _ } from '$lib/i18n';
 	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
-	import ItemsList from '$lib/components/ItemsList.svelte';
+	import ItemsList from '$lib/components/layout/ItemsList.svelte';
 	import type { SearchOptions, SearchResults } from '$lib/api/model';
 
 	let { data } = $props();

materialious/src/routes/(app)/subscriptions/+page.svelte

@@ -3,7 +3,7 @@
 	import type { PlaylistPageVideo, Video, VideoBase } from '$lib/api/model';
 	import { feedCacheStore, feedLoadingStore } from '$lib/store';
 	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
-	import ItemsList from '$lib/components/ItemsList.svelte';
+	import ItemsList from '$lib/components/layout/ItemsList.svelte';
 	import { resolve } from '$app/paths';
 	import { _ } from '$lib/i18n';
 	import PageLoading from '$lib/components/PageLoading.svelte';

materialious/src/routes/(app)/watch/[slug]/+page.svelte

@@ -8,8 +8,8 @@
 	} from '$lib/api/index';
 	import type { Comments, PlaylistPage } from '$lib/api/model';
 	import ShareVideo from '$lib/components/ShareVideo.svelte';
-	import Thumbnail from '$lib/components/Thumbnail.svelte';
-	import Transcript from '$lib/components/Transcript.svelte';
+	import Thumbnail from '$lib/components/thumbnail/VideoThumbnail.svelte';
+	import Transcript from '$lib/components/watch/Transcript.svelte';
 	import { getBestThumbnail } from '$lib/images';
 	import { letterCase } from '$lib/letterCasing';
 	import { cleanNumber, numberWithCommas } from '$lib/numbers';

materialious/src/routes/(no-layout)/embed/[slug]/+page@.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Player from '$lib/components/Player.svelte';
+	import Player from '$lib/components/player/Player.svelte';
 
 	let { data } = $props();
 </script>

materialious/src/routes/(no-layout)/tv/[slug]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ContentColumn from '$lib/components/ContentColumn.svelte';
-	import Player from '$lib/components/Player.svelte';
+	import Player from '$lib/components/player/Player.svelte';
 	import Author from '$lib/components/Author.svelte';
 	import Description from '$lib/components/watch/Description.svelte';
 	import LikesDislikes from '$lib/components/watch/LikesDislikes.svelte';
@@ -10,7 +10,7 @@
 	import { _ } from '$lib/i18n';
 	import { playlistCacheStore } from '$lib/store';
 	import { fade } from 'svelte/transition';
-	import ItemsList from '$lib/components/ItemsList.svelte';
+	import ItemsList from '$lib/components/layout/ItemsList.svelte';
 
 	let { data } = $props();
 

materialious/src/routes/api/proxy/[urlToProxy]/+server.ts

@@ -7,6 +7,27 @@ import { parse as tldParse } from 'tldts';
 import { USER_AGENT } from 'bgutils-js';
 import sodium from 'libsodium-wrappers-sumo';
 
+const ALLOWED_HEADERS = [
+	'Origin',
+	'X-Requested-With',
+	'Content-Type',
+	'Accept',
+	'Authorization',
+	'x-goog-visitor-id',
+	'x-goog-api-key',
+	'x-origin',
+	'x-youtube-client-version',
+	'x-youtube-client-name',
+	'x-goog-api-format-version',
+	'x-goog-authuser',
+	'x-user-agent',
+	'Accept-Language',
+	'X-Goog-FieldMask',
+	'Range',
+	'Referer',
+	'Cookie'
+].join(', ');
+
 const allowedBaseDomains: string[] = [
 	'youtube.com',
 	'ytimg.com',
@@ -81,7 +102,6 @@ async function proxyRequest(
 	}
 
 	const requestHeaders = new Headers();
-
 	requestHeaders.set('host', urlToProxyObj.host);
 	requestHeaders.set('origin', urlToProxyObj.origin);
 	requestHeaders.set('user-agent', USER_AGENT);
@@ -119,11 +139,11 @@ async function proxyRequest(
 		throw error(500, errorMsg);
 	}
 
-	const responseHeaders = new Headers();
+	const responseHeaders = new Headers(response.headers);
 	responseHeaders.set('transfer-encoding', 'chunked');
 	responseHeaders.delete('content-encoding');
-	responseHeaders.set('access-control-allow-origin', request.headers.get('origin') ?? '');
-	responseHeaders.set('timing-allow-origin', request.headers.get('origin') ?? '');
+	responseHeaders.delete('access-control-allow-origin');
+	responseHeaders.delete('timing-allow-origin');
 
 	return new Response(response.body, {
 		status: response.status,
@@ -149,3 +169,16 @@ export async function PUT({ request, params, locals }) {
 export async function POST({ request, params, locals }) {
 	return await proxyRequest(request, params.urlToProxy, locals.userId);
 }
+
+export async function OPTIONS({ request }) {
+	return new Response('', {
+		status: 200,
+		headers: new Headers({
+			'Access-Control-Allow-Origin': request.headers.get('origin') || '',
+			'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, OPTIONS',
+			'Access-Control-Allow-Headers': ALLOWED_HEADERS,
+			'Access-Control-Max-Age': '86400',
+			'Access-Control-Allow-Credentials': 'true'
+		})
+	});
+}