# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1692023506 -7200
# Node ID a603cf0fa5d11adf0aa99e343629e2d5191d5ee3
# Parent  a5a80d761e3eb2a234a637d4eea560cea9f15536
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

diff -r a5a80d761e3e -r a603cf0fa5d1 sat_templates/templates/bulma/call/call.html
--- a/sat_templates/templates/bulma/call/call.html	Wed Aug 09 00:11:39 2023 +0200
+++ b/sat_templates/templates/bulma/call/call.html	Mon Aug 14 16:31:46 2023 +0200
@@ -5,7 +5,7 @@
 
 {% block body %}
     {{ icon_defs(
-    "resize-full", "resize-small", "volume-up", "videocam", "dot-3-vert", "wrench", "user-circle"
+    "resize-full", "resize-small", "volume-up", "videocam", "dot-3-vert", "wrench", "user-circle", "desktop"
     ) }}
     <audio id="audio_player" class="is-hidden" src="{{media_path}}sounds/notifications/ring_1.mp3" preload="auto" loop></audio>
     <section class="section is-full-below-menu" style="position: relative" >
@@ -61,7 +61,7 @@
                     {{ icon('resize-small', cls='image is-24x24 is-inline-block') }}
                 </button>
             </div>
-            <video id="local_video" class="is-video-only" autoplay playsinline muted></video>
+            <video id="local_video" class="is-video-only" autoplay playsinline></video>
 
             <div class="controls is-flex is-justify-content-center is-align-items-center p-4">
                 <button class="button is-success mx-2" id="mute_audio_btn">
@@ -70,6 +70,9 @@
                 <button class="button is-success mx-2 is-video-only" id="mute_video_btn">
                     {{ icon('videocam', cls='image is-24x24 is-inline-block') }}
                 </button>
+                <button class="button is-success mx-2 inactive screen-off is-hidden-touch" id="share_desktop_btn">
+                    {{ icon('desktop', cls='image is-24x24 is-inline-block') }}
+                </button>
             </div>
         </div>
     </div>
diff -r a5a80d761e3e -r a603cf0fa5d1 sat_templates/templates/bulma/static/call.css
--- a/sat_templates/templates/bulma/static/call.css	Wed Aug 09 00:11:39 2023 +0200
+++ b/sat_templates/templates/bulma/static/call.css	Mon Aug 14 16:31:46 2023 +0200
@@ -57,16 +57,23 @@
   z-index: 2;
 }
 
-.muted::after {
+.inactive::after {
     content: "/";
     position: absolute;
     font-size: 50px;
-    color: red;
     top: 43%;
     left: 52%;
     transform: translate(-50%, -50%) rotate(45deg);
 }
 
+.muted::after {
+    color: red;
+}
+
+.screen-off::after {
+    color: #999;
+}
+
 .dropdown .dropdown-menu {
   display: none;
 }