# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1715787587 -7200
# Node ID 9847e6dbeefa24a32a384ba55ccd35e3863fab7b
# Parent  5072e4a4e261582f656349a277d95339f3721087
bulma (call): add group call related templates.

rel: 430

diff -r 5072e4a4e261 -r 9847e6dbeefa sat_templates/templates/bulma/call/call.html
--- a/sat_templates/templates/bulma/call/call.html	Sat May 11 13:55:03 2024 +0200
+++ b/sat_templates/templates/bulma/call/call.html	Wed May 15 17:39:47 2024 +0200
@@ -44,6 +44,17 @@
                 </span>
             </button>
         </div>
+
+        <!-- Group Call Button -->
+        <div class="column is-narrow is-hidden">
+            <button class="button is-info" id="group_call_btn" aria-label="Initiate Group Call">
+                <span class="icon">
+                    <i class="icon-group"></i>
+                </span>
+                <span>Group Call</span>
+            </button>
+        </div>
+
             </div>
         </div>
 
@@ -54,7 +65,6 @@
 
     {# Calls #}
 
-
     <div class="is-hidden is-flex is-flex-direction-column" id="call_container">
 
         <div class="columns is-1 is-centered is-vcentered m-0" id="call_header">
@@ -108,7 +118,7 @@
                     <input type="file" id="send_file_input" style="display:none;" />
                 </div>
                 <div class="column is-narrow">
-                    <button class="button is-danger" id="hangup_btn" aria-label="{{ _('Hang up') }}">
+                    <button class="button is-danger is-rotated-135" id="hangup_btn" aria-label="{{ _('Hang up') }}">
                         {{ icon('phone', cls='image is-24x24 is-inline-block') }}
                     </button>
                 </div>
@@ -116,6 +126,38 @@
 
         </div>
     </div>
+
+
+    {# 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="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>
+            </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;">
+            <!-- Peer templates dynamically loaded here -->
+        </div>
+
+        <!-- Call Control for Hangup -->
+        <div class="group-call-controls columns is-centered is-mobile">
+            <div class="column is-narrow">
+                <button class="button is-danger is-rotated-135" id="group_hangup_btn">
+                    {{ icon('phone', cls='image is-24x24 is-inline-block') }}
+                </button>
+            </div>
+        </div>
+    </div>
+
 </div>
 </section>
 {% endblock body %}
diff -r 5072e4a4e261 -r 9847e6dbeefa sat_templates/templates/bulma/call/group_peer.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/call/group_peer.html	Wed May 15 17:39:47 2024 +0200
@@ -0,0 +1,27 @@
+<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;">
+                    {%- 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 -%}
+                    {%- 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>
+                {%- endif -%}
+            </div>
+        </div>
+    </div>
+    <video class="peer_video_stream" autoplay playsinline tabindex="0" style="width: 100%; height: auto; object-fit: cover;"></video>
+</div>
diff -r 5072e4a4e261 -r 9847e6dbeefa sat_templates/templates/bulma/components/avatar.html
--- a/sat_templates/templates/bulma/components/avatar.html	Sat May 11 13:55:03 2024 +0200
+++ b/sat_templates/templates/bulma/components/avatar.html	Wed May 15 17:39:47 2024 +0200
@@ -1,7 +1,7 @@
 {% macro avatar(jid, class="is-48x48") %}
     {%- if identities is defined -%}
         {% set identity = identities.get(jid) %}
-        {%- if identity.avatar %}
+        {%- if identity.avatar.filename %}
             <div class="is-avatar image {{class}}">
                 <img src="/cache/common/{{identity.avatar.filename}}">
             </div>
diff -r 5072e4a4e261 -r 9847e6dbeefa sat_templates/templates/bulma/components/search_item.html
--- a/sat_templates/templates/bulma/components/search_item.html	Sat May 11 13:55:03 2024 +0200
+++ b/sat_templates/templates/bulma/components/search_item.html	Wed May 15 17:39:47 2024 +0200
@@ -1,6 +1,10 @@
-{% import 'components/avatar.html' as avatar with context %}
 <div class="column is-2-desktop is-6-touch">
     <div class="card x-is-hoverable">
+        {% if multiple_selection %}
+            <div class="checkbox-container pl-1 pt-1">
+                <input type="checkbox" class="search-item__checkbox">
+            </div>
+        {% endif %}
         <a href="{{url}}">
             <div class="card-image is-flex has-items-centered px-1 py-1">
                 {{ avatar.avatar(item.entity, "is-64x64") }}
diff -r 5072e4a4e261 -r 9847e6dbeefa sat_templates/templates/bulma/static/call.css
--- a/sat_templates/templates/bulma/static/call.css	Sat May 11 13:55:03 2024 +0200
+++ b/sat_templates/templates/bulma/static/call.css	Wed May 15 17:39:47 2024 +0200
@@ -52,7 +52,7 @@
   z-index: 2;
 }
 
-#hangup_btn svg {
+.is-rotated-135 svg {
     transform: rotate(135deg);
 }
 
diff -r 5072e4a4e261 -r 9847e6dbeefa sat_templates/templates/bulma/static/styles.css
--- a/sat_templates/templates/bulma/static/styles.css	Sat May 11 13:55:03 2024 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Wed May 15 17:39:47 2024 +0200
@@ -82,6 +82,12 @@
     right: 0.25rem;
 }
 
+.is-top-left {
+    position: absolute;
+    top: 0.25em;
+    left: 0.25em;
+}
+
 .has-items-centered {
     align-items: center;
     justify-content: center;
@@ -186,6 +192,13 @@
  * selections *
  **************/
 
+.is-selected-search_item {
+    border: solid 2px #3273dc;
+    background-color: #eff3fa;
+    transform: scale(1.03);
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
+}
+
 .is-not-selectable {
     user-select: none;
 }