[vlc-commits] [Git][videolan/vlc][master] 5 commits: qml: add `positionFlickableToContainItem()` to `Helpers.qml`

Steve Lhomme (@robUx4) gitlab at videolan.org
Fri Jun 6 07:29:24 UTC 2025



Steve Lhomme pushed to branch master at VideoLAN / VLC


Commits:
201cc35c by Fatih Uzunoglu at 2025-06-06T07:14:57+00:00
qml: add `positionFlickableToContainItem()` to `Helpers.qml`

- - - - -
22ccc575 by Fatih Uzunoglu at 2025-06-06T07:14:57+00:00
qml: fix `BrowseHomeDisplay` current index does not change on clicking grid delegate

- - - - -
aef9562c by Fatih Uzunoglu at 2025-06-06T07:14:57+00:00
qml: do not force active focus on clicking delegate in `BrowseDeviceView`

This is not idiomatic and causes issues.

- - - - -
6df8558a by Fatih Uzunoglu at 2025-06-06T07:14:57+00:00
qml: use `positionFlickableToContainItem()` in `BrowseHomeDisplay.qml`

- - - - -
9a17271e by Fatih Uzunoglu at 2025-06-06T07:14:57+00:00
qml: use `positionFlickableToContainItem()` in `HomePage.qml`

- - - - -


4 changed files:

- modules/gui/qt/medialibrary/qml/HomePage.qml
- modules/gui/qt/network/qml/BrowseDeviceView.qml
- modules/gui/qt/network/qml/BrowseHomeDisplay.qml
- modules/gui/qt/util/qml/Helpers.qml


Changes:

=====================================
modules/gui/qt/medialibrary/qml/HomePage.qml
=====================================
@@ -74,28 +74,6 @@ T.Page {
             forceActiveFocus(reason) // this should not be necessary normally, but when there is `setCurrentItemFocus()`, it seems the root item does not get focus
     }
 
-    function _centerFlickableOnRow(row) {
-        if (!row.activeFocus) return
-
-        let minY = mediaRows.y + row.y,
-            maxY = minY + row.rowHeight
-
-        // NOTE: Include the header in case of list view,
-        //       when it's the first item of the list view.
-        if (row.currentIndex === 0 || MainCtx.gridView)
-            maxY += row.getItemY(row.currentIndex)
-        else
-            minY += row.getItemY(row.currentIndex),
-            maxY += row.getItemY(row.currentIndex)
-
-        // TODO: Implement scrolling animation as in `ExpandGridView`.
-        if (maxY > flickable.contentY + flickable.height)
-            flickable.contentY = maxY - flickable.height
-        else if (minY < flickable.contentY)
-            flickable.contentY = minY
-    }
-
-
     contentItem: Flickable {
         id: flickable
 
@@ -182,15 +160,7 @@ T.Page {
             }
 
             onActiveFocusChanged: {
-                if (!activeFocus) return
-
-                let minY = coneNButtons.y,
-                    maxY = minY + coneNButtons.implicitHeight
-
-                if (maxY > flickable.contentY + flickable.height)
-                    flickable.contentY = maxY - flickable.height
-                else if (minY < flickable.contentY)
-                    flickable.contentY = minY
+                Helpers.positionFlickableToContainItem(flickable, this)
             }
         }
 
@@ -283,8 +253,20 @@ T.Page {
                     root.seeAllButtonClicked("continueWatching", reason)
                 }
 
-                onActiveFocusChanged: _centerFlickableOnRow(this)
-                onCurrentIndexChanged: _centerFlickableOnRow(this)
+                onActiveFocusChanged: {
+                    if (activeFocus) {
+                        const item = currentItem?.currentItem ?? currentItem?._getItem(currentIndex) // FIXME: `ExpandGridView` does not have `currentItem`.
+                        Helpers.positionFlickableToContainItem(flickable, item ?? this)
+                    }
+                }
+
+                onCurrentIndexChanged: {
+                    if (activeFocus) {
+                        const item = currentItem?.currentItem ?? currentItem?._getItem(currentIndex) // FIXME: `ExpandGridView` does not have `currentItem`.
+                        if (item)
+                            Helpers.positionFlickableToContainItem(flickable, item)
+                    }
+                }
             }
 
             MediaView {
@@ -350,8 +332,20 @@ T.Page {
                     root.seeAllButtonClicked("favorites", reason)
                 }
 
-                onActiveFocusChanged: _centerFlickableOnRow(this)
-                onCurrentIndexChanged: _centerFlickableOnRow(this)
+                onActiveFocusChanged: {
+                    if (activeFocus) {
+                        const item = currentItem?.currentItem ?? currentItem?._getItem(currentIndex) // FIXME: `ExpandGridView` does not have `currentItem`.
+                        Helpers.positionFlickableToContainItem(flickable, item ?? this)
+                    }
+                }
+
+                onCurrentIndexChanged: {
+                    if (activeFocus) {
+                        const item = currentItem?.currentItem ?? currentItem?._getItem(currentIndex) // FIXME: `ExpandGridView` does not have `currentItem`.
+                        if (item)
+                            Helpers.positionFlickableToContainItem(flickable, item)
+                    }
+                }
             }
 
             MediaView {
@@ -409,8 +403,20 @@ T.Page {
                     root.seeAllButtonClicked("newMedia", reason)
                 }
 
-                onActiveFocusChanged: _centerFlickableOnRow(this)
-                onCurrentIndexChanged: _centerFlickableOnRow(this)
+                onActiveFocusChanged: {
+                    if (activeFocus) {
+                        const item = currentItem?.currentItem ?? currentItem?._getItem(currentIndex) // FIXME: `ExpandGridView` does not have `currentItem`.
+                        Helpers.positionFlickableToContainItem(flickable, item ?? this)
+                    }
+                }
+
+                onCurrentIndexChanged: {
+                    if (activeFocus) {
+                        const item = currentItem?.currentItem ?? currentItem?._getItem(currentIndex) // FIXME: `ExpandGridView` does not have `currentItem`.
+                        if (item)
+                            Helpers.positionFlickableToContainItem(flickable, item)
+                    }
+                }
             }
         }
     }


