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>

1 files changed, 298 insertions, 269 deletions

diff --git a/examples/video/qmlvideo/qml/qmlvideo/FileBrowser.qml b/examples/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
index 50985adf8..6467ba085 100644
--- a/examples/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
+++ b/examples/video/qmlvideo/qml/qmlvideo/FileBrowser.qml
@@ -43,312 +43,341 @@ import QtQuick 2.0
 import Qt.labs.folderlistmodel 1.0
 
 Rectangle {
-    id: root
-    color: "white"
-    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)
-
-    FolderListModel {
-        id: folders1
-        folder: folder
+    id: fileBrowser
+    color: "transparent"
+
+    property string folder
+
+    signal fileSelected(string file)
+
+    function selectFile(file) {
+        if (file != "")
+            folder = loader.item.folders.folder
+        loader.sourceComponent = undefined
+        fileBrowser.fileSelected(file)
     }
 
-    FolderListModel {
-        id: folders2
-        folder: folder
+    Loader {
+        id: loader
     }
 
-    SystemPalette {
-        id: palette
+    function show() {
+        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
-            function launch() {
-                if (folders.isFolder(index))
-                    down(filePath);
-                else
-                    root.openFile(filePath);
-            }
-            width: root.width
-            height: 52
-            color: "transparent"
+            id: root
+            color: "white"
+            property bool showFocusHighlight: false
+            property variant folders: folders1
+            property variant view: view1
+            property alias folder: folders1.folder
+            property color textColor: "black"
 
-            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) }
-                }
+            FolderListModel {
+                id: folders1
+                folder: folder
             }
 
-            Item {
-                width: 48; height: 48
-                Image {
-                    source: "qrc:/images/folder.png"
-                    anchors.centerIn: parent
-                    visible: folders.isFolder(index)
-                }
+            FolderListModel {
+                id: folders2
+                folder: folder
             }
 
-            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
+            SystemPalette {
+                id: palette
             }
 
-            MouseArea {
-                id: mouseRegion
-                anchors.fill: parent
-                onPressed: {
-                    root.showFocusHighlight = false;
-                    wrapper.ListView.view.currentIndex = index;
-                }
-                onClicked: { if (folders == wrapper.ListView.view.model) launch() }
-            }
+            Component {
+                id: folderDelegate
 
-            states: [
-                State {
-                    name: "pressed"
-                    when: mouseRegion.pressed
-                    PropertyChanges { target: highlight; visible: true }
-                    PropertyChanges { target: nameText; color: palette.highlightedText }
-                }
-            ]
-        }
-    }
+                Rectangle {
+                    id: wrapper
+                    function launch() {
+                        if (folders.isFolder(index))
+                            down(filePath);
+                        else
+                            fileBrowser.selectFile(filePath)
+                    }
+                    width: root.width
+                    height: 52
+                    color: "transparent"
 
-    Rectangle {
-        id: cancelButton
-        width: 100
-        height: titleBar.height - 7
-        color: "black"
-        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
+                    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) }
+                        }
+                    }
 
-        Text {
-            anchors { fill: parent; margins: 4 }
-            text: "Cancel"
-            color: "white"
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 20
-        }
+                    Item {
+                        width: 48; height: 48
+                        Image {
+                            source: "qrc:/images/folder.png"
+                            anchors.centerIn: parent
+                            visible: folders.isFolder(index)
+                        }
+                    }
 
-        MouseArea {
-            anchors.fill: parent
-            onClicked: root.openFile("")
-        }
-    }
+                    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
+                    }
 
-    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 }
+                    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 }
+                        }
+                    ]
                 }
-            },
-            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) }
+            Rectangle {
+                id: cancelButton
+                width: 100
+                height: titleBar.height - 7
+                color: "black"
+                anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter }
+
+                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("")
+                }
             }
-            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 }
+
+            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)
             }
-        ]
-        transitions: [
-            Transition {
-                to: "current"
-                SequentialAnimation {
-                    NumberAnimation { properties: "x"; duration: 250 }
+
+            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
                 }
-            },
-            Transition {
-                NumberAnimation { properties: "x"; duration: 250 }
+                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)
-    }
 
-    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();
-        }
-    }
+            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();
+                }
+            }
 
-    BorderImage {
-        source: "qrc:/images/titlebar.sci";
-        width: parent.width;
-        height: 52
-        y: -7
-        id: titleBar
+            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 }
+                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 }
+                        }
+                    ]
                 }
-            ]
-        }
 
-        Rectangle {
-            color: "gray"
-            x: 48
-            width: 1
-            height: 44
-        }
+                Rectangle {
+                    color: "gray"
+                    x: 48
+                    width: 1
+                    height: 44
+                }
 
-        Text {
-            anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
-            anchors.leftMargin: 4; anchors.rightMargin: 4
-            text: folders.folder
-            color: "white"
-            elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
-            font.pixelSize: 32
-        }
-    }
+                Text {
+                    anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
+                    anchors.leftMargin: 4; anchors.rightMargin: 4
+                    text: folders.folder
+                    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 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 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;
+            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;
+                }
+            }
         }
     }
 }