Element Web and Desktop

Version 1.7.34 introduced several UI and functional improvements, including:

• Message Bubble Layout: A new layout for message bubbles.
• Media Handling: The download button for media was moved to the action bar, and images in the lightbox can now be zoomed to the cursor position.
• Room & Space Navigation: Clicking a space notification dot now navigates to the first room with notifications. A "Copy Link" option was added to the room context menu.
• Audio Control: The system now ensures only one audio file plays at a time.
• Call History: Improved display of one-to-one call history using summary boxes.
• Settings: A refresh of the Notification settings UI.
• Protocol Support: Initial support for MSC3083 and MSC3244, and addition of matrix: to the list of permitted URL schemes.

Element Android (1.0.5+) supports custom Jitsi domains.

• Call Creation: When creating a conference via the toolbar buttons in a room with >2 members, Android uses a wrapper hosted on app.element.io. The domain is determined by the /.well-known/matrix/client endpoint, falling back to the config.json value (meet.element.io) if not found.
• Active Widgets: For existing Jitsi widgets in a room, Android creates a native UI that points to the instance specified in the domain key of the widget's content data.
• Permissions: Unlike web widgets, Android requests Jitsi widget permissions only once per domain, saving the consent in account data.

The BACAT mechanism relies on the following lifecycle during updates:

1. Trigger: componentDidUpdate is called when tiles are updated, added, or removed.
2. Check: checkScroll is invoked, which in turn calls restoreSavedScrollState.
3. Bottom Growth: If content below the viewport grows, this.bottomGrowth is increased. This value represents the extra height added to the timeline (on top of the standard PAGE_SIZE multiples) to compensate for that growth. This is cleared during the next updateHeight run.
4. Height Recalculation: updateHeight waits for a 100ms period of user inactivity (no scrolling) and then recalculates the required number of 400px pages to ensure all content is visible.
5. Offset Adjustment: After the 100ms pause, the scroll offset is adjusted to account for changes in the space above the viewport.

When configuring widget_permissions, the module follows these rules to determine which settings apply to a widget:

1. Pattern Matching:
   • Patterns ending in * are treated as prefix matches.
   • Patterns without a trailing * must match the widget URL exactly.
2. Precedence: If multiple rules match a single widget, the most specific match wins for each individual field.
3. Capabilities Behavior: The capabilities_approved allow-list is not merged across multiple matching rules. Instead, the most specific rule that defines a capabilities_approved list will be the one used entirely.

Element uses feature flags (often referred to as 'labs') to enable experimental functionality. Users or developers can enable specific features by toggling their corresponding flags.

Historical flags mentioned in documentation include:

• feature_bridge_state
• feature_ftue_dms
• feature_dm_verification
• feature_user_info_panel (merged into feature_dm_verification)
• Mjolnir (labs documentation available)

Enables LaTeX mathematical notation rendering in messages using KaTeX.

• Inline maths: Wrap LaTeX between single dollar-signs (e.g., $x^2$).
• Display maths: Wrap LaTeX between double dollar-signs to render it centered on its own line (e.g., $$E=mc^2$$).

$inline math$ and $$display math$$

You can hide specific UI actions (such as inviting users, creating rooms, or creating spaces) by implementing a customisation module based on ComponentVisibility.

Use the shouldShowComponent(component: UIComponent): boolean function to control visibility. If the function returns false, all UI components associated with that feature will be hidden. Note that even if a component is shown, the user's Matrix permissions might still result in the component being disabled (e.g., an invite button appearing but being unclickable).

function shouldShowComponent(component: UIComponent): boolean {
    if (component === UIComponent.CreateSpaces) {
        // customConditionCheck() is a function of your own creation
        const userMeetsCondition = customConditionCheck(MatrixClientPeg.get().getUserId());
        return userMeetsCondition;
    }
    return true;
}