Feature/Host Video in canvas

.gitignore

@@ -58,4 +58,4 @@ Carthage/Build/
 .com.apple.timemachine.donotpresent
 
 
-deployment-**.log
+deployment-**.log

ARCHITECTURE.md

@@ -28,11 +28,19 @@ graph TD
 
 ## Key Components
 
+- **actix-api:** Rust-based backend server using Actix Web framework
+- **videocall-types:** Shared data types and protocol definitions
+
 ### 1. Client Applications
 
 - **Web Client**: Built with Yew (Rust-to-WebAssembly framework)
+  - **`yew-ui`** Web frontend built with the Yew framework and compiled to WebAssembly
+  - **`tailwind-yew`** css
+  - **`videocall-client`** Client library for native integration
 - **CLI Client**: Native Rust client for headless devices
+  - **`videocall-cli`** Command-line interface for headless video streaming
 - **Mobile Clients**: Native mobile applications (in development)
+  - **`videocall-sdk`**
 
 ### 2. Transport Servers
 

Makefile

@@ -35,4 +35,4 @@ check:
 
 clean:
 		docker compose -f docker/docker-compose.yaml down --remove-orphans \
-			--volumes --rmi all
+			--volumes --rmi all

docker/Dockerfile.website

@@ -9,6 +9,7 @@ RUN apt-get update && apt-get install -y \
     libssl-dev \
     pkg-config \
     g++ \
