Merge pull request #7569 from Slowlife01/mediadevice

feat(MediaController): controls for media devices

src/browser/base/content/zen-media-controls.inc.xhtml

@@ -36,6 +36,12 @@
           class="toolbarbutton-1" />
         <toolbarbutton id="zen-media-mute-button"
           class="toolbarbutton-1" />
+        <hbox id="media-device-buttons">
+          <toolbarbutton id="zen-media-mute-mic-button"
+            class="toolbarbutton-1" />
+          <toolbarbutton id="zen-media-mute-camera-button"
+            class="toolbarbutton-1" />
+        </hbox>
       </hbox>
     </vbox>
   </toolbaritem>

src/browser/base/content/zen-sidebar-icons.inc.xhtml

@@ -1,4 +1,4 @@
-#include zen-media-player.inc.xhtml
+#include zen-media-controls.inc.xhtml
 <toolbar brighttext="true"
   id="zen-sidebar-bottom-buttons"
   fullscreentoolbar="true"

src/browser/base/content/zen-styles/zen-media-controls.css

@@ -19,6 +19,20 @@
     --toolbarbutton-outer-padding: 2px;
   }
 
+  &:not([media-sharing]) {
+    #media-device-buttons {
+      display: none;
+    }
+  }
+
+  &[media-sharing] #zen-media-controls-hbox > toolbarbutton:not(:first-child) {
+    display: none;
+
+    #media-device-buttons {
+      display: flex;
+    }
+  }
+
   &:not([can-pip]) {
     #zen-media-info-vbox {
       width: calc(100% - 26px);
@@ -206,7 +220,7 @@
 }
 
 #zen-media-info-vbox {
-  #zen-media-controls-toolbar:not([media-position-hidden='true']) & {
+  #zen-media-controls-toolbar:not([media-position-hidden]) & {
     transition-delay: 0.01s !important;
   }
   overflow-x: hidden;
@@ -251,7 +265,7 @@
   align-items: center;
   padding-top: 0px !important;
 
-  #zen-media-controls-toolbar[media-position-hidden='true'] & {
+  #zen-media-controls-toolbar[media-position-hidden] & {
     display: none;
   }
 }