ui/components/VideoGridItem.qml

0001 // SPDX-FileCopyrightText: 2019 Linus Jahn <lnj@kaidan.im>
0002 // SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
0003 // SPDX-License-Identifier: GPL-3.0-or-later
0004
0005 import QtQuick
0006 import QtQuick.Layouts
0007 import QtQuick.Controls as QQC2
0008 import Qt5Compat.GraphicalEffects
0009
0010 import org.kde.kirigami as Kirigami
0011
0012 import "utils.js" as Utils
0013
0014 BaseGridItem {
0015     id: root
0016
0017     property string vid
0018     property url thumbnail
0019     property bool liveNow
0020     property date length
0021     property string title
0022     property string author
0023     property string authorId
0024     property string description
0025     property int viewCount
0026     property string publishedText
0027     property bool watched
0028
0029     contentItem: ColumnLayout {
0030         id: column
0031         anchors.fill: parent
0032         anchors.topMargin: root.topPadding
0033         anchors.bottomMargin: root.bottomPadding
0034         anchors.leftMargin: root.leftPadding
0035         anchors.rightMargin: root.rightPadding
0036
0037         spacing: Kirigami.Units.largeSpacing
0038
0039         TapHandler {
0040             acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
0041             acceptedButtons: Qt.RightButton
0042             onTapped: root.contextMenuRequested()
0043         }
0044
0045         Image {
0046             id: thumb
0047             Layout.alignment: Qt.AlignTop
0048             Layout.preferredWidth: column.width
0049             Layout.maximumWidth: column.width
0050             Layout.preferredHeight: column.width / 16 * 9
0051             Layout.maximumHeight: column.width / 16 * 9
0052             layer.enabled: true
0053             layer.effect: OpacityMask {
0054                 maskSource: mask
0055             }
0056             source: thumbnail
0057             fillMode: Image.PreserveAspectCrop
0058             Rectangle {
0059                 id: mask
0060                 radius: 7
0061                 anchors.fill: thumb
0062                 visible: false
0063             }
0064
0065             PlaceholderItem {
0066                 anchors.fill: parent
0067                 visible: thumb.status !== Image.Ready
0068             }
0069
0070             Text {
0071                 visible: !liveNow && text !== "00:00"
0072                 text: Utils.formatTime(length)
0073                 color: "white"
0074                 font.pointSize: Kirigami.Theme.smallFont.pointSize
0075
0076                 z: 2
0077
0078                 anchors.right: parent.right
0079                 anchors.bottom: parent.bottom
0080                 anchors.rightMargin: Kirigami.Units.smallSpacing * 2
0081                 anchors.bottomMargin: Kirigami.Units.smallSpacing * 2
0082
0083                 Rectangle {
0084                     anchors.fill: parent
0085                     anchors.topMargin: -Kirigami.Units.smallSpacing
0086                     anchors.bottomMargin: -Kirigami.Units.smallSpacing
0087                     anchors.leftMargin: -Kirigami.Units.smallSpacing
0088                     anchors.rightMargin: -Kirigami.Units.smallSpacing
0089                     z: -1
0090                     color: "#90000000"
0091                     radius: 2
0092                     width: 60
0093                     height: 15
0094                 }
0095             }
0096
0097             Rectangle {
0098                 id: watchIndicator
0099
0100                 color: "black"
0101                 opacity: 0.5
0102                 visible: root.watched
0103                 anchors.fill: parent
0104
0105                 Rectangle {
0106                     anchors {
0107                         bottom: parent.bottom
0108                         left: parent.left
0109                         right: parent.right
0110                     }
0111
0112                     color: "red"
0113                     height: 3
0114                 }
0115             }
0116         }
0117
0118         ColumnLayout {
0119             id: videoInfo
0120             Layout.fillWidth: true
0121             Layout.alignment: Qt.AlignTop
0122             spacing: Kirigami.Units.smallSpacing
0123
0124             Kirigami.Heading {
0125                 Layout.alignment: Qt.AlignTop
0126                 Layout.fillWidth: true
0127
0128                 text: title
0129                 level: 4
0130                 maximumLineCount: 2
0131                 wrapMode: Text.Wrap
0132                 elide: Text.ElideRight
0133             }
0134
0135             QQC2.Label {
0136                 font.pointSize: Kirigami.Theme.smallFont.pointSize
0137                 text: author
0138                 color: Kirigami.Theme.disabledTextColor
0139                 maximumLineCount: 2
0140                 elide: Text.ElideRight
0141             }
0142
0143             QQC2.Label {
0144                 font.pointSize: Kirigami.Theme.smallFont.pointSize
0145                 text: i18n("%1 views \u2022 %2", Utils.formatCount(viewCount), liveNow ? "<i>live now</i>" : publishedText)
0146                 color: Kirigami.Theme.disabledTextColor
0147                 maximumLineCount: 1
0148                 elide: Text.ElideRight
0149             }
0150         }
0151
0152         Item { Layout.fillHeight: true }
0153     }
0154 }
0155