Added history deletion

README.md

@@ -15,7 +15,7 @@ Modern material design for Invidious
 - Custom colour themes.
 - Integrates with Invidious subscriptions, watch history & more.
 - Live stream support.
-- Dash support (WIP).
+- Dash support.
 - Chapters.
 - Audio only mode.
 
@@ -23,7 +23,6 @@ Modern material design for Invidious
 - Complete channel view.
 - Add different search filters.
 - Playlist support.
-- History deletion.
 - PWA support.
 
 ## Previews

materialious/src/lib/Api/index.ts

@@ -124,6 +124,18 @@ export async function getHistory(page: number = 1): Promise<string[]> {
   return await resp.json();
 }
 
+export async function deleteHistory(videoId: string | undefined = undefined) {
+  let url = '/api/v1/auth/history';
+  if (typeof videoId !== 'undefined') {
+    url += `/${videoId}`;
+  }
+
+  await fetch(buildPath(url), {
+    method: 'DELETE',
+    ...buildAuthHeaders()
+  });
+}
+
 export async function postHistory(videoId: string) {
   await fetch(buildPath(`auth/history/${videoId}`), {
     method: 'POST',

materialious/src/lib/Player.svelte

@@ -162,6 +162,10 @@
 	});
 </script>
 
+{#if audioMode}
+	<div style="margin-top: 5em;"></div>
+{/if}
+
 <media-player
 	bind:this={player}
 	autoPlay={$playerAutoPlay}

materialious/src/routes/history/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getHistory, getVideo } from '$lib/Api';
+	import { deleteHistory, getHistory, getVideo } from '$lib/Api';
 	import type { VideoPlay } from '$lib/Api/model';
 	import VideoList from '$lib/VideoList.svelte';
 	import { onDestroy, onMount } from 'svelte';
@@ -19,7 +19,9 @@
 			promises.push(getVideo(videoId));
 		}
 
-		const loadedHistory = await Promise.all(promises);
+		const loadedHistory = (await Promise.all(promises)).sort((a: VideoPlay, b: VideoPlay) => {
+			return a.published > b.published ? -1 : 1;
+		});
 		history = [...history, ...loadedHistory];
 	}
 
@@ -43,4 +45,16 @@
 	});
 </script>
 
+<div style="display: flex;margin-top: 1em;" class="space">
+	<button
+		on:click={async () => {
+			await deleteHistory();
+			history = [];
+		}}
+	>
+		<i>delete_sweep</i>
+		<span>Delete all history</span>
+	</button>
+</div>
+
 <VideoList videos={history} />