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