301 lines
8.7 KiB
QML
301 lines
8.7 KiB
QML
pragma ComponentBehavior: Bound
|
|
|
|
import QtQuick
|
|
import QtQuick.Shapes
|
|
import QtQuick.Effects
|
|
import M3Shapes
|
|
import Caelestia.Config
|
|
import Caelestia.Services
|
|
import Caelestia.Components
|
|
import qs.components
|
|
import qs.components.effects
|
|
import qs.services
|
|
import qs.utils
|
|
|
|
Item {
|
|
id: root
|
|
|
|
property real playerProgress: {
|
|
const active = Players.active;
|
|
return active?.length ? (active.position % active.length) / active.length : 0;
|
|
}
|
|
|
|
readonly property real arcCoverGap: Tokens.spacing.small
|
|
readonly property real arcRadius: (cover.width + Tokens.sizes.dashboard.mediaProgressThickness) / 2 + arcCoverGap
|
|
readonly property real arcGap: (Tokens.spacing.extraSmall + Tokens.sizes.dashboard.mediaProgressThickness) / arcRadius * 180 / Math.PI
|
|
|
|
anchors.top: parent.top
|
|
anchors.bottom: parent.bottom
|
|
implicitWidth: Tokens.sizes.dashboard.mediaWidth
|
|
|
|
Behavior on playerProgress {
|
|
Anim {
|
|
type: Anim.StandardLarge
|
|
}
|
|
}
|
|
|
|
Timer {
|
|
running: Players.active?.isPlaying ?? false
|
|
interval: GlobalConfig.dashboard.mediaUpdateInterval
|
|
triggeredOnStart: true
|
|
repeat: true
|
|
onTriggered: Players.active?.positionChanged()
|
|
}
|
|
|
|
ServiceRef {
|
|
service: Audio.beatTracker
|
|
}
|
|
|
|
Shape {
|
|
preferredRendererType: Shape.CurveRenderer
|
|
opacity: Math.min(1, remainingArc.sweepAngle)
|
|
|
|
ShapePath {
|
|
fillColor: "transparent"
|
|
strokeColor: Colours.palette.m3secondaryContainer
|
|
strokeWidth: Math.min(1, remainingArc.sweepAngle) * root.Tokens.sizes.dashboard.mediaProgressThickness
|
|
capStyle: ShapePath.RoundCap
|
|
|
|
PathAngleArc {
|
|
id: remainingArc
|
|
|
|
centerX: cover.x + cover.width / 2
|
|
centerY: cover.y + cover.height / 2
|
|
radiusX: root.arcRadius
|
|
radiusY: root.arcRadius
|
|
startAngle: -90 - root.Tokens.sizes.dashboard.mediaProgressSweep / 2 + root.playerProgress * root.Tokens.sizes.dashboard.mediaProgressSweep + root.arcGap
|
|
sweepAngle: Math.max(0.1, root.Tokens.sizes.dashboard.mediaProgressSweep * (1 - root.playerProgress) - root.arcGap)
|
|
}
|
|
|
|
Behavior on strokeColor {
|
|
CAnim {}
|
|
}
|
|
}
|
|
}
|
|
|
|
WavyLine {
|
|
anchors.fill: cover
|
|
anchors.margins: -lineWidth * amplitudeMultiplier * 2 - lineWidth - root.arcCoverGap
|
|
|
|
lineWidth: Tokens.sizes.dashboard.mediaProgressThickness
|
|
color: Colours.palette.m3primary
|
|
pathType: WavyLine.Arc
|
|
radius: root.arcRadius
|
|
frequency: 8
|
|
startAngle: -fullAngle / 2
|
|
fullAngle: Tokens.sizes.dashboard.mediaProgressSweep
|
|
value: root.playerProgress
|
|
|
|
Anim on waveProgress {
|
|
running: true
|
|
paused: !Players.active?.isPlaying
|
|
from: 0
|
|
to: 1
|
|
duration: 2000
|
|
easing.type: Easing.Linear
|
|
loops: Animation.Infinite
|
|
}
|
|
|
|
Behavior on color {
|
|
CAnim {}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: cover
|
|
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.margins: Tokens.padding.large + Tokens.sizes.dashboard.mediaProgressThickness + root.arcCoverGap
|
|
implicitHeight: width
|
|
|
|
// Slight glow to separate from bg
|
|
layer.enabled: true
|
|
layer.effect: MultiEffect {
|
|
shadowEnabled: true
|
|
blurMax: 1
|
|
shadowColor: Colours.palette.m3outline
|
|
shadowOpacity: 0.3
|
|
}
|
|
|
|
Item {
|
|
id: coverShape
|
|
|
|
anchors.fill: parent
|
|
layer.enabled: true
|
|
|
|
MaterialShape {
|
|
implicitSize: cover.width
|
|
shape: MaterialShape.Cookie12Sided
|
|
color: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
|
|
|
|
Anim on rotation {
|
|
running: true
|
|
paused: !Players.active?.isPlaying
|
|
from: 360
|
|
to: 0
|
|
duration: 23500
|
|
easing.type: Easing.Linear
|
|
loops: Animation.Infinite
|
|
}
|
|
|
|
Behavior on color {
|
|
CAnim {}
|
|
}
|
|
}
|
|
}
|
|
|
|
MaterialIcon {
|
|
anchors.centerIn: parent
|
|
|
|
grade: 200
|
|
text: "art_track"
|
|
color: Colours.palette.m3onSurfaceVariant
|
|
fontStyle: Tokens.font.icon.size((parent.width * 0.4) || 1).build()
|
|
}
|
|
|
|
Image {
|
|
id: image
|
|
|
|
anchors.fill: parent
|
|
|
|
source: Players.getArtUrl(Players.active)
|
|
asynchronous: true
|
|
fillMode: Image.PreserveAspectCrop
|
|
sourceSize.width: width
|
|
sourceSize.height: height
|
|
|
|
layer.enabled: true
|
|
layer.effect: Mask {
|
|
maskSource: coverShape
|
|
}
|
|
}
|
|
}
|
|
|
|
StyledText {
|
|
id: title
|
|
|
|
anchors.top: cover.bottom
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.topMargin: Tokens.spacing.medium
|
|
|
|
animate: true
|
|
horizontalAlignment: Text.AlignHCenter
|
|
text: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
|
|
color: Colours.palette.m3primary
|
|
font: Tokens.font.title.small
|
|
|
|
width: parent.implicitWidth - Tokens.padding.extraLargeIncreased
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
StyledText {
|
|
id: album
|
|
|
|
anchors.top: title.bottom
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.topMargin: Tokens.spacing.small
|
|
|
|
animate: true
|
|
horizontalAlignment: Text.AlignHCenter
|
|
text: (Players.active?.trackAlbum ?? qsTr("No media")) || qsTr("Unknown album")
|
|
color: Colours.palette.m3outline
|
|
font: Tokens.font.body.small
|
|
|
|
width: parent.implicitWidth - Tokens.padding.extraLargeIncreased
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
StyledText {
|
|
id: artist
|
|
|
|
anchors.top: album.bottom
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.topMargin: Tokens.spacing.small
|
|
|
|
animate: true
|
|
horizontalAlignment: Text.AlignHCenter
|
|
text: (Players.active?.trackArtist ?? qsTr("No media")) || qsTr("Unknown artist")
|
|
color: Colours.palette.m3secondary
|
|
|
|
width: parent.implicitWidth - Tokens.padding.extraLargeIncreased
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
Row {
|
|
id: controls
|
|
|
|
anchors.top: artist.bottom
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.topMargin: Tokens.spacing.medium
|
|
|
|
spacing: Tokens.spacing.small
|
|
|
|
PlayerControl {
|
|
icon: "skip_previous"
|
|
canUse: Players.active?.canGoPrevious ?? false
|
|
onClicked: Players.active?.previous()
|
|
}
|
|
|
|
PlayerControl {
|
|
icon: Players.active?.isPlaying ? "pause" : "play_arrow"
|
|
canUse: Players.active?.canTogglePlaying ?? false
|
|
onClicked: Players.active?.togglePlaying()
|
|
}
|
|
|
|
PlayerControl {
|
|
icon: "skip_next"
|
|
canUse: Players.active?.canGoNext ?? false
|
|
onClicked: Players.active?.next()
|
|
}
|
|
}
|
|
|
|
AnimatedImage {
|
|
id: bongocat
|
|
|
|
anchors.top: controls.bottom
|
|
anchors.bottom: parent.bottom
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.topMargin: Tokens.spacing.small
|
|
anchors.bottomMargin: Tokens.padding.large
|
|
anchors.margins: Tokens.padding.extraLargeIncreased
|
|
|
|
playing: Players.active?.isPlaying ?? false
|
|
speed: Audio.beatTracker.bpm / Config.general.mediaGifSpeedAdjustment // qmllint disable unresolved-type
|
|
source: Paths.absolutePath(Config.paths.mediaGif)
|
|
asynchronous: true
|
|
fillMode: AnimatedImage.PreserveAspectFit
|
|
}
|
|
|
|
component PlayerControl: StyledRect {
|
|
id: control
|
|
|
|
required property string icon
|
|
required property bool canUse
|
|
|
|
signal clicked
|
|
|
|
implicitWidth: Math.max(icon.implicitHeight, icon.implicitHeight) + Tokens.padding.extraSmall
|
|
implicitHeight: implicitWidth
|
|
|
|
StateLayer {
|
|
disabled: !control.canUse
|
|
radius: Tokens.rounding.full
|
|
onClicked: control.clicked()
|
|
}
|
|
|
|
MaterialIcon {
|
|
id: icon
|
|
|
|
anchors.centerIn: parent
|
|
anchors.verticalCenterOffset: font.pointSize * 0.05
|
|
|
|
animate: true
|
|
text: control.icon
|
|
color: control.canUse ? Colours.palette.m3onSurface : Colours.palette.m3outline
|
|
fontStyle: Tokens.font.icon.large
|
|
}
|
|
}
|
|
}
|