[vlc-devel] [PATCH 2/3] qml: Create topBar for player

Rohan Rajpal rohan17089 at iiitd.ac.in
Fri Jul 19 13:46:46 CEST 2019


Add topbar that will contain
the back and playlist button
---
 modules/gui/qt/Makefile.am                    |  1 +
 .../qt/components/playercontrolbarmodel.cpp   |  2 +-
 .../qt/components/playercontrolbarmodel.hpp   | 83 ++++++++----------
 modules/gui/qt/qml/player/ControlButtons.qml  |  4 +-
 modules/gui/qt/qml/player/Player.qml          | 86 ++++++++++++++-----
 modules/gui/qt/qml/player/TopBar.qml          | 80 +++++++++++++++++
 modules/gui/qt/vlc.qrc                        |  1 +
 7 files changed, 182 insertions(+), 75 deletions(-)
 create mode 100644 modules/gui/qt/qml/player/TopBar.qml

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index d8e311ac72..60f58484c1 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -546,6 +546,7 @@ libqt_plugin_la_QML = \
 	gui/qt/qml/player/ModalControlBar.qml \
 	gui/qt/qml/player/SliderBar.qml \
 	gui/qt/qml/player/TeletextWidget.qml \
+	gui/qt/qml/player/TopBar.qml \
 	gui/qt/qml/dialogs/Dialogs.qml \
 	gui/qt/qml/dialogs/ModalDialog.qml \
 	gui/qt/qml/utils/DNDLabel.qml \
diff --git a/modules/gui/qt/components/playercontrolbarmodel.cpp b/modules/gui/qt/components/playercontrolbarmodel.cpp
index 2fd1df9682..101507d0c6 100644
--- a/modules/gui/qt/components/playercontrolbarmodel.cpp
+++ b/modules/gui/qt/components/playercontrolbarmodel.cpp
@@ -20,7 +20,7 @@
 #include "qt.hpp"
 #include "playercontrolbarmodel.hpp"
 
