[gnome-music/wip/mschraal/gtk4-v2: 4/8] albumsview: Add AlbumCoverListItem + albumsview GridView

[Marinus Schraal <mschraal src gnome org>]

commit d73dcebcb63ad45f0d8f40f606cfb2f0be722c2f
Author: Marinus Schraal <mschraal gnome org>
Date:   Mon Apr 19 14:56:31 2021 +0200

    albumsview: Add AlbumCoverListItem + albumsview GridView

 data/org.gnome.Music.gresource.xml |   1 +
 data/ui/AlbumCoverListItem.ui      |  79 +++++++++++++++++++++++
 data/ui/AlbumsView.ui              |  37 ++++-------
 gnomemusic/artcache.py             |   1 +
 gnomemusic/corealbum.py            |   4 ++
 gnomemusic/views/albumsview.py     | 129 +++++++++++++++++++------------------
 6 files changed, 167 insertions(+), 84 deletions(-)
---
diff --git a/data/org.gnome.Music.gresource.xml b/data/org.gnome.Music.gresource.xml
index 4ef28690c..55b06072e 100644
--- a/data/org.gnome.Music.gresource.xml
+++ b/data/org.gnome.Music.gresource.xml
@@ -6,6 +6,7 @@
     <file>icons/initial-state.png</file>
     <file preprocess="xml-stripblanks">ui/AboutDialog.ui</file>
     <file preprocess="xml-stripblanks">ui/AlbumCover.ui</file>
+    <file preprocess="xml-stripblanks">ui/AlbumCoverListItem.ui</file>
     <file preprocess="xml-stripblanks">ui/AlbumWidget.ui</file>
     <file preprocess="xml-stripblanks">ui/AlbumsView.ui</file>
     <file preprocess="xml-stripblanks">ui/ArtistSearchTile.ui</file>
diff --git a/data/ui/AlbumCoverListItem.ui b/data/ui/AlbumCoverListItem.ui
new file mode 100644
index 000000000..89f4f5507
--- /dev/null
+++ b/data/ui/AlbumCoverListItem.ui
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk+" version="4.0"/>
+  <template class="GtkListItem">
+    <property name="child">
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="has_tooltip">True</property>
+        <property name="valign">start</property>
+        <property name="orientation">vertical</property>
+        <!-- <signal name="query-tooltip" handler="_on_tooltip_query"/> -->
+        <child>
+          <object class="GtkOverlay">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="margin-bottom">4</property>
+            <child>
+              <object class="ArtStack" id="_art_stack">
+                <binding name="coreobject">
+                  <lookup name="corealbum" type="CoreAlbum">
+                    <lookup name="item">GtkListItem</lookup>
+                  </lookup>
+                </binding>
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="vexpand">True</property>
+                <property name="valign">end</property>
+                <property name="halign">center</property>
+              </object>
+            </child>
+            <!-- <child type="overlay"> -->
+            <!--   <object class="GtkCheckButton" id="_check"> -->
+            <!--     <property name="can_focus">True</property> -->
+            <!--     <property name="receives_default">False</property> -->
+            <!--     <property name="halign">end</property> -->
+            <!--     <property name="valign">end</property> -->
+            <!--     <property name="draw_indicator">True</property> -->
+            <!--   </object> -->
+            <!-- </child> -->
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <binding name="label">
+              <lookup name="title" type="CoreAlbum">
+                <lookup name="item">GtkListItem</lookup>
+              </lookup>
+            </binding>
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="justify">center</property>
+            <property name="wrap">True</property>
+            <property name="ellipsize">middle</property>
+            <property name="max_width_chars">20</property>
+            <property name="lines">2</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel" id="_artist_label">
+            <binding name="label">
+              <lookup name="artist" type="CoreAlbum">
+                <lookup name="item">GtkListItem</lookup>
+              </lookup>
+            </binding>
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="ellipsize">middle</property>
+            <property name="max_width_chars">20</property>
+            <style>
+              <class name="albumcover-artist-label"/>
+              <class name="dim-label"/>
+            </style>
+          </object>
+        </child>
+      </object>
+    </property>
+  </template>
+</interface>
diff --git a/data/ui/AlbumsView.ui b/data/ui/AlbumsView.ui
index a27e51c3b..b79cbc7d3 100644
--- a/data/ui/AlbumsView.ui
+++ b/data/ui/AlbumsView.ui
@@ -7,32 +7,23 @@
       <object class="GtkScrolledWindow" id="_scrolled_window">
         <property name="visible">True</property>
         <child>
