automatically load presets from the YTPTube instance.

2025-03-10 01:40:14 +03:00
Parent 539e9268b1
@@ -2,9 +2,8 @@

 const str_keys = ["instance_url", "preset", "template", "folder", "username", "password"]

-const $ = s => document.querySelector(s)
-
 if (typeof chrome === 'undefined') {
+    // noinspection JSUnusedLocalSymbols
    let chrome = browser
 }

@@ -25,7 +24,7 @@ document.getElementById("ytptube_options").addEventListener("submit", (e) => {

    let showContextMenu = document.querySelector("#showContextMenu").checked;

-    let data = {}
+    let data = {presets: {presets: ['default'], last_updated: 0}}

    str_keys.forEach(key => data[key] = document.querySelector(`#${key}`).value)
    data["showContextMenu"] = showContextMenu
@@ -11,6 +11,10 @@
            margin: 1em;
        }

+        body {
+            font-size: 100%;
+        }
+
        @media (prefers-color-scheme: dark) {
            body {
                color: white;
@@ -35,10 +39,17 @@
 <body>

 <form id="ytptube_popup" class="pure-form pure-form-stacked">
+    <div class="pure-control-group">
+        <label for="preset">Preset</label>
+        <select id="preset" class="pure-input-1" style="padding-top:0;padding-bottom:0">
+            <option value="default">default</option>
+        </select>
+        <span class="pure-form-message">Select preset to use with the URL.</span>
+    </div>
    <div class="pure-control-group">
        <label for="user_url">URL:</label>
        <input id="user_url" class="pure-input-1" type="text" placeholder="https://..">
-        <span class="pure-form-message">The URL to send to YTPTube instance</span><br>
+        <span class="pure-form-message">The URL to send to YTPTube instance</span>
    </div>
    <div class="pure-control-group">
        <button class="pure-button pure-input-1 pure-button-primary" type="submit">Send to YTPTube</button>
@@ -6,6 +6,11 @@ if (typeof chrome === 'undefined') {
    let chrome = browser
 }

+const getOption = async (key, default_data) => {
+    let item = await chrome.storage.sync.get(key);
+    return item[key] ?? default_data;
+}
+
 const notify = message => chrome.notifications.create({
    "type": "basic",
    "iconUrl": chrome.runtime.getURL("icons/icon-128.png"),
@@ -34,6 +39,37 @@ addEventListener('DOMContentLoaded', async _ => {
    }

    $('#user_url').value = url || ''
+
+    const defaultPreset = await getOption("preset")
+
+    const cache = await getOption('presets', {
+        presets: [],
+        last_updated: 0
+    })
+
+    if (Date.now() - cache.last_updated > 1000 * 60 * 60) {
+        cache.presets = await getPresets()
+        cache.last_updated = Date.now()
+        await chrome.storage.sync.set({presets: cache})
+    }
+
+    const s = $('#preset')
+
+    // -- remove existing options
+    while (s.firstChild) {
+        s.removeChild(s.lastChild);
+    }
+
+    cache.presets.forEach(p => {
+        let option = document.createElement('option');
+        option.value = p;
+        option.text = p;
+        // -- set the default preset
+        if (p === defaultPreset) {
+            option.selected = true;
+        }
+        s.appendChild(option);
+    })
 })

 $('#go-to-options').addEventListener('click', function () {
@@ -42,4 +78,38 @@ $('#go-to-options').addEventListener('click', function () {
    } else {
        window.open(chrome.runtime.getURL('options.html'));
    }
-});
+});
+
+$('#preset').addEventListener('change', async e => await chrome.storage.sync.set({preset: e.target.value}))
+
+const getPresets = async () => {
+    let presets = []
+
+    const instanceUrl = await getOption("instance_url");
+    if (!instanceUrl) {
+        presets.push('YTPTube instance url not configured.');
+        return presets
+    }
+
+    let headers = {};
+
+    const auth_username = await getOption('username');
+    const auth_password = await getOption('password');
+    if (auth_username && auth_password) {
+        headers['Authorization'] = 'Basic ' + btoa(`${auth_username}:${auth_password}`);
+    }
+
+    const url = new URL(instanceUrl);
+    url.pathname = '/api/presets';
+    url.search = 'filter=name';
+
+    const req = await fetch(url, {method: 'GET', headers: {...headers, 'Accept': 'application/json'}});
+    if (200 !== req.status) {
+        presets.push('Error fetching presets from YTPTube.');
+        return presets
+    }
+
+    (await req.json()).forEach(preset => presets.push(preset.name))
+
+    return presets
+};