modules/gui/qt/widgets/qml/GridItem.qml

   1 /*****************************************************************************
   2  * Copyright (C) 2019 VLC authors and VideoLAN
   3  *
   4  * This program is free software; you can redistribute it and/or modify
   5  * it under the terms of the GNU General Public License as published by
   6  * the Free Software Foundation; either version 2 of the License, or
   7  * ( at your option ) any later version.
   8  *
   9  * This program is distributed in the hope that it will be useful,
  10  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  11  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  12  * GNU General Public License for more details.
  13  *
  14  * You should have received a copy of the GNU General Public License
  15  * along with this program; if not, write to the Free Software
  16  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
  17  *****************************************************************************/
  18 import QtQuick 2.11
  19 import QtQuick.Controls 2.4
  20 import QtQuick.Layouts 1.3
  21 import QtQml.Models 2.2
  22 import QtGraphicalEffects 1.0
  23 import org.videolan.medialib 0.1
  24
  25 import "qrc:///widgets/" as Widgets
  26 import "qrc:///style/"
  27
  28 Rectangle {
  29     id: root
  30
  31     color: "transparent"
  32     property url image
  33     property string title: ""
  34     property string subtitle: ""
  35     property bool selected: false
  36
  37     property alias sourceSize: cover.sourceSize
  38     property string infoLeft: ""
  39     property string resolution: ""
  40     property bool isVideo: false
  41     property bool isNew: false
  42     property double progress: 0
  43     property string channel: ""
  44     property real pictureWidth: isVideo ? VLCStyle.video_normal_width : VLCStyle.cover_small
  45     property real pictureHeight: isVideo ? VLCStyle.video_normal_height : VLCStyle.cover_small
  46     width: gridItem.width
  47     height: gridItem.height
  48
  49     signal playClicked
  50     signal addToPlaylistClicked
  51     signal itemClicked(Item menuParent, int key, int modifier)
  52     signal itemDoubleClicked(Item menuParent, int keys, int modifier)
  53     signal contextMenuButtonClicked(Item menuParent)
  54
  55     Keys.onMenuPressed: root.contextMenuButtonClicked(cover_bg)
  56
  57     Accessible.role: Accessible.Cell
  58     Accessible.name: title
  59
  60     Item {
  61         id: gridItem
  62         width: childrenRect.width
  63         height: childrenRect.height
  64
  65         MouseArea {
  66             id: mouseArea
  67             hoverEnabled: true
  68             onClicked: {
  69                 if (mouse.button === Qt.RightButton)
  70                     contextMenuButtonClicked(cover_bg);
  71                 else {
  72                     root.itemClicked(cover_bg,mouse.button, mouse.modifiers);
  73                 }
  74             }
  75             onDoubleClicked: {
  76                 root.itemDoubleClicked(cover_bg,mouse.buttons, mouse.modifiers)
  77             }
  78             width: childrenRect.width
  79             height: childrenRect.height
  80             acceptedButtons: Qt.RightButton | Qt.LeftButton
  81             Keys.onMenuPressed: root.contextMenuButtonClicked(cover_bg)
  82
  83             Item {
  84                 id: picture
  85                 width: root.pictureWidth
  86                 height: root.pictureHeight
  87                 anchors.top: mouseArea.top
  88                 property bool highlighted: selected || root.activeFocus
  89
  90                 Rectangle {
  91                     id: cover_bg
  92                     width: picture.width
  93                     height: picture.height
  94
  95
  96                     color: VLCStyle.colors.getBgColor(
  97                                selected, mouseArea.containsMouse,
  98                                root.activeFocus)
  99
 100                     RoundImage {
 101                         id: cover
 102                         anchors.fill: parent
 103                         anchors.margins: VLCStyle.margin_normal
 104                         source: image
 105
 106                         Behavior on anchors.margins {
 107                             SmoothedAnimation {
 108                                 velocity: 100
 109                             }
 110                         }
 111
 112                         VideoProgressBar {
 113                             value: root.progress
 114                             visible: isVideo && root.progress > 0
 115                             anchors {
 116                                 bottom: parent.bottom
 117                                 left: parent.left
 118                                 right: parent.right
 119                             }
 120                         }
 121                     }
 122
 123                     VideoQualityLabel {
 124                         id: resolutionLabel
 125                         visible: root.resolution !== ""
 126                         anchors {
 127                             top: cover.top
 128                             left: cover.left
 129                             topMargin: VLCStyle.margin_xxsmall
 130                             leftMargin: VLCStyle.margin_xxsmall
 131                         }
 132                         text: root.resolution
 133                     }
 134                     VideoQualityLabel {
 135                         anchors {
 136                             top: cover.top
 137                             left: resolutionLabel.right
 138                             topMargin: VLCStyle.margin_xxsmall
 139                             leftMargin: VLCStyle.margin_xxxsmall
 140                         }
 141                         visible: root.channel !== ""
 142                         text: root.channel
 143                         color: "limegreen"
 144                     }
 145                     states: [
 146                         State {
 147                             name: "visiblebig"
 148                             PropertyChanges {
 149                                 target: cover
 150                                 anchors.margins: VLCStyle.margin_xxsmall
 151                             }
 152                             when: mouseArea.containsMouse
 153                         },
 154                         State {
 155                             name: "hiddenbig"
 156                             PropertyChanges {
 157                                 target: cover
 158                                 anchors.margins: VLCStyle.margin_xxsmall
 159                             }
 160                             when: !mouseArea.containsMouse
 161                                   && picture.highlighted
 162                         },
 163                         State {
 164                             name: "hiddensmall"
 165                             PropertyChanges {
 166                                 target: cover
 167                                 anchors.margins: VLCStyle.margin_xsmall
 168                             }
 169                             when: !mouseArea.containsMouse
 170                                   && !picture.highlighted
 171                         }
 172                     ]
 173                 }
 174             }
 175
 176             Rectangle {
 177                 id: textHolderRect
 178                 width: picture.width
 179                 height: childrenRect.height
 180                 anchors.top: picture.bottom
 181                 color: "transparent"
 182                 Rectangle {
 183                     id: textTitleRect
 184                     height: childrenRect.height
 185                     color: "transparent"
 186                     clip: true
 187                     property bool showTooltip: false
 188                     anchors {
 189                         left: parent.left
 190                         right: parent.right
 191                         rightMargin: VLCStyle.margin_small
 192                         leftMargin: VLCStyle.margin_small
 193                     }
 194
 195                     ToolTip {
 196                         visible: textTitleRect.showTooltip
 197                         x: (parent.width/2) - (width/2)
 198                         y: (parent.height/2) - (height/2)
 199                         text: root.title
 200                     }
 201
 202                     Text {
 203                         id: textTitle
 204                         text: root.title
 205                         color: VLCStyle.colors.text
 206                         font.pixelSize: VLCStyle.fontSize_normal
 207                         property bool _needsToScroll: (textTitleRect.width < textTitle.width)
 208
 209                         state: ((mouseArea.containsMouse || picture.highlighted)
 210                                 && textTitle._needsToScroll) ? "HOVERED" : "RELEASED"
 211
 212                         states: [
 213                             State {
 214                                 name: "HOVERED"
 215                                 PropertyChanges {
 216                                     target: textTitle
 217                                     x: textTitleRect.width - textTitle.width - VLCStyle.margin_small
 218                                 }
 219                             },
 220                             State {
 221                                 name: "RELEASED"
 222                                 PropertyChanges {
 223                                     target: textTitle
 224                                     x: 0
 225                                 }
 226                             }
 227                         ]
 228                         transitions: [
 229                             Transition {
 230                                 from: "RELEASED"
 231                                 to: "HOVERED"
 232
 233                                 SequentialAnimation {
 234                                     PauseAnimation {
 235                                         duration: 1000
 236                                     }
 237                                     SmoothedAnimation {
 238                                         property: "x"
 239                                         maximumEasingTime: 0
 240                                         velocity: 25
 241                                     }
 242                                     PauseAnimation {
 243                                         duration: 2000
 244                                     }
 245                                     ScriptAction {
 246                                         script: textTitle.state = "RELEASED"
 247                                     }
 248                                 }
 249                             }
 250                         ]
 251                     }
 252                 }
 253
 254                 MouseArea {
 255                     id: titleMouseArea
 256                     anchors.fill: parent
 257                     hoverEnabled: true
 258                     onClicked: textTitleRect.showTooltip = true
 259                     onExited: textTitleRect.showTooltip = false
 260                 }
 261
 262                 Text {
 263                     id: subtitleTxt
 264                     anchors {
 265                         left: parent.left
 266                         right: parent.right
 267                         top: textTitleRect.bottom
 268                         rightMargin: VLCStyle.margin_small
 269                         leftMargin: VLCStyle.margin_small
 270                     }
 271                     text: root.subtitle
 272                     font.weight: Font.Light
 273                     elide: Text.ElideRight
 274                     font.pixelSize: VLCStyle.fontSize_small
 275                     color: VLCStyle.colors.lightText
 276                     horizontalAlignment: Qt.AlignHCenter
 277                 }
 278                 RowLayout {
 279                     visible: isVideo
 280                     anchors {
 281                         top: subtitleTxt.top
 282                         left: parent.left
 283                         right: parent.right
 284                         rightMargin: VLCStyle.margin_small
 285                         leftMargin: VLCStyle.margin_small
 286                         topMargin: VLCStyle.margin_xxxsmall
 287                     }
 288                     Text {
 289                         Layout.alignment: Qt.AlignLeft
 290                         font.pixelSize: VLCStyle.fontSize_small
 291                         color: VLCStyle.colors.videosGridInfoLeft
 292                         text: infoLeft
 293                     }
 294                     Text {
 295                         visible: root.isNew
 296                         Layout.alignment: Qt.AlignRight
 297                         font.pixelSize: VLCStyle.fontSize_small
 298                         color: VLCStyle.colors.accent
 299                         text: "NEW"
 300                         font.bold: true
 301                     }
 302                 }
 303             }
 304
 305         }
 306     }
 307 }