Tidy up file browsing in video examples

* Use QStandardPaths to determine the initial folder displayed when
  the file browser is launched
* Persist folder between file browser invocations

Change-Id: I5b86dd3d304c3f33802f3189716e1d360774198d
Reviewed-by: Jonas Rabbe <jonas.rabbe@nokia.com>

examples/video/qmlvideo/main.cpp

@@ -39,8 +39,10 @@
 **
 ****************************************************************************/
 
+#include <QtCore/QStandardPaths>
 #include <QtCore/QString>
 #include <QtCore/QStringList>
+#include <QtDeclarative/QDeclarativeContext>
 #include <QtGui/QGuiApplication>
 #include <QtQuick/QQuickItem>
 #include "qmlapplicationviewer.h"
@@ -124,6 +126,12 @@ int main(int argc, char *argv[])
                      rootObject, SLOT(qmlFramePainted()));
 #endif
 
+    QString videoPath;
+    const QStringList moviesLocation = QStandardPaths::standardLocations(QStandardPaths::MoviesLocation);
+    if (!moviesLocation.isEmpty())
+        videoPath = moviesLocation.first();
+    viewer.rootContext()->setContextProperty("videoPath", videoPath);
+
     QMetaObject::invokeMethod(rootObject, "init");
 
     viewer.showExpanded();

examples/video/qmlvideo/qml/qmlvideo/FileBrowser.qml

