Added support for disabling sponsorblock & return yt dislikes

README.md

@@ -26,7 +26,6 @@ Modern material design for Invidious
 - History deletion.
 - Load more for comments, history, subscriptions & search results.
 - Editing used instance for Return Dislikes & Sponsorblock.
-- Allow disabling Return Dislikes.
 - Audio only mode.
 - PWA support.
 

materialious/src/lib/Player.svelte

@@ -7,6 +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 type { MediaPlayerClass } from 'dashjs';
 	import {
@@ -61,30 +62,32 @@
 			]
 		});
 
-		const currentCategories = get(sponsorBlockCategories);
+		if (get(sponsorBlockStore)) {
+			const currentCategories = get(sponsorBlockCategories);
 
-		if (currentCategories.length > 0) {
-			sponsorBlock = new SponsorBlock('');
+			if (currentCategories.length > 0) {
+				sponsorBlock = new SponsorBlock('');
 
-			try {
-				const segments = await sponsorBlock.getSegments(
-					data.video.videoId,
-					get(sponsorBlockCategories) as Category[]
-				);
+				try {
+					const segments = await sponsorBlock.getSegments(
+						data.video.videoId,
+						get(sponsorBlockCategories) as Category[]
+					);
 
-				player.on('timeupdate', (event: PlyrEvent) => {
-					segments.forEach((segment) => {
-						if (
-							event.detail.plyr.currentTime >= segment.startTime &&
-							event.detail.plyr.currentTime <= segment.endTime
-						) {
-							categoryBeingSkipped = segment.category;
-							event.detail.plyr.currentTime = segment.endTime + 1;
-							ui('#sponsorblock-alert');
-						}
+					player.on('timeupdate', (event: PlyrEvent) => {
+						segments.forEach((segment) => {
+							if (
+								event.detail.plyr.currentTime >= segment.startTime &&
+								event.detail.plyr.currentTime <= segment.endTime
+							) {
+								categoryBeingSkipped = segment.category;
+								event.detail.plyr.currentTime = segment.endTime + 1;
+								ui('#sponsorblock-alert');
+							}
+						});
 					});
-				});
-			} catch {}
+				} catch {}
+			}
 		}
 
 		player.on('loadeddata', (event: PlyrEvent) => {

materialious/src/routes/+layout.svelte

@@ -18,6 +18,8 @@
 		playerListenByDefault,
 		playerProxyVideos,
 		playerSavePlaybackPosition,
+		returnYtDislikes,
+		sponsorBlock,
 		sponsorBlockCategories,
 		themeColor
 	} from '../store';
@@ -408,9 +410,41 @@
 		</div>
 	</div>
 
+	<div class="settings">
+		<h6>Return YT Dislikes</h6>
+
+		<nav class="no-padding">
+			<div class="max">
+				<p>Enabled</p>
+			</div>
+			<label class="switch">
+				<input
+					bind:checked={$returnYtDislikes}
+					on:click={() => returnYtDislikes.set(!get(returnYtDislikes))}
+					type="checkbox"
+				/>
+				<span></span>
+			</label>
+		</nav>
+	</div>
+
 	<div class="settings">
 		<h6>Sponsorblock</h6>
 
+		<nav class="no-padding">
+			<div class="max">
+				<p>Enabled</p>
+			</div>
+			<label class="switch">
+				<input
+					bind:checked={$sponsorBlock}
+					on:click={() => sponsorBlock.set(!get(sponsorBlock))}
+					type="checkbox"
+				/>
+				<span></span>
+			</label>
+		</nav>
+
 		{#each sponsorCategories as sponsor}
 			<div class="field middle-align no-margin">
 				<nav class="no-padding">

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

@@ -5,13 +5,10 @@
 	import Player from '$lib/Player.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
 	import { cleanNumber, numberWithCommas } from '$lib/misc.js';
-	import type Plyr from 'plyr';
 	import { activePage } from '../../../store.js';
 
 	export let data;
 
-	let player: Plyr | undefined;
-
 	activePage.set(null);
 
 	async function toggleSubscribed() {
@@ -63,16 +60,18 @@
 					{/if}
 				</button>
 				<div class="max"></div>
-				<nav class="no-space m l">
-					<button style="cursor: default;" class="border left-round">
-						<i class="small">thumb_up</i>
-						<span>{cleanNumber(data.returnYTDislikes.likes)}</span>
-					</button>
-					<button style="cursor: default;" class="border right-round">
-						<i class="small">thumb_down_alt</i>
-						<span>{cleanNumber(data.returnYTDislikes.dislikes)}</span>
-					</button>
-				</nav>
+				{#if data.returnYTDislikes}
+					<nav class="no-space m l">
+						<button style="cursor: default;" class="border left-round">
+							<i class="small">thumb_up</i>
+							<span>{cleanNumber(data.returnYTDislikes.likes)}</span>
+						</button>
+						<button style="cursor: default;" class="border right-round">
+							<i class="small">thumb_down_alt</i>
+							<span>{cleanNumber(data.returnYTDislikes.dislikes)}</span>
+						</button>
+					</nav>
+				{/if}
 				<button class="border m l" data-ui="#share"
 					><i>share</i> Share
 					<menu class="left no-wrap" id="share" data-ui="#share">
@@ -108,16 +107,18 @@
 				>
 			</nav>
 
-			<nav class="no-space s">
-				<button style="cursor: default;" class="border left-round">
-					<i class="small">thumb_up</i>
-					<span>{cleanNumber(data.returnYTDislikes.likes)}</span>
-				</button>
-				<button style="cursor: default;" class="border right-round">
-					<i class="small">thumb_down_alt</i>
-					<span>{cleanNumber(data.returnYTDislikes.dislikes)}</span>
-				</button>
-			</nav>
+			{#if data.returnYTDislikes}
+				<nav class="no-space s">
+					<button style="cursor: default;" class="border left-round">
+						<i class="small">thumb_up</i>
+						<span>{cleanNumber(data.returnYTDislikes.likes)}</span>
+					</button>
+					<button style="cursor: default;" class="border right-round">
+						<i class="small">thumb_down_alt</i>
+						<span>{cleanNumber(data.returnYTDislikes.dislikes)}</span>
+					</button>
+				</nav>
+			{/if}
 
 			<article class="medium scroll">
 				<p class="bold">

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

@@ -1,16 +1,17 @@
 import { amSubscribed, getComments, getDislikes, getVideo, postHistory } from '$lib/Api/index.js';
 import { phaseDescription } from '$lib/misc';
 import { get } from 'svelte/store';
-import { auth, playerProxyVideos } from '../../../store';
+import { auth, playerProxyVideos, sponsorBlock } from '../../../store';
 
 export async function load({ params }) {
   const video = await getVideo(params.slug, get(playerProxyVideos));
   if (get(auth)) {
     postHistory(video.videoId);
   }
+
   return {
     video: video,
-    returnYTDislikes: await getDislikes(params.slug),
+    returnYTDislikes: get(sponsorBlock) ? 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

@@ -15,8 +15,11 @@ export const playerListenByDefault = persisted("listenByDefault", false);
 export const playerSavePlaybackPosition = persisted("savePlaybackPosition", true);
 export const playerDash = persisted("dashEnabled", false);
 
+export const returnYtDislikes = persisted("returnYtDislikes", true);
+
 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 sponsorBlockCategories: Writable<string[]> = persisted("sponsorBlockCategories", []);