modules/gui/qt/Makefile.am

@@ -913,6 +913,7 @@ libqt_plugin_la_QML = \
 	gui/qt/player/qml/controlbarcontrols/SnapshotButton.qml \
 	gui/qt/player/qml/controlbarcontrols/SpacerWidget.qml \
 	gui/qt/player/qml/controlbarcontrols/StopButton.qml \
+	gui/qt/player/qml/controlbarcontrols/TeletextButton.qml \
 	gui/qt/player/qml/controlbarcontrols/TeletextWidget.qml \
 	gui/qt/player/qml/controlbarcontrols/VolumeWidget.qml \
 	gui/qt/player/qml/controlbarcontrols/Fallback.qml \

modules/gui/qt/player/control_list_filter.cpp

@@ -69,6 +69,10 @@ bool ControlListFilter::filterAcceptsRow(int source_row, const QModelIndex &) co
     {
         return m_player->hasPrograms();
     }
+    else if (type == ControlListModel::TELETEXT_BUTTONS)
+    {
+        return m_player->isTeletextAvailable();
+    }
 
     return true;
 }

modules/gui/qt/player/qml/ControlbarControls.qml

@@ -58,8 +58,8 @@ QtObject {
         { id: ControlListModel.VOLUME, file: "VolumeWidget.qml", label: VLCIcons.volume_high, text: I18n.qtr("Volume Widget") },
         { id: ControlListModel.NAVIGATION_BUTTONS, file: "NavigationWidget.qml", label: VLCIcons.dvd_menu, text: I18n.qtr("Navigation") },
         { id: ControlListModel.DVD_MENUS_BUTTON, file: "DvdMenuButton.qml", label: VLCIcons.dvd_menu, text: I18n.qtr("DVD menus") },
-        { id: ControlListModel.TELETEXT_BUTTONS, file: "TeletextWidget.qml", label: VLCIcons.tvtelx, text: I18n.qtr("Teletext") },
         { id: ControlListModel.PROGRAM_BUTTON, file: "ProgramButton.qml", label: VLCIcons.bookmark, text: I18n.qtr("Program Button") },
+        { id: ControlListModel.TELETEXT_BUTTONS, file: "TeletextButton.qml", label: VLCIcons.tvtelx, text: I18n.qtr("Teletext") },
         { id: ControlListModel.RENDERER_BUTTON, file: "RendererButton.qml", label: VLCIcons.renderer, text: I18n.qtr("Renderer Button") },
         { id: ControlListModel.ASPECT_RATIO_COMBOBOX, file: "AspectRatioWidget.qml", label: VLCIcons.aspect_ratio, text: I18n.qtr("Aspect Ratio") },
         { id: ControlListModel.WIDGET_SPACER, file: "SpacerWidget.qml", label: VLCIcons.space, text: I18n.qtr("Spacer") },

modules/gui/qt/player/qml/PlaybackSpeed.qml

@@ -202,7 +202,7 @@ ColumnLayout {
 
             focus: true
 
-            Navigation.parentItem: rowB
+            Navigation.parentItem: rowA
             Navigation.downItem: slider
 
             onClicked: slider.value = 0
@@ -333,12 +333,10 @@ ColumnLayout {
             bgColor: root.colors.button
             borderColor: root.colors.buttonBorder
 
-            // NOTE: Applying the right theme to the ComboBox.
             Navigation.parentItem: rowB
 
-            // NOTE: This makes the navigation convenient since 'up' is changing the comboBox value.
+            // NOTE: This makes the navigation possible since 'up' is changing the comboBox value.
             Navigation.leftItem: slider
-            Navigation.rightItem: slider
 
             Component.onCompleted: {
                 for (var i = 0; i < _model.length; i++) {

modules/gui/qt/player/qml/controlbarcontrols/NavigationWidget.qml

@@ -41,6 +41,10 @@ Templates.Pane {
 
     readonly property string _controlPath : "qrc:///player/controlbarcontrols/"
 
+    // Signals
+
+    signal requestLockUnlockAutoHide(bool lock)
+
     // Settings
 
     implicitWidth: contentWidth + leftPadding + rightPadding
@@ -65,6 +69,16 @@ Templates.Pane {
         item.Navigation.parentItem = Qt.binding(function() { return loader })
     }
 
+    function _applyItemLock(loader, item) {
+        if (item === null) return
+
+        _applyItem(loader, item)
+
+        item.requestLockUnlockAutoHide.connect(function(lock) {
+            controlLayout.requestLockUnlockAutoHide(lock)
+        })
+    }
+
     // Children
 
     Row {
@@ -77,6 +91,9 @@ Templates.Pane {
 
             anchors.verticalCenter: parent.verticalCenter
 
+            // NOTE: This is required for the implicitWidth.
+            visible: (source != "")
+
             focus: (item && item.enabled)
 
             // NOTE: We display the 'menu button' as a placeholder for the customize dialog.
@@ -102,6 +119,9 @@ Templates.Pane {
 
             anchors.verticalCenter: parent.verticalCenter
 
+            // NOTE: This is required for the implicitWidth.
+            visible: (source != "")
+
             focus: (item && item.enabled && loaderA.focus === false)
 
             source: (Player.hasPrograms
@@ -113,15 +133,7 @@ Templates.Pane {
             Navigation.leftItem: loaderA.item
             Navigation.rightItem: loaderC.item
 
-            onLoaded: {
-                if (item === null) return
-
-                _applyItem(loaderB, item)
-
-                item.requestLockUnlockAutoHide.connect(function(lock) {
-                    controlLayout.requestLockUnlockAutoHide(lock)
-                })
-            }
+            onLoaded: _applyItemLock(loaderB, item)
         }
 
         Loader {
@@ -129,18 +141,21 @@ Templates.Pane {
 
             anchors.verticalCenter: parent.verticalCenter
 
+            // NOTE: This is required for the implicitWidth.
+            visible: (source != "")
+
             focus: (item && item.enabled && (loaderA.focus === false && loaderB.focus === false))
 
             source: (Player.isTeletextAvailable
                      &&
-                     root.paintOnly === false) ? root._controlPath + "TeletextWidget.qml" : ""
+                     root.paintOnly == false) ? _controlPath + "TeletextButton.qml" : ""
 
             Navigation.parentItem: root
 
             Navigation.leftItem: (loaderB.item) ? loaderB.item
                                                 : loaderA.item
 
-            onLoaded: if (item) _applyItem(loaderC, item)
+            onLoaded: _applyItemLock(loaderC, item)
         }
     }
 }

modules/gui/qt/player/qml/controlbarcontrols/PlaybackSpeedButton.qml

@@ -38,6 +38,20 @@ Widgets.IconControlButton {
 
     color: (popup.visible) ? colors.accent : colors.playerControlBarFg
 
+    // FIXME: We can't use upItem because a Popup is not an Item.
+    Navigation.upAction: function() {
+        if (popup.visible) {
+            popup.forceActiveFocus(Qt.TabFocusReason)
+
+            return
+        }
+
+        var parent = Navigation.parentItem;
+
+        if (parent)
+            parent.Navigation.defaultNavigationUp()
+    }
+
     onClicked: popup.open()
 
     Popup {
@@ -115,6 +129,9 @@ Widgets.IconControlButton {
             colors: root.colors
 
             Navigation.parentItem: root
+
+            // NOTE: Mapping the right direction because the down action triggers the ComboBox.
+            Navigation.rightItem: root
         }
     }
 

modules/gui/qt/player/qml/controlbarcontrols/TeletextButton.qml

+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * Authors: Benjamin Arnaud <bunjee@omega.gg>
+ *
+ * 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 org.videolan.vlc 0.1
+
+import "qrc:///style/"
+import "qrc:///widgets/" as Widgets
+import "qrc:///util/Helpers.js" as Helpers
+
+Widgets.IconControlButton {
+    id: root
+
+    // Signals
+
+    signal requestLockUnlockAutoHide(bool lock)
+
+    // Properties
+
+    // Private
+
+    readonly property bool _isCurrentViewPlayer: (paintOnly === false
+                                                  &&
+                                                  History.current.name === "player")
+
+    // Settings
+
+    enabled: Player.isTeletextAvailable
+
+    iconText: VLCIcons.tv
+
+    text: I18n.qtr("Teletext")
+
+    color: (popup.visible) ? colors.accent : colors.playerControlBarFg
+
+    // FIXME: We can't use upItem because a Popup is not an Item.
+    Navigation.upAction: function() {
+        if (popup.visible) {
+            popup.forceActiveFocus(Qt.TabFocusReason)
+
+            return
+        }
+
+        var parent = Navigation.parentItem;
+
+        if (parent)
+            parent.Navigation.defaultNavigationUp()
+    }
+
+    // Events
+
+    onClicked: popup.open()
+
+    // Connections
+
+    Connections {
+        target: (popup.visible) ? popup.parent : null
+
+        onWidthChanged: _updatePosition()
+        onHeightChanged: _updatePosition()
+    }
+
+    // Functions
+
+    // Private
+
+    function _updatePosition() {
+        var parent = popup.parent
+
+        var position = parent.mapFromItem(root, x, y)
+
+        var popupX = Math.round(position.x - ((popup.width - width) / 2))
+
+        var minimum = VLCStyle.applicationHorizontalMargin + VLCStyle.margin_xxsmall
+
+        var maximum = parent.width - popup.width - minimum
+
+        popup.x = Helpers.clamp(popupX, minimum, maximum)
+
+        popup.y = position.y - popup.height - VLCStyle.margin_xxsmall
+    }
+
+    // Children
+
+    Popup {
+        id: popup
+
+        parent: (root._isCurrentViewPlayer) ? rootPlayer : g_root
+
+        width: VLCStyle.dp(256, VLCStyle.scale)
+        height: implicitHeight
+
+        padding: VLCStyle.margin_small
+
+        z: 1
+
+        focus: true
+
+        modal: true
+
+        // NOTE: Popup.CloseOnPressOutside doesn't work with non-model Popup on Qt < 5.15.
+        closePolicy: (Popup.CloseOnPressOutside | Popup.CloseOnEscape)
+
+        Overlay.modal: null
+
+        onOpened: {
+            root._updatePosition()
+
+            root.requestLockUnlockAutoHide(true)
+
+            if (root._isCurrentViewPlayer)
+                rootPlayer.menu = popup
+        }
+
+        onClosed: {
+            root.requestLockUnlockAutoHide(false)
+
+            root.forceActiveFocus()
+
+            if (root._isCurrentViewPlayer)
+                rootPlayer.menu = undefined
+        }
+
+        onWidthChanged: if (visible) root._updatePosition()
+        onHeightChanged: if (visible) root._updatePosition()
+
+        background: Rectangle {
+            opacity: 0.85
+
+            color: colors.bg
+        }
+
+        contentItem: TeletextWidget {
+            colors: root.colors
+
+            Navigation.parentItem: root
+
+            Navigation.downItem: root
+        }
+    }
+}

modules/gui/qt/player/qml/controlbarcontrols/TeletextWidget.qml

@@ -29,230 +29,225 @@ T.Pane {
     id: root
 
     property VLCColors colors: VLCStyle.colors
-    property bool paintOnly: false
 
-    enabled: Player.isTeletextAvailable
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentWidth + leftPadding + rightPadding)
 
-    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding)
-    implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentHeight + topPadding + bottomPadding)
 
-    contentWidth: teleWidget.implicitWidth
-    contentHeight: teleWidget.implicitHeight
+    contentWidth: column.implicitWidth
+    contentHeight: column.implicitHeight
 
     Keys.priority: Keys.AfterItem
     Keys.onPressed: Navigation.defaultKeyAction(event)
 
-    Row {
-        id: teleWidget
-        anchors.fill: parent
+    Column {
+        id: column
 
-        Widgets.IconControlButton{
-            id: teleActivateBtn
+        spacing: VLCStyle.margin_small
 
-            paintOnly: root.paintOnly
+        Widgets.SubtitleLabel {
+            text: I18n.qtr("Teletext")
 
-            checked: Player.teletextEnabled
-
-            focus: true
-
-            iconText: VLCIcons.tv
-            text: I18n.qtr("Teletext activate")
-
-            colors: root.colors
-            color: colors.text
-
-            T.ToolTip.visible: hovered || visualFocus
+            color: root.colors.text
+        }
 
-            Navigation.parentItem: root
-            Navigation.rightItem: teleTransparencyBtn
+        Row {
+            Widgets.IconControlButton{
+                id: teleActivateBtn
 
-            onClicked: Player.teletextEnabled = !Player.teletextEnabled
-        }
+                checked: Player.teletextEnabled
 
-        Widgets.IconControlButton{
-            id: teleTransparencyBtn
+                focus: true
 
-            paintOnly: root.paintOnly
+                iconText: VLCIcons.tv
+                text: I18n.qtr("Teletext activate")
 
-            enabled: teleActivateBtn.checked
+                colors: root.colors
+                color: colors.text
 
-            opacity: 0.5
+                T.ToolTip.visible: hovered || visualFocus
 
-            iconText: VLCIcons.tvtelx
-            text: I18n.qtr("Teletext transparency")
+                Navigation.parentItem: root
+                Navigation.rightItem: teleTransparencyBtn
 
-            colors: root.colors
-            color: colors.text
+                onClicked: Player.teletextEnabled = !Player.teletextEnabled
+            }
 
-            T.ToolTip.visible: hovered || visualFocus
+            Widgets.IconControlButton{
+                id: teleTransparencyBtn
 
-            Navigation.parentItem: root
-            Navigation.leftItem: teleActivateBtn
-            Navigation.rightItem: telePageNumber
+                enabled: teleActivateBtn.checked
 
-            onClicked: Player.teletextTransparency = !Player.teletextTransparency
-        }
+                opacity: 0.5
 
-        Widgets.SpinBoxExt{
-            id: telePageNumber
+                iconText: VLCIcons.tvtelx
+                text: I18n.qtr("Teletext transparency")
 
-            // NOTE: We want a fixed size for the TextInput.
-            width: VLCStyle.dp(64, VLCStyle.scale)
+                colors: root.colors
+                color: colors.text
 
-            enabled: teleActivateBtn.checked
+                T.ToolTip.visible: hovered || visualFocus
 
-            from: 100
-            to: 899
+                Navigation.parentItem: root
+                Navigation.leftItem: teleActivateBtn
+                Navigation.rightItem: telePageNumber
 
-            validator: IntValidator {
-                bottom: telePageNumber.from
-                top: telePageNumber.to
+                onClicked: Player.teletextTransparency = !Player.teletextTransparency
             }
 
-            editable: true
-            textColor: colors.text
-            bgColor: colors.bg
-
-            Navigation.parentItem: root
-            Navigation.leftItem: teleTransparencyBtn
-            Navigation.rightItem: indexKeyBtn
+            Widgets.SpinBoxExt{
+                id: telePageNumber
 
-            //only update the player teletext page when the user change the value manually
-            property bool inhibitPageUpdate: true
+                // NOTE: We want a fixed size for the TextInput.
+                width: VLCStyle.dp(64, VLCStyle.scale)
 
-            onValueChanged: {
-                if (inhibitPageUpdate)
-                    return
-                Player.teletextPage = value
-            }
+                enabled: teleActivateBtn.checked
 
-            Component.onCompleted: {
-                value = Player.teletextPage
-                inhibitPageUpdate = false
-            }
+                from: 100
+                to: 899
 
-            Connections {
-                target: Player
-                onTeletextPageChanged: {
-                    telePageNumber.inhibitPageUpdate = true
-                    telePageNumber.value = Player.teletextPage
-                    telePageNumber.inhibitPageUpdate = false
+                validator: IntValidator {
+                    bottom: telePageNumber.from
+                    top: telePageNumber.to
                 }
-            }
-        }
 
-        Widgets.IconControlButton{
-            id: indexKeyBtn
+                editable: true
+                textColor: colors.text
+                bgColor: colors.bg
 
-            paintOnly: root.paintOnly
+                Navigation.parentItem: root
+                Navigation.leftItem: teleTransparencyBtn
+                Navigation.rightItem: indexKeyBtn
 
-            enabled: teleActivateBtn.checked
+                //only update the player teletext page when the user change the value manually
+                property bool inhibitPageUpdate: true
 
-            iconText: VLCIcons.record
-            text: I18n.qtr("Index key")
+                onValueChanged: {
+                    if (inhibitPageUpdate)
+                        return
+                    Player.teletextPage = value
+                }
 
-            colors: root.colors
-            color: "grey"
-            colorDisabled: "grey"
+                Component.onCompleted: {
+                    value = Player.teletextPage
+                    inhibitPageUpdate = false
+                }
 
-            T.ToolTip.visible: hovered || visualFocus
+                Connections {
+                    target: Player
+                    onTeletextPageChanged: {
+                        telePageNumber.inhibitPageUpdate = true
+                        telePageNumber.value = Player.teletextPage
+                        telePageNumber.inhibitPageUpdate = false
+                    }
+                }
+            }
 
-            Navigation.parentItem: root
-            Navigation.leftItem: telePageNumber
-            Navigation.rightItem: redKeyBtn
+            Widgets.IconControlButton{
+                id: indexKeyBtn
 
-            onClicked: Player.teletextPage = Player.TELE_INDEX
-        }
+                enabled: teleActivateBtn.checked
 
-        Widgets.IconControlButton{
-            id: redKeyBtn
+                iconText: VLCIcons.record
+                text: I18n.qtr("Index key")
 
-            paintOnly: root.paintOnly
+                colors: root.colors
+                color: "grey"
+                colorDisabled: "grey"
 
-            enabled: teleActivateBtn.checked
+                T.ToolTip.visible: hovered || visualFocus
 
-            iconText: VLCIcons.record
-            text: I18n.qtr("Red key")
+                Navigation.parentItem: root
+                Navigation.leftItem: telePageNumber
+                Navigation.rightItem: redKeyBtn
 
-            colors: root.colors
-            color: "red"
-            colorDisabled: "grey"
+                onClicked: Player.teletextPage = Player.TELE_INDEX
+            }
 
-            T.ToolTip.visible: hovered || visualFocus
+            Widgets.IconControlButton{
+                id: redKeyBtn
 
-            Navigation.parentItem: root
-            Navigation.leftItem: indexKeyBtn
-            Navigation.rightItem: greenKeyBtn
+                enabled: teleActivateBtn.checked
 
-            onClicked: Player.teletextPage = Player.TELE_RED
-        }
+                iconText: VLCIcons.record
+                text: I18n.qtr("Red key")
 
-        Widgets.IconControlButton{
-            id: greenKeyBtn
+                colors: root.colors
+                color: "red"
+                colorDisabled: "grey"
 
-            paintOnly: root.paintOnly
+                T.ToolTip.visible: hovered || visualFocus
 
-            enabled: teleActivateBtn.checked
+                Navigation.parentItem: root
+                Navigation.leftItem: indexKeyBtn
+                Navigation.rightItem: greenKeyBtn
 
-            iconText: VLCIcons.record
-            text: I18n.qtr("Green key")
+                onClicked: Player.teletextPage = Player.TELE_RED
+            }
 
-            colors: root.colors
-            color: "green"
-            colorDisabled: "grey"
+            Widgets.IconControlButton{
+                id: greenKeyBtn
 
-            T.ToolTip.visible: hovered || visualFocus
+                enabled: teleActivateBtn.checked
 
-            Navigation.parentItem: root
-            Navigation.leftItem: redKeyBtn
-            Navigation.rightItem: yellowKeyBtn
+                iconText: VLCIcons.record
+                text: I18n.qtr("Green key")
 
-            onClicked: Player.teletextPage = Player.TELE_GREEN
-        }
+                colors: root.colors
+                color: "green"
+                colorDisabled: "grey"
 
-        Widgets.IconControlButton{
-            id: yellowKeyBtn
+                T.ToolTip.visible: hovered || visualFocus
 
-            paintOnly: root.paintOnly
+                Navigation.parentItem: root
+                Navigation.leftItem: redKeyBtn
+                Navigation.rightItem: yellowKeyBtn
 
-            enabled: teleActivateBtn.checked
+                onClicked: Player.teletextPage = Player.TELE_GREEN
+            }
 
-            iconText: VLCIcons.record
-            text: I18n.qtr("Yellow key")
+            Widgets.IconControlButton{
+                id: yellowKeyBtn
 
-            colors: root.colors
-            color: "yellow"
-            colorDisabled: "grey"
+                enabled: teleActivateBtn.checked
 
-            T.ToolTip.visible: hovered || visualFocus
+                iconText: VLCIcons.record
+                text: I18n.qtr("Yellow key")
 
-            Navigation.parentItem: root
-            Navigation.leftItem: greenKeyBtn
-            Navigation.rightItem: blueKeyBtn
+                colors: root.colors
+                color: "yellow"
+                colorDisabled: "grey"
 
-            onClicked: Player.teletextPage = Player.TELE_YELLOW
-        }
+                T.ToolTip.visible: hovered || visualFocus
 
-        Widgets.IconControlButton{
-            id: blueKeyBtn
+                Navigation.parentItem: root
+                Navigation.leftItem: greenKeyBtn
+                Navigation.rightItem: blueKeyBtn
 
-            paintOnly: root.paintOnly
+                onClicked: Player.teletextPage = Player.TELE_YELLOW
+            }
+
+            Widgets.IconControlButton{
+                id: blueKeyBtn
 
-            enabled: teleActivateBtn.checked
+                enabled: teleActivateBtn.checked
 
-            iconText: VLCIcons.record
-            text: I18n.qtr("Blue key")
+                iconText: VLCIcons.record
+                text: I18n.qtr("Blue key")
 
-            colors: root.colors
-            color: "blue"
-            colorDisabled: "grey"
+                colors: root.colors
+                color: "blue"
+                colorDisabled: "grey"
 
-            T.ToolTip.visible: hovered || visualFocus
+                T.ToolTip.visible: hovered || visualFocus
 
-            Navigation.parentItem: root
-            Navigation.leftItem: yellowKeyBtn
+                Navigation.parentItem: root
+                Navigation.leftItem: yellowKeyBtn
 
-            onClicked: Player.teletextPage = Player.TELE_BLUE
+                onClicked: Player.teletextPage = Player.TELE_BLUE
+            }
         }
     }
 }

modules/gui/qt/vlc.qrc

@@ -345,6 +345,7 @@
         <file alias="SnapshotButton.qml">player/qml/controlbarcontrols/SnapshotButton.qml</file>
         <file alias="SpacerWidget.qml">player/qml/controlbarcontrols/SpacerWidget.qml</file>
         <file alias="StopButton.qml">player/qml/controlbarcontrols/StopButton.qml</file>
+        <file alias="TeletextButton.qml">player/qml/controlbarcontrols/TeletextButton.qml</file>
         <file alias="TeletextWidget.qml">player/qml/controlbarcontrols/TeletextWidget.qml</file>
         <file alias="VolumeWidget.qml">player/qml/controlbarcontrols/VolumeWidget.qml</file>
         <file alias="Fallback.qml">player/qml/controlbarcontrols/Fallback.qml</file>

po/POTFILES.in

@@ -887,6 +887,7 @@ modules/gui/qt/player/qml/controlbarcontrols/SlowerButton.qml
 modules/gui/qt/player/qml/controlbarcontrols/SnapshotButton.qml
 modules/gui/qt/player/qml/controlbarcontrols/SpacerWidget.qml
 modules/gui/qt/player/qml/controlbarcontrols/StopButton.qml
+modules/gui/qt/player/qml/controlbarcontrols/TeletextButton.qml
 modules/gui/qt/player/qml/controlbarcontrols/TeletextWidget.qml
 modules/gui/qt/player/qml/controlbarcontrols/VolumeWidget.qml
 modules/gui/qt/playlist/qml/PlaylistDelegate.qml