Clickable Playlist

[Zren]

I've managed to create a new playlist list with the following dimensions. Each entry has 2 lines for the filename.

        local plEntryWidth = 360
        local plEntryFontSize = 24
        local plEntryHeight = plEntryFontSize*2
        local plBox = {
            x = osc_geo.x + osc_geo.w - plEntryWidth,
            y = osc_geo.y - (plEntryHeight * #playlistElements),
            an = 7, -- x,y is top-left
            w = plEntryWidth,
            h = plEntryHeight * #playlistElements
        }

However since the playlist buttons are more of a "sidebar", they are not inside osc_geo which in the box around the bottom controls. So the mouse events are ignored. In order to handle mouse events we need to create another area (like the window buttons).

layout["tethys"] = function()
        add_area("pl-entries", plBox.x, plBox.y, plBox.x+plBox.w, plBox.y+plBox.h)

...

function render()
    if osc_param.areas["pl-entries"] then
        for _,cords in ipairs(osc_param.areas["pl-entries"]) do
            if state.osc_visible then -- activate only when OSC is actually visible
                set_virt_mouse_area(cords.x1, cords.y1, cords.x2, cords.y2, "pl-entries")
            end
            if state.osc_visible ~= state.input_enabled then
                if state.osc_visible then
                    mp.enable_key_bindings("pl-entries")
                else
                    mp.disable_key_bindings("pl-entries")
                end
                state.input_enabled = state.osc_visible
            end

            if (mouse_hit_coords(cords.x1, cords.y1, cords.x2, cords.y2)) then
                mouse_over_osc = true
            end
        end
    end

...

-- near bottom of file
mp.set_key_bindings({
    {"mbtn_left",           function(e) process_event("mbtn_left", "up") end,
                            function(e) process_event("mbtn_left", "down")  end},
}, "pl-entries", "force")
mp.enable_key_bindings("pl-entries")

...

--  bottom of file
set_virt_mouse_area(0, 0, 0, 0, "pl-entries")

The hardest part so far, is trying to wrap text so both lines are used up properly. The methods I've tried so far:

• Single Line (not long enough for filenames).
  
• Two Lines, 2nd line is last 20 characters with an ellipsis. Basically ElideMiddle. Works well.
  
• Two Lines (or more), attempt to calculate text metrics of a line of text. Wrapping text after a little a certain amount of pixels. I calculated the character width ratio based on the height by opening all the NotoSans characters in FontForge and grabbing the width ~600. I then assumed the character height is 800 + 200 (above) + 200 (below) = 1200. So each character has a roughly 600/1200 width:height ratio. charWidth = fontSize * charWidthRatio.

While the text wrapping with TextMetrics was interesting to code, it doesn't work very well even when I try to assume the font is NotoSans-Regular. It'd probably look different on other OSes so it's not viable to merge to master. I'll be going with the ElideMiddle method.