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