@@ -43,312 +43,341 @@ import QtQuick 2.0
 import Qt.labs.folderlistmodel 1.0
 
 Rectangle {
-    id: root
+    id: fileBrowser
-    color: "white"
+    color: "transparent"
-    property bool showFocusHighlight: false
-    property variant folders: folders1
-    property variant view: view1
-    property alias folder: folders1.folder
-    property color textColor: "black"
 
-    signal openFile(string path)
+    property string folder
 
-    FolderListModel {
+    signal fileSelected(string file)
-        id: folders1
+
-        folder: folder
+    function selectFile(file) {
+        if (file != "")
+            folder = loader.item.folders.folder
+        loader.sourceComponent = undefined
+        fileBrowser.fileSelected(file)
     }
 
-    FolderListModel {
+    Loader {
-        id: folders2
+        id: loader
-        folder: folder
     }
 
-    SystemPalette {
+    function show() {
-        id: palette
+        loader.sourceComponent = fileBrowserComponent
+        loader.item.parent = fileBrowser
+        loader.item.anchors.fill = fileBrowser
+        loader.item.folder = fileBrowser.folder
     }
 
     Component {
-        id: folderDelegate
+        id: fileBrowserComponent
 
         Rectangle {
-            id: wrapper
+            id: root
-            function launch() {
+            color: "white"
-                if (folders.isFolder(index))
+            property bool showFocusHighlight: false
-                    down(filePath);
+            property variant folders: folders1
-                else
+            property variant view: view1
-                    root.openFile(filePath);
+            property alias folder: folders1.folder
+            property color textColor: "black"
+
+            FolderListModel {
+                id: folders1
+                folder: folder
+            }
+
+            FolderListModel {
+                id: folders2
+                folder: folder
+            }
+
+            SystemPalette {
+                id: palette
+            }
+
+            Component {
+                id: folderDelegate
+
+                Rectangle {
+                    id: wrapper
+                    function launch() {
+                        if (folders.isFolder(index))
+                            down(filePath);
+                        else
+                            fileBrowser.selectFile(filePath)
+                    }
+                    width: root.width
+                    height: 52
+                    color: "transparent"
+
+                    Rectangle {
+                        id: highlight; visible: false
+                        anchors.fill: parent
+                        color: palette.highlight
+                        gradient: Gradient {
+                            GradientStop { id: t1; position: 0.0; color: palette.highlight }
+                            GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
+                        }
+                    }
+
+                    Item {
+                        width: 48; height: 48
+                        Image {
+                            source: "qrc:/images/folder.png"
+                            anchors.centerIn: parent
+                            visible: folders.isFolder(index)
+                        }
+                    }
+
+                    Text {
+                        id: nameText
+                        anchors.fill: parent; verticalAlignment: Text.AlignVCenter
+                        text: fileName
+                        anchors.leftMargin: 54
+                        font.pixelSize: 32
+                        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 }
+                        }
+                    ]
+                }
             }
-            width: root.width
-            height: 52
-            color: "transparent"
 
             Rectangle {
-                id: highlight; visible: false
+                id: cancelButton
-                anchors.fill: parent
+                width: 100
-                color: palette.highlight
+                height: titleBar.height - 7
-                gradient: Gradient {
+                color: "black"
-                    GradientStop { id: t1; position: 0.0; color: palette.highlight }
+                anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
-                    GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
+
+                Text {
+                    anchors { fill: parent; margins: 4 }
+                    text: "Cancel"
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    font.pixelSize: 20
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: fileBrowser.selectFile("")
                 }
             }
 
-            Item {
+            ListView {
-                width: 48; height: 48
+                id: view1
-                Image {
+                anchors.top: titleBar.bottom
-                    source: "qrc:/images/folder.png"
+                anchors.bottom: cancelButton.top
-                    anchors.centerIn: parent
+                x: 0
-                    visible: folders.isFolder(index)
+                width: parent.width
+                model: folders1
+                delegate: folderDelegate
+                highlight: Rectangle {
+                    color: palette.highlight
+                    visible: root.showFocusHighlight && view1.count != 0
+                    gradient: Gradient {
+                        GradientStop { id: t1; position: 0.0; color: palette.highlight }
+                        GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
+                    }
+                    width: view1.currentItem == null ? 0 : view1.currentItem.width
+                }
+                highlightMoveSpeed: 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: palette.highlight
+                    visible: root.showFocusHighlight && view2.count != 0
+                    gradient: Gradient {
+                        GradientStop { id: t1; position: 0.0; color: palette.highlight }
+                        GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
+                    }
+                    width: view1.currentItem == null ? 0 : view1.currentItem.width
+                }
+                highlightMoveSpeed: 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)
+            }
+
+            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();
                 }
             }
 
-            Text {
+            BorderImage {
-                id: nameText
+                source: "qrc:/images/titlebar.sci";
-                anchors.fill: parent; verticalAlignment: Text.AlignVCenter
+                width: parent.width;
-                text: fileName
+                height: 52
-                anchors.leftMargin: 54
+                y: -7
-                font.pixelSize: 32
+                id: titleBar
-                color: (wrapper.ListView.isCurrentItem && root.showFocusHighlight) ? palette.highlightedText : textColor
-                elide: Text.ElideRight
-            }
 
-            MouseArea {
+                Rectangle {
-                id: mouseRegion
+                    id: upButton
-                anchors.fill: parent
+                    width: 48
-                onPressed: {
+                    height: titleBar.height - 7
-                    root.showFocusHighlight = false;
+                    color: "transparent"
-                    wrapper.ListView.view.currentIndex = index;
+                    Image { anchors.centerIn: parent; source: "qrc:/images/up.png" }
+                    MouseArea { id: upRegion; anchors.centerIn: parent
+                        width: 56
+                        height: 56
+                        onClicked: if (folders.parentFolder != "") up()
+                    }
+                    states: [
+                        State {
+                            name: "pressed"
+                            when: upRegion.pressed
+                            PropertyChanges { target: upButton; color: palette.highlight }
+                        }
+                    ]
                 }
-                onClicked: { if (folders == wrapper.ListView.view.model) launch() }
-            }
 
-            states: [
+                Rectangle {
-                State {
+                    color: "gray"
-                    name: "pressed"
+                    x: 48
-                    when: mouseRegion.pressed
+                    width: 1
-                    PropertyChanges { target: highlight; visible: true }
+                    height: 44
-                    PropertyChanges { target: nameText; color: palette.highlightedText }
                 }
-            ]
-        }
-    }
 
-    Rectangle {
+                Text {
-        id: cancelButton
+                    anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
-        width: 100
+                    anchors.leftMargin: 4; anchors.rightMargin: 4
-        height: titleBar.height - 7
+                    text: folders.folder
-        color: "black"
+                    color: "white"
-        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
+                    elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
-
+                    font.pixelSize: 32
-        Text {
-            anchors { fill: parent; margins: 4 }
-            text: "Cancel"
-            color: "white"
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 20
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: root.openFile("")
-        }
-    }
-
-    ListView {
-        id: view1
-        anchors.top: titleBar.bottom
-        anchors.bottom: cancelButton.top
-        x: 0
-        width: parent.width
-        model: folders1
-        delegate: folderDelegate
-        highlight: Rectangle {
-            color: palette.highlight
-            visible: root.showFocusHighlight && view1.count != 0
-            gradient: Gradient {
-                GradientStop { id: t1; position: 0.0; color: palette.highlight }
-                GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
-            }
-            width: view1.currentItem == null ? 0 : view1.currentItem.width
-        }
-        highlightMoveSpeed: 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 {
+            function down(path) {
-        id: view2
+                if (folders == folders1) {
-        anchors.top: titleBar.bottom
+                    view = view2
-        anchors.bottom: parent.bottom
+                    folders = folders2;
-        x: parent.width
+                    view1.state = "exitLeft";
-        width: parent.width
+                } else {
-        model: folders2
+                    view = view1
-        delegate: folderDelegate
+                    folders = folders1;
-        highlight: Rectangle {
+                    view2.state = "exitLeft";
-            color: palette.highlight
-            visible: root.showFocusHighlight && view2.count != 0
-            gradient: Gradient {
-                GradientStop { id: t1; position: 0.0; color: palette.highlight }
-                GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
-            }
-            width: view1.currentItem == null ? 0 : view1.currentItem.width
-        }
-        highlightMoveSpeed: 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 }
                 }
-            },
+                view.x = root.width;
-            Transition {
+                view.state = "current";
-                NumberAnimation { properties: "x"; duration: 250 }
+                view.focus = true;
+                folders.folder = path;
             }
-        ]
-        Keys.onPressed: root.keyPressed(event.key)
-    }
 
-    Keys.onPressed: {
+            function up() {
-        root.keyPressed(event.key);
+                var path = folders.parentFolder;
-        if (event.key == Qt.Key_Return || event.key == Qt.Key_Select || event.key == Qt.Key_Right) {
+                if (folders == folders1) {
-            view.currentItem.launch();
+                    view = view2
-            event.accepted = true;
+                    folders = folders2;
-        } else if (event.key == Qt.Key_Left) {
+                    view1.state = "exitRight";
-            up();
+                } else {
-        }
+                    view = view1
-    }
+                    folders = folders1;
-
+                    view2.state = "exitRight";
-    BorderImage {
-        source: "qrc:/images/titlebar.sci";
-        width: parent.width;
-        height: 52
-        y: -7
-        id: titleBar
-
-        Rectangle {
-            id: upButton
-            width: 48
-            height: titleBar.height - 7
-            color: "transparent"
-            Image { anchors.centerIn: parent; source: "qrc:/images/up.png" }
-            MouseArea { id: upRegion; anchors.centerIn: parent
-                width: 56
-                height: 56
-                onClicked: if (folders.parentFolder != "") up()
-            }
-            states: [
-                State {
-                    name: "pressed"
-                    when: upRegion.pressed
-                    PropertyChanges { target: upButton; color: palette.highlight }
                 }
-            ]
+                view.x = -root.width;
-        }
+                view.state = "current";
+                view.focus = true;
+                folders.folder = path;
+            }
 
-        Rectangle {
+            function keyPressed(key) {
-            color: "gray"
+                switch (key) {
-            x: 48
+                    case Qt.Key_Up:
-            width: 1
+                    case Qt.Key_Down:
-            height: 44
+                    case Qt.Key_Left:
-        }
+                    case Qt.Key_Right:
-
+                        root.showFocusHighlight = true;
-        Text {
+                    break;
-            anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
+                    default:
-            anchors.leftMargin: 4; anchors.rightMargin: 4
+                        // do nothing
-            text: folders.folder
+                    break;
-            color: "white"
+                }
-            elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
+            }
-            font.pixelSize: 32
-        }
-    }
-
-    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 (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;
         }
     }
 }

examples/video/qmlvideo/qml/qmlvideo/main.qml

@@ -56,7 +56,6 @@ Rectangle {
 
     QtObject {
         id: d
-        property int fileIndex
         property int itemHeight: 40
         property int buttonHeight: 0.8 * itemHeight
         property int margins: 10
@@ -99,7 +98,7 @@ Rectangle {
             }
             height: d.buttonHeight
             text: (root.source1 == "") ? "Select file 1" : root.source1
-            onClicked: showFileBrowser(1)
+            onClicked: fileBrowser1.show()
         }
 
         Button {
@@ -112,7 +111,7 @@ Rectangle {
             }
             height: d.buttonHeight
             text: (root.source2 == "") ? "Select file 2" : root.source2
-            onClicked: showFileBrowser(2)
+            onClicked: fileBrowser2.show()
         }
 
         Button {
@@ -187,8 +186,26 @@ Rectangle {
         ignoreUnknownSignals: true
     }
 
-    Loader {
+    FileBrowser {
-        id: fileBrowserLoader
+        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
     }
 
     ErrorDialog {
@@ -200,6 +217,8 @@ Rectangle {
     // Called from main() once root properties have been set
     function init() {
         performanceLoader.init()
+        fileBrowser1.folder = videoPath
+        fileBrowser2.folder = videoPath
     }
 
     function qmlFramePainted() {
@@ -207,26 +226,6 @@ Rectangle {
             performanceLoader.item.qmlFramePainted()
     }
 
-    function showFileBrowser(index) {
-        console.log("[qmlvideo] main.showFileBrowser")
-        d.fileIndex = index
-        fileBrowserLoader.source = "FileBrowser.qml"
-        fileBrowserLoader.item.parent = root
-        fileBrowserLoader.item.anchors.fill = root
-        fileBrowserLoader.item.openFile.connect(root.openFile)
-        inner.visible = false
-    }
-
-    function openFile(path) {
-        console.log("[qmlvideo] main.openFile " + d.fileIndex + " \"" + path + "\"")
-        fileBrowserLoader.source = ""
-        if (1 == d.fileIndex)
-            root.source1 = path
-        else if (2 == d.fileIndex)
-            root.source2 = path
-        inner.visible = true
-    }
-
     function closeScene() {
         console.log("[qmlvideo] main.closeScene")
         sceneSelectionPanel.sceneSource = ""

examples/video/qmlvideofx/main.cpp

@@ -39,6 +39,7 @@
 **
 ****************************************************************************/
 
+#include <QtCore/QStandardPaths>
 #include <QtCore/QStringList>
 #include <QtDeclarative/QDeclarativeContext>
 #include <QtGui/QGuiApplication>
@@ -116,6 +117,18 @@ int main(int argc, char *argv[])
     FileReader fileReader;
     viewer.rootContext()->setContextProperty("fileReader", &fileReader);
 
+    QString imagePath = "../../images";
+    const QStringList picturesLocation = QStandardPaths::standardLocations(QStandardPaths::PicturesLocation);
+    if (!picturesLocation.isEmpty())
+        imagePath = picturesLocation.first();
+    viewer.rootContext()->setContextProperty("imagePath", imagePath);
+
+    QString videoPath;
+    const QStringList moviesLocation = QStandardPaths::standardLocations(QStandardPaths::MoviesLocation);
+    if (!moviesLocation.isEmpty())
+        videoPath = moviesLocation.first();
+    viewer.rootContext()->setContextProperty("videoPath", videoPath);
+
 #ifdef SMALL_SCREEN_PHYSICAL
     viewer.showFullScreen();
 #else

examples/video/qmlvideofx/qml/qmlvideofx/FileBrowser.qml

@@ -43,312 +43,341 @@ import QtQuick 2.0
 import Qt.labs.folderlistmodel 1.0
 
 Rectangle {
-    id: root
+    id: fileBrowser
-    color: "white"
+    color: "transparent"
-    property bool showFocusHighlight: false
-    property variant folders: folders1
-    property variant view: view1
-    property alias folder: folders1.folder
-    property color textColor: "black"
 
-    signal openFile(string path)
+    property string folder
 
-    FolderListModel {
+    signal fileSelected(string file)
-        id: folders1
+
-        folder: folder
+    function selectFile(file) {
+        if (file != "")
+            folder = loader.item.folders.folder
+        loader.sourceComponent = undefined
+        fileBrowser.fileSelected(file)
     }
 
-    FolderListModel {
+    Loader {
-        id: folders2
+        id: loader
-        folder: folder
     }
 
-    SystemPalette {
+    function show() {
-        id: palette
+        loader.sourceComponent = fileBrowserComponent
+        loader.item.parent = fileBrowser
+        loader.item.anchors.fill = fileBrowser
+        loader.item.folder = fileBrowser.folder
     }
 
     Component {
-        id: folderDelegate
+        id: fileBrowserComponent
 
         Rectangle {
-            id: wrapper
+            id: root
-            function launch() {
+            color: "white"
-                if (folders.isFolder(index))
+            property bool showFocusHighlight: false
-                    down(filePath);
+            property variant folders: folders1
-                else
+            property variant view: view1
-                    root.openFile(filePath);
+            property alias folder: folders1.folder
+            property color textColor: "black"
+
+            FolderListModel {
+                id: folders1
+                folder: folder
+            }
+
+            FolderListModel {
+                id: folders2
+                folder: folder
+            }
+
+            SystemPalette {
+                id: palette
+            }
+
+            Component {
+                id: folderDelegate
+
+                Rectangle {
+                    id: wrapper
+                    function launch() {
+                        if (folders.isFolder(index))
+                            down(filePath);
+                        else
+                            fileBrowser.selectFile(filePath)
+                    }
+                    width: root.width
+                    height: 52
+                    color: "transparent"
+
+                    Rectangle {
+                        id: highlight; visible: false
+                        anchors.fill: parent
+                        color: palette.highlight
+                        gradient: Gradient {
+                            GradientStop { id: t1; position: 0.0; color: palette.highlight }
+                            GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
+                        }
+                    }
+
+                    Item {
+                        width: 48; height: 48
+                        Image {
+                            source: "qrc:/images/folder.png"
+                            anchors.centerIn: parent
+                            visible: folders.isFolder(index)
+                        }
+                    }
+
+                    Text {
+                        id: nameText
+                        anchors.fill: parent; verticalAlignment: Text.AlignVCenter
+                        text: fileName
+                        anchors.leftMargin: 54
+                        font.pixelSize: 32
+                        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 }
+                        }
+                    ]
+                }
             }
-            width: root.width
-            height: 52
-            color: "transparent"
 
             Rectangle {
-                id: highlight; visible: false
+                id: cancelButton
-                anchors.fill: parent
+                width: 100
-                color: palette.highlight
+                height: titleBar.height - 7
-                gradient: Gradient {
+                color: "black"
-                    GradientStop { id: t1; position: 0.0; color: palette.highlight }
+                anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
-                    GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
+
+                Text {
+                    anchors { fill: parent; margins: 4 }
+                    text: "Cancel"
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    font.pixelSize: 20
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: fileBrowser.selectFile("")
                 }
             }
 
-            Item {
+            ListView {
-                width: 48; height: 48
+                id: view1
-                Image {
+                anchors.top: titleBar.bottom
-                    source: "qrc:/images/folder.png"
+                anchors.bottom: cancelButton.top
-                    anchors.centerIn: parent
+                x: 0
-                    visible: folders.isFolder(index)
+                width: parent.width
+                model: folders1
+                delegate: folderDelegate
+                highlight: Rectangle {
+                    color: palette.highlight
+                    visible: root.showFocusHighlight && view1.count != 0
+                    gradient: Gradient {
+                        GradientStop { id: t1; position: 0.0; color: palette.highlight }
+                        GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
+                    }
+                    width: view1.currentItem == null ? 0 : view1.currentItem.width
+                }
+                highlightMoveSpeed: 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: palette.highlight
+                    visible: root.showFocusHighlight && view2.count != 0
+                    gradient: Gradient {
+                        GradientStop { id: t1; position: 0.0; color: palette.highlight }
+                        GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
+                    }
+                    width: view1.currentItem == null ? 0 : view1.currentItem.width
+                }
+                highlightMoveSpeed: 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)
+            }
+
+            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();
                 }
             }
 
-            Text {
+            BorderImage {
-                id: nameText
+                source: "qrc:/images/titlebar.sci";
-                anchors.fill: parent; verticalAlignment: Text.AlignVCenter
+                width: parent.width;
-                text: fileName
+                height: 52
-                anchors.leftMargin: 54
+                y: -7
-                font.pixelSize: 32
+                id: titleBar
-                color: (wrapper.ListView.isCurrentItem && root.showFocusHighlight) ? palette.highlightedText : textColor
-                elide: Text.ElideRight
-            }
 
-            MouseArea {
+                Rectangle {
-                id: mouseRegion
+                    id: upButton
-                anchors.fill: parent
+                    width: 48
-                onPressed: {
+                    height: titleBar.height - 7
-                    root.showFocusHighlight = false;
+                    color: "transparent"
-                    wrapper.ListView.view.currentIndex = index;
+                    Image { anchors.centerIn: parent; source: "qrc:/images/up.png" }
+                    MouseArea { id: upRegion; anchors.centerIn: parent
+                        width: 56
+                        height: 56
+                        onClicked: if (folders.parentFolder != "") up()
+                    }
+                    states: [
+                        State {
+                            name: "pressed"
+                            when: upRegion.pressed
+                            PropertyChanges { target: upButton; color: palette.highlight }
+                        }
+                    ]
                 }
-                onClicked: { if (folders == wrapper.ListView.view.model) launch() }
-            }
 
-            states: [
+                Rectangle {
-                State {
+                    color: "gray"
-                    name: "pressed"
+                    x: 48
-                    when: mouseRegion.pressed
+                    width: 1
-                    PropertyChanges { target: highlight; visible: true }
+                    height: 44
-                    PropertyChanges { target: nameText; color: palette.highlightedText }
                 }
-            ]
-        }
-    }
 
-    Rectangle {
+                Text {
-        id: cancelButton
+                    anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
-        width: 100
+                    anchors.leftMargin: 4; anchors.rightMargin: 4
-        height: titleBar.height - 7
+                    text: folders.folder
-        color: "black"
+                    color: "white"
-        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
+                    elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
-
+                    font.pixelSize: 32
-        Text {
-            anchors { fill: parent; margins: 4 }
-            text: "Cancel"
-            color: "white"
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 20
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: root.openFile("")
-        }
-    }
-
-    ListView {
-        id: view1
-        anchors.top: titleBar.bottom
-        anchors.bottom: cancelButton.top
-        x: 0
-        width: parent.width
-        model: folders1
-        delegate: folderDelegate
-        highlight: Rectangle {
-            color: palette.highlight
-            visible: root.showFocusHighlight && view1.count != 0
-            gradient: Gradient {
-                GradientStop { id: t1; position: 0.0; color: palette.highlight }
-                GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
-            }
-            width: view1.currentItem == null ? 0 : view1.currentItem.width
-        }
-        highlightMoveSpeed: 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 {
+            function down(path) {
-        id: view2
+                if (folders == folders1) {
-        anchors.top: titleBar.bottom
+                    view = view2
-        anchors.bottom: parent.bottom
+                    folders = folders2;
-        x: parent.width
+                    view1.state = "exitLeft";
-        width: parent.width
+                } else {
-        model: folders2
+                    view = view1
-        delegate: folderDelegate
+                    folders = folders1;
-        highlight: Rectangle {
+                    view2.state = "exitLeft";
-            color: palette.highlight
-            visible: root.showFocusHighlight && view2.count != 0
-            gradient: Gradient {
-                GradientStop { id: t1; position: 0.0; color: palette.highlight }
-                GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
-            }
-            width: view1.currentItem == null ? 0 : view1.currentItem.width
-        }
-        highlightMoveSpeed: 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 }
                 }
-            },
+                view.x = root.width;
-            Transition {
+                view.state = "current";
-                NumberAnimation { properties: "x"; duration: 250 }
+                view.focus = true;
+                folders.folder = path;
             }
-        ]
-        Keys.onPressed: root.keyPressed(event.key)
-    }
 
-    Keys.onPressed: {
+            function up() {
-        root.keyPressed(event.key);
+                var path = folders.parentFolder;
-        if (event.key == Qt.Key_Return || event.key == Qt.Key_Select || event.key == Qt.Key_Right) {
+                if (folders == folders1) {
-            view.currentItem.launch();
+                    view = view2
-            event.accepted = true;
+                    folders = folders2;
-        } else if (event.key == Qt.Key_Left) {
+                    view1.state = "exitRight";
-            up();
+                } else {
-        }
+                    view = view1
-    }
+                    folders = folders1;
-
+                    view2.state = "exitRight";
-    BorderImage {
-        source: "qrc:/images/titlebar.sci";
-        width: parent.width;
-        height: 52
-        y: -7
-        id: titleBar
-
-        Rectangle {
-            id: upButton
-            width: 48
-            height: titleBar.height - 7
-            color: "transparent"
-            Image { anchors.centerIn: parent; source: "qrc:/images/up.png" }
-            MouseArea { id: upRegion; anchors.centerIn: parent
-                width: 56
-                height: 56
-                onClicked: if (folders.parentFolder != "") up()
-            }
-            states: [
-                State {
-                    name: "pressed"
-                    when: upRegion.pressed
-                    PropertyChanges { target: upButton; color: palette.highlight }
                 }
-            ]
+                view.x = -root.width;
-        }
+                view.state = "current";
+                view.focus = true;
+                folders.folder = path;
+            }
 
-        Rectangle {
+            function keyPressed(key) {
-            color: "gray"
+                switch (key) {
-            x: 48
+                    case Qt.Key_Up:
-            width: 1
+                    case Qt.Key_Down:
-            height: 44
+                    case Qt.Key_Left:
-        }
+                    case Qt.Key_Right:
-
+                        root.showFocusHighlight = true;
-        Text {
+                    break;
-            anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
+                    default:
-            anchors.leftMargin: 4; anchors.rightMargin: 4
+                        // do nothing
-            text: folders.folder
+                    break;
-            color: "white"
+                }
-            elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
+            }
-            font.pixelSize: 32
-        }
-    }
-
-    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 (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;
         }
     }
 }

examples/video/qmlvideofx/qml/qmlvideofx/main-largescreen.qml

@@ -51,11 +51,6 @@ Rectangle {
     property bool perfMonitorsLogging: false
     property bool perfMonitorsVisible: false
 
-    QtObject {
-        id: d
-        property string openFileType
-    }
-
     Rectangle {
         id: inner
         anchors.fill: parent
@@ -131,8 +126,16 @@ Rectangle {
         }
     }
 
-    Loader {
+    FileBrowser {
-        id: fileBrowserLoader
+        id: imageFileBrowser
+        anchors.fill: root
+        Component.onCompleted: fileSelected.connect(content.openImage)
+    }
+
+    FileBrowser {
+        id: videoFileBrowser
+        anchors.fill: root
+        Component.onCompleted: fileSelected.connect(content.openVideo)
     }
 
     Component.onCompleted: {
@@ -144,12 +147,12 @@ Rectangle {
 
     function init() {
         console.log("[qmlvideofx] main.init")
+        imageFileBrowser.folder = imagePath
+        videoFileBrowser.folder = videoPath
         content.init()
         performanceLoader.init()
-        if (fileName != "") {
+        if (fileName != "")
-            d.openFileType = "video"
+            content.openVideo(fileName)
-            openFile(fileName)
-        }
     }
 
     function qmlFramePainted() {
@@ -158,13 +161,11 @@ Rectangle {
     }
 
     function openImage() {
-        d.openFileType = "image"
+        imageFileBrowser.show()
-        showFileBrowser("../../images")
     }
 
     function openVideo() {
-        d.openFileType = "video"
+        videoFileBrowser.show()
-        showFileBrowser("../../videos")
     }
 
     function openCamera() {
@@ -174,24 +175,4 @@ Rectangle {
     function close() {
         content.openImage("qrc:/images/qt-logo.png")
     }
-
-    function showFileBrowser(path) {
-        fileBrowserLoader.source = "FileBrowser.qml"
-        fileBrowserLoader.item.parent = root
-        fileBrowserLoader.item.anchors.fill = root
-        fileBrowserLoader.item.openFile.connect(root.openFile)
-        fileBrowserLoader.item.folder = path
-        inner.visible = false
-    }
-
-    function openFile(path) {
-        fileBrowserLoader.source = ""
-        if (path != "") {
-            if (d.openFileType == "image")
-                content.openImage(path)
-            else if (d.openFileType == "video")
-                content.openVideo(path)
-        }
-        inner.visible = true
-    }
 }

examples/video/qmlvideofx/qml/qmlvideofx/main-smallscreen.qml

@@ -51,11 +51,6 @@ Rectangle {
     property bool perfMonitorsLogging: false
     property bool perfMonitorsVisible: false
 
-    QtObject {
-        id: d
-        property string openFileType
-    }
-
     // Create ScreenSaver element via Loader, so this app will still run if the
     // SystemInfo module is not available
     Loader {
@@ -344,21 +339,30 @@ Rectangle {
         fileOpen.close.connect(close)
     }
 
-    Loader {
+    FileBrowser {
-        id: fileBrowserLoader
+        id: imageFileBrowser
+        anchors.fill: root
+        Component.onCompleted: fileSelected.connect(content.openImage)
+    }
+
+    FileBrowser {
+        id: videoFileBrowser
+        anchors.fill: root
+        Component.onCompleted: fileSelected.connect(content.openVideo)
     }
 
     // Called from main() once root properties have been set
     function init() {
         console.log("[qmlvideofx] main.init")
+        imageFileBrowser.folder = imagePath
+        videoFileBrowser.folder = videoPath
         content.init()
         performanceLoader.init()
         if (fileName != "") {
             fileOpenMouseArea.hintEnabled = false
             effectSelectionPanelMouseArea.hintEnabled = false
             splashScreen.state = "hidden"
-            d.openFileType = "video"
+            content.openVideo(fileName)
-            openFile(fileName)
         }
     }
 
@@ -369,14 +373,12 @@ Rectangle {
 
     function openImage() {
         fileOpenContainer.state = "baseState"
-        d.openFileType = "image"
+        imageFileBrowser.show()
-        showFileBrowser("../../images")
     }
 
     function openVideo() {
         fileOpenContainer.state = "baseState"
-        d.openFileType = "video"
+        videoFileBrowser.show()
-        showFileBrowser("../../videos")
     }
 
     function openCamera() {
@@ -388,25 +390,4 @@ Rectangle {
         fileOpenContainer.state = "baseState"
         content.openImage("qrc:/images/qt-logo.png")
     }
-
-    function showFileBrowser(path) {
-        content.stop()
-        fileBrowserLoader.source = "FileBrowser.qml"
-        fileBrowserLoader.item.parent = root
-        fileBrowserLoader.item.anchors.fill = root
-        fileBrowserLoader.item.openFile.connect(root.openFile)
-        fileBrowserLoader.item.folder = path
-        inner.visible = false
-    }
-
-    function openFile(path) {
-        fileBrowserLoader.source = ""
-        if (path != "") {
-            if (d.openFileType == "image")
-                content.openImage(path)
-            else if (d.openFileType == "video")
-                content.openVideo(path)
-        }
-        inner.visible = true
-    }
 }