# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1722981017 -7200
# Node ID 140690a18b636f39202213c1c8a99bbf89d089c3
# Parent  e7152fc8a81f7da8f4a17f0a684e6c27051399b9
call: group call design:

Design for group call (which is used for both group call and A/V conferences) has been
improved to:
- have a working fullscreen button;
- have a better display of peer users in grid, with responsive design;
- have a nicer design for peer user, and adding avatar/nickname as overlay on the bottom
  of the video stream;
- add a way to (un)pin a peer user, which make is appear on the whole width on top of the
  grid.

rel 448

HG<S-Insert>: changed sat_templates/templates/bulma/call/group_peer.html

diff -r e7152fc8a81f -r 140690a18b63 sat_templates/templates/bulma/call/call.html
--- a/sat_templates/templates/bulma/call/call.html	Thu Jun 06 15:22:22 2024 +0200
+++ b/sat_templates/templates/bulma/call/call.html	Tue Aug 06 23:50:17 2024 +0200
@@ -129,29 +129,26 @@
 
 
     {# Group Calls #}
-
     <div class="is-hidden is-flex is-flex-direction-column" id="group_call_container">
-        <!-- Status Bar (Header) with Fullscreen Button on the Right -->
-        <div class="columns">
+        <div class="columns is-mobile is-vcentered mb-0">
             <div class="column is-11" id="group_call_status_wrapper"></div>
             <div class="column">
-                <div class="buttons has-addons is-right">
-                    <button class="button is-light" id="group_full_screen_btn">
-                        {{ icon('resize-full', cls='image is-24x24 is-inline-block') }}
-                    </button>
-                </div>
+                <button class="button is-light" id="group_full_screen_btn" aria-label="{{ _('Enter full screen') }}">
+                    {{ icon('resize-full', cls='image is-24x24 is-inline-block') }}
+                </button>
+                <button class="button is-light is-hidden" id="group_exit_full_screen_btn" aria-label="{{ _('Exit full screen') }}">
+                    {{ icon('resize-small', cls='image is-24x24 is-inline-block') }}
+                </button>
             </div>
         </div>
 
-        <!-- Peer Video Grid - Adjusted for dynamic resizing -->
-        <div class="columns is-multiline mt-3 is-flex-grow-1 is-variable is-0" id="group_video_grid" style="flex-wrap: wrap;">
+        <div class="columns is-multiline mt-3 is-flex-grow-1 is-variable is-1" id="group_video_grid">
             <!-- Peer templates dynamically loaded here -->
         </div>
 
-        <!-- Call Control for Hangup -->
-        <div class="group-call-controls columns is-centered is-mobile">
+        <div class="group-call-controls columns is-centered is-mobile mt-3">
             <div class="column is-narrow">
-                <button class="button is-danger is-rotated-135" id="group_hangup_btn">
+                <button class="button is-danger is-rotated-135" id="group_hangup_btn" aria-label="{{ _('Hang up') }}">
                     {{ icon('phone', cls='image is-24x24 is-inline-block') }}
                 </button>
             </div>
diff -r e7152fc8a81f -r 140690a18b63 sat_templates/templates/bulma/call/group_peer.html
--- a/sat_templates/templates/bulma/call/group_peer.html	Thu Jun 06 15:22:22 2024 +0200
+++ b/sat_templates/templates/bulma/call/group_peer.html	Tue Aug 06 23:50:17 2024 +0200
@@ -1,27 +1,42 @@
-<div class="column peer_video_container is-flex-grow-1">
-    <div class="box group-peer-avatar is-hidden">
-        <div class="card">
-            <div class="card-content">
-                <figure class="image is-128x128 is-rounded" style="margin: auto;">
+<div class="column is-3-widescreen is-4-desktop is-6-tablet peer_video_container" data-pinned="false">
+    <div class="card">
+        <div class="card-content p-0 position-relative">
+            <video class="peer_video_stream" autoplay playsinline tabindex="0" style="width: 100%; height: auto; object-fit: cover; border-radius: 6px;">
+            </video>
+            <div class="is-overlay is-flex is-align-items-end is-justify-content-space-between p-3">
+                <div class="is-flex is-align-items-center">
                     {%- if identities is defined -%}
                         {% set identity = identities.get(entity) %}
                         {% set nick = identity.nicknames[0] if identity.nicknames else jid %}
-                        {%- if identity.avatar.filename %}
-                            <img class="is-rounded" src="/cache/common/{{identity.avatar.filename}}" alt="{{ nick }}" style="height: 100%; width: 100%;">
-                        {% else %}
-                            <span class="is-avatar is-128x128 image has-background-light is-flex has-items-centered has-text-weight-bold is-size-1">{{nick|first|upper}}</span>
-                        {%- endif -%}
+                        <figure class="image is-48x48 mr-2">
+                            {%- if identity.avatar.filename %}
+                                <img class="is-rounded" src="/cache/common/{{identity.avatar.filename}}" alt="{{ nick }}">
+                            {% else %}
+                                <span class="is-avatar is-48x48 is-flex is-justify-content-center is-align-items-center has-background-light has-text-dark has-text-weight-bold is-size-5 is-rounded">{{nick|first|upper}}</span>
+                            {%- endif -%}
+                        </figure>
+                        <span class="tag is-medium is-rounded is-info has-text-weight-semibold">
+                            {{ nick }}
+                        </span>
                     {%- endif -%}
-                </figure>
-            </div>
-            <div class="card-content has-text-centered">
-                {%- if identities is defined -%}
-                    <div class="tag is-rounded is-info has-text-weight-semibold" style="display: inline-block;">
-                        {{ nick }}
+                </div>
+                <div class="dropdown is-right is-hoverable">
+                    <div class="dropdown-trigger">
+                        <button class="button is-small is-rounded is-light" aria-haspopup="true" aria-controls="dropdown-menu">
+                            <span class="icon is-small">
+                                <i class="icon-dot-3-vert"></i>
+                            </span>
+                        </button>
                     </div>
-                {%- endif -%}
+                    <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                        <div class="dropdown-content">
+                            <a href="#" class="dropdown-item action_pin">
+                                {% trans %}Pin{% endtrans %}
+                            </a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
-    <video class="peer_video_stream" autoplay playsinline tabindex="0" style="width: 100%; height: auto; object-fit: cover;"></video>
 </div>