Port from GTK3 to GTK4

8 files changed, 202 insertions, 178 deletions

diff --git a/main/src/ui/call_window/audio_settings_popover.vala b/main/src/ui/call_window/audio_settings_popover.vala
index f7e490cd..f5af90ff 100644
--- a/main/src/ui/call_window/audio_settings_popover.vala
+++ b/main/src/ui/call_window/audio_settings_popover.vala
@@ -14,11 +14,11 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
     private HashMap<ListBoxRow, Plugins.MediaDevice> row_speaker_device = new HashMap<ListBoxRow, Plugins.MediaDevice>();
 
     public AudioSettingsPopover() {
-        Box box = new Box(Orientation.VERTICAL, 15) { margin=18, visible=true };
-        box.add(create_microphone_box());
-        box.add(create_speaker_box());
+        Box box = new Box(Orientation.VERTICAL, 15) { visible=true };
+        box.append(create_microphone_box());
+        box.append(create_speaker_box());
 
-        this.add(box);
+        this.set_child(box);
     }
 
     private Widget create_microphone_box() {
@@ -26,18 +26,18 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
         Gee.List<Plugins.MediaDevice> devices = call_plugin.get_devices("audio", false);
 
         Box micro_box = new Box(Orientation.VERTICAL, 10) { visible=true };
-        micro_box.add(new Label("<b>" + _("Microphones") + "</b>") { use_markup=true, xalign=0, visible=true, can_focus=true /* grab initial focus*/ });
+        micro_box.append(new Label("<b>" + _("Microphones") + "</b>") { use_markup=true, xalign=0, visible=true, can_focus=true /* grab initial focus*/ });
 
         if (devices.size == 0) {
-            micro_box.add(new Label(_("No microphone found.")));
+            micro_box.append(new Label(_("No microphone found.")));
         } else {
             ListBox micro_list_box = new ListBox() { activate_on_single_click=true, selection_mode=SelectionMode.SINGLE, visible=true };
             micro_list_box.set_header_func(listbox_header_func);
             Frame micro_frame = new Frame(null) { visible=true };
-            micro_frame.add(micro_list_box);
+            micro_frame.set_child(micro_list_box);
             foreach (Plugins.MediaDevice device in devices) {
                 Label display_name_label = new Label(device.display_name) { xalign=0, visible=true };
-                Image image = new Image.from_icon_name("object-select-symbolic", IconSize.BUTTON) { visible=true };
+                Image image = new Image.from_icon_name("object-select-symbolic") { visible=true };
                 if (current_microphone_device == null || current_microphone_device.id != device.id) {
                     image.opacity = 0;
                 }
@@ -48,21 +48,21 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
                         image.opacity = 1;
                     }
                 });
-                Box device_box = new Box(Orientation.HORIZONTAL, 0) { spacing=7, margin=7, visible=true };
-                device_box.add(image);
+                Box device_box = new Box(Orientation.HORIZONTAL, 0) { spacing=7, visible=true };
+                device_box.append(image);
                 Box label_box = new Box(Orientation.VERTICAL, 0) { visible = true };
-                label_box.add(display_name_label);
+                label_box.append(display_name_label);
                 if (device.detail_name != null) {
                     Label detail_name_label = new Label(device.detail_name) { xalign=0, visible=true };
                     detail_name_label.get_style_context().add_class("dim-label");
                     detail_name_label.attributes = new Pango.AttrList();
                     detail_name_label.attributes.insert(Pango.attr_scale_new(0.8));
-                    label_box.add(detail_name_label);
+                    label_box.append(detail_name_label);
                 }
-                device_box.add(label_box);
+                device_box.append(label_box);
                 ListBoxRow list_box_row = new ListBoxRow() { visible=true };
-                list_box_row.add(device_box);
-                micro_list_box.add(list_box_row);
+                list_box_row.set_child(device_box);
+                micro_list_box.append(list_box_row);
 
                 row_microphone_device[list_box_row] = device;
             }
@@ -71,7 +71,7 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
                 microphone_selected(row_microphone_device[row]);
                 micro_list_box.unselect_row(row);
             });
-            micro_box.add(micro_frame);
+            micro_box.append(micro_frame);
         }
 
         return micro_box;
@@ -82,10 +82,10 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
         Gee.List<Plugins.MediaDevice> devices = call_plugin.get_devices("audio", true);
 
         Box speaker_box = new Box(Orientation.VERTICAL, 10) { visible=true };
-        speaker_box.add(new Label("<b>" + _("Speakers") +"</b>") { use_markup=true, xalign=0, visible=true });
+        speaker_box.append(new Label("<b>" + _("Speakers") +"</b>") { use_markup=true, xalign=0, visible=true });
 
         if (devices.size == 0) {
-            speaker_box.add(new Label(_("No speaker found.")));
+            speaker_box.append(new Label(_("No speaker found.")));
         } else {
             ListBox speaker_list_box = new ListBox() { activate_on_single_click=true, selection_mode=SelectionMode.SINGLE, visible=true };
             speaker_list_box.set_header_func(listbox_header_func);
@@ -93,10 +93,10 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
 
             });
             Frame speaker_frame = new Frame(null) { visible=true };
-            speaker_frame.add(speaker_list_box);
+            speaker_frame.set_child(speaker_list_box);
             foreach (Plugins.MediaDevice device in devices) {
                 Label display_name_label = new Label(device.display_name) { xalign=0, visible=true };
-                Image image = new Image.from_icon_name("object-select-symbolic", IconSize.BUTTON) { visible=true };
+                Image image = new Image.from_icon_name("object-select-symbolic") { visible=true };
                 if (current_speaker_device == null || current_speaker_device.id != device.id) {
                     image.opacity = 0;
                 }
@@ -107,21 +107,21 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
                         image.opacity = 1;
                     }
                 });
