Mercurial > libervia-templates

diff sat_templates/templates/bulma/call/group_peer.html @ 400:140690a18b63 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
author Goffi <goffi@goffi.org>
date Tue, 06 Aug 2024 23:50:17 +0200
parents 9847e6dbeefa
children
line wrap: on
line diff
--- 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>