From 6caba40284012b0489307a5c4c36140bdb6a55be Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Thu, 9 May 2024 11:37:53 +1200
Subject: [PATCH] Added removing playlist from playlist screen

---
 materialious/src/lib/VideoList.svelte         | 23 +++++++++++++++++++
 materialious/src/lib/i18n/locales/en.json     |  1 +
 .../src/routes/playlist/[slug]/+page.svelte   | 17 ++++++++------
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/materialious/src/lib/VideoList.svelte b/materialious/src/lib/VideoList.svelte
index d2d50f9d..f84bd895 100644
--- a/materialious/src/lib/VideoList.svelte
+++ b/materialious/src/lib/VideoList.svelte
@@ -1,12 +1,24 @@
 <script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import { get } from 'svelte/store';
+	import { authStore } from '../store';
+	import { removePlaylistVideo } from './Api';
 	import type { Notification, PlaylistPageVideo, Video, VideoBase } from './Api/model';
 	import Thumbnail from './Thumbnail.svelte';
 
 	export let videos: VideoBase[] | Video[] | Notification[] | PlaylistPageVideo[] = [];
 	export let oneItemPerRow: boolean = false;
 	export let playlistId: string = '';
+	export let playlistAuthor: string = '';
 
 	let hiddenVideos: string[] = [];
+	let auth = get(authStore);
+
+	async function removePlaylistItem(indexId: string, videoId: string) {
+		if (!playlistId) return;
+		await removePlaylistVideo(playlistId, indexId);
+		hiddenVideos = [...hiddenVideos, videoId];
+	}
 </script>
 
 <div class="page right active">
@@ -21,6 +33,17 @@
 							{video}
 							{playlistId}
 						/>
+						{#if auth && decodeURIComponent(auth.username) === playlistAuthor && 'indexId' in video}
+							<div class="right-align" style="margin: 1em .5em;">
+								<button
+									on:click={async () => removePlaylistItem(video.indexId, video.videoId)}
+									class="tertiary circle small"
+								>
+									<i>delete</i>
+									<div class="tooltip">{$_('delete')}</div>
+								</button>
+							</div>
+						{/if}
 					</article>
 				</div>
 			{/if}
diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json
index bb1a1542..9f25ce92 100644
--- a/materialious/src/lib/i18n/locales/en.json
+++ b/materialious/src/lib/i18n/locales/en.json
@@ -8,6 +8,7 @@
 	"create": "Create",
 	"title": "Title",
 	"searchPlaceholder": "Search...",
+	"delete": "Delete",
 	"deleteAllHistory": "Delete all history",
 	"skipping": "Skipping",
 	"replies": "replies",
diff --git a/materialious/src/routes/playlist/[slug]/+page.svelte b/materialious/src/routes/playlist/[slug]/+page.svelte
index 5a5d3935..578af97f 100644
--- a/materialious/src/routes/playlist/[slug]/+page.svelte
+++ b/materialious/src/routes/playlist/[slug]/+page.svelte
@@ -3,6 +3,7 @@
 	import type { PlaylistPageVideo } from '$lib/Api/model.js';
 	import VideoList from '$lib/VideoList.svelte';
 	import { cleanNumber, unsafeRandomItem } from '$lib/misc.js';
+	import { Capacitor } from '@capacitor/core';
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { activePageStore, playlistSettingsStore } from '../../../store';
@@ -79,12 +80,14 @@
 		<i>share</i>
 		<span>{$_('player.share.title')}</span>
 		<menu class="no-wrap">
-			<a
-				href="#share"
-				on:click={async () => {
-					await navigator.clipboard.writeText(location.href);
-				}}>{$_('player.share.materialiousLink')}</a
-			>
+			{#if !Capacitor.isNativePlatform()}
+				<a
+					href="#share"
+					on:click={async () => {
+						await navigator.clipboard.writeText(location.href);
+					}}>{$_('player.share.materialiousLink')}</a
+				>
+			{/if}
 			<a
 				href="#share"
 				on:click={async () => {
@@ -98,5 +101,5 @@
 </article>
 
 {#if videos}
-	<VideoList {videos} playlistId={data.playlist.playlistId} />
+	<VideoList {videos} playlistAuthor={data.playlist.author} playlistId={data.playlist.playlistId} />
 {/if}