[vlc-commits] QML: implement a mini player in the main interface

Adrien Maglo git at videolan.org
Tue Jul 16 16:01:16 CEST 2019


vlc | branch: master | Adrien Maglo <magsoft at videolan.org> | Fri Jun  7 19:29:57 2019 +0200| [26a84200484257f3a1e86f8f70fbd122f4a63bbd] | committer: Jean-Baptiste Kempf

QML: implement a mini player in the main interface

Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=26a84200484257f3a1e86f8f70fbd122f4a63bbd
---

 modules/gui/qt/Makefile.am                       |   1 +
 modules/gui/qt/qml/MainInterface.qml             |   8 +-
 modules/gui/qt/qml/mediacenter/MCMainDisplay.qml |   4 +
 modules/gui/qt/qml/mediacenter/MiniPlayer.qml    | 143 +++++++++++++++++++++++
 modules/gui/qt/qml/style/VLCStyle.qml            |   2 +
 modules/gui/qt/vlc.qrc                           |   1 +
 6 files changed, 155 insertions(+), 4 deletions(-)

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 0055489d13..50b4d9f3ad 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -596,6 +596,7 @@ libqt_plugin_la_QML = \
 	gui/qt/qml/mediacenter/NetworkDriveDisplay.qml \
 	gui/qt/qml/mediacenter/NetworkFileDisplay.qml \
 	gui/qt/qml/mediacenter/NetworkListItem.qml \
+	gui/qt/qml/mediacenter/MiniPlayer.qml \
 	gui/qt/qml/playlist/PlaylistListView.qml \
 	gui/qt/qml/playlist/PlaylistMainView.qml \
 	gui/qt/qml/playlist/PLItem.qml \
diff --git a/modules/gui/qt/qml/MainInterface.qml b/modules/gui/qt/qml/MainInterface.qml
index ac828cff63..e3541272ee 100644
--- a/modules/gui/qt/qml/MainInterface.qml
+++ b/modules/gui/qt/qml/MainInterface.qml
@@ -121,16 +121,16 @@ Rectangle {
             id: stackView
             anchors.fill: parent
             focus: true
-            property int prevPlayerState: PlayerController.PLAYING_STATE_STOPPED
 
             Connections {
                 target: player
                 onPlayingStateChanged: {
-                    if (state == PlayerController.PLAYING_STATE_STOPPED )
+                    if (state === PlayerController.PLAYING_STATE_STOPPED)
                         loadCurrentHistoryView()
-                    else if (stackView.prevPlayerState == PlayerController.PLAYING_STATE_STOPPED)
+                }
+                onHasVideoOutputChanged: {
+                    if (player.hasVideoOutput)
                         stackView.replace(audioplayerComp)
-                    stackView.prevPlayerState = state
                 }
             }
         }
diff --git a/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml b/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
index 25b78d4cde..d5d07e9f2e 100644
--- a/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
@@ -203,6 +203,10 @@ Utils.NavigableFocusScope {
                         }
                     }
                 }
