Initial commitHEADmain

1 files changed, 118 insertions, 0 deletions

diff --git a/pse-dashboard/src/components/SubscriptionEntry.vue b/pse-dashboard/src/components/SubscriptionEntry.vue
new file mode 100644
index 0000000..db3b45c
--- /dev/null
+++ b/pse-dashboard/src/components/SubscriptionEntry.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { useLogger } from '@/logger.js'
+import { LastUpdate, ProgressTime } from '@/components'
+
+const props = defineProps({
+    sub: {
+        type: Object,
+        default: undefined
+    }
+});
+
+defineEmits(['unsubscribe']);
+
+const { copiedPodcast, copiedPodcastError } = useLogger();
+
+// share or copy the url of the podcast to clipboard
+async function sharePodcast() {
+    const shareData = {
+        title: props.sub.title,
+        url: props.sub.url
+    };
+    
+    // share API
+    try {
+        await navigator.share(shareData); 
+        return;
+    } catch (err) {
+        console.error(err);
+    }
+
+    // clipboard API
+    try {
+        await navigator.clipboard.writeText(shareData.url)
+        copiedPodcast();
+        return;
+    } catch (err) {
+        console.error(err);
+    }
+
+    copiedPodcastError();
+}
+
+</script>
+<template>
+    <div class="card">
+        <!-- title and timestamp -->
+        <div
+            class="card-header d-flex gap-3 py-3"
+            data-bs-toggle="collapse"
+            :data-bs-target="'#e' + $.uid"
+        >
+            <!-- Podcast Icon -->
+            <i
+                class="fa fa-podcast rounded-circle flex-shring-0"
+                style="font-size: 32px"
+            />
+            
+            <div class="d-flex gap-2 w-100 justify-content-between">
+                <!-- Title -->
+                <div>
+                    <h6 class="mb-0">
+                        {{ sub.title || sub.url }}
+                    </h6>
+                </div>
+                <div class="text-nowrap">
+                    <!-- Timestamp -->
+                    <small class="opacity-50">
+                        <LastUpdate :unix="sub.timestamp * 1" />
+                    </small>
+
+                    <!-- Trash Button to unscubscribe from podcast -->
+                    <!-- opens modal and emits unsubscribe event -->
+                    <button
+                        class="btn mx-2 btn-danger"
+                        data-bs-toggle="modal"
+                        data-bs-target="#delete-subs"
+                        @click="$emit('unsubscribe', props.sub)"
+                    >
+                        <i class="fa fa-trash-can" />
+                    </button>
+
+                    <!-- Share Button (@click.stop should stops card to open but doesn't) -->
+                    <button
+                        class="btn ml-2 btn-secondary"
+                        @click="sharePodcast"
+                    >
+                        <i class="fa fa-share" />
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- episode list -->
+        <div
+            :id="'e' + $.uid"
+            class="collapse"
+            data-bs-parent="#episodes-accordion"
+        >
+            <div class="card-body">
+                <ol>
+                    <li
+                        v-for="(episode, index) in sub.episodes"
+                        :key="index"
+                    >
+                        {{ episode.title }}
+                        <span class="opacity-50 float-end">
+                            <ProgressTime :unix="episode.position" />/
+                            <ProgressTime :unix="episode.total" />
+                        </span>
+                    </li>
+                </ol>
+            </div>
+        </div>
+    </div>
+</template>
+<style scoped>
+</style>
+