Mercurial > libervia-templates
comparison sat_templates/templates/bulma/call/call.html @ 371:a5a80d761e3e
bulma (call): update template to integrate call features:
previously, call template was a minimum UI for testing implementation. This commit
introduce a usable UI with search interface, mute and full screen button, animations, and
other UI/UX improvments.
rel 423
author | Goffi <goffi@goffi.org> |
---|---|
date | Wed, 09 Aug 2023 00:11:39 +0200 |
parents | c98a0a4a3fd0 |
children | a603cf0fa5d1 |
comparison
equal
deleted
inserted
replaced
370:281d1c958d56 | 371:a5a80d761e3e |
---|---|
2 {% set loading_screen = true %} | 2 {% set loading_screen = true %} |
3 {% extends 'base/base.html' %} | 3 {% extends 'base/base.html' %} |
4 {% endif %} | 4 {% endif %} |
5 | 5 |
6 {% block body %} | 6 {% block body %} |
7 <section class="section"> | 7 {{ icon_defs( |
8 "resize-full", "resize-small", "volume-up", "videocam", "dot-3-vert", "wrench", "user-circle" | |
9 ) }} | |
10 <audio id="audio_player" class="is-hidden" src="{{media_path}}sounds/notifications/ring_1.mp3" preload="auto" loop></audio> | |
11 <section class="section is-full-below-menu" style="position: relative" > | |
12 <div id="containers_wrapper"> | |
8 | 13 |
9 <div class="call_box"> | 14 {# Search #} |
10 <video id="remote_video" autoplay playsinline></video> | 15 <div id="search_container" class="is-overlay"> |
11 <video id="local_video" autoplay playsinline muted></video> | 16 <div id="search_header" class="columns is-1"> |
17 <div class="column"> | |
18 <input class="input" type="search" id="search" placeholder="Enter contact's name or address"> | |
19 </div> | |
20 | |
21 <div class="column is-narrow buttons has-addons"> | |
22 <button class="button is-primary" id="call_btn"> | |
23 <i class="icon-videocam" aria-hidden="true"></i> | |
24 {% trans %}Video Call{% endtrans %} | |
25 </button> | |
26 <button class="button is-primary" id="toggle_call_mode_btn"> | |
27 <span class="icon is-small"> | |
28 <i class="icon-exchange" aria-hidden="true"></i> | |
29 </span> | |
30 </button> | |
31 </div> | |
32 </div> | |
33 | |
34 <div id="contacts" class="columns is-multiline is-mobile"> | |
35 </div> | |
36 | |
12 </div> | 37 </div> |
13 | 38 |
14 <div class="field is-horizontal"> | 39 {# Calls #} |
15 <div class="field-label is-normal"> | 40 <div class="is-hidden is-flex is-flex-direction-column" id="call_container"> |
16 <label class="label" for="jid">{% trans %}Callee JID{% endtrans %}</label> | 41 |
17 </div> | 42 <div class="columns is-1 is-centered is-vcentered m-0" id="call_header"> |
18 <div class="field-body"> | 43 <div class="column p-0"> |
19 <div class="field"> | 44 <div class="columns is-mobile is-1 is-vcentered m-0"> |
20 <div class="control"> | 45 <div class="column is-narrow px-0" id="call_avatar_wrapper"></div> |
21 <input class="input" type="text" id="callee_jid" value="louise@tazar3.int"> | 46 <div class="column" id="call_status_wrapper"></div> |
22 </div> | 47 </div> |
23 </div> | 48 </div> |
24 <div class="field"> | 49 <div class="column is-narrow has-text-centered px-0" id="hangup_wrapper"> |
25 <div class="control"> | 50 <button class="button is-danger" id="hangup_btn">{% trans %}Hang Up{% endtrans %}</button> |
26 <button class="button is-primary" id="call_btn">📞 {% trans %}Call{% endtrans %}</button> | 51 </div> |
27 <button class="button is-hidden" id="hangup_btn">{% trans %}Hang Up{% endtrans %}</button> | 52 </div> |
28 </div> | 53 |
54 <div id="call_box" class="is-relative mt-3 is-flex-grow-1"> | |
55 <video id="remote_video" class="is-video-only" autoplay playsinline></video> | |
56 <div class="fullscreen-btn is-video-only"> | |
57 <button class="button is-light" id="full_screen_btn"> | |
58 {{ icon('resize-full', cls='image is-24x24 is-inline-block') }} | |
59 </button> | |
60 <button class="button is-light is-hidden" id="exit_full_screen_btn"> | |
61 {{ icon('resize-small', cls='image is-24x24 is-inline-block') }} | |
62 </button> | |
63 </div> | |
64 <video id="local_video" class="is-video-only" autoplay playsinline muted></video> | |
65 | |
66 <div class="controls is-flex is-justify-content-center is-align-items-center p-4"> | |
67 <button class="button is-success mx-2" id="mute_audio_btn"> | |
68 {{ icon('volume-up', cls='image is-24x24 is-inline-block') }} | |
69 </button> | |
70 <button class="button is-success mx-2 is-video-only" id="mute_video_btn"> | |
71 {{ icon('videocam', cls='image is-24x24 is-inline-block') }} | |
72 </button> | |
29 </div> | 73 </div> |
30 </div> | 74 </div> |
31 </div> | 75 </div> |
32 | 76 |
33 | 77 </div> |
34 </section> | 78 </section> |
35 {% endblock body %} | 79 {% endblock body %} |