Mercurial > libervia-templates

annotate sat_templates/templates/bulma/call/call.html @ 374:5646df8bd391

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (call): calling mode improvments: - instead of a "switch" button, there are now 2 button with only an icon, one for video call and the other for audio call, they appear on the same row as the search bar - search item can now be extended using "call" blocks, and options are used - call search items don't show group, and now display an "extra" menu (3 dots menu) with a dropdown to select audio or video call.
author Goffi <goffi@goffi.org>
date Tue, 15 Aug 2023 17:12:18 +0200
parents a603cf0fa5d1
children 44337471d390
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
1 {% if not embedded %}
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
2 {% set loading_screen = true %}
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
3 {% extends 'base/base.html' %}
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
4 {% endif %}
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
5
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
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">
374
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
16
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
17 <div class="container">
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
18 <div class="columns is-vcentered is-mobile">
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
19
374
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
20 <!-- Search bar -->
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
21 <div class="column is-flex-grow-1">
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
22 <input class="input" type="search" id="search" placeholder="Enter contact's name or address" aria-label="Search for contacts">
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
23 </div>
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
24
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
25 <!-- Video Call Button -->
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
26 <div class="column is-narrow">
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
27 <button class="button is-primary" id="video_call_btn" aria-label="Initiate Video Call">
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
28 <span class="icon">
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
29 <i class="icon-videocam"></i>
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
30 </span>
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
31 </button>
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
32 </div>
374
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
33
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
34 <!-- Audio Call Button -->
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
35 <div class="column is-narrow">
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
36 <button class="button is-light" id="audio_call_btn" aria-label="Initiate Audio Call">
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
37 <span class="icon">
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
38 <i class="icon-phone"></i>
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
39 </span>
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
40 </button>
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
41 </div>
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
42 </div>
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
43 </div>
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
44
374
5646df8bd391 bulma (call): calling mode improvments:
Goffi <goffi@goffi.org>
parents: 372
diff changeset
45 <div id="contacts" class="columns is-multiline is-mobile is-half-touch">
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
46 </div>
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
47
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
48 </div>
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
49
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
50 {# Calls #}
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
51 <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
52
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
53 <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
54 <div class="column p-0">
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
55 <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
56 <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
57 <div class="column" id="call_status_wrapper"></div>
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
58 </div>
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
59 </div>
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
60 <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
61 <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
62 </div>
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
63 </div>
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
64
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
65 <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
66 <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
67 <div class="fullscreen-btn is-video-only">
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
68 <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
69 {{ 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
70 </button>
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
71 <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
72 {{ 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
73 </button>
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
74 </div>
372
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
75 <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
76
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
77 <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
78 <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
79 {{ 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
80 </button>
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
81 <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
82 {{ 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
83 </button>
372
a603cf0fa5d1 bulma (call): add a button for screen sharing:
Goffi <goffi@goffi.org>
parents: 371
diff changeset
84 <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
85 {{ 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
86 </button>
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
87 </div>
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
88 </div>
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
89 </div>
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
90
371
a5a80d761e3e bulma (call): update template to integrate call features:
Goffi <goffi@goffi.org>
parents: 360
diff changeset
91 </div>
360
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
92 </section>
c98a0a4a3fd0 bulma: "call" template, first draft:
Goffi <goffi@goffi.org>
parents:
diff changeset
93 {% endblock body %}