tomahawk/data/qml/tomahawkimports/CoverFlip.qml

import QtQuick 1.1
import tomahawk 1.0

PathView {
    id: coverView

    // The start coordinates for the covers
    // Default is left, centered in height
    property int pathStartX: 0
    property int pathStartY: height

    // The size of the covers in the path
    property int coverSize: height

    property color backgroundColor: "black"

    // emitted when a cover is clicked
    signal itemClicked(int index)

    // emitted when a cover is clicked
    signal itemPlayPauseClicked(int index)

    preferredHighlightBegin: 0.2 // scene.width / 11000
    preferredHighlightEnd: preferredHighlightBegin
    pathItemCount: 5
    //highlightMoveDuration: 500

    property bool itemHovered: false

    delegate: Item {
        id: delegateItem
        height: coverView.coverSize
        width: coverView.coverSize

        scale: PathView.itemScale
        //        itemBrightness: PathView.itemBrightness - ((coverView.itemHovered && !coverDelegate.containsMouse) ? .4 : 0)
        property double itemBrightness: PathView.itemBrightness
        property double itemOpacity: PathView.itemOpacity
        property int _origZ

        z: coverView.width - x

        CoverImage {
            id: coverDelegate
            height: coverView.coverSize
            width: coverView.coverSize
            anchors {
                top: parent.top
                right: parent.right
            }

            showLabels: true
            showMirror: true
            artistName: model.artistName
            trackName: model.trackName
            artworkId: model.coverID
            showPlayButton: true
            currentlyPlaying: isPlaying
            smooth: true

            //        itemBrightness: PathView.itemBrightness - ((coverView.itemHovered && !coverDelegate.containsMouse) ? .4 : 0)
            itemBrightness: coverDelegate.containsMouse ? 1 : parent.itemBrightness * (coverView.itemHovered ? .5 : 1)
            opacity: parent.itemOpacity
            z: coverView.width - x

            onPlayClicked: {
                console.log("***************")
                coverView.itemPlayPauseClicked(index)
            }

            onClicked: {
                coverView.itemClicked(index)
            }

            onContainsMouseChanged: {
                if (containsMouse) {
                    delegateItem._origZ = delegateItem.z;
                    coverView.itemHovered = true
                } else {
                    coverView.itemHovered = false
                }
            }


        }
        states: [
            State {
                name: "hovered"; when: coverDelegate.containsMouse && !coverView.moving && index !== currentIndex
                PropertyChanges {
                    target: delegateItem
                    width: coverView.coverSize * 2
                    z: delegateItem._origZ
                }
            }
        ]
        transitions: [
            Transition {
                NumberAnimation {
                    properties: "width"
                    duration: 300
                    easing.type: Easing.InOutSine
                }

            }
        ]
    }

    path: Path {
        startX: coverView.pathStartX
        startY: coverView.pathStartY

        PathAttribute { name: "itemOpacity"; value: 0 }
        PathAttribute { name: "itemBrightness"; value: 0 }
        PathAttribute { name: "itemScale"; value: 1.3 }

        PathLine { x: coverView.width / 4; y: coverView.height / 4 * 3}
        PathPercent { value: 0.1 }
        PathAttribute { name: "itemOpacity"; value: 0 }
        PathAttribute { name: "itemBrightness"; value: 1 }
        PathAttribute { name: "itemScale"; value: 1.0 }

        PathLine { x: coverView.width / 2; y: coverView.height / 2}
        PathPercent { value: 0.2 }
        PathAttribute { name: "itemOpacity"; value: 1 }
        PathAttribute { name: "itemBrightness"; value: 1 }
        PathAttribute { name: "itemScale"; value: 0.5 }

        PathLine { x: coverView.width; y: 0 }
        PathPercent { value: 1 }
        PathAttribute { name: "itemOpacity"; value: 1 }
        PathAttribute { name: "itemBrightness"; value: 0 }
        PathAttribute { name: "itemScale"; value: 0.1 }
    }

}