Warning, /plasma-bigscreen/peertube-voice-application/ui/+mediacenter/SeekControl.qml is written in an unsupported language. File is not indexed.

0001 import QtMultimedia 5.12
0002 import QtQuick.Layouts 1.4
0003 import QtQuick 2.9
0004 import QtQuick.Controls 2.12 as Controls
0005 import org.kde.kirigami 2.10 as Kirigami
0006 import QtQuick.Templates 2.2 as Templates
0007 import QtGraphicalEffects 1.0
0008 
0009 import Mycroft 1.0 as Mycroft
0010 
0011 Item {
0012     id: seekControl
0013     property bool opened: false
0014     property int duration: 0
0015     property int playPosition: 0
0016     property int seekPosition: 0
0017     property bool enabled: true
0018     property bool seeking: false
0019     property bool backRequested: false
0020     property var videoControl
0021     property string title
0022 
0023     property bool smallMode: root.height > root.width ? 1 : 0
0024     
0025     clip: true
0026     implicitHeight: mainLayout.implicitHeight + Kirigami.Units.largeSpacing * 2
0027     opacity: opened
0028 
0029     Behavior on opacity {
0030         OpacityAnimator {
0031             duration: Kirigami.Units.longDuration
0032             easing.type: Easing.InOutCubic
0033         }
0034     }
0035 
0036     onOpenedChanged: {
0037         if (opened) {
0038             seekControl.backRequested = false;
0039             hideTimer.restart();
0040         }
0041     }
0042     
0043     onFocusChanged: {
0044         if(focus) {
0045             backButton.forceActiveFocus()
0046         }
0047     }
0048 
0049     Timer {
0050         id: hideTimer
0051         interval: 5000
0052         onTriggered: {
0053             if(!seekControl.backRequested) {
0054                 seekControl.opened = false;
0055                 videoRoot.forceActiveFocus();
0056             }
0057         }
0058     }
0059     
0060     Rectangle {
0061         anchors {
0062             left: parent.left
0063             right: parent.right
0064         }
0065         height: parent.height
0066         color: Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 0.6)
0067         y: opened ? 0 : parent.height
0068 
0069         Behavior on y {
0070             YAnimator {
0071                 duration: Kirigami.Units.longDuration
0072                 easing.type: Easing.OutCubic
0073             }
0074         }
0075         
0076         ColumnLayout {
0077             id: mainLayout
0078             anchors {
0079                 fill: parent
0080                 margins: Kirigami.Units.largeSpacing
0081             }
0082             
0083         Item {
0084             Layout.fillWidth: true
0085             Layout.minimumHeight: infoLayout.implicitHeight
0086                 
0087                 GridLayout {
0088                     id: infoLayout
0089                     anchors.fill: parent
0090                     columns: smallMode ? 1 : 2
0091                         
0092                     Kirigami.Heading {
0093                         id: vidTitle
0094                         level: smallMode ? 3 : 2
0095                         Layout.minimumWidth: parent.width / 2
0096                         Layout.preferredHeight: Kirigami.Units.gridUnit * 2
0097                         visible: true
0098                         text: "Title: " + videoTitle
0099                         z: 100
0100                     }
0101                     
0102                     Kirigami.Heading {
0103                         id: vidCount
0104                         level: smallMode ? 3 : 2
0105                         Layout.minimumWidth: parent.width / 2
0106                         Layout.preferredHeight: Kirigami.Units.gridUnit * 2
0107                         visible: true
0108                         Layout.alignment: smallMode ? Qt.AlignLeft : Qt.AlignRight
0109                         horizontalAlignment: smallMode ? Qt.AlignLeft : Qt.AlignRight
0110                         text: "Views: " + getViewCount(videoViewCount)
0111                         z: 100
0112                     }
0113                         
0114                     Kirigami.Heading {
0115                         id: vidAuthor
0116                         level: smallMode ? 3 : 2
0117                         Layout.minimumWidth: parent.width / 2
0118                         Layout.preferredHeight: Kirigami.Units.gridUnit * 2
0119                         visible: true
0120                         text: "Published By: " + videoAuthor
0121                         z: 100
0122                     }
0123                         
0124                     Kirigami.Heading {
0125                         id: vidPublishDate
0126                         level: smallMode ? 3 : 2
0127                         Layout.minimumWidth: parent.width / 2
0128                         Layout.preferredHeight: Kirigami.Units.gridUnit * 2
0129                         visible: true
0130                         Layout.alignment: smallMode ? Qt.AlignLeft : Qt.AlignRight
0131                         horizontalAlignment: smallMode ? Qt.AlignLeft : Qt.AlignRight
0132                         text: "Published: " + setPublishedDate(videoPublishDate)
0133                         z: 100
0134                     }
0135                 }
0136             }
0137             
0138             Kirigami.Separator {
0139                 Layout.fillWidth: true
0140                 height: 1
0141             }
0142             
0143             RowLayout {
0144                 id: mainLayout2
0145                 Layout.fillWidth: true
0146                 Layout.fillHeight: true
0147                 Controls.RoundButton {
0148                     id: backButton
0149                     Layout.preferredWidth: Kirigami.Units.iconSizes.large
0150                     Layout.preferredHeight: Layout.preferredWidth
0151                     highlighted: focus ? 1 : 0
0152                     
0153                     background: Rectangle {
0154                         Kirigami.Theme.colorSet: Kirigami.Theme.Button
0155                         color: backButton.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor
0156                         radius: width / 2
0157                         border.color: Kirigami.Theme.textColor
0158                         border.width: 1
0159                         
0160                         Image {
0161                             source: "./images/simple-previous.svg"
0162                             width: Kirigami.Units.iconSizes.medium
0163                             height: Kirigami.Units.iconSizes.medium
0164                             anchors.centerIn: parent
0165                         }
0166                     }
0167                     z: 1000
0168                     onClicked: {
0169                         seekControl.backRequested = true;
0170                         root.parent.backRequested();
0171                         video.stop();
0172                     }
0173                     KeyNavigation.up: video
0174                     KeyNavigation.right: button
0175                     Keys.onReturnPressed: {
0176                         clicked()
0177                     }
0178                     onFocusChanged: {
0179                         if(!seekControl.backRequested){
0180                             hideTimer.restart();
0181                         }
0182                     }
0183                 }
0184                 Controls.RoundButton {
0185                     id: button
0186                     Layout.preferredWidth: Kirigami.Units.iconSizes.large
0187                     Layout.preferredHeight: Layout.preferredWidth
0188                     highlighted: focus ? 1 : 0
0189                     
0190                     background: Rectangle {
0191                         Kirigami.Theme.colorSet: Kirigami.Theme.Button
0192                         color: button.activeFocus ? Kirigami.Theme.highlightColor : Kirigami.Theme.backgroundColor
0193                         radius: width / 2
0194                         border.color: Kirigami.Theme.textColor
0195                         border.width: 1
0196                         
0197                         Image {
0198                             source: videoControl.playbackState === MediaPlayer.PlayingState ? "./images/simple-pause.svg" : "./images/simple-play.svg"
0199                             width: Kirigami.Units.iconSizes.medium
0200                             height: Kirigami.Units.iconSizes.medium
0201                             anchors.centerIn: parent
0202                         }
0203                     }
0204                     
0205                     z: 1000
0206                     onClicked: {
0207                         seekControl.backRequested = false;
0208                         video.playbackState === MediaPlayer.PlayingState ? video.pause() : video.play();
0209                         hideTimer.restart();
0210                     }
0211                     KeyNavigation.up: video
0212                     KeyNavigation.left: backButton
0213                     KeyNavigation.right: slider
0214                     Keys.onReturnPressed: {
0215                         clicked()
0216                     }
0217                     onFocusChanged: {
0218                         if(!backRequested){
0219                             hideTimer.restart();
0220                         }
0221                     }
0222                 }
0223 
0224                 Templates.Slider {
0225                     id: slider
0226                     Layout.fillWidth: true
0227                     Layout.alignment: Qt.AlignVCenter
0228                     implicitHeight: Kirigami.Units.gridUnit
0229                     value: seekControl.playPosition
0230                     from: 0
0231                     to: seekControl.duration
0232                     z: 1000
0233                     property bool navSliderItem
0234                     property int minimumValue: 0
0235                     property int maximumValue: 20
0236                     onMoved: {
0237                         seekControl.seekPosition = value;
0238                         hideTimer.restart();
0239                     }
0240                     
0241                     onNavSliderItemChanged: {
0242                         if(slider.navSliderItem){
0243                             recthandler.color = "red"
0244                         } else if (slider.focus) {
0245                             recthandler.color = Kirigami.Theme.linkColor
0246                         }
0247                     }
0248                     
0249                     onFocusChanged: {
0250                         if(!slider.focus){
0251                             recthandler.color = Kirigami.Theme.textColor
0252                         } else {
0253                             recthandler.color = Kirigami.Theme.linkColor
0254                         }
0255                     }
0256                     
0257                     handle: Rectangle {
0258                         id: recthandler
0259                         x: slider.position * (parent.width - width)
0260                         implicitWidth: Kirigami.Units.gridUnit
0261                         implicitHeight: implicitWidth
0262                         radius: width
0263                         color: Kirigami.Theme.textColor
0264                     }
0265                     background: Item {
0266                         Rectangle {
0267                             id: groove
0268                             anchors {
0269                                 verticalCenter: parent.verticalCenter
0270                                 left: parent.left
0271                                 right: parent.right
0272                             }
0273                             radius: height
0274                             height: Math.round(Kirigami.Units.gridUnit/3)
0275                             color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.3)
0276                             Rectangle {
0277                                 anchors {
0278                                     left: parent.left
0279                                     top: parent.top
0280                                     bottom: parent.bottom
0281                                 }
0282                                 radius: height
0283                                 color: Kirigami.Theme.highlightColor
0284                                 width: slider.position * (parent.width - slider.handle.width/2) + slider.handle.width/2
0285                             }
0286                         }
0287 
0288                         Controls.Label {
0289                             anchors {
0290                                 left: parent.left
0291                                 top: groove.bottom
0292                                 topMargin: Kirigami.Units.smallSpacing
0293                             }
0294                             horizontalAlignment: Text.AlignLeft
0295                             verticalAlignment: Text.AlignVCenter
0296                             text: formatTime(playPosition)
0297                             color: "white"
0298                         }
0299 
0300                         Controls.Label {
0301                             anchors {
0302                                 right: parent.right
0303                                 top: groove.bottom
0304                                 topMargin: Kirigami.Units.smallSpacing
0305                             }
0306                             horizontalAlignment: Text.AlignRight
0307                             verticalAlignment: Text.AlignVCenter
0308                             text: formatTime(duration)
0309                         }
0310                     }
0311                 KeyNavigation.up: video
0312                 KeyNavigation.left: button
0313                 Keys.onReturnPressed: {
0314                     hideTimer.restart();
0315                     if(!navSliderItem){
0316                             navSliderItem = true   
0317                         } else {
0318                             navSliderItem = false
0319                         }
0320                     }
0321                 
0322                 Keys.onLeftPressed: {
0323                         console.log("leftPressedonSlider")
0324                         hideTimer.restart();
0325                         if(navSliderItem) {
0326                             video.seek(video.position - 5000)
0327                         } else {
0328                             button.forceActiveFocus()
0329                         }
0330                 }
0331                 
0332                 Keys.onRightPressed: {
0333                         hideTimer.restart();
0334                         if(navSliderItem) {
0335                             video.seek(video.position + 5000)
0336                         }
0337                     }
0338                 }
0339             }
0340         }
0341     }
0342 
0343     function formatTime(timeInMs) {
0344         if (!timeInMs || timeInMs <= 0) return "0:00"
0345         var seconds = timeInMs / 1000;
0346         var minutes = Math.floor(seconds / 60)
0347         seconds = Math.floor(seconds % 60)
0348         if (seconds < 10) seconds = "0" + seconds;
0349         return minutes + ":" + seconds
0350     }
0351 }