queue-panel.js

// ==PREPROCESSOR==
// @import "%fb2k_component_path%helpers.txt"
// ==/PREPROCESSOR==
//

// ----- contract (must match the component) ----------------------------------
var PLAYLIST_NAME = "Up Next";
var JUMP_COMMAND = "Playback/Atelier: Play From Queue Point";

// ----- style (change freely) ------------------------------------------------
var COL_BG = 0xFF1B1B1D;
var COL_TITLE = 0xFFEAEAEA;
var COL_ARTIST = 0xFF8A8A8E;
var COL_MUTED = 0xFF6E6E72;
var COL_ACCENT = 0xFF6AA9FF;
var COL_HOVER = 0x14FFFFFF;
var COL_LINE = 0x22FFFFFF;

var FONT = "Segoe UI";
var fHead = CreateFontString(FONT, 12, true);
var fCount = CreateFontString(FONT, 11, false);
var fPos = CreateFontString(FONT, 11, true);
var fTitle = CreateFontString(FONT, 14, false);
var fArtist = CreateFontString(FONT, 12, false);
var fDur = CreateFontString(FONT, 12, false);

// ----- layout ---------------------------------------------------------------
var PAD = 16, HEAD_H = 40, ROW_H = 46, POS_W = 26, GAP = 10, DUR_W = 44;
var WHEEL_STEP = 90;

// ----- state ----------------------------------------------------------------
var tf = { title: fb.TitleFormat("%title%"), artist: fb.TitleFormat("[%artist%]"), time: fb.TitleFormat("%length%") };
var queue = [];          // [{handle, title, artist, time}] in queue order
var bridgeAbsent = true; // "Up Next" not found -> component not loaded
var scroll = 0;
var hover = -1;
var clearHover = false, clearArmed = false;
var removeHover = false, removeArmed = -1;
var drag = null;         // {src, startY, active, dst}

// ----- resolve / load -------------------------------------------------------
// Resolve "Up Next" by name every load; never cache the index (other playlists shift it).
function resolvePlaylist() {
    try {
        for (var i = 0, n = plman.PlaylistCount; i < n; i++) {
            if (plman.GetPlaylistName(i) === PLAYLIST_NAME) return i;
        }
    } catch (e) { }
    return -1;
}

function loadQueue() {
    var idx = resolvePlaylist();
    var absent = (idx < 0);
    var next = [];
    if (!absent) {
        var items = plman.GetPlaylistItems(idx);
        var n = items.Count;
        if (n > 0) {
            var titles = tf.title.EvalWithMetadbs(items).toArray();
            var artists = tf.artist.EvalWithMetadbs(items).toArray();
            var times = tf.time.EvalWithMetadbs(items).toArray();
            for (var i = 0; i < n; i++) {
                next.push({ handle: items.GetItem(i), title: titles[i] || "?", artist: artists[i], time: times[i] });
            }
        }
    }
    var changed = (absent !== bridgeAbsent) || (next.length !== queue.length);
    if (!changed) {
        for (var j = 0; j < next.length; j++) {
            var a = queue[j] && queue[j].handle, b = next[j].handle;
            if (!(a && b && a.Compare(b))) { changed = true; break; }
        }
    }
    queue = next; bridgeAbsent = absent;
    return changed;
}

function reload() { if (loadQueue()) { clampScroll(); window.Repaint(); } }

// ----- queue operations (all via the "Up Next" playlist) --------------------
function clearQueue() {
    var idx = resolvePlaylist();
    if (idx < 0) return;
    try { plman.ClearPlaylist(idx); } catch (e) { }
}

function removeAt(i) {
    var idx = resolvePlaylist();
    if (idx < 0 || i < 0) return;
    try {
        plman.ClearPlaylistSelection(idx);
        plman.SetPlaylistSelectionSingle(idx, i, true);
        plman.RemovePlaylistSelection(idx);
    } catch (e) { }
}

function moveTo(src, dst) {
    var idx = resolvePlaylist();
    if (idx < 0 || src < 0) return;
    try {
        plman.ClearPlaylistSelection(idx);
        plman.SetPlaylistSelectionSingle(idx, src, true);
        plman.MovePlaylistSelectionV2(idx, dst);
    } catch (e) { }
}

// Hand the chosen row to the bridge: set focus (synchronous), then run its menu command.
// The component plays that track and drops it plus everything above it from the queue.
function jumpTo(i) {
    var idx = resolvePlaylist();
    if (idx < 0 || i < 0) return;
    try {
        plman.SetPlaylistFocusItem(idx, i);
        fb.RunMainMenuCommand(JUMP_COMMAND);
    } catch (e) { }
}

// ----- geometry -------------------------------------------------------------
function rowAt(y) {
    if (y < HEAD_H) return -1;
    var i = Math.floor((y - HEAD_H + scroll) / ROW_H);
    return (i >= 0 && i < queue.length) ? i : -1;
}

// Insertion gap under the pointer: 0..queue.length. Drives the drop indicator and the move.
function gapAt(y) {
    var g = Math.floor((y - HEAD_H + scroll + ROW_H / 2) / ROW_H);
    return g < 0 ? 0 : (g > queue.length ? queue.length : g);
}

function clearRect() {
    if (bridgeAbsent || queue.length === 0) return null;
    var tw = utils.CalcTextWidth2("Clear", fCount);
    var right = window.Width - PAD;
    return { x: right - tw - 6, y: 0, w: tw + 12, h: HEAD_H };
}

function removeRect(i) {
    var y = HEAD_H - scroll + i * ROW_H;
    var durR = window.Width - PAD, durL = durR - DUR_W;
    return { x: durL, y: y, w: DUR_W, h: ROW_H };
}

function inRect(r, x, y) { return r && x >= r.x && x <= r.x + r.w && y >= r.y && y <= r.y + r.h; }

function removeRowAt(x, y) {
    if (bridgeAbsent || y < HEAD_H) return -1;
    var i = rowAt(y);
    return (i >= 0 && inRect(removeRect(i), x, y)) ? i : -1;
}

function maxScroll() {
    var content = queue.length * ROW_H, view = window.Height - HEAD_H;
    return Math.max(0, content - view);
}
function clampScroll() {
    var m = maxScroll();
    if (scroll < 0) scroll = 0; else if (scroll > m) scroll = m;
}

// ----- paint ----------------------------------------------------------------
function drawHead(gr, W, degraded) {
    gr.FillRectangle(0, HEAD_H - 1, W, 1, COL_LINE);
    gr.WriteTextSimple("UP NEXT", fHead, COL_MUTED, PAD, 0, W, HEAD_H, 0, 2);
    if (degraded) return;
    var lw = utils.CalcTextWidth2("UP NEXT", fHead);
    gr.WriteTextSimple(queue.length + " queued", fCount, COL_ACCENT, PAD + lw + 10, 0, W, HEAD_H, 0, 2);
    if (queue.length) {
        gr.WriteTextSimple("Clear", fCount, clearHover ? COL_ACCENT : COL_MUTED, 0, 0, W - PAD, HEAD_H, 1, 2);
    }
}

function drawX(gr, durL, y, hot) {
    var cx = durL + DUR_W / 2, cy = y + ROW_H / 2, r = 5;
    var c = hot ? COL_ACCENT : COL_MUTED;
    gr.DrawLine(cx - r, cy - r, cx + r, cy + r, 1.5, c);
    gr.DrawLine(cx - r, cy + r, cx + r, cy - r, 1.5, c);
}

function drawRow(gr, q, pos, W, y, np, hovered, removeHot) {
    if (hovered) gr.FillRectangle(0, y, W, ROW_H, COL_HOVER);
    var playing = np && q.handle && q.handle.Compare(np);
    var titleCol = playing ? COL_ACCENT : COL_TITLE;

    var posL = PAD, titleL = posL + POS_W + GAP;
    var durR = W - PAD, durL = durR - DUR_W;
    var titleW = durL - GAP - titleL;
    gr.WriteTextSimple("" + pos, fPos, COL_ACCENT, posL, y, POS_W, ROW_H, 0, 2);
    gr.WriteTextSimple(q.title, fTitle, titleCol, titleL, y + 7, titleW, 19, 0, 0);
    gr.WriteTextSimple(q.artist, fArtist, COL_ARTIST, titleL, y + 26, titleW, 15, 0, 0);
    if (hovered) drawX(gr, durL, y, removeHot);
    else gr.WriteTextSimple(q.time, fDur, COL_MUTED, durL, y, DUR_W, ROW_H, 1, 2);
}

