@stream-io/video-react-sdk 1.40.2 → 1.42.0

package/dist/esm/src/components/Search/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../../../../../src/components/Search/SearchInput.tsx"],"sourcesContent":["import { ComponentProps, useEffect, useState } from 'react';\nimport { useEffectEvent } from '@stream-io/video-react-bindings';\nimport clsx from 'clsx';\n\ntype SearchInputProps = ComponentProps<'input'> & {\n  /**\n   * Resets the search to its initial state.\n   * The function is called when Esc key or inputs clear button are pressed\n   */\n  exitSearch: () => void;\n  /**\n   * Flag to signal, whether search input elements should be rendered as active\n   */\n  isActive: boolean;\n};\nexport const SearchInput = ({\n  exitSearch,\n  isActive,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(\n    null,\n  );\n  const onExitSearch = useEffectEvent(exitSearch);\n  useEffect(() => {\n    if (!inputElement) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key.toLowerCase() === 'escape') onExitSearch();\n    };\n\n    inputElement.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      inputElement.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [inputElement]);\n\n  return (\n    <div\n      className={clsx('str-video__search-input__container', {\n        'str-video__search-input__container--active': isActive,\n      })}\n    >\n      <input placeholder=\"Search\" {...rest} ref={setInputElement} />\n      {isActive ? (\n        <button\n          className=\"str-video__search-input__clear-btn\"\n          onClick={exitSearch}\n        >\n          <span className=\"str-video__search-input__icon--active\" />\n        </button>\n      ) : (\n        <span className=\"str-video__search-input__icon\" />\n      )}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAeO,MAAM,WAAW,GAAG,CAAC,EAC1B,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACU,KAAI;IACrB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL;AACD,IAAA,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU,CAAC;IAC/C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY;YAAE;AAEnB,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;AACzC,YAAA,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,QAAQ;AAAE,gBAAA,YAAY,EAAE;AACtD,QAAA,CAAC;AAED,QAAA,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;AAEvD,QAAA,OAAO,MAAK;AACV,YAAA,YAAY,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AAC5D,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE;AACpD,YAAA,4CAA4C,EAAE,QAAQ;SACvD,CAAC,EAAA,QAAA,EAAA,CAEFC,eAAO,WAAW,EAAC,QAAQ,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,eAAe,EAAA,CAAI,EAC7D,QAAQ,IACPA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAC,oCAAoC,EAC9C,OAAO,EAAE,UAAU,YAEnBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uCAAuC,EAAA,CAAG,GACnD,KAETA,cAAM,SAAS,EAAC,+BAA+B,EAAA,CAAG,CACnD,CAAA,EAAA,CACG;AAEV;;;;"}

package/dist/esm/src/components/Search/SearchResults.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.js';
+
+function SearchResults({ EmptySearchResultComponent, LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, searchQueryInProgress, searchResults, SearchResultList, }) {
+    if (searchQueryInProgress) {
+        return (jsx("div", { className: "str-video__search-results--loading", children: jsx(LoadingIndicator$1, {}) }));
+    }
+    if (!searchResults.length) {
+        return jsx(EmptySearchResultComponent, {});
+    }
+    return jsx(SearchResultList, { data: searchResults });
+}
+
+export { SearchResults };
+//# sourceMappingURL=SearchResults.js.map

package/dist/esm/src/components/Search/SearchResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.js","sources":["../../../../../../../src/components/Search/SearchResults.tsx"],"sourcesContent":["import { ComponentType } from 'react';\nimport { LoadingIndicator as DefaultLoadingIndicator } from '../LoadingIndicator';\nimport { SearchController } from './hooks';\n\nexport type SearchResultListProps<T> = {\n  data: T[];\n};\n\nexport type SearchResultsProps<T> = Pick<\n  SearchController<T>,\n  'searchResults' | 'searchQueryInProgress'\n> & {\n  /** Component to be displayed, when empty array of search results is provided */\n  EmptySearchResultComponent: ComponentType;\n  /** Component will be used to render non-empty array of search results  */\n  SearchResultList: ComponentType<SearchResultListProps<T>>;\n  /** Component to be displayed while the search query request is in progress */\n  LoadingIndicator?: ComponentType;\n};\n\nexport function SearchResults<T>({\n  EmptySearchResultComponent,\n  LoadingIndicator = DefaultLoadingIndicator,\n  searchQueryInProgress,\n  searchResults,\n  SearchResultList,\n}: SearchResultsProps<T>) {\n  if (searchQueryInProgress) {\n    return (\n      <div className=\"str-video__search-results--loading\">\n        <LoadingIndicator />\n      </div>\n    );\n  }\n  if (!searchResults.length) {\n    return <EmptySearchResultComponent />;\n  }\n\n  return <SearchResultList data={searchResults} />;\n}\n"],"names":["LoadingIndicator","DefaultLoadingIndicator","_jsx"],"mappings":";;;AAoBM,SAAU,aAAa,CAAI,EAC/B,0BAA0B,oBAC1BA,kBAAgB,GAAGC,gBAAuB,EAC1C,qBAAqB,EACrB,aAAa,EACb,gBAAgB,GACM,EAAA;IACtB,IAAI,qBAAqB,EAAE;QACzB,QACEC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EACjDA,GAAA,CAACF,kBAAgB,EAAA,EAAA,CAAG,EAAA,CAChB;IAEV;AACA,IAAA,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;QACzB,OAAOE,GAAA,CAAC,0BAA0B,EAAA,EAAA,CAAG;IACvC;AAEA,IAAA,OAAOA,IAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,aAAa,GAAI;AAClD;;;;"}

package/dist/esm/src/components/Search/hooks/useSearch.js

@@ -0,0 +1,38 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useSearch = ({ debounceInterval = 200, searchFn, searchQuery = '', }) => {
+    const [searchResults, setSearchResults] = useState([]);
+    const [searchQueryInProgress, setSearchQueryInProgress] = useState(false);
+    const searchFnRef = useRef(searchFn);
+    searchFnRef.current = searchFn;
+    useEffect(() => {
+        if (!searchQuery.length) {
+            setSearchQueryInProgress(false);
+            setSearchResults([]);
+            return;
+        }
+        setSearchQueryInProgress(true);
+        const timeout = setTimeout(async () => {
+            try {
+                const results = await searchFnRef.current(searchQuery);
+                setSearchResults(results);
+            }
+            catch (error) {
+                console.error(error);
+            }
+            finally {
+                setSearchQueryInProgress(false);
+            }
+        }, debounceInterval);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [debounceInterval, searchQuery]);
+    return {
+        searchQueryInProgress,
+        searchResults,
+    };
+};
+
+export { useSearch };
+//# sourceMappingURL=useSearch.js.map

package/dist/esm/src/components/Search/hooks/useSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.js","sources":["../../../../../../../../src/components/Search/hooks/useSearch.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport type SearchController<T> = {\n  /** Flag signals that the search request is flight await the response */\n  searchQueryInProgress: boolean;\n  /** Array of items returned by the search query */\n  searchResults: T[];\n};\n\nexport type UseSearchParams<T> = {\n  /** Search function performing the search request */\n  searchFn: (searchQuery: string) => Promise<T[]>;\n  /** Debounce interval applied to the search function */\n  debounceInterval?: number;\n  /** Search query string */\n  searchQuery?: string;\n};\n\nexport const useSearch = <T>({\n  debounceInterval = 200,\n  searchFn,\n  searchQuery = '',\n}: UseSearchParams<T>): SearchController<T> => {\n  const [searchResults, setSearchResults] = useState<T[]>([]);\n  const [searchQueryInProgress, setSearchQueryInProgress] = useState(false);\n\n  const searchFnRef = useRef(searchFn);\n  searchFnRef.current = searchFn;\n\n  useEffect(() => {\n    if (!searchQuery.length) {\n      setSearchQueryInProgress(false);\n      setSearchResults([]);\n      return;\n    }\n\n    setSearchQueryInProgress(true);\n\n    const timeout = setTimeout(async () => {\n      try {\n        const results = await searchFnRef.current(searchQuery);\n        setSearchResults(results);\n      } catch (error) {\n        console.error(error);\n      } finally {\n        setSearchQueryInProgress(false);\n      }\n    }, debounceInterval);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [debounceInterval, searchQuery]);\n\n  return {\n    searchQueryInProgress,\n    searchResults,\n  };\n};\n"],"names":[],"mappings":";;AAkBO,MAAM,SAAS,GAAG,CAAI,EAC3B,gBAAgB,GAAG,GAAG,EACtB,QAAQ,EACR,WAAW,GAAG,EAAE,GACG,KAAyB;IAC5C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAM,EAAE,CAAC;IAC3D,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEzE,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;IAE9B,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;YACvB,wBAAwB,CAAC,KAAK,CAAC;YAC/B,gBAAgB,CAAC,EAAE,CAAC;YACpB;QACF;QAEA,wBAAwB,CAAC,IAAI,CAAC;AAE9B,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,YAAW;AACpC,YAAA,IAAI;gBACF,MAAM,OAAO,GAAG,MAAM,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC;gBACtD,gBAAgB,CAAC,OAAO,CAAC;YAC3B;YAAE,OAAO,KAAK,EAAE;AACd,gBAAA,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;YACtB;oBAAU;gBACR,wBAAwB,CAAC,KAAK,CAAC;YACjC;QACF,CAAC,EAAE,gBAAgB,CAAC;AAEpB,QAAA,OAAO,MAAK;YACV,YAAY,CAAC,OAAO,CAAC;AACvB,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IAEnC,OAAO;QACL,qBAAqB;QACrB,aAAa;KACd;AACH;;;;"}

package/dist/esm/src/components/StreamTheme/StreamTheme.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+const StreamTheme = ({ as: Component = 'div', className, children, ...props }) => {
+    return (jsx(Component, { ...props, className: clsx('str-video', className), children: children }));
+};
+
+export { StreamTheme };
+//# sourceMappingURL=StreamTheme.js.map

package/dist/esm/src/components/StreamTheme/StreamTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StreamTheme.js","sources":["../../../../../../../src/components/StreamTheme/StreamTheme.tsx"],"sourcesContent":["import { ElementType, HTMLProps, PropsWithChildren } from 'react';\nimport clsx from 'clsx';\n\nexport type StreamThemeProps = HTMLProps<HTMLElement> & {\n  as?: ElementType;\n};\n\nexport const StreamTheme = ({\n  as: Component = 'div',\n  className,\n  children,\n  ...props\n}: PropsWithChildren<StreamThemeProps>) => {\n  return (\n    <Component {...props} className={clsx('str-video', className)}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;MAOa,WAAW,GAAG,CAAC,EAC1B,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAC4B,KAAI;AACxC,IAAA,QACEA,GAAA,CAAC,SAAS,OAAK,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,YAC1D,QAAQ,EAAA,CACC;AAEhB;;;;"}

package/dist/esm/src/components/Tooltip/Tooltip.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { useFloatingUIPreset } from '../../hooks/useFloatingUIPreset.js';
+import '@stream-io/video-react-bindings';
+import '@stream-io/video-client';
+import { arrow, FloatingArrow } from '@floating-ui/react';
+
+const Tooltip = ({ children, referenceElement, tooltipClassName, tooltipPlacement = 'top', visible = false, }) => {
+    const arrowRef = useRef(null);
+    const { refs, x, y, strategy, context } = useFloatingUIPreset({
+        placement: tooltipPlacement,
+        strategy: 'absolute',
+        middleware: [arrow({ element: arrowRef })],
+    });
+    useEffect(() => {
+        refs.setReference(referenceElement);
+    }, [referenceElement, refs]);
+    if (!visible)
+        return null;
+    return (jsxs("div", { className: clsx('str-video__tooltip', tooltipClassName), ref: refs.setFloating, style: {
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+        }, children: [jsx(FloatingArrow, { ref: arrowRef, context: context, fill: "var(--str-video__tooltip--background-color)" }), children] }));
+};
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/src/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { PropsWithChildren, useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useFloatingUIPreset } from '../../hooks';\nimport { FloatingArrow, Placement, arrow } from '@floating-ui/react';\n\nexport type TooltipProps<T extends HTMLElement> = PropsWithChildren<{\n  /** Reference element to which the tooltip should attach to */\n  referenceElement: T | null;\n  /** Additional class applied to the tooltip root element */\n  tooltipClassName?: string;\n  /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */\n  offset?: [number, number];\n  /** Popper's placement property defining default position of the tooltip, default 'top' */\n  tooltipPlacement?: Placement;\n  /** Tells component whether to render its contents */\n  visible?: boolean;\n}>;\n\nexport const Tooltip = <T extends HTMLElement>({\n  children,\n  referenceElement,\n  tooltipClassName,\n  tooltipPlacement = 'top',\n  visible = false,\n}: TooltipProps<T>) => {\n  const arrowRef = useRef<SVGSVGElement>(null);\n  const { refs, x, y, strategy, context } = useFloatingUIPreset({\n    placement: tooltipPlacement,\n    strategy: 'absolute',\n    middleware: [arrow({ element: arrowRef })],\n  });\n\n  useEffect(() => {\n    refs.setReference(referenceElement);\n  }, [referenceElement, refs]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      className={clsx('str-video__tooltip', tooltipClassName)}\n      ref={refs.setFloating}\n      style={{\n        position: strategy,\n        top: y ?? 0,\n        left: x ?? 0,\n      }}\n    >\n      <FloatingArrow\n        ref={arrowRef}\n        context={context}\n        fill=\"var(--str-video__tooltip--background-color)\"\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;MAkBa,OAAO,GAAG,CAAwB,EAC7C,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,GAAG,KAAK,EACxB,OAAO,GAAG,KAAK,GACC,KAAI;AACpB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAgB,IAAI,CAAC;AAC5C,IAAA,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,mBAAmB,CAAC;AAC5D,QAAA,SAAS,EAAE,gBAAgB;AAC3B,QAAA,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC3C,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC;AACrC,IAAA,CAAC,EAAE,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;AAE5B,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI;AAEzB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,EACvD,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;AACL,YAAA,QAAQ,EAAE,QAAQ;YAClB,GAAG,EAAE,CAAC,IAAI,CAAC;YACX,IAAI,EAAE,CAAC,IAAI,CAAC;AACb,SAAA,EAAA,QAAA,EAAA,CAEDC,IAAC,aAAa,EAAA,EACZ,GAAG,EAAE,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,6CAA6C,EAAA,CAClD,EACD,QAAQ,CAAA,EAAA,CACL;AAEV;;;;"}

package/dist/esm/src/components/Tooltip/WithTooltip.js

@@ -0,0 +1,15 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Tooltip } from './Tooltip.js';
+import { useEnterLeaveHandlers } from './hooks/useEnterLeaveHandlers.js';
+
+// todo: duplicate of CallParticipantList.tsx#MediaIndicator - refactor to a single component
+const WithTooltip = ({ title, tooltipClassName, tooltipPlacement, tooltipDisabled, ...props }) => {
+    const { handleMouseEnter, handleMouseLeave, tooltipVisible } = useEnterLeaveHandlers();
+    const [tooltipAnchor, setTooltipAnchor] = useState(null);
+    const tooltipActuallyVisible = !tooltipDisabled && Boolean(title) && tooltipVisible;
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { referenceElement: tooltipAnchor, visible: tooltipActuallyVisible, tooltipClassName: tooltipClassName, tooltipPlacement: tooltipPlacement, children: title || '' }), jsx("div", { ref: setTooltipAnchor, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props })] }));
+};
+
+export { WithTooltip };
+//# sourceMappingURL=WithTooltip.js.map

package/dist/esm/src/components/Tooltip/WithTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithTooltip.js","sources":["../../../../../../../src/components/Tooltip/WithTooltip.tsx"],"sourcesContent":["import { ComponentProps, useState } from 'react';\nimport { Tooltip, TooltipProps } from './Tooltip';\nimport { useEnterLeaveHandlers } from './hooks';\n\ntype WithPopupProps = ComponentProps<'div'> &\n  Omit<TooltipProps<HTMLDivElement>, 'referenceElement' | 'children'> & {\n    tooltipDisabled?: boolean;\n  };\n\n// todo: duplicate of CallParticipantList.tsx#MediaIndicator - refactor to a single component\nexport const WithTooltip = ({\n  title,\n  tooltipClassName,\n  tooltipPlacement,\n  tooltipDisabled,\n  ...props\n}: WithPopupProps) => {\n  const { handleMouseEnter, handleMouseLeave, tooltipVisible } =\n    useEnterLeaveHandlers<HTMLDivElement>();\n  const [tooltipAnchor, setTooltipAnchor] = useState<HTMLDivElement | null>(\n    null,\n  );\n  const tooltipActuallyVisible =\n    !tooltipDisabled && Boolean(title) && tooltipVisible;\n\n  return (\n    <>\n      <Tooltip\n        referenceElement={tooltipAnchor}\n        visible={tooltipActuallyVisible}\n        tooltipClassName={tooltipClassName}\n        tooltipPlacement={tooltipPlacement}\n      >\n        {title || ''}\n      </Tooltip>\n      <div\n        ref={setTooltipAnchor}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      />\n    </>\n  );\n};\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;AASA;AACO,MAAM,WAAW,GAAG,CAAC,EAC1B,KAAK,EACL,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,GAAG,KAAK,EACO,KAAI;IACnB,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAC1D,qBAAqB,EAAkB;IACzC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,IAAI,CACL;IACD,MAAM,sBAAsB,GAC1B,CAAC,eAAe,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,cAAc;AAEtD,IAAA,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAC,OAAO,EAAA,EACN,gBAAgB,EAAE,aAAa,EAC/B,OAAO,EAAE,sBAAsB,EAC/B,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAAA,QAAA,EAEjC,KAAK,IAAI,EAAE,GACJ,EACVA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,gBAAgB,EACrB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAAA,GAC1B,KAAK,EAAA,CACT,CAAA,EAAA,CACD;AAEP;;;;"}

package/dist/esm/src/components/Tooltip/hooks/useEnterLeaveHandlers.js

@@ -0,0 +1,17 @@
+import { useState, useCallback } from 'react';
+
+const useEnterLeaveHandlers = ({ onMouseEnter, onMouseLeave, } = {}) => {
+    const [tooltipVisible, setTooltipVisible] = useState(false);
+    const handleMouseEnter = useCallback((e) => {
+        setTooltipVisible(true);
+        onMouseEnter?.(e);
+    }, [onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+        setTooltipVisible(false);
+        onMouseLeave?.(e);
+    }, [onMouseLeave]);
+    return { handleMouseEnter, handleMouseLeave, tooltipVisible };
+};
+
+export { useEnterLeaveHandlers };
+//# sourceMappingURL=useEnterLeaveHandlers.js.map

package/dist/esm/src/components/Tooltip/hooks/useEnterLeaveHandlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnterLeaveHandlers.js","sources":["../../../../../../../../src/components/Tooltip/hooks/useEnterLeaveHandlers.ts"],"sourcesContent":["import { MouseEventHandler, useCallback, useState } from 'react';\n\nexport const useEnterLeaveHandlers = <T extends HTMLElement>({\n  onMouseEnter,\n  onMouseLeave,\n}: Partial<\n  Record<'onMouseEnter' | 'onMouseLeave', MouseEventHandler<T>>\n> = {}) => {\n  const [tooltipVisible, setTooltipVisible] = useState(false);\n\n  const handleMouseEnter: MouseEventHandler<T> = useCallback(\n    (e) => {\n      setTooltipVisible(true);\n      onMouseEnter?.(e);\n    },\n    [onMouseEnter],\n  );\n\n  const handleMouseLeave: MouseEventHandler<T> = useCallback(\n    (e) => {\n      setTooltipVisible(false);\n      onMouseLeave?.(e);\n    },\n    [onMouseLeave],\n  );\n\n  return { handleMouseEnter, handleMouseLeave, tooltipVisible };\n};\n"],"names":[],"mappings":";;AAEO,MAAM,qBAAqB,GAAG,CAAwB,EAC3D,YAAY,EACZ,YAAY,GAAA,GAGV,EAAE,KAAI;IACR,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE3D,IAAA,MAAM,gBAAgB,GAAyB,WAAW,CACxD,CAAC,CAAC,KAAI;QACJ,iBAAiB,CAAC,IAAI,CAAC;AACvB,QAAA,YAAY,GAAG,CAAC,CAAC;AACnB,IAAA,CAAC,EACD,CAAC,YAAY,CAAC,CACf;AAED,IAAA,MAAM,gBAAgB,GAAyB,WAAW,CACxD,CAAC,CAAC,KAAI;QACJ,iBAAiB,CAAC,KAAK,CAAC;AACxB,QAAA,YAAY,GAAG,CAAC,CAAC;AACnB,IAAA,CAAC,EACD,CAAC,YAAY,CAAC,CACf;AAED,IAAA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE;AAC/D;;;;"}

package/dist/esm/src/components/VideoPreview/VideoPreview.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { BaseVideo } from '../../core/components/Video/BaseVideo.js';
+import '../../core/components/Video/Video.js';
+import { LoadingIndicator } from '../LoadingIndicator/LoadingIndicator.js';
+
+const DefaultDisabledVideoPreview = () => {
+    const { t } = useI18n();
+    return (jsx("div", { className: "str_video__video-preview__disabled-video-preview", children: t('Video is disabled') }));
+};
+const DefaultNoCameraPreview = () => {
+    const { t } = useI18n();
+    return (jsx("div", { className: "str_video__video-preview__no-camera-preview", children: t('No camera found') }));
+};
+const VideoPreview = ({ className, mirror = true, DisabledVideoPreview = DefaultDisabledVideoPreview, NoCameraPreview = DefaultNoCameraPreview, StartingCameraPreview = LoadingIndicator, }) => {
+    const { useCameraState } = useCallStateHooks();
+    const { devices, status, isMute, mediaStream } = useCameraState();
+    let contents;
+    if (isMute && devices?.length === 0) {
+        contents = jsx(NoCameraPreview, {});
+    }
+    else if (status === 'enabled') {
+        const loading = !mediaStream;
+        contents = (jsxs(Fragment, { children: [mediaStream && (jsx(BaseVideo, { stream: mediaStream, className: clsx('str-video__video-preview', {
+                        'str-video__video-preview--mirror': mirror,
+                        'str-video__video-preview--loading': loading,
+                    }) })), loading && jsx(StartingCameraPreview, {})] }));
+    }
+    else {
+        contents = jsx(DisabledVideoPreview, {});
+    }
+    return (jsx("div", { className: clsx('str-video__video-preview-container', className), children: contents }));
+};
+
+export { VideoPreview };
+//# sourceMappingURL=VideoPreview.js.map

package/dist/esm/src/components/VideoPreview/VideoPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPreview.js","sources":["../../../../../../../src/components/VideoPreview/VideoPreview.tsx"],"sourcesContent":["import { ComponentType } from 'react';\nimport clsx from 'clsx';\nimport { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';\nimport { BaseVideo } from '../../core/components/Video';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst DefaultDisabledVideoPreview = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str_video__video-preview__disabled-video-preview\">\n      {t('Video is disabled')}\n    </div>\n  );\n};\n\nconst DefaultNoCameraPreview = () => {\n  const { t } = useI18n();\n  return (\n    <div className=\"str_video__video-preview__no-camera-preview\">\n      {t('No camera found')}\n    </div>\n  );\n};\n\nexport type VideoPreviewProps = {\n  /**\n   * Additional CSS class name to apply to the root element.\n   */\n  className?: string;\n  /**\n   * Enforces mirroring of the video on the X axis. Defaults to true.\n   */\n  mirror?: boolean;\n  /**\n   * Component rendered when user turns off the video.\n   */\n  DisabledVideoPreview?: ComponentType;\n  /**\n   * Component rendered when no camera devices are available.\n   */\n  NoCameraPreview?: ComponentType;\n  /**\n   * Component rendered above the BaseVideo until the video is ready (meaning until the play event is emitted).\n   */\n  StartingCameraPreview?: ComponentType;\n};\n\nexport const VideoPreview = ({\n  className,\n  mirror = true,\n  DisabledVideoPreview = DefaultDisabledVideoPreview,\n  NoCameraPreview = DefaultNoCameraPreview,\n  StartingCameraPreview = LoadingIndicator,\n}: VideoPreviewProps) => {\n  const { useCameraState } = useCallStateHooks();\n  const { devices, status, isMute, mediaStream } = useCameraState();\n\n  let contents;\n  if (isMute && devices?.length === 0) {\n    contents = <NoCameraPreview />;\n  } else if (status === 'enabled') {\n    const loading = !mediaStream;\n    contents = (\n      <>\n        {mediaStream && (\n          <BaseVideo\n            stream={mediaStream}\n            className={clsx('str-video__video-preview', {\n              'str-video__video-preview--mirror': mirror,\n              'str-video__video-preview--loading': loading,\n            })}\n          />\n        )}\n        {loading && <StartingCameraPreview />}\n      </>\n    );\n  } else {\n    contents = <DisabledVideoPreview />;\n  }\n\n  return (\n    <div className={clsx('str-video__video-preview-container', className)}>\n      {contents}\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;AAMA,MAAM,2BAA2B,GAAG,MAAK;AACvC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAC9D,CAAC,CAAC,mBAAmB,CAAC,EAAA,CACnB;AAEV,CAAC;AAED,MAAM,sBAAsB,GAAG,MAAK;AAClC,IAAA,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE;AACvB,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EACzD,CAAC,CAAC,iBAAiB,CAAC,EAAA,CACjB;AAEV,CAAC;AAyBM,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,MAAM,GAAG,IAAI,EACb,oBAAoB,GAAG,2BAA2B,EAClD,eAAe,GAAG,sBAAsB,EACxC,qBAAqB,GAAG,gBAAgB,GACtB,KAAI;AACtB,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,iBAAiB,EAAE;AAC9C,IAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE;AAEjE,IAAA,IAAI,QAAQ;IACZ,IAAI,MAAM,IAAI,OAAO,EAAE,MAAM,KAAK,CAAC,EAAE;AACnC,QAAA,QAAQ,GAAGA,GAAA,CAAC,eAAe,EAAA,EAAA,CAAG;IAChC;AAAO,SAAA,IAAI,MAAM,KAAK,SAAS,EAAE;AAC/B,QAAA,MAAM,OAAO,GAAG,CAAC,WAAW;AAC5B,QAAA,QAAQ,IACNC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,WAAW,KACVF,IAAC,SAAS,EAAA,EACR,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,IAAI,CAAC,0BAA0B,EAAE;AAC1C,wBAAA,kCAAkC,EAAE,MAAM;AAC1C,wBAAA,mCAAmC,EAAE,OAAO;qBAC7C,CAAC,EAAA,CACF,CACH,EACA,OAAO,IAAIA,IAAC,qBAAqB,EAAA,EAAA,CAAG,CAAA,EAAA,CACpC,CACJ;IACH;SAAO;AACL,QAAA,QAAQ,GAAGA,GAAA,CAAC,oBAAoB,EAAA,EAAA,CAAG;IACrC;AAEA,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE,SAAS,CAAC,EAAA,QAAA,EAClE,QAAQ,EAAA,CACL;AAEV;;;;"}

package/dist/esm/src/core/components/Audio/Audio.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+
+const Audio = memo(function AudioRender({ participant, trackType = 'audioTrack', ...rest }) {
+    const call = useCall();
+    const [audioElement, setAudioElement] = useState(null);
+    const { userId, sessionId } = participant;
+    useEffect(() => {
+        if (!call || !audioElement)
+            return;
+        const cleanup = call.bindAudioElement(audioElement, sessionId, trackType);
+        return () => {
+            cleanup?.();
+        };
+    }, [call, sessionId, audioElement, trackType]);
+    return (jsx("audio", { autoPlay: true, ...rest, ref: setAudioElement, "data-user-id": userId, "data-session-id": sessionId, "data-track-type": trackType }));
+});
+Audio.displayName = 'Audio';
+
+export { Audio };
+//# sourceMappingURL=Audio.js.map

package/dist/esm/src/core/components/Audio/Audio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Audio.js","sources":["../../../../../../../../src/core/components/Audio/Audio.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, memo, useEffect, useState } from 'react';\nimport {\n  AudioTrackType,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\nimport { useCall } from '@stream-io/video-react-bindings';\n\nexport type AudioProps = ComponentPropsWithoutRef<'audio'> & {\n  /**\n   * The participant whose audio stream we want to play.\n   */\n  participant: StreamVideoParticipant;\n\n  /**\n   * The type of audio stream to play for the given participant.\n   * The default value is `audioTrack`.\n   */\n  trackType?: AudioTrackType;\n};\n\nexport const Audio = memo(function AudioRender({\n  participant,\n  trackType = 'audioTrack',\n  ...rest\n}: AudioProps) {\n  const call = useCall();\n  const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(\n    null,\n  );\n  const { userId, sessionId } = participant;\n\n  useEffect(() => {\n    if (!call || !audioElement) return;\n    const cleanup = call.bindAudioElement(audioElement, sessionId, trackType);\n    return () => {\n      cleanup?.();\n    };\n  }, [call, sessionId, audioElement, trackType]);\n\n  return (\n    <audio\n      autoPlay\n      {...rest}\n      ref={setAudioElement}\n      data-user-id={userId}\n      data-session-id={sessionId}\n      data-track-type={trackType}\n    />\n  );\n});\n\nAudio.displayName = 'Audio';\n"],"names":["_jsx"],"mappings":";;;;AAoBO,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,WAAW,CAAC,EAC7C,WAAW,EACX,SAAS,GAAG,YAAY,EACxB,GAAG,IAAI,EACI,EAAA;AACX,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;IACtB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,IAAI,CACL;AACD,IAAA,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,WAAW;IAEzC,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY;YAAE;AAC5B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,SAAS,EAAE,SAAS,CAAC;AACzE,QAAA,OAAO,MAAK;YACV,OAAO,IAAI;AACb,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;AAE9C,IAAA,QACEA,GAAA,CAAA,OAAA,EAAA,EACE,QAAQ,EAAA,IAAA,EAAA,GACJ,IAAI,EACR,GAAG,EAAE,eAAe,EAAA,cAAA,EACN,MAAM,EAAA,iBAAA,EACH,SAAS,qBACT,SAAS,EAAA,CAC1B;AAEN,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/esm/src/core/components/Audio/ParticipantsAudio.js

@@ -0,0 +1,23 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Fragment as Fragment$1 } from 'react';
+import { hasAudio, hasScreenShareAudio } from '@stream-io/video-client';
+import { Audio } from './Audio.js';
+
+const ParticipantsAudio = (props) => {
+    const { participants, audioProps } = props;
+    return (jsx(Fragment, { children: participants.map((participant) => {
+            if (participant.isLocalParticipant)
+                return null;
+            const { audioStream, screenShareAudioStream, sessionId } = participant;
+            const hasAudioTrack = hasAudio(participant);
+            const audioTrackElement = hasAudioTrack && audioStream && (jsx(Audio, { ...audioProps, trackType: "audioTrack", participant: participant }));
+            const hasScreenShareAudioTrack = hasScreenShareAudio(participant);
+            const screenShareAudioTrackElement = hasScreenShareAudioTrack &&
+                screenShareAudioStream && (jsx(Audio, { ...audioProps, trackType: "screenShareAudioTrack", participant: participant }));
+            return (jsxs(Fragment$1, { children: [audioTrackElement, screenShareAudioTrackElement] }, sessionId));
+        }) }));
+};
+ParticipantsAudio.displayName = 'ParticipantsAudio';
+
+export { ParticipantsAudio };
+//# sourceMappingURL=ParticipantsAudio.js.map

package/dist/esm/src/core/components/Audio/ParticipantsAudio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantsAudio.js","sources":["../../../../../../../../src/core/components/Audio/ParticipantsAudio.tsx"],"sourcesContent":["import { ComponentProps, Fragment } from 'react';\nimport {\n  hasAudio,\n  hasScreenShareAudio,\n  StreamVideoParticipant,\n} from '@stream-io/video-client';\nimport { Audio } from './Audio';\n\nexport type ParticipantsAudioProps = {\n  /**\n   * The participants to play audio for.\n   */\n  participants: StreamVideoParticipant[];\n\n  /**\n   * Props to pass to the underlying `Audio` components.\n   */\n  audioProps?: ComponentProps<typeof Audio>;\n};\n\nexport const ParticipantsAudio = (props: ParticipantsAudioProps) => {\n  const { participants, audioProps } = props;\n  return (\n    <>\n      {participants.map((participant) => {\n        if (participant.isLocalParticipant) return null;\n        const { audioStream, screenShareAudioStream, sessionId } = participant;\n\n        const hasAudioTrack = hasAudio(participant);\n        const audioTrackElement = hasAudioTrack && audioStream && (\n          <Audio\n            {...audioProps}\n            trackType=\"audioTrack\"\n            participant={participant}\n          />\n        );\n\n        const hasScreenShareAudioTrack = hasScreenShareAudio(participant);\n        const screenShareAudioTrackElement = hasScreenShareAudioTrack &&\n          screenShareAudioStream && (\n            <Audio\n              {...audioProps}\n              trackType=\"screenShareAudioTrack\"\n              participant={participant}\n            />\n          );\n\n        return (\n          <Fragment key={sessionId}>\n            {audioTrackElement}\n            {screenShareAudioTrackElement}\n          </Fragment>\n        );\n      })}\n    </>\n  );\n};\n\nParticipantsAudio.displayName = 'ParticipantsAudio';\n"],"names":["_jsx","_jsxs","Fragment"],"mappings":";;;;;AAoBO,MAAM,iBAAiB,GAAG,CAAC,KAA6B,KAAI;AACjE,IAAA,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,GAAG,KAAK;IAC1C,QACEA,0BACG,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,KAAI;YAChC,IAAI,WAAW,CAAC,kBAAkB;AAAE,gBAAA,OAAO,IAAI;YAC/C,MAAM,EAAE,WAAW,EAAE,sBAAsB,EAAE,SAAS,EAAE,GAAG,WAAW;AAEtE,YAAA,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC;YAC3C,MAAM,iBAAiB,GAAG,aAAa,IAAI,WAAW,KACpDA,IAAC,KAAK,EAAA,EAAA,GACA,UAAU,EACd,SAAS,EAAC,YAAY,EACtB,WAAW,EAAE,WAAW,EAAA,CACxB,CACH;AAED,YAAA,MAAM,wBAAwB,GAAG,mBAAmB,CAAC,WAAW,CAAC;YACjE,MAAM,4BAA4B,GAAG,wBAAwB;AAC3D,gBAAA,sBAAsB,KACpBA,GAAA,CAAC,KAAK,EAAA,EAAA,GACA,UAAU,EACd,SAAS,EAAC,uBAAuB,EACjC,WAAW,EAAE,WAAW,EAAA,CACxB,CACH;YAEH,QACEC,IAAA,CAACC,UAAQ,EAAA,EAAA,QAAA,EAAA,CACN,iBAAiB,EACjB,4BAA4B,CAAA,EAAA,EAFhB,SAAS,CAGb;QAEf,CAAC,CAAC,EAAA,CACD;AAEP;AAEA,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/dist/esm/src/core/components/CallLayout/LivestreamLayout.js

@@ -0,0 +1,150 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useState, useEffect, useCallback } from 'react';
+import { useCallStateHooks, useI18n, useCall } from '@stream-io/video-react-bindings';
+import { humanize, hasScreenShare } from '@stream-io/video-client';
+import { useParticipantViewContext } from '../ParticipantView/ParticipantViewContext.js';
+import '../../../components/Menu/MenuToggle.js';
+import { ParticipantView } from '../ParticipantView/ParticipantView.js';
+import '../ParticipantView/DefaultParticipantViewUI.js';
+import '../Audio/Audio.js';
+import { ParticipantsAudio } from '../Audio/ParticipantsAudio.js';
+import { useRawRemoteParticipants, usePaginatedLayoutSortPreset } from './hooks.js';
+
+const LivestreamLayout = (props) => {
+    const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();
+    const call = useCall();
+    const participants = useParticipants();
+    const [currentSpeaker] = participants;
+    const remoteParticipants = useRawRemoteParticipants();
+    const hasOngoingScreenShare = useHasOngoingScreenShare();
+    const presenter = hasOngoingScreenShare
+        ? participants.find(hasScreenShare)
+        : undefined;
+    usePaginatedLayoutSortPreset(call);
+    const { floatingParticipantProps, muted, ParticipantViewUI } = props;
+    const overlay = ParticipantViewUI ?? (jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showMuteButton: props.showMuteButton, showSpeakerName: props.showSpeakerName, enableFullScreen: props.enableFullScreen }));
+    const floatingParticipantOverlay = hasOngoingScreenShare &&
+        (ParticipantViewUI ?? (jsx(ParticipantOverlay
+        // these elements aren't needed for the video feed
+        , { 
+            // these elements aren't needed for the video feed
+            showParticipantCount: floatingParticipantProps?.showParticipantCount ?? false, showDuration: floatingParticipantProps?.showDuration ?? false, showLiveBadge: floatingParticipantProps?.showLiveBadge ?? false, showSpeakerName: floatingParticipantProps?.showSpeakerName ?? true, enableFullScreen: floatingParticipantProps?.enableFullScreen ?? true })));
+    return (jsxs("div", { className: "str-video__livestream-layout__wrapper", children: [!muted && jsx(ParticipantsAudio, { participants: remoteParticipants }), hasOngoingScreenShare && presenter && (jsx(ParticipantView, { className: "str-video__livestream-layout__screen-share", participant: presenter, ParticipantViewUI: overlay, trackType: "screenShareTrack", muteAudio // audio is rendered by ParticipantsAudio
+                : true })), currentSpeaker && (jsx(ParticipantView, { className: clsx(hasOngoingScreenShare &&
+                    clsx('str-video__livestream-layout__floating-participant', `str-video__livestream-layout__floating-participant--${floatingParticipantProps?.position ?? 'top-right'}`)), participant: currentSpeaker, ParticipantViewUI: floatingParticipantOverlay || overlay, mirror: props.mirrorLocalParticipantVideo !== false ? undefined : false, muteAudio // audio is rendered by ParticipantsAudio
+                : true }))] }));
+};
+LivestreamLayout.displayName = 'LivestreamLayout';
+const BackstageLayout = (props) => {
+    const { showEarlyParticipantCount = true, humanizeParticipantCount = true } = props;
+    const { useParticipantCount, useCallStartsAt } = useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const startsAt = useCallStartsAt();
+    const { t } = useI18n();
+    const [startsAtPassed, setStartsAtPassed] = useState(() => !!startsAt && startsAt.getTime() < Date.now());
+    useEffect(() => {
+        if (!startsAt || startsAtPassed)
+            return;
+        const check = () => {
+            if (startsAt.getTime() < Date.now()) {
+                setStartsAtPassed(true);
+            }
+        };
+        const interval = setInterval(check, 1000);
+        return () => clearInterval(interval);
+    }, [startsAt, startsAtPassed]);
+    return (jsx("div", { className: "str-video__livestream-layout__wrapper", children: jsxs("div", { className: "str-video__livestream-layout__backstage", children: [startsAt && (jsx("span", { className: "str-video__livestream-layout__starts-at", children: startsAtPassed
+                        ? t('Livestream starts soon')
+                        : t('Livestream starts at {{ time }}', {
+                            time: startsAt.toLocaleTimeString([], {
+                                hour: '2-digit',
+                                minute: '2-digit',
+                            }),
+                        }) })), showEarlyParticipantCount && (jsx("span", { className: "str-video__livestream-layout__early-viewers-count", children: t('{{ count }} participants joined early', {
+                        count: humanizeParticipantCount
+                            ? humanize(participantCount)
+                            : participantCount,
+                    }) }))] }) }));
+};
+BackstageLayout.displayName = 'BackstageLayout';
+const ParticipantOverlay = (props) => {
+    const { enableFullScreen = true, showParticipantCount = true, humanizeParticipantCount = true, showDuration = true, showLiveBadge = true, showMuteButton = true, showSpeakerName = false, } = props;
+    const overlayBarVisible = enableFullScreen ||
+        showParticipantCount ||
+        showDuration ||
+        showLiveBadge ||
+        showMuteButton ||
+        showSpeakerName;
+    const { participant, participantViewElement } = useParticipantViewContext();
+    const { useParticipantCount, useSpeakerState } = useCallStateHooks();
+    const participantCount = useParticipantCount();
+    const duration = useUpdateCallDuration();
+    const toggleFullScreen = useToggleFullScreen();
+    const { speaker, volume } = useSpeakerState();
+    const isSpeakerMuted = volume === 0;
+    const { t } = useI18n();
+    return (jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [jsxs("div", { className: "str-video__livestream-layout__overlay__bar-left", children: [showLiveBadge && (jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsx("span", { className: "str-video__livestream-layout__viewers-count", children: humanizeParticipantCount
+                                ? humanize(participantCount)
+                                : participantCount })), showSpeakerName && (jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' }))] }), jsx("div", { className: "str-video__livestream-layout__overlay__bar-center", children: showDuration && (jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })) }), jsxs("div", { className: "str-video__livestream-layout__overlay__bar-right", children: [showMuteButton && (jsx("span", { className: clsx('str-video__livestream-layout__mute-button', isSpeakerMuted &&
+                                'str-video__livestream-layout__mute-button--muted'), onClick: () => speaker.setVolume(isSpeakerMuted ? 1 : 0) })), enableFullScreen &&
+                            participantViewElement &&
+                            typeof participantViewElement.requestFullscreen !==
+                                'undefined' && (jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })] })) }));
+};
+const useUpdateCallDuration = () => {
+    const { useIsCallLive, useCallSession } = useCallStateHooks();
+    const isCallLive = useIsCallLive();
+    const session = useCallSession();
+    const [duration, setDuration] = useState(() => {
+        if (!session || !session.live_started_at)
+            return 0;
+        const liveStartTime = new Date(session.live_started_at);
+        const now = new Date();
+        return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);
+    });
+    useEffect(() => {
+        if (!isCallLive)
+            return;
+        const interval = setInterval(() => {
+            setDuration((d) => d + 1);
+        }, 1000);
+        return () => {
+            clearInterval(interval);
+        };
+    }, [isCallLive]);
+    return duration;
+};
+const useToggleFullScreen = () => {
+    const { participantViewElement } = useParticipantViewContext();
+    const [isFullscreen, setIsFullscreen] = useState(!!document.fullscreenElement);
+    useEffect(() => {
+        const handler = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener('fullscreenchange', handler);
+        return () => {
+            document.removeEventListener('fullscreenchange', handler);
+        };
+    }, []);
+    return useCallback(() => {
+        if (isFullscreen) {
+            document.exitFullscreen().catch((err) => {
+                console.error('Failed to exit fullscreen', err);
+            });
+        }
+        else {
+            participantViewElement?.requestFullscreen().catch((err) => {
+                console.error('Failed to enter fullscreen', err);
+            });
+        }
+    }, [isFullscreen, participantViewElement]);
+};
+const formatDuration = (durationInMs) => {
+    const days = Math.floor(durationInMs / 86400);
+    const hours = Math.floor(durationInMs / 3600);
+    const minutes = Math.floor((durationInMs % 3600) / 60);
+    const seconds = durationInMs % 60;
+    return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+};
+
+export { BackstageLayout, LivestreamLayout };
+//# sourceMappingURL=LivestreamLayout.js.map

