lowfi rice help #68

danielwerg · 2025-02-06T05:55:17Z

After #65 I got excited about this again.

Right now there is only 3 differences between my rice and actual lowfi:

border around (solved)

Expand

I prefer to not have it most of the times, so I never tried implementing it in fum

related: talwat/lowfi#51

elements alignment (wontfix? not that big of a deal in this case)

Expand

You could see title "jump" or double space, not 100% which I prefer but I think fum's way better.

2025-02-06_05-33-10.mp4

I've been using trick you showed me with container, but it isn't perfect since I have to set the width which could be dynamic. You could see me set width explicitly in several place in my config.

fum reserves space to the right, lowfi to left to prevent % jumping:

2025-02-06_05-08-48.mp4

would be nice to have both options

progress and volume bar switch

Expand

lowfi switches progress bar with volume bar when volume manipulated:

2025-02-06_05-37-46.mp4

Videos reference: top: fum, bottom: lowfi

My config thus far

{
  "players": ["lowfi"],
  "debug": false,
  "keybinds": {
    "s;S": "next()",
    "n;N": "next()",
    "p;P": "play_pause()",
    "-;_;down": "volume(-10)",
    "left": "volume(-1)",
    "+;=;up": "volume(+10)",
    "right": "volume(+1)",
    "q;Q": "quit()"
  },
  "width": 45,
  "height": 3,
  "layout": [
    {
      "type": "container",
      "direction": "vertical",
      "children": [
        {
          "type": "container",
          "children": [
            {
              "type": "container",
              "width": 7,
              "children": [
                {
                  "type": "button",
                  "text": "$status-text",
                  "action": "play_pause()"
                }
              ]
            },
            { "type": "empty", "size": 1 },
            { "type": "label", "text": "$title" }
          ]
        },
        {
          "type": "container",
          "children": [
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "children": [
                { "type": "button", "text": "[" },
                {
                  "type": "progress",
                  "progress": { "char": "/" },
                  "empty": { "char": " " }
                },
                { "type": "button", "text": "]" }
              ]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 11,
              "children": [
                { "type": "button", "text": "$position" },
                { "type": "button", "text": "/" },
                {
                  "type": "button",
                  "text": "var($length-style, $length)",
                  "action": "toggle($length-style, $length, $remaining-length)"
                }
              ]
            }
          ]
        },
        {
          "type": "container",
          "children": [
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 7,
              "children": [{ "type": "label", "text": "volume:" }]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "children": [
                { "type": "button", "text": "[" },
                {
                  "type": "volume",
                  "volume": { "char": "/" },
                  "empty": { "char": " " }
                },
                { "type": "button", "text": "]" }
              ]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 4,
              "children": [{ "type": "label", "text": "$volume%" }]
            }
          ]
        }
      ]
    }
  ]
}

The text was updated successfully, but these errors were encountered:

danielwerg · 2025-02-06T05:57:57Z

Oh, yeah, two more things: there isn't a way to make text bold (like lowfi title) and no way to set keybind with modifier (ctrl, alt, etc) ctrl+c being a common one.

qxb3 · 2025-02-06T06:29:29Z

border around

currently not possible, will be planning to add it.

elements alignment.

Played around with it, just remove the container and it should just jump.

{
  "type": "container",
  "children": [
    {
      "type": "button",
      "text": "$status-text",
      "action": "play_pause()"
    },
    { "type": "empty", "size": 1 },
    { "type": "label", "text": "$title" }
  ]
},

progress and volume bar switch
lowfi switches progress bar with volume bar when volume manipulated:

this is actually cool! currently, not possible but i will planing on adding it. plan is, just having a single progress widget and having a source inside of it. so u can just like utilize fum's variable feature. var(), and toggle()

danielwerg · 2025-02-06T06:57:59Z

what about volume thing, can we have space "reserved" on left too?

qxb3 · 2025-02-06T14:43:26Z

wdym by space reserved? if u meant a similar thing on number 2 where u dont need a container for containing the text, then the workaround for now is to remove the parent container of that volume label and make the type become button.

i guess ill just make it so by default, label will also just reserve its content length width instead of taking the available space entirely.

it will only take up space entirely if u set the align property to either center or right

danielwerg · 2025-02-07T01:54:17Z

using button tricks:

2025-02-07_01-49-08.mp4

] from container with volume bar shifts

compassing between fum and lowfi:

0%:

100%:

