[vlc-devel] [PATCH 5/8] qml: move out VideoQualityLabels from MediaCover widget

Prince Gupta guptaprince8832 at gmail.com
Wed Apr 21 10:12:01 UTC 2021


add them using MediaCover.imageOverlay property whenever required
---
 modules/gui/qt/Makefile.am                    |  2 +-
 .../gui/qt/medialibrary/qml/VideoGridItem.qml | 21 +++++++--
 modules/gui/qt/vlc.qrc                        |  2 +-
 modules/gui/qt/widgets/qml/GridItem.qml       |  1 -
 modules/gui/qt/widgets/qml/MediaCover.qml     | 28 ------------
 modules/gui/qt/widgets/qml/TableColumns.qml   | 18 +++++++-
 ...ualityLabel.qml => VideoQualityLabels.qml} | 43 ++++++++++++-------
 7 files changed, 64 insertions(+), 51 deletions(-)
 rename modules/gui/qt/widgets/qml/{VideoQualityLabel.qml => VideoQualityLabels.qml} (56%)

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 7dd57579ca..49d3ae6aa8 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -802,7 +802,7 @@ libqt_plugin_la_QML = \
 	gui/qt/widgets/qml/TextToolButton.qml \
 	gui/qt/widgets/qml/ToolTipArea.qml \
 	gui/qt/widgets/qml/VideoProgressBar.qml \
-	gui/qt/widgets/qml/VideoQualityLabel.qml \
+	gui/qt/widgets/qml/VideoQualityLabels.qml \
 	gui/qt/widgets/qml/ListSubtitleLabel.qml \
 	gui/qt/widgets/qml/PointingTooltip.qml \
 	gui/qt/widgets/qml/FrostedGlassEffect.qml \
