started layer controls

libremsonic/ui/albums.py

@@ -9,7 +9,7 @@ class AlbumsPanel(Gtk.Box):
     """Defines the albums panel."""
 
     def __init__(self):
-        Gtk.Container.__init__(self)
+        Gtk.Box.__init__(self)
 
         albums = Gtk.Label('Albums')
 

libremsonic/ui/app.py

@@ -2,7 +2,7 @@ import os
 
 import gi
 gi.require_version('Gtk', '3.0')
-from gi.repository import Gio, Gtk, GLib
+from gi.repository import Gio, Gtk, GLib, Gdk
 
 from libremsonic.config import get_config, save_config
 
@@ -64,6 +64,14 @@ class LibremsonicApp(Gtk.Application):
             # Windows are associated with the application
             # when the last one is closed the application shuts down
             self.window = MainWindow(application=self, title="LibremSonic")
+            css_provider = Gtk.CssProvider()
+            css_provider.load_from_path(
+                os.path.join(os.path.dirname(__file__), 'app_styles.css'))
+
+            context = Gtk.StyleContext()
+            screen = Gdk.Screen.get_default()
+            context.add_provider_for_screen(screen, css_provider,
+                                            Gtk.STYLE_PROVIDER_PRIORITY_USER)
 
         self.window.show_all()
         self.window.present()

libremsonic/ui/app_styles.css

@@ -0,0 +1,4 @@
+/* Playback Controls */
+#volume-slider {
+  min-width: 120px;
+}

libremsonic/ui/main.py

@@ -3,6 +3,7 @@ gi.require_version('Gtk', '3.0')
 from gi.repository import Gio, Gtk
 
 from .albums import AlbumsPanel
+from .player_controls import PlayerControls
 from libremsonic.config import AppConfiguration
 
 
@@ -13,22 +14,26 @@ class MainWindow(Gtk.ApplicationWindow):
         super().__init__(*args, **kwargs)
         self.set_default_size(1024, 768)
 
-        artists = Gtk.Label('Artists')
+        self.panels = {
-        playlists = Gtk.Label('Playlists')
+            'Albums': AlbumsPanel(),
-        more = Gtk.Label('More')
+            'Artists': Gtk.Label('Artists'),
+            'Playlists': Gtk.Label('Playlists'),
+            'More': Gtk.Label('More'),
+        }
 
         # Create the stack
-        stack = self.create_stack(
+        stack = self.create_stack(**self.panels)
-            Albums=AlbumsPanel(),
-            Artists=artists,
-            Playlists=playlists,
-            More=more,
-        )
         stack.set_transition_type(Gtk.StackTransitionType.SLIDE_LEFT_RIGHT)
 
-        titlebar = self.create_headerbar(stack)
+        self.titlebar = self.create_headerbar(stack)
-        self.set_titlebar(titlebar)
+        self.set_titlebar(self.titlebar)
-        self.add(stack)
+
+        self.player_controls = PlayerControls()
+
+        flowbox = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
+        flowbox.pack_start(stack, True, True, 0)
+        flowbox.pack_start(self.player_controls, False, True, 0)
+        self.add(flowbox)
 
     def update(self, config: AppConfiguration):
         # Update the Connected to label on the popup menu.
@@ -39,6 +44,8 @@ class MainWindow(Gtk.ApplicationWindow):
             self.connected_to_label.set_markup(
                 f'<span style="italic">Not Connected to a Server</span>')
 
+        print(self.panels)
+
     def create_stack(self, **kwargs):
         stack = Gtk.Stack()
         for name, child in kwargs.items():

libremsonic/ui/player_controls.py

@@ -0,0 +1,47 @@
+import gi
+import sys
+
+gi.require_version('Gtk', '3.0')
+from gi.repository import Gio, Gtk, Gtk
+
+
+class PlayerControls(Gtk.Box):
+    """
+    Defines the player controls panel that appears at the bottom of the window.
+    """
+
+    def __init__(self):
+        Gtk.Box.__init__(self, orientation=Gtk.Orientation.HORIZONTAL)
+
+        self.song_display = self.create_song_display()
+        self.playback_controls = self.create_playback_controls()
+        self.up_next_volume = self.create_up_next_volume()
+
+        # TODO this sucks because we can't use GtkCenterBox, so we nee to
+        # figure out a different way to make the playback controls centered
+        # even if the song_display and up_next_volume are not the same size.
+        self.pack_start(self.song_display, False, True, 5)
+        self.pack_start(self.playback_controls, True, True, 5)
+        self.pack_end(self.up_next_volume, False, True, 5)
+
+    def create_song_display(self):
+        return Gtk.Label('The title and album art here')
+
+    def create_playback_controls(self):
+        return Gtk.Label('Buttons and scubber')
+
+    def create_up_next_volume(self):
+        box = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL)
+        # TODO use an icon and connect it to something.
+        up_next_button = Gtk.Button('Up Next')
+        box.pack_start(up_next_button, False, True, 5)
+
+        # TODO volume indicator icon
+
+        # Volume slider
+        volume_slider = Gtk.Scale.new_with_range(
+            orientation=Gtk.Orientation.HORIZONTAL, min=0, max=100, step=5)
+        volume_slider.set_value_pos(Gtk.PositionType.RIGHT)
+        volume_slider.set_name('volume-slider')
+        box.pack_start(volume_slider, True, True, 0)
+        return box