@placetime/corptime-conference 1.0.12 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@placetime/corptime-conference",
-    "version": "1.0.12",
+    "version": "1.0.13",
     "description": "React Native SDK from Corptime-Conference",
     "main": "index.tsx",
     "license": "Apache-2.0",

package/react/features/base/config/middleware.ts

@@ -0,0 +1,225 @@
+import { AnyAction } from 'redux';
+
+import { IStore } from '../../app/types';
+import { SET_DYNAMIC_BRANDING_DATA } from '../../dynamic-branding/actionTypes';
+import { setUserFilmstripWidth } from '../../filmstrip/actions.web';
+import { getFeatureFlag } from '../flags/functions';
+import MiddlewareRegistry from '../redux/MiddlewareRegistry';
+import { updateSettings } from '../settings/actions';
+
+import { OVERWRITE_CONFIG, SET_CONFIG } from './actionTypes';
+import { updateConfig } from './actions';
+import { IConfig } from './configType';
+
+/**
+ * The middleware of the feature {@code base/config}.
+ *
+ * @param {Store} store - The redux store.
+ * @private
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+    case SET_CONFIG:
+        return _setConfig(store, next, action);
+
+    case SET_DYNAMIC_BRANDING_DATA:
+        return _setDynamicBrandingData(store, next, action);
+
+    case OVERWRITE_CONFIG:
+        return _updateSettings(store, next, action);
+
+    }
+
+    return next(action);
+});
+
+/**
+ * Notifies the feature {@code base/config} that the {@link SET_CONFIG} redux
+ * action is being {@code dispatch}ed in a specific redux store.
+ *
+ * @param {Store} store - The redux store in which the specified {@code action}
+ * is being dispatched.
+ * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
+ * specified {@code action} in the specified {@code store}.
+ * @param {Action} action - The redux action which is being {@code dispatch}ed
+ * in the specified {@code store}.
+ * @private
+ * @returns {*} The return value of {@code next(action)}.
+ */
+function _setConfig({ dispatch, getState }: IStore, next: Function, action: AnyAction) {
+    // The reducer is doing some alterations to the config passed in the action,
+    // so make sure it's the final state by waiting for the action to be
+    // reduced.
+    const result = next(action);
+    const state = getState();
+
+    // Update the config with user defined settings.
+    const settings = state['features/base/settings'];
+    const config: IConfig = {};
+
+    if (typeof settings.disableP2P !== 'undefined') {
+        config.p2p = { enabled: !settings.disableP2P };
+    }
+
+    const resolutionFlag = getFeatureFlag(state, 'resolution');
+
+    if (typeof resolutionFlag !== 'undefined') {
+        config.resolution = resolutionFlag;
+    }
+
+    if (action.config.doNotFlipLocalVideo === true) {
+        dispatch(updateSettings({
+            localFlipX: false
+        }));
+    }
+
+    if (action.config.disableSelfView !== undefined) {
+        dispatch(updateSettings({
+            disableSelfView: action.config.disableSelfView
+        }));
+    }
+
+    const { initialWidth, stageFilmstripParticipants } = action.config.filmstrip || {};
+
+    if (stageFilmstripParticipants !== undefined) {
+        dispatch(updateSettings({
+            maxStageParticipants: stageFilmstripParticipants
+        }));
+    }
+
+    if (initialWidth) {
+        dispatch(setUserFilmstripWidth(initialWidth));
+    }
+
+    dispatch(updateConfig(config));
+
+    // FIXME On Web we rely on the global 'config' variable which gets altered
+    // multiple times, before it makes it to the reducer. At some point it may
+    // not be the global variable which is being modified anymore due to
+    // different merge methods being used along the way. The global variable
+    // must be synchronized with the final state resolved by the reducer.
+    if (typeof window.config !== 'undefined') {
+        window.config = state['features/base/config'];
+    }
+
+    return result;
+}
+
+/**
+ * Updates config based on dynamic branding data.
+ *
+ * @param {Store} store - The redux store in which the specified {@code action}
+ * is being dispatched.
+ * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
+ * specified {@code action} in the specified {@code store}.
+ * @param {Action} action - The redux action which is being {@code dispatch}ed
+ * in the specified {@code store}.
+ * @private
+ * @returns {*} The return value of {@code next(action)}.
+ */
+function _setDynamicBrandingData({ dispatch }: IStore, next: Function, action: AnyAction) {
+    const config: IConfig = {};
+    const {
+        customParticipantMenuButtons,
+        customToolbarButtons,
+        downloadAppsUrl,
+        etherpadBase,
+        liveStreamingDialogUrls = {},
+        preCallTest = {},
+        salesforceUrl,
+        userDocumentationUrl,
+        peopleSearchUrl,
+    } = action.value;
+
+    const { helpUrl, termsUrl, dataPrivacyUrl } = liveStreamingDialogUrls;
+
+    if (helpUrl || termsUrl || dataPrivacyUrl) {
+        config.liveStreaming = {};
+        if (helpUrl) {
+            config.liveStreaming.helpLink = helpUrl;
+        }
+
+        if (termsUrl) {
+            config.liveStreaming.termsLink = termsUrl;
+        }
+
+        if (dataPrivacyUrl) {
+            config.liveStreaming.dataPrivacyLink = dataPrivacyUrl;
+        }
+    }
+
+    if (downloadAppsUrl || userDocumentationUrl) {
+        config.deploymentUrls = {};
+
+        if (downloadAppsUrl) {
+            config.deploymentUrls.downloadAppsUrl = downloadAppsUrl;
+        }
+
+        if (userDocumentationUrl) {
+            config.deploymentUrls.userDocumentationURL = userDocumentationUrl;
+        }
+    }
+
+    if (salesforceUrl) {
+        config.salesforceUrl = salesforceUrl;
+    }
+
+    if (peopleSearchUrl) {
+        config.peopleSearchUrl = peopleSearchUrl;
+    }
+
+    const { enabled, iceUrl } = preCallTest;
+
+    if (typeof enabled === 'boolean') {
+        config.prejoinConfig = {
+            preCallTestEnabled: enabled
+        };
+    }
+
+    if (etherpadBase) {
+        // eslint-disable-next-line camelcase
+        config.etherpad_base = etherpadBase;
+    }
+
+    if (iceUrl) {
+        config.prejoinConfig = config.prejoinConfig || {};
+        config.prejoinConfig.preCallTestICEUrl = iceUrl;
+    }
+
+    if (customToolbarButtons) {
+        config.customToolbarButtons = customToolbarButtons;
+    }
+
+    if (customParticipantMenuButtons) {
+        config.customParticipantMenuButtons = customParticipantMenuButtons;
+    }
+
+    dispatch(updateConfig(config));
+
+    return next(action);
+}
+
+/**
+ * Updates settings based on some config values.
+ *
+ * @param {Store} store - The redux store in which the specified {@code action}
+ * is being dispatched.
+ * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
+ * specified {@code action} in the specified {@code store}.
+ * @param {Action} action - The redux action which is being {@code dispatch}ed
+ * in the specified {@code store}.
+ * @private
+ * @returns {*} The return value of {@code next(action)}.
+ */
+function _updateSettings({ dispatch }: IStore, next: Function, action: AnyAction) {
+    const { config: { doNotFlipLocalVideo } } = action;
+
+    if (doNotFlipLocalVideo === true) {
+        dispatch(updateSettings({
+            localFlipX: false
+        }));
+    }
+
+    return next(action);
+}

