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