Warning, /plasma-bigscreen/youtube-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 PlasmaComponents
0008 import Mycroft 1.0 as Mycroft
0009
0010
0011 PlasmaComponents.ItemDelegate {
0012 id: delegate
0013
0014 // readonly property Flickable gridView: {
0015 // var candidate = parent;
0016 // while (candidate) {
0017 // if (candidate instanceof Flickable) {
0018 // return candidate;
0019 // }
0020 // candidate = candidate.parent;
0021 // }
0022 // return null;
0023 // }
0024
0025 readonly property GridView gridView: GridView.view
0026 implicitWidth: gridView.cellWidth
0027 implicitHeight: gridView.cellHeight
0028
0029 readonly property bool isCurrent: {
0030 gridView.currentIndex == index && activeFocus && !gridView.moving
0031 }
0032
0033 z: isCurrent ? 2 : 0
0034
0035 onClicked: {
0036 gridView.forceActiveFocus()
0037 gridView.currentIndex = index
0038 }
0039
0040 Keys.onReturnPressed: {
0041 clicked();
0042 }
0043
0044 leftPadding: Kirigami.Units.largeSpacing * 2
0045 topPadding: Kirigami.Units.largeSpacing * 2
0046 rightPadding: Kirigami.Units.largeSpacing * 2
0047 bottomPadding: Kirigami.Units.largeSpacing * 2
0048
0049 leftInset: Kirigami.Units.largeSpacing
0050 topInset: Kirigami.Units.largeSpacing
0051 rightInset: Kirigami.Units.largeSpacing
0052 bottomInset: Kirigami.Units.largeSpacing
0053
0054 contentItem: Item {
0055 ColumnLayout {
0056 anchors.fill: parent
0057 spacing: Kirigami.Units.smallSpacing
0058
0059 Rectangle {
0060 id: imgRoot
0061 color: "transparent"
0062 clip: true
0063 Layout.alignment: Qt.AlignTop
0064 Layout.fillWidth: true
0065 Layout.topMargin: delegate.isCurrent ? -Kirigami.Units.largeSpacing * 2 : -Kirigami.Units.smallSpacing * 2
0066 Layout.leftMargin: -Kirigami.Units.smallSpacing * 2
0067 Layout.rightMargin: -Kirigami.Units.smallSpacing * 2
0068 Layout.bottomMargin: -Kirigami.Units.smallSpacing
0069 Layout.preferredHeight: parent.height - Kirigami.Units.gridUnit * 3
0070 radius: 3
0071
0072 layer.enabled: true
0073 layer.effect: OpacityMask {
0074 maskSource: Rectangle {
0075 x: imgRoot.x; y: imgRoot.y
0076 width: imgRoot.width
0077 height: imgRoot.height
0078 radius: imgRoot.radius
0079 }
0080 }
0081
0082 Image {
0083 id: img
0084 source: modelData.videoImage
0085 width: parent.width
0086 height: parent.height
0087 y: -12
0088 opacity: 1
0089 fillMode: Image.Tile
0090
0091 Rectangle {
0092 id: videoDurationTime
0093 anchors.bottom: parent.bottom
0094 anchors.bottomMargin: parent.width > Kirigami.Units.gridUnit * 15 ? Kirigami.Units.gridUnit * 0.4 : Kirigami.Units.largeSpacing
0095 anchors.right: parent.right
0096 anchors.rightMargin: Kirigami.Units.gridUnit * 0.75
0097 width: Kirigami.Units.gridUnit * 2.5 + Kirigami.Units.largeSpacing * 2
0098 height: durationText.height
0099 radius: Kirigami.Units.gridUnit * 0.5
0100 color: Qt.rgba(0, 0, 0, 0.8)
0101
0102 PlasmaComponents.Label {
0103 id: durationText
0104 anchors.centerIn: parent
0105 text: modelData.videoDuration
0106 color: Kirigami.Theme.textColor
0107 }
0108 }
0109 }
0110 }
0111
0112 Item {
0113 Layout.fillWidth: true
0114 Layout.fillHeight: true
0115 Layout.alignment: Qt.AlignLeft | Qt.AlignTop
0116
0117 ColumnLayout {
0118 anchors.fill: parent
0119 spacing: Kirigami.Units.smallSpacing
0120
0121 Kirigami.Heading {
0122 id: videoLabel
0123 Layout.fillWidth: true
0124 Layout.leftMargin: Kirigami.Units.largeSpacing
0125 Layout.alignment: Qt.AlignLeft | Qt.AlignTop
0126 wrapMode: Text.Wrap
0127 level: 3
0128 //verticalAlignment: Text.AlignVCenter
0129 maximumLineCount: 1
0130 elide: Text.ElideRight
0131 color: PlasmaCore.ColorScope.textColor
0132 Component.onCompleted: {
0133 text = modelData.videoTitle
0134 }
0135 }
0136
0137 PlasmaComponents.Label {
0138 id: videoChannelName
0139 Layout.fillWidth: true
0140 Layout.leftMargin: Kirigami.Units.largeSpacing
0141 wrapMode: Text.WordWrap
0142 Layout.alignment: Qt.AlignLeft | Qt.AlignTop
0143 maximumLineCount: 1
0144 elide: Text.ElideRight
0145 color: PlasmaCore.ColorScope.textColor
0146 text: modelData.videoChannel
0147 }
0148
0149 RowLayout {
0150 Layout.fillWidth: true
0151 Layout.leftMargin: Kirigami.Units.largeSpacing
0152
0153 PlasmaComponents.Label {
0154 id: videoUploadDate
0155 Layout.fillWidth: true
0156 Layout.alignment: Qt.AlignLeft | Qt.AlignTop
0157 wrapMode: Text.WordWrap
0158 maximumLineCount: 1
0159 elide: Text.ElideRight
0160 color: PlasmaCore.ColorScope.textColor
0161 text: modelData.videoUploadDate
0162 }
0163
0164 PlasmaComponents.Label {
0165 id: videoViews
0166 Layout.alignment: Qt.AlignRight
0167 Layout.rightMargin: Kirigami.Units.largeSpacing
0168 wrapMode: Text.WordWrap
0169 maximumLineCount: 1
0170 elide: Text.ElideRight
0171 color: PlasmaCore.ColorScope.textColor
0172 text: modelData.videoViews
0173 }
0174 }
0175 }
0176 }
0177 }
0178 }
0179
0180 background: Item {
0181 id: background
0182
0183 Rectangle {
0184 id: shadowSource
0185 anchors {
0186 fill: frame
0187 margins: units.largeSpacing
0188 }
0189 color: "black"
0190 radius: frame.radius
0191 visible: false
0192 }
0193
0194 FastBlur {
0195 anchors.fill: frame
0196 transparentBorder: true
0197 source: shadowSource
0198 radius: Kirigami.Units.largeSpacing * 2
0199 cached: true
0200 readonly property bool inView: delegate.x <= gridView.contentX + gridView.width && delegate.x + delegate.width >= gridView.contentX
0201 visible: inView
0202 }
0203
0204 Rectangle {
0205 id: frame
0206 anchors {
0207 fill: parent
0208 }
0209
0210 /* For some reason, putting the colors and animation in the states
0211 * and transition makes the color not load until the animations finish
0212 * during the startup of the homescreen containment.
0213 * Also for some reason, frame starts out white and fades into the correct color while
0214 * innerFrame starts out transparent (maybe?) and fades into the correct color.
0215 */
0216 color: delegate.isCurrent ? delegate.Kirigami.Theme.highlightColor : delegate.Kirigami.Theme.backgroundColor
0217 Behavior on color {
0218 ColorAnimation {
0219 duration: Kirigami.Units.longDuration/2
0220 easing.type: Easing.InOutQuad
0221 }
0222 }
0223
0224 Rectangle {
0225 id: innerFrame
0226 anchors {
0227 fill: parent
0228 margins: units.smallSpacing
0229 }
0230 radius: frame.radius/2
0231 color: delegate.Kirigami.Theme.backgroundColor
0232 }
0233
0234 states: [
0235 State {
0236 when: delegate.isCurrent
0237 PropertyChanges {
0238 target: delegate
0239 leftInset: Kirigami.Units.largeSpacing - innerFrame.anchors.margins
0240 rightInset: Kirigami.Units.largeSpacing - innerFrame.anchors.margins
0241 topInset: -Kirigami.Units.smallSpacing
0242 bottomInset: -Kirigami.Units.smallSpacing
0243 }
0244 PropertyChanges {
0245 target: frame
0246 radius: 6
0247 }
0248 },
0249 State {
0250 when: !delegate.isCurrent
0251 PropertyChanges {
0252 target: delegate
0253 leftInset: Kirigami.Units.largeSpacing
0254 rightInset: Kirigami.Units.largeSpacing
0255 topInset: Kirigami.Units.largeSpacing
0256 bottomInset: Kirigami.Units.largeSpacing
0257 }
0258 PropertyChanges {
0259 target: frame
0260 radius: 3
0261 }
0262 }
0263 ]
0264
0265 transitions: Transition {
0266 ParallelAnimation {
0267 NumberAnimation {
0268 property: "leftInset"
0269 duration: Kirigami.Units.longDuration
0270 easing.type: Easing.InOutQuad
0271 }
0272 NumberAnimation {
0273 property: "rightInset"
0274 duration: Kirigami.Units.longDuration
0275 easing.type: Easing.InOutQuad
0276 }
0277 NumberAnimation {
0278 property: "topInset"
0279 duration: Kirigami.Units.longDuration
0280 easing.type: Easing.InOutQuad
0281 }
0282 NumberAnimation {
0283 property: "bottomInset"
0284 duration: Kirigami.Units.longDuration
0285 easing.type: Easing.InOutQuad
0286 }
0287 NumberAnimation {
0288 property: "radius"
0289 duration: Kirigami.Units.longDuration
0290 easing.type: Easing.InOutQuad
0291 }
0292 }
0293 }
0294 }
0295 }
0296 }
0297