Mercurial > libervia-templates

comparison sat_templates/templates/bulma/call/call.html @ 382:c573917ce388

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (call): redesign of call box: - hang up button has be moved next to other action buttons, and is now just an icon with no text, this save room and is coherent with usual A/V calls UIs - actions buttons (mute, desktop sharing, camera switching, hang up) and local video have been redesign to avoid overlapping on small screen. Local video is now a little higher. - remore video border has been suppressed
author Goffi <goffi@goffi.org>
date Fri, 18 Aug 2023 18:01:31 +0200
parents 788729e741cc
children 3c2bf7c30767
comparison
equal deleted inserted replaced
381:387c8c5a3bee 382:c573917ce388
3 {% extends 'base/base.html' %} 3 {% extends 'base/base.html' %}
4 {% endif %} 4 {% endif %}
5 5
6 {% block body %} 6 {% block body %}
7 {{ icon_defs( 7 {{ icon_defs(
8 "resize-full", "resize-small", "volume-up", "videocam", "dot-3-vert", "wrench", "user-circle", "desktop", "exchange" 8 "resize-full", "resize-small", "volume-up", "videocam", "dot-3-vert", "wrench", "user-circle", "desktop", "exchange", "phone"
9 ) }} 9 ) }}
10 <audio id="audio_player" class="is-hidden" src="{{media_path}}sounds/notifications/ring_1.mp3" preload="auto" loop></audio> 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" > 11 <section class="section is-full-below-menu" style="position: relative" >
12 <div id="containers_wrapper"> 12 <div id="containers_wrapper">
13 13
51 </div> 51 </div>
52 52
53 </div> 53 </div>
54 54
55 {# Calls #} 55 {# Calls #}
56
57
56 <div class="is-hidden is-flex is-flex-direction-column" id="call_container"> 58 <div class="is-hidden is-flex is-flex-direction-column" id="call_container">
57 59
58 <div class="columns is-1 is-centered is-vcentered m-0" id="call_header"> 60 <div class="columns is-1 is-centered is-vcentered m-0" id="call_header">
59 <div class="column p-0"> 61 <div class="column p-0">
60 <div class="columns is-mobile is-1 is-vcentered m-0"> 62 <div class="columns is-mobile is-1 is-vcentered m-0">
61 <div class="column is-narrow px-0" id="call_avatar_wrapper"></div> 63 <div class="column is-narrow px-0" id="call_avatar_wrapper"></div>
62 <div class="column" id="call_status_wrapper"></div> 64 <div class="column" id="call_status_wrapper"></div>
63 </div> 65 </div>
64 </div> 66 </div>
65 <div class="column is-narrow has-text-centered px-0" id="hangup_wrapper">
66 <button class="button is-danger" id="hangup_btn">{% trans %}Hang Up{% endtrans %}</button>
67 </div>
68 </div> 67 </div>
69 68
70 <div id="call_box" class="is-relative mt-3 is-flex-grow-1"> 69 <div id="call_box" class="is-relative mt-3 is-flex-grow-1">
71 <video id="remote_video" class="is-video-only" autoplay playsinline></video> 70 <video id="remote_video" class="is-video-only" autoplay playsinline></video>
71
72 <div class="fullscreen-btn is-video-only"> 72 <div class="fullscreen-btn is-video-only">
73 <button class="button is-light" id="full_screen_btn"> 73 <button class="button is-light" id="full_screen_btn" aria-label="{{ _('Enter full screen') }}">
74 {{ icon('resize-full', cls='image is-24x24 is-inline-block') }} 74 {{ icon('resize-full', cls='image is-24x24 is-inline-block') }}
75 </button> 75 </button>
76 <button class="button is-light is-hidden" id="exit_full_screen_btn"> 76 <button class="button is-light is-hidden" id="exit_full_screen_btn" aria-label="{{ _('Exit full screen') }}">
77 {{ icon('resize-small', cls='image is-24x24 is-inline-block') }} 77 {{ icon('resize-small', cls='image is-24x24 is-inline-block') }}
78 </button> 78 </button>
79 </div> 79 </div>
80
80 <video id="local_video" class="is-video-only" autoplay playsinline></video> 81 <video id="local_video" class="is-video-only" autoplay playsinline></video>
81 82
82 <div class="controls is-flex is-justify-content-center is-align-items-center p-4"> 83 <div class="call-controls columns is-centered is-mobile">
83 <button class="button is-success mx-2" id="mute_audio_btn"> 84 <div class="column is-narrow">
84 {{ icon('volume-up', cls='image is-24x24 is-inline-block') }} 85 <button class="button is-success" id="mute_audio_btn" aria-label="{{ _('Mute audio') }}">
85 </button> 86 {{ icon('volume-up', cls='image is-24x24 is-inline-block') }}
86 <button class="button is-success mx-2 is-video-only" id="mute_video_btn"> 87 </button>
87 {{ icon('videocam', cls='image is-24x24 is-inline-block') }} 88 </div>
88 </button> 89 <div class="column is-narrow">
89 <button class="button is-success mx-2 inactive screen-off is-hidden-touch" id="share_desktop_btn"> 90 <button class="button is-success is-video-only" id="mute_video_btn" aria-label="{{ _('Mute video') }}">
90 {{ icon('desktop', cls='image is-24x24 is-inline-block') }} 91 {{ icon('videocam', cls='image is-24x24 is-inline-block') }}
91 </button> 92 </button>
92 <button class="button is-success mx-2" id="switch_camera_btn"> 93 </div>
93 {{ icon('exchange', cls='image is-24x24 is-inline-block') }} 94 <div id="share_desktop_column" class="column is-narrow is-hidden-touch">
94 </button> 95 <button class="button is-success inactive screen-off" id="share_desktop_btn" aria-label="{{ _('Share desktop') }}">
96 {{ icon('desktop', cls='image is-24x24 is-inline-block') }}
97 </button>
98 </div>
99 <div id="switch_camera_column" class="column is-narrow is-hidden-desktop">
100 <button class="button is-success" id="switch_camera_btn" aria-label="{{ _('Switch camera') }}">
101 {{ icon('exchange', cls='image is-24x24 is-inline-block') }}
102 </button>
103 </div>
104 <div class="column is-narrow">
105 <button class="button is-danger" id="hangup_btn" aria-label="{{ _('Hang up') }}">
106 {{ icon('phone', cls='image is-24x24 is-inline-block') }}
107 </button>
108 </div>
109 </div>
95 110
96 </div>
97 </div> 111 </div>
98 </div> 112 </div>
99
100 </div> 113 </div>
101 </section> 114 </section>
102 {% endblock body %} 115 {% endblock body %}