+
+                MiniPlayer {
+                    id: miniPlayer
+                }
             }
 
             Connections {
diff --git a/modules/gui/qt/qml/mediacenter/MiniPlayer.qml b/modules/gui/qt/qml/mediacenter/MiniPlayer.qml
new file mode 100644
index 0000000000..b7690590c7
--- /dev/null
+++ b/modules/gui/qt/qml/mediacenter/MiniPlayer.qml
@@ -0,0 +1,143 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.3
+
+import org.videolan.vlc 0.1
+
+import "qrc:///utils/" as Utils
+import "qrc:///style/"
+
+Utils.NavigableFocusScope {
+
+    id: root
+
+    Layout.fillWidth: true
+
+    Connections {
+        target: player
+        onPlayingStateChanged: {
+            root.height = VLCStyle.miniPlayerHeight
+            if (state === PlayerController.PLAYING_STATE_STOPPED)
+                animateRetract.start()
+            else {
+                animateExpand.start()
+            }
+        }
+    }
+
+    PropertyAnimation {
+        id: animateExpand;
+        target: root;
+        properties: "implicitHeight"
+        duration: 250
+        to: root.childrenRect.height
+    }
+
+    PropertyAnimation {
+        id: animateRetract;
+        target: root;
+        properties: "implicitHeight"
+        duration: 250
+        to: 0
+    }
+
+    Rectangle {
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        height: VLCStyle.miniPlayerHeight
+        color: VLCStyle.colors.banner
+
+        RowLayout {
+            anchors.fill: parent
+
+            Image {
+                id: cover
+                source: (mainPlaylistController.currentItem.artwork && mainPlaylistController.currentItem.artwork.toString())
+                        ? mainPlaylistController.currentItem.artwork
+                        : VLCStyle.noArtAlbum
+                fillMode: Image.PreserveAspectFit
+
+                Layout.fillHeight: true
+                Layout.maximumWidth: height
+            }
+
+            Column {
+                Layout.alignment: Qt.AlignVCenter
+                Layout.fillWidth: true
+
+                leftPadding: VLCStyle.margin_normal
+
+                Text {
+                    id: titleLabel
+                    text: mainPlaylistController.currentItem.title
+                    font.pixelSize: VLCStyle.fontSize_large
+                    color: VLCStyle.colors.text
+                }
+
+                Text {
+                    id: artistLabel
+                    text: mainPlaylistController.currentItem.artist
+                    font.pixelSize: VLCStyle.fontSize_normal
+                    color: VLCStyle.colors.lightText
+                }
+            }
+
+            Row {
+                focus: true
+
+                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+
+                rightPadding: VLCStyle.margin_normal
+
+                Utils.IconToolButton {
+                    id: randomBtn
+                    size: VLCStyle.icon_normal
+                    checked: mainPlaylistController.random
+                    text: VLCIcons.shuffle_on
+                    onClicked: mainPlaylistController.toggleRandom()
+                    KeyNavigation.right: prevBtn
+                }
+
+                Utils.IconToolButton {
+                    id: prevBtn
+                    size: VLCStyle.icon_normal
+                    text: VLCIcons.previous
+                    onClicked: mainPlaylistController.prev()
+                    KeyNavigation.right: playBtn
+                }
+
+                Utils.IconToolButton {
+                    id: playBtn
+                    size: VLCStyle.icon_normal
+                    text: (player.playingState !== PlayerController.PLAYING_STATE_PAUSED
+                           && player.playingState !== PlayerController.PLAYING_STATE_STOPPED)
+                                 ? VLCIcons.pause
+                                 : VLCIcons.play
+                    onClicked: mainPlaylistController.togglePlayPause()
+                    focus: true
+                    KeyNavigation.right: nextBtn
+                }
+
+                Utils.IconToolButton {
+                    id: nextBtn
+                    size: VLCStyle.icon_normal
+                    text: VLCIcons.next
+                    onClicked: mainPlaylistController.next()
+                    KeyNavigation.right: repeatBtn
+                }
+
+                Utils.IconToolButton {
+                    id: repeatBtn
+                    size: VLCStyle.icon_normal
+                    checked: mainPlaylistController.repeatMode !== PlaylistControllerModel.PLAYBACK_REPEAT_NONE
+                    text: (mainPlaylistController.repeatMode == PlaylistControllerModel.PLAYBACK_REPEAT_CURRENT)
+                                 ? VLCIcons.repeat_one
+                                 : VLCIcons.repeat_all
+                    onClicked: mainPlaylistController.toggleRepeatMode()
+                }
+            }
+        }
+    }
+}
diff --git a/modules/gui/qt/qml/style/VLCStyle.qml b/modules/gui/qt/qml/style/VLCStyle.qml
index 0e0fcfcb63..1b98d20953 100644
--- a/modules/gui/qt/qml/style/VLCStyle.qml
+++ b/modules/gui/qt/qml/style/VLCStyle.qml
@@ -100,6 +100,8 @@ Item {
 
     property int selectedBorder: 2
 
+    property int miniPlayerHeight: 60 * scale;
+
     //timings
     property int delayToolTipAppear: 500;
     property int timingPlaylistClose: 1000;
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 60b53c889f..93d4d21384 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -214,6 +214,7 @@
         <file alias="NetworkDriveDisplay.qml">qml/mediacenter/NetworkDriveDisplay.qml</file>
         <file alias="NetworkFileDisplay.qml">qml/mediacenter/NetworkFileDisplay.qml</file>
         <file alias="NetworkListItem.qml">qml/mediacenter/NetworkListItem.qml</file>
+        <file alias="MiniPlayer.qml">qml/mediacenter/MiniPlayer.qml</file>
     </qresource>
     <qresource prefix="/style">
         <file alias="qmldir">qml/style/qmldir</file>



More information about the vlc-commits mailing list