diff --git a/frontend/themes/apus/views/room-view.css b/frontend/themes/apus/views/room-view.css index 5f5ed3c..763b89a 100644 --- a/frontend/themes/apus/views/room-view.css +++ b/frontend/themes/apus/views/room-view.css @@ -71,7 +71,7 @@ } .room-view .track svg, -.room-view .avatar vaadin-avatar { +.room-view vaadin-avatar-group vaadin-avatar { position: absolute; bottom: 0; right: 0; @@ -79,7 +79,7 @@ width: 40px; } -.room-view .avatar vaadin-avatar { +.room-view vaadin-avatar-group vaadin-avatar { background-color: var(--speaker-avatar-background-color); border: var(--speaker-avatar-border); } diff --git a/src/main/java/swiss/fihlon/apus/event/Speaker.java b/src/main/java/swiss/fihlon/apus/event/Speaker.java index 9398e47..1a46dc9 100644 --- a/src/main/java/swiss/fihlon/apus/event/Speaker.java +++ b/src/main/java/swiss/fihlon/apus/event/Speaker.java @@ -17,7 +17,6 @@ */ package swiss.fihlon.apus.event; -import com.vaadin.flow.component.avatar.Avatar; import org.jetbrains.annotations.NotNull; import org.jetbrains.annotations.Nullable; @@ -27,8 +26,4 @@ public Speaker(@NotNull final String fullName) { this(fullName, null); } - public Avatar avatar() { - return new Avatar(fullName, imageUrl); - } - } diff --git a/src/main/java/swiss/fihlon/apus/ui/view/RoomView.java b/src/main/java/swiss/fihlon/apus/ui/view/RoomView.java index 16b5dc6..29344a6 100644 --- a/src/main/java/swiss/fihlon/apus/ui/view/RoomView.java +++ b/src/main/java/swiss/fihlon/apus/ui/view/RoomView.java @@ -21,6 +21,7 @@ import com.vaadin.flow.component.Html; import com.vaadin.flow.component.Svg; import com.vaadin.flow.component.Text; +import com.vaadin.flow.component.avatar.AvatarGroup; import com.vaadin.flow.component.dependency.CssImport; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.html.H3; @@ -44,6 +45,8 @@ @CssImport(value = "./themes/apus/views/room-view.css") public final class RoomView extends Div { + private static final int MAX_SPEAKER_AVATARS_PER_ROOM = 3; + private final transient Room room; private final String title; private final transient List speakers; @@ -164,18 +167,18 @@ private Component createTimeComponent() { @NotNull private Component createImageComponent() { final var speakerAvatars = speakers.stream() - .filter(s -> s.imageUrl() != null && !s.imageUrl().isBlank()) - .map(Speaker::avatar) - .toList(); + .filter(speaker -> speaker.imageUrl() != null && !speaker.imageUrl().isBlank()) + .map(speaker -> new AvatarGroup.AvatarGroupItem(speaker.fullName(), speaker.imageUrl())) + .toArray(AvatarGroup.AvatarGroupItem[]::new); - if (speakerAvatars.isEmpty()) { + if (speakerAvatars.length == 0) { return createTrackComponent(); } - final var imageComponent = new Div(); - imageComponent.addClassName("avatar"); - imageComponent.add(speakerAvatars.getFirst()); - return imageComponent; + final var avatarGroup = new AvatarGroup(); + avatarGroup.setMaxItemsVisible(MAX_SPEAKER_AVATARS_PER_ROOM); + avatarGroup.add(speakerAvatars); + return avatarGroup; } @NotNull diff --git a/src/test/java/swiss/fihlon/apus/event/SpeakerTest.java b/src/test/java/swiss/fihlon/apus/event/SpeakerTest.java index 43e892a..9c71609 100644 --- a/src/test/java/swiss/fihlon/apus/event/SpeakerTest.java +++ b/src/test/java/swiss/fihlon/apus/event/SpeakerTest.java @@ -17,7 +17,6 @@ */ package swiss.fihlon.apus.event; -import com.vaadin.flow.component.avatar.Avatar; import org.junit.jupiter.api.Test; import static org.junit.jupiter.api.Assertions.assertEquals; @@ -39,10 +38,4 @@ void imageUrl() { assertEquals("https://foo.bar/test.png", new Speaker("", "https://foo.bar/test.png").imageUrl()); } - @Test - void avatar() { - final Avatar avatar = new Speaker("Speaker 1", "https://foo.bar/test.png").avatar(); - assertEquals("Speaker 1", avatar.getName()); - assertEquals("https://foo.bar/test.png", avatar.getImage()); - } }