-                Box device_box = new Box(Orientation.HORIZONTAL, 0) { spacing=7, margin=7, visible=true };
-                device_box.add(image);
+                Box device_box = new Box(Orientation.HORIZONTAL, 0) { spacing=7, visible=true };
+                device_box.append(image);
                 Box label_box = new Box(Orientation.VERTICAL, 0) { visible = true };
-                label_box.add(display_name_label);
+                label_box.append(display_name_label);
                 if (device.detail_name != null) {
                     Label detail_name_label = new Label(device.detail_name) { xalign=0, visible=true };
                     detail_name_label.get_style_context().add_class("dim-label");
                     detail_name_label.attributes = new Pango.AttrList();
                     detail_name_label.attributes.insert(Pango.attr_scale_new(0.8));
-                    label_box.add(detail_name_label);
+                    label_box.append(detail_name_label);
                 }
-                device_box.add(label_box);
+                device_box.append(label_box);
                 ListBoxRow list_box_row = new ListBoxRow() { visible=true };
-                list_box_row.add(device_box);
-                speaker_list_box.add(list_box_row);
+                list_box_row.set_child(device_box);
+                speaker_list_box.append(list_box_row);
 
                 row_speaker_device[list_box_row] = device;
             }
@@ -130,7 +130,7 @@ public class Dino.Ui.AudioSettingsPopover : Gtk.Popover {
                 speaker_selected(row_speaker_device[row]);
                 speaker_list_box.unselect_row(row);
             });
-            speaker_box.add(speaker_frame);
+            speaker_box.append(speaker_frame);
         }
 
         return speaker_box;
