extract panel contents into reusable content/ components
This commit is contained in:
Damocles
parent
b27bb533da
commit
e939a6b096
15 changed files with 1718 additions and 1547 deletions
|
|
@ -3,6 +3,7 @@ import Quickshell
|
|||
import Quickshell.Io
|
||||
import Quickshell.Services.Mpris
|
||||
import "." as M
|
||||
import "content" as C
|
||||
|
||||
M.BarSection {
|
||||
id: root
|
||||
|
|
@ -32,14 +33,14 @@ M.BarSection {
|
|||
_cachedArt = _artUrl || "";
|
||||
}
|
||||
|
||||
// Preload art while panel is hidden — ensures QML image cache has the pixels
|
||||
// Preload art while panel is hidden
|
||||
Image {
|
||||
visible: false
|
||||
source: root._cachedArt
|
||||
asynchronous: true
|
||||
}
|
||||
|
||||
// Cava visualizer — 16 bars, raw output mode
|
||||
// Cava visualizer - 16 bars, raw output mode
|
||||
property var _cavaBars: Array(16).fill(0)
|
||||
property bool _cavaActive: false
|
||||
|
||||
|
|
@ -122,348 +123,18 @@ M.BarSection {
|
|||
panelTitle: "Now Playing"
|
||||
contentWidth: 280
|
||||
|
||||
// Album art — always 1:1, crossfades on session switch
|
||||
Item {
|
||||
width: parent.width
|
||||
height: width
|
||||
clip: true
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: M.Theme.base02
|
||||
}
|
||||
|
||||
// Outgoing art — snaps to current opacity, then fades out
|
||||
Image {
|
||||
id: _artImgPrev
|
||||
anchors.fill: parent
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
asynchronous: true
|
||||
opacity: 0
|
||||
|
||||
NumberAnimation {
|
||||
id: _prevFadeOut
|
||||
target: _artImgPrev
|
||||
property: "opacity"
|
||||
to: 0
|
||||
duration: 300
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
}
|
||||
|
||||
// Incoming art — fades in once loaded
|
||||
Image {
|
||||
id: _artImg
|
||||
anchors.fill: parent
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
asynchronous: true
|
||||
opacity: 0
|
||||
|
||||
property bool _hasArt: false
|
||||
|
||||
onStatusChanged: {
|
||||
if (status === Image.Ready && source !== "") {
|
||||
_hasArt = true;
|
||||
_artFadeIn.start();
|
||||
_prevFadeOut.start();
|
||||
} else if (status === Image.Error) {
|
||||
_hasArt = false;
|
||||
}
|
||||
}
|
||||
|
||||
NumberAnimation {
|
||||
id: _artFadeIn
|
||||
target: _artImg
|
||||
property: "opacity"
|
||||
to: 1
|
||||
duration: 300
|
||||
easing.type: Easing.InOutCubic
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: root
|
||||
function on_CachedArtChanged() {
|
||||
if (!root._cachedArt) {
|
||||
_artFadeIn.stop();
|
||||
_prevFadeOut.stop();
|
||||
_artImg._hasArt = false;
|
||||
_artImg.opacity = 0;
|
||||
_artImgPrev.opacity = 0;
|
||||
_artImg.source = "";
|
||||
} else if (root._cachedArt !== _artImg.source) {
|
||||
_prevFadeOut.stop();
|
||||
_artFadeIn.stop();
|
||||
_artImgPrev.source = _artImg.source;
|
||||
_artImgPrev.opacity = _artImg.opacity;
|
||||
_artImg.opacity = 0;
|
||||
_artImg.source = root._cachedArt;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Visualizer bars
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
height: parent.height * 0.6
|
||||
spacing: 2
|
||||
visible: root.playing
|
||||
opacity: 0.5
|
||||
|
||||
Repeater {
|
||||
model: 16
|
||||
Rectangle {
|
||||
required property int index
|
||||
width: (parent.width - 15 * parent.spacing) / 16
|
||||
height: parent.height * (root._cavaBars[index] ?? 0)
|
||||
anchors.bottom: parent.bottom
|
||||
color: root.accentColor
|
||||
radius: 1
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
duration: 50
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
height: 40
|
||||
visible: _artImg._hasArt
|
||||
gradient: Gradient {
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "transparent"
|
||||
}
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: M.Theme.base01
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "\uF001"
|
||||
color: M.Theme.base04
|
||||
font.pixelSize: 28
|
||||
font.family: M.Theme.iconFontFamily
|
||||
visible: !_artImg._hasArt
|
||||
}
|
||||
}
|
||||
|
||||
// Track info
|
||||
Item {
|
||||
width: parent.width
|
||||
height: titleCol.implicitHeight + 8
|
||||
|
||||
Column {
|
||||
id: titleCol
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: 12
|
||||
anchors.rightMargin: 12
|
||||
spacing: 2
|
||||
|
||||
Text {
|
||||
width: parent.width
|
||||
text: root.player?.trackTitle || "No track"
|
||||
color: M.Theme.base05
|
||||
font.pixelSize: M.Theme.fontSize + 1
|
||||
font.family: M.Theme.fontFamily
|
||||
font.bold: true
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
Text {
|
||||
width: parent.width
|
||||
text: {
|
||||
const p = root.player;
|
||||
if (!p)
|
||||
return "";
|
||||
const artist = Array.isArray(p.trackArtists) ? p.trackArtists.join(", ") : (p.trackArtists || "");
|
||||
return [artist, p.trackAlbum].filter(s => s).join(" \u2014 ");
|
||||
}
|
||||
color: M.Theme.base04
|
||||
font.pixelSize: M.Theme.fontSize - 1
|
||||
font.family: M.Theme.fontFamily
|
||||
elide: Text.ElideRight
|
||||
visible: text !== ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Progress
|
||||
Item {
|
||||
width: parent.width
|
||||
height: 20
|
||||
|
||||
readonly property real pos: root.player?.position ?? 0
|
||||
readonly property real dur: root.player?.length ?? 0
|
||||
readonly property real frac: dur > 0 ? pos / dur : 0
|
||||
|
||||
function _fmtTime(ms) {
|
||||
const s = Math.floor(ms / 1000);
|
||||
const m = Math.floor(s / 60);
|
||||
return m + ":" + String(s % 60).padStart(2, "0");
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: parent._fmtTime(parent.pos)
|
||||
color: M.Theme.base04
|
||||
font.pixelSize: M.Theme.fontSize - 2
|
||||
font.family: M.Theme.fontFamily
|
||||
}
|
||||
Text {
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: parent._fmtTime(parent.dur)
|
||||
color: M.Theme.base04
|
||||
font.pixelSize: M.Theme.fontSize - 2
|
||||
font.family: M.Theme.fontFamily
|
||||
}
|
||||
|
||||
Item {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: parent.width - 80
|
||||
height: 4
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: M.Theme.base02
|
||||
radius: 2
|
||||
}
|
||||
Rectangle {
|
||||
width: parent.width * Math.min(1, Math.max(0, parent.parent.frac))
|
||||
height: parent.height
|
||||
color: root.accentColor
|
||||
radius: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transport controls
|
||||
Item {
|
||||
width: parent.width
|
||||
height: 36
|
||||
|
||||
Row {
|
||||
anchors.centerIn: parent
|
||||
spacing: 24
|
||||
|
||||
Text {
|
||||
text: "\uF048"
|
||||
color: root.player?.canGoPrevious ? M.Theme.base05 : M.Theme.base03
|
||||
font.pixelSize: M.Theme.fontSize + 4
|
||||
font.family: M.Theme.iconFontFamily
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
TapHandler {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
enabled: root.player?.canGoPrevious ?? false
|
||||
onTapped: root.player.previous()
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.playing ? "\uF04C" : "\uF04B"
|
||||
color: root.accentColor
|
||||
font.pixelSize: M.Theme.fontSize + 8
|
||||
font.family: M.Theme.iconFontFamily
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
TapHandler {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onTapped: root.player?.togglePlaying()
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "\uF051"
|
||||
color: root.player?.canGoNext ? M.Theme.base05 : M.Theme.base03
|
||||
font.pixelSize: M.Theme.fontSize + 4
|
||||
font.family: M.Theme.iconFontFamily
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
TapHandler {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
enabled: root.player?.canGoNext ?? false
|
||||
onTapped: root.player.next()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Player switcher
|
||||
Item {
|
||||
width: parent.width
|
||||
height: _players.length > 1 ? 28 : 0
|
||||
visible: _players.length > 1
|
||||
|
||||
Flickable {
|
||||
id: _switcher
|
||||
anchors.centerIn: parent
|
||||
width: Math.min(_playerRow.implicitWidth, parent.width - 16)
|
||||
height: 22
|
||||
contentWidth: _playerRow.implicitWidth
|
||||
clip: true
|
||||
|
||||
Row {
|
||||
id: _playerRow
|
||||
height: 22
|
||||
spacing: 6
|
||||
|
||||
Repeater {
|
||||
model: root._players
|
||||
|
||||
delegate: Rectangle {
|
||||
required property var modelData
|
||||
required property int index
|
||||
|
||||
readonly property bool _active: index === root._playerIdx
|
||||
|
||||
width: _pLabel.implicitWidth + 12
|
||||
height: 18
|
||||
radius: 9
|
||||
color: _active ? M.Theme.base02 : (pHover.hovered ? M.Theme.base02 : "transparent")
|
||||
border.color: _active ? root.accentColor : M.Theme.base03
|
||||
border.width: _active ? 1 : 0
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Text {
|
||||
id: _pLabel
|
||||
anchors.centerIn: parent
|
||||
text: modelData.identity ?? "Player"
|
||||
color: _active ? root.accentColor : M.Theme.base04
|
||||
font.pixelSize: M.Theme.fontSize - 2
|
||||
font.family: M.Theme.fontFamily
|
||||
font.bold: _active
|
||||
}
|
||||
|
||||
HoverHandler {
|
||||
id: pHover
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
|
||||
TapHandler {
|
||||
onTapped: {
|
||||
root._playerIdx = index;
|
||||
hoverPanel.keepOpen(400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
C.MprisContent {
|
||||
width: hoverPanel.contentWidth
|
||||
player: root.player
|
||||
players: root._players
|
||||
playing: root.playing
|
||||
accentColor: root.accentColor
|
||||
cachedArt: root._cachedArt
|
||||
cavaBars: root._cavaBars
|
||||
playerIdx: root._playerIdx
|
||||
onPlayerSwitched: idx => {
|
||||
root._playerIdx = idx;
|
||||
hoverPanel.keepOpen(400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue