I was thinking if it would be possible to show how many files you are watching on the title bar. So if the directory contains 10 files in the playlist, the title bar would show 1/10. The number 1 would change according to where it is on the playlist (could be 2/10, 3/10, and so on). The number 10 represents the total number of files in the playlist. And If the file you are viewing does not have a playlist then the number would not show.

• NightFutures@959b64f
• https://mpv.io/manual/master/#command-interface-user-data

https://github.com/mpv-player/mpv/blob/master/DOCS/interface-changes.rst#interface-changes

--- mpv 0.37.0 ---
    - deprecate shared-script-properties (user-data is a replacement)
--- mpv 0.38.0 ---
  - remove shared-script-properties (user-data is a replacement)

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.

Option to identify specific chapters easier. For example using colors to identify where they are in the seekbar.

For example, a chapter titled Opening/OP or Ending/ED and so on can have a different colors in the seekbar to identify where it is in the video easier.

For videos that use cache, in the seekbar identify what sections are cached and what sections are uncached. And when hovering over the seekbar it tells the cache range and the remaining seconds till it buffers. As well the part of a video that are uncached.

After completing all four installation steps, the thumbnail preview still does not work properly.
vp9 files don't show the thumbnail preview window at all.

Hello, I have a problem.
When watching anything on mpv the tumbnails from osc tethys lag all the interface and even make it freeze.

Could you help me?

Thanks

