Adding scrolling to track info

janbar · Dec 11, 2020 · 82f56e8 · 82f56e8
1 parent 8fccd4c
commit 82f56e8
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 26 deletions.
diff --git a/gui/controls2/components/MusicToolbar.qml b/gui/controls2/components/MusicToolbar.qml
@@ -199,30 +199,49 @@ Item {
                 }
 
                 /* Title of track */
-                Label {
-                    id: playerControlsTitle
-                    anchors {
-                        left: parent.left
-                        right: parent.right
+                Rectangle {
+                        id: trackTitleLabelMask
+                        anchors {
+                            left: playerControlsLabels.left
+                            right: playerControlsLabels.right
+                        }
+                    height: playerControlsTitle.height
+                    clip: true
+                    color: "transparent"
+
+                    Label {
+                        id: playerControlsTitle
+                        color: styleMusic.view.primaryColor
+                        font.pointSize: units.fs("medium")
+                        font.weight: Font.DemiBold
+                        text: player.currentMetaTitle
                     }
-                    color: styleMusic.view.primaryColor
-                    elide: Text.ElideRight
-                    font.pointSize: units.fs("medium")
-                    font.weight: Font.DemiBold
-                    text: player.currentMetaTitle
                 }
 
                 /* Artist of track */
-                Label {
-                    id: playerControlsArtist
-                    anchors {
-                        left: parent.left
-                        right: parent.right
+                Rectangle {
+                        id: trackArtistLabelMask
+                        anchors {
+                            left: playerControlsLabels.left
+                            right: playerControlsLabels.right
+                        }
+                    height: playerControlsArtist.height
+                    clip: true
+                    color: "transparent"
+
+                    Label {
+                        id: playerControlsArtist
+                        color: styleMusic.view.secondaryColor
+                        font.pointSize: units.fs("small")
+                        text: player.currentMetaArtist
                     }
-                    color: styleMusic.view.secondaryColor
-                    elide: Text.ElideRight
-                    font.pointSize: units.fs("small")
-                    text: player.currentMetaArtist
+                }
+
+                Timer {
+                    interval: 35
+                    onTriggered: moveMarquee()
+                    running: true
+                    repeat: true
                 }
             }
 
@@ -314,4 +333,22 @@ Item {
             }
         }
     }
+
+    function moveMarquee() {
+        if (playerControlsArtist.width > playerControlsLabels.width) {
+            if (playerControlsArtist.x + playerControlsArtist.width < -20) {
+                playerControlsArtist.x = playerControlsLabels.width;
+            }
+            playerControlsArtist.x -= 1;
+        } else if (playerControlsArtist.x !== 0)
+            playerControlsArtist.x = 0;
+
+        if (playerControlsTitle.width > playerControlsLabels.width) {
+            if (playerControlsTitle.x + playerControlsTitle.width < -20) {
+                playerControlsTitle.x = playerControlsLabels.width;
+            }
+            playerControlsTitle.x -= 1;
+        } else if (playerControlsTitle.x !== 0)
+            playerControlsTitle.x = 0;
+    }
 }
diff --git a/gui/controls2/components/NowPlayingFullView.qml b/gui/controls2/components/NowPlayingFullView.qml
@@ -123,17 +123,18 @@ Flickable {
             /* Artist of track */
             Label {
                 id: nowPlayingWideAspectArtist
-                anchors {
-                    left: parent.left
-                    leftMargin: units.gu(1)
-                    right: parent.right
-                    rightMargin: units.gu(1)
-                }
                 color: styleMusic.nowPlaying.primaryColor
-                elide: Text.ElideRight
                 font.pointSize: units.fs("small")
                 font.weight: Font.DemiBold
                 text: player.currentMetaArtist
+                x:units.gu(1)
+            }
+
+            Timer {
+                interval: 35
+                onTriggered: moveMarquee()
+                running: true
+                repeat: true
             }
         }
 
@@ -301,4 +302,14 @@ Flickable {
             width: units.gu(3)
         }
     }
+
+    function moveMarquee(){
+        if (nowPlayingWideAspectArtist.width > nowPlayingWideAspectArtist.parent.width){
+            if(nowPlayingWideAspectArtist.x + nowPlayingWideAspectArtist.width < -20){
+                nowPlayingWideAspectArtist.x = nowPlayingWideAspectArtist.parent.width;
+            }
+            nowPlayingWideAspectArtist.x -= 1;
+        } else if (nowPlayingWideAspectArtist.x !== units.gu(1))
+            nowPlayingWideAspectArtist.x = units.gu(1);
+    }
 }