Mercurial > libervia-templates
comparison sat_templates/templates/bulma/call/call.html @ 372:a603cf0fa5d1
bulma (call): add a button for screen sharing:
- add a button for screen sharing, only on desktop
- split `muted` state to `inactive` and `muted` where `muted` is only about the color
- use the `inactive` state with an other color (in `screen-off` class) to indicate when
screen is not shared
rel 432
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Mon, 14 Aug 2023 16:31:46 +0200 |
| parents | a5a80d761e3e |
| children | 5646df8bd391 |
comparison
equal
deleted
inserted
replaced
| 371:a5a80d761e3e | 372:a603cf0fa5d1 |
|---|---|
| 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" | 8 "resize-full", "resize-small", "volume-up", "videocam", "dot-3-vert", "wrench", "user-circle", "desktop" |
| 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 |
| 59 </button> | 59 </button> |
| 60 <button class="button is-light is-hidden" id="exit_full_screen_btn"> | 60 <button class="button is-light is-hidden" id="exit_full_screen_btn"> |
| 61 {{ icon('resize-small', cls='image is-24x24 is-inline-block') }} | 61 {{ icon('resize-small', cls='image is-24x24 is-inline-block') }} |
| 62 </button> | 62 </button> |
| 63 </div> | 63 </div> |
| 64 <video id="local_video" class="is-video-only" autoplay playsinline muted></video> | 64 <video id="local_video" class="is-video-only" autoplay playsinline></video> |
| 65 | 65 |
| 66 <div class="controls is-flex is-justify-content-center is-align-items-center p-4"> | 66 <div class="controls is-flex is-justify-content-center is-align-items-center p-4"> |
| 67 <button class="button is-success mx-2" id="mute_audio_btn"> | 67 <button class="button is-success mx-2" id="mute_audio_btn"> |
| 68 {{ icon('volume-up', cls='image is-24x24 is-inline-block') }} | 68 {{ icon('volume-up', cls='image is-24x24 is-inline-block') }} |
| 69 </button> | 69 </button> |
| 70 <button class="button is-success mx-2 is-video-only" id="mute_video_btn"> | 70 <button class="button is-success mx-2 is-video-only" id="mute_video_btn"> |
| 71 {{ icon('videocam', cls='image is-24x24 is-inline-block') }} | 71 {{ icon('videocam', cls='image is-24x24 is-inline-block') }} |
| 72 </button> | 72 </button> |
| 73 <button class="button is-success mx-2 inactive screen-off is-hidden-touch" id="share_desktop_btn"> | |
| 74 {{ icon('desktop', cls='image is-24x24 is-inline-block') }} | |
| 75 </button> | |
| 73 </div> | 76 </div> |
| 74 </div> | 77 </div> |
| 75 </div> | 78 </div> |
| 76 | 79 |
| 77 </div> | 80 </div> |