blade/materialious
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change store names

Browse Source
This commit is contained in:
WardPearce
2024-04-23 17:59:04 +12:00
parent aefb935dd9
commit d289d53f6e
20 changed files with 266 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
materialious/src/lib/Api/index.ts
+9 -9
View File
@@ -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<Response> {
}
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<Video[]> {
@@ -60,7 +60,7 @@ export async function getVideo(videoId: string, local: boolean = false): Promise
export async function getDislikes(videoId: string): Promise<ReturnYTDislikes> {
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<PlaylistPage> {
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<DeArrow> {
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<DeArrow> {
export async function getThumbnail(videoId: string, time: number): Promise<string> {
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());
materialious/src/lib/Player.svelte
+19 -19
View File
@@ -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 @@
<media-player
bind:this={player}
autoPlay={$playerAutoPlay && !isSyncing}
loop={$playerAlwaysLoop}
autoPlay={$playerAutoPlayStore && !isSyncing}
loop={$playerAlwaysLoopStore}
title={data.video.title}
streamType={playerIsLive ? 'live' : 'on-demand'}
viewType={audioMode ? 'audio' : 'video'}
materialious/src/lib/Search.svelte
+2 -2
View File
@@ -2,13 +2,13 @@
import { goto } from '$app/navigation';
import { createEventDispatcher } from 'svelte';
import { _ } from 'svelte-i18n';
import { interfaceSearchSuggestions } from '../store';
import { interfaceSearchSuggestionsStore } from '../store';
import { getSearchSuggestions } from './Api';
const dispatch = createEventDispatcher();
let searchSuggestions = false;
interfaceSearchSuggestions.subscribe((value) => (searchSuggestions = value));
interfaceSearchSuggestionsStore.subscribe((value) => (searchSuggestions = value));
let search: string;
let suggestionsForSearch: string[] = [];
materialious/src/lib/Thumbnail.svelte
+14 -14
View File
@@ -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 @@
<div class="max">
<a
href={watchUrl.toString()}
data-sveltekit-preload-data="off"
data-sveltekit-preload-data="off"
style="display: flex; justify-content:flex-start; position: absolute; width: 100%;"
><div class="bold" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
{video.title}
materialious/src/lib/bookmarklet.ts
+39 -39
View File
@@ -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'
}
];
materialious/src/routes/+error.svelte
+2 -2
View File
@@ -1,8 +1,8 @@
<script src="ts">
import { page } from '$app/stores';
import { activePage } from '../store';
import { activePageStore } from '../store';
activePage.set(null);
activePageStore.set(null);
</script>
<div class="space"></div>
materialious/src/routes/+layout.svelte
+101 -99
View File
@@ -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 @@
<Search on:searchCancelled={() => (mobileSearchShow = false)} />
{:else}
<button data-ui="#sync-party" class="m l circle large transparent">
<i class:primary-text={$syncPartyPeer}>group</i>
<i class:primary-text={$syncPartyPeerStore}>group</i>
<div class="tooltip bottom">{$_('layout.syncParty')}</div>
</button>
{#if isLoggedIn}
@@ -371,7 +371,7 @@
<div class="settings">
<h6>{$_('layout.theme.theme')}</h6>
<button on:click={toggleDarkMode} class="no-margin">
{#if !$darkMode}
{#if !$darkModeStore}
<i>dark_mode</i>
<span>{$_('layout.theme.darkMode')}</span>
{:else}
@@ -396,8 +396,8 @@
<label class="switch">
<input
type="checkbox"
bind:checked={$interfaceSearchSuggestions}
on:click={() => interfaceSearchSuggestions.set(!$interfaceSearchSuggestions)}
bind:checked={$interfaceSearchSuggestionsStore}
on:click={() => interfaceSearchSuggestionsStore.set(!$interfaceSearchSuggestionsStore)}
/>
<span></span>
</label>
@@ -412,8 +412,9 @@
<label class="switch">
<input
type="checkbox"
bind:checked={$interfacePreviewVideoOnHover}
on:click={() => interfacePreviewVideoOnHover.set(!$interfacePreviewVideoOnHover)}
bind:checked={$interfacePreviewVideoOnHoverStore}
on:click={() =>
interfacePreviewVideoOnHoverStore.set(!$interfacePreviewVideoOnHoverStore)}
/>
<span></span>
</label>
@@ -445,8 +446,8 @@
<label class="switch">
<input
type="checkbox"
bind:checked={$playerAutoPlay}
on:click={() => playerAutoPlay.set(!$playerAutoPlay)}
bind:checked={$playerAutoPlayStore}
on:click={() => playerAutoPlayStore.set(!$playerAutoPlayStore)}
/>
<span></span>
</label>
@@ -461,8 +462,8 @@
<label class="switch">
<input
type="checkbox"
bind:checked={$playerAlwaysLoop}
on:click={() => playerAlwaysLoop.set(!$playerAlwaysLoop)}
bind:checked={$playerAlwaysLoopStore}
on:click={() => playerAlwaysLoopStore.set(!$playerAlwaysLoopStore)}
/>
<span></span>
</label>
@@ -477,8 +478,8 @@
<label class="switch">
<input
type="checkbox"
bind:checked={$playerProxyVideos}
on:click={() => playerProxyVideos.set(!$playerProxyVideos)}
bind:checked={$playerProxyVideosStore}
on:click={() => playerProxyVideosStore.set(!$playerProxyVideosStore)}
/>
<span></span>
</label>
@@ -493,8 +494,8 @@
<label class="switch">
<input
type="checkbox"
bind:checked={$playerSavePlaybackPosition}
on:click={() => playerSavePlaybackPosition.set(!$playerSavePlaybackPosition)}
bind:checked={$playerSavePlaybackPositionStore}
on:click={() => playerSavePlaybackPositionStore.set(!$playerSavePlaybackPositionStore)}
/>
<span></span>
</label>
@@ -509,8 +510,8 @@
<label class="switch">
<input
type="checkbox"
bind:checked={$playerListenByDefault}
on:click={() => playerListenByDefault.set(!$playerListenByDefault)}
bind:checked={$playerListenByDefaultStore}
on:click={() => playerListenByDefaultStore.set(!$playerListenByDefaultStore)}
/>
<span></span>
</label>
@@ -525,8 +526,8 @@
<label class="switch">
<input
type="checkbox"
bind:checked={$playerTheatreModeByDefault}
on:click={() => playerTheatreModeByDefault.set(!$playerTheatreModeByDefault)}
bind:checked={$playerTheatreModeByDefaultStore}
on:click={() => playerTheatreModeByDefaultStore.set(!$playerTheatreModeByDefaultStore)}
/>
<span></span>
</label>
@@ -541,8 +542,9 @@
<label class="switch">
<input
type="checkbox"
bind:checked={$playerAutoplayNextByDefault}
on:click={() => playerAutoplayNextByDefault.set(!$playerAutoplayNextByDefault)}
bind:checked={$playerAutoplayNextByDefaultStore}
on:click={() =>
playerAutoplayNextByDefaultStore.set(!$playerAutoplayNextByDefaultStore)}
/>
<span></span>
</label>
@@ -557,8 +559,8 @@
<label class="switch">
<input
type="checkbox"
bind:checked={$playerDash}
on:click={() => playerDash.set(!$playerDash)}
bind:checked={$playerDashStore}
on:click={() => playerDashStore.set(!$playerDashStore)}
/>
<span></span>
</label>
@@ -569,7 +571,7 @@
<div class="settings">
<h6>Return YT Dislikes</h6>
<form on:submit|preventDefault={() => returnYTDislikesInstance.set(returnYTInstance)}>
<form on:submit|preventDefault={() => returnYTDislikesInstanceStore.set(returnYTInstance)}>
<nav>
<div class="field label border">
<input bind:value={returnYTInstance} name="returnyt-instance" type="text" />
@@ -587,8 +589,8 @@
</div>
<label class="switch">
<input
bind:checked={$returnYtDislikes}
on:click={() => returnYtDislikes.set(!$returnYtDislikes)}
bind:checked={$returnYtDislikesStore}
on:click={() => returnYtDislikesStore.set(!$returnYtDislikesStore)}
type="checkbox"
/>
<span></span>
@@ -599,7 +601,7 @@
<div class="settings">
<h6>Sponsorblock</h6>
<form on:submit|preventDefault={() => sponsorBlockUrl.set(sponsorBlockInstance)}>
<form on:submit|preventDefault={() => sponsorBlockUrlStore.set(sponsorBlockInstance)}>
<nav>
<div class="field label border">
<input bind:value={sponsorBlockInstance} name="sponsorblock-instance" type="text" />
@@ -617,8 +619,8 @@
</div>
<label class="switch">
<input
bind:checked={$sponsorBlock}
on:click={() => sponsorBlock.set(!$sponsorBlock)}
bind:checked={$sponsorBlockStore}
on:click={() => sponsorBlockStore.set(!$sponsorBlockStore)}
type="checkbox"
/>
<span></span>
@@ -647,7 +649,7 @@
<div class="settings">
<h6>{$_('layout.deArrow.title')}</h6>
<form on:submit|preventDefault={() => deArrowInstance.set(deArrowUrl)}>
<form on:submit|preventDefault={() => deArrowInstanceStore.set(deArrowUrl)}>
<nav>
<div class="field label border">
<input bind:value={deArrowUrl} name="dearrow-instance" type="text" />
@@ -659,7 +661,7 @@
</nav>
</form>
<form on:submit|preventDefault={() => deArrowThumbnailInstance.set(deArrowThumbnailUrl)}>
<form on:submit|preventDefault={() => deArrowThumbnailInstanceStore.set(deArrowThumbnailUrl)}>
<nav>
<div class="field label border">
<input bind:value={deArrowThumbnailUrl} name="dearrow-thumbnail-instance" type="text" />
@@ -678,8 +680,8 @@
</div>
<label class="switch">
<input
bind:checked={$deArrowEnabled}
on:click={() => deArrowEnabled.set(!$deArrowEnabled)}
bind:checked={$deArrowEnabledStore}
on:click={() => deArrowEnabledStore.set(!$deArrowEnabledStore)}
type="checkbox"
/>
<span></span>
@@ -742,13 +744,13 @@
<dialog id="sync-party">
<h6>{$_('layout.syncParty')}</h6>
<p>{$_('layout.syncPartyWarning')}</p>
{#if $syncPartyPeer}
{#if $syncPartyPeerStore}
<nav>
<div class="field label border">
<input
name="sync-share"
readonly
value={`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}?sync=${$syncPartyPeer.id}`}
value={`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}?sync=${$syncPartyPeerStore.id}`}
type="text"
/>
<label class="active" for="sync-share">Share URL</label>
@@ -756,7 +758,7 @@
<button
on:click={async () => {
await navigator.clipboard.writeText(
`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}?sync=${$syncPartyPeer.id}`
`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}?sync=${$syncPartyPeerStore.id}`
);
}}
class="square round"
@@ -769,8 +771,8 @@
<button
class="no-margin"
on:click={startWatchSync}
data-ui={`${$syncPartyPeer ? '#sync-party' : ''}`}
>{#if $syncPartyPeer}
data-ui={`${$syncPartyPeerStore ? '#sync-party' : ''}`}
>{#if $syncPartyPeerStore}
{$_('layout.endSyncParty')}
{:else}
{$_('layout.startSyncParty')}
materialious/src/routes/+page.svelte
+2 -2
View File
@@ -1,10 +1,10 @@
<script lang="ts">
import VideoList from '$lib/VideoList.svelte';
import { activePage } from '../store';
import { activePageStore } from '../store';
export let data;
activePage.set('home');
activePageStore.set('home');
</script>
{#if data.popularDisabled}
materialious/src/routes/auth/+page.svelte
+2 -2
View File
@@ -3,10 +3,10 @@
import { page } from '$app/stores';
import PageLoading from '$lib/PageLoading.svelte';
import { onMount } from 'svelte';
import { auth } from '../../store';
import { authStore } from '../../store';
onMount(() => {
auth.set({
authStore.set({
username: $page.url.searchParams.get('username') as string,
token: $page.url.searchParams.get('token') as string
});
materialious/src/routes/channel/[slug]/+page.svelte
+3 -3
View File
@@ -9,11 +9,11 @@
import { _ } from 'svelte-i18n';
import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
import { get } from 'svelte/store';
import { activePage, auth } from '../../../store';
import { activePageStore, authStore } from '../../../store';
export let data;
activePage.set(null);
activePageStore.set(null);
let isSubscribed = false;
@@ -60,7 +60,7 @@
onMount(async () => {
displayContent = await getChannelContent(data.channel.authorId, { type: 'videos' });
if (get(auth)) {
if (get(authStore)) {
isSubscribed = await amSubscribed(data.channel.authorId);
}
});
materialious/src/routes/history/+page.svelte
+2 -2
View File
@@ -7,9 +7,9 @@
import { onMount } from 'svelte';
import { _ } from 'svelte-i18n';
import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
import { activePage } from '../../store';
import { activePageStore } from '../../store';
activePage.set('history');
activePageStore.set('history');
let history: VideoPlay[] = [];
let loaded = false;
materialious/src/routes/playlist/[slug]/+page.svelte
+3 -3
View File
@@ -5,11 +5,11 @@
import { cleanNumber, unsafeRandomItem } from '$lib/misc.js';
import { onMount } from 'svelte';
import { _ } from 'svelte-i18n';
import { activePage, playlistSettings } from '../../../store';
import { activePageStore, playlistSettingsStore } from '../../../store';
export let data;
activePage.set(null);
activePageStore.set(null);
let videos: PlaylistPageVideo[] | undefined;
if (data.playlist.videos.length > 0) {
@@ -51,7 +51,7 @@
<a
href={`/watch/${unsafeRandomItem(videos).videoId}?playlist=${data.playlist.playlistId}`}
on:click={() =>
playlistSettings.set({ [data.playlist.playlistId]: { shuffle: true, loop: false } })}
playlistSettingsStore.set({ [data.playlist.playlistId]: { shuffle: true, loop: false } })}
class="button circle extra no-margin border"
>
<i>shuffle</i>
materialious/src/routes/playlists/+page.svelte
+2 -2
View File
@@ -2,11 +2,11 @@
import { deletePersonalPlaylist, getPersonalPlaylists, postPersonalPlaylist } from '$lib/Api';
import PlaylistThumbnail from '$lib/PlaylistThumbnail.svelte';
import { _ } from 'svelte-i18n';
import { activePage } from '../../store';
import { activePageStore } from '../../store';
export let data;
activePage.set('playlists');
activePageStore.set('playlists');
let playlistPrivacy: 'public' | 'private' | 'unlisted' = 'public';
let playlistTitle: string;
materialious/src/routes/search/[slug]/+page.svelte
+2 -2
View File
@@ -6,13 +6,13 @@
import Thumbnail from '$lib/Thumbnail.svelte';
import { _ } from 'svelte-i18n';
import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
import { activePage } from '../../../store';
import { activePageStore } from '../../../store';
export let data;
let currentPage = 1;
activePage.set(null);
activePageStore.set(null);
async function changeType(type: 'playlist' | 'all' | 'video' | 'channel') {
data.searchType = type;
materialious/src/routes/subscriptions/+page.svelte
+2 -2
View File
@@ -3,14 +3,14 @@
import VideoList from '$lib/VideoList.svelte';
import { _ } from 'svelte-i18n';
import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
import { activePage } from '../../store';
import { activePageStore } from '../../store';
export let data;
let currentPage = 1;
$: videos = [...data.feed.videos, ...data.feed.notifications];
activePage.set('subscriptions');
activePageStore.set('subscriptions');
async function loadMore(event: InfiniteEvent) {
currentPage++;
materialious/src/routes/subscriptions/manage/+page.svelte
+2 -2
View File
@@ -3,9 +3,9 @@
import { truncate } from '$lib/misc';
import Fuse from 'fuse.js';
import { _ } from 'svelte-i18n';
import { activePage } from '../../../store';
import { activePageStore } from '../../../store';
activePage.set(null);
activePageStore.set(null);
export let data;
materialious/src/routes/trending/+page.svelte
+2 -2
View File
@@ -1,10 +1,10 @@
<script lang="ts">
import VideoList from '$lib/VideoList.svelte';
import { activePage } from '../../store';
import { activePageStore } from '../../store';
export let data;
activePage.set('trending');
activePageStore.set('trending');
</script>
<VideoList videos={data.trending} />
materialious/src/routes/watch/[slug]/+page.svelte
+29 -23
View File
@@ -21,21 +21,21 @@
import { get } from 'svelte/store';
import type { MediaPlayerElement } from 'vidstack/elements';
import {
activePage,
auth,
playerAutoplayNextByDefault,
playerListenByDefault,
playerTheatreModeByDefault,
playlistSettings,
syncPartyConnections,
syncPartyPeer
activePageStore,
authStore,
playerAutoplayNextByDefaultStore,
playerListenByDefaultStore,
playerTheatreModeByDefaultStore,
playlistSettingsStore,
syncPartyConnectionsStore,
syncPartyPeerStore
} from '../../../store';
export let data;
$: comments = data.comments;
activePage.set(null);
activePageStore.set(null);
let playlistVideos: PlaylistPageVideo[] = [];
let playlist: PlaylistPage | null = null;
@@ -43,13 +43,13 @@
let loopPlaylist: boolean = false;
let shufflePlaylist: boolean = false;
let theatreMode = get(playerTheatreModeByDefault);
let theatreMode = get(playerTheatreModeByDefaultStore);
let audioMode = get(playerListenByDefault);
let audioMode = get(playerListenByDefaultStore);
let seekTo: (time: number) => void;
let player: MediaPlayerElement;
playlistSettings.subscribe((playlistSetting) => {
playlistSettingsStore.subscribe((playlistSetting) => {
if (!data.playlistId) return;
if (data.playlistId in playlistSetting) {
loopPlaylist = playlistSetting[data.playlistId].loop;
@@ -193,14 +193,14 @@
});
}
syncPartyConnections.subscribe((connections) => {
syncPartyConnectionsStore.subscribe((connections) => {
if (!connections || !player) return;
playerSyncEvents(connections[connections.length - 1]);
});
onMount(async () => {
if ($syncPartyConnections) {
$syncPartyConnections.forEach((conn) => {
if ($syncPartyConnectionsStore) {
$syncPartyConnectionsStore.forEach((conn) => {
playerSyncEvents(conn);
});
}
@@ -208,7 +208,7 @@
if (player) {
player.addEventListener('end', () => {
if (!playlistVideos) {
if ($playerAutoplayNextByDefault) {
if ($playerAutoplayNextByDefaultStore) {
goto(`/watch/${data.video.recommendedVideos[0].videoId}`);
}
return;
@@ -236,8 +236,8 @@
}
if (typeof goToVideo !== 'undefined') {
if ($syncPartyConnections) {
$syncPartyConnections.forEach((conn) => {
if ($syncPartyConnectionsStore) {
$syncPartyConnectionsStore.forEach((conn) => {
if (typeof goToVideo === 'undefined') return;
conn.send({
@@ -360,7 +360,13 @@
<div
style="max-height: 80vh;max-width: calc(80vh * 16 / 9);overflow: hidden;position: relative;flex: 1;"
>
<Player {data} {audioMode} isSyncing={$syncPartyPeer !== null} bind:seekTo bind:player />
<Player
{data}
{audioMode}
isSyncing={$syncPartyPeerStore !== null}
bind:seekTo
bind:player
/>
</div>
{/key}
</div>
@@ -382,7 +388,7 @@
</div>
</nav>
</a>
{#if $auth}
{#if $authStore}
<button
on:click={toggleSubscribed}
class:inverse-surface={!data.subscribed}
@@ -504,7 +510,7 @@
<button disabled class="border no-margin">
<i>add</i>
<div class="tooltip">
{#if $auth}
{#if $authStore}
{$_('player.noPlaylists')}
{:else}
{$_('loginRequired')}
@@ -596,7 +602,7 @@
<button
on:click={() => (
(loopPlaylist = !loopPlaylist),
playlistSettings.set({
playlistSettingsStore.set({
[playlist.playlistId]: { loop: loopPlaylist, shuffle: shufflePlaylist }
})
)}
@@ -611,7 +617,7 @@
<button
on:click={() => (
(shufflePlaylist = !shufflePlaylist),
playlistSettings.set({
playlistSettingsStore.set({
[playlist.playlistId]: { loop: loopPlaylist, shuffle: shufflePlaylist }
})
)}
materialious/src/routes/watch/[slug]/+page.ts
+4 -4
View File
@@ -10,12 +10,12 @@ import type { PlaylistPage } from '$lib/Api/model';
import { phaseDescription } from '$lib/misc';
import { error } from '@sveltejs/kit';
import { get } from 'svelte/store';
import { auth, playerProxyVideos, returnYtDislikes } from '../../../store';
import { authStore, playerProxyVideosStore, returnYtDislikesStore } from '../../../store';
export async function load({ params, url }) {
let video;
try {
video = await getVideo(params.slug, get(playerProxyVideos));
video = await getVideo(params.slug, get(playerProxyVideosStore));
} catch (errorMessage: any) {
error(500, errorMessage);
}
@@ -40,7 +40,7 @@ export async function load({ params, url }) {
let personalPlaylists: PlaylistPage[] | null;
if (get(auth)) {
if (get(authStore)) {
postHistory(video.videoId);
personalPlaylists = await getPersonalPlaylists();
} else {
@@ -62,7 +62,7 @@ export async function load({ params, url }) {
let returnYTDislikes;
try {
returnYTDislikes = get(returnYtDislikes) ? await getDislikes(params.slug) : null;
returnYTDislikes = get(returnYtDislikesStore) ? await getDislikes(params.slug) : null;
} catch {
returnYTDislikes = null;
}
materialious/src/store.ts
+25 -25
View File
@@ -3,52 +3,52 @@ import type { DataConnection } from 'peerjs';
import { persisted } from 'svelte-persisted-store';
import { writable, type Writable } from 'svelte/store';
export const returnYTDislikesInstance = persisted(
export const returnYTDislikesInstanceStore = persisted(
'returnYTDislikesInstance',
import.meta.env.VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE
);
export const darkMode: Writable<null | boolean> = persisted('darkMode', null);
export const themeColor: Writable<null | string> = persisted('themeColor', null);
export const darkModeStore: Writable<null | boolean> = persisted('darkMode', null);
export const themeColorStore: Writable<null | string> = persisted('themeColor', null);
export const activePage: Writable<string | null> = writable('home');
export const activePageStore: Writable<string | null> = writable('home');
export const playerAutoPlay = persisted('autoPlay', true);
export const playerAlwaysLoop = persisted('alwaysLoop', false);
export const playerProxyVideos = persisted('proxyVideos', false);
export const playerListenByDefault = persisted('listenByDefault', false);
export const playerSavePlaybackPosition = persisted('savePlaybackPosition', true);
export const playerDash = persisted('dashEnabled', false);
export const playerTheatreModeByDefault = persisted('theatreModeByDefault', false);
export const playerAutoplayNextByDefault = persisted('autoplayNextByDefault', false);
export const playerAutoPlayStore = persisted('autoPlay', true);
export const playerAlwaysLoopStore = persisted('alwaysLoop', false);
export const playerProxyVideosStore = persisted('proxyVideos', false);
export const playerListenByDefaultStore = persisted('listenByDefault', false);
export const playerSavePlaybackPositionStore = persisted('savePlaybackPosition', true);
export const playerDashStore = persisted('dashEnabled', false);
export const playerTheatreModeByDefaultStore = persisted('theatreModeByDefault', false);
export const playerAutoplayNextByDefaultStore = persisted('autoplayNextByDefault', false);
export const returnYtDislikes = persisted('returnYtDislikes', false);
export const returnYtDislikesStore = persisted('returnYtDislikes', false);
export const interfaceSearchSuggestions = persisted('searchSuggestions', true);
export const interfacePreviewVideoOnHover = persisted('previewVideoOnHover', true);
export const interfaceSearchSuggestionsStore = persisted('searchSuggestions', true);
export const interfacePreviewVideoOnHoverStore = persisted('previewVideoOnHover', true);
export const auth: Writable<null | { username: string; token: string; }> = persisted(
export const authStore: Writable<null | { username: string; token: string; }> = persisted(
'authToken',
null
);
export const sponsorBlock = persisted('sponsorBlock', true);
export const sponsorBlockUrl: Writable<string | null | undefined> = persisted(
export const sponsorBlockStore = persisted('sponsorBlock', true);
export const sponsorBlockUrlStore: Writable<string | null | undefined> = persisted(
'sponsorBlockUrl',
import.meta.env.VITE_DEFAULT_SPONSERBLOCK_INSTANCE
);
export const sponsorBlockCategories: Writable<string[]> = persisted('sponsorBlockCategories', []);
export const sponsorBlockCategoriesStore: Writable<string[]> = persisted('sponsorBlockCategories', []);
export const deArrowInstance = persisted(
export const deArrowInstanceStore = persisted(
'deArrowInstance',
import.meta.env.VITE_DEFAULT_DEARROW_INSTANCE
);
export const deArrowEnabled = persisted('deArrowEnabled', false);
export const deArrowThumbnailInstance = persisted(
export const deArrowEnabledStore = persisted('deArrowEnabled', false);
export const deArrowThumbnailInstanceStore = persisted(
'deArrowThumbnailInstance',
import.meta.env.VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE
);
export const syncPartyPeer: Writable<Peer | null> = writable(null);
export const syncPartyConnections: Writable<DataConnection[] | null> = writable();
export const syncPartyPeerStore: Writable<Peer | null> = writable(null);
export const syncPartyConnectionsStore: Writable<DataConnection[] | null> = writable();
export const playlistSettings: Writable<Record<string, { shuffle: boolean, loop: boolean; }>> = writable({});
export const playlistSettingsStore: Writable<Record<string, { shuffle: boolean, loop: boolean; }>> = writable({});