Add Facepile and PlayerStack components

crates/ui2/src/components/facepile.rs

@@ -0,0 +1,33 @@
+use std::marker::PhantomData;
+
+use crate::prelude::*;
+use crate::{theme, Avatar, Player};
+
+#[derive(Element)]
+pub struct Facepile<S: 'static + Send + Sync> {
+    state_type: PhantomData<S>,
+    players: Vec<Player>,
+}
+
+impl<S: 'static + Send + Sync> Facepile<S> {
+    pub fn new<P: Iterator<Item = Player>>(players: P) -> Self {
+        Self {
+            state_type: PhantomData,
+            players: players.collect(),
+        }
+    }
+
+    fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
+        let theme = theme(cx);
+        let player_count = self.players.len();
+        let player_list = self.players.iter().enumerate().map(|(ix, player)| {
+            let isnt_last = ix < player_count - 1;
+
+            div()
+                // TODO: Blocked on negative margins.
+                // .when(isnt_last, |div| div.neg_mr_1())
+                .child(Avatar::new(player.avatar_src().to_string()))
+        });
+        div().p_1().flex().items_center().children(player_list)
+    }
+}

crates/ui2/src/components/player_stack.rs

@@ -0,0 +1,72 @@
+use std::marker::PhantomData;
+
+use crate::prelude::*;
+use crate::{Avatar, Facepile, PlayerWithCallStatus};
+
+#[derive(Element)]
+pub struct PlayerStack<S: 'static + Send + Sync> {
+    state_type: PhantomData<S>,
+    player_with_call_status: PlayerWithCallStatus,
+}
+
+impl<S: 'static + Send + Sync> PlayerStack<S> {
+    pub fn new(player_with_call_status: PlayerWithCallStatus) -> Self {
+        Self {
+            state_type: PhantomData,
+            player_with_call_status,
+        }
+    }
+
+    fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
+        let system_color = SystemColor::new();
+        let player = self.player_with_call_status.get_player();
+        self.player_with_call_status.get_call_status();
+
+        let followers = self
+            .player_with_call_status
+            .get_call_status()
+            .followers
+            .as_ref()
+            .map(|followers| followers.clone());
+
+        // if we have no followers return a slightly different element
+        // if mic_status == muted add a red ring to avatar
+
+        div()
+            .h_full()
+            .flex()
+            .flex_col()
+            .gap_px()
+            .justify_center()
+            .child(
+                div().flex().justify_center().w_full().child(
+                    div()
+                        .w_4()
+                        .h_0p5()
+                        .rounded_sm()
+                        .fill(player.cursor_color(cx)),
+                ),
+            )
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .justify_center()
+                    .h_6()
+                    .pl_1()
+                    .rounded_lg()
+                    .fill(if followers.is_none() {
+                        system_color.transparent
+                    } else {
+                        player.selection_color(cx)
+                    })
+                    .child(Avatar::new(player.avatar_src().to_string()))
+                    .children(followers.map(|followers| {
+                        div()
+                            // TODO: Blocked on negative margins.
+                            // .neg_ml_2()
+                            .child(Facepile::new(followers.into_iter()))
+                    })),
+            )
+    }
+}