+    git-all \
     && rm -rf /var/lib/apt/lists/*
 
 RUN cargo install --locked cargo-leptos@0.2.29
@@ -34,4 +35,4 @@ ENV LEPTOS_SITE_ADDR="0.0.0.0:8080"
 ENV LEPTOS_SITE_ROOT="site"
 EXPOSE 8080
 
-CMD ["/app/leptos_website"]
+CMD ["/app/leptos_website"]

docker/Dockerfile.website.dev

@@ -6,6 +6,7 @@ RUN apt-get update && apt-get install -y \
     libssl-dev \
     pkg-config \
     g++ \
+    git-all \
     && rm -rf /var/lib/apt/lists/*
 
 RUN cargo install --locked cargo-leptos@0.2.29

docker/docker-compose.yaml

@@ -22,6 +22,7 @@ services:
       - LOGIN_URL=http://localhost:${ACTIX_PORT:-8080}/login
       - RUSTFLAGS=--cfg=web_sys_unstable_apis
       - RUST_BACKTRACE=1
+      - RUST_LOG=debug
       - WEBTRANSPORT_ENABLED=${WEBTRANSPORT_ENABLED:-false}
       - E2EE_ENABLED=${E2EE_ENABLED:-false}
       - USERS_ALLOWED_TO_STREAM=${USERS_ALLOWED_TO_STREAM:-}

yew-ui/src/components/attendants.rs

@@ -81,6 +81,7 @@ pub enum Msg {
     ToggleForceDesktopGrid,
     HangUp,
     ShowCopyToast(bool),
+    RegisterHostToggleName(Callback<MouseEvent>),
 }
 
 impl From<WsAction> for Msg {
@@ -145,6 +146,7 @@ pub struct AttendantsComponent {
     force_desktop_grid_on_mobile: bool,
     simulation_info_message: Option<String>,
     show_copy_toast: bool,
+    host_toggle_change_name: Option<Callback<MouseEvent>>,
     show_dropdown: bool,
 }
 
@@ -357,6 +359,7 @@ impl Component for AttendantsComponent {
             force_desktop_grid_on_mobile: true,
             simulation_info_message: None,
             show_copy_toast: false,
+            host_toggle_change_name: None,
             show_dropdown: false,
         };
         if let Err(e) = crate::constants::app_config() {
@@ -578,6 +581,10 @@ impl Component for AttendantsComponent {
                 let _ = window().location().reload(); // Refresh page for clean state
                 true
             }
+            Msg::RegisterHostToggleName(callback) => {
+                self.host_toggle_change_name = Some(callback);
+                true
+            }
         }
     }
 
@@ -593,21 +600,46 @@ impl Component for AttendantsComponent {
         let mut display_peers_vec = real_peers_vec.clone();
         display_peers_vec.extend(self.fake_peer_ids.iter().cloned());
 
+        // // ✅ Ensure host (the current user) appears in the peers list
+        let my_email = ctx.props().email.clone();
+        if !display_peers_vec.contains(&my_email) {
+            // Insert host at the beginning so they appear first in the grid
+            display_peers_vec.insert(0, my_email.clone() + " (You)");
+        }
+
         let num_display_peers = display_peers_vec.len();
         // Cap the number of peers used for styling at CANVAS_LIMIT
         let num_peers_for_styling = num_display_peers.min(CANVAS_LIMIT);
 
         // Determine if the "Add Fake Peer" button should be disabled
         let add_fake_peer_disabled = num_display_peers >= CANVAS_LIMIT;
 
+        let on_encoder_settings_update = ctx.link().callback(WsAction::EncoderSettingsUpdated);
+
         let rows: Vec<Html> = display_peers_vec
             .iter()
             .take(CANVAS_LIMIT)
             .enumerate()
             .map(|(i, peer_id)| {
-                let full_bleed = display_peers_vec.len() == 1
-                    && !self.client.is_screen_share_enabled_for_peer(peer_id);
-                html!{ <PeerTile key={format!("tile-{}-{}", i, peer_id)} peer_id={peer_id.clone()} client={self.client.clone()} full_bleed={full_bleed} /> }
+                let is_host = peer_id == &(email.clone() + " (You)");
+                let full_bleed = (display_peers_vec.len() == 1
+                    && !self.client.is_screen_share_enabled_for_peer(peer_id))
+                    || num_display_peers == 1;
+                let on_toggle_change_name = if is_host {
+                    self.host_toggle_change_name.clone()
+                } else {
+                    None
+                };
+                html! {
+                    <PeerTile
+                        key={format!("tile-{}-{}", i, peer_id)}
+                        peer_id={peer_id.clone()}
+                        client={self.client.clone()}
+                        full_bleed={full_bleed}
+                        is_host={is_host}
+                        on_toggle_change_name={on_toggle_change_name}
+                    />
+                }
             })
             .collect();
 
@@ -617,8 +649,6 @@ impl Component for AttendantsComponent {
             num_peers_for_styling.max(1)
         );
 
-        let on_encoder_settings_update = ctx.link().callback(WsAction::EncoderSettingsUpdated);
-
         // Compute meeting link for invitation overlay
         let meeting_link = {
             let origin_result = window().location().origin();
@@ -777,6 +807,7 @@ impl Component for AttendantsComponent {
                                 <nav class="host">
                                     <div class="controls">
                                         <nav class="video-controls-container">
+                                            // Mic mute/unmute button
                                             <button
                                                 class={classes!("video-control-button", self.mic_enabled.then_some("active"))}
                                                 onclick={ctx.link().callback(|_| MeetingAction::ToggleMicMute)}>
@@ -807,6 +838,7 @@ impl Component for AttendantsComponent {
                                                     }
                                                 }
                                             </button>
+                                            // Video on/off button
                                             <button
                                                 class={classes!("video-control-button", self.video_enabled.then_some("active"))}
                                                 onclick={ctx.link().callback(|_| MeetingAction::ToggleVideoOnOff)}>
@@ -834,8 +866,7 @@ impl Component for AttendantsComponent {
                                                     }
                                                 }
                                             </button>
-
-                                            // Hide screen share button on Safari/iOS devices
+                                            // Screen share button (hide on Safari/iOS devices)
                                             {
                                                 if !is_ios() {
                                                     html! {
@@ -874,6 +905,7 @@ impl Component for AttendantsComponent {
                                                     html! {}
                                                 }
                                             }
+                                            // peer list button
                                             <button
                                                 class={classes!("video-control-button", self.peer_list_open.then_some("active"))}
                                                 onclick={toggle_peer_list.clone()}>
@@ -906,6 +938,7 @@ impl Component for AttendantsComponent {
                                                     }
                                                 }
                                             </button>
+                                            // diagnostics button
                                             <button
                                                 class={classes!("video-control-button", self.diagnostics_open.then_some("active"))}
                                                 onclick={toggle_diagnostics.clone()}>
@@ -932,6 +965,7 @@ impl Component for AttendantsComponent {
                                                     }
                                                 }
                                             </button>
+                                            // device settings button (mobile only)
                                             <button
                                                 class={classes!("video-control-button", "mobile-only-device-settings", self.device_settings_open.then_some("active"))}
                                                 onclick={ctx.link().callback(|_| UserScreenToggleAction::DeviceSettings)}>
@@ -959,6 +993,7 @@ impl Component for AttendantsComponent {
                                                     }
                                                 }
                                             </button>
+                                            // hang up button
                                             <button
                                                 class="video-control-button danger"
                                                 onclick={ctx.link().callback(|_| Msg::HangUp)}>
@@ -969,18 +1004,17 @@ impl Component for AttendantsComponent {
                                             </button>
                                             { self.view_grid_toggle(ctx) }
                                             { self.view_fake_peer_buttons(ctx, add_fake_peer_disabled) }
-
                                         </nav>
                                         { html!{} }
-                                                                {
-                            if let Some(message) = &self.simulation_info_message {
-                                html!{
-                                    <p class="simulation-info-message">{ message }</p>
-                                }
-                            } else {
-                                html!{}
-                            }
-                        }
+                                        {
+                                            if let Some(message) = &self.simulation_info_message {
+                                                html!{
+                                                    <p class="simulation-info-message">{ message }</p>
+                                                }
+                                            } else {
+                                                html!{}
+                                            }
+                                        }
                                     </div>
                                     {
                                         if let Some(err) = &self.mic_error {
@@ -1001,23 +1035,25 @@ impl Component for AttendantsComponent {
                                         } else { html!{} }
                                     }
                                     {
-                                         if media_access_granted {
-                                             html! {<Host
-                                                 client={self.client.clone()}
-                                                 share_screen={self.share_screen}
-                                                 mic_enabled={self.mic_enabled}
-                                                 video_enabled={self.video_enabled}
-                                                 on_encoder_settings_update={on_encoder_settings_update}
-                                                 device_settings_open={self.device_settings_open}
-                                                 on_device_settings_toggle={ctx.link().callback(|_| UserScreenToggleAction::DeviceSettings)}
-                                                 on_microphone_error={ctx.link().callback(Msg::OnMicrophoneError)}
-                                             />}
-                                         } else {
-                                             html! {<></>}
-                                         }
+                                        if media_access_granted {
+                                            html! {
+                                                <Host
+                                                    client={self.client.clone()}
+                                                    share_screen={self.share_screen}
+                                                    mic_enabled={self.mic_enabled}
+                                                    video_enabled={self.video_enabled}
+                                                    on_encoder_settings_update={on_encoder_settings_update}
+                                                    device_settings_open={self.device_settings_open}
+                                                    on_device_settings_toggle={ctx.link().callback(|_| UserScreenToggleAction::DeviceSettings)}
+                                                    on_microphone_error={ctx.link().callback(Msg::OnMicrophoneError)}
+                                                    register_toggle_change_name={ctx.link().callback(Msg::RegisterHostToggleName)}
+                                                />
+                                            }
+                                        } else {
+                                            html! {<></>}
+                                        }
                                     }
                                     <div class={classes!("connection-led", if self.client.is_connected() { "connected" } else { "connecting" })} title={if self.client.is_connected() { "Connected" } else { "Connecting" }}></div>
-
                                 </nav>
                             }
                         } else {