@vestra-player/sdk 1.5.27 → 1.5.29

package/slint/vestra/bar-buttons.slint

@@ -0,0 +1,138 @@
+// Command buttons of a bottom bar (player 0.5.10, SDK 1.5.29): the buttons
+// that plugins' commands contribute (`commands.add({ button })`) and the
+// player's sidebar toggle, rightmost. The player fills `BarButtonsHost` in
+// every window it composes and runs the clicks; a bottom bar places one
+// `BarButtons` in its own layout and gives it the width it can spare:
+//   import { BarButtons } from "@vestra/bar-buttons.slint";
+//   strip := BarButtons { x: parent.width - self.width - 4px; room: ...; }
+// It shows as many 41×40 cells as fit in `room`, the strip as wide as the
+// cells shown (`width`). Cells go from the strip's outer (left) end inward:
+// of the plugins' buttons (ascending `order`, left to right) the lowest
+// order goes first, and the sidebar toggle goes last. A bar without a `BarButtons` shows none of them (their menu
+// entries stay; the player logs which buttons are hidden).
+//
+// The cells look like the bar's own icon buttons: a 32×32 plate on hover
+// and press, the V-Line icon in the text colour (accent while a toggle is
+// on), the bar's tooltip (ToolTipArea). They are persistent elements shown with
+// `visible:`; nothing is created on hover or resize.
+import { Theme } from "theme.slint";
+import { Icon } from "icons.slint";
+import { ToolTipArea } from "widgets.slint";
+
+// One button as the player shows it.
+export struct BarButtonItem {
+    // What a click runs (the player's own token; "" for no button).
+    token: string,
+    // A name of @vestra/icons.slint, or "" for `image`.
+    icon: string,
+    // The plugin's image (`plugin.ui.image`), drawn in the icon colour.
+    image: image,
+    // The command's title (the accessibility label).
+    label: string,
+    // The tooltip: the title and its key, the reason it is unavailable.
+    tip: string,
+    enabled: bool,
+    // The command has a checked state; `checked` draws the icon in the accent.
+    checkable: bool,
+    checked: bool,
+    // At half opacity: on, but not shown for want of room (the sidebar).
+    dimmed: bool,
+}
+
+// Filled by the player; a bar reads it only through `BarButtons`.
+export global BarButtonsHost {
+    // The plugins' buttons, left to right, at most 8.
+    in property <[BarButtonItem]> buttons;
+    // The sidebar toggle (`token` "" while there is none).
+    in property <BarButtonItem> toggle;
+    // Set when a `BarButtons` exists in this window.
+    in-out property <bool> placed;
+    // A click on the cell with this token.
+    callback clicked(string);
+}
+
+// One 41×40 cell (the bar's BarButton). `shown`: on screen; a hidden cell
+// is not actionable from the accessibility tree either.
+component Cell inherits Rectangle {
+    in property <BarButtonItem> item;
+    in property <bool> shown;
+    private property <bool> live: root.shown && root.item.enabled;
+    private property <brush> tint: !root.item.enabled ? Theme.icon-disabled
+        : root.item.checked ? (touch.pressed ? Theme.accent-press : Theme.accent)
+        : Theme.text;
+    width: 41px;
+    height: 40px;
+    visible: root.shown;
+    opacity: root.item.dimmed ? 0.5 : 1;
+    accessible-role: button;
+    accessible-label: root.item.label;
+    accessible-description: root.item.tip;
+    accessible-enabled: root.live;
+    accessible-checkable: root.item.checkable;
+    accessible-checked: root.item.checked;
+    accessible-action-default => { if root.live { BarButtonsHost.clicked(root.item.token); } }
+    Rectangle {
+        x: 4px;
+        y: 4px;
+        width: parent.width - 9px;
+        height: parent.height - 8px;
+        border-radius: Theme.radius-panel;
+        background: !root.live ? transparent
+            : touch.pressed ? Theme.press-bg
+            : touch.has-hover ? Theme.hover-bg : transparent;
+    }
+    Icon {
+        visible: root.item.icon != "";
+        x: (root.width - 1px - self.width) / 2;
+        y: (root.height - self.height) / 2;
+        name: root.item.icon;
+        color: root.tint;
+    }
+    // A plugin's image in the icon box (14×12), aspect kept, coloured like the icons.
+    Image {
+        visible: root.item.icon == "";
+        x: (root.width - 1px - self.width) / 2;
+        y: (root.height - self.height) / 2;
+        width: 14px;
+        height: 12px;
+        source: root.item.image;
+        image-fit: contain;
+        colorize: root.tint;
+    }
+    ToolTipArea {
+        width: 100%;
+        height: 100%;
+        text: root.shown ? root.item.tip : "";
+        touch := TouchArea {
+            enabled: root.live;
+            clicked => { BarButtonsHost.clicked(root.item.token); }
+        }
+    }
+}
+
+// The strip: place it at the bar's right end and give it the width you can
+// spare; it is as wide as the cells it shows (read `width` to lay out the rest).
+export component BarButtons {
+    // The width the bar can give the strip; the cells that fit show.
+    in property <length> room;
+    // The index (in the player's list, ascending order) of the leftmost
+    // plugin button shown; the ones before it are hidden for want of room.
+    out property <int> first-shown: BarButtonsHost.buttons.length - root.count;
+    // The cells that fit in `room`.
+    private property <int> fit: Math.max(0, Math.floor(root.room / 41px));
+    private property <bool> toggle: BarButtonsHost.toggle.token != "" && root.fit >= 1;
+    // The plugins' buttons shown: the highest orders, left of the toggle's cell.
+    private property <int> count: Math.max(0, Math.min(BarButtonsHost.buttons.length, root.fit - (root.toggle ? 1 : 0)));
+    width: (root.count + (root.toggle ? 1 : 0)) * 41px;
+    height: 40px;
+    init => { BarButtonsHost.placed = true; }
+    Cell { x: (0 - root.first-shown) * 41px; shown: 0 >= root.first-shown && 0 < BarButtonsHost.buttons.length; item: BarButtonsHost.buttons[0]; }
+    Cell { x: (1 - root.first-shown) * 41px; shown: 1 >= root.first-shown && 1 < BarButtonsHost.buttons.length; item: BarButtonsHost.buttons[1]; }
+    Cell { x: (2 - root.first-shown) * 41px; shown: 2 >= root.first-shown && 2 < BarButtonsHost.buttons.length; item: BarButtonsHost.buttons[2]; }
+    Cell { x: (3 - root.first-shown) * 41px; shown: 3 >= root.first-shown && 3 < BarButtonsHost.buttons.length; item: BarButtonsHost.buttons[3]; }
+    Cell { x: (4 - root.first-shown) * 41px; shown: 4 >= root.first-shown && 4 < BarButtonsHost.buttons.length; item: BarButtonsHost.buttons[4]; }
+    Cell { x: (5 - root.first-shown) * 41px; shown: 5 >= root.first-shown && 5 < BarButtonsHost.buttons.length; item: BarButtonsHost.buttons[5]; }
+    Cell { x: (6 - root.first-shown) * 41px; shown: 6 >= root.first-shown && 6 < BarButtonsHost.buttons.length; item: BarButtonsHost.buttons[6]; }
+    Cell { x: (7 - root.first-shown) * 41px; shown: 7 >= root.first-shown && 7 < BarButtonsHost.buttons.length; item: BarButtonsHost.buttons[7]; }
+    Cell { x: root.count * 41px; shown: root.toggle; item: BarButtonsHost.toggle; }
+}

