Added more methods of history

materialious/src/lib/api/backend/history.ts

@@ -118,6 +118,16 @@ export async function deleteWatchHistoryBackend() {
 	await fetch('/api/user/history', { method: 'DELETE' });
 }
 
+export async function deleteWatchHistoryItemBackend(videoId: string) {
+	await sodium.ready;
+	const rawKey = await getRawKey();
+	if (!rawKey) return;
+
+	const videoHash = await getSecureHash(videoId, rawKey);
+
+	await fetch(`/api/user/history/${videoHash}`, { method: 'DELETE' });
+}
+
 export async function saveWatchHistoryBackend(video: VideoPlay, progress: number = 0) {
 	await sodium.ready;
 	const rawKey = await getRawKey();

materialious/src/lib/api/index.ts

@@ -74,6 +74,7 @@ import {
 } from './invidious/playlist';
 import {
 	deleteWatchHistoryBackend,
+	deleteWatchHistoryItemBackend,
 	getVideoWatchHistoryBackend,
 	getWatchHistoryBackend,
 	saveWatchHistoryBackend,
@@ -343,6 +344,14 @@ export async function deleteWatchHistory() {
 	await localDb.watchHistory.clear();
 }
 
+export async function deleteWatchHistoryItem(videoId: string) {
+	if (isOwnBackend()?.internalAuth && get(rawMasterKeyStore)) {
+		return deleteWatchHistoryItemBackend(videoId);
+	}
+
+	await localDb.watchHistory.delete({ videoId });
+}
+
 export async function updateWatchHistory(
 	videoId: string,
 	progress: number,

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { _ } from '$lib/i18n';
-	import { removePlaylistVideo } from '$lib/api';
-	import { invidiousAuthStore, feedLastItemId, isAndroidTvStore } from '$lib/store';
+	import { feedLastItemId, isAndroidTvStore } from '$lib/store';
 	import ContentColumn from '$lib/components/layout/ContentColumn.svelte';
 	import { onMount } from 'svelte';
 	import Thumbnail from '$lib/components/thumbnail/VideoThumbnail.svelte';
@@ -18,21 +17,10 @@
 	interface Props {
 		items?: FeedItems;
 		playlistId?: string;
-		playlistAuthor?: string;
 		classes?: string;
 	}
 
-	let {
-		items = [],
-		playlistId = '',
-		playlistAuthor = '',
-		classes = 'page right active'
-	}: Props = $props();
-
-	async function removePlaylistItem(indexId: string) {
-		if (!playlistId) return;
-		await removePlaylistVideo(playlistId, indexId);
-	}
+	let { items = [], playlistId = '', classes = 'page right active' }: Props = $props();
 
 	onMount(async () => {
 		if (!$feedLastItemId) return;
@@ -99,17 +87,6 @@
 							{#key item.videoId}
 								<Thumbnail video={item} {playlistId} />
 							{/key}
-							{#if $invidiousAuthStore && decodeURIComponent($invidiousAuthStore.username) === playlistAuthor && 'indexId' in item}
-								<div class="right-align" style="margin: 1em .5em;">
-									<button
-										onclick={async () => removePlaylistItem(item.indexId)}
-										class="tertiary circle small"
-									>
-										<i>delete</i>
-										<div class="tooltip">{$_('delete')}</div>
-									</button>
-								</div>
-							{/if}
 						{:else if item.type === 'channel'}
 							<ChannelThumbnail channel={item} />
 						{:else if item.type === 'playlist'}

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

@@ -97,9 +97,5 @@
 <div class="space"></div>
 
 {#if data.playlist.videos}
-	<ItemsList
-		items={data.playlist.videos}
-		playlistAuthor={data.playlist.info.author}
-		playlistId={data.playlist.info.playlistId}
-	/>
+	<ItemsList items={data.playlist.videos} playlistId={data.playlist.info.playlistId} />
 {/if}