← Back to branch summary

~ahayzen/+junk/remix-bottom-edge-002

« back to all changes in this revision

Viewing changes to MusicNowPlaying.qml

  • Committer: Victor Thompson
  • Date: 2014-11-23 20:38:57 UTC
  • Revision ID: victor.thompson@gmail.com-20141123203857-y4vckgisfpiwynjo
Move progress bar into full view and add progress hint in queue

Show diffs side-by-side

added added

removed removed

Lines of Context:
MusicNowPlaying.qml
201
201
            top: parent.top
202
202
            topMargin: mainView.header.height
203
203
        }
204
 
        height: parent.height - mainView.header.height - units.gu(17)
 
204
        height: parent.height - mainView.header.height - units.gu(12)
205
205
        visible: !isListView
206
206
        width: parent.width
207
207
 
208
208
        BlurredBackground {
209
209
            id: blurredBackground
210
 
            anchors.fill: parent
 
210
            anchors {
 
211
                left: parent.left
 
212
                right: parent.right
 
213
                top: parent.top
 
214
            }
211
215
            art: albumImage.firstSource
212
 
 
 
216
            height: parent.height - units.gu(7)
 
217
  
213
218
            Item {
214
219
                id: albumImageContainer
215
220
                anchors {
281
286
                }
282
287
            }
283
288
        }
 
289
 
 
290
        /* Progress bar component */
 
291
        MouseArea {
 
292
            id: musicToolbarFullProgressContainer
 
293
            anchors.left: parent.left
 
294
            anchors.leftMargin: units.gu(3)
 
295
            anchors.right: parent.right
 
296
            anchors.rightMargin: units.gu(3)
 
297
            anchors.top: blurredBackground.bottom
 
298
            anchors.topMargin: units.gu(1)
 
299
            height: units.gu(3)
 
300
            width: parent.width
 
301
 
 
302
            /* Position label */
 
303
            Label {
 
304
                id: musicToolbarFullPositionLabel
 
305
                anchors.top: progressSliderMusic.bottom
 
306
                anchors.topMargin: units.gu(-2)
 
307
                anchors.left: parent.left
 
308
                color: styleMusic.nowPlaying.labelSecondaryColor
 
309
                fontSize: "small"
 
310
                height: parent.height
 
311
                horizontalAlignment: Text.AlignHCenter
 
312
                text: durationToString(player.position)
 
313
                verticalAlignment: Text.AlignVCenter
 
314
                width: units.gu(3)
 
315
            }
 
316
 
 
317
            Slider {
 
318
                id: progressSliderMusic
 
319
                anchors.left: parent.left
 
320
                anchors.right: parent.right
 
321
                maximumValue: player.duration  // load value at startup
 
322
                objectName: "progressSliderShape"
 
323
                style: UbuntuBlueSliderStyle {}
 
324
                value: player.position  // load value at startup
 
325
 
 
326
                function formatValue(v) {
 
327
                    if (seeking) {  // update position label while dragging
 
328
                        musicToolbarFullPositionLabel.text = durationToString(v)
 
329
                    }
 
330
 
 
331
                    return durationToString(v)
 
332
                }
 
333
 
 
334
                property bool seeking: false
 
335
                property bool seeked: false
 
336
 
 
337
                onSeekingChanged: {
 
338
                    if (seeking === false) {
 
339
                        musicToolbarFullPositionLabel.text = durationToString(player.position)
 
340
                    }
 
341
                }
 
342
 
 
343
                onPressedChanged: {
 
344
                    seeking = pressed
 
345
 
 
346
                    if (!pressed) {
 
347
                        seeked = true
 
348
                        player.seek(value)
 
349
 
 
350
                        musicToolbarFullPositionLabel.text = durationToString(value)
 
351
                    }
 
352
                }
 
353
 
 
354
                Connections {
 
355
                    target: player
 
356
                    onPositionChanged: {
 
357
                        // seeked is a workaround for bug 1310706 as the first position after a seek is sometimes invalid (0)
 
358
                        if (progressSliderMusic.seeking === false && !progressSliderMusic.seeked) {
 
359
                            musicToolbarFullPositionLabel.text = durationToString(player.position)
 
360
                            musicToolbarFullDurationLabel.text = durationToString(player.duration)
 
361
 
 
362
                            progressSliderMusic.value = player.position
 
363
                            progressSliderMusic.maximumValue = player.duration
 
364
                        }
 
365
 
 
366
                        progressSliderMusic.seeked = false;
 
367
                    }
 
368
                    onStopped: {
 
369
                        musicToolbarFullPositionLabel.text = durationToString(0);
 
370
                        musicToolbarFullDurationLabel.text = durationToString(0);
 
371
                    }
 
372
                }
 
373
            }
 
374
 
 
375
            /* Duration label */
 
376
            Label {
 
377
                id: musicToolbarFullDurationLabel
 
378
                anchors.top: progressSliderMusic.bottom
 
379
                anchors.topMargin: units.gu(-2)
 
380
                anchors.right: parent.right
 
381
                color: styleMusic.nowPlaying.labelSecondaryColor
 
382
                fontSize: "small"
 
383
                height: parent.height
 
384
                horizontalAlignment: Text.AlignHCenter
 
385
                text: durationToString(player.duration)
 
386
                verticalAlignment: Text.AlignVCenter
 
387
                width: units.gu(3)
 
388
            }
 
389
        }