Fantastic OSC, thanks for sharing it. One question though, would it be possible to have the Title of the media directly above the seek bar (like https://github.com/cyl0/MordenX). The title on the border interferes with the way I set up mpv (OSD-Bar on the top and so on).

No OSC anymore

I copied it all according to your configuration. All the previous functions were normal. From these two versions, the fast forward and fast backward buttons did not respond

Hi, I am trying to get rid of the seek bar chapter text so that only the time is displayed when I seek.

From what I could seechapter_fmt=no to disable this.

Here is my osc.conf:

However the chapter text is still there on the seek bar.

What am I missing/doing wrong?

Currently, from what I am experiencing, I can only activate the Chapter List OSC when clicking the next and prev keys with my mouse on the Tethys layout. Is there any way to add or change a key bind that will let you see the chapter list with your custom key bind?

For example, say in input.conf I put down "KEYBIND add chapter 1," can it then show the Chapter List on this script.

I noticed 2 issues in the "Picture-in-Picture" mode:

1. The window doesn't stay above other windows
2. The window is not resizable with the mouse, I can only resize it by snapping it into quadrants of my screen.

I'm using the Xfwm (Xfce) window manager and I'm comparing my experience to Firefox's PiP feature which doesn't have those issues.

Regardless, it's a cool feature, thanks for implementing it 😄

When using the new thumbnail script, thumbfast.lua it didn't generate any thumbnails, I figured it may be because this script uses mpv_thumbnail_script. I was wondering if it would be possible to either replace mpv_thumbnail_script or add support to thumbfast.lua.

Mplug is like a package manager but for mpv scripts.
Please add your script there (if already not there) and also installation instructions in manifest - https://github.com/Nudin/mpv-script-directory/blob/master/HOWTO_ADD_INSTALL_INSTRUCTIONS.md

When I integrated this script with my mpv with thumbnails enabled, I always get a strange white box right next to the thumbnail.
Here is the screenshot:

Is anyone else experiencing this issue? Any kind of help is appreciated. TIA

as the title, show chapter name when hovering the seekbar, just like the default osc

Personally, I find these tooltips are a bit distracting after you've gotten used to the default OSC over many years. Could there be a simple option added to toggle the button tooltips (or individually) or make them transparent? I know showChapterTooltip=yes exists, which I do enjoy keeping enabled.

Actually, being able to remove the hotkey from the tooltip (like Play SPACE) would be a good solution as well.

I know we can reduce the font size of the Title, but I think it'll also be helpful to slice files with long names on the title.

I would like to request an option idlescreen that allows to disable the logo and the logo drag and drop text.

In mpv.net there is an option show-logo.

Users then have a choice if they want the mpv.net logo, the osc logo, or no logo.

It not only fixes the mpv.net logo overlap issue, but also overlap issues with many menu scripts:

https://github.com/CogentRedTester/mpv-file-browser

https://github.com/stax76/mpv-scripts/blob/main/osm.lua

Also, various bookmark and recent file menu scripts.

More info:

CogentRedTester/mpv-file-browser#55

mpv-player/mpv#10201

I'm getting the
[mpv_thumbnail_script_server] Thumbnailing command failed!
error
And the cache text is not appearing

By default on my system, the PiP mode doesn't resize/transform the window; it only strips the window border. I even added and played around with pipGeometry=33%+-10+-10 in tethys.conf and it makes no difference.

Initially written up in Zren/mpvz#13

Here's the base osc.lua we can copy to ~/.config/mpv/scripts/osc.lua.

• https://github.com/mpv-player/mpv/blob/master/player/lua/osc.lua

Then I added this to ~/.config/mpv/mpv.conf

keep-open=yes
sub-scale-with-window=no
osd-scale-by-window=no
keepaspect-window=no
osc=no
border=no

Layout

I created a new layout section based on bottombar.

local user_opts = {
    ...
    -- layout = "bottombar",
    layout = "tethys",
}

layouts["tethys"] = function()
    local direction = -1
    local seekbarHeight = 20
    local controlsHeight = 64
    ...
end

I basically ended doing the buttons like so:

    ---- Left Section (Added Left-to-Right)
    -- Playback control buttons
    geo = {
        x = leftX + leftSectionWidth + buttonW/2,
        y = line1Y + buttonH/2,
        an = 5, -- x,y is center
        w = buttonW,
        h = buttonH,
    }
    lo = add_layout("playpause")
    lo.geometry = geo
    lo.style = buttonStyle
    setButtonTooltip(lo, "Play (p / Space)")
    leftSectionWidth = leftSectionWidth + geo.w

• an stands for alignment, which adds {\\an(5)} to the ass text.
  • https://github.com/mpv-player/mpv/blob/master/player/lua/assdraw.lua#L43
  • https://github.com/libass/libass/wiki/ASSv5-Override-Tags#alignment---ainteger2-x
  • 1 means the (x,y) is the bottom-left, 4 is center-left, 7 is top-left. 5 is center and 9 is top-right.
  • When aligning a button to the top-left, it's text inside the button is also aligned to the top-left (which is annoying).

Icons

• The mpv-osd-symbols font is bundled, and basically forced for the OSD.
  • https://github.com/mpv-player/mpv/blob/master/sub/osd_libass.c#L57
  • I tried creating a modified font with the tethys play icon. I installed it to the local user using KFontView. Then I placed {\\fn(tethys-osd-symbols)}} in front of the playpause icon contents. It doesn't appear to have worked. Creating a custom font and distributing it is too complicated anyways, but was an annoying setback.
  • https://github.com/mpv-player/mpv/blob/master/player/lua/osc.lua#L1839-L1850

Eventually I noticed the mpv icon (and santa hat during December) when mpv is launched with no video is drawn using a path!

local logo_lines = {
    -- White border
    "{\\c&HE5E5E5&\\p6}m 895 10 b 401 10 0 410 0 905 0 1399 401 1800 895 1800 1390 1800 1790 1399 1790 905 1790 410 1390 10 895 10 {\\p0}",
    -- Purple fill
    "{\\c&H682167&\\p6}m 925 42 b 463 42 87 418 87 880 87 1343 463 1718 925 1718 1388 1718 1763 1343 1763 880 1763 418 1388 42 925 42{\\p0}",
    ...
}
...
        local ass = assdraw.ass_new()
        -- mpv logo
        for i, line in ipairs(logo_lines) do
            ass:new_event()
            ass:append(line_prefix .. line)
        end

I tried taking the path in the SVG and placing it there. Unfortunately, the SVG path is a little different. I noticed that mpv used the b command which doesn't appear in the mozilla docs.

However even if we assume the b is the same as a bezier curve, the SVG path uses delta c coordinates instead of absolute C coordinates which is what the b seems to be using.

<path d="m 31.000001,21 c 2.964454,2.052317 2.964454,2.947684 0,5.000001 C 20.963866,32.948092 12,39 9.9999997,39 8,39 8,36 8,23.499999 8,12 8,9 9.9999997,9 12,9 20.963866,14.051906 31.000001,21 Z">
<path d="m 31 21 c 3 2 3 3 0 5 C 21 33 12 39 10 39 8 39 8 36 8 23 8 12 8 9 10 9 12 9 21 14 31 21">

I ended up needing to export the svg as an .html file with Inkscape, then manually convert

ctx.moveTo(31.000001, 21.000000);
ctx.bezierCurveTo(33.964455, 23.052317, 33.964455, 23.947684, 31.000001, 26.000001);
ctx.bezierCurveTo(20.963866, 32.948092, 12.000000, 39.000000, 10.000000, 39.000000);
ctx.bezierCurveTo(8.000000, 39.000000, 8.000000, 36.000000, 8.000000, 23.499999);
ctx.bezierCurveTo(8.000000, 12.000000, 8.000000, 9.000000, 10.000000, 9.000000);
ctx.bezierCurveTo(12.000000, 9.000000, 20.963866, 14.051906, 31.000001, 21.000000);

to the following path:

local tethys_icon_play = {
    "{\\c&HC0C0C0&\\p1}m 31 21   b 34 23 34 24 31 26   b 21 33 12 39 10 39   b 8 39 8 36 8 23.5   b 8 12 8 9 10 9   b 12 9 21 14 31 21{\\p0}",
}

As a final note, it seems the {\\p1} stands for scale. The mpv/santa hat icons use {\\p6} which I assume stands for 1/6th scale since the coordinates given are huge (401 10 0 410 0 905). I needed to change it to 1/1 scale to even see my 44x44 icon.

Edit: I wrote a python3 script icons/svgtohtmltoluapath.py to convert the svg to a html, then scrape the path and print it to the terminal to copy with Ctrl+Shift+C.

Edit: I just figured out that I can add m 0 0 m 44 44 in front of the path to create a "viewbox" around the icon so that the icon retains the whitespace around it when aligned. This is particularly important when dealing with the volume icons as their width changes. Up till now we couldn't use a center alignment for the volume icon, but instead used center-left to keep the "speaker" from as volume went up/down.

More can be found out in the master...iconrefactor branch.

Hover Effect

mpv doesn't have any hover animations, the only hover effect is for the seekbar timestamp.

I Managed to create a hover effect by adding the following to the bottom of render_elements() under the button section.

            local buttonHovered = mouse_hit(element)
            if buttonHovered then
                buttontext = "{\\c&HFFFFFF}" .. buttontext

                local shadow_ass = assdraw.ass_new()
                shadow_ass:merge(style_ass)
                shadow_ass:append("{\\blur5}" .. buttontext .. "{\\blur0}")
                master_ass:merge(shadow_ass)
            end

            elem_ass:append(buttontext)

• It seems the {{\\blur0}} formatting accepts a value between 0 and 20.
  • https://github.com/mpv-player/mpv/blob/master/sub/osd.c#L63

Tooltips

I added rough tooltips by adding this to render_elements() under the button section.

            elem_ass:append(buttontext)

            -- Tooltip
            local button_lo = element.layout.button
            if buttonHovered and (not (button_lo.tooltip == nil)) then
                -- tooltip label
                local tx = button_lo.tooltip_geo.x -- element.hitbox.x1
                local ty = button_lo.tooltip_geo.y -- element.hitbox.y1
                local tooltipAlpha =  {[1] = 0, [2] = 255, [3] = 88, [4] = 255}
                elem_ass:new_event()
                elem_ass:pos(tx, ty)
                elem_ass:an(button_lo.tooltip_an)
                elem_ass:append(button_lo.tooltip_style)
                ass_append_alpha(elem_ass, tooltipAlpha, 0)
                elem_ass:append(button_lo.tooltip)
            end

