Mercurial > libervia-templates
changeset 400:140690a18b63
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 | e7152fc8a81f |
| children | 0e454358ca49 |
| files | sat_templates/templates/bulma/call/call.html sat_templates/templates/bulma/call/group_peer.html |
| diffstat | 2 files changed, 43 insertions(+), 31 deletions(-) [+] |
line wrap: on
line diff
--- 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>
--- 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>