diff --git a/main/src/ui/call_window/call_bottom_bar.vala b/main/src/ui/call_window/call_bottom_bar.vala
index b3fa2093..ddc196f2 100644
--- a/main/src/ui/call_window/call_bottom_bar.vala
+++ b/main/src/ui/call_window/call_bottom_bar.vala
@@ -9,63 +9,58 @@ public class Dino.Ui.CallBottomBar : Gtk.Box {
     public bool audio_enabled { get; set; }
     public bool video_enabled { get; set; }
 
-    public static IconSize ICON_SIZE_MEDIADEVICE_BUTTON = Gtk.icon_size_register("im.dino.Dino.CALL_MEDIADEVICE_BUTTON", 10, 10);
-
     public string counterpart_display_name { get; set; }
 
     private Button audio_button = new Button() { height_request=45, width_request=45, halign=Align.START, valign=Align.START, visible=true };
     private Overlay audio_button_overlay = new Overlay() { visible=true };
-    private Image audio_image = new Image() { visible=true };
-    private MenuButton audio_settings_button = new MenuButton() { halign=Align.END, valign=Align.END };
+    private Image audio_image = new Image() { pixel_size=22 };
+    private MenuButton audio_settings_button = new MenuButton() { icon_name="go-up-symbolic", halign=Align.END, valign=Align.END };
     public AudioSettingsPopover? audio_settings_popover;
 
     private Button video_button = new Button() { height_request=45, width_request=45, halign=Align.START, valign=Align.START, visible=true };
     private Overlay video_button_overlay = new Overlay() { visible=true };
-    private Image video_image = new Image() { visible=true };
-    private MenuButton video_settings_button = new MenuButton() { halign=Align.END, valign=Align.END };
+    private Image video_image = new Image() { pixel_size=22 };
+    private MenuButton video_settings_button = new MenuButton() { icon_name="go-up-symbolic", halign=Align.END, valign=Align.END };
     public VideoSettingsPopover? video_settings_popover;
 
-    private Label label = new Label("") { margin=20, halign=Align.CENTER, valign=Align.CENTER, wrap=true, wrap_mode=Pango.WrapMode.WORD_CHAR, hexpand=true, visible=true };
+    private Label label = new Label("") { halign=Align.CENTER, valign=Align.CENTER, wrap=true, wrap_mode=Pango.WrapMode.WORD_CHAR, hexpand=true, visible=true };
     private Stack stack = new Stack() { visible=true };
 
     public CallBottomBar() {
         Object(orientation:Orientation.HORIZONTAL, spacing:0);
 
-        Box main_buttons = new Box(Orientation.HORIZONTAL, 20) { margin_start=40, margin_end=40, margin=20, halign=Align.CENTER, hexpand=true, visible=true };
+        Box main_buttons = new Box(Orientation.HORIZONTAL, 20) { margin_start=40, margin_end=40, margin_bottom=20, margin_top=20, halign=Align.CENTER, hexpand=true, visible=true };
 
-        audio_button.add(audio_image);
+        audio_button.set_child(audio_image);
         audio_button.get_style_context().add_class("call-button");
         audio_button.clicked.connect(() => { audio_enabled = !audio_enabled; });
         audio_button.margin_end = audio_button.margin_bottom = 5; // space for the small settings button
-        audio_button_overlay.add(audio_button);
+        audio_button_overlay.set_child(audio_button);
         audio_button_overlay.add_overlay(audio_settings_button);
-        audio_settings_button.set_image(new Image.from_icon_name("go-up-symbolic", ICON_SIZE_MEDIADEVICE_BUTTON) { visible=true });
         audio_settings_button.get_style_context().add_class("call-mediadevice-settings-button");
-        audio_settings_button.use_popover = true;
-        main_buttons.add(audio_button_overlay);
+        main_buttons.append(audio_button_overlay);
 
-        video_button.add(video_image);
+        video_button.set_child(video_image);
         video_button.get_style_context().add_class("call-button");
         video_button.clicked.connect(() => { video_enabled = !video_enabled; });
         video_button.margin_end = video_button.margin_bottom = 5;
-        video_button_overlay.add(video_button);
+        video_button_overlay.set_child(video_button);
         video_button_overlay.add_overlay(video_settings_button);
-        video_settings_button.set_image(new Image.from_icon_name("go-up-symbolic", ICON_SIZE_MEDIADEVICE_BUTTON) { visible=true });
         video_settings_button.get_style_context().add_class("call-mediadevice-settings-button");
-        video_settings_button.use_popover = true;
-        main_buttons.add(video_button_overlay);
+        main_buttons.append(video_button_overlay);
 
-        Button button_hang = new Button.from_icon_name("dino-phone-hangup-symbolic", IconSize.LARGE_TOOLBAR) { height_request=45, width_request=45, halign=Align.START, valign=Align.START, visible=true };
+        Button button_hang = new Button() { height_request=45, width_request=45, halign=Align.START, valign=Align.START, visible=true };
+        button_hang.set_child(new Image() { icon_name="dino-phone-hangup-symbolic", pixel_size=22 });
         button_hang.get_style_context().add_class("call-button");
         button_hang.get_style_context().add_class("destructive-action");
         button_hang.clicked.connect(() => hang_up());
-        main_buttons.add(button_hang);
+        main_buttons.append(button_hang);
 
         label.get_style_context().add_class("text-no-controls");
 
         stack.add_named(main_buttons, "control-buttons");
         stack.add_named(label, "label");
-        this.add(stack);
+        this.append(stack);
 
         this.notify["audio-enabled"].connect(on_audio_enabled_changed);
         this.notify["video-enabled"].connect(on_video_enabled_changed);
@@ -85,18 +80,15 @@ public class Dino.Ui.CallBottomBar : Gtk.Box {
         if (!show) return null;
 
         audio_settings_popover = new AudioSettingsPopover();
-
         audio_settings_button.popover = audio_settings_popover;
-
-        audio_settings_popover.set_relative_to(audio_settings_button);
-        audio_settings_popover.microphone_selected.connect(() => { audio_settings_button.active = false; });
-        audio_settings_popover.speaker_selected.connect(() => { audio_settings_button.active = false; });
+        audio_settings_popover.microphone_selected.connect(() => { audio_settings_button.popdown(); });
+        audio_settings_popover.speaker_selected.connect(() => { audio_settings_button.popdown(); });
 
         return audio_settings_popover;
     }
 
     public void show_audio_device_error() {
-        audio_settings_button.set_image(new Image.from_icon_name("dialog-warning-symbolic", IconSize.BUTTON) { visible=true });
+        audio_settings_button.set_icon_name("dialog-warning-symbolic");
         Util.force_error_color(audio_settings_button);
     }
 
@@ -106,28 +98,24 @@ public class Dino.Ui.CallBottomBar : Gtk.Box {
         if (!show) return null;
 
         video_settings_popover = new VideoSettingsPopover();
-
-
         video_settings_button.popover = video_settings_popover;
-
-        video_settings_popover.set_relative_to(video_settings_button);
-        video_settings_popover.camera_selected.connect(() => { video_settings_button.active = false; });
+        video_settings_popover.camera_selected.connect(() => { video_settings_button.popdown(); });
 
         return video_settings_popover;
     }
 
     public void show_video_device_error() {
-        video_settings_button.set_image(new Image.from_icon_name("dialog-warning-symbolic", IconSize.BUTTON) { visible=true });
+        video_settings_button.set_icon_name("dialog-warning-symbolic");
         Util.force_error_color(video_settings_button);
     }
 
     public void on_audio_enabled_changed() {
         if (audio_enabled) {
-            audio_image.set_from_icon_name("dino-microphone-symbolic", IconSize.LARGE_TOOLBAR);
+            audio_image.icon_name = "dino-microphone-symbolic";
             audio_button.get_style_context().add_class("white-button");
             audio_button.get_style_context().remove_class("transparent-white-button");
         } else {
-            audio_image.set_from_icon_name("dino-microphone-off-symbolic", IconSize.LARGE_TOOLBAR);
+            audio_image.icon_name = "dino-microphone-off-symbolic";
             audio_button.get_style_context().remove_class("white-button");
             audio_button.get_style_context().add_class("transparent-white-button");
         }
@@ -135,12 +123,12 @@ public class Dino.Ui.CallBottomBar : Gtk.Box {
 
     public void on_video_enabled_changed() {
         if (video_enabled) {
-            video_image.set_from_icon_name("dino-video-symbolic", IconSize.LARGE_TOOLBAR);
+            video_image.icon_name = "dino-video-symbolic";
             video_button.get_style_context().add_class("white-button");
             video_button.get_style_context().remove_class("transparent-white-button");
 
         } else {
-            video_image.set_from_icon_name("dino-video-off-symbolic", IconSize.LARGE_TOOLBAR);
+            video_image.icon_name = "dino-video-off-symbolic";
             video_button.get_style_context().remove_class("white-button");
             video_button.get_style_context().add_class("transparent-white-button");
         }
@@ -152,6 +140,6 @@ public class Dino.Ui.CallBottomBar : Gtk.Box {
     }
 
     public bool is_menu_active() {
-        return video_settings_button.active || audio_settings_button.active;
+        return video_settings_button.popover.visible || audio_settings_button.popover.visible; // TODO gtk4 does this work? check for null?
     }
 }
\ No newline at end of file
diff --git a/main/src/ui/call_window/call_connection_details_window.vala b/main/src/ui/call_window/call_connection_details_window.vala
index 1d5265c9..0905908c 100644
--- a/main/src/ui/call_window/call_connection_details_window.vala
+++ b/main/src/ui/call_window/call_connection_details_window.vala
@@ -4,16 +4,16 @@ namespace Dino.Ui {
 
     public class CallConnectionDetailsWindow : Gtk.Window {
 
-        public Box box = new Box(Orientation.VERTICAL, 15) { margin=10, halign=Align.CENTER, valign=Align.CENTER, visible=true };
+        public Box box = new Box(Orientation.VERTICAL, 15) { halign=Align.CENTER, valign=Align.CENTER, visible=true };
 
         private bool video_added = false;
         private CallContentDetails audio_details = new CallContentDetails("Audio") { visible=true };
         private CallContentDetails video_details = new CallContentDetails("Video");
 
         public CallConnectionDetailsWindow() {
-            box.add(audio_details);
-            box.add(video_details);
-            add(box);
+            box.append(audio_details);
+            box.append(video_details);
+            set_child(box);
         }
 
         public void update_content(PeerInfo peer_info) {
diff --git a/main/src/ui/call_window/call_encryption_button.vala b/main/src/ui/call_window/call_encryption_button.vala
index a7081954..095db2b4 100644
--- a/main/src/ui/call_window/call_encryption_button.vala
+++ b/main/src/ui/call_window/call_encryption_button.vala
@@ -2,61 +2,63 @@ using Dino.Entities;
 using Gtk;
 using Pango;
 
-public class Dino.Ui.CallEncryptionButton : MenuButton {
+public class Dino.Ui.CallEncryptionButtonController {
 
-    private Image encryption_image = new Image.from_icon_name("", IconSize.BUTTON) { visible=true };
     private bool has_been_set = false;
     public bool controls_active { get; set; default=false; }
 
-    public CallEncryptionButton() {
-        this.opacity = 0;
-        add(encryption_image);
-        this.set_popover(popover);
+    public MenuButton button;
 
-        this.notify["controls-active"].connect(update_opacity);
+    public CallEncryptionButtonController(MenuButton button) {
+        this.button = button;
+
+        button.opacity = 0;
+//        button.set_popover(popover);
+
+        button.notify["controls-active"].connect(update_opacity);
     }
 
     public void set_icon(bool encrypted, string? icon_name) {
         if (encrypted) {
-            encryption_image.set_from_icon_name(icon_name ?? "changes-prevent-symbolic", IconSize.BUTTON);
-            get_style_context().remove_class("unencrypted");
+            button.icon_name = icon_name ?? "changes-prevent-symbolic";
+            button.get_style_context().remove_class("unencrypted");
         } else {
-            encryption_image.set_from_icon_name(icon_name ?? "changes-allow-symbolic", IconSize.BUTTON);
-            get_style_context().add_class("unencrypted");
+            button.icon_name = icon_name ?? "changes-allow-symbolic";
+            button.get_style_context().add_class("unencrypted");
         }
         has_been_set = true;
         update_opacity();
     }
 
     public void set_info(string? title, bool show_keys, Xmpp.Xep.Jingle.ContentEncryption? audio_encryption, Xmpp.Xep.Jingle.ContentEncryption? video_encryption) {
-        Popover popover = new Popover(this);
-        this.set_popover(popover);
+        Popover popover = new Popover();
+        button.set_popover(popover);
 
         if (audio_encryption == null) {
-            popover.add(new Label("This call is unencrypted.") { margin=10, visible=true } );
+            popover.set_child(new Label("This call is unencrypted.") { visible=true } );
             return;
         }
         if (title != null && !show_keys) {
-            popover.add(new Label(title) { use_markup=true, margin=10, visible=true } );
+            popover.set_child(new Label(title) { use_markup=true, visible=true } );
             return;
         }
 
-        Box box = new Box(Orientation.VERTICAL, 10) { margin=10, visible=true };
-        box.add(new Label("<b>%s</b>".printf(title ?? "This call is end-to-end encrypted.")) { use_markup=true, xalign=0, visible=true });
+        Box box = new Box(Orientation.VERTICAL, 10) { visible=true };
+        box.append(new Label("<b>%s</b>".printf(title ?? "This call is end-to-end encrypted.")) { use_markup=true, xalign=0, visible=true });
 
         if (video_encryption == null) {
-            box.add(create_media_encryption_grid(audio_encryption));
+            box.append(create_media_encryption_grid(audio_encryption));
         } else {
-            box.add(new Label("<b>Audio</b>") { use_markup=true, xalign=0, visible=true });
-            box.add(create_media_encryption_grid(audio_encryption));
-            box.add(new Label("<b>Video</b>") { use_markup=true, xalign=0, visible=true });
-            box.add(create_media_encryption_grid(video_encryption));
+            box.append(new Label("<b>Audio</b>") { use_markup=true, xalign=0, visible=true });
+            box.append(create_media_encryption_grid(audio_encryption));
+            box.append(new Label("<b>Video</b>") { use_markup=true, xalign=0, visible=true });
+            box.append(create_media_encryption_grid(video_encryption));
         }
-        popover.add(box);
+        popover.set_child(box);
     }
 
     public void update_opacity() {
-        this.opacity = controls_active && has_been_set ? 1 : 0;
+        button.opacity = controls_active && has_been_set ? 1 : 0;
     }
 
     private Grid create_media_encryption_grid(Xmpp.Xep.Jingle.ContentEncryption? encryption) {
diff --git a/main/src/ui/call_window/call_window.vala b/main/src/ui/call_window/call_window.vala
index ab969597..5facd574 100644
--- a/main/src/ui/call_window/call_window.vala
+++ b/main/src/ui/call_window/call_window.vala
@@ -15,13 +15,15 @@ namespace Dino.Ui {
         public Grid grid = new Grid() { visible=true };
         public CallBottomBar bottom_bar = new CallBottomBar() { visible=true };
         public Revealer bottom_bar_revealer = new Revealer() { valign=Align.END, transition_type=RevealerTransitionType.CROSSFADE, transition_duration=200, visible=true };
-        public HeaderBar header_bar = new HeaderBar() { valign=Align.START, halign=Align.END, show_close_button=true, visible=true, opacity=0.0 };
+        public HeaderBar header_bar = new HeaderBar() { valign=Align.START, halign=Align.END, show_title_buttons=true, visible=true, opacity=0.0 };
         public Revealer header_bar_revealer = new Revealer() { halign=Align.END, valign=Align.START, transition_type=RevealerTransitionType.SLIDE_LEFT, transition_duration=200, visible=true, reveal_child=false };
         public Box own_video_box = new Box(Orientation.HORIZONTAL, 0) { halign=Align.END, valign=Align.END, visible=true };
         private Widget? own_video = null;
         private HashMap<string, ParticipantWidget> participant_widgets = new HashMap<string, ParticipantWidget>();
         private ArrayList<string> participants = new ArrayList<string>();
 
+        private EventControllerMotion this_motion_events = new EventControllerMotion();
+
         private int own_video_width = 150;
         private int own_video_height = 100;
 
@@ -31,32 +33,36 @@ namespace Dino.Ui {
 
         construct {
             header_bar.get_style_context().add_class("call-header-bar");
-            header_bar.custom_title = new Box(Orientation.VERTICAL, 0);
-            header_bar.spacing = 0;
-            header_bar_revealer.add(header_bar);
-            bottom_bar_revealer.add(bottom_bar);
+            header_bar.title_widget = new Box(Orientation.VERTICAL, 0);
+//            header_bar.spacing = 0;
+            header_bar_revealer.set_child(header_bar);
+            bottom_bar_revealer.set_child(bottom_bar);
             own_video_box.get_style_context().add_class("own-video");
 
             this.get_style_context().add_class("dino-call-window");
 
-            overlay.add(grid);
+            overlay.set_child(grid);
             overlay.add_overlay(own_video_box);
             overlay.add_overlay(bottom_bar_revealer);
             overlay.add_overlay(header_bar_revealer);
             overlay.get_child_position.connect(on_get_child_position);
 
-            add(overlay);
+            set_child(overlay);
         }
 
         public CallWindow() {
             this.bind_property("controls-active", bottom_bar_revealer, "reveal-child", BindingFlags.SYNC_CREATE);
 
-            this.motion_notify_event.connect(reveal_control_elements);
-            this.enter_notify_event.connect(reveal_control_elements);
-            this.leave_notify_event.connect(reveal_control_elements);
-            this.configure_event.connect(reveal_control_elements); // upon resizing
+            ((Widget) this).add_controller(this_motion_events);
+            this_motion_events.motion.connect(reveal_control_elements);
+            this_motion_events.enter.connect(reveal_control_elements);
+            this_motion_events.leave.connect(reveal_control_elements);
+
+            this.notify["default-width"].connect(reveal_control_elements);
+            this.notify["default-height"].connect(reveal_control_elements);
 
-            this.configure_event.connect(reposition_participant_widgets);
+            this.notify["default-width"].connect(reposition_participant_widgets);
+            this.notify["default-height"].connect(reposition_participant_widgets);
 
             this.set_titlebar(new OutsideHeaderBar(this.header_bar) { visible=true });
 
@@ -103,11 +109,10 @@ namespace Dino.Ui {
             }
         }
 
-        private bool reposition_participant_widgets() {
-            int width, height;
-            this.get_size(out width,out height);
+        private void reposition_participant_widgets() {
+            int width = get_size(Orientation.HORIZONTAL);
+            int height = get_size(Orientation.VERTICAL);
             reposition_participant_widgets_rec(participants, width, height, 0, 0, 0, 0);
-            return false;
         }
 
         private void reposition_participant_widgets_rec(ArrayList<string> participants, int width, int height, int margin_top, int margin_right, int margin_bottom, int margin_left) {
@@ -144,14 +149,14 @@ namespace Dino.Ui {
         }
 
         public void set_own_video(Widget? widget_) {
-            own_video_box.foreach((widget) => { own_video_box.remove(widget); });
+//            own_video_box.foreach((widget) => { own_video_box.remove(widget); });
 
             own_video = widget_;
             if (own_video == null) {
-                own_video = new Box(Orientation.HORIZONTAL, 0) { expand=true };
+                own_video = new Box(Orientation.HORIZONTAL, 0) { hexpand=true, vexpand=true };
             }
             own_video.visible = true;
-            own_video_box.add(own_video);
+            own_video_box.append(own_video);
         }
 
         public void set_own_video_ratio(int width, int height) {
@@ -165,7 +170,7 @@ namespace Dino.Ui {
         }
 
         public void unset_own_video() {
-            own_video_box.foreach((widget) => { own_video_box.remove(widget); });
+//            own_video_box.foreach((widget) => { own_video_box.remove(widget); });
         }
 
         public void set_status(string participant_id, string state) {
@@ -192,13 +197,12 @@ namespace Dino.Ui {
             bottom_bar.show_counterpart_ended(text);
         }
 
-        private bool reveal_control_elements() {
+        private void reveal_control_elements() {
             if (!bottom_bar_revealer.child_revealed) {
                 controls_active = true;
             }
 
             timeout_hide_control_elements();
-            return false;
         }
 
         private void timeout_hide_control_elements() {
@@ -229,8 +233,8 @@ namespace Dino.Ui {
 
         private bool on_get_child_position(Widget widget, out Gdk.Rectangle allocation) {
             if (widget == own_video_box) {
-                int width, height;
-                this.get_size(out width,out height);
+                int width = get_size(Orientation.HORIZONTAL);
+                int height = get_size(Orientation.VERTICAL);
 
                 allocation = Gdk.Rectangle();
                 allocation.width = own_video_width;
@@ -252,8 +256,8 @@ namespace Dino.Ui {
         public OutsideHeaderBar(HeaderBar header_bar) {
             this.header_bar = header_bar;
 
-            size_allocate.connect_after(on_header_bar_size_allocate);
-            header_bar.size_allocate.connect(on_header_bar_size_allocate);
+//            size_allocate.connect_after(on_header_bar_size_allocate);
+//            header_bar.size_allocate.connect(on_header_bar_size_allocate);
         }
 
         public void on_header_bar_size_allocate() {
@@ -263,7 +267,7 @@ namespace Dino.Ui {
             Allocation alloc;
             get_allocation(out alloc);
             alloc.height = header_bar_alloc.height;
-            set_allocation(alloc);
+//            set_allocation(alloc);
         }
     }
 }
\ No newline at end of file
diff --git a/main/src/ui/call_window/call_window_controller.vala b/main/src/ui/call_window/call_window_controller.vala
index 276fff98..6ff02964 100644
--- a/main/src/ui/call_window/call_window_controller.vala
+++ b/main/src/ui/call_window/call_window_controller.vala
@@ -31,7 +31,7 @@ public class Dino.Ui.CallWindowController : Object {
         this.stream_interactor = stream_interactor;
 
         this.calls = stream_interactor.get_module(Calls.IDENTITY);
-        this.own_video = call_plugin.create_widget(Plugins.WidgetType.GTK);
+        this.own_video = call_plugin.create_widget(Plugins.WidgetType.GTK4);
 
         call_window.set_default_size(704, 528); // 640x480 * 1.1
 
@@ -70,9 +70,10 @@ public class Dino.Ui.CallWindowController : Object {
             call_window.destroy();
             this.dispose();
         });
-        call_window_handler_ids += call_window.destroy.connect(() => {
+        call_window_handler_ids += call_window.close_request.connect(() => {
             call_state.end();
             this.dispose();
+            return false;
         });
         bottom_bar_handler_ids += call_window.bottom_bar.notify["audio-enabled"].connect(() => {
             call_state.mute_own_audio(!call_window.bottom_bar.audio_enabled);
@@ -81,17 +82,23 @@ public class Dino.Ui.CallWindowController : Object {
             call_state.mute_own_video(!call_window.bottom_bar.video_enabled);
             update_own_video();
         });
-        call_window_handler_ids += call_window.configure_event.connect((event) => {
-            if (window_width == -1 || window_height == -1) return false;
-            int current_height = this.call_window.get_allocated_height();
+        call_window_handler_ids += call_window.notify["default-width"].connect((event) => {
+            if (call_window.default_width == -1) return;
             int current_width = this.call_window.get_allocated_width();
-            if (window_width != current_width || window_height != current_height) {
-                debug("Call window size changed by user. Disabling auto window-to-video size adaptation. %i->%i x %i->%i", window_width, current_width, window_height, current_height);
+            if (window_width != current_width) {
+                debug("Call window size changed by user. Disabling auto window-to-video size adaptation. Width %i->%i", window_width, current_width);
+                window_size_changed = true;
+            }
+        });
+        call_window_handler_ids += call_window.notify["default-height"].connect((event) => {
+            if (call_window.default_height == -1) return;
+            int current_height = this.call_window.get_allocated_height();
+            if (window_height != current_height) {
+                debug("Call window size changed by user. Disabling auto window-to-video size adaptation. Height %i->%i", window_height, current_height);
                 window_size_changed = true;
             }
-            return false;
         });
-        call_window_handler_ids += call_window.realize.connect(() => {
+        call_window_handler_ids += ((Widget)call_window).realize.connect(() => {
             capture_window_size();
         });
 
@@ -138,7 +145,7 @@ public class Dino.Ui.CallWindowController : Object {
         Gee.List<Account> acc_list = new ArrayList<Account>(Account.equals_func);
         acc_list.add(call.account);
         SelectContactDialog add_chat_dialog = new SelectContactDialog(stream_interactor, acc_list);
-        add_chat_dialog.set_transient_for((Window) call_window.get_toplevel());
+        add_chat_dialog.set_transient_for((Window) call_window.get_root());
         add_chat_dialog.title = _("Invite to Call");
         add_chat_dialog.ok_button.label = _("Invite");
         add_chat_dialog.selected.connect((account, jid) => {
@@ -192,11 +199,11 @@ public class Dino.Ui.CallWindowController : Object {
             }
         });
         peer_state.encryption_updated.connect((audio_encryption, video_encryption, same) => {
-            update_encryption_indicator(participant_widgets[peer_id].encryption_button, audio_encryption, video_encryption, same);
+            update_encryption_indicator(participant_widgets[peer_id].encryption_button_controller, audio_encryption, video_encryption, same);
         });
     }
 
-    private void update_encryption_indicator(CallEncryptionButton encryption_button, Xep.Jingle.ContentEncryption? audio_encryption, Xep.Jingle.ContentEncryption? video_encryption, bool same) {
+    private void update_encryption_indicator(CallEncryptionButtonController encryption_button, Xep.Jingle.ContentEncryption? audio_encryption, Xep.Jingle.ContentEncryption? video_encryption, bool same) {
         string? title = null;
         string? icon_name = null;
         bool show_keys = true;
@@ -235,24 +242,26 @@ public class Dino.Ui.CallWindowController : Object {
                 return true;
             });
             conn_details_window.set_transient_for(call_window);
-            conn_details_window.destroy.connect(() => Source.remove(timeout_handle_id));
+            conn_details_window.close_request.connect(() => { Source.remove(timeout_handle_id); return false; });
             conn_details_window.present();
-            this.call_window.destroy.connect(() => conn_details_window.close() );
+            this.call_window.close_request.connect(() => { conn_details_window.close(); return false; });
         });
         invite_handler_ids[participant_id] += participant_widget.invite_button_clicked.connect(() => invite_button_clicked());
         participant_widgets[participant_id] = participant_widget;
 
         call_window.add_participant(participant_id, participant_widget);
 
-        participant_videos[participant_id] = call_plugin.create_widget(Plugins.WidgetType.GTK);
+        participant_videos[participant_id] = call_plugin.create_widget(Plugins.WidgetType.GTK4);
 
         participant_videos[participant_id].resolution_changed.connect((width, height) => {
             if (window_size_changed || participant_widgets.size > 1) return;
             if (width == 0 || height == 0) return;
             if (width > height) {
-                call_window.resize(704, (int) (height * 704 / width));
+                call_window.default_width = 704;
+                call_window.default_height = (int) (height * 704 / width);
             } else {
-                call_window.resize((int) (width * 704 / height), 704);
+                call_window.default_width = (int) (width * 704 / height);
+                call_window.default_height = 704;
             }
             capture_window_size();
         });
diff --git a/main/src/ui/call_window/participant_widget.vala b/main/src/ui/call_window/participant_widget.vala
index f18ae242..ecd6cbb3 100644
--- a/main/src/ui/call_window/participant_widget.vala
+++ b/main/src/ui/call_window/participant_widget.vala
@@ -6,15 +6,19 @@ using Gtk;
 
 namespace Dino.Ui {
 
-    public class ParticipantWidget : Gtk.Overlay {
+    public class ParticipantWidget : Box {
 
+        public Overlay overlay = new Overlay();
         public Widget main_widget;
         public HeaderBar header_bar = new HeaderBar() { valign=Align.START, visible=true };
+        public Label title_label = new Label("");
+        public Label subtitle_label = new Label("");
         public Box inner_box = new Box(Orientation.HORIZONTAL, 0) { margin_start=5, margin_top=5, hexpand=true, visible=true };
         public Box title_box = new Box(Orientation.VERTICAL, 0) { valign=Align.CENTER, hexpand=true, visible=true };
-        public CallEncryptionButton encryption_button = new CallEncryptionButton() { opacity=0, relief=ReliefStyle.NONE, height_request=30, width_request=30, margin_end=5, visible=true };
-        public MenuButton menu_button = new MenuButton() { relief=ReliefStyle.NONE, visible=true };
-        public Button invite_button = new Button.from_icon_name("dino-account-plus") { relief=ReliefStyle.NONE, visible=true };
+        public MenuButton encryption_button = new MenuButton() { opacity=0, has_frame=false, height_request=30, width_request=30, margin_end=5, visible=true };
+        public CallEncryptionButtonController encryption_button_controller;
+        public MenuButton menu_button = new MenuButton() { icon_name="open-menu-symbolic", has_frame=false, visible=true };
+        public Button invite_button = new Button.from_icon_name("dino-account-plus") { has_frame=false, visible=true };
         public bool shows_video = false;
         public string? participant_name;
 
@@ -26,19 +30,38 @@ namespace Dino.Ui {
         public signal void debug_information_clicked();
         public signal void invite_button_clicked();
 
+        class construct {
+            install_action("menu.debuginfo", null, (widget, action_name) => { ((ParticipantWidget) widget).debug_information_clicked(); });
+        }
+
         public ParticipantWidget(string participant_name) {
+            encryption_button_controller = new CallEncryptionButtonController(encryption_button);
+
             this.participant_name = participant_name;
-            header_bar.title = participant_name;
+
+            Box titles_box = new Box(Orientation.VERTICAL, 0) { valign=Align.CENTER };
+            title_label.attributes = new AttrList();
+            title_label.attributes.insert(Pango.attr_weight_new(Weight.BOLD));
+            titles_box.append(title_label);
+            subtitle_label.attributes = new AttrList();
+            subtitle_label.attributes.insert(Pango.attr_scale_new(Pango.Scale.SMALL));
+            subtitle_label.get_style_context().add_class("dim-label");
+            titles_box.append(subtitle_label);
+
+            header_bar.set_title_widget(titles_box);
+            title_label.label = participant_name;
+
             header_bar.get_style_context().add_class("participant-header-bar");
             header_bar.pack_start(invite_button);
             header_bar.pack_start(encryption_button);
             header_bar.pack_end(menu_button);
 
-            menu_button.image = new Image.from_icon_name("open-menu-symbolic", IconSize.MENU);
-            menu_button.set_popover(create_menu());
+            create_menu();
+
             invite_button.clicked.connect(() => invite_button_clicked());
 
-            this.add_overlay(header_bar);
+            this.append(overlay);
+            overlay.add_overlay(header_bar);
 
             this.notify["controls-active"].connect(reveal_or_hide_controls);
             this.notify["may-show-invite-button"].connect(reveal_or_hide_controls);
@@ -48,7 +71,7 @@ namespace Dino.Ui {
             this.is_highest_row = is_highest;
             this.is_start_row = is_start;
 
-            header_bar.show_close_button = is_highest_row;
+            header_bar.show_title_buttons = is_highest_row;
             if (is_highest_row) {
                 header_bar.get_style_context().add_class("call-header-background");
                 Gtk.Settings? gtk_settings = Gtk.Settings.get_default();
@@ -78,37 +101,35 @@ namespace Dino.Ui {
             } else {
                 avatar.set_text("?", false);
             }
-            box.add(avatar);
+            box.append(avatar);
 
             set_participant_widget(box);
         }
 
         private void set_participant_widget(Widget widget) {
-            widget.expand = true;
-            if (main_widget != null) this.remove(main_widget);
+            widget.hexpand = widget.vexpand = true;
             main_widget = widget;
-            this.add(main_widget);
+            overlay.set_child(main_widget);
         }
 
-        private PopoverMenu create_menu() {
-            PopoverMenu menu = new PopoverMenu();
-            Box box = new Box(Orientation.VERTICAL, 0) { margin=10, visible=true };
-            ModelButton debug_information_button = new ModelButton() { text=_("Debug information"), visible=true };
-            debug_information_button.clicked.connect(() => debug_information_clicked());
-            box.add(debug_information_button);
-            menu.add(box);
-            return menu;
+        private void create_menu() {
+            Menu menu_model = new Menu();
+            menu_model.append(_("Debug information"), "menu.debuginfo");
+            Gtk.PopoverMenu popover_menu = new Gtk.PopoverMenu.from_model(menu_model);
+            menu_button.popover = popover_menu;
         }
 
         public void set_status(string state) {
+            subtitle_label.visible = true;
+
             if (state == "requested") {
-                header_bar.subtitle =  _("Calling…");
+                subtitle_label.label =  _("Calling…");
             } else if (state == "ringing") {
-                header_bar.subtitle = _("Ringing…");
+                subtitle_label.label = _("Ringing…");
             } else if (state == "establishing") {
-                header_bar.subtitle = _("Connecting…");
+                subtitle_label.label = _("Connecting…");
             } else {
-                header_bar.subtitle = "";
+                subtitle_label.visible = false;
             }
         }
 
diff --git a/main/src/ui/call_window/video_settings_popover.vala b/main/src/ui/call_window/video_settings_popover.vala
index 7dd5ec9f..c931c466 100644
--- a/main/src/ui/call_window/video_settings_popover.vala
+++ b/main/src/ui/call_window/video_settings_popover.vala
@@ -11,10 +11,10 @@ public class Dino.Ui.VideoSettingsPopover : Gtk.Popover {
     private HashMap<ListBoxRow, Plugins.MediaDevice> row_device = new HashMap<ListBoxRow, Plugins.MediaDevice>();
 
     public VideoSettingsPopover() {
-        Box box = new Box(Orientation.VERTICAL, 15) { margin=18, visible=true };
-        box.add(create_camera_box());
+        Box box = new Box(Orientation.VERTICAL, 15) { visible=true };
+        box.append(create_camera_box());
 
-        this.add(box);
+        this.set_child(box);
     }
 
     private Widget create_camera_box() {
@@ -22,18 +22,18 @@ public class Dino.Ui.VideoSettingsPopover : Gtk.Popover {
         Gee.List<Plugins.MediaDevice> devices = call_plugin.get_devices("video", false);
 
         Box camera_box = new Box(Orientation.VERTICAL, 10) { visible=true };
-        camera_box.add(new Label("<b>" + _("Cameras") + "</b>") { use_markup=true, xalign=0, visible=true, can_focus=true /* grab initial focus*/ });
+        camera_box.append(new Label("<b>" + _("Cameras") + "</b>") { use_markup=true, xalign=0, visible=true, can_focus=true /* grab initial focus*/ });
 
         if (devices.size == 0) {
-            camera_box.add(new Label(_("No camera found.")) { visible=true });
+            camera_box.append(new Label(_("No camera found.")) { visible=true });
         } else {
             ListBox list_box = new ListBox() { activate_on_single_click=true, selection_mode=SelectionMode.SINGLE, visible=true };
             list_box.set_header_func(listbox_header_func);
             Frame frame = new Frame(null) { visible=true };
-            frame.add(list_box);
+            frame.set_child(list_box);
             foreach (Plugins.MediaDevice device in devices) {
                 Label display_name_label = new Label(device.display_name) { xalign=0, visible=true };
-                Image image = new Image.from_icon_name("object-select-symbolic", IconSize.BUTTON) { visible=true };
+                Image image = new Image.from_icon_name("object-select-symbolic") { visible=true };
                 if (current_device == null || current_device.id != device.id) {
                     image.opacity = 0;
                 }
@@ -44,21 +44,21 @@ public class Dino.Ui.VideoSettingsPopover : Gtk.Popover {
                         image.opacity = 1;
                     }
                 });
-                Box device_box = new Box(Orientation.HORIZONTAL, 0) { spacing=7, margin=7, visible=true };
-                device_box.add(image);
+                Box device_box = new Box(Orientation.HORIZONTAL, 0) { spacing=7, visible=true };
+                device_box.append(image);
                 Box label_box = new Box(Orientation.VERTICAL, 0) { visible = true };
-                label_box.add(display_name_label);
+                label_box.append(display_name_label);
                 if (device.detail_name != null) {
                     Label detail_name_label = new Label(device.detail_name) { xalign=0, visible=true };
                     detail_name_label.get_style_context().add_class("dim-label");
                     detail_name_label.attributes = new Pango.AttrList();
                     detail_name_label.attributes.insert(Pango.attr_scale_new(0.8));
-                    label_box.add(detail_name_label);
+                    label_box.append(detail_name_label);
                 }
-                device_box.add(label_box);
+                device_box.append(label_box);
                 ListBoxRow list_box_row = new ListBoxRow() { visible=true };
-                list_box_row.add(device_box);
-                list_box.add(list_box_row);
+                list_box_row.set_child(device_box);
+                list_box.append(list_box_row);
 
                 row_device[list_box_row] = device;
             }
@@ -67,7 +67,7 @@ public class Dino.Ui.VideoSettingsPopover : Gtk.Popover {
                 camera_selected(row_device[row]);
                 list_box.unselect_row(row);
             });
-            camera_box.add(frame);
+            camera_box.append(frame);
         }
 
         return camera_box;