pay attention for space between ] and volume percentage

from 2025-02-06_05-08-48.mp4 video

qxb3 · 2025-02-07T03:35:37Z

currently not possible to have a "reserved" space for a widget currently.
shatap with ur lowfi rice. looks good enough to me

qxb3 · 2025-02-13T01:58:23Z

@danielwerg btw can u like test the padding thing?

danielwerg · 2025-02-13T05:04:24Z

Is this about #73 (comment)?

"border": true,
"padding": [1, 1],

on root, yields:

I'm assuming that's not how you suppose to use it.

config

{
  "players": ["lowfi"],
  "keybinds": {
    "s;S": "next()",
    "n;N": "next()",
    "p;P": "play_pause()",
    "-;_;down": "volume(-5)",
    "left": "volume(-1)",
    "+;=;up": "volume(+5)",
    "right": "volume(+1)",
    "q;Q": "quit()"
  },
  "width": 45,
  "height": 3,
  // TODO https://github.com/qxb3/fum/pull/73, missing padding
  "border": true,
  "padding": [1, 1],
  "layout": [
    {
      "type": "container",
      "direction": "vertical",
      "children": [
        {
          "type": "container",
          "children": [
            {
              "type": "container",
              "width": 7,
              "children": [
                {
                  "type": "button",
                  "text": "$status-text",
                  "action": "play_pause()"
                }
              ]
            },
            { "type": "empty", "size": 1 },
            { "type": "label", "text": "$title", "bold": true }
          ]
        },
        {
          "type": "container",
          "children": [
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "children": [
                { "type": "button", "text": "[" },
                {
                  "type": "progress",
                  "progress": { "char": "/" },
                  "empty": { "char": " " }
                },
                { "type": "button", "text": "]" }
              ]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 11,
              "children": [
                { "type": "button", "text": "$position" },
                { "type": "button", "text": "/" },
                {
                  "type": "button",
                  "text": "var($length-style, $length)",
                  "action": "toggle($length-style, $length, $remaining-length)"
                }
              ]
            }
          ]
        },
        {
          "type": "container",
          "children": [
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 7,
              "children": [{ "type": "label", "text": "volume:" }]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "children": [
                { "type": "button", "text": "[" },
                {
                  "type": "volume",
                  "volume": { "char": "/" },
                  "empty": { "char": " " }
                },
                { "type": "button", "text": "]" }
              ]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 4,
              "children": [{ "type": "label", "text": "$volume%" }]
            }
          ]
        }
      ]
    }
  ]
}

qxb3 · 2025-02-13T05:07:26Z

u still need to adjust the width and height since nothing really is calculated

danielwerg · 2025-02-13T06:55:55Z

makes sense, looks legit!

danielwerg · 2025-02-13T07:33:11Z

So I ran into flex/element alignment issues again.

I notices that lowfi makes part inside squire brackets bold (ex: "[s]" in "[s]kip")

Knowing that fum doesn't have a way to make part of the text bold I thought I could use containers:

config

