comparison sat_templates/templates/bulma/call/call.html @ 395:5072e4a4e261

call: update template to handle remote control mode. rel 436
author Goffi <goffi@goffi.org>
date Sat, 11 May 2024 13:55:03 +0200
parents 3c2bf7c30767
children 9847e6dbeefa
comparison
equal deleted inserted replaced
394:3c2bf7c30767 395:5072e4a4e261
65 </div> 65 </div>
66 </div> 66 </div>
67 </div> 67 </div>
68 68
69 <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">
70 <video id="remote_video" class="is-video-only" autoplay playsinline></video> 70 <video id="remote_video" class="is-video-only" autoplay playsinline tabindex="0"></video>
71 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" aria-label="{{ _('Enter full screen') }}"> 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" aria-label="{{ _('Exit full screen') }}"> 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
81 <video id="local_video" class="is-video-only" autoplay playsinline></video> 81 <video id="local_video" class="is-video-only is-not-remote" autoplay playsinline></video>
82 82
83 <div class="call-controls columns is-centered is-mobile is-multiline"> 83 <div class="call-controls columns is-centered is-mobile is-multiline">
84 <div class="column is-narrow"> 84 <div class="column is-narrow">
85 <button class="button is-success" id="mute_audio_btn" aria-label="{{ _('Mute audio') }}"> 85 <button class="button is-success is-not-remote" id="mute_audio_btn" aria-label="{{ _('Mute audio') }}">
86 {{ icon('mic', cls='image is-24x24 is-inline-block') }} 86 {{ icon('mic', cls='image is-24x24 is-inline-block') }}
87 </button> 87 </button>
88 </div> 88 </div>
89 <div class="column is-narrow"> 89 <div class="column is-narrow">
90 <button class="button is-success is-video-only" id="mute_video_btn" aria-label="{{ _('Mute video') }}"> 90 <button class="button is-success is-video-only is-not-remote" id="mute_video_btn" aria-label="{{ _('Mute video') }}">
91 {{ icon('videocam', cls='image is-24x24 is-inline-block') }} 91 {{ icon('videocam', cls='image is-24x24 is-inline-block') }}
92 </button> 92 </button>
93 </div> 93 </div>
94 <div id="share_desktop_column" class="column is-narrow is-hidden-touch is-video-only"> 94 <div id="share_desktop_column" class="column is-narrow is-hidden-touch is-video-only is-not-remote">
95 <button class="button is-success inactive screen-off" id="share_desktop_btn" aria-label="{{ _('Share desktop') }}"> 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') }} 96 {{ icon('desktop', cls='image is-24x24 is-inline-block') }}
97 </button> 97 </button>
98 </div> 98 </div>
99 <div id="switch_camera_column" class="column is-narrow is-hidden-desktop"> 99 <div id="switch_camera_column" class="column is-narrow is-hidden-desktop is-not-remote">
100 <button class="button is-success" id="switch_camera_btn" aria-label="{{ _('Switch camera') }}"> 100 <button class="button is-success" id="switch_camera_btn" aria-label="{{ _('Switch camera') }}">
101 {{ icon('exchange', cls='image is-24x24 is-inline-block') }} 101 {{ icon('exchange', cls='image is-24x24 is-inline-block') }}
102 </button> 102 </button>
103 </div> 103 </div>
104 <div class="column is-narrow"> 104 <div class="column is-narrow is-not-remote">
105 <button class="button " id="send_file_btn" aria-label="{{ _('Send file') }}"> 105 <button class="button " id="send_file_btn" aria-label="{{ _('Send file') }}">
106 {{ icon('doc', cls='image is-24x24 is-inline-block') }} 106 {{ icon('doc', cls='image is-24x24 is-inline-block') }}
107 </button> 107 </button>
108 <input type="file" id="send_file_input" style="display:none;" /> 108 <input type="file" id="send_file_input" style="display:none;" />
109 </div> 109 </div>