diff --git a/modules/gui/qt/medialibrary/qml/VideoGridItem.qml b/modules/gui/qt/medialibrary/qml/VideoGridItem.qml
index 9abfb8e7b8..2bb8f5372b 100644
--- a/modules/gui/qt/medialibrary/qml/VideoGridItem.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoGridItem.qml
@@ -28,14 +28,15 @@ Widgets.GridItem {
 
     property bool showNewIndicator: true
     property int newIndicatorMedian: root.highlighted ? VLCStyle.icon_small : VLCStyle.icon_xsmall
+    
+    property var labels: [
+        model.resolution_name || "",
+        model.channel || ""
+    ].filter(function(a) { return a !== "" })
 
     image: model.thumbnail || VLCStyle.noArtCover
     title: model.title || i18n.qtr("Unknown title")
     subtitle: Helpers.msToString(model.duration) || ""
-    labels: [
-        model.resolution_name || "",
-        model.channel || ""
-    ].filter(function(a) { return a !== "" } )
     pictureWidth: VLCStyle.gridCover_video_width
     pictureHeight: VLCStyle.gridCover_video_height
     playCoverBorder.width: VLCStyle.gridCover_video_border
@@ -45,6 +46,18 @@ Widgets.GridItem {
         width: root.pictureWidth
         height: root.pictureHeight
 
+        Widgets.VideoQualityLabels {
+            anchors {
+                top: parent.top
+                right: parent.right
+                topMargin: VLCStyle.margin_xxsmall
+                leftMargin: VLCStyle.margin_xxsmall
+                rightMargin: VLCStyle.margin_xxsmall
+            }
+
+            labels: root.labels
+        }
+
         Widgets.VideoProgressBar {
             id: progressBar
 
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 32ab82b7ff..93f129a807 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -224,7 +224,7 @@
         <file alias="LabelSeparator.qml">widgets/qml/LabelSeparator.qml</file>
         <file alias="ContextButton.qml">widgets/qml/ContextButton.qml</file>
         <file alias="RoundImage.qml">widgets/qml/RoundImage.qml</file>
-        <file alias="VideoQualityLabel.qml">widgets/qml/VideoQualityLabel.qml</file>
+        <file alias="VideoQualityLabels.qml">widgets/qml/VideoQualityLabels.qml</file>
         <file alias="VideoProgressBar.qml">widgets/qml/VideoProgressBar.qml</file>
         <file alias="NavigableCol.qml">widgets/qml/NavigableCol.qml</file>
         <file alias="NavigableRow.qml">widgets/qml/NavigableRow.qml</file>
diff --git a/modules/gui/qt/widgets/qml/GridItem.qml b/modules/gui/qt/widgets/qml/GridItem.qml
index 1e32f513d0..794c40a217 100644
--- a/modules/gui/qt/widgets/qml/GridItem.qml
+++ b/modules/gui/qt/widgets/qml/GridItem.qml
@@ -41,7 +41,6 @@ FocusScope {
     property alias unselectedUnderlay: unselectedUnderlayLoader.sourceComponent
     property alias selectedUnderlay: selectedUnderlayLoader.sourceComponent
 
-    property alias labels: picture.labels
     property real pictureWidth: VLCStyle.colWidth(1)
     property real pictureHeight: pictureWidth
     property int titleMargin: VLCStyle.margin_xsmall
diff --git a/modules/gui/qt/widgets/qml/MediaCover.qml b/modules/gui/qt/widgets/qml/MediaCover.qml
index 14b8968c8b..702eebe390 100644
--- a/modules/gui/qt/widgets/qml/MediaCover.qml
+++ b/modules/gui/qt/widgets/qml/MediaCover.qml
@@ -18,7 +18,6 @@
  *****************************************************************************/
 import QtQuick 2.11
 import QtQuick.Controls 2.4
-import QtQuick.Layouts 1.11
 
 import "qrc:///widgets/" as Widgets
 import "qrc:///style/"
@@ -26,7 +25,6 @@ import "qrc:///style/"
 Widgets.RoundImage {
     id: root
 
-    property var labels: []
     property alias playCoverOpacity: playCover.opacity
     property alias playCoverVisible: playCover.visible
     property alias playCoverOnlyBorders: playCover.onlyBorders
@@ -44,32 +42,6 @@ Widgets.RoundImage {
         anchors.fill: parent
     }
 
-    RowLayout {
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-            topMargin: VLCStyle.margin_xxsmall
-            leftMargin: VLCStyle.margin_xxsmall
-            rightMargin: VLCStyle.margin_xxsmall
-        }
-
-        spacing: VLCStyle.margin_xxsmall
-
-        Repeater {
-            model: labels
-            VideoQualityLabel {
-                Layout.preferredWidth: implicitWidth
-                Layout.preferredHeight: implicitHeight
-                text: modelData
-            }
-        }
-
-        Item {
-            Layout.fillWidth: true
-        }
-    }
-
     Widgets.PlayCover {
         id: playCover
 
diff --git a/modules/gui/qt/widgets/qml/TableColumns.qml b/modules/gui/qt/widgets/qml/TableColumns.qml
index 491e92c44c..cf08caa897 100644
--- a/modules/gui/qt/widgets/qml/TableColumns.qml
+++ b/modules/gui/qt/widgets/qml/TableColumns.qml
@@ -64,7 +64,23 @@ Item {
                 playIconSize: VLCStyle.play_cover_small
                 onPlayIconClicked: medialib.addAndPlay( rowModel.id )
                 radius: root.titleCover_radius
-                labels: root.titlecoverLabels(rowModel)
+
+                imageOverlay: Item {
+                    width: cover.width
+                    height: cover.height
+
+                    Widgets.VideoQualityLabels {
+                        anchors {
+                            top: parent.top
+                            right: parent.right
+                            topMargin: VLCStyle.margin_xxsmall
+                            leftMargin: VLCStyle.margin_xxsmall
+                            rightMargin: VLCStyle.margin_xxsmall
+                        }
+
+                        labels: root.titlecoverLabels(rowModel)
+                    }
+                }
             }
         }
 
diff --git a/modules/gui/qt/widgets/qml/VideoQualityLabel.qml b/modules/gui/qt/widgets/qml/VideoQualityLabels.qml
similarity index 56%
rename from modules/gui/qt/widgets/qml/VideoQualityLabel.qml
rename to modules/gui/qt/widgets/qml/VideoQualityLabels.qml
index a312d9124e..7ffd4d2be3 100644
--- a/modules/gui/qt/widgets/qml/VideoQualityLabel.qml
+++ b/modules/gui/qt/widgets/qml/VideoQualityLabels.qml
@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Copyright (C) 2019 VLC authors and VideoLAN
+ * Copyright (C) 2021 VLC authors and VideoLAN
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -20,19 +20,32 @@ import QtQuick.Controls 2.4
 
 import "qrc:///style/"
 
-Label {
-    id: label
-    color: "white"
-    bottomPadding: VLCStyle.margin_xxxsmall
-    topPadding: VLCStyle.margin_xxxsmall
-    leftPadding: VLCStyle.margin_xxxsmall
-    rightPadding: VLCStyle.margin_xxxsmall
-    font.pixelSize: VLCStyle.fontSize_normal
-    background: Rectangle {
-        anchors.fill: label
-        color: "black"
-        opacity: 0.5
-        radius: 3
+Row {
+    property alias labels: repeater.model
+
+    spacing: VLCStyle.margin_xxsmall
+
+    Repeater {
+        id: repeater
+
+        delegate: Label {
+            id: label
+
+            text: modelData
+            color: "white"
+            bottomPadding: VLCStyle.margin_xxxsmall
+            topPadding: VLCStyle.margin_xxxsmall
+            leftPadding: VLCStyle.margin_xxxsmall
+            rightPadding: VLCStyle.margin_xxxsmall
+            font.pixelSize: VLCStyle.fontSize_normal
+            background: Rectangle {
+                anchors.fill: label
+                color: "black"
+                opacity: 0.5
+                radius: 3
+            }
+
+            Accessible.ignored: true
+        }
     }
-    Accessible.ignored: true
 }
-- 
2.27.0



More information about the vlc-devel mailing list