{
  "players": ["lowfi"],
  "keybinds": {
    "s;S": "next()",
    "n;N": "next()",
    "p;P": "play_pause()",
    "-;_;down": "volume(-5)",
    "left": "volume(-1)",
    "+;=;up": "volume(+5)",
    "right": "volume(+1)",
    "q;Q": "quit()"
  },
  "width": 31,
  "height": 5,
  "border": true,
  "padding": [2, 1],
  "layout": [
    {
      "type": "container",
      "direction": "vertical",
      "children": [
        {
          "type": "container",
          "children": [
            {
              "type": "container",
              "width": 7,
              "children": [
                {
                  "type": "button",
                  "text": "$status-text",
                  "action": "play_pause()"
                }
              ]
            },
            { "type": "empty", "size": 1 },
            { "type": "label", "text": "$title", "bold": true }
          ]
        },
        {
          "type": "container",
          "children": [
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "children": [
                { "type": "button", "text": "[" },
                {
                  "type": "progress",
                  "progress": { "char": "/" },
                  "empty": { "char": " " }
                },
                { "type": "button", "text": "]" }
              ]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 11,
              "children": [
                { "type": "button", "text": "$position" },
                { "type": "button", "text": "/" },
                {
                  "type": "button",
                  "text": "var($length-style, $length)",
                  "action": "toggle($length-style, $length, $remaining-length)"
                }
              ]
            }
          ]
        },
        {
          "type": "container",
          "children": [
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 7,
              "children": [{ "type": "label", "text": "volume:" }]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "children": [
                { "type": "button", "text": "[" },
                {
                  "type": "volume",
                  "volume": { "char": "/" },
                  "empty": { "char": " " }
                },
                { "type": "button", "text": "]" }
              ]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 4,
              "children": [{ "type": "label", "text": "$volume%" }]
            }
          ]
        },
        {
          "type": "container",
          "flex": "space-between",
          "children": [
            // { "type": "button", "text": "[s]kip", "action": "next()" },
            // { "type": "button", "text": "[p]ause", "action": "play_pause()" },
            // { "type": "button", "text": "[q]uit", "action": "quit()" }
            {
              "type": "container",
              "children": [
                {
                  "type": "button",
                  "text": "[s]",
                  "action": "next()",
                  "bold": true
                },
                { "type": "button", "text": "kip", "action": "next()" }
              ]
            },
            {
              "type": "container",
              "children": [
                {
                  "type": "button",
                  "text": "[p]",
                  "action": "play_pause()",
                  "bold": true
                },
                { "type": "button", "text": "ause", "action": "play_pause()" }
              ]
            },
            {
              "type": "container",
              "children": [
                {
                  "type": "button",
                  "text": "[q]",
                  "action": "quit()",
                  "bold": true
                },
                { "type": "button", "text": "uit", "action": "quit()" }
              ]
            }
          ]
        }
      ]
    }
  ]
}

(fum at the top)

"flex" doesn't seems to apply to containers elements or it applied wrong

qxb3 · 2025-02-13T08:05:44Z

what does setting the bg of the main container of this buttons result to? maybe the main container is like not taking up the rest of the space?

danielwerg · 2025-02-13T08:09:59Z

it takes all the space to the right so does every other child container

red: parent
green: second child

if green bg is removed entire space (parent container) is red

qxb3 · 2025-02-13T08:14:15Z

i see i think its because container again by default will take up the available space that flex doesnt really have any effect on it since there is no space.

ig the work around for this is just setting the container of the button to have a width

danielwerg · 2025-02-13T08:18:48Z

ig the work around for this is just setting the container of the button to have a width

I tried that earlier and it didn't work... I guess I made a typo it should be: 6 7 6
But yeah, it works now, thanks

qxb3 · 2025-02-13T13:26:28Z

can u send the latest config here along with a good screenshot of it, i want to update the wiki

danielwerg · 2025-02-13T14:00:08Z

lowfi clone

aka spot the difference

Caveats:

Volume bar is never show (lowfi rice help #68)
Doesn't quit with ctrl+c (Keybind modifiers #88)
Length is formatted without leading zero (length format with leading 0 in minutes #87)

config

{
  "players": ["lowfi"],
  "keybinds": {
    "s;S": "next()",
    "n;N": "next()",
    "p;P": "play_pause()",
    "-;_;down": "volume(-5)",
    "left": "volume(-1)",
    "+;=;up": "volume(+5)",
    "right": "volume(+1)",
    "q;Q": "quit()"
  },
  "width": 31,
  "height": 5,
  "border": true,
  "padding": [2, 1],
  "layout": [
    {
      "type": "container",
      "direction": "vertical",
      "children": [
        {
          "type": "container",
          "children": [
            {
              "type": "container",
              "width": 7,
              "children": [
                {
                  "type": "button",
                  "text": "$status-text",
                  "action": "play_pause()"
                }
              ]
            },
            { "type": "empty", "size": 1 },
            { "type": "label", "text": "$title", "bold": true }
          ]
        },
        {
          "type": "container",
          "children": [
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "children": [
                { "type": "button", "text": "[" },
                {
                  "type": "progress",
                  "progress": { "char": "/" },
                  "empty": { "char": " " }
                },
                { "type": "button", "text": "]" }
              ]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 11,
              "children": [
                { "type": "button", "text": "$position" },
                { "type": "button", "text": "/" },
                {
                  "type": "button",
                  "text": "var($length-style, $length)",
                  "action": "toggle($length-style, $length, $remaining-length)"
                }
              ]
            }
          ]
        },
        {
          "type": "container",
          "children": [
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 7,
              "children": [{ "type": "label", "text": "volume:" }]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "children": [
                { "type": "button", "text": "[" },
                {
                  "type": "volume",
                  "volume": { "char": "/" },
                  "empty": { "char": " " }
                },
                { "type": "button", "text": "]" }
              ]
            },
            { "type": "empty", "size": 1 },
            {
              "type": "container",
              "width": 4,
              "children": [{ "type": "label", "text": "$volume%" }]
            }
          ]
        },
        {
          "type": "container",
          "flex": "space-between",
          "children": [
            // { "type": "button", "text": "[s]kip", "action": "next()" },
            // { "type": "button", "text": "[p]ause", "action": "play_pause()" },
            // { "type": "button", "text": "[q]uit", "action": "quit()" }
            {
              "type": "container",
              "width": 6,
              "children": [
                {
                  "type": "button",
                  "text": "[s]",
                  "action": "next()",
                  "bold": true
                },
                { "type": "button", "text": "kip", "action": "next()" }
              ]
            },
            {
              "type": "container",
              "width": 7,
              "children": [
                {
                  "type": "button",
                  "text": "[p]",
                  "action": "play_pause()",
                  "bold": true
                },
                { "type": "button", "text": "ause", "action": "play_pause()" }
              ]
            },
            {
              "type": "container",
              "width": 6,
              "children": [
                {
                  "type": "button",
                  "text": "[q]",
                  "action": "quit()",
                  "bold": true
                },
                { "type": "button", "text": "uit", "action": "quit()" }
              ]
            }
          ]
        }
      ]
    }
  ]
}

