MainPlaylist.qml 18.9 KB
Newer Older
Camilo Higuita's avatar
Camilo Higuita committed
1
import QtQuick 2.9
Camilo Higuita's avatar
Camilo Higuita committed
2 3
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Camilo Higuita's avatar
Camilo Higuita committed
4
import QtGraphicalEffects 1.0
5
import org.kde.kirigami 2.2 as Kirigami
Camilo Higuita's avatar
Camilo Higuita committed
6

7 8 9 10 11 12 13 14
import "../InfoView"

import "../../utils/Player.js" as Player
import "../../db/Queries.js" as Q
import "../../utils"
import "../../widgets"
import "../../view_models"
import "../../view_models/BabeTable"
Camilo Higuita's avatar
Camilo Higuita committed
15 16

Item
Camilo Higuita's avatar
Camilo Higuita committed
17 18
{

Camilo Higuita's avatar
fixes  
Camilo Higuita committed
19
    id: mainPlaylistRoot
Camilo Higuita's avatar
Camilo Higuita committed
20
    property var currentTrack
21 22
    property int currentTrackIndex : 0
    property int prevTrackIndex : 0
Camilo Higuita's avatar
Camilo Higuita committed
23 24
    property string currentArtwork
    property bool shuffle : false
25
    property int playbackIconSize: isMobile ? 24 : 22
Camilo Higuita's avatar
Camilo Higuita committed
26 27 28 29 30 31

    property alias progressBar : progressBar
    property alias cover : cover
    property alias list : list
    property alias playIcon : playIcon
    property alias babeBtnIcon: babeBtnIcon
32
    property alias infoView : infoView
33 34 35 36

    property alias durationTime : durationTime
    property alias progressTime : progressTime

37 38
    signal coverDoubleClicked(var tracks)
    signal coverPressed(var tracks)
Camilo Higuita's avatar
Camilo Higuita committed
39 40 41
    //                    Component.onCompleted:
    //                    {
    //                        if(list.count>0)
42
    //                            root.width = coverSize
Camilo Higuita's avatar
Camilo Higuita committed
43
    //                        else
44
    //                            root.width = coverSize*3
Camilo Higuita's avatar
Camilo Higuita committed
45
    //                    }
46 47 48
    Rectangle
    {
        anchors.fill: parent
49
        color: bae.midLightColor()
50 51
        z: -999
    }
Camilo Higuita's avatar
Camilo Higuita committed
52

Camilo Higuita's avatar
fixes  
Camilo Higuita committed
53
    GridLayout
Camilo Higuita's avatar
Camilo Higuita committed
54 55
    {
        id: playlistLayout
56
        anchors.fill: parent
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
57 58 59
        rowSpacing: 0
        rows: 4
        columns: 1
60

Camilo Higuita's avatar
fixes  
Camilo Higuita committed
61
        Item
Camilo Higuita's avatar
Camilo Higuita committed
62 63
        {
            id: cover
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
64 65
            Layout.row: 1
            Layout.column: 1
Camilo Higuita's avatar
Camilo Higuita committed
66
            Layout.fillWidth: true
67
            Layout.preferredHeight: coverSize
Camilo Higuita's avatar
Camilo Higuita committed
68
            Layout.maximumHeight: 300
69
            visible: list.count > 0
Camilo Higuita's avatar
Camilo Higuita committed
70

Camilo Higuita's avatar
fixes  
Camilo Higuita committed
71 72 73
            Rectangle
            {
                anchors.fill: parent
74
                color: bae.midLightColor()
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
75 76 77
                z: -999
            }

Camilo Higuita's avatar
Camilo Higuita committed
78 79
            FastBlur
            {
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
80
                width: mainPlaylistRoot.width
81
                height: mainPlaylistItem.y
Camilo Higuita's avatar
Camilo Higuita committed
82 83
                source: artwork
                radius: 100
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
84 85
                transparentBorder: true
                cached: true
Camilo Higuita's avatar
Camilo Higuita committed
86 87 88 89 90
            }

            Image
            {
                id: artwork
91
                visible: cover.visible
Camilo Higuita's avatar
Camilo Higuita committed
92
                width: parent.height < 300 ? parent.height : 300
Camilo Higuita's avatar
Camilo Higuita committed
93 94 95 96
                height: parent.height
                anchors.centerIn: parent
                source: currentArtwork ? "file://"+encodeURIComponent(currentArtwork)  : "qrc:/assets/cover.png"
                fillMode: Image.PreserveAspectFit
97 98 99 100 101 102

                MouseArea
                {
                    anchors.fill: parent
                    onDoubleClicked:
                    {
103 104
                        //                        var query = Q.GET.albumTracks_.arg(currentTrack.album)
                        //                        query = query.arg(currentTrack.artist)
105

106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
                        //                        var tracks = bae.get(query)
                        //                        coverDoubleClicked(tracks)

                        if(!isMobile)
                        {
                            if(root.header.visible)
                            {
                                root.maximumWidth = columnWidth
                                root.minimumWidth = artwork.width
                                root.maximumHeight = mainPlaylistItem.y
                                root.minimumHeight = mainPlaylistItem.y
                                root.header.visible = false
                                root.footer.visible = false
                                infoBtn.visible = false
                                menuBtn.visible = false

                            }else
                            {
                                cover.y = 0
                                root.maximumWidth = bae.screenGeometry("width")
                                root.minimumWidth = columnWidth
                                root.maximumHeight = bae.screenGeometry("height")
                                root.minimumHeight = columnWidth



                                root.width = columnWidth
                                root.height = 700
                                root.header.visible = true
                                root.footer.visible = true
                                infoBtn.visible = true
                                menuBtn.visible = true
                            }
                        }
140 141
                    }

142
                    onPressAndHold:
143
                    {
Camilo Higuita's avatar
Camilo Higuita committed
144
                        var query = Q.GET.albumTracks_.arg(currentTrack.album)
145 146 147
                        query = query.arg(currentTrack.artist)
                        var tracks = bae.get(query)
                        coverPressed(tracks)
148 149
                    }

150 151 152 153 154 155 156 157 158 159 160
                    //                    onClicked:
                    //                    {
                    //                        if(stackView.currentItem !== list)
                    //                            stackView.pop(list)
                    //                        else
                    //                        {
                    //                            stackView.push(infoView)
                    //                            infoView.currentView = 1
                    //                        }
                    //                    }

161
                }
Camilo Higuita's avatar
Camilo Higuita committed
162
            }
163 164


Camilo Higuita's avatar
Camilo Higuita committed
165 166
        }

Camilo Higuita's avatar
fixes  
Camilo Higuita committed
167
        Item
Camilo Higuita's avatar
Camilo Higuita committed
168 169
        {
            id: playbackControls
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
170 171
            Layout.row: 2
            Layout.column: 1
Camilo Higuita's avatar
Camilo Higuita committed
172
            Layout.fillWidth: true
173
            width: parent.width
174 175 176
            Layout.preferredHeight: 48

            //            height: 48
177
            //            anchors.top: cover.bottom
178
            visible: list.count > 0
Camilo Higuita's avatar
Camilo Higuita committed
179

Camilo Higuita's avatar
fixes  
Camilo Higuita committed
180
            Rectangle
Camilo Higuita's avatar
Camilo Higuita committed
181
            {
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
182
                anchors.fill: parent
183
                color: bae.midLightColor()
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
184
                opacity: 0.8
185
                z: -999
Camilo Higuita's avatar
Camilo Higuita committed
186
            }
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
187 188
            //            onYChanged:
            //            {
189
            //                if(playbackControls.y<coverSize/4)
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
190 191 192 193 194 195 196
            //                {
            //                    cover.visible = false
            //                    playbackControls.y = 0

            //                }else
            //                {
            //                    cover.visible = true
197
            //                    playbackControls.y = coverSize
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
198 199
            //                }
            //            }
Camilo Higuita's avatar
Camilo Higuita committed
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214

            PlaylistMenu
            {
                id: playlistMenu
                onClearOut: Player.clearOutPlaylist()
                onHideCover: cover.visible = !cover.visible
                onClean: Player.cleanPlaylist()
            }

            MouseArea
            {
                anchors.fill: parent
                drag.target: playbackControls
                drag.axis: Drag.YAxis
                drag.minimumY: 0
215
                drag.maximumY: coverSize
216 217
                //                onClicked:
                //                {
218
                //                    if(!root.isMobile)
219 220
                //                        cover.visible = !cover.visible
                //                }
221 222 223


                onMouseYChanged:
Camilo Higuita's avatar
Camilo Higuita committed
224
                {
225 226
                    cover.height = playbackControls.y

227
                    if(playbackControls.y < coverSize*0.8)
228 229 230
                    {
                        cover.visible = false
                        playbackControls.y = 0
231
                    }else cover.visible = true
232

Camilo Higuita's avatar
Camilo Higuita committed
233 234 235 236 237 238
                }
            }

            RowLayout
            {
                anchors.fill: parent
239

240
                BabeButton
Camilo Higuita's avatar
Camilo Higuita committed
241
                {
242
                    id: infoBtn
243 244
                    Layout.alignment: Qt.AlignLeft

245 246
                    iconName: stackView.currentItem === list ? "documentinfo" : "arrow-left"
                    onClicked:
247
                    {
248 249

                        if( stackView.currentItem !== list)
250
                        {
251 252 253 254
                            cover.visible  = true
                            stackView.pop(list) }
                        else {
                            cover.visible  = false
255
                            stackView.push(infoView)
256
                        }
257

258
                    }
259

Camilo Higuita's avatar
Camilo Higuita committed
260
                }
261

262 263


Camilo Higuita's avatar
Camilo Higuita committed
264 265
                Row
                {
266
                    Layout.alignment: Qt.AlignCenter
267
                    BabeButton
Camilo Higuita's avatar
Camilo Higuita committed
268
                    {
269 270 271
                        id: babeBtnIcon
                        iconName: "love" //"love-amarok"
                        iconColor: defaultColor
Camilo Higuita's avatar
Camilo Higuita committed
272 273 274
                        onClicked: Player.babeTrack()
                    }

275
                    BabeButton
Camilo Higuita's avatar
Camilo Higuita committed
276 277
                    {
                        id: previousBtn
278
                        iconName: "media-skip-backward"
Camilo Higuita's avatar
Camilo Higuita committed
279
                        onClicked: Player.previousTrack()
280 281
                        onPressAndHold: Player.playAt(prevTrackIndex)

Camilo Higuita's avatar
Camilo Higuita committed
282 283
                    }

284
                    BabeButton
Camilo Higuita's avatar
Camilo Higuita committed
285
                    {
286 287
                        id: playIcon
                        iconName: "media-playback-start"
Camilo Higuita's avatar
Camilo Higuita committed
288 289 290 291 292 293 294
                        onClicked:
                        {
                            if(player.isPaused()) Player.resumeTrack()
                            else Player.pauseTrack()
                        }
                    }

295
                    BabeButton
Camilo Higuita's avatar
Camilo Higuita committed
296 297
                    {
                        id: nextBtn
298
                        iconName: "media-skip-forward"
Camilo Higuita's avatar
Camilo Higuita committed
299
                        onClicked: Player.nextTrack()
300
                        onPressAndHold: Player.playAt(Player.shuffle())
Camilo Higuita's avatar
Camilo Higuita committed
301 302
                    }

303
                    BabeButton
Camilo Higuita's avatar
Camilo Higuita committed
304 305
                    {
                        id: shuffleBtn
306
                        iconName: shuffle ? "media-playlist-shuffle" : "media-playlist-repeat"
Camilo Higuita's avatar
Camilo Higuita committed
307 308 309
                        onClicked: shuffle = !shuffle
                    }
                }
310

311 312 313


                BabeButton
314
                {
315
                    id: menuBtn
316 317
                    Layout.alignment: Qt.AlignRight

318 319
                    iconName: /*"application-menu"*/ "overflow-menu"
                    onClicked: root.isMobile ? playlistMenu.open() : playlistMenu.popup()
320
                }
321

Camilo Higuita's avatar
Camilo Higuita committed
322 323 324
            }
        }

Camilo Higuita's avatar
fixes  
Camilo Higuita committed
325
        Item
326
        {
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
327 328 329
            id: slideBar
            Layout.row: 3
            Layout.column: 1
330
            Layout.fillWidth: true
331 332 333
            Layout.preferredHeight: 48

            //            height: 48
334
            anchors.top: playbackControls.bottom
335 336
            visible: list.count > 0

Camilo Higuita's avatar
fixes  
Camilo Higuita committed
337 338 339
            Rectangle
            {
                anchors.fill: parent
340
                color: bae.midLightColor()
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
341 342 343
                opacity: 0.8
                z: -999
            }
344 345

            GridLayout
346
            {
347 348 349
                anchors.fill: parent
                columns:3
                rows:2
350

351 352 353 354 355 356 357 358 359 360 361
                Label
                {
                    id: progressTime
                    Layout.row: 1
                    Layout.column: 1
                    Layout.fillWidth:true
                    Layout.alignment: Qt.AlignCenter
                    horizontalAlignment: Qt.AlignHCenter
                    text: "00:00"
                    color: bae.foregroundColor()
                    font.pointSize: 8
362 363
                    elide: Text.ElideRight

364
                }
365

366 367 368
                Label
                {
                    id: currentTrackInfo
369
                    Layout.maximumWidth: parent.width*0.7
370 371 372 373 374
                    Layout.row: 1
                    Layout.column: 2
                    Layout.fillWidth:true
                    Layout.alignment: Qt.AlignCenter
                    horizontalAlignment: Qt.AlignHCenter
375
                    text: currentTrack ? (currentTrack.title ? currentTrack.title + " - " + currentTrack.artist : "--- - "+currentTrack.artist) : ""
376 377
                    color: bae.foregroundColor()
                    font.pointSize: 8
378
                    elide: Text.ElideRight
379
                }
380 381

                Label
382
                {
383 384 385 386 387 388 389
                    id: durationTime
                    Layout.row: 1
                    Layout.column: 3
                    Layout.fillWidth:true
                    Layout.alignment: Qt.AlignCenter
                    horizontalAlignment: Qt.AlignHCenter
                    text: "00:00"
390
                    color: bae.foregroundColor()
391
                    font.pointSize: 8
392 393
                    elide: Text.ElideRight

394
                }
395

396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415
                Slider
                {
                    id: progressBar

                    Layout.row: 2
                    Layout.column: 1
                    Layout.columnSpan: 3
                    Layout.fillWidth:true
                    Layout.fillHeight: true

                    from: 0
                    to: 1000
                    value: 0

                    spacing: 0

                    onMoved: player.seek(player.duration() / 1000 * value);


                    background: Rectangle
416
                    {
417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439
                        x: progressBar.leftPadding
                        y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2
                        implicitWidth: 200
                        implicitHeight: 2
                        width: progressBar.availableWidth
                        height: implicitHeight
                        color: bae.foregroundColor()

                        Rectangle
                        {
                            width: progressBar.visualPosition * parent.width
                            height: parent.height
                            color: bae.babeColor()
                        }
                    }

                    handle: Rectangle
                    {
                        x: progressBar.leftPadding + progressBar.visualPosition * (progressBar.availableWidth - width)
                        y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2
                        implicitWidth: 16
                        implicitHeight: 16
                        radius: 13
440 441 442 443 444 445
                        color: bae.babeColor()
                    }
                }

            }

446

447 448 449
        }


Camilo Higuita's avatar
fixes  
Camilo Higuita committed
450
        Item
Camilo Higuita's avatar
Camilo Higuita committed
451
        {
452
            id: mainPlaylistItem
Camilo Higuita's avatar
fixes  
Camilo Higuita committed
453 454
            Layout.row: 4
            Layout.column: 1
Camilo Higuita's avatar
Camilo Higuita committed
455 456
            Layout.fillWidth: true
            Layout.fillHeight: true
457
            anchors.top: slideBar.bottom
458 459


460
            //            anchors.bottom: mainPlaylistRoot.searchBox
461
            StackView
Camilo Higuita's avatar
Camilo Higuita committed
462
            {
463 464 465 466
                id: stackView
                anchors.fill: parent
                focus: true

467
                pushEnter: Transition {
468 469 470 471 472
                    PropertyAnimation {
                        property: "opacity"
                        from: 0
                        to:1
                        duration: 200
473
                    }
474 475 476 477 478 479 480
                }
                pushExit: Transition {
                    PropertyAnimation {
                        property: "opacity"
                        from: 1
                        to:0
                        duration: 200
481
                    }
482 483 484 485 486 487 488
                }
                popEnter: Transition {
                    PropertyAnimation {
                        property: "opacity"
                        from: 0
                        to:1
                        duration: 200
489
                    }
490 491 492 493 494 495 496
                }
                popExit: Transition {
                    PropertyAnimation {
                        property: "opacity"
                        from: 1
                        to:0
                        duration: 200
497
                    }
498
                }
499

500
                initialItem: BabeTable
Camilo Higuita's avatar
Camilo Higuita committed
501
                {
502 503 504 505
                    id: list
                    width: parent.width
                    height: parent.height
                    quickPlayVisible: false
506
                    coverArtVisible: true
507 508 509 510 511 512 513 514 515 516 517
                    //                    onMovementStarted:
                    //                    {
                    //                        if(contentY > list.height)
                    //                        {
                    //                            cover.visible = false
                    //                        }
                    //                        else
                    //                        {
                    //                            cover.visible = true
                    //                        }
                    //                    }
518

519

520 521 522 523 524
                    Rectangle
                    {
                        anchors.fill: parent
                        color: bae.altColor()
                        z: -999
525

526
                    }
527

528 529 530 531 532 533 534
                    onRowClicked:
                    {
                        prevTrackIndex = currentTrackIndex
                        currentTrackIndex = currentIndex

                        Player.playAt(index)
                    }
535 536
                    onArtworkDoubleClicked:
                    {
Camilo Higuita's avatar
Camilo Higuita committed
537
                        var query = Q.GET.albumTracks_.arg(model.get(index).album)
538
                        query = query.arg(model.get(index).artist)
539

540 541 542 543 544
                        Player.playAll(bae.get(query))
                        //                        Player.appendTracksAt(bae.get(query),index)

                    }
                    holder.message: "Empty playlist..."
Camilo Higuita's avatar
Camilo Higuita committed
545 546
                    holder.emoji: "qrc:/assets/face-sleeping.png"

547 548 549 550 551 552 553 554
                    Component.onCompleted:
                    {
                        var list = bae.lastPlaylist()
                        var n = list.length

                        if(n>0)
                        {
                            for(var i = 0; i < n; i++)
555
                            {
556
                                var where = "url = \""+list[i]+"\""
Camilo Higuita's avatar
Camilo Higuita committed
557
                                var query = Q.GET.tracksWhere_.arg(where)
558 559 560 561 562 563
                                var track = bae.get(query)
                                Player.appendTrack(track[0])
                            }
                        }else
                        {
                            var where = "babe = 1"
Camilo Higuita's avatar
Camilo Higuita committed
564
                            var query = Q.GET.tracksWhere_.arg(where)
565
                            var tracks = bae.get(query)
566

567
                            for(var pos=0; pos< tracks.length; pos++)
568 569
                                Player.appendTrack(tracks[pos])

570
                        }
Camilo Higuita's avatar
Camilo Higuita committed
571
                        Player.playAt(0)
572

573 574 575 576
                        //                                    var pos = bae.lastPlaylistPos()
                        //                                    console.log("POSSS:", pos)
                        //                                    list.currentIndex = pos
                        //                                    play(list.model.get(pos))
Camilo Higuita's avatar
Camilo Higuita committed
577
                    }
578
                }
Camilo Higuita's avatar
Camilo Higuita committed
579

580 581 582 583 584
                InfoView
                {
                    id: infoView
                    width: parent.width
                    height: parent.height
Camilo Higuita's avatar
Camilo Higuita committed
585
                }
586

Camilo Higuita's avatar
Camilo Higuita committed
587 588 589
            }
        }
    }
590
}