feat: dashboard show on hover, media and weather tabs added
This commit is contained in:
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user