Add clock to paused overlay

This commit is contained in:
Jan Hamal Dvořák 2025-03-11 14:13:20 +01:00
parent 30015c75c2
commit 0d2d628eef
2 changed files with 66 additions and 11 deletions

View file

@ -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
self.clock_label = Gtk.Label()
self.clock_label.set_name("digital-clock")
self.clock_label.set_halign(Gtk.Align.CENTER)
self.clock_label.set_valign(Gtk.Align.CENTER)
self.clock_label.set_text(datetime.now().strftime("%H:%M"))
left_box.append(self.clock_label)
# Create main menu clock
self.main_clock = Gtk.Label()
self.main_clock.set_name("digital-clock")
self.main_clock.set_halign(Gtk.Align.CENTER)
self.main_clock.set_valign(Gtk.Align.CENTER)
left_box.append(self.main_clock)
# 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)

View file

@ -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;
}