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