qbz/crates/qbz-slint/ui/primitives/BarControls.slint

// Shared now-playing-bar control primitives. Extracted from PlayerBar so the
// transport cluster (TransportControls) and the bar's right cluster can both
// use them without duplicating definitions.

import { Theme } from "../foundation/semantic-colors.slint";
import { Radius } from "../foundation/radius.slint";
import { QbzIcon } from "QbzIcon.slint";
import { LoadingSpinner } from "LoadingSpinner.slint";
import { TooltipState } from "../state.slint";

// Square, compact icon button with a hover tooltip.
export component IconButton inherits Rectangle {
    in property <image> icon;
    in property <length> icon-size: 16px;
    in property <bool> active: false;
    in property <string> tooltip;
    // Footprint width; the right-cluster buttons are narrower (28) than the
    // transport (32) so they pack tighter.
    in property <length> btn-width: 32px;
    // Disabled (e.g. transport with nothing playing) — dimmed + non-clickable,
    // 1:1 with Tauri's `.disabled` controls (opacity 0.3).
    in property <bool> enabled: true;
    callback clicked();

    width: root.btn-width;
    height: 32px;
    border-radius: Radius.sm;
    opacity: root.enabled ? 1.0 : 0.3;
    background: (ta.has-hover && root.enabled) ? Theme.surface-hover : transparent;

    QbzIcon {
        source: root.icon;
        width: root.icon-size;
        height: root.icon-size;
        // Pixel-snap the centring so fine SVGs don't render blurry.
        x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
        y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
        tint: root.active
            ? Theme.accent
            : (ta.has-hover ? Theme.text-primary : Theme.text-secondary);
    }

    ta := TouchArea {
        mouse-cursor: root.enabled ? pointer : default;
        clicked => {
            if (root.enabled) {
                root.clicked();
            }
        }
        changed has-hover => {
            if (self.has-hover && root.enabled && root.tooltip != "") {
                TooltipState.text = root.tooltip;
                TooltipState.anchor-x = root.absolute-position.x + root.width / 2;
                TooltipState.anchor-y = root.absolute-position.y;
                TooltipState.show = true;
            } else if (!self.has-hover) {
                TooltipState.show = false;
            }
        }
    }
}

// Primary play/pause button. `circle` = the New layout's filled white disc;
// `circle: false` = the Classic layout's plain glyph (no disc, tinted like the
// other transport icons, accent on hover — a 1:1 of the Tauri play button).
export component PlayButton inherits Rectangle {
    in property <image> icon;
    in property <string> tooltip;
    in property <bool> circle: true;
    // While a play is resolving/downloading (no audio yet) the glyph is
    // swapped for a spinner so the click reads as "heard, audio is coming".
    in property <bool> loading: false;
    // Disabled when there is nothing to play (no current track).
    in property <bool> enabled: true;
    callback clicked();

    width: root.circle ? 38px : 34px;
    height: root.circle ? 38px : 34px;
    border-radius: root.circle ? 19px : Radius.sm;
    opacity: root.enabled ? 1.0 : 0.3;
    background: root.circle
        ? ((ta.has-hover && root.enabled) ? #ffffffd6 : #ffffff)
        : ((ta.has-hover && root.enabled) ? Theme.surface-hover : transparent);

    if !root.loading: QbzIcon {
        source: root.icon;
        // 20px glyph in both modes (matches Tauri's size=20 play/pause).
        width: 20px;
        height: 20px;
        x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
        y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
        tint: root.circle
            ? #000000
            : (ta.has-hover ? Theme.accent : Theme.text-primary);
    }

    if root.loading: LoadingSpinner {
        size: 20px;
        // Dark on the solid white disc, accent on the plain-glyph variant.
        tint: root.circle ? #000000 : Theme.accent;
        x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
        y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
    }

    ta := TouchArea {
        mouse-cursor: root.enabled ? pointer : default;
        clicked => {
            if (root.enabled) {
                root.clicked();
            }
        }
        changed has-hover => {
            if (self.has-hover && root.enabled && root.tooltip != "") {
                TooltipState.text = root.tooltip;
                TooltipState.anchor-x = root.absolute-position.x + root.width / 2;
                TooltipState.anchor-y = root.absolute-position.y;
                TooltipState.show = true;
            } else if (!self.has-hover) {
                TooltipState.show = false;
            }
        }
    }
}