Added support for custom return yt & sponsorskip instances

README.md

@@ -25,11 +25,11 @@ Modern material design for Invidious
 - Playlist support.
 - History deletion.
 - Load more for comments, history, subscriptions & search results.
-- Editing used instance for Return Dislikes & Sponsorblock.
 - Audio only mode.
 - PWA support.
 
 ## Previews
 ![Preview of player](./previews/player-preview.png)
 ![Preview of settings](./previews/setting-preview.png)
-![Preview of channel](./previews/channel-preview.png)
+![Preview of channel](./previews/channel-preview.png)
+![Preview of chapters](./previews/chapter-previews.png)

materialious/src/lib/Player.svelte

@@ -7,7 +7,7 @@
 	import { SponsorBlock, type Category } from 'sponsorblock-api';
 	import { onDestroy, onMount } from 'svelte';
 	import { get } from 'svelte/store';
-	import { sponsorBlock as sponsorBlockStore } from '../store';
+	import { sponsorBlock as sponsorBlockStore, sponsorBlockUrl } from '../store';
 
 	import type { MediaPlayerClass } from 'dashjs';
 	import {
@@ -66,7 +66,7 @@
 			const currentCategories = get(sponsorBlockCategories);
 
 			if (currentCategories.length > 0) {
-				sponsorBlock = new SponsorBlock('');
+				sponsorBlock = new SponsorBlock('', { baseURL: get(sponsorBlockUrl) });
 
 				try {
 					const segments = await sponsorBlock.getSegments(

materialious/src/routes/+layout.svelte

@@ -18,9 +18,11 @@
 		playerListenByDefault,
 		playerProxyVideos,
 		playerSavePlaybackPosition,
+		returnYTDislikesInstance,
 		returnYtDislikes,
 		sponsorBlock,
 		sponsorBlockCategories,
+		sponsorBlockUrl,
 		themeColor
 	} from '../store';
 
@@ -72,6 +74,9 @@
 
 	let notifications: Notification[] = [];
 
+	let sponsorBlockInstance = get(sponsorBlockUrl);
+	let returnYTInstance = get(returnYTDislikesInstance);
+
 	const pages = [
 		{
 			icon: 'home',
@@ -413,6 +418,18 @@
 	<div class="settings">
 		<h6>Return YT Dislikes</h6>
 
+		<form on:submit|preventDefault={() => returnYTDislikesInstance.set(returnYTInstance)}>
+			<nav>
+				<div class="field label border">
+					<input bind:value={returnYTInstance} name="returnyt-instance" type="text" />
+					<label for="returnyt-instance">Instance URL</label>
+				</div>
+				<button class="square round">
+					<i>done</i>
+				</button>
+			</nav>
+		</form>
+
 		<nav class="no-padding">
 			<div class="max">
 				<p>Enabled</p>
@@ -431,6 +448,18 @@
 	<div class="settings">
 		<h6>Sponsorblock</h6>
 
+		<form on:submit|preventDefault={() => sponsorBlockUrl.set(sponsorBlockInstance)}>
+			<nav>
+				<div class="field label border">
+					<input bind:value={sponsorBlockInstance} name="sponsorblock-instance" type="text" />
+					<label for="sponsorblock-instance">Instance URL</label>
+				</div>
+				<button class="square round">
+					<i>done</i>
+				</button>
+			</nav>
+		</form>
+
 		<nav class="no-padding">
 			<div class="max">
 				<p>Enabled</p>
@@ -517,4 +546,8 @@
 	.settings h6 {
 		margin: 1em 0 0.3em 0;
 	}
+
+	form {
+		margin: 1em 0;
+	}
 </style>

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

@@ -141,7 +141,7 @@
 			</article>
 
 			<div class="space"></div>
-			{#if data.comments && typeof data.comments.comments !== 'undefined' && data.comments.comments.length > 0}
+			{#if data.comments && data.comments.comments.length > 0}
 				<h6>{numberWithCommas(data.comments.commentCount)} comments</h6>
 				{#each data.comments.comments as comment}
 					<Comment {comment} videoId={data.video.videoId}></Comment>

materialious/src/routes/watch/[slug]/+page.ts

@@ -1,7 +1,7 @@
 import { amSubscribed, getComments, getDislikes, getVideo, postHistory } from '$lib/Api/index.js';
 import { phaseDescription } from '$lib/misc';
 import { get } from 'svelte/store';
-import { auth, playerProxyVideos, sponsorBlock } from '../../../store';
+import { auth, playerProxyVideos, returnYtDislikes } from '../../../store';
 
 export async function load({ params }) {
   const video = await getVideo(params.slug, get(playerProxyVideos));
@@ -11,7 +11,7 @@ export async function load({ params }) {
 
   return {
     video: video,
-    returnYTDislikes: get(sponsorBlock) ? await getDislikes(params.slug) : null,
+    returnYTDislikes: get(returnYtDislikes) ? await getDislikes(params.slug) : null,
     comments: video.liveNow ? null : await getComments(params.slug, { sort_by: "top", source: "youtube" }),
     subscribed: await amSubscribed(video.authorId),
     content: phaseDescription(video.description)

materialious/src/store.ts

@@ -22,4 +22,5 @@ export const interfaceSearchSuggestions = persisted("searchSuggestions", true);
 export const auth: Writable<null | { username: string, token: string; }> = persisted("authToken", null);
 
 export const sponsorBlock = persisted("sponsorBlock", true);
+export const sponsorBlockUrl = persisted("sponsorBlockUrl", import.meta.env.VITE_DEFAULT_SPONSERBLOCK_INSTANCE);
 export const sponsorBlockCategories: Writable<string[]> = persisted("sponsorBlockCategories", []);