jellyfin-smart-playlist/Jellyfin.Plugin.SmartPlaylist/Pages/smartPlaylists.js

var PLAYLISTS = [
    {
        Id: 'My New Smartplaylist',
        Name: 'My New Smartplaylist',
        Program: '(is-favourite)',
        SortProgram: '(begin *items*)',
        Playlists: [],
        Enabled: true,
    }
];
var USERS = [];

function fillForm(playlist, users) {
    const editName = document.querySelector('#SmartplaylistEditName');
    const editProgram = document.querySelector('#SmartplaylistEditProgram');
    const editSortProgram = document.querySelector('#SmartplaylistEditSortProgram');
    const editUsers = document.querySelector('#SmartplaylistEditUsers');
    const editEnabled = document.querySelector('#SmartplaylistEditEnabled');
    editName.value = playlist.Name;
    editProgram.value = playlist.Program;
    editSortProgram.value = playlist.SortProgram;
    editUsers.innerHTML = '';

    var added_users = []
    for (const p of playlist.Playlists) {
        var o = document.createElement('option');
        o.value = btoa(JSON.stringify(p));
        o.innerHTML = users.filter(u => u.Id == p.UserId).map(u => u.Name)[0];
        o.setAttribute('selected', 'selected');
        editUsers.appendChild(o);
        added_users.push(p.UserId);
    }
    for (const u of users) {
        if (added_users.includes(u.Id)) {
            continue;
        }
        var o = document.createElement('option');
        o.value = btoa(JSON.stringify({
            'PlaylistId': '00000000000000000000000000000000',
            'UserId': u.Id,
        }));
        o.innerHTML = u.Name;
        editUsers.appendChild(o);
    }
    editEnabled.checked = playlist.Enabled;
}

function fillPlaylistSelect(playlists) {
    const selection = document.querySelector('#SmartplaylistSelection');
    selection.innerHTML = '';
    var o = document.createElement('option');
    o.value = null;
    o.innerHTML = 'Create new playlist ...';
    selection.appendChild(o);
    for (const i of playlists.slice(1)) {
        var o = document.createElement('option');
        o.value = i.Id;
        o.innerHTML = i.Name;
        selection.appendChild(o);
    }
}

function jsonFromForm() {
        const editName = document.querySelector('#SmartplaylistEditName');
        const editProgram = document.querySelector('#SmartplaylistEditProgram');
        const editSortProgram = document.querySelector('#SmartplaylistEditSortProgram');
        const editUsers = document.querySelector('#SmartplaylistEditUsers');
        const editEnabled = document.querySelector('#SmartplaylistEditEnabled');
        return {
            Id: editName.value,
            Name: editName.value,
            Program: editProgram.value,
            SortProgram: editSortProgram.value,
            Playlists: Array.from(editUsers.options).filter((x) => x.selected).map(x => JSON.parse(atob(x.value))),
            Enabled: editEnabled.checked,
        };
}

ApiClient.getSmartPlaylists = function () {
    const url = ApiClient.getUrl('SmartPlaylist');
    return this.ajax({
        type: 'GET',
        url: url,
        dataType: 'json',
    });
}

ApiClient.setSmartPlaylist = function (p) {
    const url = ApiClient.getUrl('SmartPlaylist');
    return this.ajax({
        type: 'POST',
        url: url,
        dataType: 'json',
        contentType: 'application/json; charset=UTF-8',
        data: JSON.stringify(p),
    });
}

function initial_load(selectedId) {
    Dashboard.showLoadingMsg();
    ApiClient.getSmartPlaylists().then(function (playlists) {
        PLAYLISTS = [PLAYLISTS[0]].concat(playlists);
        ApiClient.getUsers().then(function (users) {
            USERS = users;
            const selection = document.querySelector('#SmartplaylistSelection');
            fillPlaylistSelect(PLAYLISTS);
            if (selectedId === null) {
                selection.selectedIndex = 0;
            } else {
                selection.selectedIndex = PLAYLISTS.map(x => x.Id).indexOf(selectedId);
            }
            fillForm(PLAYLISTS[selection.selectedIndex], USERS);
            Dashboard.hideLoadingMsg();
        });
    });
}

document.querySelector('#SmartPlaylistConfigPage')
    .addEventListener('viewshow', function() {
        initial_load(null);
    });
document.querySelector('#SmartPlaylistConfigPage')
    .addEventListener('pageshow', function() {
        initial_load(null);
    });

document.querySelector('#SmartplaylistSelection')
    .addEventListener('change', function() {
        const selection = document.querySelector('#SmartplaylistSelection');
        fillForm(PLAYLISTS[selection.selectedIndex], USERS);
    });

document.querySelector('#SmartPlaylistConfigForm')
    .addEventListener('submit', function (e) {
        Dashboard.showLoadingMsg();
        const selection = document.querySelector('#SmartplaylistSelection');
        const selectedId = PLAYLISTS[selection.selectedIndex].Id;
        ApiClient.setSmartPlaylist(jsonFromForm()).then(function () {
            initial_load(selectedId);
        });
        e.preventDefault();
    });