Something went wrong. Try again.
a simple but full-featured web player for OpenSubsonic music servers (Navidrome, Gonic, Ampache, etc) devins.page/tinysub
svelte typescript javascript subsonic gonic navidrome
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118<script lang="ts">import { api } from "../api/client.svelte.js";import { t } from "../languages/translate.svelte.js";import { lib, loadRadioStations } from "../library/store.svelte.js";import { ui } from "../ui/state.svelte.js";import ConfirmDeleteModal from "./ConfirmDeleteModal.svelte";import Modal from "./Modal.svelte";
let isSaving = $state(false);let isDeleting = $state(false);const isEditing = $derived(ui.stationForm?.mode === "edit");
async function doSave() { const form = ui.stationForm; if (!form) return; isSaving = true; const name = form.name; const streamUrl = form.streamUrl; const homepageUrl = form.homepageUrl || undefined; try { if (form.mode === "edit") { const id = form.id ?? ""; await api.updateInternetRadioStation(id, streamUrl, name, homepageUrl); const station = lib.radioStations.find((item) => item.id === id); if (station) { station.name = name; station.streamUrl = streamUrl; station.homePageUrl = homepageUrl; } } else { await api.createInternetRadioStation(streamUrl, name, homepageUrl); await loadRadioStations(); } ui.stationForm = null; } catch (err) { console.error("failed to save station:", err); alert(t("message.failed_save")); } finally { isSaving = false; }}
async function doDelete() { if (!ui.confirmDeleteStation) return; isDeleting = true; try { await api.deleteInternetRadioStation(ui.confirmDeleteStation.id); await loadRadioStations(); ui.confirmDeleteStation = null; } catch (err) { console.error("failed to delete station:", err); alert(t("message.failed_delete")); } finally { isDeleting = false; }}</script>
<Modal open={!!ui.stationForm} onclose={() => (ui.stationForm = null)} title={isEditing ? t("action.update_station") : t("action.new_station")}> {#if ui.stationForm} <section class="modal-section"> <div class="field"> <label for="station-name">{t("common.name")}</label> <input id="station-name" type="text" bind:value={ui.stationForm.name}> </div> <div class="field"> <label for="station-stream">{t("action.stream_url")}</label> <input id="station-stream" type="url" bind:value={ui.stationForm.streamUrl} > </div> <div class="field"> <label for="station-homepage">{t("action.homepage_url")}</label> <input id="station-homepage" type="url" bind:value={ui.stationForm.homepageUrl} > </div> <div class="actions"> <button class="native" type="button" onclick={doSave} disabled={isSaving || !ui.stationForm.name.trim() || !ui.stationForm.streamUrl.trim()} > {isSaving ? t("common.busy") : isEditing ? t("common.update") : t("common.create")} </button> </div> </section> {/if}</Modal>
{#if ui.confirmDeleteStation} <ConfirmDeleteModal open={true} onclose={() => (ui.confirmDeleteStation = null)} title={t("action.delete_station")} message={t("message.delete_confirm", { name: ui.confirmDeleteStation.name, })} busy={isDeleting} onconfirm={doDelete} />{/if}