Warning, /multimedia/plasmatube/src/ui/videoplayer/VideoControls.qml is written in an unsupported language. File is not indexed.
0001 // SPDX-FileCopyrightText: 2020 Carson Black <uhhadd@gmail.com>
0002 // SPDX-FileCopyrightText: 2021 Carl Schwan <carlschawn@kde.org>
0003 // SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
0004 // SPDX-License-Identifier: GPL-3.0-or-later
0005
0006 import QtQuick
0007 import QtQuick.Layouts
0008 import QtQuick.Controls as QQC2
0009
0010 import org.kde.kirigami as Kirigami
0011 import org.kde.coreaddons as KCoreAddons
0012 import org.kde.plasmatube
0013
0014 QQC2.Control {
0015 id: root
0016
0017 readonly property var currentVideo: PlasmaTube.videoController.currentVideo
0018 readonly property var currentPlayer: PlasmaTube.videoController.currentPlayer
0019
0020 // TODO: move completely to C++
0021 readonly property bool videoLoaded: currentPlayer !== null && currentPlayer.duration > 0
0022 readonly property bool durationMatchesPosition: currentPlayer !== null && Math.abs(currentPlayer.duration - currentPlayer.position) < 0.1
0023 readonly property bool atEnd: currentPlayer !== null && currentPlayer.paused && videoLoaded && durationMatchesPosition
0024
0025 property bool inFullScreen: false
0026 property bool showPresentationControls: true
0027
0028 signal requestFullScreen()
0029
0030 Rectangle {
0031 height: parent.children[1].height * 3
0032 anchors {
0033 left: parent.left
0034 right: parent.right
0035 bottom: parent.bottom
0036 }
0037
0038 gradient: Gradient {
0039 GradientStop { position: 0.0; color: Qt.rgba(18/255, 18/255, 18/255, 0.0) }
0040 GradientStop { position: 1.0; color: Qt.rgba(18/255, 18/255, 18/255, 0.8) }
0041 }
0042 }
0043 ColumnLayout {
0044 visible: true
0045 anchors {
0046 bottom: parent.bottom
0047 left: parent.left
0048 right: parent.right
0049 leftMargin: Kirigami.Units.largeSpacing
0050 rightMargin: Kirigami.Units.largeSpacing
0051 }
0052
0053 Kirigami.Theme.textColor: Qt.rgba(1,1,1,0.8)
0054
0055 RowLayout {
0056 Layout.fillWidth: true
0057 Layout.leftMargin: Kirigami.Units.largeSpacing
0058 Layout.rightMargin: Kirigami.Units.largeSpacing
0059 QQC2.Label {
0060 color: "white"
0061 font.pointSize: Kirigami.Theme.smallFont.pointSize
0062 font.weight: Font.Bold
0063 text: root.currentPlayer ? KCoreAddons.Format.formatDuration(root.currentPlayer.position * 1000) : ""
0064 }
0065
0066 QQC2.Slider {
0067 Layout.fillWidth: true
0068 from: 0
0069 to: root.currentPlayer ? root.currentPlayer.duration : 0
0070 value: root.currentPlayer ? root.currentPlayer.position : 0
0071
0072 onMoved: {
0073 root.currentPlayer.setPosition(value)
0074 }
0075 }
0076
0077 QQC2.Label {
0078 color: "white"
0079 font.pointSize: Kirigami.Theme.smallFont.pointSize
0080 font.weight: Font.Bold
0081 text: root.currentPlayer ? KCoreAddons.Format.formatDuration(root.currentPlayer.duration * 1000) : ""
0082 }
0083 }
0084
0085 RowLayout {
0086 Layout.fillWidth: true
0087 Layout.bottomMargin: Kirigami.Units.largeSpacing
0088
0089 Item { Layout.fillWidth: true }
0090
0091 RowLayout {
0092 Layout.alignment: Qt.AlignHCenter
0093 spacing: Kirigami.Units.largeSpacing
0094
0095 QQC2.ToolButton {
0096 width: Kirigami.Units.gridUnit * 3
0097 height: width
0098 icon.name: "configure"
0099 icon.color: "white"
0100 icon.width: Kirigami.Units.iconSizes.smallMedium
0101 icon.height: Kirigami.Units.iconSizes.smallMedium
0102
0103 onClicked: {
0104 configureDialog.open()
0105 }
0106
0107 TabIndicator {}
0108 }
0109
0110
0111 RowLayout {
0112
0113 id: controlButtonBox
0114 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
0115 Layout.fillHeight: true
0116 spacing: 2
0117
0118
0119 QQC2.Button {
0120 id: seekBackwardButton
0121 implicitHeight: 40
0122 implicitWidth: 40
0123
0124 Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
0125 Kirigami.Theme.inherit: false
0126
0127 onClicked: root.currentPlayer.seek(-5)
0128 contentItem: Item{
0129 Kirigami.Icon {
0130 anchors.centerIn:parent
0131 source:"media-seek-backward"
0132 color: "white"
0133 width: Kirigami.Units.gridUnit
0134 height: Kirigami.Units.gridUnit
0135
0136 }
0137 }
0138 background: Kirigami.ShadowedRectangle{
0139 corners.topLeftRadius: 7
0140 corners.bottomLeftRadius: 7
0141
0142
0143 color: if (parent.down){
0144 Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.hoverColor, "transparent", 0.3)
0145 }else if(parent.hovered){
0146 Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.hoverColor, "transparent", 0.7)
0147 }else{
0148 Qt.rgba(1, 1, 1, 0.3)
0149 }
0150 }
0151 TabIndicator {}
0152 }
0153
0154 QQC2.Button {
0155 id: playPauseButton
0156 implicitHeight: 40
0157 implicitWidth: 60
0158 onClicked: PlasmaTube.videoController.togglePlaying()
0159 contentItem: Item {
0160 Kirigami.Icon {
0161 anchors.centerIn:parent
0162 source: {
0163 if (root.currentPlayer?.paused) {
0164 if (root.atEnd) {
0165 return "media-playlist-repeat";
0166 } else {
0167 return "media-playback-start";
0168 }
0169 } else {
0170 return "media-playback-pause";
0171 }
0172 }
0173 color: "white"
0174 width: Kirigami.Units.gridUnit
0175 height: Kirigami.Units.gridUnit
0176 }
0177 }
0178 background: Kirigami.ShadowedRectangle{
0179 color: if (parent.down){
0180 Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.hoverColor, "transparent", 0.3)
0181 }else if(parent.hovered){
0182 Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.hoverColor, "transparent", 0.7)
0183 }else{
0184 Qt.rgba(1, 1, 1, 0.3)
0185 }
0186 }
0187 TabIndicator {}
0188 }
0189
0190 QQC2.Button {
0191 id: seekForwardButton
0192 implicitHeight: 40
0193 implicitWidth: 40
0194 Layout.rightMargin:isWidescreen?0:10
0195
0196 Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
0197 Kirigami.Theme.inherit: false
0198
0199 onClicked: root.currentPlayer.seek(5)
0200
0201 contentItem: Item{
0202 Kirigami.Icon {
0203 anchors.centerIn:parent
0204 source:"media-seek-forward"
0205 color: "white"
0206 width: Kirigami.Units.gridUnit
0207 height: Kirigami.Units.gridUnit
0208
0209 }
0210 }
0211 background: Kirigami.ShadowedRectangle{
0212 corners.topRightRadius: 7
0213 corners.bottomRightRadius: 7
0214 color: if (parent.down){
0215 Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.hoverColor, "transparent", 0.3)
0216 }else if(parent.hovered){
0217 Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.hoverColor, "transparent", 0.7)
0218 }else{
0219 Qt.rgba(1, 1, 1, 0.3)
0220 }
0221 }
0222 TabIndicator {}
0223 }
0224 }
0225
0226 QQC2.ToolButton {
0227 width: Kirigami.Units.gridUnit * 3
0228 height: width
0229 icon.name: "view-fullscreen"
0230 icon.color: "white"
0231 icon.width: Kirigami.Units.iconSizes.smallMedium
0232 icon.height: Kirigami.Units.iconSizes.smallMedium
0233
0234 visible: root.showPresentationControls
0235
0236 onClicked: {
0237 root.requestFullScreen();
0238 }
0239
0240 TabIndicator {}
0241 }
0242
0243 QQC2.ToolButton {
0244 width: Kirigami.Units.gridUnit * 3
0245 height: width
0246 icon.name: "view-zoom-in-symbolic"
0247 icon.color: "white"
0248 icon.width: Kirigami.Units.iconSizes.smallMedium
0249 icon.height: Kirigami.Units.iconSizes.smallMedium
0250
0251 visible: root.showPresentationControls
0252
0253 onClicked: PlasmaTube.videoController.videoMode = VideoController.PictureInPicture
0254
0255 TabIndicator {}
0256 }
0257 }
0258
0259 Item { Layout.fillWidth: true }
0260 }
0261 }
0262
0263 Kirigami.Dialog {
0264 id: configureDialog
0265 title: i18n("Settings")
0266 padding: 0
0267 preferredHeight: Kirigami.Units.gridUnit * 20
0268 preferredWidth: Kirigami.Units.gridUnit * 15
0269
0270 ColumnLayout {
0271 spacing: 0
0272 QQC2.ButtonGroup {
0273 id: radioGroup
0274 }
0275 Repeater {
0276 model: PlasmaTube.videoController.videoModel.formatList
0277 delegate: QQC2.RadioDelegate {
0278 Layout.fillWidth: true
0279 checked: PlasmaTube.videoController.videoModel.selectedFormat === modelData
0280 text: modelData
0281 QQC2.ButtonGroup.group: radioGroup
0282 onCheckedChanged: {
0283 if (checked) {
0284 PlasmaTube.videoController.videoModel.selectedFormat = modelData
0285 }
0286 }
0287 }
0288 }
0289 }
0290 }
0291 }