app/MediaPlayer.qml

   1 /*
   2  * Copyright (C) 2016 The Qt Company Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *      http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 import QtQuick 2.11
  18 import QtQuick.Layouts 1.11
  19 import QtQuick.Controls 2.4
  20 import QtQuick.Window 2.13
  21
  22 import AGL.Demo.Controls 1.0
  23
  24 ApplicationWindow {
  25     id: root
  26
  27     width: container.width * container.scale
  28     height: container.height * container.scale
  29
  30     Item {
  31         id: player
  32
  33         property string title: ""
  34         property string album: ""
  35         property string artist: ""
  36
  37         property bool av_connected: false
  38
  39         property int duration: 0
  40         property int position: 0
  41
  42         property string status: "stopped"
  43
  44         function time2str(value) {
  45             return Qt.formatTime(new Date(value), (value > 3600000) ? 'hh:mm:ss' : 'mm:ss')
  46         }
  47     }
  48
  49     Component.onCompleted : {
  50         // Let the mediaplayer backend know we're ready for metadata events
  51         mediaplayer.start()
  52     }
  53
  54     Connections {
  55         target: mediaplayer
  56
  57         onMetadataChanged: {
  58             var track = metadata.track
  59
  60             if ('status' in metadata) {
  61                 player.status = metadata.status
  62             }
  63
  64             if ('connected' in metadata) {
  65                 player.av_connected = metadata.connected
  66             }
  67
  68             if (track) {
  69                 if ('image' in track)
  70                      return
  71                 player.title = track.title
  72                 player.album = track.album
  73                 player.artist = track.artist
  74
  75                 if ('duration' in track)
  76                      player.duration = track.duration
  77
  78                 if ('index' in track) {
  79                      playlistview.currentIndex = track.index
  80                 }
  81             }
  82
  83             if ('position' in metadata) {
  84                 player.position = metadata.position
  85             }
  86         }
  87     }
  88
  89     Timer {
  90         id: timer
  91         interval: 250
  92         running: player.av_connected && player.status == "playing"
  93         repeat: true
  94         onTriggered: {
  95             player.position = player.position + 250
  96         }
  97     }
  98
  99     Item {
 100         id: container
 101         anchors.centerIn: parent
 102         width: Window.width
 103         height: Window.height
 104         //scale: screenInfo.scale_factor()
 105         scale: 1
 106
 107     ColumnLayout {
 108         anchors.fill: parent
 109         Item {
 110             Layout.fillWidth: true
 111             Layout.fillHeight: true
 112             Layout.preferredHeight: 1080
 113             clip: true
 114             Image {
 115                 anchors.left: parent.left
 116                 anchors.right: parent.right
 117                 anchors.bottom: parent.bottom
 118                 height: sourceSize.height * width / sourceSize.width
 119                 fillMode: Image.PreserveAspectCrop
 120                 source: AlbumArt
 121                 visible: player.av_connected === false
 122             }
 123
 124             Item {
 125                 anchors.left: parent.left
 126                 anchors.right: parent.right
 127                 anchors.bottom: parent.bottom
 128                 height :307
 129                 Rectangle {
 130                     anchors.fill: parent
 131                     color: 'black'
 132                     opacity: 0.75
 133                 }
 134
 135                 ColumnLayout {
 136                     anchors.fill: parent
 137                     anchors.margins: root.width * 0.02
 138                     Item {
 139                         Layout.fillWidth: true
 140                         Layout.fillHeight: true
 141                         Row {
 142                             spacing: 20
 143                             //ToggleButton {
 144                             //    id: random
 145                             //    visible: bluetooth.connected == false
 146                             //    offImage: './images/AGL_MediaPlayer_Shuffle_Inactive.svg'
 147                             //    onImage: './images/AGL_MediaPlayer_Shuffle_Active.svg'
 148                             //}
 149                             ToggleButton {
 150                                 id: loop
 151                                 visible: player.av_connected === false
 152                                 offImage: './images/AGL_MediaPlayer_Loop_Inactive.svg'
 153                                 onImage: './images/AGL_MediaPlayer_Loop_Active.svg'
 154                                 onClicked: { mediaplayer.loop(checked ? "playlist" : "off") }
 155                             }
 156                         }
 157                         ColumnLayout {
 158                             anchors.fill: parent
 159                             Label {
 160                                 id: title
 161                                 Layout.alignment: Layout.Center
 162                                 text: player.title
 163                                 horizontalAlignment: Label.AlignHCenter
 164                                 verticalAlignment: Label.AlignVCenter
 165                             }
 166                             Label {
 167                                 Layout.alignment: Layout.Center
 168                                 text: player.artist
 169                                 horizontalAlignment: Label.AlignHCenter
 170                                 verticalAlignment: Label.AlignVCenter
 171                                 font.pixelSize: title.font.pixelSize * 0.6
 172                             }
 173                         }
 174                     }
 175                     Slider {
 176                         id: slider
 177                         Layout.fillWidth: true
 178                         to: player.duration
 179                         enabled: player.av_connected === false
 180                         value: player.position
 181                         Label {
 182                             id: position
 183                             anchors.left: parent.left
 184                             anchors.bottom: parent.top
 185                             font.pixelSize: 32
 186                             text: player.time2str(player.position)
 187                         }
 188                         Label {
 189                             id: duration
 190                             anchors.right: parent.right
 191                             anchors.bottom: parent.top
 192                             font.pixelSize: 32
 193                             text: player.time2str(player.duration)
 194                         }
 195                         onPressedChanged: mediaplayer.seek(value)
 196                     }
 197                     RowLayout {
 198                         Layout.fillHeight: true
 199 //                        Image {
 200 //                            source: './images/AGL_MediaPlayer_Playlist_Inactive.svg'
 201 //                        }
 202 //                        Image {
 203 //                            source: './images/AGL_MediaPlayer_CD_Inactive.svg'
 204 //                        }
 205                         Item { Layout.fillWidth: true }
 206                         ImageButton {
 207                             id: previous
 208                             offImage: './images/AGL_MediaPlayer_BackArrow.svg'
 209                             onClicked: {
 210                                 mediaplayer.previous()
 211                             }
 212                         }
 213                         ImageButton {
 214                             id: play
 215                             states: [
 216                                 State {
 217                                     when: player.status == "playing"
 218                                     PropertyChanges {
 219                                         target: play
 220                                         offImage: './images/AGL_MediaPlayer_Player_Pause.svg'
 221                                         onClicked: {
 222                                             mediaplayer.pause()
 223                                         }
 224                                     }
 225                                 },
 226                                 State {
 227                                     when: player.status != "playing"
 228                                     PropertyChanges {
 229                                         target: play
 230                                         offImage: './images/AGL_MediaPlayer_Player_Play.svg'
 231                                         onClicked: mediaplayer.play()
 232                                     }
 233                                 }
 234                             ]
 235                         }
 236                         ImageButton {
 237                             id: forward
 238                             offImage: './images/AGL_MediaPlayer_ForwardArrow.svg'
 239                             onClicked: {
 240                                 mediaplayer.next()
 241                             }
 242                         }
 243
 244                         Item { Layout.fillWidth: true }
 245
 246                         ToggleButton {
 247                               visible: true
 248                               checked: player.av_connected
 249                               onClicked: {
 250                                 if (checked)
 251                                         mediaplayer.connect()
 252                                 else
 253                                         mediaplayer.disconnect()
 254                               }
 255                               contentItem: Image {
 256                                 source: player.av_connected ? './images/AGL_MediaPlayer_Bluetooth_Active.svg' : './images/AGL_MediaPlayer_Bluetooth_Inactive.svg'
 257                               }
 258                         }
 259                     }
 260                 }
 261             }
 262         }
 263         Item {
 264             Layout.fillWidth: true
 265             Layout.fillHeight: true
 266             Layout.preferredHeight: 407
 267
 268             ListView {
 269                 anchors.fill: parent
 270                 id: playlistview
 271                 visible: player.av_connected === false
 272                 clip: true
 273                 header: Label {
 274                     x: 50
 275                     text: 'PLAYLIST'
 276                     opacity: 0.5
 277                 }
 278                 model: MediaplayerModel
 279                 currentIndex: -1
 280
 281                 delegate: MouseArea {
 282                     id: delegate
 283                     width: ListView.view.width
 284                     height: ListView.view.height / 4
 285                     RowLayout {
 286                         anchors.fill: parent
 287                         anchors.leftMargin: 50
 288                         anchors.rightMargin: 50
 289                         ColumnLayout {
 290                             Layout.fillWidth: true
 291                             Label {
 292                                 Layout.fillWidth: true
 293                                 text: model.title
 294                             }
 295                             Label {
 296                                 Layout.fillWidth: true
 297                                 text: model.artist
 298                                 color: '#00ADDC'
 299                                 font.pixelSize: 32
 300                             }
 301                         }
 302                         //Label {
 303                         //    text: player.time2str(model.duration)
 304                         //    color: '#00ADDC'
 305                         //    font.pixelSize: 32
 306                         //}
 307                     }
 308                     onClicked: {
 309                         mediaplayer.picktrack(playlistview.model[index].index)
 310                     }
 311                 }
 312
 313                 highlight: Rectangle {
 314                     color: 'white'
 315                     opacity: 0.25
 316                 }
 317             }
 318         }
 319     }
 320 }
 321 }