[vlc-devel] [PATCH 33/33] [WIP] QML: implement a mini player in the media center interface

Adrien Maglo magsoft at videolan.org
Wed Jun 12 14:01:40 CEST 2019


---
 modules/gui/qt/Makefile.am                    |   1 +
 modules/gui/qt/qml/MainInterface.qml          |   4 +-
 .../gui/qt/qml/mediacenter/MCMainDisplay.qml  |   4 +
 modules/gui/qt/qml/mediacenter/MiniPlayer.qml | 114 ++++++++++++++++++
 modules/gui/qt/qml/style/VLCStyle.qml         |   2 +
 modules/gui/qt/vlc.qrc                        |   2 +
 6 files changed, 125 insertions(+), 2 deletions(-)
 create mode 100644 modules/gui/qt/qml/mediacenter/MiniPlayer.qml

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index f84c0e3954..004c5c6c01 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -577,6 +577,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 0d23bc068b..51faad8e26 100644
--- a/modules/gui/qt/qml/MainInterface.qml
+++ b/modules/gui/qt/qml/MainInterface.qml
@@ -108,10 +108,10 @@ Rectangle {
             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)
-                        stackView.replace(audioplayerComp)
+                        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 a7cfaa2252..ba45f76cdb 100644
--- a/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
@@ -211,6 +211,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..a6ee6da666
--- /dev/null
+++ b/modules/gui/qt/qml/mediacenter/MiniPlayer.qml
@@ -0,0 +1,114 @@
+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 {
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    height: VLCStyle.miniPlayerHeight
+
+    Rectangle {
+
+        anchors.fill: parent
+        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
+
+                anchors.verticalCenter: parent.verticalCenter
+                Layout.alignment: Qt.AlignRight
+
+                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 de7431f9f3..e1c5a52d7d 100644
--- a/modules/gui/qt/qml/style/VLCStyle.qml
+++ b/modules/gui/qt/qml/style/VLCStyle.qml
@@ -99,6 +99,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 232fc0941e..30c0f748f0 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -104,6 +104,7 @@
         <file alias="noart_artist_small.svg">pixmaps/noart_artist_small.svg</file>
         <file>qml/utils/SearchBox.qml</file>
         <file>qml/utils/SortControl.qml</file>
+        <file>qml/mediacenter/MiniPlayer.qml</file>
     </qresource>
     <qresource prefix="/prefsmenu">
         <file alias="cone_audio_64.png">pixmaps/prefs/spref_cone_Audio_64.png</file>
@@ -207,6 +208,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>
-- 
2.20.1



More information about the vlc-devel mailing list