-#define MAIN_TB1_DEFAULT "67;68;37;65;19;22;0-2;23;20;65;35;7"
+#define MAIN_TB1_DEFAULT "20;65;17;3;0-2;4;18;65;7"
 
 PlayerControlBarModel::PlayerControlBarModel(QObject *_parent) : QAbstractListModel(_parent)
 {
diff --git a/modules/gui/qt/components/playercontrolbarmodel.hpp b/modules/gui/qt/components/playercontrolbarmodel.hpp
index f10f29ce0e..23320d0c46 100644
--- a/modules/gui/qt/components/playercontrolbarmodel.hpp
+++ b/modules/gui/qt/components/playercontrolbarmodel.hpp
@@ -42,55 +42,40 @@ public:
     };
     enum ButtonType_e
     {
-
-        PLAY_BUTTON,            //0
-        STOP_BUTTON,            //1
-        OPEN_BUTTON,            //2
-        PREV_SLOW_BUTTON,       //3
-        NEXT_FAST_BUTTON,       //4
-        SLOWER_BUTTON,          //5
-        FASTER_BUTTON,          //6
-        FULLSCREEN_BUTTON,      //7
-        DEFULLSCREEN_BUTTON,    //8
-        EXTENDED_BUTTON,        //9
-        PLAYLIST_BUTTON,        //10
-        SNAPSHOT_BUTTON,        //11
-        RECORD_BUTTON,          //12
-        ATOB_BUTTON,            //13
-        FRAME_BUTTON,           //14
-        REVERSE_BUTTON,         //15
-        SKIP_BACK_BUTTON,       //16
-        SKIP_FW_BUTTON,         //17
-        QUIT_BUTTON,            //18
-        RANDOM_BUTTON,          //19
-        LOOP_BUTTON,            //20
-        INFO_BUTTON,            //21
-        PREVIOUS_BUTTON,        //22
-        NEXT_BUTTON,            //23
-        OPEN_SUB_BUTTON,        //24
-        FULLWIDTH_BUTTON,       //25
-        BUTTON_MAX,             //26
-
-        SPLITTER = 0x20,        //32
-        INPUT_SLIDER,           //33
-        TIME_LABEL,             //34
-        VOLUME,                 //35
-        VOLUME_SPECIAL,         //36
-        MENU_BUTTONS,           //37
-        TELETEXT_BUTTONS,       //38
-        ADVANCED_CONTROLLER,    //39
-        PLAYBACK_BUTTONS,       //40
-        ASPECT_RATIO_COMBOBOX,  //41
-        SPEED_LABEL,            //42
-        TIME_LABEL_ELAPSED,     //43
-        TIME_LABEL_REMAINING,   //44
-        SPECIAL_MAX,            //45
-
-        WIDGET_SPACER = 0x40,   //64
-        WIDGET_SPACER_EXTEND,   //65
-        WIDGET_MAX,             //66
-        GOBACK_BUTTON,          //67
-        LANG_BUTTON             //68
+        PLAY_BUTTON,
+        STOP_BUTTON,
+        OPEN_BUTTON,
+        PREVIOUS_BUTTON,
+        NEXT_BUTTON,
+        SLOWER_BUTTON,
+        FASTER_BUTTON,
+        FULLSCREEN_BUTTON,
+        EXTENDED_BUTTON,
+        PLAYLIST_BUTTON,
+        SNAPSHOT_BUTTON,
+        RECORD_BUTTON,
+        ATOB_BUTTON,
+        FRAME_BUTTON,
+        SKIP_BACK_BUTTON,
+        SKIP_FW_BUTTON,
+        QUIT_BUTTON,
+        RANDOM_BUTTON,
+        LOOP_BUTTON,
+        INFO_BUTTON,
+        LANG_BUTTON,
+        MENU_BUTTON,
+        BACK_BUTTON,
+        BUTTON_MAX,
+
+        SPLITTER = 0x20,
+        VOLUME,
+        TELETEXT_BUTTONS,
+        ASPECT_RATIO_COMBOBOX,
+        SPECIAL_MAX,
+
+        WIDGET_SPACER = 0x40,
+        WIDGET_SPACER_EXTEND,
+        WIDGET_MAX
     };
     Q_ENUM(ButtonType_e)
 
diff --git a/modules/gui/qt/qml/player/ControlButtons.qml b/modules/gui/qt/qml/player/ControlButtons.qml
index a69f9f7dcf..d3a672d3cd 100644
--- a/modules/gui/qt/qml/player/ControlButtons.qml
+++ b/modules/gui/qt/qml/player/ControlButtons.qml
@@ -37,8 +37,8 @@ Item{
         case PlayerControlBarModel.LOOP_BUTTON: return repeatBtnDelegate
         case PlayerControlBarModel.LANG_BUTTON: return langBtnDelegate
         case PlayerControlBarModel.PLAYLIST_BUTTON:return playlistBtnDelegate
-        case PlayerControlBarModel.MENU_BUTTONS:return  menuBtnDelegate
-        case PlayerControlBarModel.GOBACK_BUTTON:return  backBtnDelegate
+        case PlayerControlBarModel.MENU_BUTTON:return  menuBtnDelegate
+        case PlayerControlBarModel.BACK_BUTTON:return  backBtnDelegate
         case PlayerControlBarModel.WIDGET_SPACER:return  spacerDelegate
         case PlayerControlBarModel.WIDGET_SPACER_EXTEND:return  extendiblespacerDelegate
         case PlayerControlBarModel.RECORD_BUTTON: return recordBtnDelegate
diff --git a/modules/gui/qt/qml/player/Player.qml b/modules/gui/qt/qml/player/Player.qml
index 0a5e749ddb..f75699ab4a 100644
--- a/modules/gui/qt/qml/player/Player.qml
+++ b/modules/gui/qt/qml/player/Player.qml
@@ -116,10 +116,47 @@ Utils.NavigableFocusScope {
         }
     }
 
