Skip to content

Commit 13e2999

Browse files
itscrystallineitscrystalline
committed
feat(lyrics-fetch): implement vertical lyrics display
1 parent 57089b0 commit 13e2999

1 file changed

Lines changed: 106 additions & 49 deletions

File tree

‎lyrics-fetch/BarWidget.qml‎

Lines changed: 106 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,26 @@ Item {
2828
property bool hideWhenEmpty: pluginApi?.pluginSettings?.hideWhenEmpty ?? true
2929
property string customFontFamily: pluginApi?.pluginSettings?.fontFamily ?? Settings.data.ui.fontDefault
3030
property bool adaptScrollSpeed: pluginApi?.pluginSettings?.adaptScrollSpeed ?? true
31+
property string verticalRotationDirectionSetting: pluginApi?.pluginSettings?.verticalRotationDirection ?? "auto"
32+
property string verticalRotationDirection: {
33+
if (verticalRotationDirectionSetting === "cw" || verticalRotationDirectionSetting === "ccw")
34+
return verticalRotationDirectionSetting;
35+
return barPosition === "left" ? "cw" : "ccw";
36+
}
3137

3238
visible: !hideWhenEmpty || (lyricText !== "No Lyrics" && lyricText !== "")
3339

3440
property bool hovered: false
3541
property real scaling: 1.0
3642

3743
readonly property int iconSize: Math.round(18 * scaling)
38-
readonly property int verticalSize: Math.round((Style.baseWidgetSize - 5) * scaling)
39-
readonly property bool isVertical: Settings.data.bar.position === "left" || Settings.data.bar.position === "right"
44+
readonly property string barPosition: Settings.data.bar.position
45+
readonly property bool isVertical: barPosition === "left" || barPosition === "right"
46+
readonly property string verticalTooltipSide: barPosition === "left" ? "right" : "left"
47+
readonly property real capsuleThickness: Style.capsuleHeight
4048

41-
implicitWidth: visible ? (isVertical ? verticalSize : container.width) : 0
42-
implicitHeight: visible ? (isVertical ? verticalSize : Style.capsuleHeight) : 0
49+
implicitWidth: visible ? (isVertical ? capsuleThickness : container.width) : 0
50+
implicitHeight: visible ? (isVertical ? container.height : Style.capsuleHeight) : 0
4351

4452
Behavior on implicitWidth {
4553
NumberAnimation {
@@ -59,8 +67,8 @@ Item {
5967
anchors.left: parent.left
6068
anchors.verticalCenter: parent.verticalCenter
6169

62-
width: isVertical ? verticalSize : root.lyricText === "​" ? iconSize + Style.marginS : root.widgetWidth
63-
height: isVertical ? verticalSize : Style.capsuleHeight
70+
width: isVertical ? capsuleThickness : root.lyricText === "​" ? iconSize + Style.marginS : root.widgetWidth
71+
height: isVertical ? (root.lyricText === "​" ? iconSize + Style.marginS : root.widgetWidth) : Style.capsuleHeight
6472

6573
radius: Style.radiusM
6674
color: Style.capsuleColor
@@ -81,54 +89,90 @@ Item {
8189
}
8290
}
8391

84-
RowLayout {
92+
Item {
93+
id: contentWrapper
8594
anchors.fill: parent
86-
anchors.margins: isVertical ? 0 : Style.marginS * scaling
87-
spacing: Style.marginS * scaling
88-
visible: !isVertical
89-
90-
NIcon {
91-
Layout.alignment: Qt.AlignVCenter
92-
Layout.preferredWidth: iconSize
93-
Layout.preferredHeight: iconSize
94-
icon: "music"
95-
color: root.hovered ? Color.mPrimary : Color.mOnSurfaceVariant
96-
pointSize: Style.fontSizeL * scaling
97-
}
9895

99-
Item {
100-
Layout.fillWidth: true
101-
Layout.fillHeight: true
102-
clip: true
96+
RowLayout {
97+
anchors.fill: parent
98+
anchors.margins: Style.marginS * scaling
99+
spacing: Style.marginS * scaling
100+
visible: !isVertical
101+
102+
NIcon {
103+
Layout.alignment: Qt.AlignVCenter
104+
Layout.preferredWidth: iconSize
105+
Layout.preferredHeight: iconSize
106+
icon: "music"
107+
color: root.hovered ? Color.mPrimary : Color.mOnSurfaceVariant
108+
pointSize: Style.fontSizeL * scaling
109+
}
110+
111+
Item {
112+
Layout.fillWidth: true
113+
Layout.fillHeight: true
114+
clip: true
103115

104-
ScrollingText {
105-
anchors.fill: parent
106-
anchors.verticalCenter: parent.verticalCenter
116+
ScrollingText {
117+
anchors.fill: parent
118+
anchors.verticalCenter: parent.verticalCenter
107119

108-
text: root.lyricText
109-
textColor: Color.mOnSurface
120+
text: root.lyricText
121+
textColor: Color.mOnSurface
110122

111-
fontSize: root.customFontSize * scaling
112-
fontFamily: root.customFontFamily
123+
fontSize: root.customFontSize * scaling
124+
fontFamily: root.customFontFamily
113125

114-
mode: root.scrollMode
115-
speed: root.adaptScrollSpeed ? (titleMetrics.contentWidth - parent.width + 50) / root.lyricInterval * 1250 : root.scrollSpeed
116-
needsScroll: titleMetrics.contentWidth > parent.width
126+
mode: root.scrollMode
127+
speed: root.adaptScrollSpeed ? adaptiveSpeed : root.scrollSpeed
128+
needsScroll: titleMetrics.contentWidth > parent.width
129+
}
117130
}
118131
}
119-
}
120132

121-
Item {
122-
visible: isVertical
123-
anchors.centerIn: parent
124-
width: parent.width
125-
height: parent.height
133+
ColumnLayout {
134+
anchors.fill: parent
135+
anchors.margins: Style.marginS * scaling
136+
spacing: Style.marginS * scaling
137+
visible: isVertical
138+
139+
NIcon {
140+
Layout.alignment: Qt.AlignHCenter
141+
Layout.preferredWidth: iconSize
142+
Layout.preferredHeight: iconSize
143+
icon: "music"
144+
color: root.hovered ? Color.mPrimary : Color.mOnSurfaceVariant
145+
pointSize: Style.fontSizeL * scaling
146+
}
126147

127-
NIcon {
128-
anchors.centerIn: parent
129-
icon: "music"
130-
color: root.hovered ? Color.mPrimary : Color.mOnSurfaceVariant
131-
pointSize: Style.fontSizeM * scaling
148+
Item {
149+
Layout.fillWidth: true
150+
Layout.fillHeight: true
151+
clip: true
152+
153+
Item {
154+
anchors.centerIn: parent
155+
width: parent.height
156+
height: parent.width
157+
rotation: root.verticalRotationDirection === "cw" ? -90 : 90
158+
transformOrigin: Item.Center
159+
160+
ScrollingText {
161+
anchors.fill: parent
162+
anchors.verticalCenter: parent.verticalCenter
163+
164+
text: root.lyricText
165+
textColor: Color.mOnSurface
166+
167+
fontSize: root.customFontSize * scaling
168+
fontFamily: root.customFontFamily
169+
170+
mode: root.scrollMode
171+
speed: root.adaptScrollSpeed ? adaptiveSpeed : root.scrollSpeed
172+
needsScroll: titleMetrics.contentWidth > parent.width
173+
}
174+
}
175+
}
132176
}
133177
}
134178

@@ -162,16 +206,16 @@ Item {
162206
onEntered: {
163207
root.hovered = true;
164208
if (isVertical)
165-
TooltipService.show(root, root.lyricText, "right");
209+
TooltipService.show(root, root.lyricText, root.verticalTooltipSide);
166210
}
167211
onExited: {
168212
root.hovered = false;
169213
TooltipService.hide();
170214
}
171-
onClicked: (mouse) => {
172-
// Logger.d("MouseArea", "mouse clicked:", mouse.button)
215+
onClicked: mouse => {
216+
// Logger.d("MouseArea", "mouse clicked:", mouse.button)
173217
if (mouse.button === Qt.LeftButton) {
174-
openMediaPlayer.running = true
218+
openMediaPlayer.running = true;
175219
} else if (mouse.button === Qt.RightButton) {
176220
PanelService.showContextMenu(contextMenu, root, root.screen);
177221
}
@@ -203,8 +247,20 @@ Item {
203247
property real fontSize
204248
property string fontFamily
205249
property string mode
206-
property int speed
250+
property real speed
207251
property bool needsScroll
252+
readonly property real adaptiveSpeed: {
253+
if (!root.adaptScrollSpeed)
254+
return root.scrollSpeed;
255+
if (root.lyricInterval <= 0)
256+
return root.scrollSpeed;
257+
258+
const distance = titleMetrics.contentWidth - scrollText.width + 50;
259+
if (distance <= 0)
260+
return root.scrollSpeed;
261+
262+
return Math.max(1, (distance / root.lyricInterval) * 1250);
263+
}
208264

209265
implicitHeight: titleText.height
210266
clip: true
@@ -316,6 +372,7 @@ Item {
316372

317373
RowLayout {
318374
spacing: root.widgetWidth
375+
x: root.isVertical && root.verticalRotationDirection === "cw" ? parent.height - height : 0
319376

320377
NText {
321378
id: titleText

0 commit comments

Comments
 (0)