qxb3 · 2025-02-22T23:01:36Z

will be closing this since its all good now

danielwerg · 2025-02-23T15:41:52Z

@qxb3 is this no longer planned?

qxb3 · 2025-02-24T00:17:51Z

@danielwerg oh yea, forgot about that. we'll see. i kinda don't want to break stuff now.

qxb3 added the help wanted Extra attention is needed label Feb 6, 2025

qxb3 mentioned this issue Feb 6, 2025

v1 milestone #71

Closed

8 tasks

This was referenced Feb 6, 2025

adds border property on widgets #73

Merged

adds bold property on label & button #74

Merged

qxb3 mentioned this issue Feb 12, 2025

added padding #85

Merged

danielwerg mentioned this issue Feb 13, 2025

length format without leading 0 in minutes talwat/lowfi#54

Closed

qxb3 closed this as completed Feb 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

lowfi rice help #68

lowfi rice help #68

danielwerg commented Feb 6, 2025 •

edited

Loading

danielwerg commented Feb 6, 2025

qxb3 commented Feb 6, 2025

danielwerg commented Feb 6, 2025

qxb3 commented Feb 6, 2025

danielwerg commented Feb 7, 2025

qxb3 commented Feb 7, 2025

qxb3 commented Feb 13, 2025

danielwerg commented Feb 13, 2025

qxb3 commented Feb 13, 2025

danielwerg commented Feb 13, 2025

danielwerg commented Feb 13, 2025

qxb3 commented Feb 13, 2025

danielwerg commented Feb 13, 2025 •

edited

Loading

qxb3 commented Feb 13, 2025

danielwerg commented Feb 13, 2025

qxb3 commented Feb 13, 2025

danielwerg commented Feb 13, 2025

qxb3 commented Feb 22, 2025

danielwerg commented Feb 23, 2025

qxb3 commented Feb 24, 2025

lowfi rice help #68

lowfi rice help #68

Comments

danielwerg commented Feb 6, 2025 • edited Loading

danielwerg commented Feb 6, 2025

qxb3 commented Feb 6, 2025

danielwerg commented Feb 6, 2025

qxb3 commented Feb 6, 2025

danielwerg commented Feb 7, 2025

qxb3 commented Feb 7, 2025

qxb3 commented Feb 13, 2025

danielwerg commented Feb 13, 2025

qxb3 commented Feb 13, 2025

danielwerg commented Feb 13, 2025

danielwerg commented Feb 13, 2025

qxb3 commented Feb 13, 2025

danielwerg commented Feb 13, 2025 • edited Loading

qxb3 commented Feb 13, 2025

danielwerg commented Feb 13, 2025

qxb3 commented Feb 13, 2025

danielwerg commented Feb 13, 2025

qxb3 commented Feb 22, 2025

danielwerg commented Feb 23, 2025

qxb3 commented Feb 24, 2025

danielwerg commented Feb 6, 2025 •

edited

Loading

danielwerg commented Feb 13, 2025 •

edited

Loading