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