Mercurial > libervia-templates
annotate sat_templates/templates/bulma/call/call.html @ 373:c5609be6c34e
bulma (list/item): add `safe` to "body" which is a cleaned xhtml value
author | Goffi <goffi@goffi.org> |
---|---|
date | Mon, 14 Aug 2023 17:01:35 +0200 |
parents | a603cf0fa5d1 |
children | 5646df8bd391 |
rev | line source |
---|---|
360 | 1 {% if not embedded %} |
2 {% set loading_screen = true %} | |
3 {% extends 'base/base.html' %} | |
4 {% endif %} | |
5 | |
6 {% block body %} | |
371
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
7 {{ icon_defs( |
372
a603cf0fa5d1
bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents:
371
diff
changeset
|
8 "resize-full", "resize-small", "volume-up", "videocam", "dot-3-vert", "wrench", "user-circle", "desktop" |
371
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
9 ) }} |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
10 <audio id="audio_player" class="is-hidden" src="{{media_path}}sounds/notifications/ring_1.mp3" preload="auto" loop></audio> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
11 <section class="section is-full-below-menu" style="position: relative" > |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
12 <div id="containers_wrapper"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
13 |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
14 {# Search #} |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
15 <div id="search_container" class="is-overlay"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
16 <div id="search_header" class="columns is-1"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
17 <div class="column"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
18 <input class="input" type="search" id="search" placeholder="Enter contact's name or address"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
19 </div> |
360 | 20 |
371
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
21 <div class="column is-narrow buttons has-addons"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
22 <button class="button is-primary" id="call_btn"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
23 <i class="icon-videocam" aria-hidden="true"></i> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
24 {% trans %}Video Call{% endtrans %} |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
25 </button> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
26 <button class="button is-primary" id="toggle_call_mode_btn"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
27 <span class="icon is-small"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
28 <i class="icon-exchange" aria-hidden="true"></i> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
29 </span> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
30 </button> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
31 </div> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
32 </div> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
33 |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
34 <div id="contacts" class="columns is-multiline is-mobile"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
35 </div> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
36 |
360 | 37 </div> |
38 | |
371
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
39 {# Calls #} |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
40 <div class="is-hidden is-flex is-flex-direction-column" id="call_container"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
41 |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
42 <div class="columns is-1 is-centered is-vcentered m-0" id="call_header"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
43 <div class="column p-0"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
44 <div class="columns is-mobile is-1 is-vcentered m-0"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
45 <div class="column is-narrow px-0" id="call_avatar_wrapper"></div> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
46 <div class="column" id="call_status_wrapper"></div> |
360 | 47 </div> |
48 </div> | |
371
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
49 <div class="column is-narrow has-text-centered px-0" id="hangup_wrapper"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
50 <button class="button is-danger" id="hangup_btn">{% trans %}Hang Up{% endtrans %}</button> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
51 </div> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
52 </div> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
53 |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
54 <div id="call_box" class="is-relative mt-3 is-flex-grow-1"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
55 <video id="remote_video" class="is-video-only" autoplay playsinline></video> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
56 <div class="fullscreen-btn is-video-only"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
57 <button class="button is-light" id="full_screen_btn"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
58 {{ icon('resize-full', cls='image is-24x24 is-inline-block') }} |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
59 </button> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
60 <button class="button is-light is-hidden" id="exit_full_screen_btn"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
61 {{ icon('resize-small', cls='image is-24x24 is-inline-block') }} |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
62 </button> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
63 </div> |
372
a603cf0fa5d1
bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents:
371
diff
changeset
|
64 <video id="local_video" class="is-video-only" autoplay playsinline></video> |
371
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
65 |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
66 <div class="controls is-flex is-justify-content-center is-align-items-center p-4"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
67 <button class="button is-success mx-2" id="mute_audio_btn"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
68 {{ icon('volume-up', cls='image is-24x24 is-inline-block') }} |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
69 </button> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
70 <button class="button is-success mx-2 is-video-only" id="mute_video_btn"> |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
71 {{ icon('videocam', cls='image is-24x24 is-inline-block') }} |
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
72 </button> |
372
a603cf0fa5d1
bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents:
371
diff
changeset
|
73 <button class="button is-success mx-2 inactive screen-off is-hidden-touch" id="share_desktop_btn"> |
a603cf0fa5d1
bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents:
371
diff
changeset
|
74 {{ icon('desktop', cls='image is-24x24 is-inline-block') }} |
a603cf0fa5d1
bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents:
371
diff
changeset
|
75 </button> |
360 | 76 </div> |
77 </div> | |
78 </div> | |
79 | |
371
a5a80d761e3e
bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents:
360
diff
changeset
|
80 </div> |
360 | 81 </section> |
82 {% endblock body %} |