Show max 20 canvases (#158)

* Max 20 canvases on screen: The PeerList

The commit introduces struct component PeerList which is to
resposible for active Peer management. At current stage, the PeerList
should expand and collapse, claiming dedicated screen chunk, accept
(hardcoded at the moment) list of Peers and enable basic filterming
function.

* Max 20 canvases on screen: extract Canvas generator

In preparation to limit Canvases, the commit extracts a function
responsible for thier preparation given vector of peer indetifiers.
No changes in canvas preparation logic were introduced.

* Max 20 canvases on screen: Setup canvas limit

The canvas number is limited up to 20. The limit criteria is simple
alphabetical order. All peers can be seen in the PeerList.

* Max 20 canvases on screen: PeerList refinement

The commit turns raw-text PeerList into scrollable list of
PeerListItems, a struct component that might be further developed
with functional features.

* Add peer heartbeat monitor (#157)

The commit adds peer heartbeat monitoring functionality that
registers each heartbeat received and removes peers that stopped
missed all heartbeat opportunities in current monitoring period.

The heartbeat-based peer removal will take up to 2x of monitoring
period duration to detect a lost peer.

* Update README.md (#159)

* updating base images (#160)

* updating base images

* update base image

* cache build

* fmt

* make ci green again

* pass linter

---------

Co-authored-by: Dario A Lencina-Talarico <[email protected]>

Author: mkamonMdt

yew-ui/src/components/attendants.rs

@@ -1,15 +1,12 @@
-use super::icons::push_pin::PushPinIcon;
-use crate::constants::{USERS_ALLOWED_TO_STREAM, WEBTRANSPORT_HOST};
+use crate::components::{canvas_generator, peer_list::PeerList};
+use crate::constants::{CANVAS_LIMIT, USERS_ALLOWED_TO_STREAM, WEBTRANSPORT_HOST};
 use crate::{components::host::Host, constants::ACTIX_WEBSOCKET};
 use log::{error, warn};
-use std::rc::Rc;
 use types::protos::media_packet::media_packet::MediaType;
 use videocall_client::{MediaDeviceAccess, VideoCallClient, VideoCallClientOptions};
-use wasm_bindgen::JsCast;
 use wasm_bindgen::JsValue;
 use web_sys::*;
 use yew::prelude::*;
-use yew::virtual_dom::VNode;
 use yew::{html, Component, Context, Html};
 
 #[derive(Debug)]
@@ -31,11 +28,16 @@ pub enum MeetingAction {
     ToggleVideoOnOff,
 }
 
+pub enum UserScreenAction {
+    TogglePeerList,
+}
+
 pub enum Msg {
     WsAction(WsAction),
     MeetingAction(MeetingAction),
     OnPeerAdded(String),
     OnFirstFrame((String, MediaType)),
+    UserScreenAction(UserScreenAction),
 }
 
 impl From<WsAction> for Msg {
@@ -44,6 +46,12 @@ impl From<WsAction> for Msg {
     }
 }
 
+impl From<UserScreenAction> for Msg {
+    fn from(action: UserScreenAction) -> Self {
+        Msg::UserScreenAction(action)
+    }
+}
+
 impl From<MeetingAction> for Msg {
     fn from(action: MeetingAction) -> Self {
         Msg::MeetingAction(action)
@@ -69,6 +77,7 @@ pub struct AttendantsComponent {
     pub share_screen: bool,
     pub mic_enabled: bool,
     pub video_enabled: bool,
+    pub peer_list_open: bool,
     pub error: Option<String>,
 }
 
@@ -133,6 +142,7 @@ impl Component for AttendantsComponent {
             share_screen: false,
             mic_enabled: false,
             video_enabled: false,
+            peer_list_open: false,
             error: None,
         }
     }
@@ -197,162 +207,93 @@ impl Component for AttendantsComponent {
                 }
                 true
             }
+            Msg::UserScreenAction(action) => {
+                match action {
+                    UserScreenAction::TogglePeerList => {
+                        self.peer_list_open = !self.peer_list_open;
+                    }
+                }
+                true
+            }
         }
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         let email = ctx.props().email.clone();
         let media_access_granted = self.media_device_access.is_granted();
-        let rows: Vec<VNode> = self
-            .client
-            .sorted_peer_keys()
-            .iter()
-            .map(|key| {
-                if !USERS_ALLOWED_TO_STREAM.is_empty()
-                    && !USERS_ALLOWED_TO_STREAM.iter().any(|host| host == key)
-                {
-                    return html! {};
-                }
-                let screen_share_css = if self.client.is_awaiting_peer_screen_frame(key) {
-                    "grid-item hidden"
-                } else {
-                    "grid-item"
-                };
-                let screen_share_div_id = Rc::new(format!("screen-share-{}-div", &key));
-                let peer_video_div_id = Rc::new(format!("peer-video-{}-div", &key));
-                html! {
-                    <>
-                        <div class={screen_share_css} id={(*screen_share_div_id).clone()}>
-                            // Canvas for Screen share.
-                            <div class="canvas-container">
-                                <canvas id={format!("screen-share-{}", &key)}></canvas>
-                                <h4 class="floating-name">{format!("{}-screen", &key)}</h4>
-                                <button onclick={Callback::from(move |_| {
-                                    toggle_pinned_div(&(*screen_share_div_id).clone());
-                                })} class="pin-icon">
-                                    <PushPinIcon/>
-                                </button>
-                            </div>
-                        </div>
-                        <div class="grid-item" id={(*peer_video_div_id).clone()}>
-                            // One canvas for the User Video
-                            <div class="canvas-container">
-                                <UserVideo id={key.clone()}></UserVideo>
-                                <h4 class="floating-name">{key.clone()}</h4>
-                                <button onclick={
-                                    Callback::from(move |_| {
-                                    toggle_pinned_div(&(*peer_video_div_id).clone());
-                                })} class="pin-icon">
-                                    <PushPinIcon/>
-                                </button>
-                            </div>
-                        </div>
-                    </>
-                }
-            })
-            .collect();
+
+        let toggle_peer_list = ctx.link().callback(|_| UserScreenAction::TogglePeerList);
+
+        let peers = self.client.sorted_peer_keys();
+        let rows = canvas_generator::generate(
+            &self.client,
+            peers.iter().take(CANVAS_LIMIT).cloned().collect(),
+        );
+
         html! {
-            <div class="grid-container">
-                { self.error.as_ref().map(|error| html! { <p>{ error }</p> }) }
-                { rows }
-                {
-                    if USERS_ALLOWED_TO_STREAM.iter().any(|host| host == &email) || USERS_ALLOWED_TO_STREAM.is_empty() {
-                        html! {
-                            <nav class="host">
-                                <div class="controls">
-                                    <button
-                                        class="bg-yew-blue p-2 rounded-md text-white"
-                                        onclick={ctx.link().callback(|_| MeetingAction::ToggleScreenShare)}>
-                                        { if self.share_screen { "Stop Screen Share"} else { "Share Screen"} }
-                                    </button>
-                                    <button
-                                        class="bg-yew-blue p-2 rounded-md text-white"
-                                        onclick={ctx.link().callback(|_| MeetingAction::ToggleVideoOnOff)}>
-                                        { if !self.video_enabled { "Start Video"} else { "Stop Video"} }
-                                    </button>
-                                    <button
-                                        class="bg-yew-blue p-2 rounded-md text-white"
-                                        onclick={ctx.link().callback(|_| MeetingAction::ToggleMicMute)}>
-                                        { if !self.mic_enabled { "Unmute"} else { "Mute"} }
+            <div id="main-container">
+                <div id="grid-container" style={if self.peer_list_open {"width: 80%;"} else {"width: 100%;"}}>
+                    { self.error.as_ref().map(|error| html! { <p>{ error }</p> }) }
+                    { rows }
+                    {
+                        if USERS_ALLOWED_TO_STREAM.iter().any(|host| host == &email) || USERS_ALLOWED_TO_STREAM.is_empty() {
+                            html! {
+                                <nav class="host">
+                                    <div class="controls">
+                                        <button
+                                            class="bg-yew-blue p-2 rounded-md text-white"
+                                            onclick={ctx.link().callback(|_| MeetingAction::ToggleScreenShare)}>
+                                            { if self.share_screen { "Stop Screen Share"} else { "Share Screen"} }
                                         </button>
-                                </div>
-                                {
-                                    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} />}
-                                    } else {
-                                        html! {<></>}
+                                        <button
+                                            class="bg-yew-blue p-2 rounded-md text-white"
+                                            onclick={ctx.link().callback(|_| MeetingAction::ToggleVideoOnOff)}>
+                                            { if !self.video_enabled { "Start Video"} else { "Stop Video"} }
+                                        </button>
+                                        <button
+                                            class="bg-yew-blue p-2 rounded-md text-white"
+                                            onclick={ctx.link().callback(|_| MeetingAction::ToggleMicMute)}>
+                                            { if !self.mic_enabled { "Unmute"} else { "Mute"} }
+                                        </button>
+                                        <button
+                                            class="bg-yew-blue p-2 rounded-md text-white"
+                                            onclick={toggle_peer_list.clone()}>
+                                            { if !self.peer_list_open { "Open Peers"} else { "Close Peers"} }
+                                        </button>
+                                    </div>
+                                    {
+                                        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} />}
+                                        } else {
+                                            html! {<></>}
+                                        }
                                     }
-                                }
-                                <h4 class="floating-name">{email}</h4>
+                                    <h4 class="floating-name">{email}</h4>
 
-                                {if !self.client.is_connected() {
-                                    html! {<h4>{"Connecting"}</h4>}
-                                } else {
-                                    html! {<h4>{"Connected"}</h4>}
-                                }}
+                                    {if !self.client.is_connected() {
+                                        html! {<h4>{"Connecting"}</h4>}
+                                    } else {
+                                        html! {<h4>{"Connected"}</h4>}
+                                    }}
 
-                                {if ctx.props().e2ee_enabled {
-                                    html! {<h4>{"End to End Encryption Enabled"}</h4>}
-                                } else {
-                                    html! {<h4>{"End to End Encryption Disabled"}</h4>}
-                                }}
-                            </nav>
+                                    {if ctx.props().e2ee_enabled {
+                                        html! {<h4>{"End to End Encryption Enabled"}</h4>}
+                                    } else {
+                                        html! {<h4>{"End to End Encryption Disabled"}</h4>}
+                                    }}
+                                </nav>
+                            }
+                        } else {
+                            error!("User not allowed to stream");
+                            error!("allowed users {}", USERS_ALLOWED_TO_STREAM.join(", "));
+                            html! {}
                         }
-                    } else {
-                        error!("User not allowed to stream");
-                        error!("allowed users {}", USERS_ALLOWED_TO_STREAM.join(", "));
-                        html! {}
                     }
-                }
+                </div>
+                <div id="peer-list-container" class={if self.peer_list_open {"visible"} else {""}}>
+                    <PeerList peers={peers} onclose={toggle_peer_list} />
+                </div>
             </div>
         }
     }
 }
