Examples: Use FileDialog in qmlvideo

Custom made file dialog with QML was not Android friendly.
Use FileDialog QML type instead of manually written FileBrowser.

Fixes: QTBUG-96084
Change-Id: I8c711291243808365eacdc57df1d99a8a01285b2
Reviewed-by: Assam Boudjelthia <assam.boudjelthia@qt.io>
(cherry picked from commit 11a2d9d3100d2231b1ce517d2dda8d8792d2cc03)
Reviewed-by: Daniel Smith <Daniel.Smith@qt.io>

5 files changed, 20 insertions, 399 deletions

diff --git a/examples/multimedia/video/qmlvideo/CMakeLists.txt b/examples/multimedia/video/qmlvideo/CMakeLists.txt
index 906ba61cf..9f4b0f966 100644
--- a/examples/multimedia/video/qmlvideo/CMakeLists.txt
+++ b/examples/multimedia/video/qmlvideo/CMakeLists.txt
@@ -72,7 +72,6 @@ set(qmlvideo_resource_files
     "qml/qmlvideo/CameraSpin.qml"
     "qml/qmlvideo/Content.qml"
     "qml/qmlvideo/ErrorDialog.qml"
-    "qml/qmlvideo/FileBrowser.qml"
     "qml/qmlvideo/Scene.qml"
     "qml/qmlvideo/SceneBasic.qml"
     "qml/qmlvideo/SceneDrag.qml"
diff --git a/examples/multimedia/video/qmlvideo/doc/src/qmlvideo.qdoc b/examples/multimedia/video/qmlvideo/doc/src/qmlvideo.qdoc
index 4d6ff6fc1..61f6b3338 100644
--- a/examples/multimedia/video/qmlvideo/doc/src/qmlvideo.qdoc
+++ b/examples/multimedia/video/qmlvideo/doc/src/qmlvideo.qdoc
@@ -30,7 +30,7 @@ The \c main.qml file creates a UI which includes the following items:
 
 \list
     \li Two \c Button instances, each of which displays a filename, and can be
-        used to launch a \c FileBrowser.
+        used to launch a \c FileDialog.
     \li An exit \c Button.
     \li A \c SceneSelectionPanel, which is a flickable list displaying the
         available scenes.
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
deleted file mode 100644
index 4aafc1269..000000000
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
+++ /dev/null
@@ -1,372 +0,0 @@
-// Copyright (C) 2016 The Qt Company Ltd.
-// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
-
-import QtQuick
-import Qt.labs.folderlistmodel
-
-Rectangle {
-    id: fileBrowser
-    color: "transparent"
-
-    property string folder
-
-    property int itemHeight: Math.min(parent.width, parent.height) / 15
-    property int buttonHeight: Math.min(parent.width, parent.height) / 12
-
-    signal fileSelected(string file)
-
-    function selectFile(file) {
-        if (file !== "") {
-            folder = loader.item.folders.folder
-            fileBrowser.fileSelected(file)
-        }
-        loader.sourceComponent = undefined
-    }
-
-    Loader {
-        id: loader
-    }
-
-    function show() {
-        loader.sourceComponent = fileBrowserComponent
-        loader.item.parent = fileBrowser
-        loader.item.anchors.fill = fileBrowser
-        loader.item.folder = fileBrowser.folder
-    }
-
-    Component {
-        id: fileBrowserComponent
-
-        Rectangle {
-            id: root
-            color: "black"
-            property bool showFocusHighlight: false
-            property variant folders: folders1
-            property variant view: view1
-            property alias folder: folders1.folder
-            property color textColor: "white"
-
-            FolderListModel {
-                id: folders1
-                folder: folder
-            }
-
-            FolderListModel {
-                id: folders2
-                folder: folder
-            }
-
-            SystemPalette {
-                id: palette
-            }
-
-            Component {
-                id: folderDelegate
-
-                Rectangle {
-                    id: wrapper
-                    function launch() {
-                        var path = "file://";
-                        if (filePath.length > 2 && filePath[1] === ':') // Windows drive logic, see QUrl::fromLocalFile()
-                            path += '/';
-                        path += filePath;
-                        if (folders.isFolder(index))
-                            down(path);
-                        else
-                            fileBrowser.selectFile(path)
-                    }
-                    width: root.width
-                    height: folderImage.height
-                    color: "transparent"
-
-                    Rectangle {
-                        id: highlight
-                        visible: false
-                        anchors.fill: parent
-                        anchors.leftMargin: 5
-                        anchors.rightMargin: 5
-                        color: "#212121"
-                    }
-
-                    Item {
-                        id: folderImage
-                        width: itemHeight
-                        height: itemHeight
-                        Image {
-                            id: folderPicture
-                            source: "qrc:/folder.png"
-                            width: itemHeight * 0.9
-                            height: itemHeight * 0.9
-                            anchors.left: parent.left
-                            anchors.margins: 5
-                            visible: folders.isFolder(index)
-                        }
-                    }
-
-                    Text {
-                        id: nameText
-                        anchors.fill: parent;
-                        verticalAlignment: Text.AlignVCenter
-                        text: fileName
-                        anchors.leftMargin: itemHeight + 10
-                        color: (wrapper.ListView.isCurrentItem && root.showFocusHighlight) ? palette.highlightedText : textColor
-                        elide: Text.ElideRight
-                    }
-
-                    MouseArea {
-                        id: mouseRegion
-                        anchors.fill: parent
-                        onPressed: {
-                            root.showFocusHighlight = false;
-                            wrapper.ListView.view.currentIndex = index;
-                        }
-                        onClicked: { if (folders === wrapper.ListView.view.model) launch() }
-                    }
-
-                    states: [
-                        State {
-                            name: "pressed"
-                            when: mouseRegion.pressed
-                            PropertyChanges { target: highlight; visible: true }
-                            PropertyChanges { target: nameText; color: palette.highlightedText }
-                        }
-                    ]
-                }
-            }
-
-            ListView {
-                id: view1
-                anchors.top: titleBar.bottom
-                anchors.bottom: cancelButton.top
-                width: parent.width
-                model: folders1
-                delegate: folderDelegate
-                highlight: Rectangle {
-                    color: "#212121"
-                    visible: root.showFocusHighlight && view1.count != 0
-                    width: view1.currentItem == null ? 0 : view1.currentItem.width
-                }
-                highlightMoveVelocity: 1000
-                pressDelay: 100
-                focus: true
-                state: "current"
-                states: [
-                    State {
-                        name: "current"
-                        PropertyChanges { target: view1; x: 0 }
-                    },
-                    State {
-                        name: "exitLeft"
-                        PropertyChanges { target: view1; x: -root.width }
-                    },
-                    State {
-                        name: "exitRight"
-                        PropertyChanges { target: view1; x: root.width }
-                    }
-                ]
-                transitions: [
-                    Transition {
-                        to: "current"
-                        SequentialAnimation {
-                            NumberAnimation { properties: "x"; duration: 250 }
-                        }
-                    },
-                    Transition {
-                        NumberAnimation { properties: "x"; duration: 250 }
-                        NumberAnimation { properties: "x"; duration: 250 }
-                    }
-                ]
-                Keys.onPressed: root.keyPressed(event.key)
-            }
-
-            ListView {
-                id: view2
-                anchors.top: titleBar.bottom
-                anchors.bottom: parent.bottom
-                x: parent.width
-                width: parent.width
-                model: folders2
-                delegate: folderDelegate
-                highlight: Rectangle {
-                    color: "#212121"
-                    visible: root.showFocusHighlight && view2.count != 0
-                    width: view1.currentItem == null ? 0 : view1.currentItem.width
-                }
-                highlightMoveVelocity: 1000
-                pressDelay: 100
-                states: [
-                    State {
-                        name: "current"
-                        PropertyChanges { target: view2; x: 0 }
-                    },
-                    State {
-                        name: "exitLeft"
-                        PropertyChanges { target: view2; x: -root.width }
-                    },
-                    State {
-                        name: "exitRight"
-                        PropertyChanges { target: view2; x: root.width }
-                    }
-                ]
-                transitions: [
-                    Transition {
-                        to: "current"
-                        SequentialAnimation {
-                            NumberAnimation { properties: "x"; duration: 250 }
-                        }
-                    },
-                    Transition {
-                        NumberAnimation { properties: "x"; duration: 250 }
-                    }
-                ]
-                Keys.onPressed: root.keyPressed(event.key)
-            }
-
-            Rectangle {
-                width: parent.width
-                height: buttonHeight + 10
-                anchors.bottom: parent.bottom
-                color: "black"
-            }
-
-            Rectangle {
-                id: cancelButton
-                width: parent.width
-                height: buttonHeight
-                color: "#212121"
-                anchors.bottom: parent.bottom
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.margins: 5
-                radius: buttonHeight / 15
-
-                Text {
-                    anchors.fill: parent
-                    text: "Cancel"
-                    color: "white"
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                }
-
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: fileBrowser.selectFile("")
-                }
-            }
-
-            Keys.onPressed: {
-                root.keyPressed(event.key);
-                if (event.key === Qt.Key_Return || event.key === Qt.Key_Select || event.key === Qt.Key_Right) {
-                    view.currentItem.launch();
-                    event.accepted = true;
-                } else if (event.key === Qt.Key_Left) {
-                    up();
-                }
-            }
-
-
-            Rectangle {
-                id: titleBar
-                width: parent.width
-                height: buttonHeight + 10
-                anchors.top: parent.top
-                color: "black"
-
-                Rectangle {
-                    width: parent.width;
-                    height: buttonHeight
-                    color: "#212121"
-                    anchors.margins: 5
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    radius: buttonHeight / 15
-
-                    Rectangle {
-                        id: upButton
-                        width: buttonHeight
-                        height: buttonHeight
-                        color: "transparent"
-                        Image {
-                            width: itemHeight
-                            height: itemHeight
-                            anchors.centerIn: parent
-                            source: "qrc:/up.png"
-                        }
-                        MouseArea { id: upRegion; anchors.centerIn: parent
-                            width: buttonHeight
-                            height: buttonHeight
-                            onClicked: up()
-                        }
-                        states: [
-                            State {
-                                name: "pressed"
-                                when: upRegion.pressed
-                                PropertyChanges { target: upButton; color: palette.highlight }
-                            }
-                        ]
-                    }
-
-                    Text {
-                        anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
-                        anchors.leftMargin: 5; anchors.rightMargin: 5
-                        text: folders.folder
-                        color: "white"
-                        elide: Text.ElideLeft;
-                        horizontalAlignment: Text.AlignLeft;
-                        verticalAlignment: Text.AlignVCenter
-                    }
-                }
-            }
-
-            function down(path) {
-                if (folders == folders1) {
-                    view = view2
-                    folders = folders2;
-                    view1.state = "exitLeft";
-                } else {
-                    view = view1
-                    folders = folders1;
-                    view2.state = "exitLeft";
-                }
-                view.x = root.width;
-                view.state = "current";
-                view.focus = true;
-                folders.folder = path;
-            }
-
-            function up() {
-                var path = folders.parentFolder;
-                if (path.toString().length === 0 || path.toString() === 'file:')
-                    return;
-                if (folders == folders1) {
-                    view = view2
-                    folders = folders2;
-                    view1.state = "exitRight";
-                } else {
-                    view = view1
-                    folders = folders1;
-                    view2.state = "exitRight";
-                }
-                view.x = -root.width;
-                view.state = "current";
-                view.focus = true;
-                folders.folder = path;
-            }
-
-            function keyPressed(key) {
-                switch (key) {
-                case Qt.Key_Up:
-                case Qt.Key_Down:
-                case Qt.Key_Left:
-                case Qt.Key_Right:
-                    root.showFocusHighlight = true;
-                    break;
-                default:
-                    // do nothing
-                    break;
-                }
-            }
-        }
-    }
-}
diff --git a/examples/multimedia/video/qmlvideo/qml/qmlvideo/main.qml b/examples/multimedia/video/qmlvideo/qml/qmlvideo/main.qml
index 8f7dc9608..4d69c4681 100644
--- a/examples/multimedia/video/qmlvideo/qml/qmlvideo/main.qml
+++ b/examples/multimedia/video/qmlvideo/qml/qmlvideo/main.qml
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 import QtQuick
+import QtQuick.Dialogs
 
 Rectangle {
     id: root
@@ -67,7 +68,10 @@ Rectangle {
             textColorSelected: "white"
             height: d.buttonHeight
             text: (root.source1 == "") ? "Select file 1" : root.source1
-            onClicked: fileBrowser1.show()
+            onClicked: {
+                fileBrowser.setFirstSource = true
+                fileBrowser.open()
+            }
         }
 
         Button {
@@ -83,7 +87,10 @@ Rectangle {
             textColorSelected: "white"
             height: d.buttonHeight
             text: (root.source2 == "") ? "Select file 2" : root.source2
-            onClicked: fileBrowser2.show()
+            onClicked: {
+                fileBrowser.setFirstSource = false
+                fileBrowser.open()
+            }
         }
 
         Button {
@@ -190,26 +197,15 @@ Rectangle {
         ignoreUnknownSignals: true
     }
 
-    FileBrowser {
-        id: fileBrowser1
-        anchors.fill: root
-        onFolderChanged: fileBrowser2.folder = folder
-        Component.onCompleted: fileSelected.connect(root.openFile1)
-    }
-
-    FileBrowser {
-        id: fileBrowser2
-        anchors.fill: root
-        onFolderChanged: fileBrowser1.folder = folder
-        Component.onCompleted: fileSelected.connect(root.openFile2)
-    }
-
-    function openFile1(path) {
-        root.source1 = path
-    }
-
-    function openFile2(path) {
-        root.source2 = path
+    FileDialog {
+        id: fileBrowser
+        property bool setFirstSource
+        onAccepted: {
+            if (setFirstSource)
+               root.source1 = currentFile
+            else
+               root.source2 = currentFile
+        }
     }
 
     ErrorDialog {
@@ -223,8 +219,7 @@ Rectangle {
     // Called from main() once root properties have been set
     function init() {
         performanceLoader.init()
-        fileBrowser1.folder = videoPath
-        fileBrowser2.folder = videoPath
+        fileBrowser.currentFolder = videoPath
     }
 
     function qmlFramePainted() {
diff --git a/examples/multimedia/video/qmlvideo/qmlvideo.pro b/examples/multimedia/video/qmlvideo/qmlvideo.pro
index 7a6bbccff..b16368f7c 100644
--- a/examples/multimedia/video/qmlvideo/qmlvideo.pro
+++ b/examples/multimedia/video/qmlvideo/qmlvideo.pro
@@ -44,7 +44,6 @@ resources.files = \
     qml/qmlvideo/CameraSpin.qml \
     qml/qmlvideo/Content.qml \
     qml/qmlvideo/ErrorDialog.qml \
-    qml/qmlvideo/FileBrowser.qml \
     qml/qmlvideo/Scene.qml \
     qml/qmlvideo/SceneBasic.qml \
     qml/qmlvideo/SceneDrag.qml \