Mercurial > libervia-templates
comparison sat_templates/templates/bulma/call/call.html @ 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 | 9847e6dbeefa |
| children |
comparison
equal
deleted
inserted
replaced
| 399:e7152fc8a81f | 400:140690a18b63 |
|---|---|
| 127 </div> | 127 </div> |
| 128 </div> | 128 </div> |
| 129 | 129 |
| 130 | 130 |
| 131 {# Group Calls #} | 131 {# Group Calls #} |
| 132 | |
| 133 <div class="is-hidden is-flex is-flex-direction-column" id="group_call_container"> | 132 <div class="is-hidden is-flex is-flex-direction-column" id="group_call_container"> |
| 134 <!-- Status Bar (Header) with Fullscreen Button on the Right --> | 133 <div class="columns is-mobile is-vcentered mb-0"> |
| 135 <div class="columns"> | |
| 136 <div class="column is-11" id="group_call_status_wrapper"></div> | 134 <div class="column is-11" id="group_call_status_wrapper"></div> |
| 137 <div class="column"> | 135 <div class="column"> |
| 138 <div class="buttons has-addons is-right"> | 136 <button class="button is-light" id="group_full_screen_btn" aria-label="{{ _('Enter full screen') }}"> |
| 139 <button class="button is-light" id="group_full_screen_btn"> | 137 {{ icon('resize-full', cls='image is-24x24 is-inline-block') }} |
| 140 {{ icon('resize-full', cls='image is-24x24 is-inline-block') }} | 138 </button> |
| 141 </button> | 139 <button class="button is-light is-hidden" id="group_exit_full_screen_btn" aria-label="{{ _('Exit full screen') }}"> |
| 142 </div> | 140 {{ icon('resize-small', cls='image is-24x24 is-inline-block') }} |
| 141 </button> | |
| 143 </div> | 142 </div> |
| 144 </div> | 143 </div> |
| 145 | 144 |
| 146 <!-- Peer Video Grid - Adjusted for dynamic resizing --> | 145 <div class="columns is-multiline mt-3 is-flex-grow-1 is-variable is-1" id="group_video_grid"> |
| 147 <div class="columns is-multiline mt-3 is-flex-grow-1 is-variable is-0" id="group_video_grid" style="flex-wrap: wrap;"> | |
| 148 <!-- Peer templates dynamically loaded here --> | 146 <!-- Peer templates dynamically loaded here --> |
| 149 </div> | 147 </div> |
| 150 | 148 |
| 151 <!-- Call Control for Hangup --> | 149 <div class="group-call-controls columns is-centered is-mobile mt-3"> |
| 152 <div class="group-call-controls columns is-centered is-mobile"> | |
| 153 <div class="column is-narrow"> | 150 <div class="column is-narrow"> |
| 154 <button class="button is-danger is-rotated-135" id="group_hangup_btn"> | 151 <button class="button is-danger is-rotated-135" id="group_hangup_btn" aria-label="{{ _('Hang up') }}"> |
| 155 {{ icon('phone', cls='image is-24x24 is-inline-block') }} | 152 {{ icon('phone', cls='image is-24x24 is-inline-block') }} |
| 156 </button> | 153 </button> |
| 157 </div> | 154 </div> |
| 158 </div> | 155 </div> |
| 159 </div> | 156 </div> |