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