[vlc-devel] [RFC 80/82] qml: provide main entry point of the UI
Pierre Lamot
pierre at videolabs.io
Fri Feb 1 14:02:24 CET 2019
---
modules/gui/qt/Makefile.am | 2 +
modules/gui/qt/qml/BannerSources.qml | 199 +++++++++++++++++++++++++++
modules/gui/qt/qml/MainInterface.qml | 128 +++++++++++++++++
modules/gui/qt/vlc.qrc | 4 +
4 files changed, 333 insertions(+)
create mode 100644 modules/gui/qt/qml/BannerSources.qml
create mode 100644 modules/gui/qt/qml/MainInterface.qml
diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 8c563febed..620834d604 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -522,6 +522,8 @@ libqt_plugin_la_RES = \
gui/qt/pixmaps/valid.svg \
gui/qt/pixmaps/search_clear.svg \
gui/qt/pixmaps/lock.svg \
+ gui/qt/qml/MainInterface.qml \
+ gui/qt/qml/BannerSources.qml \
gui/qt/qml/about/About.qml \
gui/qt/qml/player/Player.qml \
gui/qt/qml/player/TrackInfo.qml \
diff --git a/modules/gui/qt/qml/BannerSources.qml b/modules/gui/qt/qml/BannerSources.qml
new file mode 100644
index 0000000000..1192df72f6
--- /dev/null
+++ b/modules/gui/qt/qml/BannerSources.qml
@@ -0,0 +1,199 @@
+/*****************************************************************************
+ * 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.Controls 2.4
+import QtQuick.Layouts 1.3
+import org.videolan.vlc 0.1
+
+
+import "qrc:///style/"
+import "qrc:///utils/" as Utils
+import "qrc:///menus/" as Menus
+
+
+Utils.NavigableFocusScope {
+ id: root
+ height: VLCStyle.icon_normal + VLCStyle.margin_small
+
+ property bool need_toggleView_button: false
+ property int selectedIndex: 0
+ property alias model: pLBannerSources.model
+
+ // Triggered when the toogleView button is selected
+ function toggleView () {
+ medialib.gridView = !medialib.gridView
+ }
+
+ Rectangle {
+ id: pLBannerSources
+
+ anchors.fill: parent
+
+ color: VLCStyle.colors.banner
+ property alias model: buttonView.model
+
+ RowLayout {
+ anchors.fill: parent
+
+ Utils.IconToolButton {
+ id: history_back
+ size: VLCStyle.icon_normal
+ text: VLCIcons.dvd_prev
+
+ focus: true
+ KeyNavigation.right: buttonView
+ onClicked: history.pop(History.Go)
+ }
+
+ /* Button for the sources */
+ TabBar {
+ id: buttonView
+
+ focusPolicy: Qt.StrongFocus
+
+ Layout.preferredHeight: VLCStyle.icon_normal
+ Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+ KeyNavigation.left: history_back
+
+ Component.onCompleted: {
+ buttonView.contentItem.focus= true
+ }
+
+ background: Rectangle {
+ color: "transparent"
+ }
+
+ property alias model: sourcesButtons.model
+ /* Repeater to display each button */
+ Repeater {
+ id: sourcesButtons
+ focus: true
+
+ TabButton {
+ id: control
+ text: model.displayText
+
+ //initial focus
+ focusPolicy: Qt.StrongFocus
+ //focus: index === 1
+ focus: model.selected
+
+ Component.onCompleted: {
+ if (model.selected) {
+ buttonView.currentIndex = index
+ }
+ }
+
+ checkable: true
+ padding: 0
+ onClicked: {
+ checked = !control.checked;
+ root.selectedIndex = model.index
+ }
+
+ font.pixelSize: VLCStyle.fontSize_normal
+
+ background: Rectangle {
+ height: parent.height
+ width: parent.contentItem.width
+ //color: (control.hovered || control.activeFocus) ? VLCStyle.colors.bgHover : VLCStyle.colors.banner
+ color: VLCStyle.colors.banner
+ }
+
+ contentItem: Row {
+ Image {
+ id: icon
+ anchors {
+ verticalCenter: parent.verticalCenter
+ rightMargin: VLCStyle.margin_xsmall
+ leftMargin: VLCStyle.margin_small
+ }
+ height: VLCStyle.icon_normal
+ width: VLCStyle.icon_normal
+ source: model.pic
+ fillMode: Image.PreserveAspectFit
+ }
+
+ Label {
+ text: control.text
+ font: control.font
+ color: control.hovered ? VLCStyle.colors.textActiveSource : VLCStyle.colors.text
+ verticalAlignment: Text.AlignVCenter
+ horizontalAlignment: Text.AlignHCenter
+
+ anchors {
+ verticalCenter: parent.verticalCenter
+ rightMargin: VLCStyle.margin_xsmall
+ leftMargin: VLCStyle.margin_small
+ }
+
+ Rectangle {
+ anchors {
+ left: parent.left
+ right: parent.right
+ bottom: parent.bottom
+ }
+ height: 2
+ visible: control.activeFocus || control.checked
+ color: control.activeFocus ? VLCStyle.colors.accent : VLCStyle.colors.bgHover
+ }
+ }
+ }
+ }
+ }
+ }
+
+
+ ToolBar {
+ Layout.preferredHeight: VLCStyle.icon_normal
+ //Layout.preferredWidth: VLCStyle.icon_normal * 3
+ Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+ background: Item{
+ width: parent.implicitWidth
+ height: parent.implicitHeight
+ }
+
+ Row {
+ Utils.IconToolButton {
+ id: menu_selector
+
+ size: VLCStyle.icon_normal
+ text: VLCIcons.menu
+
+ KeyNavigation.left: buttonView
+
+ onClicked: mainMenu.openBelow(this)
+
+ Menus.MainMenu {
+ id: mainMenu
+ onClosed: menu_selector.forceActiveFocus()
+ }
+ }
+ }
+ }
+ }
+ }
+
+ Keys.priority: Keys.AfterItem
+ Keys.onPressed: {
+ if (!event.accepted)
+ defaultKeyAction(event, 0)
+ }
+}
diff --git a/modules/gui/qt/qml/MainInterface.qml b/modules/gui/qt/qml/MainInterface.qml
new file mode 100644
index 0000000000..c749f37340
--- /dev/null
+++ b/modules/gui/qt/qml/MainInterface.qml
@@ -0,0 +1,128 @@
+/*****************************************************************************
+ * 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 QtQuick.Controls 2.4
+import org.videolan.medialib 0.1
+import org.videolan.vlc 0.1
+
+import "qrc:///utils/" as Utils
+import "qrc:///style/"
+
+import "qrc:///mediacenter/" as MC
+import "qrc:///player/" as Player
+import "qrc:///about/" as AB
+import "qrc:///dialogs/" as DG
+
+Rectangle {
+ id: root
+ color: "transparent"
+
+ Component {
+ id: medialibComp
+ FocusScope {
+ focus: true
+ property alias viewProperties: mainview.viewProperties
+ property alias view: mainview.view
+ Rectangle {
+ color: VLCStyle.colors.bg
+ anchors.fill: parent
+ MC.MCMainDisplay {
+ id: mainview
+ focus: true
+ anchors.fill: parent
+ }
+ }
+ }
+ }
+
+ Component {
+ id: audioplayerComp
+ Player.Player {
+ focus: true
+ }
+ }
+
+ Component {
+ id: aboutComp
+ AB.About {
+ focus: true
+ onActionCancel: {
+ console.log("onActionCancel")
+ history.pop(History.Go)
+ }
+ }
+ }
+
+ readonly property var pageModel: [
+ { name: "about", component: aboutComp },
+ { name: "mc", component: medialibComp },
+ ]
+
+ function loadCurrentHistoryView() {
+ var current = history.current
+ if ( !current || !current.view ) {
+ console.warn("unable to load requested view, undefined")
+ return
+ }
+ stackView.loadView(root.pageModel, current.view, current.viewProperties)
+ }
+
+ Connections {
+ target: history
+ onCurrentChanged: loadCurrentHistoryView()
+ }
+
+ Component.onCompleted: {
+ //set the initial view
+ history.push(["mc", "music", "albums"], History.Go)
+ }
+
+ Utils.StackViewExt {
+ id: stackView
+ anchors.fill: parent
+ focus: true
+ property int prevPlayerState: PlayerControler.PLAYING_STATE_STOPPED
+
+ Connections {
+ target: player
+ onPlayingStateChanged: {
+ if (state == PlayerControler.PLAYING_STATE_STOPPED )
+ loadCurrentHistoryView()
+ else if (stackView.prevPlayerState == PlayerControler.PLAYING_STATE_STOPPED)
+ stackView.replace(audioplayerComp)
+ stackView.prevPlayerState = state
+ }
+ }
+ }
+
+ Utils.ScanProgressBar {
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.bottom: parent.bottom
+ }
+
+ DG.Dialogs {
+ anchors.fill: parent
+ bgContent: root
+ onRestoreFocus: {
+ stackView.focus = true
+ }
+ }
+}
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 22f9ff7a03..fafc448aaf 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -158,6 +158,10 @@
<file alias="addon_red.svg">pixmaps/addons/addon_red.svg</file>
<file alias="addon_yellow.svg">pixmaps/addons/addon_yellow.svg</file>
</qresource>
+ <qresource prefix="/qml">
+ <file alias="BannerSources.qml">qml/BannerSources.qml</file>
+ <file alias="MainInterface.qml">qml/MainInterface.qml</file>
+ </qresource>
<qresource prefix="/utils">
<file alias="MultiCoverPreview.qml">qml/utils/MultiCoverPreview.qml</file>
<file alias="GridItem.qml">qml/utils/GridItem.qml</file>
--
2.19.1
More information about the vlc-devel
mailing list