316 lines
12 KiB
QML
316 lines
12 KiB
QML
import QtQuick
|
|
import QtQuick.Controls as QQC2
|
|
import QtQuick.Layouts
|
|
import org.kde.kirigami as Kirigami
|
|
import org.kde.plasma.components as PlasmaComponents
|
|
|
|
MouseArea {
|
|
id: mediaControlsMouseArea
|
|
|
|
property string configuredFontFamily: "Noto Sans"
|
|
property string configuredLabelVisibilityMode: "auto"
|
|
property string configuredLabelPlacement: "left"
|
|
property string configuredBackgroundStyle: "custom"
|
|
property string configuredBackgroundColor: "transparent"
|
|
property int configuredBackgroundRadius: 0
|
|
property string configuredForegroundColor: "white"
|
|
property bool configuredTextShadowEnabled: false
|
|
readonly property double buttonSize: 16
|
|
readonly property string effectiveLabelVisibilityMode: configuredLabelVisibilityMode === "always" || configuredLabelVisibilityMode === "never" ? configuredLabelVisibilityMode : "auto"
|
|
readonly property bool labelsOnRight: configuredLabelPlacement === "right"
|
|
readonly property bool hideNowPlayingArea: effectiveLabelVisibilityMode === "never"
|
|
readonly property bool usesCustomBackground: configuredBackgroundStyle === "custom"
|
|
readonly property int hideModeHorizontalPadding: 8
|
|
readonly property int labelRailWidth: 100
|
|
readonly property int separatorPadding: 4
|
|
readonly property string effectiveBackgroundColor: configuredBackgroundColor || "transparent"
|
|
readonly property int effectiveBackgroundRadius: Math.max(0, configuredBackgroundRadius)
|
|
readonly property string effectiveForegroundColor: configuredForegroundColor || "white"
|
|
readonly property bool hasTrackInfo: player.ready && (((player.title || "").trim().length > 0) || ((player.artists || "").trim().length > 0))
|
|
readonly property bool nowPlayingLabelsVisible: {
|
|
if (effectiveLabelVisibilityMode === "always")
|
|
return true;
|
|
|
|
if (effectiveLabelVisibilityMode === "never")
|
|
return false;
|
|
|
|
return hasTrackInfo;
|
|
}
|
|
|
|
focus: true
|
|
hoverEnabled: true
|
|
Keys.onPressed: (event) => {
|
|
if (!event.modifiers) {
|
|
event.accepted = true;
|
|
if (event.key === Qt.Key_Space || event.key === Qt.Key_K)
|
|
player.togglePlayPause();
|
|
else if (event.key === Qt.Key_P)
|
|
player.previous();
|
|
else if (event.key === Qt.Key_N)
|
|
player.next();
|
|
else
|
|
event.accepted = false;
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
visible: mediaControlsMouseArea.usesCustomBackground
|
|
color: mediaControlsMouseArea.effectiveBackgroundColor
|
|
radius: mediaControlsMouseArea.effectiveBackgroundRadius
|
|
}
|
|
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
layoutDirection: mediaControlsMouseArea.labelsOnRight ? Qt.RightToLeft : Qt.LeftToRight
|
|
|
|
ColumnLayout {
|
|
id: leftColumn
|
|
|
|
visible: !mediaControlsMouseArea.hideNowPlayingArea
|
|
Layout.fillHeight: true
|
|
Layout.minimumWidth: visible ? mediaControlsMouseArea.labelRailWidth : 0
|
|
Layout.preferredWidth: visible ? mediaControlsMouseArea.labelRailWidth : 0
|
|
Layout.maximumWidth: visible ? mediaControlsMouseArea.labelRailWidth : 0
|
|
states: [
|
|
State {
|
|
name: "buttonsVisible"
|
|
when: mediaControlsMouseArea.containsMouse
|
|
|
|
PropertyChanges {
|
|
target: nowPlayingLabels
|
|
Layout.bottomMargin: 10
|
|
}
|
|
|
|
},
|
|
State {
|
|
name: "buttonsHidden"
|
|
when: !mediaControlsMouseArea.containsMouse
|
|
|
|
PropertyChanges {
|
|
target: nowPlayingLabels
|
|
Layout.bottomMargin: 0
|
|
}
|
|
|
|
}
|
|
]
|
|
|
|
Item {
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: nowPlayingLabels
|
|
|
|
Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
|
|
spacing: 0
|
|
visible: mediaControlsMouseArea.nowPlayingLabelsVisible
|
|
|
|
ShadowedLabel {
|
|
Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
|
|
shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled
|
|
text: "NOW"
|
|
lineHeight: 0.8
|
|
font.pixelSize: 16
|
|
font.bold: true
|
|
font.family: mediaControlsMouseArea.configuredFontFamily
|
|
color: mediaControlsMouseArea.effectiveForegroundColor
|
|
horizontalAlignment: mediaControlsMouseArea.labelsOnRight ? Text.AlignLeft : Text.AlignRight
|
|
}
|
|
|
|
ShadowedLabel {
|
|
id: nowPlayingLabel2
|
|
|
|
Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
|
|
shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled
|
|
text: "PLAYING"
|
|
lineHeight: 0.8
|
|
font.bold: true
|
|
font.pixelSize: 16
|
|
font.family: mediaControlsMouseArea.configuredFontFamily
|
|
color: mediaControlsMouseArea.effectiveForegroundColor
|
|
horizontalAlignment: mediaControlsMouseArea.labelsOnRight ? Text.AlignLeft : Text.AlignRight
|
|
}
|
|
|
|
}
|
|
|
|
RowLayout {
|
|
id: mediaControls
|
|
|
|
Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
|
|
opacity: mediaControlsMouseArea.containsMouse && mediaControlsMouseArea.nowPlayingLabelsVisible && !mediaControlsMouseArea.hideNowPlayingArea ? 1 : 0
|
|
visible: opacity > 0 && mediaControlsMouseArea.nowPlayingLabelsVisible && !mediaControlsMouseArea.hideNowPlayingArea
|
|
|
|
QQC2.Button {
|
|
Layout.preferredWidth: buttonSize
|
|
Layout.preferredHeight: buttonSize
|
|
padding: 0
|
|
background: null
|
|
onClicked: {
|
|
player.previous();
|
|
console.log("prev clicked");
|
|
}
|
|
|
|
contentItem: Kirigami.Icon {
|
|
source: "media-skip-backward"
|
|
color: mediaControlsMouseArea.effectiveForegroundColor
|
|
}
|
|
|
|
}
|
|
|
|
QQC2.Button {
|
|
id: playButton
|
|
|
|
Layout.preferredWidth: buttonSize
|
|
Layout.preferredHeight: buttonSize
|
|
padding: 0
|
|
background: null
|
|
onClicked: {
|
|
player.togglePlayPause();
|
|
console.log("pause clicked");
|
|
}
|
|
|
|
contentItem: Kirigami.Icon {
|
|
source: player.playbackStatus === 2 ? "media-playback-pause" : "media-playback-start"
|
|
color: mediaControlsMouseArea.effectiveForegroundColor
|
|
}
|
|
|
|
}
|
|
|
|
QQC2.Button {
|
|
Layout.preferredWidth: buttonSize
|
|
Layout.preferredHeight: buttonSize
|
|
padding: 0
|
|
background: null
|
|
onClicked: player.next()
|
|
|
|
contentItem: Kirigami.Icon {
|
|
source: "media-skip-forward"
|
|
color: mediaControlsMouseArea.effectiveForegroundColor
|
|
}
|
|
|
|
}
|
|
|
|
Behavior on opacity {
|
|
PropertyAnimation {
|
|
duration: 250
|
|
easing.type: Easing.InOutQuad
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Item {
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
transitions: Transition {
|
|
NumberAnimation {
|
|
duration: 250
|
|
easing.type: Easing.InOutQuad
|
|
properties: "Layout.bottomMargin"
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Rectangle {
|
|
id: separator
|
|
|
|
visible: mediaControlsMouseArea.nowPlayingLabelsVisible && !mediaControlsMouseArea.hideNowPlayingArea
|
|
Layout.fillHeight: true
|
|
Layout.leftMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
|
|
Layout.rightMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
|
|
Layout.topMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
|
|
Layout.bottomMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
|
|
Layout.minimumWidth: visible ? 1 : 0
|
|
Layout.preferredWidth: visible ? 1 : 0
|
|
Layout.maximumWidth: visible ? 1 : 0
|
|
color: mediaControlsMouseArea.effectiveForegroundColor
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: infoColumn
|
|
|
|
Layout.fillWidth: true
|
|
Layout.minimumWidth: 0
|
|
Layout.leftMargin: mediaControlsMouseArea.hideNowPlayingArea ? mediaControlsMouseArea.hideModeHorizontalPadding : 0
|
|
Layout.rightMargin: mediaControlsMouseArea.hideNowPlayingArea ? mediaControlsMouseArea.hideModeHorizontalPadding : 0
|
|
|
|
ShadowedLabel {
|
|
Layout.fillWidth: true
|
|
shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled
|
|
text: player.title
|
|
font.pixelSize: 28
|
|
font.bold: true
|
|
font.family: mediaControlsMouseArea.configuredFontFamily
|
|
color: mediaControlsMouseArea.effectiveForegroundColor
|
|
lineHeight: 0.8
|
|
elide: Text.ElideRight
|
|
horizontalAlignment: mediaControlsMouseArea.labelsOnRight ? Text.AlignRight : Text.AlignLeft
|
|
}
|
|
|
|
ShadowedLabel {
|
|
Layout.maximumWidth: 300
|
|
Layout.fillWidth: true
|
|
Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignRight : Qt.AlignLeft
|
|
shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled
|
|
text: player.artists
|
|
font.pixelSize: 26
|
|
font.family: mediaControlsMouseArea.configuredFontFamily
|
|
color: mediaControlsMouseArea.effectiveForegroundColor
|
|
lineHeight: 0.8
|
|
elide: Text.ElideRight
|
|
horizontalAlignment: mediaControlsMouseArea.labelsOnRight ? Text.AlignRight : Text.AlignLeft
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
component ShadowedLabel: Item {
|
|
id: shadowedLabel
|
|
|
|
property alias text: foregroundLabel.text
|
|
property alias font: foregroundLabel.font
|
|
property alias lineHeight: foregroundLabel.lineHeight
|
|
property alias elide: foregroundLabel.elide
|
|
property alias horizontalAlignment: foregroundLabel.horizontalAlignment
|
|
property alias verticalAlignment: foregroundLabel.verticalAlignment
|
|
property alias color: foregroundLabel.color
|
|
property bool shadowEnabled: false
|
|
|
|
implicitWidth: foregroundLabel.implicitWidth + (shadowEnabled ? 1 : 0)
|
|
implicitHeight: foregroundLabel.implicitHeight + (shadowEnabled ? 1 : 0)
|
|
|
|
PlasmaComponents.Label {
|
|
id: shadowLabel
|
|
|
|
visible: shadowedLabel.shadowEnabled
|
|
x: 1
|
|
y: 1
|
|
width: foregroundLabel.width
|
|
height: foregroundLabel.height
|
|
text: foregroundLabel.text
|
|
font: foregroundLabel.font
|
|
lineHeight: foregroundLabel.lineHeight
|
|
elide: foregroundLabel.elide
|
|
horizontalAlignment: foregroundLabel.horizontalAlignment
|
|
verticalAlignment: foregroundLabel.verticalAlignment
|
|
color: "#99000000"
|
|
}
|
|
|
|
PlasmaComponents.Label {
|
|
id: foregroundLabel
|
|
|
|
anchors.fill: parent
|
|
}
|
|
|
|
}
|
|
|
|
}
|