From d289d53f6ed552821e92dfaa19247f03065decda Mon Sep 17 00:00:00 2001 From: WardPearce Date: Tue, 23 Apr 2024 17:59:04 +1200 Subject: [PATCH] Change store names --- materialious/src/lib/Api/index.ts | 18 +- materialious/src/lib/Player.svelte | 38 ++-- materialious/src/lib/Search.svelte | 4 +- materialious/src/lib/Thumbnail.svelte | 28 +-- materialious/src/lib/bookmarklet.ts | 78 +++---- materialious/src/routes/+error.svelte | 4 +- materialious/src/routes/+layout.svelte | 200 +++++++++--------- materialious/src/routes/+page.svelte | 4 +- materialious/src/routes/auth/+page.svelte | 4 +- .../src/routes/channel/[slug]/+page.svelte | 6 +- materialious/src/routes/history/+page.svelte | 4 +- .../src/routes/playlist/[slug]/+page.svelte | 6 +- .../src/routes/playlists/+page.svelte | 4 +- .../src/routes/search/[slug]/+page.svelte | 4 +- .../src/routes/subscriptions/+page.svelte | 4 +- .../routes/subscriptions/manage/+page.svelte | 4 +- materialious/src/routes/trending/+page.svelte | 4 +- .../src/routes/watch/[slug]/+page.svelte | 52 +++-- materialious/src/routes/watch/[slug]/+page.ts | 8 +- materialious/src/store.ts | 50 ++--- 20 files changed, 266 insertions(+), 258 deletions(-) diff --git a/materialious/src/lib/Api/index.ts b/materialious/src/lib/Api/index.ts index 1b2191e8..277d0598 100644 --- a/materialious/src/lib/Api/index.ts +++ b/materialious/src/lib/Api/index.ts @@ -1,9 +1,9 @@ import { get } from 'svelte/store'; import { - auth, - deArrowInstance, - deArrowThumbnailInstance, - returnYTDislikesInstance + authStore, + deArrowInstanceStore, + deArrowThumbnailInstanceStore, + returnYTDislikesInstanceStore } from '../../store'; import type { Channel, @@ -40,7 +40,7 @@ export async function fetchErrorHandle(response: Response): Promise { } export function buildAuthHeaders(): { headers: { Authorization: string; }; } { - return { headers: { Authorization: `Bearer ${get(auth)?.token}` } }; + return { headers: { Authorization: `Bearer ${get(authStore)?.token}` } }; } export async function getTrending(): Promise { @@ -60,7 +60,7 @@ export async function getVideo(videoId: string, local: boolean = false): Promise export async function getDislikes(videoId: string): Promise { const resp = await fetchErrorHandle( - await fetch(`${get(returnYTDislikesInstance)}/votes?videoId=${videoId}`) + await fetch(`${get(returnYTDislikesInstanceStore)}/votes?videoId=${videoId}`) ); return await resp.json(); } @@ -220,7 +220,7 @@ export async function postHistory(videoId: string) { export async function getPlaylist(playlistId: string, page: number = 1): Promise { let resp; - if (get(auth)) { + if (get(authStore)) { resp = await fetch(buildPath(`auth/playlists/${playlistId}?page=${page}`), buildAuthHeaders()); } else { resp = await fetch(buildPath(`playlists/${playlistId}?page=${page}`)); @@ -288,7 +288,7 @@ export async function removePlaylistVideo(playlistId: string, indexId: string) { export async function getDeArrow(videoId: string): Promise { const resp = await fetchErrorHandle( - await fetch(`${get(deArrowInstance)}/api/branding?videoID=${videoId}`) + await fetch(`${get(deArrowInstanceStore)}/api/branding?videoID=${videoId}`) ); return await resp.json(); } @@ -296,7 +296,7 @@ export async function getDeArrow(videoId: string): Promise { export async function getThumbnail(videoId: string, time: number): Promise { const resp = await fetchErrorHandle( await fetch( - `${get(deArrowThumbnailInstance)}/api/v1/getThumbnail?videoID=${videoId}&time=${time}` + `${get(deArrowThumbnailInstanceStore)}/api/v1/getThumbnail?videoID=${videoId}&time=${time}` ) ); return URL.createObjectURL(await resp.blob()); diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte index aaa3111c..b00c9a0a 100644 --- a/materialious/src/lib/Player.svelte +++ b/materialious/src/lib/Player.svelte @@ -8,13 +8,13 @@ import type { MediaTimeUpdateEvent, PlayerSrc } from 'vidstack'; import type { MediaPlayerElement } from 'vidstack/elements'; import { - playerAlwaysLoop, - playerAutoPlay, - playerDash, - playerProxyVideos, - playerSavePlaybackPosition, - sponsorBlockCategories, - sponsorBlockUrl + playerAlwaysLoopStore, + playerAutoPlayStore, + playerDashStore, + playerProxyVideosStore, + playerSavePlaybackPositionStore, + sponsorBlockCategoriesStore, + sponsorBlockUrlStore } from '../store'; import type { VideoPlay } from './Api/model'; import { proxyVideoUrl, videoLength, type PhasedDescription } from './misc'; @@ -36,7 +36,7 @@ } } - const proxyVideos = get(playerProxyVideos); + const proxyVideos = get(playerProxyVideosStore); onMount(async () => { if (!data.video.hlsUrl) { @@ -80,18 +80,18 @@ savePlayerPos(); }); - if (get(sponsorBlockCategories)) { - const currentCategories = get(sponsorBlockCategories); + if (get(sponsorBlockCategoriesStore)) { + const currentCategories = get(sponsorBlockCategoriesStore); - const sponsorBlockInstance = get(sponsorBlockUrl); + const sponsorBlockUrl = get(sponsorBlockUrlStore); - if (currentCategories.length > 0 && sponsorBlockInstance && sponsorBlockInstance !== '') { - const sponsorBlock = new SponsorBlock('', { baseURL: sponsorBlockInstance }); + if (currentCategories.length > 0 && sponsorBlockUrl && sponsorBlockUrl !== '') { + const sponsorBlock = new SponsorBlock('', { baseURL: sponsorBlockUrl }); try { const segments = await sponsorBlock.getSegments( data.video.videoId, - get(sponsorBlockCategories) as Category[] + get(sponsorBlockCategoriesStore) as Category[] ); player.addEventListener('time-update', (event: MediaTimeUpdateEvent) => { @@ -113,7 +113,7 @@ } } - if (get(playerDash)) { + if (get(playerDashStore)) { player.addEventListener('dash-can-play', () => { loadPlayerPos(); }); @@ -183,7 +183,7 @@ function loadPlayerPos() { if (playerPosSet) return; playerPosSet = true; - if (get(playerSavePlaybackPosition)) { + if (get(playerSavePlaybackPositionStore)) { try { const playerPos = localStorage.getItem(`v_${data.video.videoId}`); if (playerPos) { @@ -197,7 +197,7 @@ if (data.video.hlsUrl) return; try { - if (get(playerSavePlaybackPosition) && player.currentTime) { + if (get(playerSavePlaybackPositionStore) && player.currentTime) { if (player.currentTime < player.duration - 10 && player.currentTime > 10) { localStorage.setItem(`v_${data.video.videoId}`, player.currentTime.toString()); } else { @@ -219,8 +219,8 @@ (searchSuggestions = value)); + interfaceSearchSuggestionsStore.subscribe((value) => (searchSuggestions = value)); let search: string; let suggestionsForSearch: string[] = []; diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte index adaa873d..bf3aa4bc 100644 --- a/materialious/src/lib/Thumbnail.svelte +++ b/materialious/src/lib/Thumbnail.svelte @@ -3,12 +3,12 @@ import { _ } from 'svelte-i18n'; import { get } from 'svelte/store'; import { - deArrowEnabled, - interfacePreviewVideoOnHover, - playerProxyVideos, - playerSavePlaybackPosition, - syncPartyConnections, - syncPartyPeer + deArrowEnabledStore, + interfacePreviewVideoOnHoverStore, + playerProxyVideosStore, + playerSavePlaybackPositionStore, + syncPartyConnectionsStore, + syncPartyPeerStore } from '../store'; import { getDeArrow, getThumbnail, getVideo } from './Api'; import type { Notification, PlaylistPageVideo, Video, VideoBase, VideoPlay } from './Api/model'; @@ -23,7 +23,7 @@ let videoPreviewMuted: boolean = true; let videoPreviewVolume: number = 0.4; - let proxyVideos = get(playerProxyVideos); + let proxyVideos = get(playerProxyVideosStore); let watchUrl = new URL(`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}/watch/${video.videoId}`); @@ -31,7 +31,7 @@ watchUrl.searchParams.set('playlist', playlistId); } - syncPartyPeer.subscribe((peer) => { + syncPartyPeerStore.subscribe((peer) => { if (peer) { watchUrl.searchParams.set('sync', peer.id); } @@ -43,7 +43,7 @@ let img: HTMLImageElement; let progress: string | null; - if (get(playerSavePlaybackPosition)) { + if (get(playerSavePlaybackPositionStore)) { try { progress = localStorage.getItem(`v_${video.videoId}`); } catch { @@ -56,7 +56,7 @@ onMount(async () => { let imageSrc = video.videoThumbnails[4].url; - if (get(deArrowEnabled)) { + if (get(deArrowEnabledStore)) { let locatedThumbnail = false; try { @@ -131,7 +131,7 @@ }); function syncChangeVideo() { - if ($syncPartyConnections) { + if ($syncPartyConnectionsStore) { const events = { events: [{ type: 'change-video', videoId: video.videoId }] } as PlayerEvents; @@ -142,14 +142,14 @@ playlistId: playlistId }); } - $syncPartyConnections.forEach((conn) => { + $syncPartyConnectionsStore.forEach((conn) => { conn.send(events); }); } } async function previewVideo() { - if (!get(interfacePreviewVideoOnHover)) return; + if (!get(interfacePreviewVideoOnHoverStore)) return; showVideoPreview = true; try { @@ -261,7 +261,7 @@
{video.title} diff --git a/materialious/src/lib/bookmarklet.ts b/materialious/src/lib/bookmarklet.ts index 920a9504..2667ef27 100644 --- a/materialious/src/lib/bookmarklet.ts +++ b/materialious/src/lib/bookmarklet.ts @@ -1,126 +1,126 @@ import { page } from '$app/stores'; import { get } from 'svelte/store'; import { - darkMode, - deArrowEnabled, - deArrowInstance, - deArrowThumbnailInstance, - interfacePreviewVideoOnHover, - interfaceSearchSuggestions, - playerAlwaysLoop, - playerAutoPlay, - playerAutoplayNextByDefault, - playerDash, - playerListenByDefault, - playerProxyVideos, - playerSavePlaybackPosition, - playerTheatreModeByDefault, - returnYTDislikesInstance, - sponsorBlock, - sponsorBlockCategories, - sponsorBlockUrl, - themeColor + darkModeStore, + deArrowEnabledStore, + deArrowInstanceStore, + deArrowThumbnailInstanceStore, + interfacePreviewVideoOnHoverStore, + interfaceSearchSuggestionsStore, + playerAlwaysLoopStore, + playerAutoPlayStore, + playerAutoplayNextByDefaultStore, + playerDashStore, + playerListenByDefaultStore, + playerProxyVideosStore, + playerSavePlaybackPositionStore, + playerTheatreModeByDefaultStore, + returnYTDislikesInstanceStore, + sponsorBlockCategoriesStore, + sponsorBlockStore, + sponsorBlockUrlStore, + themeColorStore } from '../store'; const persistedStores = [ { name: 'returnYTDislikesInstance', - store: returnYTDislikesInstance, + store: returnYTDislikesInstanceStore, type: 'string' }, { name: 'darkMode', - store: darkMode, + store: darkModeStore, type: 'boolean' }, { name: 'themeColor', - store: themeColor, + store: themeColorStore, type: 'string' }, { name: 'autoPlay', - store: playerAutoPlay, + store: playerAutoPlayStore, type: 'boolean' }, { name: 'alwaysLoop', - store: playerAlwaysLoop, + store: playerAlwaysLoopStore, type: 'boolean' }, { name: 'proxyVideos', - store: playerProxyVideos, + store: playerProxyVideosStore, type: 'boolean' }, { name: 'listenByDefault', - store: playerListenByDefault, + store: playerListenByDefaultStore, type: 'boolean' }, { name: 'savePlaybackPosition', - store: playerSavePlaybackPosition, + store: playerSavePlaybackPositionStore, type: 'boolean' }, { name: 'dashEnabled', - store: playerDash, + store: playerDashStore, type: 'boolean' }, { name: 'theatreModeByDefault', - store: playerTheatreModeByDefault, + store: playerTheatreModeByDefaultStore, type: 'boolean' }, { name: 'autoplayNextByDefault', - store: playerAutoplayNextByDefault, + store: playerAutoplayNextByDefaultStore, type: 'boolean' }, { name: 'returnYtDislikes', - store: returnYTDislikesInstance, + store: returnYTDislikesInstanceStore, type: 'boolean' }, { name: 'searchSuggestions', - store: interfaceSearchSuggestions, + store: interfaceSearchSuggestionsStore, type: 'boolean' }, { name: 'previewVideoOnHover', - store: interfacePreviewVideoOnHover, + store: interfacePreviewVideoOnHoverStore, type: 'boolean' }, { name: 'sponsorBlock', - store: sponsorBlock, + store: sponsorBlockStore, type: 'boolean' }, { name: 'sponsorBlockUrl', - store: sponsorBlockUrl, + store: sponsorBlockUrlStore, type: 'string' }, { name: 'sponsorBlockCategories', - store: sponsorBlockCategories, + store: sponsorBlockCategoriesStore, type: 'array' }, { name: 'deArrowInstance', - store: deArrowInstance, + store: deArrowInstanceStore, type: 'string' }, { name: 'deArrowEnabled', - store: deArrowEnabled, + store: deArrowEnabledStore, type: 'boolean' }, { name: 'deArrowThumbnailInstance', - store: deArrowThumbnailInstance, + store: deArrowThumbnailInstanceStore, type: 'string' } ]; diff --git a/materialious/src/routes/+error.svelte b/materialious/src/routes/+error.svelte index fc5992e5..06b717e9 100644 --- a/materialious/src/routes/+error.svelte +++ b/materialious/src/routes/+error.svelte @@ -1,8 +1,8 @@
diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte index 0940083a..63d85b07 100644 --- a/materialious/src/routes/+layout.svelte +++ b/materialious/src/routes/+layout.svelte @@ -19,51 +19,51 @@ import { get } from 'svelte/store'; import { pwaInfo } from 'virtual:pwa-info'; import { - activePage, - auth, - darkMode, - deArrowEnabled, - deArrowInstance, - deArrowThumbnailInstance, - interfacePreviewVideoOnHover, - interfaceSearchSuggestions, - playerAlwaysLoop, - playerAutoPlay, - playerAutoplayNextByDefault, - playerDash, - playerListenByDefault, - playerProxyVideos, - playerSavePlaybackPosition, - playerTheatreModeByDefault, - returnYTDislikesInstance, - returnYtDislikes, - sponsorBlock, - sponsorBlockCategories, - sponsorBlockUrl, - syncPartyConnections, - syncPartyPeer, - themeColor + activePageStore, + authStore, + darkModeStore, + deArrowEnabledStore, + deArrowInstanceStore, + deArrowThumbnailInstanceStore, + interfacePreviewVideoOnHoverStore, + interfaceSearchSuggestionsStore, + playerAlwaysLoopStore, + playerAutoPlayStore, + playerAutoplayNextByDefaultStore, + playerDashStore, + playerListenByDefaultStore, + playerProxyVideosStore, + playerSavePlaybackPositionStore, + playerTheatreModeByDefaultStore, + returnYTDislikesInstanceStore, + returnYtDislikesStore, + sponsorBlockCategoriesStore, + sponsorBlockStore, + sponsorBlockUrlStore, + syncPartyConnectionsStore, + syncPartyPeerStore, + themeColorStore } from '../store'; let mobileSearchShow = false; let currentPage: string | null = ''; - activePage.subscribe((page) => (currentPage = page)); + activePageStore.subscribe((page) => (currentPage = page)); let sponsorCategoriesList: string[] = []; - sponsorBlockCategories.subscribe((value) => (sponsorCategoriesList = value)); + sponsorBlockCategoriesStore.subscribe((value) => (sponsorCategoriesList = value)); let isLoggedIn = false; - auth.subscribe((value) => { + authStore.subscribe((value) => { isLoggedIn = value !== null; }); let notifications: Notification[] = []; - let sponsorBlockInstance = get(sponsorBlockUrl); - let returnYTInstance = get(returnYTDislikesInstance); - let deArrowUrl = get(deArrowInstance); - let deArrowThumbnailUrl = get(deArrowThumbnailInstance); + let sponsorBlockInstance = get(sponsorBlockUrlStore); + let returnYTInstance = get(returnYTDislikesInstanceStore); + let deArrowUrl = get(deArrowInstanceStore); + let deArrowThumbnailUrl = get(deArrowThumbnailInstanceStore); const pages = [ { @@ -123,19 +123,19 @@ } async function startWatchSync() { - if ($syncPartyPeer) { - $syncPartyPeer.destroy(); - syncPartyPeer.set(null); + if ($syncPartyPeerStore) { + $syncPartyPeerStore.destroy(); + syncPartyPeerStore.set(null); removeWindowQueryFlag('sync'); return; } const peerId = crypto.randomUUID(); setWindowQueryFlag('sync', peerId); - $syncPartyPeer = new Peer(peerId); + $syncPartyPeerStore = new Peer(peerId); - if ($syncPartyPeer) { - $syncPartyPeer.on('connection', (conn) => { + if ($syncPartyPeerStore) { + $syncPartyPeerStore.on('connection', (conn) => { conn.on('open', () => { if ($page.url.pathname.startsWith('/watch')) { const paths = $page.url.pathname.split('/'); @@ -151,7 +151,7 @@ } } changeVideoEvent(conn); - syncPartyConnections.set([...($syncPartyConnections || []), conn]); + syncPartyConnectionsStore.set([...($syncPartyConnectionsStore || []), conn]); }); }); } @@ -159,10 +159,10 @@ function toggleSponsor(category: string) { if (sponsorCategoriesList.includes(category)) { - sponsorBlockCategories.set(sponsorCategoriesList.filter((value) => value !== category)); + sponsorBlockCategoriesStore.set(sponsorCategoriesList.filter((value) => value !== category)); } else { sponsorCategoriesList.push(category); - sponsorBlockCategories.set(sponsorCategoriesList); + sponsorBlockCategoriesStore.set(sponsorCategoriesList); } } @@ -170,22 +170,22 @@ const target = color.target; const hex = (target as { value: string }).value; await ui('theme', hex); - themeColor.set(hex); + themeColorStore.set(hex); } function toggleDarkMode() { - const isDark = get(darkMode); + const isDark = get(darkModeStore); if (isDark) { ui('mode', 'light'); - darkMode.set(false); + darkModeStore.set(false); } else { ui('mode', 'dark'); - darkMode.set(true); + darkModeStore.set(true); } } - darkMode.subscribe((isDark) => { + darkModeStore.subscribe((isDark) => { if (isDark) { ui('mode', 'dark'); } else { @@ -204,7 +204,7 @@ } function logout() { - auth.set(null); + authStore.set(null); goto('/'); } @@ -218,14 +218,14 @@ bookmarkletLoadFromUrl(); - const isDark = get(darkMode); + const isDark = get(darkModeStore); if (isDark === null) { if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - darkMode.set(true); + darkModeStore.set(true); ui('mode', 'dark'); } else { - darkMode.set(false); + darkModeStore.set(false); ui('mode', 'light'); } } else { @@ -236,39 +236,39 @@ } } - const themeHex = get(themeColor); + const themeHex = get(themeColorStore); if (themeHex) { await ui('theme', themeHex); } if (isLoggedIn) { - loadNotifications().catch(() => auth.set(null)); + loadNotifications().catch(() => authStore.set(null)); } const currentUrl = get(page).url; const syncId = currentUrl.searchParams.get('sync'); if (syncId) { - $syncPartyPeer = new Peer(crypto.randomUUID()); - $syncPartyPeer.on('open', () => { - if (!$syncPartyPeer) return; + $syncPartyPeerStore = new Peer(crypto.randomUUID()); + $syncPartyPeerStore.on('open', () => { + if (!$syncPartyPeerStore) return; - const conn = $syncPartyPeer.connect(syncId); - syncPartyConnections.set([...($syncPartyConnections || []), conn]); + const conn = $syncPartyPeerStore.connect(syncId); + syncPartyConnectionsStore.set([...($syncPartyConnectionsStore || []), conn]); changeVideoEvent(conn); }); - $syncPartyPeer.on('disconnected', () => { - syncPartyPeer.set(null); - syncPartyConnections.set(null); + $syncPartyPeerStore.on('disconnected', () => { + syncPartyPeerStore.set(null); + syncPartyConnectionsStore.set(null); }); } }); onDestroy(() => { - if ($syncPartyPeer) { - $syncPartyPeer.destroy(); - $syncPartyPeer = null; + if ($syncPartyPeerStore) { + $syncPartyPeerStore.destroy(); + $syncPartyPeerStore = null; } }); @@ -322,7 +322,7 @@ (mobileSearchShow = false)} /> {:else} {#if isLoggedIn} @@ -371,7 +371,7 @@
{$_('layout.theme.theme')}
@@ -382,7 +388,7 @@
- {#if $auth} + {#if $authStore}