package/react/features/base/tracks/subscriber.ts

@@ -0,0 +1,40 @@
+import { isEqual, sortBy } from 'lodash-es';
+
+import { MEDIA_TYPE } from '../media/constants';
+import { getScreenshareParticipantIds } from '../participants/functions';
+import StateListenerRegistry from '../redux/StateListenerRegistry';
+
+import { isLocalTrackMuted } from './functions';
+
+/**
+ * Notifies when the list of currently sharing participants changes.
+ */
+StateListenerRegistry.register(
+    /* selector */ state => getScreenshareParticipantIds(state),
+    /* listener */ (participantIDs, store, previousParticipantIDs) => {
+        if (typeof APP !== 'object') {
+            return;
+        }
+
+        if (!isEqual(sortBy(participantIDs), sortBy(previousParticipantIDs))) {
+            APP.API.notifySharingParticipantsChanged(participantIDs);
+        }
+    }
+);
+
+
+/**
+ * Notifies when the local video mute state changes.
+ */
+StateListenerRegistry.register(
+    /* selector */ state => isLocalTrackMuted(state['features/base/tracks'], MEDIA_TYPE.VIDEO),
+    /* listener */ (muted, store, previousMuted) => {
+        if (typeof APP !== 'object') {
+            return;
+        }
+
+        if (muted !== previousMuted) {
+            APP.API.notifyVideoMutedStatusChanged(muted);
+        }
+    }
+);

