Warning, /plasma-bigscreen/peertube-voice-application/ui/delegates/VideoCard.qml is written in an unsupported language. File is not indexed.
0001 import QtQuick 2.9
0002 import QtQuick.Layouts 1.4
0003 import QtGraphicalEffects 1.0
0004 import QtQuick.Controls 2.3
0005 import org.kde.kirigami 2.8 as Kirigami
0006 import org.kde.plasma.core 2.0 as PlasmaCore
0007 import org.kde.plasma.components 3.0 as PlasmaComponents3
0008 import org.kde.plasma.components 2.0 as PlasmaComponents
0009 import Mycroft 1.0 as Mycroft
0010
0011 PlasmaComponents3.ItemDelegate {
0012 id: delegate
0013
0014 property int borderSize: Kirigami.Units.smallSpacing
0015 property int baseRadius: 3
0016
0017 readonly property Flickable listView: {
0018 var candidate = parent;
0019 while (candidate) {
0020 if (candidate instanceof Flickable) {
0021 return candidate;
0022 }
0023 candidate = candidate.parent;
0024 }
0025 return null;
0026 }
0027
0028
0029 readonly property bool isCurrent: {//print(text+index+" "+listView.currentIndex+activeFocus+" "+listView.moving)
0030 listView.currentIndex == index && activeFocus && !listView.moving
0031 }
0032
0033
0034 leftPadding: Kirigami.Units.largeSpacing * 2
0035 topPadding: Kirigami.Units.largeSpacing * 2
0036 rightPadding: Kirigami.Units.largeSpacing * 2
0037 bottomPadding: Kirigami.Units.largeSpacing * 2
0038
0039 leftInset: Kirigami.Units.largeSpacing
0040 topInset: Kirigami.Units.largeSpacing
0041 rightInset: Kirigami.Units.largeSpacing
0042 bottomInset: Kirigami.Units.largeSpacing
0043
0044 implicitWidth: parent.cellWidth
0045 height: parent.height
0046
0047 background: Item {
0048 id: background
0049
0050 readonly property Item highlight: Rectangle {
0051 parent: delegate
0052 z: 1
0053 anchors {
0054 fill: parent
0055 }
0056 color: "transparent"
0057 border {
0058 width: delegate.borderSize
0059 color: delegate.Kirigami.Theme.highlightColor
0060 }
0061 opacity: delegate.isCurrent || delegate.highlighted
0062 Behavior on opacity {
0063 OpacityAnimator {
0064 duration: Kirigami.Units.longDuration/2
0065 easing.type: Easing.InOutQuad
0066 }
0067 }
0068 }
0069
0070 Rectangle {
0071 id: frame
0072 anchors {
0073 fill: parent
0074 }
0075 radius: delegate.baseRadius
0076 color: delegate.Kirigami.Theme.backgroundColor
0077 layer.enabled: true
0078 layer.effect: DropShadow {
0079 transparentBorder: false
0080 horizontalOffset: 1.25
0081 verticalOffset: 1
0082 }
0083
0084 states: [
0085 State {
0086 when: delegate.isCurrent
0087 PropertyChanges {
0088 target: delegate
0089 leftInset: 0
0090 rightInset: 0
0091 topInset: 0
0092 bottomInset: 0
0093 }
0094 PropertyChanges {
0095 target: background.highlight.anchors
0096 margins: 0
0097 }
0098 PropertyChanges {
0099 target: frame
0100 // baseRadius + borderSize preserves the original radius for the visible part of frame
0101 radius: delegate.baseRadius + delegate.borderSize
0102 }
0103 PropertyChanges {
0104 target: background.highlight
0105 // baseRadius + borderSize preserves the original radius for the visible part of frame
0106 radius: delegate.baseRadius + delegate.borderSize
0107 }
0108 },
0109 State {
0110 when: !delegate.isCurrent
0111 PropertyChanges {
0112 target: delegate
0113 leftInset: Kirigami.Units.largeSpacing
0114 rightInset: Kirigami.Units.largeSpacing
0115 topInset: Kirigami.Units.largeSpacing
0116 bottomInset: Kirigami.Units.largeSpacing
0117 }
0118 PropertyChanges {
0119 target: background.highlight.anchors
0120 margins: Kirigami.Units.largeSpacing
0121 }
0122 PropertyChanges {
0123 target: frame
0124 radius: delegate.baseRadius
0125 }
0126 PropertyChanges {
0127 target: background.highlight
0128 radius: delegate.baseRadius
0129 }
0130 }
0131 ]
0132
0133 transitions: Transition {
0134 ParallelAnimation {
0135 NumberAnimation {
0136 property: "leftInset"
0137 duration: Kirigami.Units.longDuration
0138 easing.type: Easing.InOutQuad
0139 }
0140 NumberAnimation {
0141 property: "rightInset"
0142 duration: Kirigami.Units.longDuration
0143 easing.type: Easing.InOutQuad
0144 }
0145 NumberAnimation {
0146 property: "topInset"
0147 duration: Kirigami.Units.longDuration
0148 easing.type: Easing.InOutQuad
0149 }
0150 NumberAnimation {
0151 property: "bottomInset"
0152 duration: Kirigami.Units.longDuration
0153 easing.type: Easing.InOutQuad
0154 }
0155 NumberAnimation {
0156 property: "radius"
0157 duration: Kirigami.Units.longDuration
0158 easing.type: Easing.InOutQuad
0159 }
0160 NumberAnimation {
0161 property: "margins"
0162 duration: Kirigami.Units.longDuration
0163 easing.type: Easing.InOutQuad
0164 }
0165 }
0166 }
0167 }
0168 }
0169
0170 contentItem: ColumnLayout {
0171 spacing: Kirigami.Units.smallSpacing
0172
0173 Item {
0174 id: imgRoot
0175 //clip: true
0176 Layout.alignment: Qt.AlignTop
0177 Layout.fillWidth: true
0178 Layout.topMargin: -delegate.topPadding + delegate.topInset + extraBorder
0179 Layout.leftMargin: -delegate.leftPadding + delegate.leftInset + extraBorder
0180 Layout.rightMargin: -delegate.rightPadding + delegate.rightInset + extraBorder
0181 // Any width times 0.5625 is a 16:9 ratio
0182 // Adding baseRadius is needed to prevent the bottom from being rounded
0183 Layout.preferredHeight: width * 0.5625 + delegate.baseRadius
0184 // FIXME: another thing copied from AbstractDelegate
0185 property real extraBorder: 0
0186
0187 layer.enabled: true
0188 layer.effect: OpacityMask {
0189 cached: true
0190 maskSource: Rectangle {
0191 x: imgRoot.x;
0192 y: imgRoot.y
0193 width: imgRoot.width
0194 height: imgRoot.height
0195 radius: delegate.baseRadius
0196 }
0197 }
0198
0199 Image {
0200 id: img
0201 source: "https://" + modelData.channel.host + modelData.thumbnail_path
0202 anchors {
0203 fill: parent
0204 // To not round under
0205 bottomMargin: delegate.baseRadius
0206 }
0207 opacity: 1
0208 fillMode: Image.PreserveAspectCrop
0209
0210 Rectangle {
0211 id: videoDurationTime
0212 anchors.bottom: parent.bottom
0213 anchors.bottomMargin: Kirigami.Units.largeSpacing
0214 anchors.right: parent.right
0215 anchors.rightMargin: Kirigami.Units.largeSpacing
0216 // FIXME: kind of hacky to get the padding around the text right
0217 width: durationText.width + Kirigami.Units.largeSpacing
0218 height: Kirigami.Units.gridUnit
0219 radius: delegate.baseRadius
0220 visible: modelData.duration ? 1 : 0
0221 color: Qt.rgba(0, 0, 0, 0.8)
0222
0223 PlasmaComponents.Label {
0224 id: durationText
0225 anchors.centerIn: parent
0226 text: timeSanitize(modelData.duration)
0227 color: Kirigami.Theme.textColor
0228 }
0229 }
0230 }
0231
0232 states: [
0233 State {
0234 when: delegate.isCurrent
0235 PropertyChanges {
0236 target: imgRoot
0237 extraBorder: delegate.borderSize
0238 }
0239 },
0240 State {
0241 when: !delegate.isCurrent
0242 PropertyChanges {
0243 target: imgRoot
0244 extraBorder: 0
0245 }
0246 }
0247 ]
0248 transitions: Transition {
0249 onRunningChanged: {
0250 // Optimize when animating the thumbnail
0251 img.smooth = !running
0252 }
0253 NumberAnimation {
0254 property: "extraBorder"
0255 duration: Kirigami.Units.longDuration
0256 easing.type: Easing.InOutQuad
0257 }
0258 }
0259 }
0260
0261 ColumnLayout {
0262 Layout.fillWidth: true
0263 Layout.fillHeight: true
0264 // Compensate for blank space created from not rounding thumbnail bottom corners
0265 Layout.topMargin: -delegate.baseRadius
0266 Layout.alignment: Qt.AlignLeft | Qt.AlignTop
0267 spacing: Kirigami.Units.smallSpacing
0268
0269 Kirigami.Heading {
0270 id: videoLabel
0271 Layout.fillWidth: true
0272 Layout.alignment: Qt.AlignLeft | Qt.AlignTop
0273 wrapMode: Text.Wrap
0274 level: 3
0275 maximumLineCount: 1
0276 elide: Text.ElideRight
0277 color: PlasmaCore.ColorScope.textColor
0278 Component.onCompleted: {
0279 text = modelData.name
0280 }
0281 }
0282
0283 PlasmaComponents.Label {
0284 id: videoChannelName
0285 Layout.fillWidth: true
0286 wrapMode: Text.WordWrap
0287 Layout.alignment: Qt.AlignLeft | Qt.AlignTop
0288 maximumLineCount: 1
0289 elide: Text.ElideRight
0290 color: PlasmaCore.ColorScope.textColor
0291 text: modelData.channel.display_name
0292 }
0293
0294 RowLayout {
0295 Layout.fillWidth: true
0296
0297 PlasmaComponents.Label {
0298 id: videoViews
0299 Layout.alignment: Qt.AlignLeft
0300 Layout.rightMargin: Kirigami.Units.largeSpacing
0301 elide: Text.ElideRight
0302 color: PlasmaCore.ColorScope.textColor
0303 text: modelData.views
0304 }
0305
0306 PlasmaComponents.Label {
0307 id: videoUploadDate
0308 Layout.fillWidth: true
0309 Layout.alignment: Qt.AlignRight | Qt.AlignTop
0310 horizontalAlignment: Text.AlignRight
0311 elide: Text.ElideRight
0312 color: PlasmaCore.ColorScope.textColor
0313 text: setPublishedDate(modelData.published_at)
0314 }
0315 }
0316 }
0317 }
0318
0319 Keys.onReturnPressed: {
0320 clicked()
0321 }
0322
0323 onClicked: {
0324 busyIndicatorPop.open()
0325 triggerGuiEvent("PeerTube.WatchVideo", modelData)
0326 }
0327 }