Add clock to paused overlay

lazy_player/main_window.py

@@ -5,7 +5,7 @@ from datetime import datetime
 from pathlib import Path
 from typing import Any, cast
 
-from gi.repository import Gdk, GLib, Gtk, Pango
+from gi.repository import Gdk, GLib, GObject, Gtk, Pango
 
 from .file_model import FileItem, FileListModel, FileType
 from .thumbnailer import Thumbnailer
@@ -22,6 +22,10 @@ class MainWindow(Gtk.ApplicationWindow):
     overlay_label: Gtk.Label
     overlay_hide_time: float
     last_position_save: float
+    grid_segments: list[list[Gtk.Box]]
+    grid_overlay: Gtk.Grid
+    grid_clock: Gtk.Label
+    main_clock: Gtk.Label
 
     directory_history: list[Path]
     selection_history: dict[str, int]
@@ -82,15 +86,50 @@ class MainWindow(Gtk.ApplicationWindow):
         video_box.set_vexpand(True)
         video_box.set_hexpand(True)
 
+        # Create grid overlay with 3x3 boxes
+        self.grid_overlay = Gtk.Grid()
+        self.grid_overlay.set_hexpand(True)
+        self.grid_overlay.set_vexpand(True)
+        self.grid_overlay.set_name("grid-overlay")
+        self.grid_overlay.set_column_homogeneous(True)
+        self.grid_overlay.set_row_homogeneous(True)
+
+        # Store grid segments in a 3x3 array
+        self.grid_segments = [[Gtk.Box() for _ in range(3)] for _ in range(3)]
+
+        # Setup 3x3 grid of boxes
+        for row in range(3):
+            for col in range(3):
+                box = self.grid_segments[row][col]
+                box.set_name("grid-box")
+                box.set_hexpand(True)
+                box.set_vexpand(True)
+                self.grid_overlay.attach(box, col, row, 1, 1)
+
+        # Add clock to top-left grid box
+        self.grid_clock = Gtk.Label()
+        self.grid_clock.set_name("grid-clock")
+        self.grid_clock.set_halign(Gtk.Align.CENTER)
+        self.grid_clock.set_valign(Gtk.Align.START)
+        self.grid_clock.set_hexpand(True)
+        self.grid_clock.set_vexpand(True)
+        self.grid_clock.set_text(datetime.now().strftime("%H:%M"))
+
+        # Attach to top-left grid box
+        self.grid_segments[0][0].append(self.grid_clock)
+
         # Create an overlay container
         overlay = Gtk.Overlay()
         overlay.set_child(self.video_widget)
+        overlay.add_overlay(self.grid_overlay)
         overlay.add_overlay(self.overlay_label)
 
         video_box.append(overlay)
 
         # Setup video player
         self.video_player = VideoPlayer(self.video_widget)
+        self.video_player.connect("notify::is-playing", self._on_player_state_changed)
+        self.video_player.connect("notify::is-paused", self._on_player_state_changed)
 
         # Add both main menu and overlay to stack
         self.stack.add_named(main_box, "menu")
@@ -107,13 +146,12 @@ class MainWindow(Gtk.ApplicationWindow):
         left_box.set_valign(Gtk.Align.START)
         left_box.set_halign(Gtk.Align.FILL)
 
-        # Create digital clock
+        # Create main menu clock
-        self.clock_label = Gtk.Label()
+        self.main_clock = Gtk.Label()
-        self.clock_label.set_name("digital-clock")
+        self.main_clock.set_name("digital-clock")
-        self.clock_label.set_halign(Gtk.Align.CENTER)
+        self.main_clock.set_halign(Gtk.Align.CENTER)
-        self.clock_label.set_valign(Gtk.Align.CENTER)
+        self.main_clock.set_valign(Gtk.Align.CENTER)
-        self.clock_label.set_text(datetime.now().strftime("%H:%M"))
+        left_box.append(self.main_clock)
-        left_box.append(self.clock_label)
 
         # Create image widget for thumbnail
         self.thumbnail_image = Gtk.Picture()
@@ -455,10 +493,21 @@ class MainWindow(Gtk.ApplicationWindow):
         # Set absolute time when overlay should hide
         self.overlay_hide_time = self.now + timeout_seconds
 
+    def _on_player_state_changed(self, player: VideoPlayer, param: GObject.ParamSpec) -> None:
+        """Update grid visibility based on player state"""
+        is_playing = player.get_property("is-playing")
+        is_paused = player.get_property("is-paused")
+
+        # Show grid only when paused and playing
+        if self.grid_overlay:
+            self.grid_overlay.set_visible(is_playing and is_paused)
+
     def _on_tick(self, widget: Gtk.Widget, frame_clock: Gdk.FrameClock, data: Any) -> bool:
         current_time = frame_clock.get_frame_time() / 1_000_000
 
-        self.clock_label.set_text(datetime.now().strftime("%H:%M"))
+        current_time_str = datetime.now().strftime("%H:%M")
+        self.main_clock.set_text(current_time_str)
+        self.grid_clock.set_text(current_time_str)
 
         if current_time >= self.overlay_hide_time:
             self.overlay_label.set_visible(False)

lazy_player/style.css

@@ -38,9 +38,15 @@ listview > row {
   margin: 8px;
 }
 
-#digital-clock {
+#digital-clock,
+#grid-clock {
   color: white;
   font-size: 48px;
   font-family: monospace;
-  margin: 12px;
+  padding: 12px;
+}
+
+#grid-clock {
+  background-color: rgba(32, 32, 32, 0.5);
+  border-radius: 8px;
 }