+    Utils.DrawerExt{
+        id: topcontrolView
+        anchors{
+            left: parent.left
+            right: parent.right
+            top: parent.top
+        }
+        edge: Utils.DrawerExt.Edges.Top
+        property var noAutoHide: topcontrolView.contentItem.noAutoHide
+
+        state: "visible"
+
+        component: TopBar{
+            focus: true
+            width: topcontrolView.width
+            noAutoHide: noAutoHideInt ||  playlistpopup.state === "visible"
+            onNoAutoHideChanged: {
+                if (!noAutoHide)
+                    toolbarAutoHide.restart()
+            }
+
+            onActionDown: controlBarView.forceActiveFocus()
+            onActionUp: root.actionUp(index)
+            onActionLeft: root.actionLeft(index)
+            onActionRight: root.actionRight(index)
+            onActionCancel: root.actionCancel(index)
+
+            Keys.onPressed: {
+                if (event.key === Qt.Key_Menu) {
+                    toolbarAutoHide.toggleForceVisible()
+                } else {
+                    rootWindow.sendHotkey(event.key);
+                }
+            }
+        }
+    }
+
     Utils.DrawerExt {
         id: playlistpopup
         anchors {
-            top: parent.top
+            top: topcontrolView.bottom
             right: parent.right
             bottom: controlBarView.top
         }
@@ -139,8 +176,8 @@ Utils.NavigableFocusScope {
                 id: playlistView
                 focus: true
                 anchors.fill: parent
-                onActionLeft: playlistpopup.closeAndFocus(controlBarView)
-                onActionCancel: playlistpopup.closeAndFocus(controlBarView)
+                onActionLeft: playlistpopup.closeAndFocus(topcontrolView)
+                onActionCancel: playlistpopup.closeAndFocus(topcontrolView)
             }
         }
         onStateChanged: {
@@ -149,15 +186,13 @@ Utils.NavigableFocusScope {
         }
 
         function closeAndFocus(item){
+            rootWindow.playlistVisible = false
             if (!item)
                 return
-
-            rootWindow.playlistVisible = false
             item.forceActiveFocus()
         }
     }
 
-
     Utils.DrawerExt {
         id: controlBarView
         focus: true
@@ -178,7 +213,6 @@ Utils.NavigableFocusScope {
             height: 90 * VLCStyle.scale
             property alias noAutoHide: controllerId.noAutoHide
 
-
             MouseArea {
                 id: controllerMouseArea
                 hoverEnabled: true
@@ -195,7 +229,7 @@ Utils.NavigableFocusScope {
                             toolbarAutoHide.restart()
                     }
 
-                    onActionUp: root.actionUp(index)
+                    onActionUp: topcontrolView.forceActiveFocus()
                     onActionDown: root.actionDown(index)
                     onActionLeft: root.actionLeft(index)
                     onActionRight: root.actionRight(index)
@@ -208,15 +242,6 @@ Utils.NavigableFocusScope {
                         else
                             rootWindow.sendHotkey(event.key);
                     }
-
-                    //filter global events to keep toolbar
-                    //visible when user navigates within the control bar
-                    EventFilter {
-                        id: filter
-                        source: rootQMLView
-                        filterEnabled: controlBarView.state === "visible"
-                        Keys.onPressed: toolbarAutoHide.setVisible(5000)
-                    }
                 }
             }
         }
