feat(prejoin_page) Add settings buttons

poshest · Mar 25, 2020 · 08f55cc · 08f55cc
1 parent 17ca972
commit 08f55cc
Show file tree

Hide file tree

Showing 40 changed files with 2,070 additions and 11 deletions.
diff --git a/config.js b/config.js
@@ -264,6 +264,11 @@ var config = {
     // a call is hangup.
     // enableClosePage: false,
 
+    // Enabling pre join page will add an additional step before starting the meeting,
+    // where the user can configure its devices and choose the way he
+    // joins audio (by phone/or web).
+    // prejoinPageEnabled: false,
+
     // Disable hiding of remote thumbnails when in a 1-on-1 conference call.
     // disable1On1Mode: false,
 

diff --git a/css/_atlaskit_overrides.scss b/css/_atlaskit_overrides.scss
@@ -48,3 +48,19 @@
 .toolbox-button-wth-dialog .eYJELv {
     max-height: initial;
 }
+
+/**
+ * Override @atlaskit/InlineDialog styling for the video preview
+ */
+.video-preview .eYJELv {
+    outline: none;
+    padding: 16px;
+}
+
+/**
+ * Override @atlaskit/InlineDialog styling for the audio preview
+ */
+.audio-preview .eYJELv {
+    outline: none;
+    padding: 0;
+}
diff --git a/css/_audio-preview.css b/css/_audio-preview.css
@@ -0,0 +1,124 @@
+.audio-preview {
+    &-content {
+        font-size: 15px;
+        line-height: 24px;
+        max-height: 456px;
+        overflow: auto;
+        width: 328px;
+    }
+
+    &-header {
+        color: #fff;
+        display: flex;
+        padding: 16px;
+
+        &-icon {
+            display: inline-block;
+        }
+
+        &-text {
+            font-weight: bold;
+            margin-left: 8px;
+        }
+    }
+
+    &-entry {
+        align-items: center;
+        color: #fff;
+        cursor: pointer;
+        display: flex;
+        padding: 12px 0;
+        margin-left: 48px;
+
+        &--selected {
+            background: rgba(28,32,37,0.5);
+            cursor: initial;
+            margin-left: 0;
+            padding-left: 21px;
+        }
+
+        &-text {
+            color: #fff;
+            font-size: 15px;
+            display: inline-block;
+            line-height: 24px;
+            text-overflow: ellipsis;
+            max-width: 213px;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+
+    &-speaker {
+        position: relative;
+
+        &:hover {
+            .audio-preview-entry {
+                background: rgba(255,255,255, 0.2);
+                margin-left: 0;
+                padding-left: 48px;
+
+                &--selected {
+                    padding-left: 21px;
+                }
+            }
+
+            .audio-preview-test-button {
+                display: inline-block;
+            }
+        }
+
+        .audio-preview-entry-text {
+            max-width: 256px;
+        }
+    }
+
+    &-microphone {
+        position: relative;
+    }
+
+
+    &-icon {
+        border-radius: 50%;
+        display: inline-block;
+        width: 14px;
+
+        & svg {
+            fill: #1C2025;
+        }
+
+        &--check {
+            background: #31B76A;
+            margin-right: 13px;
+        }
+
+        &--exclamation {
+            margin-left: 6px;
+            & svg {
+                fill: #E54B4B;
+            }
+        }
+    }
+
+    &-test-button {
+        display: none;
+        background: #FFF;
+        border: 1px solid #D1DBE8;
+        border-radius: 3px;
+        color: #1C2025;
+        cursor: pointer;
+        font-weight: 600;
+        font-size: 15px;
+        line-height: 24px;
+        padding: 4px 16px;
+        position: absolute;
+        right: 16px;
+        top: 8px;
+    }
+
+    &-meter-mic {
+        position: absolute;
+        right: 16px;
+        top: 18px;
+    }
+}
diff --git a/css/_meter.css b/css/_meter.css
@@ -0,0 +1,33 @@
+.jitsi-icon {
+    &.metr {
+        display: inline-block;
+
+        & > svg {
+            fill: #76CF9C;
+            width: 38px;
+        }
+    }
+
+    &.metr--disabled {
+        & > svg {
+            fill: #5E6D7A;
+        }
+    }
+}
+
+.metr-l-0 {
+    rect:first-child {
+        fill: #279255;
+    }
+}
+
+@for $i from 1 through 7 {
+    .metr-l-#{$i} {
+        rect:nth-child(-n+#{$i+1}) {
+            fill: #31B76A;
+        }
+        rect:first-child {
+            fill: #279255;
+        }
+    }
+}
diff --git a/css/_settings-button.scss b/css/_settings-button.scss
@@ -0,0 +1,76 @@
+.settings-button {
+    &-container {
+        position: relative;
+
+        .toolbox-icon {
+            align-items: center;
+            cursor: pointer;
+            display: flex;
+            background-color: #fff;
+            border-radius: 50%;
+            border: 1px solid #d1dbe8;
+            justify-content: center;
+            width: 38px;
+            height: 38px;
+
+            &:hover {
+                background-color: #daebfa;
+                border: 1px solid #daebfa;
+            }
+
+            &.toggled {
+                background: #2a3a4b;
+                border: 1px solid #5e6d7a;
+
+                svg {
+                    fill: #fff;
+                }
+
+                &:hover {
+                    background-color: #5e6d7a;
+                }
+            }
+
+            &.disabled, .disabled & {
+                cursor: initial;
+                color: #fff;
+                background-color: #a4b8d1;
+            }
+
+            svg {
+                fill: #5e6d7a;
+            }
+        }
+    }
+
+    &-small-icon {
+        background: #FFF;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 50%;
+        bottom: 0;
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+        cursor: pointer;
+        height: 18px;
+        position: absolute;
+        text-align: center;
+        right: 2px;
+        width: 18px;
+
+        &:hover {
+            background-color: #daebfa;
+        }
+
+        &> svg {
+            margin-top: 5px;
+        }
+
+        &--disabled {
+            background-color: #a4b8d1;
+            cursor: default;
+
+            &:hover {
+                background-color: #a4b8d1;
+            }
+        }
+    }
+}
diff --git a/css/_video-preview.css b/css/_video-preview.css
@@ -0,0 +1,43 @@
+.video-preview {
+    &-entry {
+        cursor: pointer;
+        height: 135px;
+        margin-bottom: 16px;
+        position: relative;
+        width: 240px;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &--selected {
+            border: 3px solid #31B76A;
+            cursor: default;
+            height: 129px;
+            width: 234px;
+        }
+    }
+
+    &-video {
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+    }
+
+    &-overlay {
+        background: rgba(42, 58, 75, 0.6);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+    }
+
+    &-error {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        position: absolute;
+        width: 100%;
+    }
+}
diff --git a/css/main.scss b/css/main.scss
@@ -86,5 +86,9 @@ $flagsImagePath: "../images/";
 @import 'avatar';
 @import 'promotional-footer';
 @import 'chrome-extension-banner';
+@import 'settings-button';
+@import 'meter';
+@import 'audio-preview';
+@import 'video-preview';
 
 /* Modules END */
diff --git a/lang/main.json b/lang/main.json
@@ -532,6 +532,7 @@
         "selectAudioOutput": "Audio output",
         "selectCamera": "Camera",
         "selectMic": "Microphone",
+        "speakers": "Speakers",
         "startAudioMuted": "Everyone starts muted",
         "startVideoMuted": "Everyone starts hidden",
         "title": "Settings"
@@ -647,7 +648,7 @@
         "noAudioSignalDesc": "If you did not purposely mute it from system settings or hardware, consider switching the device.",
         "noAudioSignalDescSuggestion": "If you did not purposely mute it from system settings or hardware, consider switching to the suggested device.",
         "noAudioSignalDialInDesc": "You can also dial-in using:",
-        "noAudioSignalDialInLinkDesc" : "Dial-in numbers",
+        "noAudioSignalDialInLinkDesc": "Dial-in numbers",
         "noisyAudioInputTitle": "Your microphone appears to be noisy!",
         "noisyAudioInputDesc": "It sounds like your microphone is making noise, please consider muting or changing the device.",
         "openChat": "Open chat",

diff --git a/react/features/base/devices/actions.js b/react/features/base/devices/actions.js
@@ -216,6 +216,18 @@ export function setAudioInputDevice(deviceId) {
     };
 }
 
+/**
+ * Updates the output device id.
+ *
+ * @param {string} deviceId - The id of the new output device.
+ * @returns {Function}
+ */
+export function setAudioOutputDevice(deviceId) {
+    return function(dispatch) {
+        return setAudioOutputDeviceId(deviceId, dispatch);
+    };
+}
+
 /**
  * Signals to update the currently used video input device.
  *