modules/gui/qt/Makefile.am

@@ -738,8 +738,9 @@ libqt_plugin_la_QML = \
 	gui/qt/network/qml/NetworkListItem.qml \
 	gui/qt/network/qml/NetworkThumbnailItem.qml \
 	gui/qt/network/qml/ServicesHomeDisplay.qml \
+	gui/qt/player/qml/qmldir \
 	gui/qt/player/qml/ControlBar.qml \
-	gui/qt/player/qml/ControlButtons.qml \
+	gui/qt/player/qml/ControlbarControls.qml \
 	gui/qt/player/qml/LanguageMenu.qml \
 	gui/qt/player/qml/PlaybackSpeed.qml \
 	gui/qt/player/qml/MiniPlayer.qml \
@@ -750,11 +751,43 @@ libqt_plugin_la_QML = \
 	gui/qt/player/qml/PlayerMenuItem.qml \
 	gui/qt/player/qml/ResumeDialog.qml \
 	gui/qt/player/qml/SliderBar.qml \
-	gui/qt/player/qml/TeletextWidget.qml \
 	gui/qt/player/qml/TopBar.qml \
 	gui/qt/player/qml/TrackInfo.qml \
-	gui/qt/player/qml/VolumeWidget.qml \
 	gui/qt/player/qml/ButtonsLayout.qml \
+	gui/qt/player/qml/controlbarcontrols/ArtworkInfoWidget.qml \
+	gui/qt/player/qml/controlbarcontrols/AspectRatioWidget.qml \
+	gui/qt/player/qml/controlbarcontrols/AtoBButton.qml \
+	gui/qt/player/qml/controlbarcontrols/BackButton.qml \
+	gui/qt/player/qml/controlbarcontrols/ChapterNextButton.qml \
+	gui/qt/player/qml/controlbarcontrols/ChapterPreviousButton.qml \
+	gui/qt/player/qml/controlbarcontrols/ExpandingSpacerWidget.qml \
+	gui/qt/player/qml/controlbarcontrols/ExtendedSettingsButton.qml \
+	gui/qt/player/qml/controlbarcontrols/FasterButton.qml \
+	gui/qt/player/qml/controlbarcontrols/FrameButton.qml \
+	gui/qt/player/qml/controlbarcontrols/FullscreenButton.qml \
+	gui/qt/player/qml/controlbarcontrols/InfoButton.qml \
+	gui/qt/player/qml/controlbarcontrols/LangButton.qml \
+	gui/qt/player/qml/controlbarcontrols/LoopButton.qml \
+	gui/qt/player/qml/controlbarcontrols/MenuButton.qml \
+	gui/qt/player/qml/controlbarcontrols/NextButton.qml \
+	gui/qt/player/qml/controlbarcontrols/OpenButton.qml \
+	gui/qt/player/qml/controlbarcontrols/PlaybackSpeedButton.qml \
+	gui/qt/player/qml/controlbarcontrols/PlayButton.qml \
+	gui/qt/player/qml/controlbarcontrols/PlayerSwitchButton.qml \
+	gui/qt/player/qml/controlbarcontrols/PlaylistButton.qml \
+	gui/qt/player/qml/controlbarcontrols/PreviousButton.qml \
+	gui/qt/player/qml/controlbarcontrols/QuitButton.qml \
+	gui/qt/player/qml/controlbarcontrols/RandomButton.qml \
+	gui/qt/player/qml/controlbarcontrols/RecordButton.qml \
+	gui/qt/player/qml/controlbarcontrols/SkipBackButton.qml \
+	gui/qt/player/qml/controlbarcontrols/SkipForwardButton.qml \
+	gui/qt/player/qml/controlbarcontrols/SlowerButton.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/TeletextWidget.qml \
+	gui/qt/player/qml/controlbarcontrols/VolumeWidget.qml \
+	gui/qt/player/qml/controlbarcontrols/Fallback.qml \
 	gui/qt/playlist/qml/PlaylistDelegate.qml \
 	gui/qt/playlist/qml/PlaylistListView.qml \
 	gui/qt/playlist/qml/PlaylistOverlayMenu.qml \

modules/gui/qt/dialogs/toolbar/qml/EditorDNDDelegate.qml

@@ -21,6 +21,7 @@ import QtQml.Models 2.11
 
 import org.videolan.vlc 0.1
 
+import "qrc:///player/"
 import "qrc:///widgets/" as Widgets
 import "qrc:///style/"
 
@@ -116,7 +117,7 @@ MouseArea {
                 horizontalCenter: parent.horizontalCenter
                 verticalCenter: parent.verticalCenter
             }
