MediaMini: converted to Layout
This commit is contained in:
LemmyCook
parent
4cac584409
commit
c85a309aeb
1 changed files with 111 additions and 147 deletions
|
|
@ -7,7 +7,7 @@ import qs.Commons
|
||||||
import qs.Services
|
import qs.Services
|
||||||
import qs.Widgets
|
import qs.Widgets
|
||||||
|
|
||||||
Row {
|
RowLayout {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
property ShellScreen screen
|
property ShellScreen screen
|
||||||
|
|
@ -15,7 +15,7 @@ Row {
|
||||||
readonly property real minWidth: 160
|
readonly property real minWidth: 160
|
||||||
readonly property real maxWidth: 400
|
readonly property real maxWidth: 400
|
||||||
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
Layout.alignment: Qt.AlignVCenter
|
||||||
spacing: Style.marginS * scaling
|
spacing: Style.marginS * scaling
|
||||||
visible: MediaService.currentPlayer !== null && MediaService.canPlay
|
visible: MediaService.currentPlayer !== null && MediaService.canPlay
|
||||||
width: MediaService.currentPlayer !== null && MediaService.canPlay ? implicitWidth : 0
|
width: MediaService.currentPlayer !== null && MediaService.canPlay ? implicitWidth : 0
|
||||||
|
|
@ -24,7 +24,6 @@ Row {
|
||||||
return MediaService.trackTitle + (MediaService.trackArtist !== "" ? ` - ${MediaService.trackArtist}` : "")
|
return MediaService.trackTitle + (MediaService.trackArtist !== "" ? ` - ${MediaService.trackArtist}` : "")
|
||||||
}
|
}
|
||||||
|
|
||||||
// A hidden text element to safely measure the full title width
|
|
||||||
NText {
|
NText {
|
||||||
id: fullTitleMetrics
|
id: fullTitleMetrics
|
||||||
visible: false
|
visible: false
|
||||||
|
|
@ -34,169 +33,134 @@ Row {
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: mediaMini
|
id: mediaMini
|
||||||
|
width: contentLayout.implicitWidth + Style.marginS * 2 * scaling
|
||||||
// Let the Rectangle size itself based on its content (the Row)
|
|
||||||
width: row.width + Style.marginM * 2 * scaling
|
|
||||||
|
|
||||||
height: Math.round(Style.capsuleHeight * scaling)
|
height: Math.round(Style.capsuleHeight * scaling)
|
||||||
radius: Math.round(Style.radiusM * scaling)
|
radius: Math.round(Style.radiusM * scaling)
|
||||||
color: Color.mSurfaceVariant
|
color: Color.mSurfaceVariant
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
// --- Visualizer Loaders ---
|
||||||
|
Loader {
|
||||||
// Used to anchor the tooltip, so the tooltip does not move when the content expands
|
anchors.centerIn: parent
|
||||||
Item {
|
active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "linear"
|
||||||
id: anchor
|
&& MediaService.isPlaying && MediaService.trackLength > 0
|
||||||
height: parent.height
|
z: 0
|
||||||
width: 200 * scaling
|
sourceComponent: LinearSpectrum {
|
||||||
|
width: mediaMini.width - Style.marginS * scaling
|
||||||
|
height: 20 * scaling
|
||||||
|
values: CavaService.values
|
||||||
|
fillColor: Color.mOnSurfaceVariant
|
||||||
|
opacity: 0.4
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Loader {
|
||||||
id: mainContainer
|
anchors.centerIn: parent
|
||||||
anchors.fill: parent
|
active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "mirrored"
|
||||||
|
&& MediaService.isPlaying && MediaService.trackLength > 0
|
||||||
|
z: 0
|
||||||
|
sourceComponent: MirroredSpectrum {
|
||||||
|
width: mediaMini.width - Style.marginS * scaling
|
||||||
|
height: mediaMini.height - Style.marginS * scaling
|
||||||
|
values: CavaService.values
|
||||||
|
fillColor: Color.mOnSurfaceVariant
|
||||||
|
opacity: 0.4
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "wave"
|
||||||
|
&& MediaService.isPlaying && MediaService.trackLength > 0
|
||||||
|
z: 0
|
||||||
|
sourceComponent: WaveSpectrum {
|
||||||
|
width: mediaMini.width - Style.marginS * scaling
|
||||||
|
height: mediaMini.height - Style.marginS * scaling
|
||||||
|
values: CavaService.values
|
||||||
|
fillColor: Color.mOnSurfaceVariant
|
||||||
|
opacity: 0.4
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Main Content Layout ---
|
||||||
|
RowLayout {
|
||||||
|
id: contentLayout
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
anchors.leftMargin: Style.marginS * scaling
|
anchors.leftMargin: Style.marginS * scaling
|
||||||
anchors.rightMargin: Style.marginS * scaling
|
spacing: Style.marginS * scaling
|
||||||
|
z: 1
|
||||||
|
|
||||||
Loader {
|
NIcon {
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
id: windowIcon
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
text: MediaService.isPlaying ? "pause" : "play_arrow"
|
||||||
active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "linear"
|
font.pointSize: Style.fontSizeL * scaling
|
||||||
&& MediaService.isPlaying && MediaService.trackLength > 0
|
Layout.alignment: Qt.AlignVCenter
|
||||||
z: 0
|
visible: !Settings.data.audio.showMiniplayerAlbumArt && getTitle() !== "" && !trackArt.visible
|
||||||
|
}
|
||||||
|
|
||||||
sourceComponent: LinearSpectrum {
|
NImageCircled {
|
||||||
width: mainContainer.width - Style.marginS * scaling
|
id: trackArt
|
||||||
height: 20 * scaling
|
imagePath: MediaService.trackArtUrl
|
||||||
values: CavaService.values
|
fallbackIcon: MediaService.isPlaying ? "pause" : "play_arrow"
|
||||||
fillColor: Color.mOnSurfaceVariant
|
borderWidth: 0
|
||||||
opacity: 0.4
|
border.color: Color.transparent
|
||||||
}
|
Layout.preferredWidth: Math.round(18 * scaling)
|
||||||
|
Layout.preferredHeight: Math.round(18 * scaling)
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
visible: Settings.data.audio.showMiniplayerAlbumArt
|
||||||
|
}
|
||||||
|
|
||||||
Loader {
|
NText {
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
id: titleText
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
Layout.preferredWidth: {
|
||||||
active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "mirrored"
|
if (mouseArea.containsMouse) {
|
||||||
&& MediaService.isPlaying && MediaService.trackLength > 0
|
return Math.round(Math.min(fullTitleMetrics.contentWidth, root.maxWidth * scaling))
|
||||||
z: 0
|
} else {
|
||||||
|
return Math.round(Math.min(fullTitleMetrics.contentWidth, root.minWidth * scaling))
|
||||||
sourceComponent: MirroredSpectrum {
|
|
||||||
width: mainContainer.width - Style.marginS * scaling
|
|
||||||
height: mainContainer.height - Style.marginS * scaling
|
|
||||||
values: CavaService.values
|
|
||||||
fillColor: Color.mOnSurfaceVariant
|
|
||||||
opacity: 0.4
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
text: getTitle()
|
||||||
|
font.pointSize: Style.fontSizeS * scaling
|
||||||
|
font.weight: Style.fontWeightMedium
|
||||||
|
elide: Text.ElideRight
|
||||||
|
color: Color.mTertiary
|
||||||
|
Layout.alignment: Qt.AlignVCenter
|
||||||
|
|
||||||
Loader {
|
Behavior on Layout.preferredWidth {
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
NumberAnimation {
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
duration: Style.animationSlow
|
||||||
active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "wave"
|
easing.type: Easing.InOutCubic
|
||||||
&& MediaService.isPlaying && MediaService.trackLength > 0
|
|
||||||
z: 0
|
|
||||||
|
|
||||||
sourceComponent: WaveSpectrum {
|
|
||||||
width: mainContainer.width - Style.marginS * scaling
|
|
||||||
height: mainContainer.height - Style.marginS * scaling
|
|
||||||
values: CavaService.values
|
|
||||||
fillColor: Color.mOnSurfaceVariant
|
|
||||||
opacity: 0.4
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Row {
|
MouseArea {
|
||||||
id: row
|
id: mouseArea
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.fill: parent
|
||||||
spacing: Style.marginS * scaling
|
hoverEnabled: true
|
||||||
z: 1 // Above the visualizer
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
|
||||||
NIcon {
|
onClicked: mouse => {
|
||||||
id: windowIcon
|
if (mouse.button === Qt.LeftButton) {
|
||||||
text: MediaService.isPlaying ? "pause" : "play_arrow"
|
MediaService.playPause()
|
||||||
font.pointSize: Style.fontSizeL * scaling
|
} else if (mouse.button == Qt.RightButton) {
|
||||||
verticalAlignment: Text.AlignVCenter
|
MediaService.next()
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
tooltip.visible = false
|
||||||
visible: !Settings.data.audio.showMiniplayerAlbumArt && getTitle() !== "" && !trackArt.visible
|
} else if (mouse.button == Qt.MiddleButton) {
|
||||||
}
|
MediaService.previous()
|
||||||
|
tooltip.visible = false
|
||||||
Column {
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
visible: Settings.data.audio.showMiniplayerAlbumArt
|
|
||||||
|
|
||||||
Item {
|
|
||||||
width: Math.round(18 * scaling)
|
|
||||||
height: Math.round(18 * scaling)
|
|
||||||
|
|
||||||
NImageCircled {
|
|
||||||
id: trackArt
|
|
||||||
anchors.fill: parent
|
|
||||||
imagePath: MediaService.trackArtUrl
|
|
||||||
fallbackIcon: MediaService.isPlaying ? "pause" : "play_arrow"
|
|
||||||
borderWidth: 0
|
|
||||||
border.color: Color.transparent
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
NText {
|
|
||||||
id: titleText
|
|
||||||
|
|
||||||
// For short titles, show full. For long titles, truncate and expand on hover
|
|
||||||
width: {
|
|
||||||
if (mouseArea.containsMouse) {
|
|
||||||
return Math.round(Math.min(fullTitleMetrics.contentWidth, root.maxWidth * scaling))
|
|
||||||
} else {
|
|
||||||
return Math.round(Math.min(fullTitleMetrics.contentWidth, root.minWidth * scaling))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
text: getTitle()
|
|
||||||
font.pointSize: Style.fontSizeS * scaling
|
|
||||||
font.weight: Style.fontWeightMedium
|
|
||||||
elide: Text.ElideRight
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
verticalAlignment: Text.AlignVCenter
|
|
||||||
color: Color.mTertiary
|
|
||||||
|
|
||||||
Behavior on width {
|
|
||||||
NumberAnimation {
|
|
||||||
duration: Style.animationSlow
|
|
||||||
easing.type: Easing.InOutCubic
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mouse area for hover detection
|
|
||||||
MouseArea {
|
|
||||||
id: mouseArea
|
|
||||||
anchors.fill: parent
|
|
||||||
hoverEnabled: true
|
|
||||||
cursorShape: Qt.PointingHandCursor
|
|
||||||
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
|
|
||||||
onClicked: mouse => {
|
|
||||||
if (mouse.button === Qt.LeftButton) {
|
|
||||||
MediaService.playPause()
|
|
||||||
} else if (mouse.button == Qt.RightButton) {
|
|
||||||
MediaService.next()
|
|
||||||
// Need to hide the tooltip instantly
|
|
||||||
tooltip.visible = false
|
|
||||||
} else if (mouse.button == Qt.MiddleButton) {
|
|
||||||
MediaService.previous()
|
|
||||||
// Need to hide the tooltip instantly
|
|
||||||
tooltip.visible = false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
onEntered: {
|
onEntered: {
|
||||||
if (tooltip.text !== "") {
|
if (tooltip.text !== "") {
|
||||||
tooltip.show()
|
tooltip.show()
|
||||||
}
|
|
||||||
}
|
|
||||||
onExited: {
|
|
||||||
tooltip.hide()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
onExited: {
|
||||||
|
tooltip.hide()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -212,7 +176,7 @@ Row {
|
||||||
}
|
}
|
||||||
return str
|
return str
|
||||||
}
|
}
|
||||||
target: anchor
|
target: mediaMini
|
||||||
positionAbove: Settings.data.bar.position === "bottom"
|
positionAbove: Settings.data.bar.position === "bottom"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue