Feature Request: Media Progress Bar, Media Progress & Duration Text, and Customizable Source Icons

[byrmn]

Hi YASB team,

I’d love to request an upgrade to the media widget that adds support for a media progress bar, progress/duration text, and customizable media source icons — all configurable directly in the YAML file.

This would make the media section more functional, aesthetic, and customizable, allowing users to match their setup with a more modern look similar to desktop docks or player widgets.

(I’ve also attached an image to illustrate the expected look of this idea/request.)

🧱 Requested Features

1. Media Progress Bar

• A progress bar that visually represents current playback position.
• Adjustable height, length, and colors.
• Option to place:
  - Beside (left or right) the progress text ({media_progress} / {media_duration}), or
  - Below it, with a dynamic width that automatically adjusts to match text length.
• Support for padding, margins, and rounded corners.

2. Media Progress & Duration Text

• A combined format variable

"{media_progress} / {media_duration}"

with fallback 0:00 / 0:00

• Optionally separate variables {media_progress} and {media_duration} for custom layouts.
• Adjustable font, color, alignment, and spacing.

3. Customizable Media Source Icons

• A new {media_source_icon} variable that shows the current media source (e.g., Spotify, YouTube, VLC, etc.).
• Each icon should be customizable via YAML, similar to media_menu_icons.
• Configurable placement (left, right, or below) relative to the media progress/duration.
• Adjustable size, margin, and padding for layout flexibility.
• Optional dynamic positioning to auto-align when other elements move.

4. “No Media” Label (New)

• Display a custom text label (e.g., "No media playing", "Nothing currently playing", etc.) when there’s no active media source.
• Configurable text, color, font, and alignment in YAML.
• Option to show media source icon beside it (for example, a muted note icon).
• Optionally auto-hide when media starts playing.

Currently, the media widget uses:

media:
  type: "yasb.media.MediaWidget"
  options:
    label: "{artist}: {title}"
    label_alt: "{title}"
    hide_empty: true

The new proposal adds:

label_no_media: "No media playing"

This would show a custom fallback text (e.g., “No media playing” or “No media playing”) when there is no active media source, instead of leaving the area blank or hiding it entirely.

• Works seamlessly with hide_empty: true/false
• Keeps label consistency with existing label and label_alt keys
• Allows users to define a placeholder text instead of a blank space

✨ Example YAML Concept

media:
  type: "yasb.media.MediaWidget"
  options:
    label: "{artist}: {title}"
    label_alt: "{title}"
    label_no_media: "No media playing"
    hide_empty: false

    # ── MEDIA PROGRESS BAR SETTINGS ─────────────────────────────
    show_progress_bar: true
    progress_bar:
      position: below        # options: left, right, below
      height: 4
      length: 100
      dynamic_width: true
      color_fg: "#00C853"
      color_bg: "#444444"
      radius: 2
      margin: 4
      padding: 2
      smooth_animation: true
      animation_speed: 0.2

    # ── MEDIA SOURCE ICON SETTINGS ──────────────────────────────
    show_source_icon: true
    source_icon:
      position: left         # options: left, right, below
      size: 16
      margin: 6
      alignment: center
      dynamic_position: true
      custom_icons:
        spotify: "C:\\Users\\billy\\.config\\yasb\\icons\\spotify.png"
        youtube: "C:\\Users\\billy\\.config\\yasb\\icons\\youtube.png"
        vlc: "C:\\Users\\billy\\.config\\yasb\\icons\\vlc.png"
        chrome: "C:\\Users\\billy\\.config\\yasb\\icons\\chrome.png"
        default: "C:\\Users\\billy\\.config\\yasb\\icons\\music.png"

    # ── MEDIA PROGRESS & DURATION TEXT ──────────────────────────
    show_media_progress_text: true
    media_progress_text_format: "{media_progress} / {media_duration}"
    media_progress_text_alignment: center
    media_progress_text_color: "#FFFFFF"
    media_progress_text_margin: 4

💡 Why This Would Be Awesome

Keeps the media area active and informative even with no playback.

Adds modern progress visuals like desktop players and docks.

Enhances YASB’s flexibility and customization through YAML.

🖼️ Attached below is an image showing the expected look and layout of this request.

💬 Sorry if the way I explain things may sound a bit confusing — I tried my best to describe everything as clearly as possible.

Thank you!

[amnweb]

Progress bar is added #620