and the following setter to adjust the tooltip based on how close to the window edge it is.

    local buttonTooltipStyle = ("{\\blur0\\bord(1)\\1c&HFFFFFF\\3c&H000000\\fs(%d)}"):format(24)

    function setButtonTooltip(button_lo, text)
        button_lo.button.tooltip = text
        button_lo.button.tooltip_style = buttonTooltipStyle
        local hw = button_lo.geometry.w/2
        local ty = osc_geo.y + padY * direction
        local an
        local tx
        local edgeThreshold = 60
        if button_lo.geometry.x - edgeThreshold < osc_geo.x + padX then
            an = 1 -- x,y is bottom-left
            tx = math.max(osc_geo.x + padX, button_lo.geometry.x - hw)
        elseif osc_geo.x + osc_geo.w - padX < button_lo.geometry.x + edgeThreshold then
            an = 3 -- x,y is bottom-right
            tx = math.min(button_lo.geometry.x + hw, osc_geo.x + osc_geo.w - padX)
        else
            an = 2 -- x,y is bottom-center
            tx = button_lo.geometry.x
        end
        button_lo.button.tooltip_an = an
        button_lo.button.tooltip_geo = { x = tx , y = ty }
    end

Right now, the tooltips are very basic. I'll need to work improving them to have a rounded bg and support multiple lines of text since MPV has multiple actions like Left navigating 10s and Shift+Left navigating 1s.

Track Selection

It would be cool to create a merged audio/subtitle button with a popup like Netflix. Might be too complicated to have multiple generated lists of buttons though.

Edit: For now, I still use the mpv icons for tracks since the buttons are beside text. They also look good too.

Playlist

Since mpv has seek fwd/back and chapter next/prev buttons, I've moved the playlist next/prev buttons to the right side like Netflix.

Edit: I tried showing next/prev file thumbnails, but I found that it was more spoilerly than when on a website that takes a few seconds to load so you can move your mouse. Also, the thumbnails were generated on the fly in a blocking manner which made any delay before showing the tooltip feel annoying. I might revisit this if I modify the thumbnail server script to support playlist file thumbnails.

Seekbar Thumbnails

Edit: After first trying to simplify mpv_thumbnail_script so that only one lua script was needed, I eventually gave up and just implemented the awesome mpv_thumbnail_script's Thumbnailer. I'm bundling the server.lua in this repo since the upstream repo has a bug in the last release (It's been fixed but there's no new release).

Hi,

I modify some values of hotkeys in input.conf. Is there a way to read the value from the file and update hover animations?

Thanks

Hello
First I want to say that this is (in my opinion) by far the best OSC for MPV out there.
You've done a great job with the customization options and especially the documentation.

Quick question, is there any way I could replace the default chapter button behavior to work like betterchapters.lua,
meaning that before the first chapter it would navigate to to the previous playlist item and after the last chapter to the next playlist item

PS: there's a small typo in the README, you have it's documentation instead of its documentation

I would like to suggest describing in the documentation that frontends like mpv.net are only supported when mpv/ffmpeg is in PATH.

Dude, first of all, thank you very much for the theme, it's what I wanted for so long, but couldn't do because of poor skills and laziness.

So the issue is tethys theme is missing audio track button as stated above, example:

And the default OSC:

Is there any way to add it, if so how can I do it? Thank you very much in advance!

The track numbers padding is insufficient when you have a double digit amount of subtitle tracks or audio tracks

Can we have this function built in to tethys? It seems natural to include a feature like skipping to the next file in the folder like https://github.com/tomasklaen/uosc does but some people may not want that osc and prefer yours.

title says