feat: dashboard show on hover, media and weather tabs added
This commit is contained in:
@@ -0,0 +1,97 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import M3Shapes
|
||||
import qs.Components
|
||||
import qs.Services
|
||||
import qs.Helpers
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property int count: 14
|
||||
property list<real> darkOpacities: [0.10, 0.20, 0.10, 0.20]
|
||||
property list<real> lightOpacities: [0.34, 0.34, 0.08, 0.2]
|
||||
property real maxRotSpeed: 12
|
||||
property real maxSize: 124
|
||||
property real maxSpeed: 18
|
||||
property real minRotSpeed: -12
|
||||
property real minSize: 36
|
||||
property real minSpeed: 4
|
||||
readonly property list<int> shapePool: [MaterialShape.Circle, MaterialShape.Cookie4Sided, MaterialShape.Cookie6Sided, MaterialShape.Cookie7Sided, MaterialShape.Cookie9Sided, MaterialShape.Cookie12Sided, MaterialShape.Sunny, MaterialShape.VerySunny, MaterialShape.SoftBurst, MaterialShape.Pentagon, MaterialShape.Gem, MaterialShape.Arch, MaterialShape.Arrow, MaterialShape.Pill, MaterialShape.Triangle, MaterialShape.Fan, MaterialShape.Oval]
|
||||
|
||||
function rand(min: real, max: real): real {
|
||||
return min + Math.random() * (max - min);
|
||||
}
|
||||
|
||||
function signedRand(min: real, max: real): real {
|
||||
return rand(min, max) * (Math.random() < 0.5 ? -1 : 1);
|
||||
}
|
||||
|
||||
Component.onCompleted: shapes.model = count
|
||||
|
||||
Repeater {
|
||||
id: shapes
|
||||
|
||||
DriftingShape {
|
||||
}
|
||||
}
|
||||
|
||||
FrameAnimation {
|
||||
running: root.visible && root.width > 0 && root.height > 0 && (Players.active?.isPlaying ?? false)
|
||||
|
||||
onTriggered: {
|
||||
const dt = frameTime;
|
||||
for (let i = 0; i < shapes.count; i++) {
|
||||
const s = shapes.itemAt(i) as DriftingShape;
|
||||
if (!s)
|
||||
continue;
|
||||
|
||||
s.x += s.vx * dt;
|
||||
s.y += s.vy * dt;
|
||||
s.rotation += s.vr * dt;
|
||||
|
||||
if (s.x + s.width < 0)
|
||||
s.x = root.width;
|
||||
else if (s.x > root.width)
|
||||
s.x = -s.width;
|
||||
|
||||
if (s.y + s.height < 0)
|
||||
s.y = root.height;
|
||||
else if (s.y > root.height)
|
||||
s.y = -s.height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component DriftingShape: MaterialShape {
|
||||
id: shapeItem
|
||||
|
||||
readonly property int colorIdx: Math.floor(Math.random() * 4)
|
||||
required property int index
|
||||
property real vr: root.rand(root.minRotSpeed, root.maxRotSpeed)
|
||||
property real vx: root.signedRand(root.minSpeed, root.maxSpeed)
|
||||
property real vy: root.signedRand(root.minSpeed, root.maxSpeed)
|
||||
|
||||
color: [Colors.palette.m3primaryContainer, Colors.palette.m3secondaryContainer, Colors.palette.m3tertiaryContainer, Colors.palette.m3outlineVariant][colorIdx]
|
||||
implicitSize: root.minSize + (index / root.count) * (root.maxSize - root.minSize)
|
||||
opacity: Colors.light ? root.lightOpacities[colorIdx] : root.darkOpacities[colorIdx]
|
||||
rotation: root.rand(0, 360)
|
||||
shape: root.shapePool[Math.floor(Math.random() * root.shapePool.length)]
|
||||
|
||||
Behavior on color {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
x = root.rand(0, root.width - implicitSize);
|
||||
y = root.rand(0, root.height - implicitSize);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Effects
|
||||
import M3Shapes
|
||||
import qs.Helpers
|
||||
import qs.Effects
|
||||
import qs.Components
|
||||
import qs.Services
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property color fallbackColor: Colors.layer(Colors.palette.m3surfaceContainerHighest, 2)
|
||||
property bool hadPrevious
|
||||
readonly property alias shape: shape
|
||||
|
||||
layer.enabled: true
|
||||
|
||||
Behavior on fallbackColor {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
layer.effect: MultiEffect {
|
||||
blurMax: 1
|
||||
shadowColor: Colors.palette.m3outline
|
||||
shadowEnabled: true
|
||||
shadowOpacity: 0.3
|
||||
}
|
||||
|
||||
Item {
|
||||
id: shapeWrapper
|
||||
|
||||
anchors.fill: parent
|
||||
layer.enabled: true
|
||||
opacity: root.fallbackColor.a
|
||||
|
||||
MaterialShape {
|
||||
id: shape
|
||||
|
||||
color: Qt.alpha(root.fallbackColor, 1)
|
||||
implicitSize: root.width
|
||||
shape: MaterialShape.Cookie12Sided
|
||||
|
||||
Anim on rotation {
|
||||
duration: 23500
|
||||
easing.type: Easing.Linear
|
||||
from: 360
|
||||
loops: Animation.Infinite
|
||||
paused: !Players.active?.isPlaying
|
||||
running: true
|
||||
to: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
anchors.centerIn: parent
|
||||
animate: true
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
grade: 200
|
||||
opacity: image.status === Image.Null || image.status === Image.Error ? 1 : 0
|
||||
text: image.status === Image.Error ? "broken_image" : "art_track"
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
active: opacity > 0
|
||||
anchors.centerIn: parent
|
||||
asynchronous: true
|
||||
opacity: image.status === Image.Loading ? 1 : 0
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
sourceComponent: LoadingIndicator {
|
||||
color: Colors.palette.m3primaryContainer
|
||||
implicitSize: root.width * 0.3
|
||||
}
|
||||
}
|
||||
|
||||
FadeImage {
|
||||
id: image
|
||||
|
||||
anchors.fill: parent
|
||||
layer.enabled: true
|
||||
source: Players.getArtUrl(Players.active)
|
||||
|
||||
layer.effect: Mask {
|
||||
maskSource: shapeWrapper
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import M3Shapes
|
||||
import ZShell.Config
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
CoverArt {
|
||||
id: cover
|
||||
|
||||
anchors.centerIn: parent
|
||||
implicitHeight: 200
|
||||
implicitWidth: 200
|
||||
shape.shape: MaterialShape.Cookie9Sided
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell.Services.Mpris
|
||||
import ZShell.Components
|
||||
import ZShell.Config
|
||||
import qs.Components
|
||||
import qs.Services
|
||||
import qs.Helpers
|
||||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
readonly property bool hasUnknownLength: (Players.active?.length ?? 0) > 2147483647
|
||||
|
||||
function lengthStr(length: int): string {
|
||||
if (length < 0)
|
||||
return "-1:-1";
|
||||
|
||||
const hours = Math.floor(length / 3600);
|
||||
const mins = Math.floor((length % 3600) / 60);
|
||||
const secs = Math.floor(length % 60).toString().padStart(2, "0");
|
||||
|
||||
if (hours > 0)
|
||||
return `${hours}:${mins.toString().padStart(2, "0")}:${secs}`;
|
||||
return `${mins}:${secs}`;
|
||||
}
|
||||
|
||||
spacing: Tokens.spacing.extraSmall
|
||||
|
||||
Timer {
|
||||
running: Players.active?.isPlaying ?? false
|
||||
interval: Config.dashboard.mediaUpdateInterval
|
||||
triggeredOnStart: true
|
||||
repeat: true
|
||||
onTriggered: Players.active?.positionChanged()
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
text: Players.active?.trackTitle ?? ""
|
||||
font.pointSize: Tokens.font.size.large
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
text: Players.active?.trackArtist || qsTr("Unknown artist")
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
text: Players.active?.trackAlbum || qsTr("Unknown album")
|
||||
color: Colors.palette.m3secondary
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.topMargin: Tokens.spacing.extraLargeIncreased
|
||||
Layout.fillWidth: true
|
||||
spacing: Tokens.spacing.small
|
||||
|
||||
TextMetrics {
|
||||
id: timeMetrics
|
||||
|
||||
text: Players.active ? root.lengthStr(Math.max(Players.active.position, root.hasUnknownLength ? 0 : Players.active.length)).replace(/[1-9]/g, "0") : "00:00"
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: positionLabel
|
||||
|
||||
Layout.preferredWidth: timeMetrics.width
|
||||
text: root.lengthStr(Players.active?.position ?? -1)
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font: timeMetrics.font
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
CustomSlider {
|
||||
id: positionSlider
|
||||
|
||||
Layout.fillWidth: true
|
||||
value: Players.active ? Players.active.position / (Players.active.length || 1) : 0
|
||||
enabled: (Players.active?.canSeek ?? false) && !root.hasUnknownLength
|
||||
wavy: true
|
||||
animateWave: Players.active?.isPlaying ?? false
|
||||
waveFrequency: 5
|
||||
waveDuration: 2000
|
||||
interactionOnMove: false
|
||||
onInteraction: value => {
|
||||
const active = Players.active;
|
||||
if (active?.canSeek && active?.positionSupported)
|
||||
active.position = value * active.length;
|
||||
}
|
||||
|
||||
Binding {
|
||||
target: positionLabel
|
||||
property: "text"
|
||||
value: root.lengthStr(positionSlider.pos * (Players.active?.length ?? 0))
|
||||
when: positionSlider.dragging
|
||||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.preferredWidth: timeMetrics.width
|
||||
text: root.hasUnknownLength ? "--:--" : root.lengthStr(Players.active?.length ?? -1)
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font: timeMetrics.font
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
}
|
||||
|
||||
ButtonRow {
|
||||
Layout.topMargin: Tokens.spacing.largeIncreased
|
||||
Layout.fillWidth: true
|
||||
spacing: Tokens.spacing.extraSmall
|
||||
|
||||
IconButton {
|
||||
type: IconButton.Tonal
|
||||
icon: "shuffle"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
checked: Players.active?.shuffle ?? false
|
||||
font.pointSize: Tokens.font.size.large
|
||||
enabled: Players.active?.shuffleSupported
|
||||
onClicked: Players.active.shuffle = !Players.active?.shuffle
|
||||
implicitWidth: Math.round(implicitHeight * 0.9)
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: previousBtn
|
||||
|
||||
type: IconButton.Tonal
|
||||
icon: "skip_previous"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
enabled: Players.active?.canGoPrevious
|
||||
onClicked: Players.active?.previous()
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: playPauseBtn
|
||||
|
||||
icon: Players.active?.isPlaying ? "pause" : "play_arrow"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
fillWidth: true
|
||||
checked: Players.active?.isPlaying ?? false
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
enabled: Players.active?.canTogglePlaying
|
||||
onClicked: Players.active?.togglePlaying()
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: nextBtn
|
||||
|
||||
type: IconButton.Tonal
|
||||
icon: "skip_next"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
enabled: Players.active?.canGoNext
|
||||
onClicked: Players.active?.next()
|
||||
}
|
||||
|
||||
IconButton {
|
||||
type: IconButton.Tonal
|
||||
icon: Players.active?.loopState === MprisLoopState.Track ? "repeat_one" : "repeat"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
checked: Players.active?.loopState === MprisLoopState.Track || Players.active?.loopState === MprisLoopState.Playlist
|
||||
font.pointSize: Tokens.font.size.large
|
||||
enabled: Players.active?.loopSupported
|
||||
onClicked: {
|
||||
const state = Players.active.loopState;
|
||||
if (state === MprisLoopState.None)
|
||||
Players.active.loopState = MprisLoopState.Track;
|
||||
else if (state === MprisLoopState.Track)
|
||||
Players.active.loopState = MprisLoopState.Playlist;
|
||||
else
|
||||
Players.active.loopState = MprisLoopState.None;
|
||||
}
|
||||
implicitWidth: Math.round(implicitHeight * 0.9)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,317 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Effects
|
||||
import QtQuick.Layouts
|
||||
import ZShell.Config
|
||||
import ZShell.Services
|
||||
import qs.Components
|
||||
import qs.Effects
|
||||
import qs.Services
|
||||
import qs.Helpers
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
// Funny binding hack to make lyrics update
|
||||
readonly property var _: {
|
||||
const p = Players.active;
|
||||
if (p)
|
||||
Lyrics.setTrack(p.trackArtist, p.trackTitle, p.trackAlbum, p.length);
|
||||
else
|
||||
Lyrics.clearTrack();
|
||||
}
|
||||
|
||||
readonly property real fadeAmount: 0.1
|
||||
property list<string> lyricList: Lyrics.lyrics
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: Mask {
|
||||
maskSource: mask
|
||||
|
||||
Rectangle {
|
||||
id: mask
|
||||
|
||||
layer.enabled: true
|
||||
visible: false
|
||||
implicitWidth: root.width
|
||||
implicitHeight: root.height
|
||||
|
||||
gradient: Gradient {
|
||||
orientation: Gradient.Vertical
|
||||
|
||||
GradientStop {
|
||||
color: Qt.alpha("black", 0)
|
||||
position: 0
|
||||
}
|
||||
GradientStop {
|
||||
color: Qt.alpha("black", 1)
|
||||
position: root.fadeAmount
|
||||
}
|
||||
GradientStop {
|
||||
color: Qt.alpha("black", 1)
|
||||
position: 1 - root.fadeAmount
|
||||
}
|
||||
GradientStop {
|
||||
color: Qt.alpha("black", 0)
|
||||
position: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
state: {
|
||||
if (Lyrics.hasLyrics)
|
||||
return "hasLyrics";
|
||||
if (Lyrics.loading)
|
||||
return "loading";
|
||||
return "noLyrics";
|
||||
}
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "loading"
|
||||
|
||||
PropertyChanges {
|
||||
loadingIndicator.opacity: 1
|
||||
lyrics.opacity: 0
|
||||
noLyrics.opacity: 0
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "hasLyrics"
|
||||
|
||||
PropertyChanges {
|
||||
loadingIndicator.opacity: 0
|
||||
lyrics.opacity: 1
|
||||
noLyrics.opacity: 0
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "noLyrics"
|
||||
|
||||
PropertyChanges {
|
||||
loadingIndicator.opacity: 0
|
||||
lyrics.opacity: 0
|
||||
noLyrics.opacity: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
from: "loading"
|
||||
|
||||
SequentialAnimation {
|
||||
Anim {
|
||||
target: loadingIndicator
|
||||
property: "opacity"
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
Anim {
|
||||
targets: [lyrics, noLyrics]
|
||||
property: "opacity"
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
from: "hasLyrics"
|
||||
|
||||
SequentialAnimation {
|
||||
Anim {
|
||||
target: lyrics
|
||||
property: "opacity"
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
Anim {
|
||||
targets: [loadingIndicator, noLyrics]
|
||||
property: "opacity"
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
from: "noLyrics"
|
||||
|
||||
SequentialAnimation {
|
||||
Anim {
|
||||
target: noLyrics
|
||||
property: "opacity"
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
Anim {
|
||||
targets: [loadingIndicator, lyrics]
|
||||
property: "opacity"
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Loader {
|
||||
id: loadingIndicator
|
||||
|
||||
anchors.centerIn: parent
|
||||
asynchronous: true
|
||||
active: opacity > 0
|
||||
opacity: 0
|
||||
|
||||
sourceComponent: ColumnLayout {
|
||||
spacing: Tokens.spacing.large
|
||||
|
||||
CustomRect {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
implicitWidth: shape.implicitSize + Tokens.padding.medium * 2
|
||||
implicitHeight: shape.implicitSize + Tokens.padding.medium * 2
|
||||
color: Colors.palette.m3primaryContainer
|
||||
radius: Tokens.rounding.full
|
||||
|
||||
LoadingIndicator {
|
||||
id: shape
|
||||
|
||||
anchors.centerIn: parent
|
||||
implicitSize: Math.round(300 / 5)
|
||||
containsIcon: true // This removes the pentagon, which is not centered
|
||||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
text: qsTr("Loading lyrics...")
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: noLyrics
|
||||
|
||||
anchors.centerIn: parent
|
||||
asynchronous: true
|
||||
active: opacity > 0
|
||||
opacity: 0
|
||||
|
||||
sourceComponent: ColumnLayout {
|
||||
spacing: Tokens.spacing.small
|
||||
|
||||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "sentiment_sad"
|
||||
font.pointSize: Tokens.font.size.extraLarge
|
||||
color: Colors.palette.m3outline
|
||||
}
|
||||
|
||||
CustomText {
|
||||
text: qsTr("No lyrics found")
|
||||
color: Colors.palette.m3outline
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CustomListView {
|
||||
id: lyrics
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: parent.height * root.fadeAmount / 2
|
||||
anchors.bottomMargin: parent.height * root.fadeAmount / 2
|
||||
|
||||
displayMarginBeginning: anchors.topMargin
|
||||
displayMarginEnd: anchors.bottomMargin
|
||||
|
||||
model: root.lyricList
|
||||
Component.onCompleted: {
|
||||
currentIndex = Qt.binding(() => {
|
||||
model; // Force update when lyrics change
|
||||
return Lyrics.indexForTime(Players.active?.position ?? 0);
|
||||
});
|
||||
positionViewAtIndex(currentIndex, ListView.Center);
|
||||
}
|
||||
onModelChanged: Qt.callLater(() => positionViewAtIndex(currentIndex, ListView.Center))
|
||||
|
||||
highlightRangeMode: ListView.ApplyRange
|
||||
highlightMoveDuration: Tokens.anim.durations.large
|
||||
highlightMoveVelocity: -1
|
||||
preferredHighlightBegin: (height - (currentItem?.implicitHeight ?? 0)) / 2
|
||||
preferredHighlightEnd: (height + (currentItem?.implicitHeight ?? 0)) / 2
|
||||
|
||||
spacing: Tokens.spacing.small
|
||||
opacity: 0
|
||||
enabled: opacity > 0
|
||||
|
||||
delegate: CustomText {
|
||||
id: lyric
|
||||
|
||||
required property string modelData
|
||||
required property int index
|
||||
property real effectScale: ListView.isCurrentItem ? 1 : 0
|
||||
|
||||
anchors.left: lyrics.contentItem.left
|
||||
anchors.right: lyrics.contentItem.right
|
||||
|
||||
text: modelData || ". . ."
|
||||
color: ListView.isCurrentItem ? Colors.palette.m3primary : mouse.containsMouse ? Colors.palette.m3onSurface : Colors.palette.m3outline
|
||||
font.pointSize: Tokens.font.size.medium
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
|
||||
layer.enabled: effectScale > 0
|
||||
layer.effect: MultiEffect {
|
||||
shadowEnabled: true
|
||||
shadowColor: Colors.palette.m3primary
|
||||
shadowOpacity: 0.5 * lyric.effectScale
|
||||
shadowBlur: 0.6 * lyric.effectScale
|
||||
blur: 0.4 * lyric.effectScale
|
||||
}
|
||||
|
||||
Behavior on effectScale {
|
||||
Anim {
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouse
|
||||
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
const p = Players.active;
|
||||
if (p)
|
||||
p.position = Lyrics.timeForIndex(lyric.index);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on lyricList {
|
||||
SequentialAnimation {
|
||||
Anim {
|
||||
target: lyrics
|
||||
property: "opacity"
|
||||
to: 0
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
PropertyAction {}
|
||||
Anim {
|
||||
target: lyrics
|
||||
property: "opacity"
|
||||
to: 1
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import Quickshell.Services.Mpris
|
||||
import ZShell.Config
|
||||
import qs.Components
|
||||
import qs.Helpers
|
||||
import qs.Services
|
||||
|
||||
Item {
|
||||
ColumnLayout {
|
||||
id: layout
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Tokens.padding.medium
|
||||
spacing: Tokens.spacing.medium
|
||||
|
||||
RowLayout {
|
||||
Layout.bottomMargin: -Tokens.spacing.medium
|
||||
spacing: Tokens.spacing.medium
|
||||
z: 1
|
||||
|
||||
MaterialIcon {
|
||||
Layout.topMargin: Math.round(fontInfo.pointSize * 0.12)
|
||||
text: "lyrics"
|
||||
font.pointSize: Tokens.font.size.large
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
text: qsTr("Lyrics")
|
||||
font.pointSize: Tokens.font.size.large
|
||||
}
|
||||
|
||||
LyricsInfo {}
|
||||
}
|
||||
|
||||
LyricList {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
SplitButton {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
||||
type: SplitButton.Tonal
|
||||
enabled: Players.list.length
|
||||
active: menuItems.find(m => m.modelData === Players.active) ?? menuItems[0] ?? null
|
||||
menu.onItemSelected: item => Players.manualActive = (item as PlayerItem).modelData
|
||||
|
||||
menuItems: playerList.instances
|
||||
fallbackIcon: "music_off"
|
||||
fallbackText: qsTr("No players", "no media players active")
|
||||
|
||||
minLeftWidth: layout.width - expandBtn.implicitWidth - spacing
|
||||
label.Layout.maximumWidth: minLeftWidth - iconLabel.implicitWidth - textRow.spacing - textRow.anchors.horizontalCenterOffset / 2 - horizontalPadding * 2
|
||||
label.elide: Text.ElideRight
|
||||
|
||||
stateLayer.enabled: true
|
||||
menuOnTop: true
|
||||
|
||||
Variants {
|
||||
id: playerList
|
||||
|
||||
model: Players.list
|
||||
|
||||
PlayerItem {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component PlayerItem: MenuItem {
|
||||
required property MprisPlayer modelData
|
||||
|
||||
icon: modelData === Players.active ? "check" : ""
|
||||
text: Players.getIdentity(modelData)
|
||||
activeIcon: "animated_images"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import ZShell
|
||||
import ZShell.Blobs
|
||||
import ZShell.Config
|
||||
import ZShell.Services
|
||||
import qs.Components
|
||||
import qs.Services
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property bool open
|
||||
readonly property real padding: Tokens.padding.large
|
||||
|
||||
implicitWidth: btn.implicitWidth * 0.9
|
||||
implicitHeight: btn.implicitHeight * 0.9
|
||||
|
||||
BlobGroup {
|
||||
id: blobGroup
|
||||
|
||||
color: Colors.palette.m3surfaceContainerHighest
|
||||
smoothing: Tokens.rounding.medium
|
||||
cornerFill: false
|
||||
|
||||
Behavior on color {
|
||||
CAnim {}
|
||||
}
|
||||
}
|
||||
|
||||
BlobRect {
|
||||
id: btnRect
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: !btn.pressed && btn.containsMouse ? -Tokens.padding.extraSmall : 0
|
||||
group: blobGroup
|
||||
radius: Tokens.rounding.medium
|
||||
|
||||
Behavior on anchors.margins {
|
||||
Anim {}
|
||||
}
|
||||
}
|
||||
|
||||
BlobRect {
|
||||
id: rect
|
||||
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: parent.height
|
||||
|
||||
group: blobGroup
|
||||
radius: Tokens.rounding.medium
|
||||
deformScale: 0.00001
|
||||
|
||||
states: State {
|
||||
name: "open"
|
||||
when: root.open
|
||||
|
||||
PropertyChanges {
|
||||
rect.anchors.rightMargin: root.width - Tokens.spacing.small
|
||||
rect.anchors.topMargin: -Tokens.padding.medium
|
||||
rect.implicitWidth: Math.max(layout.implicitWidth, placeholder.implicitWidth) + root.padding * 2
|
||||
rect.implicitHeight: Math.max(layout.implicitHeight, placeholder.implicitHeight) + root.padding * 2
|
||||
content.opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
transitions: Transition {
|
||||
Anim {
|
||||
properties: "rightMargin,implicitWidth"
|
||||
}
|
||||
Anim {
|
||||
properties: "topMargin,implicitHeight"
|
||||
easing: Tokens.anim.expressiveFastSpatial
|
||||
}
|
||||
Anim {
|
||||
property: "opacity"
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on implicitWidth {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: content
|
||||
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
opacity: 0
|
||||
state: Lyrics.loading || !Lyrics.hasLyrics ? "" : "hasLyrics"
|
||||
|
||||
states: State {
|
||||
name: "hasLyrics"
|
||||
|
||||
PropertyChanges {
|
||||
layout.opacity: 1
|
||||
placeholder.opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
from: "hasLyrics"
|
||||
|
||||
SequentialAnimation {
|
||||
Anim {
|
||||
target: layout
|
||||
property: "opacity"
|
||||
type: Anim.FastEffects
|
||||
}
|
||||
Anim {
|
||||
target: placeholder
|
||||
property: "opacity"
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
to: "hasLyrics"
|
||||
|
||||
SequentialAnimation {
|
||||
Anim {
|
||||
target: placeholder
|
||||
property: "opacity"
|
||||
type: Anim.FastEffects
|
||||
}
|
||||
Anim {
|
||||
target: layout
|
||||
property: "opacity"
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
ColumnLayout {
|
||||
id: layout
|
||||
|
||||
anchors.centerIn: parent
|
||||
spacing: Tokens.spacing.extraSmall
|
||||
opacity: 0
|
||||
|
||||
CustomText {
|
||||
// TRANSLATORS: %1 = lyrics backend name, e.g. LRCLIB
|
||||
text: qsTr("Backend: %1").arg(ZUtils.enumToString(Lyrics, "backend"))
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
animate: true
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.maximumWidth: 1000 / 2
|
||||
// TRANSLATORS: %1/%2/%3 = matched track title, artist and album
|
||||
text: qsTr("Selected candidate: %1 | %2 | %3").arg(Lyrics.selectedCandidate.title).arg(Lyrics.selectedCandidate.artist).arg(Lyrics.selectedCandidate.album)
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
animate: true
|
||||
}
|
||||
|
||||
CustomText {
|
||||
// TRANSLATORS: %1 = lyric timing offset; ms is the millisecond unit, leave untranslated
|
||||
text: qsTr("Offset: %1 ms").arg(Lyrics.offset)
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
animate: true
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: placeholder
|
||||
|
||||
anchors.centerIn: parent
|
||||
implicitWidth: placeholderText.implicitWidth
|
||||
implicitHeight: placeholderText.implicitHeight
|
||||
|
||||
CustomText {
|
||||
id: placeholderText
|
||||
|
||||
text: Lyrics.loading ? qsTr("Loading...") : qsTr("No lyrics found")
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font.pointSize: Tokens.font.size.normal
|
||||
animate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: btn
|
||||
|
||||
anchors.centerIn: parent
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: icon.implicitHeight + Tokens.padding.extraSmall * 2
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: true
|
||||
onClicked: root.open = !root.open
|
||||
|
||||
MaterialIcon {
|
||||
id: icon
|
||||
|
||||
anchors.centerIn: parent
|
||||
text: "more_vert"
|
||||
font.pointSize: Tokens.font.size.large
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user