133 lines
4.0 KiB
Svelte
133 lines
4.0 KiB
Svelte
<script>
|
|
import { intros, member } from './store.ts';
|
|
import { member_can, Permission } from './permissions.ts';
|
|
import { onMount } from 'svelte';
|
|
import { uploadIntro } from './api.js';
|
|
|
|
let enteredUrl = '';
|
|
let enteredTitle = '';
|
|
let selectedFile = null;
|
|
let selectedGuild = null;
|
|
let canDownloadAny = false;
|
|
let downloadPromise = null;
|
|
let uploadPromise = null;
|
|
let allowedGuildList = [];
|
|
|
|
$: allowedGuildList = $member.guilds
|
|
.filter((guild) => member_can(guild.permissions, Permission.CanDownload))
|
|
.map((guild) => guild);
|
|
|
|
$: canDownloadAny = allowedGuildList.length > 0;
|
|
|
|
const download = () => {
|
|
if (!!selectedGuild) {
|
|
downloadPromise = (async () => {
|
|
await intros.addIntro(selectedGuild.id, enteredUrl, enteredTitle, $member.token);
|
|
await intros.fetchIntros($member.guilds);
|
|
})();
|
|
} else {
|
|
|
|
}
|
|
};
|
|
|
|
const upload = () => {
|
|
// TODO: limit to 1 file
|
|
if (!!selectedGuild) {
|
|
uploadPromise = (async () => {
|
|
await uploadIntro(selectedGuild.id, enteredTitle, selectedFile[0], $member.token);
|
|
await intros.fetchIntros($member.guilds);
|
|
})();
|
|
} else {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if canDownloadAny}
|
|
<div id="cardContent">
|
|
<div>
|
|
<h3>Download New Intro</h3>
|
|
{#if !!downloadPromise}
|
|
{#await downloadPromise}
|
|
<p>downloading...</p>
|
|
{:then result}
|
|
<p>Downloaded</p>
|
|
<button on:click={() => {downloadPromise = null}}>Add another</button>
|
|
{:catch err}
|
|
<p style='color: red'>{err}</p>
|
|
<button on:click={() => {downloadPromise = null}}>Ok</button>
|
|
{/await}
|
|
{:else}
|
|
<select bind:value={selectedGuild}>
|
|
{#each allowedGuildList as guild}
|
|
<option value={guild}>{guild.name}</option>
|
|
{/each}
|
|
</select>
|
|
<input bind:value={enteredTitle} placeholder='enter intro title'>
|
|
<input bind:value={enteredUrl} placeholder='enter video url'>
|
|
<button on:click={download}>Download</button>
|
|
{/if}
|
|
</div>
|
|
<div>
|
|
<h3>Upload New Intro</h3>
|
|
{#if !!uploadPromise}
|
|
{#await uploadPromise}
|
|
<p>uploading...</p>
|
|
{:then result}
|
|
<p>Uploaded</p>
|
|
<button on:click={() => {uploadPromise = null}}>Add another</button>
|
|
{:catch err}
|
|
<p style='color: red'>{err}</p>
|
|
<button on:click={() => {uploadPromise = null}}>Ok</button>
|
|
{/await}
|
|
{:else}
|
|
<select bind:value={selectedGuild}>
|
|
{#each allowedGuildList as guild}
|
|
<option value={guild}>{guild.name}</option>
|
|
{/each}
|
|
</select>
|
|
<input bind:value={enteredTitle} placeholder='enter intro title'>
|
|
<input type="file" accept="audio/*, video/*" bind:files={selectedFile}>
|
|
<button on:click={upload}>Upload</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
div {
|
|
display: flex;
|
|
width: 85%;
|
|
height: 85%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #2a2a4a;
|
|
padding: 1.5em;
|
|
box-shadow: 1px 3px 4px 1px #1f1f36;
|
|
margin: 0.5em;
|
|
}
|
|
|
|
h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
input, button {
|
|
margin: 0.5em;
|
|
}
|
|
|
|
input {
|
|
border-style: solid;
|
|
border-color: #323259;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: lightgrey;
|
|
background-image: linear-gradient(0deg, #23233d, #1f1f36);
|
|
}
|
|
|
|
input:focus-visible {
|
|
outline: 2px solid #393963;
|
|
}
|
|
|
|
</style>
|