-          <object class="GtkFlowBox" id="_flowbox">
-            <property name="column_spacing">20</property>
-            <property name="halign">fill</property>
-            <property name="hexpand">True</property>
-            <property name="homogeneous">True</property>
-            <property name="margin-bottom">18</property>
-            <property name="margin-end">18</property>
-            <property name="margin-start">18</property>
-            <property name="margin-top">18</property>
-            <property name="max-children-per-line">20</property>
-            <property name="min-children-per-line">1</property>
-            <property name="row_spacing">12</property>
-            <property name="selection-mode">none</property>
-            <property name="valign">start</property>
-            <property name="visible">True</property>
-            <signal name="selected-children-changed" handler="_on_selected_children_changed" swapped="no"/>
+          <object class="GtkGridView" id="_gridview">
+            <property name="max-columns">20</property>
+            <!-- <property name="halign">fill</property> -->
+            <!-- <property name="hexpand">True</property> -->
+            <!-- <property name="valign">start</property> -->
+            <!-- <property name="visible">True</property> -->
+            <!-- <signal name="selected-children-changed" handler="_on_selected_children_changed" 
swapped="no"/> -->
             <style>
               <class name="content-view"/>
             </style>
-            <child>
-              <object class="GtkGestureLongPress" id="_flowbox_long_press">
-                <property name="propagation-phase">capture</property>
-                <signal name="begin" handler="_on_flowbox_press_begin" swapped="no"/>
-                <signal name="cancel" handler="_on_flowbox_press_cancel" swapped="no"/>
-              </object>
-            </child>
+            <!-- <child> -->
+            <!--   <object class="GtkGestureLongPress" id="_flowbox_long_press"> -->
+            <!--     <property name="propagation-phase">capture</property> -->
+            <!--     <signal name="begin" handler="_on_flowbox_press_begin" swapped="no"/> -->
+            <!--     <signal name="cancel" handler="_on_flowbox_press_cancel" swapped="no"/> -->
+            <!--   </object> -->
+            <!-- </child> -->
           </object>
         </child>
       </object>
diff --git a/gnomemusic/artcache.py b/gnomemusic/artcache.py
index 7b0032998..8ca1461fb 100644
--- a/gnomemusic/artcache.py
+++ b/gnomemusic/artcache.py
@@ -237,6 +237,7 @@ class ArtCache(GObject.GObject):
         # elif (isinstance(self._coreobject, CoreAlbum)
         #         or isinstance(self._coreobject, CoreSong)):
         #     surface = _make_icon_frame(surface, self._size, self._scale)
+
         else:
             paintable = CoverPaintable(self._size)
 
diff --git a/gnomemusic/corealbum.py b/gnomemusic/corealbum.py
index feebebe8e..f89f7a934 100644
--- a/gnomemusic/corealbum.py
+++ b/gnomemusic/corealbum.py
@@ -35,6 +35,8 @@ class CoreAlbum(GObject.GObject):
     """Exposes a Grl.Media with relevant data as properties
     """
 
+    __gtype_name__ = "CoreAlbum"
+
     artist = GObject.Property(type=str)
     composer = GObject.Property(type=str, default=None)
     duration = GObject.Property(type=int, default=0)
@@ -42,6 +44,7 @@ class CoreAlbum(GObject.GObject):
     title = GObject.Property(type=str)
     url = GObject.Property(type=str)
     year = GObject.Property(type=str, default="----")
