app/VideoPlayer.qml

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