Mercurial > libervia-templates

comparison sat_templates/templates/bulma/call/call.html @ 396:9847e6dbeefa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (call): add group call related templates. rel: 430
author Goffi <goffi@goffi.org>
date Wed, 15 May 2024 17:39:47 +0200
parents 5072e4a4e261
children 140690a18b63
comparison
equal deleted inserted replaced
395:5072e4a4e261 396:9847e6dbeefa
42 <span class="icon"> 42 <span class="icon">
43 <i class="icon-phone"></i> 43 <i class="icon-phone"></i>
44 </span> 44 </span>
45 </button> 45 </button>
46 </div> 46 </div>
47
48 <!-- Group Call Button -->
49 <div class="column is-narrow is-hidden">
50 <button class="button is-info" id="group_call_btn" aria-label="Initiate Group Call">
51 <span class="icon">
52 <i class="icon-group"></i>
53 </span>
54 <span>Group Call</span>
55 </button>
56 </div>
57
47 </div> 58 </div>
48 </div> 59 </div>
49 60
50 <div id="contacts" class="columns is-multiline is-mobile is-half-touch"> 61 <div id="contacts" class="columns is-multiline is-mobile is-half-touch">
51 </div> 62 </div>
52 63
53 </div> 64 </div>
54 65
55 {# Calls #} 66 {# Calls #}
56
57 67
58 <div class="is-hidden is-flex is-flex-direction-column" id="call_container"> 68 <div class="is-hidden is-flex is-flex-direction-column" id="call_container">
59 69
60 <div class="columns is-1 is-centered is-vcentered m-0" id="call_header"> 70 <div class="columns is-1 is-centered is-vcentered m-0" id="call_header">
61 <div class="column p-0"> 71 <div class="column p-0">
106 {{ icon('doc', cls='image is-24x24 is-inline-block') }} 116 {{ icon('doc', cls='image is-24x24 is-inline-block') }}
107 </button> 117 </button>
108 <input type="file" id="send_file_input" style="display:none;" /> 118 <input type="file" id="send_file_input" style="display:none;" />
109 </div> 119 </div>
110 <div class="column is-narrow"> 120 <div class="column is-narrow">
111 <button class="button is-danger" id="hangup_btn" aria-label="{{ _('Hang up') }}"> 121 <button class="button is-danger is-rotated-135" id="hangup_btn" aria-label="{{ _('Hang up') }}">
112 {{ icon('phone', cls='image is-24x24 is-inline-block') }} 122 {{ icon('phone', cls='image is-24x24 is-inline-block') }}
113 </button> 123 </button>
114 </div> 124 </div>
115 </div> 125 </div>
116 126
117 </div> 127 </div>
118 </div> 128 </div>
129
130
131 {# Group Calls #}
132
133 <div class="is-hidden is-flex is-flex-direction-column" id="group_call_container">
134 <!-- Status Bar (Header) with Fullscreen Button on the Right -->
135 <div class="columns">
136 <div class="column is-11" id="group_call_status_wrapper"></div>
137 <div class="column">
138 <div class="buttons has-addons is-right">
139 <button class="button is-light" id="group_full_screen_btn">
140 {{ icon('resize-full', cls='image is-24x24 is-inline-block') }}
141 </button>
142 </div>
143 </div>
144 </div>
145
146 <!-- Peer Video Grid - Adjusted for dynamic resizing -->
147 <div class="columns is-multiline mt-3 is-flex-grow-1 is-variable is-0" id="group_video_grid" style="flex-wrap: wrap;">
148 <!-- Peer templates dynamically loaded here -->
149 </div>
150
151 <!-- Call Control for Hangup -->
152 <div class="group-call-controls columns is-centered is-mobile">
153 <div class="column is-narrow">
154 <button class="button is-danger is-rotated-135" id="group_hangup_btn">
155 {{ icon('phone', cls='image is-24x24 is-inline-block') }}
156 </button>
157 </div>
158 </div>
159 </div>
160
119 </div> 161 </div>
120 </section> 162 </section>
121 {% endblock body %} 163 {% endblock body %}