Absorb the matrix-react-sdk repository (#28192)

Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com> Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Florian Duros <florian.duros@ormaz.fr> Co-authored-by: Kim Brose <kim.brose@nordeck.net> Co-authored-by: Florian Duros <florianduros@element.io> Co-authored-by: R Midhun Suresh <hi@midhun.dev> Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com> Co-authored-by: ElementRobot <releases@riot.im> Co-authored-by: dbkr <dbkr@users.noreply.github.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: David Langley <davidl@element.io> Co-authored-by: Michael Weimann <michaelw@matrix.org> Co-authored-by: Timshel <Timshel@users.noreply.github.com> Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com> Co-authored-by: Will Hunt <will@half-shot.uk> Co-authored-by: Hubert Chathi <hubert@uhoreg.ca> Co-authored-by: Andrew Ferrazzutti <andrewf@element.io> Co-authored-by: Robin <robin@robin.town> Co-authored-by: Tulir Asokan <tulir@maunium.net>
2026-11-03 16:10:05 +00:00 · 2024-10-16 13:31:55 +01:00
parent 2b99496025
commit c05c429803
3280 changed files with 586617 additions and 905 deletions
@@ -0,0 +1,176 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021, 2022 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+/* data-whatintent makes more sense here semantically but then the tooltip would stay visible without the button */
+/* which looks broken, so we match the behaviour of tooltips which is fine too. */
+[data-whatinput="mouse"] .mx_LegacyCallViewButtons.mx_LegacyCallViewButtons_hidden {
+    opacity: 0.001; /* opacity 0 can cause a re-layout */
+    pointer-events: none;
+}
+
+.mx_LegacyCallViewButtons {
+    --LegacyCallViewButtons_dropdownButton-size: 16px;
+
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    bottom: 32px;
+    opacity: 1;
+    transition: opacity 0.5s;
+    z-index: 200; /* To be above _all_ feeds */
+    gap: 18px;
+
+    .mx_LegacyCallViewButtons_button {
+        cursor: pointer;
+
+        background-color: $call-view-button-on-background;
+
+        border-radius: 100%;
+        height: 40px;
+        width: 40px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        position: relative;
+
+        box-shadow: 0px 4px 4px 0px #00000026; /* Same on both themes */
+
+        &::before {
+            content: "";
+            display: inline-block;
+
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-position: center;
+
+            background-color: $call-view-button-on-foreground;
+
+            height: 24px;
+            width: 24px;
+        }
+
+        &.mx_LegacyCallViewButtons_dropdownButton {
+            width: var(--LegacyCallViewButtons_dropdownButton-size);
+            height: var(--LegacyCallViewButtons_dropdownButton-size);
+
+            position: absolute;
+            right: 0;
+            bottom: 0;
+
+            &::before {
+                width: 14px;
+                height: 14px;
+                mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
+            }
+
+            &.mx_LegacyCallViewButtons_dropdownButton_collapsed::before {
+                transform: rotate(180deg);
+            }
+        }
+
+        /* State buttons */
+        &.mx_LegacyCallViewButtons_button_on {
+            background-color: $call-view-button-on-background;
+
+            &::before {
+                background-color: $call-view-button-on-foreground;
+            }
+
+            &.mx_LegacyCallViewButtons_button_mic::before {
+                height: 20px;
+                mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
+                width: 20px;
+            }
+
+            &.mx_LegacyCallViewButtons_button_vid::before {
+                mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
+            }
+
+            &.mx_LegacyCallViewButtons_button_screensharing {
+                background-color: $accent;
+
+                &::before {
+                    mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg");
+                    background-color: white; /* Same on both themes */
+                }
+            }
+
+            &.mx_LegacyCallViewButtons_button_sidebar::before {
+                mask-image: url("$(res)/img/voip/call-view/sidebar-on.svg");
+            }
+        }
+
+        &.mx_LegacyCallViewButtons_button_off {
+            background-color: $call-view-button-off-background;
+
+            &::before {
+                background-color: $call-view-button-off-foreground;
+            }
+
+            &.mx_LegacyCallViewButtons_button_mic::before {
+                height: 20px;
+                mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
+                width: 20px;
+            }
+
+            &.mx_LegacyCallViewButtons_button_vid::before {
+                mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
+            }
+
+            &.mx_LegacyCallViewButtons_button_screensharing {
+                background-color: $call-view-button-on-background;
+
+                &::before {
+                    mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg");
+                    background-color: $call-view-button-on-foreground;
+                }
+            }
+
+            &.mx_LegacyCallViewButtons_button_sidebar {
+                background-color: $call-view-button-on-background;
+
+                &::before {
+                    mask-image: url("$(res)/img/voip/call-view/sidebar-off.svg");
+                    background-color: $call-view-button-on-foreground;
+                }
+            }
+        }
+        /* State buttons */
+
+        /* Stateless buttons */
+        &.mx_LegacyCallViewButtons_dialpad::before {
+            mask-image: url("$(res)/img/voip/call-view/dialpad.svg");
+        }
+
+        &.mx_LegacyCallViewButtons_button_hangup {
+            background-color: $alert;
+
+            &::before {
+                mask-image: url("$(res)/img/element-icons/call/hangup.svg");
+                background-color: white; /* Same on both themes */
+            }
+        }
+
+        &.mx_LegacyCallViewButtons_button_more::before {
+            mask-image: url("$(res)/img/voip/call-view/more.svg");
+        }
+        /* Stateless buttons */
+
+        /* Invisible state */
+        &.mx_LegacyCallViewButtons_button_invisible {
+            visibility: hidden;
+            pointer-events: none;
+            position: absolute;
+        }
+        /* Invisible state */
+    }
+}
@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CallDuration {
+    color: $secondary-content;
+    font-size: $font-12px;
+    white-space: nowrap;
+}
@@ -0,0 +1,189 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CallView {
+    flex-grow: 1;
+    min-height: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: $header-panel-bg-color;
+
+    .mx_AppTile {
+        width: auto;
+        height: 100%;
+        border: none;
+        border-radius: inherit;
+        background-color: $call-background;
+    }
+
+    /* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
+    .mx_CallView_lobby ~ .mx_AppTile {
+        display: none;
+    }
+
+    .mx_CallView_lobby {
+        min-height: 0;
+        flex-grow: 1;
+        padding: $spacing-12;
+        color: $call-primary-content;
+        background-color: $call-background;
+
+        --facepile-background: $call-background;
+        border-radius: 8px;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: $spacing-32;
+
+        .mx_FacePile {
+            width: fit-content;
+            margin: $spacing-8 auto 0;
+        }
+
+        .mx_CallView_preview {
+            position: relative;
+            width: 100%;
+            max-width: 800px;
+            aspect-ratio: 1.5;
+            background-color: $call-system;
+
+            border-radius: 20px;
+            overflow: hidden;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            .mx_BaseAvatar {
+                margin: $spacing-20;
+
+                /* Override the explicit dimensions on the element so that this gets sized responsively */
+                width: unset !important;
+                height: unset !important;
+                min-width: 0;
+                min-height: 0;
+                flex: 0 1 200px;
+            }
+
+            video {
+                position: absolute;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                display: block;
+                transform: scaleX(-1); /* flip the image */
+                background-color: black;
+            }
+
+            .mx_CallView_controls {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+
+                background-color: $info-plinth-fg-color;
+
+                display: flex;
+                justify-content: center;
+                gap: $spacing-24;
+
+                .mx_CallView_deviceButtonWrapper {
+                    position: relative;
+                    margin: 6px 0 10px;
+
+                    .mx_CallView_deviceButton {
+                        $size: 50px;
+
+                        width: $size;
+                        height: $size;
+
+                        background-color: $call-system;
+                        border-radius: calc($size / 2);
+
+                        &::before {
+                            content: "";
+                            display: inline-block;
+                            mask-repeat: no-repeat;
+                            mask-size: 20px;
+                            mask-position: center;
+                            background-color: $call-primary-content;
+                            height: 100%;
+                            width: 100%;
+                        }
+
+                        &.mx_CallView_deviceButton_audio::before {
+                            mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
+                            mask-size: 14px;
+                        }
+
+                        &.mx_CallView_deviceButton_video::before {
+                            mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
+                        }
+                    }
+
+                    .mx_CallView_deviceListButton {
+                        $size: 15px;
+
+                        position: absolute;
+                        bottom: 0;
+                        right: -2.5px;
+                        width: $size;
+                        height: $size;
+
+                        background-color: $call-system;
+                        border-radius: calc($size / 2);
+
+                        &::before {
+                            content: "";
+                            display: inline-block;
+                            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+                            mask-size: 20px;
+                            mask-position: center;
+                            background-color: $call-primary-content;
+                            height: 100%;
+                            width: 100%;
+                        }
+                    }
+
+                    &.mx_CallView_deviceButtonWrapper_muted {
+                        .mx_CallView_deviceButton,
+                        .mx_CallView_deviceListButton {
+                            background-color: $call-primary-content;
+
+                            &::before {
+                                background-color: $call-system;
+                            }
+                        }
+
+                        .mx_CallView_deviceButton {
+                            &.mx_CallView_deviceButton_audio::before {
+                                mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
+                                mask-size: 18px;
+                            }
+
+                            &.mx_CallView_deviceButton_video::before {
+                                mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .mx_CallView_connectButton {
+            padding-left: 50px;
+            padding-right: 50px;
+        }
+    }
+}
@@ -0,0 +1,59 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_DialPad {
+    display: grid;
+    row-gap: 16px;
+    column-gap: 0px;
+    margin-top: 24px;
+    margin-left: auto;
+    margin-right: auto;
+
+    /* squeeze the dial pad buttons together horizontally */
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.mx_DialPad_button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    width: 40px;
+    height: 40px;
+    background-color: $quinary-content;
+    border-radius: 40px;
+    font-size: 18px;
+    font-weight: var(--cpd-font-weight-semibold);
+    text-align: center;
+    vertical-align: middle;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mx_DialPad_button .mx_DialPad_buttonSubText {
+    font-size: 8px;
+}
+
+.mx_DialPad_dialButton {
+    /* Always show the dial button in the center grid column */
+    grid-column: 2;
+    background-color: $accent;
+
+    &::before {
+        content: "";
+        display: inline-block;
+        height: 40px;
+        width: 40px;
+        vertical-align: middle;
+        mask-repeat: no-repeat;
+        mask-size: 20px;
+        mask-position: center;
+        background-color: #fff; /* on all themes */
+        mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
+    }
+}
@@ -0,0 +1,63 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_DialPadContextMenu_dialPad .mx_DialPad {
+    row-gap: 16px;
+    column-gap: 32px;
+}
+
+.mx_DialPadContextMenuWrapper {
+    padding: 15px;
+}
+
+.mx_DialPadContextMenu_header {
+    border: none;
+    margin-top: 32px;
+    margin-left: 20px;
+    margin-right: 20px;
+
+    /* a separator between the input line and the dial buttons */
+    border-bottom: 1px solid $quaternary-content;
+    transition: border-bottom 0.25s;
+}
+
+.mx_DialPadContextMenu_cancel {
+    @mixin customisedCancelButton;
+    float: right;
+}
+
+.mx_DialPadContextMenu_header:focus-within {
+    border-bottom: 1px solid $accent;
+}
+
+.mx_DialPadContextMenu_title {
+    color: $muted-fg-color;
+    font-size: 12px;
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.mx_DialPadContextMenu_dialled {
+    height: 1.5em;
+    font-size: 18px;
+    font-weight: var(--cpd-font-weight-semibold);
+    border: none;
+    margin: 0px;
+}
+.mx_DialPadContextMenu_dialled input {
+    font-size: 18px;
+    font-weight: var(--cpd-font-weight-semibold);
+    overflow: hidden;
+    max-width: 185px;
+    text-align: left;
+    padding: 8px 0px;
+    background-color: rgb(0, 0, 0, 0);
+}
+
+.mx_DialPadContextMenu_dialPad {
+    margin: 16px;
+}
@@ -0,0 +1,65 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_Dialog_dialPadWrapper .mx_Dialog {
+    padding: 0px;
+}
+
+.mx_DialPadModal {
+    width: 292px;
+    height: 370px;
+    padding: 16px 0px 0px 0px;
+}
+
+.mx_DialPadModal_header {
+    margin-top: 32px;
+    margin-left: 40px;
+    margin-right: 40px;
+
+    /* a separator between the input line and the dial buttons */
+    border-bottom: 1px solid $quaternary-content;
+    transition: border-bottom 0.25s;
+}
+
+.mx_DialPadModal_header:focus-within {
+    border-bottom: 1px solid $accent;
+}
+
+.mx_DialPadModal_title {
+    color: $muted-fg-color;
+    font-size: 12px;
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.mx_DialPadModal_cancel {
+    @mixin customisedCancelButton;
+    float: right;
+    margin-right: 16px;
+}
+
+.mx_DialPadModal_field {
+    border: none;
+    margin: 0px;
+    height: 30px;
+}
+
+.mx_DialPadModal_field .mx_Field_postfix {
+    /* Remove border separator between postfix and field content */
+    border-left: none;
+}
+
+.mx_DialPadModal_field input {
+    font-size: 18px;
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.mx_DialPadModal_dialPad {
+    margin-left: 16px;
+    margin-right: 16px;
+    margin-top: 16px;
+}
@@ -0,0 +1,28 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LegacyCallPreview {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-16;
+    left: 0;
+    position: fixed;
+    top: 0;
+    /* Display above any widget elements */
+    z-index: 102;
+
+    .mx_VideoFeed_remote.mx_VideoFeed_voice {
+        min-height: 150px;
+    }
+
+    .mx_VideoFeed_local {
+        border-radius: 8px;
+        overflow: hidden;
+    }
+}
@@ -0,0 +1,191 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021, 2022 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LegacyCallView {
+    border-radius: 8px;
+    background-color: $dark-panel-bg-color;
+    padding-left: 8px;
+    padding-right: 8px;
+    /* XXX: PiPContainer sets pointer-events: none - should probably be set back in a better place */
+    pointer-events: initial;
+
+    .mx_LegacyCallView_toast {
+        position: absolute;
+        top: 74px;
+
+        padding: 4px 8px;
+
+        border-radius: 4px;
+        z-index: 50;
+
+        /* Same on both themes */
+        color: white;
+        background-color: #17191c;
+    }
+
+    .mx_LegacyCallView_content_wrapper {
+        display: flex;
+        justify-content: center;
+
+        width: 100%;
+        height: 100%;
+
+        overflow: hidden;
+
+        .mx_LegacyCallView_content {
+            position: relative;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            flex: 1;
+            overflow: hidden;
+
+            border-radius: 10px;
+
+            padding: 10px;
+            padding-right: calc(20% + 20px); /* Space for the sidebar */
+
+            background-color: $call-view-content-background;
+
+            .mx_LegacyCallView_status {
+                z-index: 50;
+                color: $accent-fg-color;
+            }
+
+            .mx_LegacyCallView_avatarsContainer {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+
+                div {
+                    margin-left: 12px;
+                    margin-right: 12px;
+                }
+            }
+
+            .mx_LegacyCallView_holdBackground {
+                position: absolute;
+                left: 0;
+                right: 0;
+
+                width: 100%;
+                height: 100%;
+
+                background-repeat: no-repeat;
+                background-size: cover;
+                background-position: center;
+                filter: blur(20px);
+
+                &::after {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    left: 0;
+                    right: 0;
+                    background-color: rgba(0, 0, 0, 0.6);
+                }
+            }
+
+            &.mx_LegacyCallView_content_hold .mx_LegacyCallView_status {
+                font-weight: bold;
+                text-align: center;
+
+                &::before {
+                    display: block;
+                    margin-left: auto;
+                    margin-right: auto;
+                    content: "";
+                    width: 40px;
+                    height: 40px;
+                    background-image: url("$(res)/img/voip/paused.svg");
+                    background-position: center;
+                    background-size: cover;
+                }
+
+                .mx_LegacyCallView_pip &::before {
+                    width: 30px;
+                    height: 30px;
+                }
+            }
+        }
+    }
+
+    &:not(.mx_LegacyCallView_sidebar) .mx_LegacyCallView_content {
+        padding: 0;
+        width: 100%;
+        height: 100%;
+
+        .mx_VideoFeed_primary {
+            aspect-ratio: unset;
+            border: 0;
+
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &.mx_LegacyCallView_pip {
+        width: 320px;
+        padding-bottom: 8px;
+
+        border-radius: 8px;
+
+        background-color: $system;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+
+        .mx_LegacyCallViewButtons {
+            bottom: 13px;
+
+            .mx_LegacyCallViewButtons_button {
+                width: 34px;
+                height: 34px;
+
+                &.mx_LegacyCallViewButtons_dropdownButton {
+                    width: var(--LegacyCallViewButtons_dropdownButton-size);
+                    height: var(--LegacyCallViewButtons_dropdownButton-size);
+                }
+
+                &::before {
+                    width: 22px;
+                    height: 22px;
+                }
+            }
+        }
+
+        .mx_LegacyCallView_content {
+            min-height: 180px;
+        }
+    }
+
+    &.mx_LegacyCallView_large {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        flex: 1;
+
+        padding-bottom: 10px;
+
+        margin: var(--container-gap-width);
+        /* The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser. */
+        margin-right: calc(var(--container-gap-width) / 2);
+        margin-bottom: 10px;
+    }
+
+    &.mx_LegacyCallView_belowWidget {
+        margin-top: 0;
+    }
+}
@@ -0,0 +1,35 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LegacyCallViewForRoom {
+    overflow: hidden;
+
+    .mx_LegacyCallViewForRoom_ResizeWrapper {
+        display: flex;
+
+        &:hover .mx_LegacyCallViewForRoom_ResizeHandle {
+            /* Need to use important to override element style attributes */
+            /* set by re-resizable */
+            width: 100% !important;
+
+            display: flex;
+            justify-content: center;
+
+            &::after {
+                content: "";
+                border-radius: 4px;
+
+                height: 4px;
+                width: 100%;
+                max-width: 64px;
+
+                background-color: $primary-content;
+            }
+        }
+    }
+}
@@ -0,0 +1,121 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021, 2022 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LegacyCallViewHeader {
+    height: 44px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    width: 100%;
+
+    &.mx_LegacyCallViewHeader_pip {
+        cursor: grab;
+    }
+}
+
+.mx_LegacyCallViewHeader_text {
+    font-size: 1.2rem;
+    font-weight: bold;
+    vertical-align: middle;
+}
+
+.mx_LegacyCallViewHeader_secondaryCallInfo {
+    &::before {
+        content: "·";
+        margin-left: 6px;
+        margin-right: 6px;
+    }
+}
+
+.mx_LegacyCallViewHeader_controls {
+    margin-left: auto;
+    display: flex;
+    gap: 5px;
+}
+
+.mx_LegacyCallViewHeader_button {
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+
+    &::before {
+        content: "";
+        display: inline-block;
+        height: 20px;
+        width: 20px;
+        vertical-align: middle;
+        background-color: $secondary-content;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+    }
+
+    &.mx_LegacyCallViewHeader_button_fullscreen {
+        &::before {
+            mask-image: url("$(res)/img/element-icons/call/fullscreen.svg");
+        }
+    }
+
+    &.mx_LegacyCallViewHeader_button_pin {
+        &::before {
+            mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
+        }
+    }
+
+    &.mx_LegacyCallViewHeader_button_expand {
+        &::before {
+            mask-image: url("$(res)/img/element-icons/call/expand.svg");
+        }
+    }
+}
+
+.mx_LegacyCallViewHeader_callInfo {
+    margin-left: 12px;
+    margin-right: 16px;
+    overflow: hidden;
+}
+
+.mx_LegacyCallViewHeader_roomName {
+    font-weight: bold;
+    font-size: 12px;
+    line-height: initial;
+    height: 15px;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.mx_LegacyCallView_secondaryCall_roomName {
+    margin-left: 4px;
+}
+
+.mx_LegacyCallViewHeader_icon {
+    display: inline-block;
+    margin-right: 6px;
+    height: 16px;
+    width: 16px;
+    vertical-align: middle;
+
+    &::before {
+        content: "";
+        display: inline-block;
+        vertical-align: top;
+
+        height: 16px;
+        width: 16px;
+        background-color: $secondary-content;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+        mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
+    }
+}
@@ -0,0 +1,42 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021, 2022 Šimon Brandner <simon.bra.ag@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LegacyCallViewSidebar {
+    position: absolute;
+    right: 10px;
+
+    width: 20%;
+    height: 100%;
+    overflow: auto;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    gap: 12px;
+
+    > .mx_VideoFeed {
+        width: 100%;
+        border-radius: 4px;
+
+        &.mx_VideoFeed_voice {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            background-color: $video-feed-secondary-background;
+        }
+    }
+
+    &.mx_LegacyCallViewSidebar_pipMode {
+        top: 16px;
+        bottom: unset;
+        justify-content: flex-end;
+        gap: 4px;
+    }
+}
@@ -0,0 +1,82 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021, 2022 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2015, 2016 , 2020, 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_VideoFeed {
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+    border: transparent 2px solid;
+    display: flex;
+    border-radius: 4px;
+
+    &.mx_VideoFeed_secondary {
+        position: absolute;
+        right: 24px;
+        bottom: 72px;
+        width: 20%;
+    }
+
+    &.mx_VideoFeed_voice {
+        background-color: $inverted-bg-color;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:not(.mx_VideoFeed_primary) {
+            aspect-ratio: 16 / 9;
+        }
+    }
+
+    .mx_VideoFeed_video {
+        height: 100%;
+        width: 100%;
+        border-radius: 4px;
+        background-color: #000000;
+
+        &.mx_VideoFeed_video_mirror {
+            transform: scale(-1, 1);
+        }
+    }
+
+    .mx_VideoFeed_mic {
+        position: absolute;
+        left: 6px;
+        bottom: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 24px;
+        height: 24px;
+
+        background-color: rgba(0, 0, 0, 0.5); /* Same on both themes */
+        border-radius: 100%;
+
+        &::before {
+            position: absolute;
+            content: "";
+            width: 17px;
+            height: 17px;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-position: center;
+            background-color: white; /* Same on both themes */
+            border-radius: 7px;
+        }
+
+        &.mx_VideoFeed_mic_muted::before {
+            mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
+        }
+
+        &.mx_VideoFeed_mic_unmuted::before {
+            mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
+        }
+    }
+}