package/react/features/chat/components/native/styles.ts

@@ -8,7 +8,7 @@ const recipientContainer = {
     backgroundColor: BaseTheme.palette.support05,
     borderRadius: BaseTheme.shape.borderRadius,
     flexDirection: 'row',
-    height: 48,
+    minHeight: 48,
     marginBottom: BaseTheme.spacing[3],
     marginHorizontal: BaseTheme.spacing[3],
     padding: BaseTheme.spacing[2]

package/react/features/large-video/subscriber.any.ts

@@ -0,0 +1,26 @@
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+
+import { SELECT_LARGE_VIDEO_PARTICIPANT } from './actionTypes';
+import { selectParticipantInLargeVideo } from './actions.any';
+import { shouldHideLargeVideo } from './functions';
+
+/**
+ * Updates the large video when transitioning from a hidden state to visible state.
+ * This ensures the large video is properly updated when exiting tile view, stage filmstrip,
+ * whiteboard, or etherpad editing modes.
+ */
+StateListenerRegistry.register(
+    /* selector */ state => shouldHideLargeVideo(state),
+    /* listener */ (isHidden, { dispatch }) => {
+        // When transitioning from hidden to visible state, select participant (because currently it is undefined).
+        // Otherwise set it to undefined because we don't show the large video.
+        if (!isHidden) {
+            dispatch(selectParticipantInLargeVideo());
+        } else {
+            dispatch({
+                type: SELECT_LARGE_VIDEO_PARTICIPANT,
+                participantId: undefined
+            });
+        }
+    }
+);

package/react/features/lobby/components/native/LobbyScreen.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BackHandler, Text, TextStyle, View, ViewStyle } from 'react-native';
 import { connect } from 'react-redux';
+import { ScrollView } from 'react-native-gesture-handler';
 import { appNavigate } from '../../../app/actions.native';
 
 import { IReduxState } from '../../../app/types';
