Mercurial > libervia-templates

comparison sat_templates/templates/bulma/call/call.html @ 371:a5a80d761e3e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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">&#128222; {% 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 %}