-
-// props for the video component
-#[derive(Properties, Debug, PartialEq)]
-pub struct UserVideoProps {
-    pub id: String,
-}
-
-// user video functional component
-#[function_component(UserVideo)]
-fn user_video(props: &UserVideoProps) -> Html {
-    // create use_effect hook that gets called only once and sets a thumbnail
-    // for the user video
-    let video_ref = use_state(NodeRef::default);
-    let video_ref_clone = video_ref.clone();
-    use_effect_with_deps(
-        move |_| {
-            // Set thumbnail for the video
-            let video = (*video_ref_clone).cast::<HtmlCanvasElement>().unwrap();
-            let ctx = video
-                .get_context("2d")
-                .unwrap()
-                .unwrap()
-                .unchecked_into::<CanvasRenderingContext2d>();
-            ctx.clear_rect(0.0, 0.0, video.width() as f64, video.height() as f64);
-            || ()
-        },
-        vec![props.id.clone()],
-    );
-
-    html! {
-        <canvas ref={(*video_ref).clone()} id={props.id.clone()}></canvas>
-    }
-}
-
-fn toggle_pinned_div(div_id: &str) {
-    if let Some(div) = window()
-        .and_then(|w| w.document())
-        .and_then(|doc| doc.get_element_by_id(div_id))
-    {
-        // if the div does not have the grid-item-pinned css class, add it to it
-        if !div.class_list().contains("grid-item-pinned") {
-            div.class_list().add_1("grid-item-pinned").unwrap();
-        } else {
-            // else remove it
-            div.class_list().remove_1("grid-item-pinned").unwrap();
-        }
-    }
-}