automatically load presets from the YTPTube instance.

src/popup.js

@@ -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
+};