+    corealbum = GObject.Property(type=object, default=None)
 
     def __init__(self, application, media):
         """Initiate the CoreAlbum object
@@ -51,6 +54,7 @@ class CoreAlbum(GObject.GObject):
         """
         super().__init__()
 
+        self.props.corealbum = self
         self._application = application
         self._coregrilo = application.props.coregrilo
         self._model = None
diff --git a/gnomemusic/views/albumsview.py b/gnomemusic/views/albumsview.py
index 75599881f..4b883092f 100644
--- a/gnomemusic/views/albumsview.py
+++ b/gnomemusic/views/albumsview.py
@@ -46,9 +46,9 @@ class AlbumsView(Gtk.Stack):
     title = GObject.Property(
         type=str, default=_("Albums"), flags=GObject.ParamFlags.READABLE)
 
-    _scrolled_window = Gtk.Template.Child()
-    _flowbox = Gtk.Template.Child()
-    _flowbox_long_press = Gtk.Template.Child()
+    # _scrolled_window = Gtk.Template.Child()
+    _gridview = Gtk.Template.Child()
+    # _flowbox_long_press = Gtk.Template.Child()
 
     def __init__(self, application):
         """Initialize AlbumsView
@@ -63,37 +63,44 @@ class AlbumsView(Gtk.Stack):
         self._window = application.props.window
         self._headerbar = self._window._headerbar
         self._adjustment_timeout_id = 0
-        self._viewport = self._scrolled_window.get_child()
+        # self._viewport = self._scrolled_window.get_child()
         self._widget_counter = 1
         self._ctrl_hold = False
 
-        model = self._application.props.coremodel.props.albums_sort
-        self._flowbox.bind_model(model, self._create_widget)
-        self._flowbox.set_hadjustment(self._scrolled_window.get_hadjustment())
-        self._flowbox.set_vadjustment(self._scrolled_window.get_vadjustment())
-        self._flowbox.connect("child-activated", self._on_child_activated)
+        list_item_factory = Gtk.BuilderListItemFactory(
+            resource="/org/gnome/Music/ui/AlbumCoverListItem.ui")
+        self._gridview.props.factory = list_item_factory
 
-        self.bind_property(
-            "selection-mode", self._window, "selection-mode",
-            GObject.BindingFlags.DEFAULT)
+        multi_select_model = Gtk.MultiSelection.new(
+            self._application.props.coremodel.props.albums_sort)
+        self._gridview.props.model = multi_select_model
 
-        self._window.connect(
-            "notify::selection-mode", self._on_selection_mode_changed)
+        # self._flowbox.bind_model(model, self._create_widget)
+        # self._flowbox.set_hadjustment(self._scrolled_window.get_hadjustment())
+        # self._flowbox.set_vadjustment(self._scrolled_window.get_vadjustment())
+        # self._flowbox.connect("child-activated", self._on_child_activated)
 
-        self._album_widget = AlbumWidget(self._application)
-        self._album_widget.bind_property(
-            "selection-mode", self, "selection-mode",
-            GObject.BindingFlags.BIDIRECTIONAL)
+        # self.bind_property(
+        #     "selection-mode", self._window, "selection-mode",
+        #     GObject.BindingFlags.DEFAULT)
+
+        # self._window.connect(
+        #     "notify::selection-mode", self._on_selection_mode_changed)
 
-        self.add_child(self._album_widget)
+        # self._album_widget = AlbumWidget(self._application)
+        # self._album_widget.bind_property(
+        #     "selection-mode", self, "selection-mode",
+        #     GObject.BindingFlags.BIDIRECTIONAL)
 
-        self.connect(
-            "notify::search-mode-active", self._on_search_mode_changed)
+        # self.add_child(self._album_widget)
 
-        self._scrolled_window.props.vadjustment.connect(
-            "value-changed", self._on_vadjustment_changed)
-        self._scrolled_window.props.vadjustment.connect(
-            "changed", self._on_vadjustment_changed)
+        # self.connect(
+        #     "notify::search-mode-active", self._on_search_mode_changed)
+
+        # self._scrolled_window.props.vadjustment.connect(
+        #     "value-changed", self._on_vadjustment_changed)
+        # self._scrolled_window.props.vadjustment.connect(
+        #     "changed", self._on_vadjustment_changed)
 
     def _on_vadjustment_changed(self, adjustment):
         if self._adjustment_timeout_id != 0:
@@ -207,42 +214,42 @@ class AlbumsView(Gtk.Stack):
         # self._headerbar.props.title = corealbum.props.title
         # self._headerbar.props.subtitle = corealbum.props.artist
 
-    @Gtk.Template.Callback()
-    def _on_flowbox_press_begin(self, gesture, sequence):
-        state = gesture.get_current_event_state()
-        if ((state
-             and state == Gdk.ModifierType.CONTROL_MASK)
-                or self.props.selection_mode is True):
-            self._flowbox.props.selection_mode = Gtk.SelectionMode.MULTIPLE
-            if state == Gdk.ModifierType.CONTROL_MASK:
-                self._ctrl_hold = True
-
-    @Gtk.Template.Callback()
-    def _on_flowbox_press_cancel(self, gesture, sequence):
-        self._flowbox.props.selection_mode = Gtk.SelectionMode.NONE
-
-    @Gtk.Template.Callback()
-    def _on_selected_children_changed(self, flowbox):
-        if self._flowbox.props.selection_mode == Gtk.SelectionMode.NONE:
-            return
-
-        if self.props.selection_mode is False:
-            self.props.selection_mode = True
-
-        rubberband_selection = len(self._flowbox.get_selected_children()) > 1
-        with self._application.props.coreselection.freeze_notify():
-            if (rubberband_selection
-                    and not self._ctrl_hold):
-                self.deselect_all()
-            for child in self._flowbox.get_selected_children():
-                if (self._ctrl_hold is True
-                        or not rubberband_selection):
-                    child.props.selected = not child.props.selected
-                else:
-                    child.props.selected = True
-
-        self._ctrl_hold = False
-        self._flowbox.props.selection_mode = Gtk.SelectionMode.NONE
+    # @Gtk.Template.Callback()
+    # def _on_flowbox_press_begin(self, gesture, sequence):
+    #     state = gesture.get_current_event_state()
+    #     if ((state
+    #          and state == Gdk.ModifierType.CONTROL_MASK)
+    #             or self.props.selection_mode is True):
+    #         self._flowbox.props.selection_mode = Gtk.SelectionMode.MULTIPLE
+    #         if state == Gdk.ModifierType.CONTROL_MASK:
+    #             self._ctrl_hold = True
+
+    # @Gtk.Template.Callback()
+    # def _on_flowbox_press_cancel(self, gesture, sequence):
+    #     self._flowbox.props.selection_mode = Gtk.SelectionMode.NONE
+
+    # @Gtk.Template.Callback()
+    # def _on_selected_children_changed(self, flowbox):
+    #     if self._flowbox.props.selection_mode == Gtk.SelectionMode.NONE:
+    #         return
+
+    #     if self.props.selection_mode is False:
+    #         self.props.selection_mode = True
+
+    #     rubberband_selection = len(self._flowbox.get_selected_children()) > 1
+    #     with self._application.props.coreselection.freeze_notify():
+    #         if (rubberband_selection
+    #                 and not self._ctrl_hold):
+    #             self.deselect_all()
+    #         for child in self._flowbox.get_selected_children():
+    #             if (self._ctrl_hold is True
+    #                     or not rubberband_selection):
+    #                 child.props.selected = not child.props.selected
+    #             else:
+    #                 child.props.selected = True
+
+    #     self._ctrl_hold = False
+    #     self._flowbox.props.selection_mode = Gtk.SelectionMode.NONE
 
     def _toggle_all_selection(self, selected):
         """Selects or deselects all items.