package/slint/vestra/icons.slint

@@ -48,6 +48,10 @@ export global Icons {
         // Four corners pointing out (enter) or in (leave), the default 14 × 12 box.
         if name == "fullscreen" { return "M 1.5 4.5 V 1.5 H 4.5 M 9.5 1.5 H 12.5 V 4.5 M 12.5 7.5 V 10.5 H 9.5 M 4.5 10.5 H 1.5 V 7.5"; }
         if name == "exit-fullscreen" { return "M 4.5 1.5 V 4.5 H 1.5 M 9.5 1.5 V 4.5 H 12.5 M 12.5 7.5 H 9.5 V 10.5 M 1.5 7.5 H 4.5 V 10.5"; }
+        // A shopping bag (the plugin store) and a four-point sparkle with a
+        // small cross (AI), the default 14 × 12 box; bar buttons use them.
+        if name == "store" { return "M 2.5 4 H 11.5 L 10.9 9.6 Q 10.8 10.5 9.9 10.5 H 4.1 Q 3.2 10.5 3.1 9.6 Z M 5.2 4 V 3.3 A 1.8 1.8 0 0 1 8.8 3.3 V 4"; }
+        if name == "ai" { return "M 6 1.5 Q 6.6 5.4 10.5 6 Q 6.6 6.6 6 10.5 Q 5.4 6.6 1.5 6 Q 5.4 5.4 6 1.5 Z M 11.5 1.2 V 3.8 M 10.2 2.5 H 12.8"; }
         return "";
     }
     // Line width.