Improve title pan animation, add slideout animation

This commit is contained in:
Dark Steveneq
2025-10-14 23:03:38 +02:00
parent 18ad69ba5d
commit 6d0689718d
2 changed files with 60 additions and 35 deletions

View File

@@ -31,43 +31,69 @@ ApplicationWindow {
// font.bold: true
}
Rectangle {
Item {
Layout.leftMargin: 5
visible: Player.currentIndex != null
color: Colors.primary
radius: 5
clip: true
width: 320
height: 36
Rectangle {
anchors.fill: parent
id: nowplaying_root
// visible: Player.currentIndex != null
visible: anchors.bottomMargin < 42
color: Colors.primary
radius: 5
clip: true
Label {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 1
anchors.leftMargin: 4
anchors.rightMargin: 4
text: (Player.loading ? "Loading " : "Playing ") + (Player.currentIndex != null ? qsTr(Player.currentStream.name) : "")
heading: "h5"
}
NumberAnimation {
running: Player.currentIndex != null
target: nowplaying_root
property: "anchors.bottomMargin"
from: 42
to: 0
duration: 160
}
Label {
id: nowplaying_title
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottomMargin: 1
anchors.leftMargin: 4
anchors.rightMargin: 4
text: (Player.currentIndex != null ? qsTr(Player.currentStream.title) : "")
heading: "h3"
NumberAnimation {
running: Player.currentIndex == null
target: nowplaying_root
property: "anchors.bottomMargin"
from: 0
to: 42
duration: 160
}
SequentialAnimation {
running: true
loops: Animation.Infinite
Label {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 1
anchors.leftMargin: 4
anchors.rightMargin: 4
text: (Player.loading ? "Loading " : "Playing ") + (Player.currentIndex != null ? qsTr(Player.currentStream.name) : "")
heading: "h5"
}
NumberAnimation { target: nowplaying_title; property: "anchors.rightMargin"; from: 0; to: 320; duration: 5000 }
NumberAnimation { target: nowplaying_title; property: "anchors.leftMargin"; from: 0; to: 320; duration: 5000 }
Label {
id: nowplaying_title
anchors.bottom: parent.bottom
anchors.left: parent.left
// anchors.right: parent.right
anchors.bottomMargin: 1
anchors.leftMargin: 4
// anchors.rightMargin: 4
text: (Player.currentIndex != null ? qsTr(Player.currentStream.title) : "")
heading: "h3"
SequentialAnimation {
running: nowplaying_title.width > 320
loops: Animation.Infinite
NumberAnimation { target: nowplaying_title; property: "anchors.leftMargin"; from: 4; to: 4; duration: 10000 }
NumberAnimation { target: nowplaying_title; property: "anchors.leftMargin"; from: 4; to: -nowplaying_title.width + 324; duration: nowplaying_title.width * 4 }
NumberAnimation { target: nowplaying_title; property: "anchors.leftMargin"; from: -nowplaying_title.width + 324; to: -nowplaying_title.width + 324; duration: 10000 }
NumberAnimation { target: nowplaying_title; property: "anchors.leftMargin"; from: -nowplaying_title.width + 324; to: 4; duration: nowplaying_title.width * 4 }
}
}
}
}

View File

@@ -35,7 +35,7 @@ Item {
property alias playing: player.playing
property alias volume: output.volume
readonly property var loading: player.mediaStatus == Qt.LoadingMedia
property var loading: player.mediaStatus == Qt.LoadingMedia
property var currentIndex: null
property var currentStream: null
@@ -71,7 +71,7 @@ Item {
audioOutput: AudioOutput {
id: output
volume: 0.4
volume: 0.3
}
onErrorOccurred: function(error, errorString) {
@@ -99,11 +99,10 @@ Item {
console.warn("Unknown slug encountered in metadata: " + station.server_name);
return
}
parent.streams[index].title = station.title;
parent.streams[index].title = station.title.replace(/\[[a-zA-Z0-9]{11}\]/, "");
parent.streams[index].listeners = station.listeners;
if (index == parent.currentIndex) {
parent.currentStream.title = station.title;
parent.currentStream.listeners = station.listeners;
parent.currentStream = parent.streams[index];
}
});
// } catch {