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