function on_paint(gr) {
    var W = window.Width, H = window.Height;
    gr.Clear(COL_BG);

    if (bridgeAbsent) {
        drawHead(gr, W, true);
        gr.WriteTextSimple("Queue bridge not loaded", fTitle, COL_MUTED, 0, 0, W, H, 2, 1);
        gr.WriteTextSimple("install foo_atelier_queuebridge", fCount, COL_MUTED, 0, 22, W, H, 2, 1);
        return;
    }
    if (queue.length === 0) {
        drawHead(gr, W, false);
        gr.WriteTextSimple("Nothing queued", fTitle, COL_MUTED, 0, 0, W, H, 2, 2);
        return;
    }

    var np = fb.GetNowPlaying();
    var dragging = drag && drag.active;
    var first = Math.max(0, Math.floor(scroll / ROW_H));
    var y = HEAD_H - scroll + first * ROW_H;
    for (var i = first; i < queue.length && y < H; i++, y += ROW_H) {
        if (dragging && i === drag.src) {
            gr.FillRectangle(0, y, W, ROW_H, COL_LINE);
            drawRow(gr, queue[i], i + 1, W, y, np, false, false);
        } else {
            drawRow(gr, queue[i], i + 1, W, y, np, !dragging && i === hover, !dragging && (removeHover || removeArmed === i));
        }
    }
    if (dragging) {
        var ly = HEAD_H - scroll + drag.dst * ROW_H;
        gr.FillRectangle(PAD, ly - 1, W - PAD * 2, 2, COL_ACCENT);
    }
    gr.FillRectangle(0, 0, W, HEAD_H, COL_BG);   // sticky head over scrolled rows
    drawHead(gr, W, false);
}

// ----- input ----------------------------------------------------------------
function on_size() { clampScroll(); window.Repaint(); }

function on_mouse_wheel(step) {
    if (bridgeAbsent || !queue.length) return;
    var before = scroll;
    scroll -= step * WHEEL_STEP;
    clampScroll();
    if (scroll !== before) { hover = -1; removeHover = false; window.Repaint(); }
}

function on_mouse_lbtn_down(x, y) {
    if (inRect(clearRect(), x, y)) { clearArmed = true; return; }
    var rr = removeRowAt(x, y);
    if (rr >= 0) { removeArmed = rr; window.Repaint(); return; }
    var row = rowAt(y);
    if (row >= 0) drag = { src: row, startY: y, active: false, dst: row };
}

function on_mouse_move(x, y) {
    if (drag) {
        if (!drag.active && Math.abs(y - drag.startY) > 5) drag.active = true;
        if (drag.active) { var g = gapAt(y); if (g !== drag.dst) { drag.dst = g; window.Repaint(); } }
        return;
    }
    var ch = inRect(clearRect(), x, y);
    if (ch !== clearHover) { clearHover = ch; window.Repaint(); }
    var h = bridgeAbsent ? -1 : rowAt(y);
    var rh = (h >= 0) && (removeRowAt(x, y) >= 0);
    if (h !== hover || rh !== removeHover) { hover = h; removeHover = rh; window.Repaint(); }
}

function on_mouse_lbtn_up(x, y) {
    if (clearArmed) { clearArmed = false; if (inRect(clearRect(), x, y)) clearQueue(); return; }
    if (removeArmed >= 0) {
        var armed = removeArmed; removeArmed = -1;
        if (removeRowAt(x, y) === armed) removeAt(armed); else window.Repaint();
        return;
    }
    if (drag) {
        var d = drag; drag = null;
        if (d.active) {
            var dst = gapAt(y);
            if (dst !== d.src && dst !== d.src + 1) moveTo(d.src, dst); else window.Repaint();
        } else if (rowAt(y) === d.src) jumpTo(d.src);
        else window.Repaint();
    }
}

function on_mouse_leave() {
    clearArmed = false; removeArmed = -1;
    var rep = false;
    if (drag) { drag = null; rep = true; }
    if (hover !== -1) { hover = -1; rep = true; }
    if (clearHover) { clearHover = false; rep = true; }
    if (removeHover) { removeHover = false; rep = true; }
    if (rep) window.Repaint();
}

// ----- refresh --------------------------------------------------------------
// The bridge's mirror rewrites surface as ordinary playlist callbacks on "Up Next".
function on_playlists_changed() { reload(); }
function on_playlist_items_added() { reload(); }
function on_playlist_items_removed() { reload(); }
function on_playlist_items_reordered() { reload(); }
function on_playlist_switch() { reload(); }
function on_playback_new_track() { window.Repaint(); }
function on_playback_stop() { window.Repaint(); }

window.SetInterval(reload, 1500);   // backstop for any missed callback
loadQueue();