284
390
    }
285
391
 
286
392
    function removeQueue(index)
475
581
        id: musicToolbarFullContainer
476
582
        anchors.bottom: parent.bottom
477
583
        color: styleMusic.common.black
478
 
        height: units.gu(17)
 
584
        height: units.gu(12)
479
585
        width: parent.width
480
586
 
481
 
        /* Progress bar component */
482
 
        MouseArea {
483
 
            id: musicToolbarFullProgressContainer
484
 
            anchors.left: parent.left
485
 
            anchors.leftMargin: units.gu(3)
486
 
            anchors.right: parent.right
487
 
            anchors.rightMargin: units.gu(3)
488
 
            anchors.top: parent.top
489
 
            anchors.topMargin: units.gu(1)
490
 
            height: units.gu(3)
491
 
            width: parent.width
492
 
 
493
 
            /* Position label */
494
 
            Label {
495
 
                id: musicToolbarFullPositionLabel
496
 
                anchors.top: progressSliderMusic.bottom
497
 
                anchors.topMargin: units.gu(-2)
498
 
                anchors.left: parent.left
499
 
                color: styleMusic.nowPlaying.labelSecondaryColor
500
 
                fontSize: "small"
501
 
                height: parent.height
502
 
                horizontalAlignment: Text.AlignHCenter
503
 
                text: durationToString(player.position)
504
 
                verticalAlignment: Text.AlignVCenter
505
 
                width: units.gu(3)
506
 
            }
507
 
 
508
 
            Slider {
509
 
                id: progressSliderMusic
510
 
                anchors.left: parent.left
511
 
                anchors.right: parent.right
512
 
                maximumValue: player.duration  // load value at startup
513
 
                objectName: "progressSliderShape"
514
 
                style: UbuntuBlueSliderStyle {}
515
 
                value: player.position  // load value at startup
516
 
 
517
 
                function formatValue(v) {
518
 
                    if (seeking) {  // update position label while dragging
519
 
                        musicToolbarFullPositionLabel.text = durationToString(v)
520
 
                    }
521
 
 
522
 
                    return durationToString(v)
523
 
                }
524
 
 
525
 
                property bool seeking: false
526
 
                property bool seeked: false
527
 
 
528
 
                onSeekingChanged: {
529
 
                    if (seeking === false) {
530
 
                        musicToolbarFullPositionLabel.text = durationToString(player.position)
531
 
                    }
532
 
                }
533
 
 
534
 
                onPressedChanged: {
535
 
                    seeking = pressed
536
 
 
537
 
                    if (!pressed) {
538
 
                        seeked = true
539
 
                        player.seek(value)
540
 
 
541
 
                        musicToolbarFullPositionLabel.text = durationToString(value)
542
 
                    }
543
 
                }
544
 
 
545
 
                Connections {
546
 
                    target: player
547
 
                    onPositionChanged: {
548
 
                        // seeked is a workaround for bug 1310706 as the first position after a seek is sometimes invalid (0)
549
 
                        if (progressSliderMusic.seeking === false && !progressSliderMusic.seeked) {
550
 
                            musicToolbarFullPositionLabel.text = durationToString(player.position)
551
 
                            musicToolbarFullDurationLabel.text = durationToString(player.duration)
552
 
 
553
 
                            progressSliderMusic.value = player.position
554
 
                            progressSliderMusic.maximumValue = player.duration
555
 
                        }
556
 
 
557
 
                        progressSliderMusic.seeked = false;
558
 
                    }
559
 
                    onStopped: {
560
 
                        musicToolbarFullPositionLabel.text = durationToString(0);
561
 
                        musicToolbarFullDurationLabel.text = durationToString(0);
562
 
                    }
563
 
                }
564
 
            }
565
 
 
566
 
            /* Duration label */
567
 
            Label {
568
 
                id: musicToolbarFullDurationLabel
569
 
                anchors.top: progressSliderMusic.bottom
570
 
                anchors.topMargin: units.gu(-2)
571
 
                anchors.right: parent.right
572
 
                color: styleMusic.nowPlaying.labelSecondaryColor
573
 
                fontSize: "small"
574
 
                height: parent.height
575
 
                horizontalAlignment: Text.AlignHCenter
576
 
                text: durationToString(player.duration)
577
 
                verticalAlignment: Text.AlignVCenter
578
 
                width: units.gu(3)
579
 
            }
580
 
        }
