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