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