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.6
  18 import QtQuick.Layouts 1.1
  19 import QtQuick.Controls 2.0
  20 import QtMultimedia 5.6
  21 import AGL.Demo.Controls 1.0
  22 import MediaPlayer 1.0
  23
  24 ApplicationWindow {
  25     id: root
  26
  27     MediaPlayer {
  28         id: player
  29         audioRole: MediaPlayer.MusicRole
  30         autoLoad: true
  31         playlist: playlist
  32         function time2str(value) {
  33             return Qt.formatTime(new Date(value), 'mm:ss')
  34         }
  35         onPositionChanged: slider.value = player.position
  36         Component.onCompleted: console.debug('player.supportedAudioRoles()', player.supportedAudioRoles())
  37     }
  38
  39     Playlist {
  40         id: playlist
  41         playbackMode: random.checked ? Playlist.Random : loop.checked ? Playlist.Loop : Playlist.Sequential
  42
  43         Component.onCompleted: {
  44             playlist.addItems(mediaFiles)
  45         }
  46     }
  47
  48
  49     ColumnLayout {
  50         anchors.fill: parent
  51         Item {
  52             Layout.fillWidth: true
  53             Layout.fillHeight: true
  54             Layout.preferredHeight: 3
  55             clip: true
  56             Image {
  57                 anchors.left: parent.left
  58                 anchors.right: parent.right
  59                 anchors.bottom: parent.bottom
  60                 height: sourceSize.height * width / sourceSize.width
  61                 fillMode: Image.PreserveAspectCrop
  62                 source: player.metaData.coverArtImage ? player.metaData.coverArtImage : ''
  63             }
  64
  65             Item {
  66                 anchors.left: parent.left
  67                 anchors.right: parent.right
  68                 anchors.bottom: parent.bottom
  69                 height :307
  70                 Rectangle {
  71                     anchors.fill: parent
  72                     color: 'black'
  73                     opacity: 0.75
  74                 }
  75
  76                 ColumnLayout {
  77                     anchors.fill: parent
  78                     anchors.margins: root.width * 0.02
  79                     Item {
  80                         Layout.fillWidth: true
  81                         Layout.fillHeight: true
  82                         Row {
  83                             spacing: 20
  84                             ToggleButton {
  85                                 id: random
  86                                 offImage: './images/AGL_MediaPlayer_Shuffle_Inactive.svg'
  87                                 onImage: './images/AGL_MediaPlayer_Shuffle_Active.svg'
  88                             }
  89                             ToggleButton {
  90                                 id: loop
  91                                 offImage: './images/AGL_MediaPlayer_Loop_Inactive.svg'
  92                                 onImage: './images/AGL_MediaPlayer_Loop_Active.svg'
  93                             }
  94                         }
  95                         ColumnLayout {
  96                             anchors.fill: parent
  97                             Label {
  98                                 id: title
  99                                 Layout.alignment: Layout.Center
 100                                 text: player.metaData.title ? player.metaData.title : ''
 101                                 horizontalAlignment: Label.AlignHCenter
 102                                 verticalAlignment: Label.AlignVCenter
 103                             }
 104                             Label {
 105                                 id: artist
 106                                 Layout.alignment: Layout.Center
 107                                 text: player.metaData.author ? player.metaData.author : ''
 108                                 horizontalAlignment: Label.AlignHCenter
 109                                 verticalAlignment: Label.AlignVCenter
 110                                 font.pixelSize: title.font.pixelSize * 0.6
 111                             }
 112                         }
 113                     }
 114                     Slider {
 115                         id: slider
 116                         Layout.fillWidth: true
 117                         to: player.duration
 118                         Label {
 119                             id: position
 120                             anchors.left: parent.left
 121                             anchors.bottom: parent.top
 122                             font.pixelSize: 32
 123                             text: player.time2str(player.position)
 124                         }
 125                         Label {
 126                             id: duration
 127                             anchors.right: parent.right
 128                             anchors.bottom: parent.top
 129                             font.pixelSize: 32
 130                             text: player.time2str(player.duration)
 131                         }
 132                         onPressedChanged: player.seek(value)
 133                     }
 134                     RowLayout {
 135                         Layout.fillHeight: true
 136 //                        Image {
 137 //                            source: './images/AGL_MediaPlayer_Playlist_Inactive.svg'
 138 //                        }
 139 //                        Image {
 140 //                            source: './images/AGL_MediaPlayer_CD_Inactive.svg'
 141 //                        }
 142                         Item { Layout.fillWidth: true }
 143                         ImageButton {
 144                             offImage: './images/AGL_MediaPlayer_BackArrow.svg'
 145                             onClicked: playlist.previous()
 146                         }
 147                         ImageButton {
 148                             id: play
 149                             offImage: './images/AGL_MediaPlayer_Player_Play.svg'
 150                             onClicked: player.play()
 151                             states: [
 152                                 State {
 153                                     when: player.playbackState === MediaPlayer.PlayingState
 154                                     PropertyChanges {
 155                                         target: play
 156                                         offImage: './images/AGL_MediaPlayer_Player_Pause.svg'
 157                                         onClicked: player.pause()
 158                                     }
 159                                 }
 160                             ]
 161                         }
 162                         ImageButton {
 163                             offImage: './images/AGL_MediaPlayer_ForwardArrow.svg'
 164                             onClicked: playlist.next()
 165                         }
 166
 167                         Item { Layout.fillWidth: true }
 168 //                        Image {
 169 //                            source: './images/AGL_MediaPlayer_Bluetooth_Inactive.svg'
 170 //                        }
 171 //                        Image {
 172 //                            source: './images/AGL_MediaPlayer_Radio_Inactive.svg'
 173 //                        }
 174                     }
 175                 }
 176             }
 177         }
 178         Item {
 179             Layout.fillWidth: true
 180             Layout.fillHeight: true
 181             Layout.preferredHeight: 2
 182             ListView {
 183                 anchors.fill: parent
 184                 clip: true
 185                 header: Label {
 186                     x: 50
 187                     text: 'PLAYLIST'
 188                     opacity: 0.5
 189                 }
 190                 model: PlaylistWithMetadata {
 191                     source: playlist
 192                 }
 193                 currentIndex: playlist.currentIndex
 194
 195                 delegate: MouseArea {
 196                     id: delegate
 197                     width: ListView.view.width
 198                     height: ListView.view.height / 4
 199                     RowLayout {
 200                         anchors.fill: parent
 201                         anchors.leftMargin: 50
 202                         anchors.rightMargin: 50
 203                         Image {
 204                             source: model.coverArt
 205                             fillMode: Image.PreserveAspectFit
 206                             Layout.preferredWidth: delegate.height
 207                             Layout.preferredHeight: delegate.height
 208                         }
 209                         ColumnLayout {
 210                             Layout.fillWidth: true
 211                             Label {
 212                                 Layout.fillWidth: true
 213                                 text: model.title
 214                             }
 215                             Label {
 216                                 Layout.fillWidth: true
 217                                 text: model.artist
 218                                 color: '#66FF99'
 219                                 font.pixelSize: 32
 220                             }
 221                         }
 222                         Label {
 223                             text: player.time2str(model.duration)
 224                             color: '#66FF99'
 225                             font.pixelSize: 32
 226                         }
 227                     }
 228                     onClicked: {
 229                         playlist.currentIndex = model.index
 230                         player.play()
 231                     }
 232                 }
 233
 234                 highlight: Rectangle {
 235                     color: 'white'
 236                     opacity: 0.25
 237                 }
 238             }
 239         }
 240     }
 241 }