package/dist/esm/src/core/components/CallLayout/LivestreamLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LivestreamLayout.js","sources":["../../../../../../../../src/core/components/CallLayout/LivestreamLayout.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport {\n  ComponentType,\n  ReactElement,\n  useCallback,\n  useEffect,\n  useState,\n} from 'react';\nimport {\n  useCall,\n  useCallStateHooks,\n  useI18n,\n} from '@stream-io/video-react-bindings';\nimport { hasScreenShare, humanize } from '@stream-io/video-client';\nimport { ParticipantView, useParticipantViewContext } from '../ParticipantView';\nimport { ParticipantsAudio } from '../Audio';\nimport {\n  usePaginatedLayoutSortPreset,\n  useRawRemoteParticipants,\n} from './hooks';\n\n/**\n * The props for the {@link LivestreamLayout} component.\n */\nexport type LivestreamLayoutProps = {\n  /**\n   * Whether the livestream is muted. Defaults to `false`.\n   */\n  muted?: boolean;\n\n  /**\n   * Whether to show the participant count. Defaults to `true`.\n   */\n  showParticipantCount?: boolean;\n\n  /**\n   * Whether to humanize the participant count. Defaults to `true`.\n   * @example\n   * 1000 participants -> 1k\n   * 1500 participants -> 1.5k\n   * 10_000 participants -> 10k\n   * 100_000 participants -> 100k\n   */\n  humanizeParticipantCount?: boolean;\n\n  /**\n   * Whether to enable fullscreen mode. Defaults to `true`.\n   */\n  enableFullScreen?: boolean;\n\n  /**\n   * Whether to show the duration of the call. Defaults to `true`.\n   */\n  showDuration?: boolean;\n\n  /**\n   * Whether to show the live badge. Defaults to `true`.\n   */\n  showLiveBadge?: boolean;\n\n  /**\n   * Whether to show the speaker name. Defaults to `false`.\n   */\n  showSpeakerName?: boolean;\n\n  /**\n   * Whether to show the mute button. Defaults to `true`.\n   */\n  showMuteButton?: boolean;\n\n  /**\n   * When set to `false` disables mirroring of the local participant's video.\n   * @default true\n   */\n  mirrorLocalParticipantVideo?: boolean;\n\n  /**\n   * The props to pass to the floating participant element.\n   */\n  floatingParticipantProps?: LivestreamLayoutProps & {\n    /**\n     * The position of the floating participant element. Defaults to `top-right`.\n     */\n    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n  };\n\n  /**\n   * Override the default participant view overlay UI.\n   */\n  ParticipantViewUI?: ComponentType | ReactElement | null;\n};\n\nexport const LivestreamLayout = (props: LivestreamLayoutProps) => {\n  const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();\n  const call = useCall();\n  const participants = useParticipants();\n  const [currentSpeaker] = participants;\n  const remoteParticipants = useRawRemoteParticipants();\n  const hasOngoingScreenShare = useHasOngoingScreenShare();\n  const presenter = hasOngoingScreenShare\n    ? participants.find(hasScreenShare)\n    : undefined;\n\n  usePaginatedLayoutSortPreset(call);\n\n  const { floatingParticipantProps, muted, ParticipantViewUI } = props;\n  const overlay = ParticipantViewUI ?? (\n    <ParticipantOverlay\n      showParticipantCount={props.showParticipantCount}\n      showDuration={props.showDuration}\n      showLiveBadge={props.showLiveBadge}\n      showMuteButton={props.showMuteButton}\n      showSpeakerName={props.showSpeakerName}\n      enableFullScreen={props.enableFullScreen}\n    />\n  );\n\n  const floatingParticipantOverlay =\n    hasOngoingScreenShare &&\n    (ParticipantViewUI ?? (\n      <ParticipantOverlay\n        // these elements aren't needed for the video feed\n        showParticipantCount={\n          floatingParticipantProps?.showParticipantCount ?? false\n        }\n        showDuration={floatingParticipantProps?.showDuration ?? false}\n        showLiveBadge={floatingParticipantProps?.showLiveBadge ?? false}\n        showSpeakerName={floatingParticipantProps?.showSpeakerName ?? true}\n        enableFullScreen={floatingParticipantProps?.enableFullScreen ?? true}\n      />\n    ));\n\n  return (\n    <div className=\"str-video__livestream-layout__wrapper\">\n      {!muted && <ParticipantsAudio participants={remoteParticipants} />}\n      {hasOngoingScreenShare && presenter && (\n        <ParticipantView\n          className=\"str-video__livestream-layout__screen-share\"\n          participant={presenter}\n          ParticipantViewUI={overlay}\n          trackType=\"screenShareTrack\"\n          muteAudio // audio is rendered by ParticipantsAudio\n        />\n      )}\n      {currentSpeaker && (\n        <ParticipantView\n          className={clsx(\n            hasOngoingScreenShare &&\n              clsx(\n                'str-video__livestream-layout__floating-participant',\n                `str-video__livestream-layout__floating-participant--${\n                  floatingParticipantProps?.position ?? 'top-right'\n                }`,\n              ),\n          )}\n          participant={currentSpeaker}\n          ParticipantViewUI={floatingParticipantOverlay || overlay}\n          mirror={\n            props.mirrorLocalParticipantVideo !== false ? undefined : false\n          }\n          muteAudio // audio is rendered by ParticipantsAudio\n        />\n      )}\n    </div>\n  );\n};\n\nLivestreamLayout.displayName = 'LivestreamLayout';\n\n/**\n * The props for the {@link LivestreamLayout} component.\n */\nexport type BackstageLayoutProps = {\n  /**\n   * Whether to show the counter for participants that joined before\n   * the livestream went live. Defaults to `true`.\n   */\n  showEarlyParticipantCount?: boolean;\n\n  /**\n   * Show the participant count in a humanized format. Defaults to `true`.\n   * @example\n   * 1000 participants -> 1k\n   * 1500 participants -> 1.5k\n   * 10_000 participants -> 10k\n   * 10_0000 participants -> 100k\n   */\n  humanizeParticipantCount?: boolean;\n};\n\nexport const BackstageLayout = (props: BackstageLayoutProps) => {\n  const { showEarlyParticipantCount = true, humanizeParticipantCount = true } =\n    props;\n  const { useParticipantCount, useCallStartsAt } = useCallStateHooks();\n  const participantCount = useParticipantCount();\n  const startsAt = useCallStartsAt();\n  const { t } = useI18n();\n  const [startsAtPassed, setStartsAtPassed] = useState(\n    () => !!startsAt && startsAt.getTime() < Date.now(),\n  );\n\n  useEffect(() => {\n    if (!startsAt || startsAtPassed) return;\n\n    const check = () => {\n      if (startsAt.getTime() < Date.now()) {\n        setStartsAtPassed(true);\n      }\n    };\n\n    const interval = setInterval(check, 1000);\n    return () => clearInterval(interval);\n  }, [startsAt, startsAtPassed]);\n\n  return (\n    <div className=\"str-video__livestream-layout__wrapper\">\n      <div className=\"str-video__livestream-layout__backstage\">\n        {startsAt && (\n          <span className=\"str-video__livestream-layout__starts-at\">\n            {startsAtPassed\n              ? t('Livestream starts soon')\n              : t('Livestream starts at {{ time }}', {\n                  time: startsAt.toLocaleTimeString([], {\n                    hour: '2-digit',\n                    minute: '2-digit',\n                  }),\n                })}\n          </span>\n        )}\n        {showEarlyParticipantCount && (\n          <span className=\"str-video__livestream-layout__early-viewers-count\">\n            {t('{{ count }} participants joined early', {\n              count: humanizeParticipantCount\n                ? humanize(participantCount)\n                : participantCount,\n            })}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n};\n\nBackstageLayout.displayName = 'BackstageLayout';\n\nconst ParticipantOverlay = (props: {\n  enableFullScreen?: boolean;\n  showParticipantCount?: boolean;\n  humanizeParticipantCount?: boolean;\n  showDuration?: boolean;\n  showLiveBadge?: boolean;\n  showSpeakerName?: boolean;\n  showMuteButton?: boolean;\n}) => {\n  const {\n    enableFullScreen = true,\n    showParticipantCount = true,\n    humanizeParticipantCount = true,\n    showDuration = true,\n    showLiveBadge = true,\n    showMuteButton = true,\n    showSpeakerName = false,\n  } = props;\n  const overlayBarVisible =\n    enableFullScreen ||\n    showParticipantCount ||\n    showDuration ||\n    showLiveBadge ||\n    showMuteButton ||\n    showSpeakerName;\n  const { participant, participantViewElement } = useParticipantViewContext();\n  const { useParticipantCount, useSpeakerState } = useCallStateHooks();\n  const participantCount = useParticipantCount();\n  const duration = useUpdateCallDuration();\n  const toggleFullScreen = useToggleFullScreen();\n  const { speaker, volume } = useSpeakerState();\n  const isSpeakerMuted = volume === 0;\n  const { t } = useI18n();\n  return (\n    <div className=\"str-video__livestream-layout__overlay\">\n      {overlayBarVisible && (\n        <div className=\"str-video__livestream-layout__overlay__bar\">\n          <div className=\"str-video__livestream-layout__overlay__bar-left\">\n            {showLiveBadge && (\n              <span className=\"str-video__livestream-layout__live-badge\">\n                {t('Live')}\n              </span>\n            )}\n            {showParticipantCount && (\n              <span className=\"str-video__livestream-layout__viewers-count\">\n                {humanizeParticipantCount\n                  ? humanize(participantCount)\n                  : participantCount}\n              </span>\n            )}\n            {showSpeakerName && (\n              <span\n                className=\"str-video__livestream-layout__speaker-name\"\n                title={participant.name || participant.userId || ''}\n              >\n                {participant.name || participant.userId || ''}\n              </span>\n            )}\n          </div>\n          <div className=\"str-video__livestream-layout__overlay__bar-center\">\n            {showDuration && (\n              <span className=\"str-video__livestream-layout__duration\">\n                {formatDuration(duration)}\n              </span>\n            )}\n          </div>\n          <div className=\"str-video__livestream-layout__overlay__bar-right\">\n            {showMuteButton && (\n              <span\n                className={clsx(\n                  'str-video__livestream-layout__mute-button',\n                  isSpeakerMuted &&\n                    'str-video__livestream-layout__mute-button--muted',\n                )}\n                onClick={() => speaker.setVolume(isSpeakerMuted ? 1 : 0)}\n              />\n            )}\n            {enableFullScreen &&\n              participantViewElement &&\n              typeof participantViewElement.requestFullscreen !==\n                'undefined' && (\n                <span\n                  className=\"str-video__livestream-layout__go-fullscreen\"\n                  onClick={toggleFullScreen}\n                />\n              )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst useUpdateCallDuration = () => {\n  const { useIsCallLive, useCallSession } = useCallStateHooks();\n  const isCallLive = useIsCallLive();\n  const session = useCallSession();\n  const [duration, setDuration] = useState(() => {\n    if (!session || !session.live_started_at) return 0;\n    const liveStartTime = new Date(session.live_started_at);\n    const now = new Date();\n    return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);\n  });\n\n  useEffect(() => {\n    if (!isCallLive) return;\n    const interval = setInterval(() => {\n      setDuration((d) => d + 1);\n    }, 1000);\n    return () => {\n      clearInterval(interval);\n    };\n  }, [isCallLive]);\n\n  return duration;\n};\n\nconst useToggleFullScreen = () => {\n  const { participantViewElement } = useParticipantViewContext();\n  const [isFullscreen, setIsFullscreen] = useState(\n    !!document.fullscreenElement,\n  );\n  useEffect(() => {\n    const handler = () => setIsFullscreen(!!document.fullscreenElement);\n    document.addEventListener('fullscreenchange', handler);\n    return () => {\n      document.removeEventListener('fullscreenchange', handler);\n    };\n  }, []);\n  return useCallback(() => {\n    if (isFullscreen) {\n      document.exitFullscreen().catch((err) => {\n        console.error('Failed to exit fullscreen', err);\n      });\n    } else {\n      participantViewElement?.requestFullscreen().catch((err) => {\n        console.error('Failed to enter fullscreen', err);\n      });\n    }\n  }, [isFullscreen, participantViewElement]);\n};\n\nconst formatDuration = (durationInMs: number) => {\n  const days = Math.floor(durationInMs / 86400);\n  const hours = Math.floor(durationInMs / 3600);\n  const minutes = Math.floor((durationInMs % 3600) / 60);\n  const seconds = durationInMs % 60;\n\n  return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${\n    minutes < 10 ? '0' : ''\n  }${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/src/core/components/CallLayout/PaginatedGridLayout.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+import clsx from 'clsx';
+import '@stream-io/video-client';
+import '../ParticipantView/ParticipantViewContext.js';
+import '../../../components/Menu/MenuToggle.js';
+import { ParticipantView } from '../ParticipantView/ParticipantView.js';
+import { DefaultParticipantViewUI } from '../ParticipantView/DefaultParticipantViewUI.js';
+import '../Audio/Audio.js';
+import { ParticipantsAudio } from '../Audio/ParticipantsAudio.js';
+import '../../../components/BackgroundFilters/BackgroundFiltersProvider.js';
+import '../../../components/Button/CompositeButton.js';
+import { IconButton } from '../../../components/Button/IconButton.js';
+import '@floating-ui/react';
+import '../../../components/CallControls/RecordCallButton.js';
+import '../../../components/CallControls/ReactionsButton.js';
+import '../../../components/DeviceSettings/DeviceSettings.js';
+import '../../../components/DropdownSelect/DropdownSelect.js';
+import '../../../components/CallControls/CancelCallButton.js';
+import '../../../components/CallControls/CallStatsButton.js';
+import '../../../components/CallParticipantsList/CallParticipantsList.js';
+import '../../../components/CallParticipantsList/CallParticipantListingItem.js';
+import '../../../components/CallStats/CallStats.js';
+import '../../../components/NoiseCancellation/NoiseCancellationProvider.js';
+import '../../../components/RingingCall/RingingCall.js';
+import '../../../components/Permissions/PermissionRequests.js';
+import '../Video/Video.js';
+import '../Video/BaseVideo.js';
+import '../Video/DefaultVideoPlaceholder.js';
+import { chunk } from '../../../utilities/chunk.js';
+import { useRawRemoteParticipants, useFilteredParticipants, usePaginatedLayoutSortPreset } from './hooks.js';
+
+const GROUP_SIZE = 16;
+const PaginatedGridLayoutGroup = ({ group, mirror, VideoPlaceholder, PictureInPicturePlaceholder, ParticipantViewUI, }) => {
+    return (jsx("div", { "data-group-size": group.length, className: clsx('str-video__paginated-grid-layout__group', {
+            'str-video__paginated-grid-layout--one': group.length === 1,
+            'str-video__paginated-grid-layout--two-four': group.length >= 2 && group.length <= 4,
+            'str-video__paginated-grid-layout--five-nine': group.length >= 5 && group.length <= 9,
+        }), children: group.map((participant) => (jsx(ParticipantView, { participant: participant, muteAudio: true, mirror: mirror, VideoPlaceholder: VideoPlaceholder, PictureInPicturePlaceholder: PictureInPicturePlaceholder, ParticipantViewUI: ParticipantViewUI }, participant.sessionId))) }));
+};
+const PaginatedGridLayout = (props) => {
+    const { groupSize = (props.groupSize || 0) > 0
+        ? props.groupSize || GROUP_SIZE
+        : GROUP_SIZE, excludeLocalParticipant = false, filterParticipants, mirrorLocalParticipantVideo = true, pageArrowsVisible = true, VideoPlaceholder, ParticipantViewUI = DefaultParticipantViewUI, PictureInPicturePlaceholder, muted, } = props;
+    const [page, setPage] = useState(0);
+    const [paginatedGridLayoutWrapperElement, setPaginatedGridLayoutWrapperElement,] = useState(null);
+    const call = useCall();
+    const remoteParticipants = useRawRemoteParticipants();
+    const participants = useFilteredParticipants({
+        excludeLocalParticipant,
+        filterParticipants,
+    });
+    usePaginatedLayoutSortPreset(call);
+    useEffect(() => {
+        if (!paginatedGridLayoutWrapperElement || !call)
+            return;
+        const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);
+        return () => cleanup?.();
+    }, [paginatedGridLayoutWrapperElement, call]);
+    // only used to render video elements
+    const participantGroups = useMemo(() => chunk(participants, groupSize), [participants, groupSize]);
+    const pageCount = participantGroups.length;
+    // update page when page count is reduced and selected page no longer exists
+    useEffect(() => {
+        if (page > pageCount - 1) {
+            setPage(Math.max(0, pageCount - 1));
+        }
+    }, [page, pageCount]);
+    const selectedGroup = participantGroups[page];
+    const mirror = mirrorLocalParticipantVideo ? undefined : false;
+    if (!call)
+        return null;
+    return (jsxs("div", { className: "str-video__paginated-grid-layout__wrapper", ref: setPaginatedGridLayoutWrapperElement, children: [!muted && jsx(ParticipantsAudio, { participants: remoteParticipants }), jsxs("div", { className: "str-video__paginated-grid-layout", children: [pageArrowsVisible && pageCount > 1 && (jsx(IconButton, { icon: "caret-left", disabled: page === 0, onClick: () => setPage((currentPage) => Math.max(0, currentPage - 1)) })), selectedGroup && (jsx(PaginatedGridLayoutGroup, { group: selectedGroup, mirror: mirror, VideoPlaceholder: VideoPlaceholder, ParticipantViewUI: ParticipantViewUI, PictureInPicturePlaceholder: PictureInPicturePlaceholder })), pageArrowsVisible && pageCount > 1 && (jsx(IconButton, { disabled: page === pageCount - 1, icon: "caret-right", onClick: () => setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1)) }))] })] }));
+};
+PaginatedGridLayout.displayName = 'PaginatedGridLayout';
+
+export { PaginatedGridLayout };
+//# sourceMappingURL=PaginatedGridLayout.js.map

