[Release] Dynamic max and min zoom in the new ImageView

res/css/structures/_SpacePanel.scss

@@ -35,7 +35,7 @@ $activeBorderColor: $secondary-fg-color;
 
     .mx_SpacePanel_spaceTreeWrapper {
         flex: 1;
-        overflow-y: scroll;
+        padding: 8px 8px 16px 0;
     }
 
     .mx_SpacePanel_toggleCollapse {
@@ -59,11 +59,10 @@ $activeBorderColor: $secondary-fg-color;
         margin: 0;
         list-style: none;
         padding: 0;
-        padding-left: 16px;
-    }
 
-    .mx_AutoHideScrollbar {
-        padding: 8px 0 16px;
+        > .mx_SpaceItem {
+            padding-left: 16px;
+        }
     }
 
     .mx_SpaceButton_toggleCollapse {

res/css/structures/_SpaceRoomView.scss

@@ -214,45 +214,15 @@ $SpaceRoomViewInnerWidth: 428px;
 
             .mx_SpaceRoomView_info {
                 display: inline-block;
-                margin: 0;
+                margin: 0 auto 0 0;
             }
 
             .mx_FacePile {
                 display: inline-block;
-                margin-left: auto;
                 margin-right: 12px;
 
                 .mx_FacePile_faces {
                     cursor: pointer;
-
-                    > span:hover {
-                        .mx_BaseAvatar {
-                            filter: brightness(0.8);
-                        }
-                    }
-
-                    > span:first-child {
-                        position: relative;
-
-                        .mx_BaseAvatar {
-                            filter: brightness(0.8);
-                        }
-
-                        &::before {
-                            content: "";
-                            z-index: 1;
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            height: 30px;
-                            width: 30px;
-                            background: #ffffff; // white icon fill
-                            mask-position: center;
-                            mask-size: 24px;
-                            mask-repeat: no-repeat;
-                            mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
-                        }
-                    }
                 }
             }
 

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

@@ -148,12 +148,14 @@ limitations under the License.
                 font-size: $font-15px;
                 line-height: 30px;
                 flex-grow: 1;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-right: 12px;
             }
 
-            .mx_FormButton {
-                min-width: 92px;
-                font-weight: normal;
-                box-sizing: border-box;
+            .mx_Checkbox {
+                align-items: center;
             }
         }
     }
@@ -192,8 +194,4 @@ limitations under the License.
             padding: 0;
         }
     }
-
-    .mx_FormButton {
-        padding: 8px 22px;
-    }
 }

res/css/views/elements/_FacePile.scss

@@ -20,7 +20,7 @@ limitations under the License.
         flex-direction: row-reverse;
         vertical-align: middle;
 
-        > span + span {
+        > .mx_FacePile_face + .mx_FacePile_face {
             margin-right: -8px;
         }
 
@@ -31,9 +31,32 @@ limitations under the License.
         .mx_BaseAvatar_initial {
             margin: 1px; // to offset the border on the image
         }
+
+        .mx_FacePile_more {
+            position: relative;
+            border-radius: 100%;
+            width: 30px;
+            height: 30px;
+            background-color: $groupFilterPanel-bg-color;
+
+            &::before {
+                content: "";
+                z-index: 1;
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: inherit;
+                width: inherit;
+                background: $tertiary-fg-color;
+                mask-position: center;
+                mask-size: 20px;
+                mask-repeat: no-repeat;
+                mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
+            }
+        }
     }
 
-    > span {
+    .mx_FacePile_summary {
         margin-left: 12px;
         font-size: $font-14px;
         line-height: $font-24px;

res/css/views/elements/_ImageView.scss

@@ -31,8 +31,7 @@ limitations under the License.
 
 .mx_ImageView_image {
     pointer-events: all;
-    max-width: 95%;
-    max-height: 95%;
+    flex-shrink: 0;
 }
 
 .mx_ImageView_panel {

res/themes/dark/css/_dark.scss

@@ -85,7 +85,7 @@ $dialog-close-fg-color: #9fa9ba;
 
 $dialog-background-bg-color: $header-panel-bg-color;
 $lightbox-background-bg-color: #000;
-$lightbox-background-bg-opacity: 85%;
+$lightbox-background-bg-opacity: 0.85;
 
 $settings-grey-fg-color: #a2a2a2;
 $settings-profile-placeholder-bg-color: #21262c;

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -83,7 +83,7 @@ $dialog-close-fg-color: #9fa9ba;
 
 $dialog-background-bg-color: $header-panel-bg-color;
 $lightbox-background-bg-color: #000;
-$lightbox-background-bg-opacity: 85%;
+$lightbox-background-bg-opacity: 0.85;
 
 $settings-grey-fg-color: #a2a2a2;
 $settings-profile-placeholder-bg-color: #e7e7e7;

res/themes/legacy-light/css/_legacy-light.scss

@@ -127,7 +127,7 @@ $dialog-close-fg-color: #c1c1c1;
 
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
-$lightbox-background-bg-opacity: 95%;
+$lightbox-background-bg-opacity: 0.95;
 
 $imagebody-giflabel: rgba(0, 0, 0, 0.7);
 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);

res/themes/light/css/_light.scss

@@ -118,7 +118,7 @@ $dialog-close-fg-color: #c1c1c1;
 
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
-$lightbox-background-bg-opacity: 95%;
+$lightbox-background-bg-opacity: 0.95;
 
 $imagebody-giflabel: rgba(0, 0, 0, 0.7);
 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);

src/@types/global.d.ts

@@ -129,4 +129,30 @@ declare global {
         // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/columnNumber
         columnNumber?: number;
     }
+
+    // https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278
+    interface AudioWorkletProcessor {
+        readonly port: MessagePort;
+        process(
+            inputs: Float32Array[][],
+            outputs: Float32Array[][],
+            parameters: Record<string, Float32Array>
+        ): boolean;
+    }
+
+    // https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278
+    const AudioWorkletProcessor: {
+        prototype: AudioWorkletProcessor;
+        new (options?: AudioWorkletNodeOptions): AudioWorkletProcessor;
+    };
+
+    // https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278
+    function registerProcessor(
+        name: string,
+        processorCtor: (new (
+            options?: AudioWorkletNodeOptions
+        ) => AudioWorkletProcessor) & {
+            parameterDescriptors?: AudioParamDescriptor[];
+        }
+    );
 }