@@ -228,36 +253,51 @@ Utils.NavigableFocusScope {
         repeat: false
         interval: 3000
         onTriggered: {
-            _setVisible(false)
+            _setVisibleControlBar(false)
         }
 
-        function _setVisible(visible) {
+        function _setVisibleControlBar(visible) {
             if (visible)
             {
                 controlBarView.state = "visible"
-                controlBarView.forceActiveFocus()
+                topcontrolView.state = "visible"
+                if (!controlBarView.focus && !topcontrolView.focus)
+                    controlBarView.forceActiveFocus()
+
                 videoSurface.cursorShape = Qt.ArrowCursor
             }
             else
             {
-                if (controlBarView.noAutoHide)
+                if (controlBarView.noAutoHide || topcontrolView.noAutoHide)
                     return;
                 controlBarView.state = "hidden"
+                topcontrolView.state = "hidden"
                 videoSurface.forceActiveFocus()
                 videoSurface.cursorShape = Qt.BlankCursor
             }
         }
 
         function setVisible(duration) {
-            _setVisible(true)
+            _setVisibleControlBar(true)
             toolbarAutoHide.interval = duration
             toolbarAutoHide.restart()
         }
 
         function toggleForceVisible() {
-            _setVisible(controlBarView.state !== "visible")
+            _setVisibleControlBar(controlBarView.state !== "visible")
             toolbarAutoHide.stop()
         }
+
+    }
+
+    //filter global events to keep toolbar
+    //visible when user navigates within the control bar
+    EventFilter {
+        id: filter
+        source: rootQMLView
+        filterEnabled: controlBarView.state === "visible"
+            && (controlBarView.focus || topcontrolView.focus)
+        Keys.onPressed: toolbarAutoHide.setVisible(5000)
     }
 
     Connections {
diff --git a/modules/gui/qt/qml/player/TopBar.qml b/modules/gui/qt/qml/player/TopBar.qml
new file mode 100644
index 0000000000..ddbfe40e6d
--- /dev/null
+++ b/modules/gui/qt/qml/player/TopBar.qml
@@ -0,0 +1,80 @@
+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+import QtQuick 2.11
+import QtQuick.Layouts 1.3
+
+import org.videolan.vlc 0.1
+
+import "qrc:///style/"
+import "qrc:///utils/" as Utils
+
+Utils.NavigableFocusScope{
+    id: topFocusScope
+    height: VLCStyle.icon_topbar
+    property bool noAutoHide: false
+
+    property bool noAutoHideInt: !player.hasVideoOutput
+                              || !rootWindow.hasEmbededVideo
+                              || topcontrollerMouseArea.containsMouse || lockAutoHide
+    property bool lockAutoHide: false
+
+    Keys.priority: Keys.AfterItem
+    Keys.onPressed: defaultKeyAction(event, 0)
+
+    Rectangle{
+        id : topcontrolContent
+        color: VLCStyle.colors.setColorAlpha(VLCStyle.colors.banner, 0.8)
+        anchors.fill: parent
+
+        MouseArea {
+            id: topcontrollerMouseArea
+            hoverEnabled: true
+            anchors.fill: parent
+
+            RowLayout{
+                anchors.fill: parent
+                anchors.leftMargin:  VLCStyle.margin_xsmall
+                anchors.rightMargin: VLCStyle.margin_xsmall
+
+                Utils.IconToolButton {
+                    id: backBtn
+                    objectName: "IconToolButton"
+                    size: VLCStyle.icon_normal
+                    text: VLCIcons.exit
+                    onClicked: history.previous(History.Go)
+                    KeyNavigation.right: playlistBtn
+                    focus: true
+                }
+
+                Item{
+                    Layout.fillWidth: true
+                }
+
+                Utils.IconToolButton {
+                    id: playlistBtn
+                    objectName: PlayerControlBarModel.PLAYLIST_BUTTON
+                    size: VLCStyle.icon_normal
+                    text: VLCIcons.playlist
+                    onClicked: rootWindow.playlistVisible = !rootWindow.playlistVisible
+                    property bool acceptFocus: true
+                }
+            }
+        }
+    }
+}
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 17cc661998..b0747c8214 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -253,6 +253,7 @@
         <file alias="ControlButtons.qml">qml/player/ControlButtons.qml</file>
         <file alias="VolumeWidget.qml">qml/player/VolumeWidget.qml</file>
         <file alias="TeletextWidget.qml">qml/player/TeletextWidget.qml</file>
+        <file alias="TopBar.qml">qml/player/TopBar.qml</file>
     </qresource>
     <qresource prefix="/about">
         <file alias="About.qml">qml/about/About.qml</file>
-- 
2.17.1



More information about the vlc-devel mailing list