@@ -91,7 +92,7 @@ class LobbyScreen extends AbstractLobbyScreen<IProps> {
         const isTablet = Math.min(_clientWidth, _clientHeight) >= 768;
 
         let contentContainerStyles = preJoinStyles.lobbyContentContainer;
-        let largeVideoContainerStyles = preJoinStyles.largeVideoContainer;
+        let largeVideoContainerStyles = preJoinStyles.lobbyLargeVideoContainer;
 
         if (isTablet && _aspectRatio === ASPECT_RATIO_WIDE) {
             // @ts-ignore
@@ -105,23 +106,25 @@ class LobbyScreen extends AbstractLobbyScreen<IProps> {
                 addBottomPadding = { false }
                 safeAreaInsets = { [ 'right' ] }
                 style = { preJoinStyles.contentWrapper }>
-                <BrandingImageBackground />
-                <View style = { largeVideoContainerStyles as ViewStyle }>
-                    <View style = { preJoinStyles.conferenceInfo as ViewStyle }>
-                        <View style = { preJoinStyles.displayRoomNameBackdrop }>
-                            <Text
-                                numberOfLines = { 1 }
-                                style = { preJoinStyles.preJoinRoomName }>
-                                { _roomName }
-                            </Text>
+                <ScrollView style={{ flex: 1 }}>
+                    <BrandingImageBackground />
+                    <View style = { largeVideoContainerStyles as ViewStyle }>
+                        <View style = { preJoinStyles.conferenceInfo as ViewStyle }>
+                            <View style = { preJoinStyles.displayRoomNameBackdrop }>
+                                <Text
+                                    numberOfLines = { 1 }
+                                    style = { preJoinStyles.preJoinRoomName }>
+                                    { _roomName }
+                                </Text>
+                            </View>
                         </View>
+                        <LargeVideo />
                     </View>
-                    <LargeVideo />
-                </View>
-                <View style = { contentContainerStyles as ViewStyle }>
-                    { this._renderToolbarButtons() }
-                    { this._renderContent() }
-                </View>
+                    <View style = { contentContainerStyles as ViewStyle }>
+                        { this._renderToolbarButtons() }
+                        { this._renderContent() }
+                    </View>
+                </ScrollView>
             </JitsiScreen>
         );
     }

package/react/features/mobile/polyfills/querySelectorPolyfill.js

@@ -0,0 +1,282 @@
+// Regex constants for efficient reuse across selector parsing
+const SIMPLE_TAG_NAME_REGEX = /^[a-zA-Z][\w-]*$/;
+const MULTI_ATTRIBUTE_SELECTOR_REGEX = /^([a-zA-Z][\w-]*)?(\[(?:\*\|)?([^=\]]+)=["']?([^"'\]]+)["']?\])+$/;
+const SINGLE_ATTRIBUTE_REGEX = /\[(?:\*\|)?([^=\]]+)=["']?([^"'\]]+)["']?\]/g;
+const WHITESPACE_AROUND_COMBINATOR_REGEX = /\s*>\s*/g;
+
+/**
+ * Parses a CSS selector into reusable components.
+ *
+ * @param {string} selector - The CSS selector to parse.
+ * @returns {Object} - Object with tagName and attrConditions properties.
+ */
+function _parseSelector(selector) {
+    // Wildcard selector
+    if (selector === '*') {
+        return {
+            tagName: null, // null means match all tag names
+            attrConditions: []
+        };
+    }
+
+    // Simple tag name
+    if (SIMPLE_TAG_NAME_REGEX.test(selector)) {
+        return {
+            tagName: selector,
+            attrConditions: []
+        };
+    }
+
+    // Attribute selector: tagname[attr="value"] or
+    // tagname[attr1="value1"][attr2="value2"] (with optional wildcard namespace)
+    const multiAttrMatch = selector.match(MULTI_ATTRIBUTE_SELECTOR_REGEX);
+
+    if (multiAttrMatch) {
+        const tagName = multiAttrMatch[1];
+        const attrConditions = [];
+        let attrMatch;
+
+        while ((attrMatch = SINGLE_ATTRIBUTE_REGEX.exec(selector)) !== null) {
+            attrConditions.push({
+                name: attrMatch[1], // This properly strips the *| prefix
+                value: attrMatch[2]
+            });
+        }
+
+        return {
+            tagName,
+            attrConditions
+        };
+    }
+
+    // Unsupported selector
+    throw new SyntaxError(`Unsupported selector pattern: '${selector}'`);
+}
+
+/**
+ * Filters elements by selector pattern and handles findFirst logic.
+ *
+ * @param {Element[]} elements - Array of elements to filter.
+ * @param {string} selector - CSS selector to match against.
+ * @param {boolean} findFirst - If true, return after finding the first match.
+ * @returns {Element[]|Element|null} - Filtered results with proper return type.
+ */
+function _filterAndMatchElements(elements, selector, findFirst) {
+    const { tagName, attrConditions } = _parseSelector(selector);
+
+    const results = [];
+
+    for (const element of elements) {
+        // Check tag name if specified
+        if (tagName && !(element.localName === tagName || element.tagName === tagName)) {
+            continue;
+        }
+
+        // Check if all attribute conditions match
+        const allMatch = attrConditions.every(condition =>
+            element.getAttribute(condition.name) === condition.value
+        );
+
+        if (allMatch) {
+            results.push(element);
+            if (findFirst) {
+                return element;
+            }
+        }
+    }
+
+    return findFirst ? null : results;
+}
+
+/**
+ * Handles direct child traversal for selectors with > combinators.
+ * This is the shared logic used by both scope selectors and regular direct child selectors.
+ *
+ * @param {Element[]} startElements - Array of starting elements to traverse from.
+ * @param {string[]} selectorParts - Array of selector parts split by '>'.
+ * @param {boolean} findFirst - If true, return after finding the first match.
+ * @returns {Element[]|Element|null} - Array of Elements for querySelectorAll,
+ * single Element or null for querySelector.
+ */
+function _traverseDirectChildren(startElements, selectorParts, findFirst) {
+    let currentElements = startElements;
+
+    for (const part of selectorParts) {
+        const nextElements = [];
+
+        currentElements.forEach(el => {
+            // Get direct children
+            const directChildren = Array.from(el.children || []);
+
+            // Use same helper as handlers
+            const matchingChildren = _filterAndMatchElements(directChildren, part, false);
+
+            nextElements.push(...matchingChildren);
+        });
+
+        currentElements = nextElements;
+
+        // If we have no results, we can stop early (applies to both querySelector and querySelectorAll)
+        if (currentElements.length === 0) {
+            return findFirst ? null : [];
+        }
+    }
+
+    return findFirst ? currentElements[0] || null : currentElements;
+}
+
+/**
+ * Handles :scope pseudo-selector cases with direct child combinators.
+ *
+ * @param {Node} node - The Node which is the root of the tree to query.
+ * @param {string} selector - The CSS selector.
+ * @param {boolean} findFirst - If true, return after finding the first match.
+ * @returns {Element[]|Element|null} - Array of Elements for querySelectorAll,
+ * single Element or null for querySelector.
+ */
+function _handleScopeSelector(node, selector, findFirst) {
+    let searchSelector = selector.substring(6);
+
+    // Handle :scope > tagname (direct children)
+    if (searchSelector.startsWith('>')) {
+        searchSelector = searchSelector.substring(1);
+
+        // Split by > and use shared traversal logic
+        const parts = searchSelector.split('>');
+
+        // Start from the node itself (scope)
+        return _traverseDirectChildren([ node ], parts, findFirst);
+    }
+
+    return null;
+}
+
+/**
+ * Handles nested > selectors (direct child combinators).
+ *
+ * @param {Node} node - The Node which is the root of the tree to query.
+ * @param {string} selector - The CSS selector.
+ * @param {boolean} findFirst - If true, return after finding the first match.
+ * @returns {Element[]|Element|null} - Array of Elements for querySelectorAll,
+ * single Element or null for querySelector.
+ */
+function _handleDirectChildSelectors(node, selector, findFirst) {
+    const parts = selector.split('>');
+
+    // First find elements matching the first part (this could be descendants, not just direct children)
+    const startElements = _querySelectorInternal(node, parts[0], false);
+
+    // If no starting elements found, return early
+    if (startElements.length === 0) {
+        return findFirst ? null : [];
+    }
+
+    // Use shared traversal logic for the remaining parts
+    return _traverseDirectChildren(startElements, parts.slice(1), findFirst);
+}
+
+/**
+ * Handles simple tag name selectors.
+ *
+ * @param {Node} node - The Node which is the root of the tree to query.
+ * @param {string} selector - The CSS selector.
+ * @param {boolean} findFirst - If true, return after finding the first match.
+ * @returns {Element[]|Element|null} - Array of Elements for querySelectorAll,
+ * single Element or null for querySelector.
+ */
+function _handleSimpleTagSelector(node, selector, findFirst) {
+    const elements = Array.from(node.getElementsByTagName(selector));
+
+    if (findFirst) {
+        return elements[0] || null;
+    }
+
+    return elements;
+}
+
+/**
+ * Handles attribute selectors: tagname[attr="value"] or tagname[attr1="value1"][attr2="value2"].
+ * Supports single or multiple attributes with optional wildcard namespace (*|).
+ *
+ * @param {Node} node - The Node which is the root of the tree to query.
+ * @param {string} selector - The CSS selector.
+ * @param {boolean} findFirst - If true, return after finding the first match.
+ * @returns {Element[]|Element|null} - Array of Elements for querySelectorAll,
+ * single Element or null for querySelector.
+ */
+function _handleAttributeSelector(node, selector, findFirst) {
+    const { tagName } = _parseSelector(selector); // Just to get tagName for optimization
+
+    // Handler's job: find the right elements to search
+    const elementsToCheck = tagName
+        ? Array.from(node.getElementsByTagName(tagName))
+        : Array.from(node.getElementsByTagName('*'));
+
+    // Common helper does the matching
+    return _filterAndMatchElements(elementsToCheck, selector, findFirst);
+}
+
+/**
+ * Internal function that implements the core selector matching logic for both
+ * querySelector and querySelectorAll. Supports :scope pseudo-selector, direct
+ * child selectors, and common CSS selectors.
+ *
+ * @param {Node} node - The Node which is the root of the tree to query.
+ * @param {string} selector - The CSS selector to match elements against.
+ * @param {boolean} findFirst - If true, return after finding the first match.
+ * @returns {Element[]|Element|null} - Array of Elements for querySelectorAll,
+ * single Element or null for querySelector.
+ */
+function _querySelectorInternal(node, selector, findFirst = false) {
+    // Normalize whitespace around > combinators first
+    const normalizedSelector = selector.replace(WHITESPACE_AROUND_COMBINATOR_REGEX, '>');
+
+    // Handle :scope pseudo-selector
+    if (normalizedSelector.startsWith(':scope')) {
+        return _handleScopeSelector(node, normalizedSelector, findFirst);
+    }
+
+    // Handle nested > selectors (direct child combinators)
+    if (normalizedSelector.includes('>')) {
+        return _handleDirectChildSelectors(node, normalizedSelector, findFirst);
+    }
+
+    // Fast path: simple tag name
+    if (normalizedSelector === '*' || SIMPLE_TAG_NAME_REGEX.test(normalizedSelector)) {
+        return _handleSimpleTagSelector(node, normalizedSelector, findFirst);
+    }
+
+    // Attribute selector: tagname[attr="value"] or
+    // tagname[attr1="value1"][attr2="value2"] (with optional wildcard namespace)
+    if (normalizedSelector.match(MULTI_ATTRIBUTE_SELECTOR_REGEX)) {
+        return _handleAttributeSelector(node, normalizedSelector, findFirst);
+    }
+
+    // Unsupported selector - throw SyntaxError to match browser behavior
+    throw new SyntaxError(`Failed to execute 'querySelector${
+        findFirst ? '' : 'All'}' on 'Element': '${selector}' is not a valid selector.`);
+}
+
+/**
+ * Implements querySelector functionality using the shared internal logic.
+ * Supports the same selectors as querySelectorAll but returns only the first match.
+ *
+ * @param {Node} node - The Node which is the root of the tree to query.
+ * @param {string} selectors - The CSS selector to match elements against.
+ * @returns {Element|null} - The first Element which matches the selector, or null.
+ */
+export function querySelector(node, selectors) {
+    return _querySelectorInternal(node, selectors, true);
+}
+
+/**
+ * Implements querySelectorAll functionality using the shared internal logic.
+ * Supports :scope pseudo-selector, direct child selectors, and common CSS selectors.
+ *
+ * @param {Node} node - The Node which is the root of the tree to query.
+ * @param {string} selector - The CSS selector to match elements against.
+ * @returns {Element[]} - Array of Elements matching the selector.
+ */
+export function querySelectorAll(node, selector) {
+    return _querySelectorInternal(node, selector, false);
+}

package/react/features/prejoin/components/native/styles.ts

@@ -31,6 +31,10 @@ export const preJoinStyles = {
         height: '50%'
     },
 
+    lobbyLargeVideoContainer: {
+        height: 300
+    },
+
     largeVideoContainerWide: {
         height: '100%',
         marginRight: 'auto',