qml: fix SortControl background effect rendering

Signed-off-by: Pierre Lamot <pierre@videolabs.io>

modules/gui/qt/widgets/qml/SortControl.qml

@@ -104,8 +104,6 @@ Widgets.NavigableFocusScope {
         padding: 1
 
         onOpened: {
-            updateBgRect()
-
             button.KeyNavigation.down = list
             button.highlighted = true
 
@@ -228,58 +226,60 @@ Widgets.NavigableFocusScope {
             }
         }
 
-        function updateBgRect() {
-            glassEffect.popupGlobalPos = g_root.mapFromItem(root, popup.x, popup.y)
-        }
-
         background: Rectangle {
             border.width: VLCStyle.dp(1)
             border.color: colors.accent
 
-            Widgets.FrostedGlassEffect {
-                id: glassEffect
-                source: g_root
+            Loader {
+                id: effectLoader
 
                 anchors.fill: parent
                 anchors.margins: VLCStyle.dp(1)
 
-                property point popupGlobalPos
-                sourceRect: Qt.rect(popupGlobalPos.x, popupGlobalPos.y, glassEffect.width, glassEffect.height)
+                asynchronous: true
 
-                tint: colors.bg
-                tintStrength: 0.3
-            }
-        }
+                Component {
+                    id: frostedGlassEffect
 
-        Connections {
-            target: g_root
+                    Widgets.FrostedGlassEffect {
+                        source: g_root
 
-            enabled: popup.visible
+                        // since Popup is not an Item, we can not directly map its position
+                        // to the source item. Instead, we can use root because popup's
+                        // position is relative to its position.
+                        // This method unfortunately causes issues when source item is resized.
+                        // But in that case, we reload the effectLoader to redraw the effect.
+                        property point popupMappedPos: g_root.mapFromItem(root, popup.x, popup.y)
+                        sourceRect: Qt.rect(popupMappedPos.x, popupMappedPos.y, width, height)
 
-            onWidthChanged: {
-                popup.updateBgRect()
-            }
+                        tint: colors.bg
+                        tintStrength: 0.3
+                    }
+                }
 
-            onHeightChanged: {
-                popup.updateBgRect()
+                sourceComponent: frostedGlassEffect
+
+                function reload() {
+                    if (status != Loader.Ready)
+                        return
+
+                    sourceComponent = undefined
+                    sourceComponent = frostedGlassEffect
+                }
             }
         }
 
         Connections {
-            target: mainInterface
+            target: g_root
 
             enabled: popup.visible
 
-            onIntfScaleFactorChanged: {
-                popup.updateBgRect()
+            onWidthChanged: {
+                effectLoader.reload()
             }
-        }
-
-        Connections {
-            target: playlistColumn
 
-            onWidthChanged: {
-                popup.updateBgRect()
+            onHeightChanged: {
+                effectLoader.reload()
             }
         }
     }