[vlc-devel] [PATCH 3/8] qml: move new indicator out of GridItem

[Prince Gupta]

to VideoGridItem, they are only used with this widget
Improves creation time of GridItem
---
 .../qml/VideoDisplayRecentVideos.qml          |  1 -
 .../gui/qt/medialibrary/qml/VideoGridItem.qml | 31 +++++++++-
 modules/gui/qt/widgets/qml/GridItem.qml       | 62 +++----------------
 3 files changed, 38 insertions(+), 56 deletions(-)

diff --git a/modules/gui/qt/medialibrary/qml/VideoDisplayRecentVideos.qml b/modules/gui/qt/medialibrary/qml/VideoDisplayRecentVideos.qml
index d25e6a0e95..0a90ac982b 100644
--- a/modules/gui/qt/medialibrary/qml/VideoDisplayRecentVideos.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoDisplayRecentVideos.qml
@@ -101,7 +101,6 @@ Widgets.NavigableFocusScope {
                 y: selectedBorderWidth
                 pictureWidth: VLCStyle.gridCover_video_width_large
                 pictureHeight: VLCStyle.gridCover_video_height_large
-                showNewIndicator: true
                 unselectedUnderlay: shadows.unselected
                 selectedUnderlay: shadows.selected
 
diff --git a/modules/gui/qt/medialibrary/qml/VideoGridItem.qml b/modules/gui/qt/medialibrary/qml/VideoGridItem.qml
index 56c857378b..adcfcc8a0c 100644
--- a/modules/gui/qt/medialibrary/qml/VideoGridItem.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoGridItem.qml
@@ -24,6 +24,11 @@ import "qrc:///util/Helpers.js" as Helpers
 import "qrc:///style/"
 
 Widgets.GridItem {
+    id: root
+
+    property bool showNewIndicator: true
+    property int newIndicatorMedian: root.highlighted ? VLCStyle.icon_small : VLCStyle.icon_xsmall
+
     image: model.thumbnail || VLCStyle.noArtCover
     title: model.title || i18n.qtr("Unknown title")
     subtitle: Helpers.msToString(model.duration) || ""
@@ -36,7 +41,6 @@ Widgets.GridItem {
     pictureHeight: VLCStyle.gridCover_video_height
     playCoverBorder.width: VLCStyle.gridCover_video_border
     titleMargin: VLCStyle.margin_xxsmall
-    showNewIndicator: true
 
     onPlayClicked: {
         if ( model.id !== undefined ) {
@@ -44,4 +48,29 @@ Widgets.GridItem {
             medialib.addAndPlay( model.id )
         }
     }
+    
+    Behavior on newIndicatorMedian {
+        NumberAnimation {
+            duration: 200
+            easing.type: Easing.InOutSine
+        }
+    }
+
+    Item {
+        clip: true
+        x: parent.width - width
+        y: 0
+        width: 2 * root.newIndicatorMedian
+        height: 2 * root.newIndicatorMedian
+        visible: root.showNewIndicator && model.progress <= 0
+
+        Rectangle {
+            x: parent.width - root.newIndicatorMedian
+            y: - root.newIndicatorMedian
+            width: 2 * root.newIndicatorMedian
+            height: 2 * root.newIndicatorMedian
+            color: VLCStyle.colors.accent
+            rotation: 45
+        }
+    }
 }
diff --git a/modules/gui/qt/widgets/qml/GridItem.qml b/modules/gui/qt/widgets/qml/GridItem.qml
index 78802553de..dc384946e2 100644
--- a/modules/gui/qt/widgets/qml/GridItem.qml
+++ b/modules/gui/qt/widgets/qml/GridItem.qml
@@ -43,7 +43,6 @@ FocusScope {
 
     property alias progress: picture.progress
     property alias labels: picture.labels
-    property bool showNewIndicator: false
     property real pictureWidth: VLCStyle.colWidth(1)
     property real pictureHeight: pictureWidth
     property int titleMargin: VLCStyle.margin_xsmall
@@ -67,7 +66,6 @@ FocusScope {
 
     readonly property int selectedBorderWidth: VLCStyle.gridItemSelectedBorder
 
-    property int _newIndicatorMedian: VLCStyle.margin_xsmall
     property int _modifiersOnLastPress: Qt.NoModifier
 
     state: highlighted ? "selected" : "unselected"
@@ -92,11 +90,6 @@ FocusScope {
                 playCoverOpacity: 0
                 playCoverVisible: false
             }
-
-            PropertyChanges {
-                target: root
-                _newIndicatorMedian: VLCStyle.margin_xsmall
-            }
         },
         State {
             name: "selected"
@@ -118,11 +111,6 @@ FocusScope {
                 playCoverOpacity: 1
                 playCoverVisible: true
             }
-
-            PropertyChanges {
-                target: root
-                _newIndicatorMedian: VLCStyle.margin_small
-            }
         }
     ]
 
@@ -138,19 +126,10 @@ FocusScope {
                     properties: "playCoverVisible,visible"
                 }
 
-                ParallelAnimation {
-                    NumberAnimation {
-                        properties: "opacity,playCoverOpacity"
-                        duration: 240
-                        easing.type: Easing.InSine
-                    }
-
-                    SmoothedAnimation {
-                        target: root
-                        property: "_newIndicatorMedian"
-                        duration: 240
-                        easing.type: Easing.InSine
-                    }
+                NumberAnimation {
+                    properties: "opacity,playCoverOpacity"
+                    duration: 240
+                    easing.type: Easing.InSine
                 }
 
                 PropertyAction {
@@ -170,19 +149,10 @@ FocusScope {
                     property: "visible"
                 }
 
-                ParallelAnimation {
-                    NumberAnimation {
-                        properties: "opacity,playCoverOpacity"
-                        duration: 200
-                        easing.type: Easing.OutSine
-                    }
-
-                    SmoothedAnimation {
-                        target: root
-                        duration: 200
-                        property: "_newIndicatorMedian"
-                        easing.type: Easing.OutSine
-                    }
+                NumberAnimation {
+                    properties: "opacity,playCoverOpacity"
+                    duration: 200
+                    easing.type: Easing.OutSine
                 }
 
                 PropertyAction {
@@ -277,22 +247,6 @@ FocusScope {
                 onPlayIconClicked: root.playClicked()
                 clip: true
                 radius: VLCStyle.gridCover_radius
-
-                /* new indicator (triangle at top-left of cover)*/
-                Rectangle {
-                    id: newIndicator
-
-                    // consider this Rectangle as a triangle, then following property is its median length
-                    property alias median: root._newIndicatorMedian
-
-                    x: parent.width - median
-                    y: - median
-                    width: 2 * median
-                    height: 2 * median
-                    color: VLCStyle.colors.accent
-                    rotation: 45
-                    visible: root.showNewIndicator && root.progress === 0
-                }
             }
 
             Widgets.ScrollingText {
-- 
2.27.0