581
 
 
582
587
        /* Repeat button */
583
588
        MouseArea {
584
589
            id: nowPlayingRepeatButton
632
637
            id: nowPlayingPlayButton
633
638
            anchors.horizontalCenter: parent.horizontalCenter
634
639
            anchors.top: musicToolbarFullProgressContainer.bottom
635
 
            anchors.topMargin: units.gu(2)
 
640
            anchors.topMargin: units.gu(1)
636
641
            height: units.gu(12)
637
642
            width: height
638
643
            onClicked: player.toggle()
697
702
                opacity: player.shuffle && !emptyPage.noMusic ? 1 : .4
698
703
            }
699
704
        }
 
705
 
 
706
        /* Object which provides the progress bar when in the queue */
 
707
        Rectangle {
 
708
            id: playerControlsProgressBar
 
709
            anchors {
 
710
                bottom: parent.bottom
 
711
                left: parent.left
 
712
                right: parent.right
 
713
            }
 
714
            color: styleMusic.common.black
 
715
            height: units.gu(0.25)
 
716
            visible: isListView
 
717
 
 
718
            Rectangle {
 
719
                id: playerControlsProgressBarHint
 
720
                anchors {
 
721
                    left: parent.left
 
722
                    bottom: parent.bottom
 
723
                }
 
724
                color: UbuntuColors.blue
 
725
                height: parent.height
 
726
                width: 0
 
727
 
 
728
                Connections {
 
729
                    target: player
 
730
                    onPositionChanged: {
 
731
                        playerControlsProgressBarHint.width = (player.position / player.duration) * playerControlsProgressBar.width
 
732
                    }
 
733
                    onStopped: {
 
734
                        playerControlsProgressBarHint.width = 0;
 
735
                    }
 
736
                }
 
737
            }
 
738
        }
700
739
    }
701
740
}