initial commit

2023-06-30 16:22:08 +02:00
commit 78f3961b11
39 changed files with 5136 additions and 0 deletions
--- a/src/routes/streams/[stream_id]/MetadataEditor.svelte
+++ b/src/routes/streams/[stream_id]/MetadataEditor.svelte
@@ -0,0 +1,102 @@
+<script>
+    import { page } from '$app/stores';
+
+    export let original;
+
+    let tagList = [];
+    let tagMap = new Map();
+
+    tagList = [
+        'acoustic',
+        'electronic',
+        'orchestral',
+        'rock',
+        'pop',
+        'metal',
+        'aggressive',
+        'folk',
+        'jazzy',
+        'dance.music',
+        'untz',
+        'breakbeats',
+        'electronica',
+        'chiptune',
+        'left.field',
+        'denpa',
+        'vocaloid',
+        'funky',
+        'lush',
+        'noisy',
+        'psychedelic',
+        'dark',
+        'calm',
+        'moody',
+        'uplifting'
+    ];
+
+    // Create a mapping of tags and their checked status
+    let reloadTags = (original) => {
+        tagList.forEach((tag) => {
+            tagMap.set(tag, original.tags.includes(tag));
+        });
+    };
+
+    $: reloadTags(original);
+</script>
+
+{#key $page.url.pathname}
+    <form method="POST">
+        <br />
+        <label>
+            <p>Title:</p>
+            <input type="text" name="title" bind:value={original.title} />
+        </label>
+        <br />
+
+        <label>
+            <p>Description:</p>
+            <textarea
+                style="min-width:400px;min-height:100px"
+                name="description"
+                bind:value={original.description}
+            />
+        </label>
+        <br />
+        <label>
+            <p>Tags:</p>
+            <div class="checkboxContainer">
+                {#each tagList as tag}
+                    <label>
+                        <input type="checkbox" name="tags" value={tag} checked={tagMap.get(tag)} />
+                        {tag}
+                    </label>
+                {/each}
+            </div>
+        </label>
+        <br />
+
+        <button type="submit">Submit</button>
+    </form>
+{/key}
+
+<style>
+    form {
+        margin-left: 10px;
+    }
+
+    label {
+        display: flex;
+        align-items: center;
+    }
+
+    label > p {
+        margin-right: 5px;
+    }
+
+    .checkboxContainer {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 1px;
+        max-width: 50%;
+    }
+</style>