src/HtmlUtils.tsx

@@ -130,11 +130,14 @@ export function sanitizedHtmlNode(insaneHtml: string) {
     return <div dangerouslySetInnerHTML={{ __html: saneHtml }} dir="auto" />;
 }
 
-export function sanitizedHtmlNodeInnerText(insaneHtml: string) {
-    const saneHtml = sanitizeHtml(insaneHtml, sanitizeHtmlParams);
-    const contentDiv = document.createElement("div");
-    contentDiv.innerHTML = saneHtml;
-    return contentDiv.innerText;
+export function getHtmlText(insaneHtml: string) {
+    return sanitizeHtml(insaneHtml, {
+        allowedTags: [],
+        allowedAttributes: {},
+        selfClosing: [],
+        allowedSchemes: [],
+        disallowedTagsMode: 'discard',
+    })
 }
 
 /**

src/components/views/elements/FacePile.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { HTMLAttributes } from "react";
+import React, { HTMLAttributes, ReactNode, useContext } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { sortBy } from "lodash";
@@ -24,6 +24,7 @@ import { _t } from "../../../languageHandler";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import TextWithTooltip from "../elements/TextWithTooltip";
 import { useRoomMembers } from "../../../hooks/useRoomMembers";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 const DEFAULT_NUM_FACES = 5;
 
@@ -36,6 +37,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
 const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
 
 const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IProps) => {
+    const cli = useContext(MatrixClientContext);
     let members = useRoomMembers(room);
 
     // sort users with an explicit avatar first
@@ -46,21 +48,42 @@ const FacePile = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, .
         // sort known users first
         iteratees.unshift(member => isKnownMember(member));
     }
-    if (members.length < 1) return null;
 
-    const shownMembers = sortBy(members, iteratees).slice(0, numShown);
+    // exclude ourselves from the shown members list
+    const shownMembers = sortBy(members.filter(m => m.userId !== cli.getUserId()), iteratees).slice(0, numShown);
+    if (shownMembers.length < 1) return null;
+
+    // We reverse the order of the shown faces in CSS to simplify their visual overlap,
+    // reverse members in tooltip order to make the order between the two match up.
+    const commaSeparatedMembers = shownMembers.map(m => m.rawDisplayName).reverse().join(", ");
+
+    let tooltip: ReactNode;
+    if (props.onClick) {
+        tooltip = <div>
+            <div className="mx_Tooltip_title">
+                { _t("View all %(count)s members", { count: members.length }) }
+            </div>
+            <div className="mx_Tooltip_sub">
+                { _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers }) }
+            </div>
+        </div>;
+    } else {
+        tooltip = _t("%(count)s members including %(commaSeparatedMembers)s", {
+            count: members.length,
+            commaSeparatedMembers,
+        });
+    }
+
     return <div {...props} className="mx_FacePile">
-        <div className="mx_FacePile_faces">
-            { shownMembers.map(member => {
-                return <TextWithTooltip key={member.userId} tooltip={member.name}>
-                    <MemberAvatar member={member} width={28} height={28} />
-                </TextWithTooltip>;
-            }) }
-        </div>
-        { onlyKnownUsers && <span>
+        <TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
+            { members.length > numShown ? <span className="mx_FacePile_face mx_FacePile_more" /> : null }
+            { shownMembers.map(m =>
+                <MemberAvatar key={m.userId} member={m} width={28} height={28} className="mx_FacePile_face" /> )}
+        </TextWithTooltip>
+        { onlyKnownUsers && <span className="mx_FacePile_summary">
             { _t("%(count)s people you know have already joined", { count: members.length }) }
         </span> }
-    </div>
+    </div>;
 };
 
 export default FacePile;