← Back to branch summary

~vthompson/music-app/remix-empty-states-001

« back to all changes in this revision

Viewing changes to MusicNowPlaying.qml

  • Committer: Tarmac
  • Author(s): Victor Thompson
  • Date: 2014-10-10 17:56:32 UTC
  • mfrom: (650.2.13 remix-queue-list)
  • Revision ID: tarmac-20141010175632-3pgv6styim43p1us
Initial Now Playing queue list refactor.

Approved by Ubuntu Phone Apps Jenkins Bot, Andrew Hayzen.

Show diffs side-by-side

added added

removed removed

Lines of Context:
MusicNowPlaying.qml
30
30
    id: nowPlaying
31
31
    flickable: isListView ? queuelist : null  // Ensures that the header is shown in fullview
32
32
    objectName: "nowPlayingPage"
33
 
    title: i18n.tr("Now Playing")
 
33
    title: isListView ? i18n.tr("Queue") : i18n.tr("Now playing")
34
34
    visible: false
35
35
 
36
36
    property int ensureVisibleIndex: 0  // ensure first index is visible at startup
52
52
        actions: [
53
53
            Action {
54
54
                objectName: "toggleView"
55
 
                iconName: "media-playlist"
 
55
                iconName: isListView ? "clear" : "media-playlist"
56
56
                onTriggered: {
57
57
                    isListView = !isListView
58
58
                }
395
395
        id: queuelist
396
396
        anchors {
397
397
            fill: parent
 
398
            topMargin: units.gu(2)
398
399
        }
399
400
        delegate: queueDelegate
400
401
        footer: Item {
401
402
            height: mainView.height - (styleMusic.common.expandHeight + queuelist.currentHeight) + units.gu(8)
402
403
        }
403
 
        highlightFollowsCurrentItem: false
404
404
        model: trackQueue.model
 
405
        highlightFollowsCurrentItem: true
 
406
        highlightMoveDuration: 0
 
407
        highlight: Rectangle {
 
408
            color: "#2c2c34"
 
409
            focus: true
 
410
        }
 
411
 
405
412
        objectName: "nowPlayingQueueList"
406
413
        state: "normal"
407
414
        states: [
422
429
        ]
423
430
        visible: isListView
424
431
 
425
 
        property int normalHeight: units.gu(12)
426
 
        property int currentHeight: units.gu(40)
 
432
        property int normalHeight: units.gu(6)
427
433
        property int transitionDuration: 250  // transition length of animations
428
434
 
429
435
        onCountChanged: {
437
443
                color: "transparent"
438
444
                height: queuelist.normalHeight
439
445
                objectName: "nowPlayingListItem" + index
440
 
                state: queuelist.currentIndex == index && !reordering ? "current" : ""
 
446
                showDivider: false
 
447
                state: ""
441
448
 
442
449
                leftSideAction: Remove {
443
450
                    onTriggered: {
493
500
                    id: trackContainer;
494
501
                    anchors {
495
502
                        fill: parent
496
 
                        margins: units.gu(1)
497
503
                    }
498
504
                    color: "transparent"
499
505
 
513
519
                        to: units.gu(0.5)
514
520
                    }
515
521
 
516
 
                    CoverRow {
517
 
                        id: trackImage
518
 
 
519
 
                        anchors {
520
 
                            top: parent.top
521
 
                            left: parent.left
522
 
                            leftMargin: units.gu(1.5)
523
 
                        }
524
 
                        count: 1
525
 
                        size: (queueListItem.state === "current"
526
 
                               ? (mainView.wideAspect
527
 
                                  ? queuelist.currentHeight
528
 
                                  : mainView.width - (trackImage.anchors.leftMargin * 2))
529
 
                               : queuelist.normalHeight) - units.gu(2)
 
522
                    MusicRow {
 
523
                        id: musicRow
530
524
                        covers: [{art: model.art, album: model.album, author: model.author}]
531
 
 
532
 
                        spacing: units.gu(2)
533
 
 
534
 
                        Item {  // Background so can see text in current state
535
 
                            id: albumBg
536
 
                            visible: false
537
 
                            anchors {
538
 
                                bottom: parent.bottom
539
 
                                left: parent.left
540
 
                                right: parent.right
541
 
                            }
542
 
                            height: units.gu(9)
543
 
                            clip: true
544
 
                            UbuntuShape{
545
 
                                anchors {
546
 
                                    bottom: parent.bottom
547
 
                                    left: parent.left
548
 
                                    right: parent.right
549
 
                                }
550
 
                                height: trackImage.height
551
 
                                radius: "medium"
552
 
                                color: styleMusic.common.black
553
 
                                opacity: 0.6
554
 
                            }
555
 
                        }
556
 
 
557
 
                        function calcAnchors() {
558
 
                            if (trackImage.height > queuelist.normalHeight && mainView.wideAspect) {
559
 
                                trackImage.anchors.left = undefined
560
 
                                trackImage.anchors.horizontalCenter = trackImage.parent.horizontalCenter
561
 
                            } else {
562
 
                                trackImage.anchors.left = trackImage.parent.left
563
 
                                trackImage.anchors.horizontalCenter = undefined
564
 
                            }
565
 
 
566
 
                            trackImage.width = trackImage.height;  // force width to match height
567
 
                        }
568
 
 
569
 
                        Connections {
570
 
                            target: mainView
571
 
                            onWideAspectChanged: trackImage.calcAnchors()
572
 
                        }
573
 
 
574
 
                        onHeightChanged: {
575
 
                            calcAnchors()
576
 
                        }
577
 
                        Behavior on height {
578
 
                            NumberAnimation {
579
 
                                target: trackImage;
580
 
                                property: "height";
581
 
                                duration: queuelist.transitionDuration;
582
 
                            }
583
 
                        }
584
 
                    }
585
 
                    Label {
586
 
                        id: nowPlayingArtist
587
 
                        objectName: "artistLabel"
588
 
                        color: styleMusic.nowPlaying.labelSecondaryColor
589
 
                        elide: Text.ElideRight
590
 
                        height: units.gu(1)
591
 
                        text: model.author
592
 
                        fontSize: 'small'
593
 
                        width: parent.width - trackImage.width - units.gu(3.5)
594
 
                        x: trackImage.x + trackImage.width + units.gu(1)
595
 
                        y: trackImage.y + units.gu(1)
596
 
                    }
597
 
                    Label {
598
 
                        id: nowPlayingTitle
599
 
                        objectName: "titleLabel"
600
 
                        color: styleMusic.common.white
601
 
                        elide: Text.ElideRight
602
 
                        height: units.gu(1)
603
 
                        text: model.title
604
 
                        fontSize: 'medium'
605
 
                        width: parent.width - trackImage.width - units.gu(3.5)
606
 
                        x: trackImage.x + trackImage.width + units.gu(1)
607
 
                        y: nowPlayingArtist.y + nowPlayingArtist.height + units.gu(1.25)
608
 
                    }
609
 
                    Label {
610
 
                        id: nowPlayingAlbum
611
 
                        objectName: "albumLabel"
612
 
                        color: styleMusic.nowPlaying.labelSecondaryColor
613
 
                        elide: Text.ElideRight
614
 
                        height: units.gu(1)
615
 
                        text: model.album
616
 
                        fontSize: 'x-small'
617
 
                        width: parent.width - trackImage.width - units.gu(3.5)
618
 
                        x: trackImage.x + trackImage.width + units.gu(1)
619
 
                        y: nowPlayingTitle.y + nowPlayingTitle.height + units.gu(1.25)
620
 
                    }
621
 
                }
622
 
 
623
 
                states: State {
624
 
                    name: "current"
625
 
                    PropertyChanges {
626
 
                        target: queueListItem
627
 
                        height: trackImage.size + (trackContainer.anchors.margins * 2)
628
 
                    }
629
 
                    PropertyChanges {
630
 
                        target: nowPlayingArtist
631
 
                        width: trackImage.width - units.gu(4)
632
 
                        x: trackImage.x + units.gu(2)
633
 
                        y: trackImage.y + trackImage.height - albumBg.height + units.gu(1)
634
 
                        color: styleMusic.common.white
635
 
                    }
636
 
                    PropertyChanges {
637
 
                        target: nowPlayingTitle
638
 
                        width: trackImage.width - units.gu(4)
639
 
                        x: trackImage.x + units.gu(2)
640
 
                        y: nowPlayingArtist.y + nowPlayingArtist.height + units.gu(1.25)
641
 
                        color: styleMusic.common.white
642
 
                        font.weight: Font.DemiBold
643
 
                    }
644
 
                    PropertyChanges {
645
 
                        target: nowPlayingAlbum
646
 
                        width: trackImage.width - units.gu(4)
647
 
                        x: trackImage.x + units.gu(2)
648
 
                        y: nowPlayingTitle.y + nowPlayingTitle.height + units.gu(1.25)
649
 
                        color: styleMusic.common.white
650
 
                    }
651
 
                    PropertyChanges {
652
 
                        target: albumBg
653
 
                        visible: true
654
 
                    }
655
 
                }
656
 
                transitions: Transition {
657
 
                    from: ",current"
658
 
                    to: "current,"
659
 
                    NumberAnimation {
660
 
                        duration: queuelist.transitionDuration
661
 
                        properties: "height,opacity,width,x,y"
662
 
                    }
663
 
 
664
 
                    onRunningChanged: {
665
 
                        if (running === false && ensureVisibleIndex != -1)
666
 
                        {
667
 
                            queuelist.positionViewAtIndex(ensureVisibleIndex, ListView.Beginning);
668
 
                            ensureVisibleIndex = -1;
 
525
                        showCovers: false
 
526
                        coverSize: units.gu(6)
 
527
                        column: Column {
 
528
                            Label {
 
529
                                id: trackTitle
 
530
                                color: queuelist.currentIndex === index ? UbuntuColors.blue
 
531
                                                                        : styleMusic.common.music
 
532
                                fontSize: "small"
 
533
                                objectName: "titleLabel"
 
534
                                text: model.title
 
535
                            }
 
536
 
 
537
                            Label {
 
538
                                id: trackArtist
 
539
                                color: styleMusic.common.subtitle
 
540
                                fontSize: "x-small"
 
541
                                objectName: "artistLabel"
 
542
                                text: model.author
 
543
                            }
669
544
                        }
670
545
                    }
671
546
                }