m3uplayer/PlayListView.qml

import QtQuick 1.0

/** A view of the playlist, which consists playable songs from
    a playlist or folder.
 */


ListView {
    objectName: "playListView"
    id: qmlListView    
    Image {
        id: closeButton
        anchors.right:  parent.right
        anchors.top:  parent.top

        height: 32
        width: 32
        source: "qrc:/icons/close.png"
        MouseArea {
            anchors.fill:  parent
            onClicked: mainWindow.close();
        }
    }



    model: playListModel
    interactive: true
    delegate: songDelegate
    width: parent.width
    height: parent.height
    highlightFollowsCurrentItem: true;
    highlight: SongItem { color: "yellow" }
    preferredHighlightBegin: 50;
    highlightRangeMode: ListView.ApplyRange

    Keys.onPressed: {
        if ((event.key == Qt.Key_Right) || (event.key == Qt.Key_Tab))  {
            event.accepted = true;
            flickableView.state = "Parentlist";
        }
    }
    focus: true
    clip: true

    Component {
        id: songDelegate

        Item {
            id: songItem;
            property real detailsOpacity : 0
            width: qmlListView.width
            height: 45

            SongItem {
                   id: background
                   z: -1
                   x: 2; y: 2; width: parent.width - x*2; height: parent.height - y*2
                   border.color: "orange"
                   // This mouse region covers the entire delegate.
                   // When clicked it changes mode to 'Details'.  If we are already
                   // in Details mode, then we go back to regular mode.
                   MouseArea {
                           anchors.fill: parent
                           onClicked : {
                               // set a C++ property from QML
                               mainWindow.chosenFromQML = index;
                               songItem.state = songItem.state == ''? 'Details' : ''
                           }
                   }
            }

            Row {
                id: rowLayout
                x: 10; y: 10; spacing: 10

                height: parent.height
                width: parent.width

                Text {
                    anchors.margins: 5
                    wrapMode: "WordWrap"
                    id: viewText
                    text: name;
                    font.pointSize: 8
                }

            }


            Item {
                id: detailsItem
                width: qmlListView.width;
                height: parent.height ;
                x: 10
                opacity: songItem.detailsOpacity
                Column {
                    y: viewText.y + viewText.height + 125;
                    WrappedText {

                        text: "(" + Qt.formatDateTime(duration) + ") by " + artist;
                    }
                    WrappedText {
                        text: "Track " + trackNr + " from " + album;
                    }
                    WrappedText {
                        text: "Genre: " + genre + " Comments:" + comment;
                    }
                    Text {
                        text: "Last Modified: " + lastModified;
                    }
                    WrappedText {
                        text: url
                    }
                }

                // Play button:
                Image {
                    y: 20
                    anchors.right:  detailsItem.right;
                    anchors.rightMargin: 30
                    id: playImage
                    source: "qrc:/icons/player_play.svgz"
                    opacity: songItem.detailsOpacity;
                    height: 20
                    width: 20
                    MouseArea {
                        anchors.fill:  parent;
                        onClicked: {
                            onClicked: songItem.state = '';
                            mainWindow.playQmlSelected();
                        }
                    }
                }
                // Queue/Dequeue button:
                Image {
                    id: queueButton
                    anchors.right: playImage.left;
                    anchors.bottom:  playImage.bottom;
                    opacity: songItem.detailsOpacity;
                    height: 80
                    width: 80
                    source: mainWindow.positionInQueue(url) == -1 ?
                            "qrc:/icons/enqueue.png" : "qrc:/icons/dequeue.png";
                    MouseArea {
                        anchors.fill:  parent
                        onClicked: {
                            songItem.state = '';
                            mainWindow.enqueue(url);
                        }
                    }
                }
                // delete button:
                Image {
                    anchors.right:  queueButton.left;
                    anchors.rightMargin:  20
                    anchors.bottom: playImage.bottom;
                    id: deleteImage
                    source: "qrc:/icons/delete.png";
                    opacity: songItem.detailsOpacity;
                    height: 64
                    width: 64
                    MouseArea {
                        anchors.fill:  parent;
                        onClicked: {
                            onClicked: songItem.state = '';
                            playListModel.deleteTrack(index);
                        }
                    }
                }
            }


            states: State {
                name: "Details"
//                PropertyChanges { target: mainWindow; chosenFromQML: listView }
                // Disallow flicking while we're in detailed view
                PropertyChanges { target: qmlListView; interactive: false }
                // Move the list so that this item is at the top.
                PropertyChanges { target: songItem.ListView.view; explicit: true; contentY: songItem.y }

                PropertyChanges { target: background; color: "white" }
                PropertyChanges { target: playImage; width: 100; height: 100 } // Make picture bigger
                PropertyChanges { target: playImage; opacity: .9; x: 0 } // Make image visible.
                PropertyChanges { target: songItem; detailsOpacity: 1; x: 0 } // Make details visible
                PropertyChanges { target: songItem; height: qmlListView.height  } // Fill the area with detailed view
            }

            transitions: Transition {
                // Make the state changes smooth
                ParallelAnimation {
                    ColorAnimation { property: "color"; duration: 500 }
                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                }
            }

        }
    }
}