package/dist/esm/src/core/components/CallLayout/PaginatedGridLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatedGridLayout.js","sources":["../../../../../../../../src/core/components/CallLayout/PaginatedGridLayout.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { useCall } from '@stream-io/video-react-bindings';\nimport { StreamVideoParticipant } from '@stream-io/video-client';\nimport clsx from 'clsx';\n\nimport {\n  DefaultParticipantViewUI,\n  ParticipantView,\n  ParticipantViewProps,\n} from '../ParticipantView';\nimport { ParticipantsAudio } from '../Audio';\nimport { IconButton } from '../../../components';\nimport { chunk } from '../../../utilities';\nimport {\n  ParticipantFilter,\n  ParticipantPredicate,\n  useFilteredParticipants,\n  usePaginatedLayoutSortPreset,\n  useRawRemoteParticipants,\n} from './hooks';\n\nconst GROUP_SIZE = 16;\n\ntype PaginatedGridLayoutGroupProps = {\n  /**\n   * The group of participants to render.\n   */\n  group: Array<StreamVideoParticipant>;\n} & Pick<\n  ParticipantViewProps,\n  'VideoPlaceholder' | 'PictureInPicturePlaceholder' | 'mirror'\n> &\n  Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;\n\nconst PaginatedGridLayoutGroup = ({\n  group,\n  mirror,\n  VideoPlaceholder,\n  PictureInPicturePlaceholder,\n  ParticipantViewUI,\n}: PaginatedGridLayoutGroupProps) => {\n  return (\n    <div\n      data-group-size={group.length}\n      className={clsx('str-video__paginated-grid-layout__group', {\n        'str-video__paginated-grid-layout--one': group.length === 1,\n        'str-video__paginated-grid-layout--two-four':\n          group.length >= 2 && group.length <= 4,\n        'str-video__paginated-grid-layout--five-nine':\n          group.length >= 5 && group.length <= 9,\n      })}\n    >\n      {group.map((participant) => (\n        <ParticipantView\n          key={participant.sessionId}\n          participant={participant}\n          muteAudio\n          mirror={mirror}\n          VideoPlaceholder={VideoPlaceholder}\n          PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n          ParticipantViewUI={ParticipantViewUI}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport type PaginatedGridLayoutProps = {\n  /**\n   * The number of participants to display per page.\n   */\n  groupSize?: number;\n\n  /**\n   * Whether to exclude the local participant from the grid.\n   * @default false\n   */\n  excludeLocalParticipant?: boolean;\n\n  /**\n   * Predicate to filter call participants or a filter object.\n   * @example\n   * // With a predicate:\n   * <PaginatedGridLayout\n   *   filterParticipants={p => p.roles.includes('student')}\n   * />\n   * @example\n   * // With a filter object:\n   * <PaginatedGridLayout\n   *   filterParticipants={{\n   *     $or: [\n   *       { roles: { $contains: 'student' } },\n   *       { isPinned: true },\n   *     ],\n   *   }}\n   * />\n   */\n  filterParticipants?: ParticipantPredicate | ParticipantFilter;\n\n  /**\n   * When set to `false` disables mirroring of the local partipant's video.\n   * @default true\n   */\n  mirrorLocalParticipantVideo?: boolean;\n\n  /**\n   * Turns on/off the pagination arrows.\n   * @default true\n   */\n  pageArrowsVisible?: boolean;\n\n  /**\n   * Whether the layout is muted. Defaults to `false`.\n   */\n  muted?: boolean;\n} & Pick<\n  ParticipantViewProps,\n  'ParticipantViewUI' | 'VideoPlaceholder' | 'PictureInPicturePlaceholder'\n>;\n\nexport const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {\n  const {\n    groupSize = (props.groupSize || 0) > 0\n      ? props.groupSize || GROUP_SIZE\n      : GROUP_SIZE,\n    excludeLocalParticipant = false,\n    filterParticipants,\n    mirrorLocalParticipantVideo = true,\n    pageArrowsVisible = true,\n    VideoPlaceholder,\n    ParticipantViewUI = DefaultParticipantViewUI,\n    PictureInPicturePlaceholder,\n    muted,\n  } = props;\n  const [page, setPage] = useState(0);\n  const [\n    paginatedGridLayoutWrapperElement,\n    setPaginatedGridLayoutWrapperElement,\n  ] = useState<HTMLDivElement | null>(null);\n\n  const call = useCall();\n  const remoteParticipants = useRawRemoteParticipants();\n  const participants = useFilteredParticipants({\n    excludeLocalParticipant,\n    filterParticipants,\n  });\n\n  usePaginatedLayoutSortPreset(call);\n\n  useEffect(() => {\n    if (!paginatedGridLayoutWrapperElement || !call) return;\n\n    const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);\n\n    return () => cleanup?.();\n  }, [paginatedGridLayoutWrapperElement, call]);\n\n  // only used to render video elements\n  const participantGroups = useMemo(\n    () => chunk(participants, groupSize),\n    [participants, groupSize],\n  );\n\n  const pageCount = participantGroups.length;\n\n  // update page when page count is reduced and selected page no longer exists\n  useEffect(() => {\n    if (page > pageCount - 1) {\n      setPage(Math.max(0, pageCount - 1));\n    }\n  }, [page, pageCount]);\n\n  const selectedGroup = participantGroups[page];\n  const mirror = mirrorLocalParticipantVideo ? undefined : false;\n\n  if (!call) return null;\n\n  return (\n    <div\n      className=\"str-video__paginated-grid-layout__wrapper\"\n      ref={setPaginatedGridLayoutWrapperElement}\n    >\n      {!muted && <ParticipantsAudio participants={remoteParticipants} />}\n      <div className=\"str-video__paginated-grid-layout\">\n        {pageArrowsVisible && pageCount > 1 && (\n          <IconButton\n            icon=\"caret-left\"\n            disabled={page === 0}\n            onClick={() =>\n              setPage((currentPage) => Math.max(0, currentPage - 1))\n            }\n          />\n        )}\n        {selectedGroup && (\n          <PaginatedGridLayoutGroup\n            group={selectedGroup}\n            mirror={mirror}\n            VideoPlaceholder={VideoPlaceholder}\n            ParticipantViewUI={ParticipantViewUI}\n            PictureInPicturePlaceholder={PictureInPicturePlaceholder}\n          />\n        )}\n        {pageArrowsVisible && pageCount > 1 && (\n          <IconButton\n            disabled={page === pageCount - 1}\n            icon=\"caret-right\"\n            onClick={() =>\n              setPage((currentPage) => Math.min(pageCount - 1, currentPage + 1))\n            }\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nPaginatedGridLayout.displayName = 'PaginatedGridLayout';\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,UAAU,GAAG,EAAE;AAarB,MAAM,wBAAwB,GAAG,CAAC,EAChC,KAAK,EACL,MAAM,EACN,gBAAgB,EAChB,2BAA2B,EAC3B,iBAAiB,GACa,KAAI;IAClC,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,iBAAA,EACmB,KAAK,CAAC,MAAM,EAC7B,SAAS,EAAE,IAAI,CAAC,yCAAyC,EAAE;AACzD,YAAA,uCAAuC,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC;YAC3D,4CAA4C,EAC1C,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC;YACxC,6CAA6C,EAC3C,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC;SACzC,CAAC,EAAA,QAAA,EAED,KAAK,CAAC,GAAG,CAAC,CAAC,WAAW,MACrBA,GAAA,CAAC,eAAe,IAEd,WAAW,EAAE,WAAW,EACxB,SAAS,QACT,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,2BAA2B,EAAE,2BAA2B,EACxD,iBAAiB,EAAE,iBAAiB,EAAA,EAN/B,WAAW,CAAC,SAAS,CAO1B,CACH,CAAC,EAAA,CACE;AAEV,CAAC;AAuDM,MAAM,mBAAmB,GAAG,CAAC,KAA+B,KAAI;IACrE,MAAM,EACJ,SAAS,GAAG,CAAC,KAAK,CAAC,SAAS,IAAI,CAAC,IAAI;AACnC,UAAE,KAAK,CAAC,SAAS,IAAI;AACrB,UAAE,UAAU,EACd,uBAAuB,GAAG,KAAK,EAC/B,kBAAkB,EAClB,2BAA2B,GAAG,IAAI,EAClC,iBAAiB,GAAG,IAAI,EACxB,gBAAgB,EAChB,iBAAiB,GAAG,wBAAwB,EAC5C,2BAA2B,EAC3B,KAAK,GACN,GAAG,KAAK;IACT,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;IACnC,MAAM,CACJ,iCAAiC,EACjC,oCAAoC,EACrC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AAEzC,IAAA,MAAM,IAAI,GAAG,OAAO,EAAE;AACtB,IAAA,MAAM,kBAAkB,GAAG,wBAAwB,EAAE;IACrD,MAAM,YAAY,GAAG,uBAAuB,CAAC;QAC3C,uBAAuB;QACvB,kBAAkB;AACnB,KAAA,CAAC;IAEF,4BAA4B,CAAC,IAAI,CAAC;IAElC,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,iCAAiC,IAAI,CAAC,IAAI;YAAE;QAEjD,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,iCAAiC,CAAC;AAEnE,QAAA,OAAO,MAAM,OAAO,IAAI;AAC1B,IAAA,CAAC,EAAE,CAAC,iCAAiC,EAAE,IAAI,CAAC,CAAC;;IAG7C,MAAM,iBAAiB,GAAG,OAAO,CAC/B,MAAM,KAAK,CAAC,YAAY,EAAE,SAAS,CAAC,EACpC,CAAC,YAAY,EAAE,SAAS,CAAC,CAC1B;AAED,IAAA,MAAM,SAAS,GAAG,iBAAiB,CAAC,MAAM;;IAG1C,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,IAAI,GAAG,SAAS,GAAG,CAAC,EAAE;AACxB,YAAA,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,CAAC;QACrC;AACF,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAErB,IAAA,MAAM,aAAa,GAAG,iBAAiB,CAAC,IAAI,CAAC;IAC7C,MAAM,MAAM,GAAG,2BAA2B,GAAG,SAAS,GAAG,KAAK;AAE9D,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEtB,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,2CAA2C,EACrD,GAAG,EAAE,oCAAoC,aAExC,CAAC,KAAK,IAAID,GAAA,CAAC,iBAAiB,EAAA,EAAC,YAAY,EAAE,kBAAkB,GAAI,EAClEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAA,CAC9C,iBAAiB,IAAI,SAAS,GAAG,CAAC,KACjCD,GAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,IAAI,KAAK,CAAC,EACpB,OAAO,EAAE,MACP,OAAO,CAAC,CAAC,WAAW,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC,CAAC,EAAA,CAExD,CACH,EACA,aAAa,KACZA,GAAA,CAAC,wBAAwB,EAAA,EACvB,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,EAClC,iBAAiB,EAAE,iBAAiB,EACpC,2BAA2B,EAAE,2BAA2B,GACxD,CACH,EACA,iBAAiB,IAAI,SAAS,GAAG,CAAC,KACjCA,IAAC,UAAU,EAAA,EACT,QAAQ,EAAE,IAAI,KAAK,SAAS,GAAG,CAAC,EAChC,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,MACP,OAAO,CAAC,CAAC,WAAW,KAAK,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,EAAE,WAAW,GAAG,CAAC,CAAC,CAAC,EAAA,CAEpE,CACH,CAAA,EAAA,CACG,CAAA,EAAA,CACF;AAEV;AAEA,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}