=====================================
modules/gui/qt/network/qml/BrowseDeviceView.qml
=====================================
@@ -144,9 +144,7 @@ FocusScope {
     function onClicked(model, index, modifier) {
         modelSelect.updateSelection(modifier, model.currentIndex, index)
 
-        model.currentIndex = index
-
-        forceActiveFocus()
+        _currentView.currentIndex = index
     }
 
     function onDoubleClicked(model, index) {


=====================================
modules/gui/qt/network/qml/BrowseHomeDisplay.qml
=====================================
@@ -100,34 +100,6 @@ FocusScope {
             lanSection.setCurrentItemFocus(reason);
     }
 
-    function _centerFlickableOnItem(item) {
-        if (item.activeFocus === false)
-            return
-
-        let minY
-        let maxY
-
-        const index = item.currentIndex
-
-        // NOTE: We want to include the header when we're on the first row.
-        if ((MainCtx.gridView && index < item.nbItemPerRow) || index < 1) {
-            minY = item.y
-
-            maxY = minY + item.getItemY(index) + item.rowHeight
-        } else {
-            minY = item.y + item.getItemY(index)
-
-            maxY = minY + item.rowHeight
-        }
-
-        // TODO: We could implement a scrolling animation like in ExpandGridView.
-        if (maxY > flickable.contentY + flickable.height) {
-            flickable.contentY = maxY - flickable.height
-        } else if (minY < flickable.contentY) {
-            flickable.contentY = minY
-        }
-    }
-
     readonly property ColorContext colorContext: ColorContext {
         id: theme
         colorSet: ColorContext.View
@@ -304,7 +276,19 @@ FocusScope {
         onBrowse: (tree, reason) => root.browse(tree, reason)
         onSeeAll: (reason) => root.seeAllDevices(title, model.sd_source, reason)
 
-        onActiveFocusChanged: _centerFlickableOnItem(this)
-        onCurrentIndexChanged: _centerFlickableOnItem(this)
+        onActiveFocusChanged: {
+            if (activeFocus) {
+                const item = _currentView?.currentItem ?? _currentView?._getItem(currentIndex) // FIXME: `ExpandGridView` does not have `currentItem`.
+                Helpers.positionFlickableToContainItem(flickable, item ?? this)
+            }
+        }
+
+        onCurrentIndexChanged: {
+            if (activeFocus) {
+                const item = _currentView?.currentItem ?? _currentView?._getItem(currentIndex) // FIXME: `ExpandGridView` does not have `currentItem`.
+                if (item)
+                    Helpers.positionFlickableToContainItem(flickable, item)
+            }
+        }
     }
 }


=====================================
modules/gui/qt/util/qml/Helpers.qml
=====================================
@@ -137,4 +137,21 @@ QtObject {
         return !(((item.x < (area.x + area.width)) && ((item.x + item.width) > area.x)) &&
                  ((item.y < (area.y + area.height)) && ((item.y + item.height) > area.y)))
     }
+
+    // Similar to `ItemView::positionViewAtIndex()` with `ItemView.Contain`,
+    // but only the works in the y-axis for now.
+    // The behavior is undefined if the item is not a visual child of the
+    // content item. However, it is not required for the item to be a direct
+    // child of the content item.
+    function positionFlickableToContainItem(flickable: Flickable, item: Item) {
+        console.assert(flickable)
+        console.assert(item)
+        console.assert(item.parent)
+        const mappedRect = flickable.mapFromItem(item.parent, Qt.rect(item.x, item.y, item.width, item.height))
+        // Flickable does not fully contain the item:
+        if ((mappedRect.y < 0) || ((mappedRect.y + mappedRect.height) > flickable.height))
+            flickable.contentY = Math.min(Math.max(-flickable.topMargin,
+                                                   flickable.contentItem.mapFromItem(item.parent, item.x, item.y).y - Math.max(0, ((flickable.height - item.height) / 2))),
+                                          flickable.contentHeight - flickable.height + flickable.bottomMargin)
+    }
 }



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/413f7bd703353f689ed238b7ee77d46bbb0d081c...9a17271e123df1500f7dbc4e0e08b2eae7d8257a

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/413f7bd703353f689ed238b7ee77d46bbb0d081c...9a17271e123df1500f7dbc4e0e08b2eae7d8257a
You're receiving this email because of your account on code.videolan.org.


VideoLAN code repository instance


More information about the vlc-commits mailing list