audrey/src/ui/play_queue_song.blp

using Gtk 4.0;

template $UiPlayQueueSong: ListBoxRow {
  selectable: false;

  Box {
    focusable: false;
    spacing: 6;

    Image {
      //visible: false;
      icon-name: "list-drag-handle";
      styles [ "drag-handle" ]
    }

    Box {
      width-request: 48;
      focusable: false;
      homogeneous: true;

      Image {
        focusable: false;
        icon-size: normal;
        icon-name: bind template.play-icon-name;
      }

      Label {
        focusable: false;
        halign: end;
        justify: right;
        styles [ "dim-label", "numeric" ]

        label: bind template.displayed_position;
      }
    }

    Box title_box {
      focusable: false;
      hexpand: true;

      Label {
        focusable: false;
        xalign: 0;
        halign: start;
        hexpand: true;
        ellipsize: end;
        max-width-chars: 90;
        justify: fill;
        margin-start: 9;

        label: bind template.song as <$SubsonicSong>.title;
        styles [ "title-label" ]
      }
    }

    Box artist_box {
      //visible: false;
      focusable: false;
      hexpand: true;

      Label {
        focusable: false;
        xalign: 0;
        halign: start;
        hexpand: true;
        ellipsize: end;
        max-width-chars: 90;
        justify: fill;
        margin-start: 9;

        label: bind template.song as <$SubsonicSong>.artist;
      }
    }

    Box album_duration_box {
      focusable: false;
      hexpand: true;
      spacing: 6;

      Label {
        //visible: false;
        focusable: false;
        xalign: 0;
        halign: start;
        hexpand: true;
        ellipsize: end;
        max-width-chars: 90;
        justify: fill;

        label: bind template.song as <$SubsonicSong>.album;
      }

      Label {
        focusable: false;
        halign: end;
        hexpand: true;
        single-line-mode: true;
        styles [ "numeric" ]

        label: bind $format_duration (template.song as <$SubsonicSong>.duration) as <string>;
      }
    }

    Button {
      focusable: true;
      icon-name: bind $star_button_icon_name (template.song as <$SubsonicSong>.starred) as <string>;
      styles [ "flat" ]
    }

    MenuButton {
      //visible: false;
      focusable: true;
      icon-name: "view-more";
      styles [ "flat" ]

      popover: PopoverMenu {
        menu-model: song-menu;
      };
    }
  }

  DragSource {
    actions: move;
    propagation-phase: capture;

    prepare => $on_drag_prepare ();
  }

  DropTarget {
    actions: move;
    formats: UiPlayQueueSong;
    preload: true;

    drop => $on_drop ();
  }
}

SizeGroup {
  mode: horizontal;
  widgets [title_box, artist_box, album_duration_box]
}

menu song-menu {
  item ("Remove", "song.remove")
}