-            sourceComponent: controlButtons.returnbuttondelegate(model.id)
+            source: PlayerControlbarControls.control(model.id).source
             onLoaded: {
                 buttonloader.item.paintOnly = true
                 buttonloader.item.enabled = false

modules/gui/qt/dialogs/toolbar/qml/ToolbarEditor.qml

@@ -22,7 +22,6 @@ import QtQml.Models 2.11
 
 import org.videolan.vlc 0.1
 
-import "qrc:///player/" as Player
 import "qrc:///style/"
 import "qrc:///widgets/" as Widgets
 
@@ -71,7 +70,7 @@ Rectangle{
         Rectangle{
             id: parentRectangle
 
-            Layout.preferredHeight: VLCStyle.heightBar_large * 1.25
+            Layout.preferredHeight: VLCStyle.maxControlbarControlHeight * 1.5
             Layout.fillWidth: true
 
             color: "transparent"
@@ -235,10 +234,6 @@ Rectangle{
         }
     }
 
-    Player.ControlButtons{
-        id: controlButtons
-    }
-
     EditorDummyButton{
         id: buttonDragItem
         visible: false

modules/gui/qt/dialogs/toolbar/qml/ToolbarEditorButtonList.qml

@@ -22,6 +22,7 @@ import QtQuick.Layouts 1.11
 
 import org.videolan.vlc 0.1
 
+import "qrc:///player/"
 import "qrc:///style/"
 import "qrc:///widgets/" as Widgets
 
@@ -30,7 +31,7 @@ GridView{
     clip: true
 
     ScrollBar.vertical: ScrollBar { policy: ScrollBar.AlwaysOn }
-    model: controlButtons.buttonL.length
+    model: PlayerControlbarControls.controlList.length
 
     highlightFollowsCurrentItem: false
 
@@ -110,13 +111,13 @@ GridView{
         height: cellHeight
 
         property bool held: false
-        property int mIndex: controlButtons.buttonL[model.index].id
+        property int mIndex: PlayerControlbarControls.controlList[model.index].id
         drag.target: held ? buttonDragItem : undefined
         cursorShape: Qt.OpenHandCursor
 
         onPressed: {
             buttonDragItem.visible = true
-            buttonDragItem.text = controlButtons.buttonL[model.index].label
+            buttonDragItem.text = PlayerControlbarControls.controlList[model.index].label
             buttonDragItem.Drag.source = dragArea
             held = true
             root._held = true
@@ -154,7 +155,7 @@ GridView{
                 Layout.preferredWidth: VLCStyle.icon_medium
                 Layout.preferredHeight: VLCStyle.icon_medium
                 Layout.alignment: Qt.AlignHCenter
-                text: controlButtons.buttonL[model.index].label
+                text: PlayerControlbarControls.controlList[model.index].label
             }
 
             Widgets.ListSubtitleLabel {
@@ -163,7 +164,7 @@ GridView{
                 Layout.fillHeight: true
 
                 elide: Text.ElideNone
-                text: controlButtons.buttonL[model.index].text
+                text: PlayerControlbarControls.controlList[model.index].text
                 wrapMode: Text.WordWrap
                 horizontalAlignment: Text.AlignHCenter
             }

modules/gui/qt/maininterface/qml/MainDisplay.qml

@@ -258,7 +258,7 @@ FocusScope {
                         }
                         focus: false
 
-                        height: parent.height - miniPlayer.implicitHeight
+                        height: parent.height - miniPlayer.height
 
                         property bool expanded: mainInterface.playlistDocked && mainInterface.playlistVisible
 
@@ -327,6 +327,7 @@ FocusScope {
                             focus: true
 
                             rightPadding: VLCStyle.applicationHorizontalMargin
+                            bottomPadding: topPadding + Math.max(VLCStyle.applicationVerticalMargin - miniPlayer.height, 0)
 
                             Navigation.parentItem: medialibId
                             Navigation.leftItem: stackView

modules/gui/qt/player/qml/ButtonsLayout.qml

@@ -97,7 +97,7 @@ FocusScope {
             delegate: Loader {
                 id: buttonloader
 
-                sourceComponent: controlmodelbuttons.returnbuttondelegate(model.id)
+                source: PlayerControlbarControls.control(model.id).source
 
                 focus: (index === 0)
 

modules/gui/qt/player/qml/ControlBar.qml

@@ -28,7 +28,7 @@ import "qrc:///widgets/" as Widgets
 import "qrc:///playlist/" as PL
 
 
-FocusScope {
+Control {
     id: root
 
     enum TimeTextPosition {
@@ -55,9 +55,7 @@ FocusScope {
     Keys.onPressed: root.Navigation.defaultKeyAction(event)
     Navigation.cancelAction: function() { history.previous() }
 
-    onActiveFocusChanged: if (activeFocus) trackPositionSlider.forceActiveFocus()
-
-    implicitHeight: columnLayout.implicitHeight
+    onActiveFocusChanged: if (activeFocus) trackPositionSlider.forceActiveFocus(focusReason)
 
     Component.onCompleted: {
         // if initially textPosition = Hide, then _onTextPositionChanged isn't called
@@ -110,10 +108,10 @@ FocusScope {
         row2.visible = row2.children.length > 0
     }
 
-    ColumnLayout {
+    contentItem: ColumnLayout {
         id: columnLayout
-        anchors.fill: parent
-        spacing: VLCStyle.margin_small
+
+        spacing: VLCStyle.margin_xsmall
 
         RowLayout {
             id: row1
@@ -131,30 +129,20 @@ FocusScope {
             Layout.fillWidth: true
         }
 
-        Item {
+        PlayerButtonsLayout {
+            id: playerButtonsLayout
+
             Layout.fillWidth: true
-            Layout.leftMargin: VLCStyle.margin_normal
-            Layout.rightMargin: VLCStyle.margin_normal
+            Layout.leftMargin: VLCStyle.margin_large
+            Layout.rightMargin: VLCStyle.margin_large
             Layout.bottomMargin: VLCStyle.margin_xsmall
             Layout.preferredHeight: playerButtonsLayout.implicitHeight
 
-            PlayerButtonsLayout {
-                id: playerButtonsLayout
-
-                anchors {
-                    fill: parent
-
-                    leftMargin: VLCStyle.applicationHorizontalMargin
-                    rightMargin: VLCStyle.applicationHorizontalMargin
-                    bottomMargin: VLCStyle.applicationVerticalMargin
-                }
-
-                Navigation.upItem: trackPositionSlider.enabled ? trackPositionSlider : root.Navigation.upItem
+            Navigation.upItem: trackPositionSlider.enabled ? trackPositionSlider : root.Navigation.upItem
 
-                colors: root.colors
+            colors: root.colors
 
-                onRequestLockUnlockAutoHide: root.requestLockUnlockAutoHide(lock, source)
-            }
+            onRequestLockUnlockAutoHide: root.requestLockUnlockAutoHide(lock, source)
         }
     }
 

modules/gui/qt/player/qml/ControlButtons.qml

-/*****************************************************************************
- * 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.11
-import QtQuick.Controls 2.4
-import QtGraphicalEffects 1.0
-
-import org.videolan.vlc 0.1
-
-import "qrc:///widgets/" as Widgets
-import "qrc:///style/"
-
-Item{
-    id: controlButtons
-
-    property var  parentWindow: undefined
-
-    signal requestLockUnlockAutoHide(bool lock, var source)
-
-    property var buttonL: [
-        { id:  ControlListModel.PLAY_BUTTON, label: VLCIcons.play, text: i18n.qtr("Play")},
-        { id:  ControlListModel.STOP_BUTTON, label: VLCIcons.stop, text: i18n.qtr("Stop")},
-        { id:  ControlListModel.OPEN_BUTTON, label: VLCIcons.eject, text: i18n.qtr("Open")},
-        { id:  ControlListModel.PREVIOUS_BUTTON, label: VLCIcons.previous, text: i18n.qtr("Previous")},
-        { id:  ControlListModel.NEXT_BUTTON, label: VLCIcons.next, text: i18n.qtr("Next")},
-        { id:  ControlListModel.SLOWER_BUTTON, label: VLCIcons.slower, text: i18n.qtr("Slower")},
-        { id:  ControlListModel.FASTER_BUTTON, label: VLCIcons.faster, text: i18n.qtr("Faster")},
-        { id:  ControlListModel.FULLSCREEN_BUTTON, label: VLCIcons.fullscreen, text: i18n.qtr("Fullscreen")},
-        { id:  ControlListModel.EXTENDED_BUTTON, label: VLCIcons.extended, text: i18n.qtr("Extended panel")},
-        { id:  ControlListModel.PLAYLIST_BUTTON, label: VLCIcons.playlist, text: i18n.qtr("Playlist")},
-        { id:  ControlListModel.SNAPSHOT_BUTTON, label: VLCIcons.snapshot, text: i18n.qtr("Snapshot")},
-        { id:  ControlListModel.RECORD_BUTTON, label: VLCIcons.record, text: i18n.qtr("Record")},
-        { id:  ControlListModel.ATOB_BUTTON, label: VLCIcons.atob, text: i18n.qtr("A-B Loop")},
-        { id:  ControlListModel.FRAME_BUTTON, label: VLCIcons.frame_by_frame, text: i18n.qtr("Frame By Frame")},
-        { id:  ControlListModel.SKIP_BACK_BUTTON, label: VLCIcons.skip_back, text: i18n.qtr("Step backward")},
-        { id:  ControlListModel.SKIP_FW_BUTTON, label: VLCIcons.skip_for, text: i18n.qtr("Step forward")},
-        { id:  ControlListModel.QUIT_BUTTON, label: VLCIcons.clear, text: i18n.qtr("Quit")},
-        { id:  ControlListModel.RANDOM_BUTTON, label: VLCIcons.shuffle_on, text: i18n.qtr("Random")},
-        { id:  ControlListModel.LOOP_BUTTON, label: VLCIcons.repeat_all, text: i18n.qtr("Loop")},
-        { id:  ControlListModel.INFO_BUTTON, label: VLCIcons.info, text: i18n.qtr("Information")},
-        { id:  ControlListModel.LANG_BUTTON, label: VLCIcons.audiosub, text: i18n.qtr("Open subtitles")},
-        { id:  ControlListModel.MENU_BUTTON, label: VLCIcons.menu, text: i18n.qtr("Menu Button")},
-        { id:  ControlListModel.BACK_BUTTON, label: VLCIcons.exit, text: i18n.qtr("Back Button")},
-        { id:  ControlListModel.CHAPTER_PREVIOUS_BUTTON, label: VLCIcons.dvd_prev, text: i18n.qtr("Previous chapter")},
-        { id:  ControlListModel.CHAPTER_NEXT_BUTTON, label: VLCIcons.dvd_next, text: i18n.qtr("Next chapter")},
-        { id:  ControlListModel.VOLUME, label: VLCIcons.volume_high, text: i18n.qtr("Volume Widget")},
-        { id:  ControlListModel.TELETEXT_BUTTONS, label: VLCIcons.tvtelx, text: i18n.qtr("Teletext")},
-        { id:  ControlListModel.ASPECT_RATIO_COMBOBOX, label: VLCIcons.aspect_ratio, text: i18n.qtr("Aspect Ratio")},
-        { id:  ControlListModel.WIDGET_SPACER, label: VLCIcons.space, text: i18n.qtr("Spacer")},
-        { id:  ControlListModel.WIDGET_SPACER_EXTEND, label: VLCIcons.space, text: i18n.qtr("Expanding Spacer")},
-        { id:  ControlListModel.PLAYER_SWITCH_BUTTON, label: VLCIcons.fullscreen, text: i18n.qtr("Switch Player")},
-        { id:  ControlListModel.ARTWORK_INFO, label: VLCIcons.info, text: i18n.qtr("Artwork Info")},
-        { id:  ControlListModel.PLAYBACK_SPEED_BUTTON, label: "1x", text: i18n.qtr("Playback Speed")}
-    ]
-
-    function returnbuttondelegate(inpID){
-        switch (inpID){
-        case ControlListModel.RANDOM_BUTTON: return randomBtnDelegate
-        case ControlListModel.PREVIOUS_BUTTON: return prevBtnDelegate
-        case ControlListModel.PLAY_BUTTON: return playBtnDelegate
-        case ControlListModel.NEXT_BUTTON: return nextBtnDelegate
-        case ControlListModel.LOOP_BUTTON: return repeatBtnDelegate
-        case ControlListModel.LANG_BUTTON: return langBtnDelegate
-        case ControlListModel.PLAYLIST_BUTTON:return playlistBtnDelegate
-        case ControlListModel.MENU_BUTTON:return  menuBtnDelegate
-        case ControlListModel.CHAPTER_PREVIOUS_BUTTON:return  chapterPreviousBtnDelegate
-        case ControlListModel.CHAPTER_NEXT_BUTTON:return  chapterNextBtnDelegate
-        case ControlListModel.BACK_BUTTON:return  backBtnDelegate
-        case ControlListModel.WIDGET_SPACER:return  spacerDelegate
-        case ControlListModel.WIDGET_SPACER_EXTEND:return  extendiblespacerDelegate
-        case ControlListModel.RECORD_BUTTON: return recordBtnDelegate
-        case ControlListModel.FULLSCREEN_BUTTON: return fullScreenBtnDelegate
-        case ControlListModel.ATOB_BUTTON: return toggleABloopstateDelegate
-        case ControlListModel.SNAPSHOT_BUTTON: return snapshotBtnDelegate
-        case ControlListModel.STOP_BUTTON: return stopBtndelgate
-        case ControlListModel.INFO_BUTTON: return mediainfoBtnDelegate
-        case ControlListModel.FRAME_BUTTON: return framebyframeDelegate
-        case ControlListModel.FASTER_BUTTON: return fasterBtnDelegate
-        case ControlListModel.SLOWER_BUTTON: return slowerBtnDelegate
-        case ControlListModel.OPEN_BUTTON: return openmediaBtnDelegate
-        case ControlListModel.EXTENDED_BUTTON: return extdSettingsBtnDelegate
-        case ControlListModel.SKIP_FW_BUTTON: return stepFwdBtnDelegate
-        case ControlListModel.SKIP_BACK_BUTTON: return stepBackBtnDelegate
-        case ControlListModel.QUIT_BUTTON: return quitBtnDelegate
-        case ControlListModel.VOLUME: return volumeBtnDelegate
-        case ControlListModel.ASPECT_RATIO_COMBOBOX: return aspectRatioDelegate
-        case ControlListModel.TELETEXT_BUTTONS: return teletextdelegate
-        case ControlListModel.PLAYER_SWITCH_BUTTON: return playerSwitchBtnDelegate
-        case ControlListModel.ARTWORK_INFO: return artworkInfoDelegate
-        case ControlListModel.PLAYBACK_SPEED_BUTTON: return playbackSpeedButtonDelegate
-        default:
-            console.log("button delegate id " + inpID +  " doesn't exists")
-            return fallbackDelegate
-        }
-    }
-
-    Component {
-        id: fallbackDelegate
-
-        Widgets.AnimatedBackground {
-            implicitWidth: fbLabel.width + VLCStyle.focus_border * 2
-            implicitHeight: fbLabel.height + VLCStyle.focus_border * 2
-
-            activeBorderColor: colors.bgFocus
-
-            property bool paintOnly: false
-            property VLCColors colors: VLCStyle.colors
-
-            Widgets.MenuLabel {
-                id: fbLabel
-
-                anchors.centerIn: parent
-
-                text: i18n.qtr("WIDGET\nNOT\nFOUND")
-                horizontalAlignment: Text.AlignHCenter
-
-                color: colors.text
-            }
-        }
-    }
-
-    Component{
-        id: backBtnDelegate
-        Widgets.IconControlButton {
-            id: backBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.exit
-            text: i18n.qtr("Back")
-            onClicked: history.previous()
-        }
-    }
-
-    Component{
-        id: randomBtnDelegate
-        Widgets.IconControlButton {
-            id: randomBtn
-            size: VLCStyle.icon_medium
-            checked: mainPlaylistController.random
-            iconText: VLCIcons.shuffle_on
-            onClicked: mainPlaylistController.toggleRandom()
-            text: i18n.qtr("Random")
-        }
-    }
-
-    Component{
-        id: prevBtnDelegate
-        Widgets.IconControlButton {
-            id: prevBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.previous
-            enabled: mainPlaylistController.hasPrev
-            onClicked: mainPlaylistController.prev()
-            text: i18n.qtr("Previous")
-        }
-    }
-
-    Component{
-        id:playBtnDelegate
-
-        ToolButton {
-            id: playBtn
-
-            width: VLCStyle.icon_medium
-            height: width
-
-            scale: (playBtnMouseArea.pressed) ? 0.95 : 1.0
-
-            property VLCColors colors: VLCStyle.colors
-
-            property color color: colors.buttonPlayIcon
-
-            property color colorDisabled: colors.textInactive
-
-            property bool paintOnly: false
-
-            property bool isCursorInside: false
-
-            Keys.onPressed: {
-                if (KeyHelper.matchOk(event) ) {
-                    event.accepted = true
-                }
-                Navigation.defaultKeyAction(event)
-            }
-            Keys.onReleased: {
-                if (!event.accepted && KeyHelper.matchOk(event))
-                    mainPlaylistController.togglePlayPause()
-            }
-
-            states: [
-                State {
-                    name: "hovered"
-                    when: interactionIndicator
-
-                    PropertyChanges {
-                        target: hoverShadow
-                        radius: VLCStyle.dp(24, VLCStyle.scale)
-                    }
-                },
-                State {
-                    name: "default"
-                    when: !interactionIndicator
-
-                    PropertyChanges {
-                        target: contentLabel
-                        color: enabled ? playBtn.color : playBtn.colorDisabled
-                    }
-
-                    PropertyChanges {
-                        target: hoverShadow
-                        radius: 0
-                    }
-                }
-            ]
-            readonly property bool interactionIndicator: (playBtn.activeFocus || playBtn.isCursorInside || playBtn.highlighted)
-
-            contentItem: Label {
-                id: contentLabel
-
-                text: (player.playingState !== PlayerController.PLAYING_STATE_PAUSED
-                       && player.playingState !== PlayerController.PLAYING_STATE_STOPPED)
-                      ? VLCIcons.pause
-                      : VLCIcons.play
-
-                Behavior on color {
-                    ColorAnimation {
-                        duration: VLCStyle.ms75
-                        easing.type: Easing.InOutSine
-                    }
-                }
-
-                font.pixelSize: VLCIcons.pixelSize(VLCStyle.icon_normal)
-                font.family: VLCIcons.fontFamily
-
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignHCenter
-            }
-
-            background: Item {
-                Gradient {
-                    id: playBtnGradient
-                    GradientStop { position: 0.0; color: VLCStyle.colors.buttonPlayA }
-                    GradientStop { position: 1.0; color: VLCStyle.colors.buttonPlayB }
-                }
-
-                MouseArea {
-                    id: playBtnMouseArea
-
-                    anchors.fill: parent
-                    anchors.margins: VLCStyle.dp(1, VLCStyle.scale)
-
-                    hoverEnabled: true
-
-                    readonly property int radius: playBtnMouseArea.width / 2
-
-                    function distance2D(x0, y0, x1, y1) {
-                        return Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0))
-                    }
-
-                    onPositionChanged: {
-                        if (distance2D(playBtnMouseArea.mouseX, playBtnMouseArea.mouseY, playBtnMouseArea.width / 2, playBtnMouseArea.height / 2) < radius) {
-                            // mouse is inside of the round button
-                            playBtn.isCursorInside = true
-                        }
-                        else {
-                            // mouse is outside
-                            playBtn.isCursorInside = false
-                        }
-                    }
-
-                    onHoveredChanged: {
-                        if (!playBtnMouseArea.containsMouse)
-                            playBtn.isCursorInside = false
-                    }
-
-                    onClicked: {
-                        if (!playBtn.isCursorInside)
-                            return
-
-                        mainPlaylistController.togglePlayPause()
-                    }
-
-                    onPressAndHold: {
-                        if (!playBtn.isCursorInside)
-                            return
-
-                        mainPlaylistController.stop()
-                    }
-                }
-
-                DropShadow {
-                    id: hoverShadow
-
-                    anchors.fill: parent
-
-                    visible: radius > 0
-                    samples: (radius * 2) + 1
-                    // opacity: 0.29 // it looks better without this
-                    color: "#FF610A"
-                    source: opacityMask
-                    antialiasing: true
-
-                    Behavior on radius {
-                        NumberAnimation {
-                            duration: VLCStyle.ms75
-                            easing.type: Easing.InOutSine
-                        }
-                    }
-                }
-
-                Rectangle {
-                    radius: (width * 0.5)
-                    anchors.fill: parent
-                    anchors.margins: VLCStyle.dp(1, VLCStyle.scale)
-
-                    color: VLCStyle.colors.white
-                }
-
-                Rectangle {
-                    id: outerRect
-                    anchors.fill: parent
-
-                    radius: (width * 0.5)
-                    gradient: playBtnGradient
-
-                    visible: false
-                }
-
-                Rectangle {
-                    id: innerRect
-                    anchors.fill: parent
-
-                    radius: (width * 0.5)
-                    border.width: VLCStyle.dp(2, VLCStyle.scale)
-
-                    color: "transparent"
-                    visible: false
-                }
-
-                OpacityMask {
-                    id: opacityMask
-                    anchors.fill: parent
-
-                    source: outerRect
-                    maskSource: innerRect
-
-                    antialiasing: true
-                }
-            }
-        }
-    }
-
-    Component{
-        id: nextBtnDelegate
-        Widgets.IconControlButton {
-            id: nextBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.next
-            enabled: mainPlaylistController.hasNext
-            onClicked: mainPlaylistController.next()
-            text: i18n.qtr("Next")
-        }
-    }
-
-    Component{
-        id: chapterPreviousBtnDelegate
-        Widgets.IconControlButton {
-            id: chapterPreviousBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.dvd_prev
-            onClicked: player.chapterPrev()
-            enabled: player.hasChapters
-            text: i18n.qtr("Previous chapter")
-        }
-    }
-
-
-    Component{
-        id: chapterNextBtnDelegate
-        Widgets.IconControlButton {
-            id: chapterNextBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.dvd_next
-            onClicked: player.chapterNext()
-            enabled: player.hasChapters
-            text: i18n.qtr("Next chapter")
-        }
-    }
-
-
-    Component{
-        id: repeatBtnDelegate
-        Widgets.IconControlButton {
-            id: repeatBtn
-            size: VLCStyle.icon_medium
-            checked: mainPlaylistController.repeatMode !== PlaylistControllerModel.PLAYBACK_REPEAT_NONE
-            iconText: (mainPlaylistController.repeatMode === PlaylistControllerModel.PLAYBACK_REPEAT_CURRENT)
-                  ? VLCIcons.repeat_one
-                  : VLCIcons.repeat_all
-            onClicked: mainPlaylistController.toggleRepeatMode()
-            text: i18n.qtr("Repeat")
-        }
-    }
-
-    Component{
-        id: langBtnDelegate
-        Widgets.IconControlButton {
-            id: langBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.audiosub
-
-            enabled: langMenuLoader.status === Loader.Ready
-            onClicked: langMenuLoader.item.open()
-
-            text: i18n.qtr("Languages and tracks")
-
-            Loader {
-                id: langMenuLoader
-
-                active: (typeof rootPlayer !== 'undefined') && (rootPlayer !== null)
-
-                sourceComponent: LanguageMenu {
-                    id: langMenu
-
-                    parent: rootPlayer
-                    focus: true
-                    x: 0
-                    y: (rootPlayer.positionSliderY - height)
-                    z: 1
-
-                    onOpened: {
-                        controlButtons.requestLockUnlockAutoHide(true, controlButtons)
-                        if (!!rootPlayer)
-                            rootPlayer.menu = langMenu
-                    }
-
-                    onClosed: {
-                        controlButtons.requestLockUnlockAutoHide(false, controlButtons)
-                        langBtn.forceActiveFocus()
-                        if (!!rootPlayer)
-                            rootPlayer.menu = undefined
-                    }
-                }
-            }
-        }
-    }
-
-    Component{
-        id:playlistBtnDelegate
-        Widgets.IconControlButton {
-            id: playlistBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.playlist
-            onClicked: {
-                mainInterface.playlistVisible = !mainInterface.playlistVisible
-                if (mainInterface.playlistVisible && mainInterface.playlistDocked) {
-                    playlistWidget.gainFocus(playlistBtn)
-                }
-            }
-
-            text: i18n.qtr("Playlist")
-        }
-
-    }
-
-    Component{
-        id: menuBtnDelegate
-        Widgets.IconControlButton {
-            id: menuBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.ellipsis
-            text: i18n.qtr("Menu")
-
-            onClicked: contextMenu.popup(this.mapToGlobal(0, 0))
-
-            QmlGlobalMenu {
-                id: contextMenu
-
-                ctx: mainctx
-
-                onAboutToShow: controlButtons.requestLockUnlockAutoHide(true, contextMenu)
-                onAboutToHide: controlButtons.requestLockUnlockAutoHide(false, contextMenu)
-            }
-        }
-    }
-
-    Component{
-        id:spacerDelegate
-        Item {
-            id: spacer
-            enabled: false
-            implicitWidth: VLCStyle.icon_normal
-            implicitHeight: VLCStyle.icon_normal
-            property alias spacetextExt: spacetext
-            property bool paintOnly: false
-            Label {
-                id: spacetext
-                text: VLCIcons.space
-                color: VLCStyle.colors.buttonText
-                visible: parent.paintOnly
-
-                anchors.centerIn: parent
-
-                font.pixelSize: VLCIcons.pixelSize(VLCStyle.icon_medium)
-                font.family: VLCIcons.fontFamily
-
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignHCenter
-            }
-        }
-    }
-
-    Component{
-        id: extendiblespacerDelegate
-        Item{
-            id: extendedspacer
-            enabled: false
-            implicitWidth: VLCStyle.widthExtendedSpacer
-            implicitHeight: VLCStyle.icon_normal
-            property bool paintOnly: false
-            property alias spacetextExt: spacetext
-            Label {
-                id: spacetext
-                text: VLCIcons.space
-                color: VLCStyle.colors.buttonText
-                visible: paintOnly
-
-                anchors.centerIn: parent
-
-                font.pixelSize: VLCIcons.pixelSize(VLCStyle.icon_medium)
-                font.family: VLCIcons.fontFamily
-
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignHCenter
-            }
-
-            Component.onCompleted: {
-                parent.Layout.fillWidth=true
-            }
-        }
-    }
-
-    Component{
-        id: fullScreenBtnDelegate
-        Widgets.IconControlButton{
-            id: fullScreenBtn
-            size: VLCStyle.icon_medium
-            enabled: player.hasVideoOutput
-            iconText: player.fullscreen ? VLCIcons.defullscreen :VLCIcons.fullscreen
-            onClicked: player.fullscreen = !player.fullscreen
-            text: i18n.qtr("fullscreen")
-        }
-    }
-
-    Component{
-        id: recordBtnDelegate
-        Widgets.IconControlButton{
-            id: recordBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.record
-            enabled: player.isPlaying
-            checked: player.isRecording
-            onClicked: player.toggleRecord()
-            text: i18n.qtr("record")
-        }
-    }
-
-    Component{
-        id: toggleABloopstateDelegate
-        Widgets.IconControlButton {
-            id: abBtn
-
-            size: VLCStyle.icon_medium
-            checked: player.ABloopState !== PlayerController.ABLOOP_STATE_NONE
-            onClicked: player.toggleABloopState()
-            text: i18n.qtr("A to B")
-
-            iconText: {
-                switch(player.ABloopState) {
-                  case PlayerController.ABLOOP_STATE_A: return VLCIcons.atob_bg_b
-                  case PlayerController.ABLOOP_STATE_B: return VLCIcons.atob_bg_none
-                  case PlayerController.ABLOOP_STATE_NONE: return VLCIcons.atob_bg_ab
-                }
-            }
-
-            Widgets.IconLabel {
-                anchors.centerIn: abBtn.contentItem
-
-                color: abBtn.colors.accent
-
-                text: {
-                    switch(player.ABloopState) {
-                      case PlayerController.ABLOOP_STATE_A: return VLCIcons.atob_fg_a
-                      case PlayerController.ABLOOP_STATE_B: return VLCIcons.atob_fg_ab
-                      case PlayerController.ABLOOP_STATE_NONE: return ""
-                    }
-                }
-            }
-        }
-    }
-
-    Component{
-        id: snapshotBtnDelegate
-        Widgets.IconControlButton{
-            id: snapshotBtn
-            size: VLCStyle.icon_medium
-            enabled: player.isPlaying
-            iconText: VLCIcons.snapshot
-            onClicked: player.snapshot()
-            text: i18n.qtr("Snapshot")
-        }
-    }
-
-
-    Component{
-        id: stopBtndelgate
-        Widgets.IconControlButton{
-            id: stopBtn
-            size: VLCStyle.icon_medium
-            enabled: player.isPlaying
-            iconText: VLCIcons.stop
-            onClicked: mainPlaylistController.stop()
-            text: i18n.qtr("Stop")
-        }
-    }
-
-    Component{
-        id: mediainfoBtnDelegate
-        Widgets.IconControlButton{
-            id: infoBtn
-            size: VLCStyle.icon_medium
-            enabled: player.isPlaying
-            iconText: VLCIcons.info
-            onClicked: dialogProvider.mediaInfoDialog()
-            text: i18n.qtr("Informations")
-        }
-    }
-
-    Component{
-        id: framebyframeDelegate
-
-        Widgets.IconControlButton{
-            id: frameBtn
-            size: VLCStyle.icon_medium
-            enabled: player.isPlaying
-            iconText: VLCIcons.frame_by_frame
-            onClicked: player.frameNext()
-            text: i18n.qtr("Next frame")
-        }
-    }
-
-    Component{
-        id: fasterBtnDelegate
-
-        Widgets.IconControlButton{
-            id: fasterBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.faster
-            onClicked: player.faster()
-            text: i18n.qtr("Faster")
-        }
-    }
-
-    Component{
-        id: slowerBtnDelegate
-
-        Widgets.IconControlButton{
-            id: slowerBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.slower
-            onClicked: player.slower()
-            text: i18n.qtr("Slower")
-        }
-    }
-
-    Component{
-        id: openmediaBtnDelegate
-        Widgets.IconControlButton{
-            id: openMediaBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.eject
-            onClicked: dialogProvider.openDialog()
-            text: i18n.qtr("Open media")
-        }
-    }
-
-    Component{
-        id: extdSettingsBtnDelegate
-        Widgets.IconControlButton{
-            id: extdSettingsBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.extended
-            onClicked: dialogProvider.extendedDialog()
-            Accessible.name: i18n.qtr("Extended settings")
-        }
-    }
-
-    Component{
-        id: stepFwdBtnDelegate
-        Widgets.IconControlButton{
-            id: stepfwdBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.skip_for
-            onClicked: player.jumpFwd()
-            text: i18n.qtr("Step forward")
-        }
-    }
-
-    Component{
-        id: stepBackBtnDelegate
-        Widgets.IconControlButton{
-            id: stepBackBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.skip_back
-            onClicked: player.jumpBwd()
-            text: i18n.qtr("Step back")
-        }
-    }
-
-    Component{
-        id: quitBtnDelegate
-        Widgets.IconControlButton{
-            id: quitBtn
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.clear
-            onClicked: mainInterface.close()
-            text: i18n.qtr("Quit")
-        }
-    }
-
-    Component{
-        id: aspectRatioDelegate
-        Widgets.ComboBoxExt {
-            property bool paintOnly: false
-            Layout.alignment: Qt.AlignVCenter
-            width: VLCStyle.combobox_width_normal
-            height: VLCStyle.combobox_height_normal
-            textRole: "display"
-            model: player.aspectRatio
-            currentIndex: -1
-            onCurrentIndexChanged: model.toggleIndex(currentIndex)
-            Accessible.name: i18n.qtr("Aspect ratio")
-        }
-    }
-
-    Component{
-        id: teletextdelegate
-        TeletextWidget{}
-    }
-
-    Component{
-        id: volumeBtnDelegate
-        VolumeWidget { parentWindow: controlButtons.parentWindow }
-    }
-
-    Component {
-        id: playerSwitchBtnDelegate
-
-        Widgets.IconControlButton{
-            size: VLCStyle.icon_medium
-            iconText: VLCIcons.fullscreen
-
-            onClicked: {
-                if (history.current.view === "player")
-                    history.previous()
-                else
-                    g_mainDisplay.showPlayer()
-            }
-
-            text: i18n.qtr("Switch Player")
-        }
-    }
-
-    Component {
-        id: artworkInfoDelegate
-
-        Widgets.AnimatedBackground {
-            id: artworkInfoItem
-
-            property bool paintOnly: false
-
-            property VLCColors colors: VLCStyle.colors
-
-            readonly property real minimumWidth: cover.width + VLCStyle.focus_border * 2
-            property real extraWidth: 0
-
-            implicitWidth: playingItemInfoRow.width + VLCStyle.focus_border * 2
-            implicitHeight: playingItemInfoRow.height + VLCStyle.focus_border * 2
-
-            activeBorderColor: colors.bgFocus
-
-            Keys.onPressed: {
-                if (KeyHelper.matchOk(event) ) {
-                    event.accepted = true
-                }
-                Navigation.defaultKeyAction(event)
-            }
-            Keys.onReleased: {
-                if (!event.accepted && KeyHelper.matchOk(event))
-                    g_mainDisplay.showPlayer()
-            }
-
-            MouseArea {
-                id: artworkInfoMouseArea
-                anchors.fill: parent
-                visible: !paintOnly
-                onClicked: g_mainDisplay.showPlayer()
-                hoverEnabled: true
-            }
-
-            Row {
-                id: playingItemInfoRow
-
-                anchors.centerIn: parent
-
-                width: (coverItem.width + infoColumn.width + spacing)
-
-                spacing: infoColumn.visible ? VLCStyle.margin_xsmall : 0
-
-                Item {
-                    id: coverItem
-                    anchors.verticalCenter: parent.verticalCenter
-                    implicitHeight: childrenRect.height
-                    implicitWidth:  childrenRect.width
-
-                    Rectangle {
-                        id: coverRect
-                        anchors.fill: cover
-                        color: colors.bg
-                    }
-
-                    DropShadow {
-                        anchors.fill: coverRect
-                        source: coverRect
-                        radius: 8
-                        samples: 17
-                        color: VLCStyle.colors.glowColorBanner
-                        spread: 0.2
-                    }
-
-                    Image {
-                        id: cover
-
-                        source: {
-                            if (paintOnly)
-                                VLCStyle.noArtAlbum
-                            else
-                                (mainPlaylistController.currentItem.artwork && mainPlaylistController.currentItem.artwork.toString())
-                                                                ? mainPlaylistController.currentItem.artwork
-                                                                : VLCStyle.noArtAlbum
-                        }
-                        fillMode: Image.PreserveAspectFit
-
-                        width: VLCStyle.dp(60)
-                        height: VLCStyle.dp(60)
-
-                        ToolTip {
-                            x: parent.x
-
-                            visible: artworkInfoItem.visible
-                                     && (titleLabel.implicitWidth > titleLabel.width || artistLabel.implicitWidth > titleLabel.width)
-                                     && (artworkInfoMouseArea.containsMouse || artworkInfoItem.active)
-                            delay: 500
-
-                            contentItem: Text {
-                                text: i18n.qtr("%1\n%2\n%3").arg(titleLabel.text).arg(artistLabel.text).arg(progressIndicator.text)
-                                color: colors.tooltipTextColor
-                            }
-
-                            background: Rectangle {
-                                color: colors.tooltipColor
-                            }
-                        }
-                    }
-                }
-
-                Column {
-                    id: infoColumn
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    readonly property real preferredWidth: Math.max(titleLabel.implicitWidth, artistLabel.implicitWidth, progressIndicator.implicitWidth)
-                    width: ((artworkInfoItem.extraWidth > preferredWidth) || (paintOnly)) ? preferredWidth
-                                                                                          : artworkInfoItem.extraWidth
-
-                    visible: width > 0
-
-                    Widgets.MenuLabel {
-                        id: titleLabel
-
-                        width: parent.width
-
-                        text: {
-                            if (paintOnly)
-                                i18n.qtr("Title")
-                            else
-                                mainPlaylistController.currentItem.title
-                        }
-                        color: colors.text
-                    }
-
-                    Widgets.MenuCaption {
-                        id: artistLabel
-
-                        width: parent.width
-
-                        text: {
-                            if (paintOnly)
-                                i18n.qtr("Artist")
-                            else
-                                mainPlaylistController.currentItem.artist
-                        }
-                        color: colors.menuCaption
-                    }
-
-                    Widgets.MenuCaption {
-                        id: progressIndicator
-
-                        width: parent.width
-
-                        text: {
-                            if (paintOnly)
-                                " -- / -- "
-                            else
-                                player.time.toString() + " / " + player.length.toString()
-                        }
-                        color: colors.menuCaption
-                    }
-                }
-            }
-        }
-    }
-
-    Component {
-        id: playbackSpeedButtonDelegate
-
-        Widgets.IconControlButton {
-            id: playbackSpeedButton
-
-            size: VLCStyle.icon_medium
-            text: i18n.qtr("Playback Speed")
-            color: playbackSpeedPopup.visible ? colors.accent : colors.playerControlBarFg
-
-            onClicked: playbackSpeedPopup.open()
-
-            PlaybackSpeed {
-                id: playbackSpeedPopup
-
-                z: 1
-                colors: playbackSpeedButton.colors
-                focus: true
-                parent: playbackSpeedButton.paintOnly
-                        ? playbackSpeedButton // button is not part of main display (ToolbarEditorDialog)
-                        : (history.current.view === "player") ? rootPlayer : g_mainDisplay
-
-                onOpened: {
-                    // update popup coordinates
-                    //
-                    // mapFromItem is affected by various properties of source and target objects
-                    // which can't be represented in a binding expression so a initial setting in
-                    // object defination (x: clamp(...)) doesn't work, so we set x and y on initial open
-                    x = Qt.binding(function () {
-                        // coords are mapped through playbackSpeedButton.parent so that binding is generated based on playbackSpeedButton.x
-                        var mappedParentCoordinates = parent.mapFromItem(playbackSpeedButton.parent, playbackSpeedButton.x, 0)
-                        return Helpers.clamp(mappedParentCoordinates.x  - ((width - playbackSpeedButton.width) / 2),
-                                             VLCStyle.margin_xxsmall + VLCStyle.applicationHorizontalMargin,
-                                             parent.width - VLCStyle.applicationHorizontalMargin - VLCStyle.margin_xxsmall - width)
-                    })
-
-                    y = Qt.binding(function () {
-                        // coords are mapped through playbackSpeedButton.parent so that binding is generated based on playbackSpeedButton.y
-                        var mappedParentCoordinates = parent.mapFromItem(playbackSpeedButton.parent, 0, playbackSpeedButton.y)
-                        return mappedParentCoordinates.y - playbackSpeedPopup.height - VLCStyle.margin_xxsmall
-                    })
-
-                    // player related --
-                    controlButtons.requestLockUnlockAutoHide(true, controlButtons)
-                    if (!!rootPlayer)
-                        rootPlayer.menu = playbackSpeedPopup
-                }
-
-                onClosed: {
-                    controlButtons.requestLockUnlockAutoHide(false, controlButtons)
-                    playbackSpeedButton.forceActiveFocus()
-                    if (!!rootPlayer)
-                        rootPlayer.menu = undefined
-                }
-            }
-
-            Label {
-                anchors.centerIn: parent
-                font.pixelSize: VLCStyle.fontSize_normal
-                text: !playbackSpeedButton.paintOnly ? i18n.qtr("%1x").arg(+player.rate.toFixed(2)) : i18n.qtr("1x")
-                color: playbackSpeedButton.background.foregroundColor // IconToolButton.background is a AnimatedBackground
-            }
-        }
-    }
-}

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

+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+pragma Singleton
+
+import QtQml 2.11
+
+import org.videolan.vlc 0.1
+
+import "qrc:///player/controlbarcontrols/" as Controls
+import "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+QtObject {
+    readonly property string controlPath : "qrc:///player/controlbarcontrols/"
+
+    readonly property var controlList: [
+        { id: ControlListModel.PLAY_BUTTON, file: "PlayButton.qml", label: VLCIcons.play, text: i18n.qtr("Play") },
+        { id: ControlListModel.STOP_BUTTON, file: "StopButton.qml", label: VLCIcons.stop, text: i18n.qtr("Stop") },
+        { id: ControlListModel.OPEN_BUTTON, file: "OpenButton.qml", label: VLCIcons.eject, text: i18n.qtr("Open") },
+        { id: ControlListModel.PREVIOUS_BUTTON, file: "PreviousButton.qml", label: VLCIcons.previous, text: i18n.qtr("Previous") },
+        { id: ControlListModel.NEXT_BUTTON, file: "NextButton.qml", label: VLCIcons.next, text: i18n.qtr("Next") },
+        { id: ControlListModel.SLOWER_BUTTON, file: "SlowerButton.qml", label: VLCIcons.slower, text: i18n.qtr("Slower") },
+        { id: ControlListModel.FASTER_BUTTON, file: "FasterButton.qml", label: VLCIcons.faster, text: i18n.qtr("Faster") },
+        { id: ControlListModel.FULLSCREEN_BUTTON, file: "FullscreenButton.qml", label: VLCIcons.fullscreen, text: i18n.qtr("Fullscreen") },
+        { id: ControlListModel.EXTENDED_BUTTON, file: "ExtendedSettingsButton.qml", label: VLCIcons.extended, text: i18n.qtr("Extended panel") },
+        { id: ControlListModel.PLAYLIST_BUTTON, file: "PlaylistButton.qml", label: VLCIcons.playlist, text: i18n.qtr("Playlist") },
+        { id: ControlListModel.SNAPSHOT_BUTTON, file: "SnapshotButton.qml", label: VLCIcons.snapshot, text: i18n.qtr("Snapshot") },
+        { id: ControlListModel.RECORD_BUTTON, file: "RecordButton.qml", label: VLCIcons.record, text: i18n.qtr("Record") },
+        { id: ControlListModel.ATOB_BUTTON, file: "AtoBButton.qml", label: VLCIcons.atob, text: i18n.qtr("A-B Loop") },
+        { id: ControlListModel.FRAME_BUTTON, file: "FrameButton.qml", label: VLCIcons.frame_by_frame, text: i18n.qtr("Frame By Frame") },
+        { id: ControlListModel.SKIP_BACK_BUTTON, file: "SkipBackButton.qml", label: VLCIcons.skip_back, text: i18n.qtr("Step backward") },
+        { id: ControlListModel.SKIP_FW_BUTTON, file: "SkipForwardButton.qml", label: VLCIcons.skip_for, text: i18n.qtr("Step forward") },
+        { id: ControlListModel.QUIT_BUTTON, file: "QuitButton.qml", label: VLCIcons.clear, text: i18n.qtr("Quit") },
+        { id: ControlListModel.RANDOM_BUTTON, file: "RandomButton.qml", label: VLCIcons.shuffle_on, text: i18n.qtr("Random") },
+        { id: ControlListModel.LOOP_BUTTON, file: "LoopButton.qml", label: VLCIcons.repeat_all, text: i18n.qtr("Loop") },
+        { id: ControlListModel.INFO_BUTTON, file: "InfoButton.qml", label: VLCIcons.info, text: i18n.qtr("Information") },
+        { id: ControlListModel.LANG_BUTTON, file: "LangButton.qml", label: VLCIcons.audiosub, text: i18n.qtr("Open subtitles") },
+        { id: ControlListModel.MENU_BUTTON, file: "MenuButton.qml", label: VLCIcons.menu, text: i18n.qtr("Menu Button") },
+        { id: ControlListModel.BACK_BUTTON, file: "BackButton.qml", label: VLCIcons.exit, text: i18n.qtr("Back Button") },
+        { id: ControlListModel.CHAPTER_PREVIOUS_BUTTON, file: "ChapterPreviousButton.qml", label: VLCIcons.dvd_prev, text: i18n.qtr("Previous chapter") },
+        { id: ControlListModel.CHAPTER_NEXT_BUTTON, file: "ChapterNextButton.qml", label: VLCIcons.dvd_next, text: i18n.qtr("Next chapter") },
+        { id: ControlListModel.VOLUME, file: "VolumeWidget.qml", label: VLCIcons.volume_high, text: i18n.qtr("Volume Widget") },
+        { id: ControlListModel.TELETEXT_BUTTONS, file: "TeletextWidget.qml", label: VLCIcons.tvtelx, text: i18n.qtr("Teletext") },
+        { 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") },
+        { id: ControlListModel.WIDGET_SPACER_EXTEND, file: "ExpandingSpacerWidget.qml", label: VLCIcons.space, text: i18n.qtr("Expanding Spacer") },
+        { id: ControlListModel.PLAYER_SWITCH_BUTTON, file: "PlayerSwitchButton.qml", label: VLCIcons.fullscreen, text: i18n.qtr("Switch Player") },
+        { id: ControlListModel.ARTWORK_INFO, file: "ArtworkInfoWidget.qml", label: VLCIcons.info, text: i18n.qtr("Artwork Info") },
+        { id: ControlListModel.PLAYBACK_SPEED_BUTTON, file: "PlaybackSpeedButton.qml", label: "1x", text: i18n.qtr("Playback Speed") }
+    ]
+
+    function control(id) {
+        var control = controlList.find( function(control) { return ( control.id === id ) } )
+
+        if (control === undefined) {
+            console.log("control delegate id " + id +  " doesn't exist")
+            return { source: controlPath + "Fallback.qml" }
+        }
+        
+        control.source = controlPath + control.file
+
+        return control
+    }
+}

modules/gui/qt/player/qml/MiniPlayer.qml

@@ -11,47 +11,30 @@ import "qrc:///style/"
 FocusScope {
     id: root
 
-    readonly property bool expanded: root.implicitHeight === VLCStyle.miniPlayerHeight
+    implicitHeight: controlBar.implicitHeight
+    height: 0
+
+    readonly property bool expanded: (height !== 0)
 
     property var mainContent: undefined
 
-    Component.onCompleted: {
-        if (player.playingState !== PlayerController.PLAYING_STATE_STOPPED)
-            root.implicitHeight = Qt.binding(function() { return VLCStyle.miniPlayerHeight; })
-    }
+    state: (player.playingState === PlayerController.PLAYING_STATE_STOPPED) ? ""
+                                                                            : "expanded"
 
-    Connections {
-        target: player
-        onPlayingStateChanged: {
-            if (player.playingState === PlayerController.PLAYING_STATE_STOPPED)
-                animateRetract.start()
-            else if (player.playingState === PlayerController.PLAYING_STATE_PLAYING)
-                animateExpand.start()
-        }
-    }
+    states: State {
+        id: stateExpanded
+        name: "expanded"
 
-    PropertyAnimation {
-        id: animateExpand;
-        target: root;
-        properties: "implicitHeight"
-        duration: VLCStyle.duration_normal
-        easing.type: Easing.InSine
-        to: VLCStyle.miniPlayerHeight
-        onStopped: {
-            root.implicitHeight = Qt.binding(function() { return VLCStyle.miniPlayerHeight; })
+        PropertyChanges {
+            target: root
+            height: implicitHeight
         }
     }
 
-    PropertyAnimation {
-        id: animateRetract;
-        target: root;
-        properties: "implicitHeight"
-        duration: VLCStyle.duration_normal
-        easing.type: Easing.OutSine
-        to: 0
-        onStopped: {
-            root.implicitHeight = 0
-        }
+    transitions: Transition {
+        from: ""; to: "expanded"
+        reversible: true
+        NumberAnimation { property: "height"; easing.type: Easing.InOutSine; duration: VLCStyle.duration_normal; }
     }
 
     // this MouseArea prevents mouse events to be sent below miniplayer
@@ -73,11 +56,14 @@ FocusScope {
     ControlBar {
         id: controlBar
 
-        anchors.left: parent.left
-        anchors.right: parent.right
+        anchors.fill: parent
+
+        rightPadding: VLCStyle.applicationHorizontalMargin
+        leftPadding: rightPadding
+        bottomPadding: VLCStyle.applicationVerticalMargin
+
         focus: true
         colors: VLCStyle.colors
-        height: VLCStyle.miniPlayerHeight
         textPosition: ControlBar.TimeTextPosition.Hide
         sliderHeight: VLCStyle.dp(3, VLCStyle.scale)
         sliderBackgroundColor: colors.sliderBarMiniplayerBgColor

modules/gui/qt/player/qml/Player.qml

@@ -556,13 +556,14 @@ FocusScope {
             right: parent.right
             bottom: parent.bottom
             bottomMargin: parent.height - rootPlayer.positionSliderY
+            topMargin: VLCStyle.applicationVerticalMargin
         }
         focus: false
         edge: Widgets.DrawerExt.Edges.Right
         state: showPlaylist && mainInterface.playlistDocked ? "visible" : "hidden"
         component: Rectangle {
             color: rootPlayer.colors.setColorAlpha(rootPlayer.colors.topBanner, 0.8)
-            width: rootPlayer.width/4
+            width: (rootPlayer.width + playlistView.rightPadding) / 4
             height: playlistpopup.height
 
             PL.PlaylistListView {
@@ -573,6 +574,8 @@ FocusScope {
                 anchors.fill: parent
 
                 colors: rootPlayer.colors
+                rightPadding: VLCStyle.applicationHorizontalMargin
+
                 Navigation.parentItem: rootPlayer
                 Navigation.upItem: topcontrolView
                 Navigation.downItem: controlBarView

modules/gui/qt/player/qml/PlayerButtonsLayout.qml

@@ -26,14 +26,9 @@ import "qrc:///widgets/" as Widgets
 FocusScope {
     id: playerButtonsLayout
 
-    implicitHeight: Math.max(buttonrow_left.implicitHeight, buttonrow_center.implicitHeight, buttonrow_right.implicitHeight)
+    implicitHeight: VLCStyle.maxControlbarControlHeight
 
-    property alias parentWindow: controlmodelbuttons.parentWindow
-
-    property real marginLeft: VLCStyle.margin_normal
-    property real marginRight: VLCStyle.margin_normal
-    property real marginTop: 0
-    property real marginBottom: 0
+    property var parentWindow: g_root
 
     property var colors: undefined
 
@@ -56,24 +51,14 @@ FocusScope {
         console.assert(identifier >= 0)
     }
 
-    ControlButtons {
-        id: controlmodelbuttons
-
-        parentWindow: g_root
-
-        onRequestLockUnlockAutoHide: playerButtonsLayout.requestLockUnlockAutoHide(lock, source)
-    }
-
     Loader {
         id: buttonrow_left
 
         anchors {
             left: parent.left
-            verticalCenter: parent.verticalCenter
+            top: parent.top
+            bottom: parent.bottom
 
-            leftMargin: marginLeft
-            topMargin: marginTop
-            bottomMargin: marginBottom
             rightMargin: layoutSpacing
         }
 
@@ -102,10 +87,9 @@ FocusScope {
         id: buttonrow_center
 
         anchors {
-            centerIn: parent
-
-            topMargin: playerButtonsLayout.marginTop
-            bottomMargin: playerButtonsLayout.marginBottom
+            horizontalCenter: parent.horizontalCenter
+            top: parent.top
+            bottom: parent.bottom
         }
 
         active: !!playerButtonsLayout.model
@@ -129,11 +113,9 @@ FocusScope {
 
         anchors {
             right: parent.right
-            verticalCenter: parent.verticalCenter
+            top: parent.top
+            bottom: parent.bottom
 
-            rightMargin: marginRight
-            topMargin: marginTop
-            bottomMargin: marginBottom
             leftMargin: layoutSpacing
         }
 

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

+/*****************************************************************************
+ * Copyright (C) 2021 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 QtGraphicalEffects 1.0
+
+import org.videolan.vlc 0.1
+
+import "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+
+Control {
+    id: artworkInfoItem
+
+    property bool paintOnly: false
+
+    property VLCColors colors: VLCStyle.colors
+
+    readonly property real minimumWidth: cover.width + (leftPadding + rightPadding)
+    property real extraWidth: 0
+
+    padding: VLCStyle.focus_border
+
+    Keys.onPressed: {
+        if (KeyHelper.matchOk(event))
+            event.accepted = true
+
+        Navigation.defaultKeyAction(event)
+    }
+
+    Keys.onReleased: {
+        if (KeyHelper.matchOk(event)) {
+            g_mainDisplay.showPlayer()
+            event.accepted = true
+        }
+    }
+
+    MouseArea {
+        id: artworkInfoMouseArea
+        anchors.fill: parent
+        visible: !paintOnly
+        onClicked: g_mainDisplay.showPlayer()
+        hoverEnabled: true
+    }
+
+    background: Widgets.AnimatedBackground {
+        active: visualFocus
+        activeBorderColor: colors.bgFocus
+    }
+
+    contentItem: Row {
+        spacing: infoColumn.visible ? VLCStyle.margin_xsmall : 0
+
+        Item {
+            id: coverItem
+
+            anchors.verticalCenter: parent.verticalCenter
+
+            implicitHeight: childrenRect.height
+            implicitWidth:  childrenRect.width
+
+            Rectangle {
+                id: coverRect
+
+                anchors.fill: cover
+
+                color: colors.bg
+            }
+
+            DropShadow {
+                anchors.fill: coverRect
+
+                source: coverRect
+                radius: 8
+                samples: 17
+                color: VLCStyle.colors.glowColorBanner
+                spread: 0.2
+            }
+
+            Image {
+                id: cover
+
+                source: {
+                    if (paintOnly)
+                        VLCStyle.noArtAlbum
+                    else
+                        (mainPlaylistController.currentItem.artwork && mainPlaylistController.currentItem.artwork.toString())
+                                                        ? mainPlaylistController.currentItem.artwork
+                                                        : VLCStyle.noArtAlbum
+                }
+                fillMode: Image.PreserveAspectFit
+
+                width: VLCStyle.dp(60)
+                height: VLCStyle.dp(60)
+
+                ToolTip {
+                    x: parent.x
+
+                    visible: artworkInfoItem.visible
+                             && infoColumn.width < infoColumn.preferredWidth
+                             && (artworkInfoMouseArea.containsMouse || artworkInfoItem.visualFocus)
+                    delay: 500
+
+                    contentItem: Text {
+                        text: i18n.qtr("%1\n%2\n%3").arg(titleLabel.text).arg(artistLabel.text).arg(progressIndicator.text)
+                        color: colors.tooltipTextColor
+                    }
+
+                    background: Rectangle {
+                        color: colors.tooltipColor
+                    }
+                }
+            }
+        }
+
+        Column {
+            id: infoColumn
+            anchors.verticalCenter: parent.verticalCenter
+
+            readonly property real preferredWidth: Math.max(titleLabel.implicitWidth, artistLabel.implicitWidth, progressIndicator.implicitWidth)
+            width: ((extraWidth > preferredWidth) || (paintOnly)) ? preferredWidth
+                                                                  : extraWidth
+
+            visible: width > VLCStyle.dp(15, VLCStyle.scale)
+
+            Widgets.MenuLabel {
+                id: titleLabel
+
+                width: parent.width
+
+                text: {
+                    if (paintOnly)
+                        i18n.qtr("Title")
+                    else
+                        mainPlaylistController.currentItem.title
+                }
+                color: colors.text
+            }
+
+            Widgets.MenuCaption {
+                id: artistLabel
+
+                width: parent.width
+
+                text: {
+                    if (paintOnly)
+                        i18n.qtr("Artist")
+                    else
+                        mainPlaylistController.currentItem.artist
+                }
+                color: colors.menuCaption
+            }
+
+            Widgets.MenuCaption {
+                id: progressIndicator
+
+                width: parent.width
+
+                text: {
+                    if (paintOnly)
+                        " -- / -- "
+                    else
+                        player.time.toString() + " / " + player.length.toString()
+                }
+                color: colors.menuCaption
+            }
+        }
+    }
+}

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

+/*****************************************************************************
+ * Copyright (C) 2021 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 "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+
+Widgets.ComboBoxExt {
+    property bool paintOnly: false
+    width: VLCStyle.combobox_width_normal
+    height: VLCStyle.combobox_height_normal
+    textRole: "display"
+    model: player.aspectRatio
+    currentIndex: -1
+    onCurrentIndexChanged: model.toggleIndex(currentIndex)
+    Accessible.name: i18n.qtr("Aspect ratio")
+}

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

+/*****************************************************************************
+ * Copyright (C) 2021 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 "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+
+Widgets.IconControlButton {
+    id: abBtn
+
+    size: VLCStyle.icon_medium
+    checked: player.ABloopState !== PlayerController.ABLOOP_STATE_NONE
+    onClicked: player.toggleABloopState()
+    text: i18n.qtr("A to B")
+
+    iconText: {
+        switch(player.ABloopState) {
+          case PlayerController.ABLOOP_STATE_A: return VLCIcons.atob_bg_b
+          case PlayerController.ABLOOP_STATE_B: return VLCIcons.atob_bg_none
+          case PlayerController.ABLOOP_STATE_NONE: return VLCIcons.atob_bg_ab
+        }
+    }
+
+    Widgets.IconLabel {
+        anchors.centerIn: abBtn.contentItem
+
+        color: abBtn.colors.accent
+
+        text: {
+            switch(player.ABloopState) {
+              case PlayerController.ABLOOP_STATE_A: return VLCIcons.atob_fg_a
+              case PlayerController.ABLOOP_STATE_B: return VLCIcons.atob_fg_ab
+              case PlayerController.ABLOOP_STATE_NONE: return ""
+            }
+        }
+    }
+}

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

+/*****************************************************************************
+ * Copyright (C) 2021 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 "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+
+Widgets.IconControlButton {
+    id: backBtn
+    size: VLCStyle.icon_medium
+    iconText: VLCIcons.exit
+    text: i18n.qtr("Back")
+    onClicked: history.previous()
+}

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

+/*****************************************************************************
+ * Copyright (C) 2021 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 "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+
+Widgets.IconControlButton {
+    id: chapterNextBtn
+    size: VLCStyle.icon_medium
+    iconText: VLCIcons.dvd_next
+    onClicked: player.chapterNext()
+    enabled: player.hasChapters
+    text: i18n.qtr("Next chapter")
+}

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

+/*****************************************************************************
+ * Copyright (C) 2021 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 "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+
+Widgets.IconControlButton {
+    id: chapterPreviousBtn
+    size: VLCStyle.icon_medium
+    iconText: VLCIcons.dvd_prev
+    onClicked: player.chapterPrev()
+    enabled: player.hasChapters
+    text: i18n.qtr("Previous chapter")
+}

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

+/*****************************************************************************
+ * Copyright (C) 2021 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 "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+
+Item {
+    enabled: false
+
+    implicitWidth: paintOnly ? VLCStyle.widthExtendedSpacer : extraWidth
+    implicitHeight: VLCStyle.icon_normal
+
+    property bool paintOnly: false
+    property alias spacetextExt: spacetext
+
+    readonly property real minimumWidth: 0
+    property real extraWidth: 0
+
+    Label {
+        id: spacetext
+        anchors.centerIn: parent
+
+        text: VLCIcons.space
+        color: VLCStyle.colors.buttonText
+        visible: paintOnly
+
+        font.pixelSize: VLCIcons.pixelSize(VLCStyle.icon_medium)
+        font.family: VLCIcons.fontFamily
+
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+    }
+}

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

+/*****************************************************************************
+ * Copyright (C) 2021 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 "qrc:///widgets/" as Widgets
+import "qrc:///style/"
+
+
+Widgets.IconControlButton {
+    id: extdSettingsBtn
+    size: VLCStyle.icon_medium
+    iconText: VLCIcons.extended
+    onClicked: dialogProvider.extendedDialog()
+    Accessible.name: i18n.qtr("Extended settings")
+}