@azure/communication-react 1.5.1-alpha-202303010017 → 1.5.1-alpha-202303030153

package/dist/dist-cjs/communication-react/index.js

@@ -161,7 +161,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202303010017';
+var telemetryVersion = '1.5.1-alpha-202303030153';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9554,9 +9554,12 @@ const VERTICAL_GALLERY_GAP = 0.5;
 /**
  * @private
  */
-const childrenContainerStyle = {
-    width: '100%',
-    gap: `${VERTICAL_GALLERY_GAP}rem`
+const childrenContainerStyle = (pageControlBarHeight) => {
+    return {
+        width: '100%',
+        height: `calc(100% - ${pageControlBarHeight + VERTICAL_GALLERY_GAP}rem)`,
+        gap: `${VERTICAL_GALLERY_GAP}rem`
+    };
 };
 /**
  * @private
@@ -9615,16 +9618,16 @@ const navIconStyles = {
  */
 const VerticalGallery = (props) => {
     const { children, styles, childrenPerPage } = props;
-    const [page, setPage] = React.useState(0);
+    const [page, setPage] = React.useState(1);
     const [buttonState, setButtonState] = React.useState({ previous: true, next: true });
     const numberOfChildren = React__default['default'].Children.count(children);
-    const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
+    const lastPage = Math.ceil(numberOfChildren / childrenPerPage);
     const paginatedChildren = React.useMemo(() => {
         return bucketize(React__default['default'].Children.toArray(children), childrenPerPage);
     }, [children, childrenPerPage]);
-    const firstIndexOfCurrentPage = page * childrenPerPage;
+    const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
-    const childrenOnCurrentPage = paginatedChildren[clippedPage];
+    const childrenOnCurrentPage = paginatedChildren[clippedPage - 1];
     const showButtons = numberOfChildren > childrenPerPage;
     const onPreviousButtonClick = () => {
         setPage(page - 1);
@@ -9632,12 +9635,15 @@ const VerticalGallery = (props) => {
     const onNextButtonClick = () => {
         setPage(page + 1);
     };
+    if (page > lastPage && lastPage > 0) {
+        setPage(lastPage);
+    }
     React.useEffect(() => {
-        if (page > 0 && page < lastPage && showButtons) {
+        if (page > 1 && page < lastPage && showButtons) {
             // we are somewhere in between first and last pages.
             setButtonState({ previous: false, next: false });
         }
-        else if (page === 0 && showButtons) {
+        else if (page === 1 && showButtons) {
             // we are on the first page.
             setButtonState({ previous: true, next: false });
         }
@@ -9647,7 +9653,7 @@ const VerticalGallery = (props) => {
         }
     }, [page, numberOfChildren, lastPage, showButtons]);
     const childContainerStyle = React.useMemo(() => {
-        return { root: childrenContainerStyle };
+        return { root: childrenContainerStyle(2) };
     }, []);
     const childrenStyles = React.useMemo(() => {
         return { root: styles === null || styles === void 0 ? void 0 : styles.children };
@@ -9800,7 +9806,9 @@ const VERTICAL_GALLERY_TILE_STYLE = {
     minHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.minHeight}rem`,
     minWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
     maxHeight: `${VERTICAL_GALLERY_TILE_SIZE_REM.maxHeight}rem`,
-    maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`
+    maxWidth: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
+    width: '100%',
+    height: '100%'
 };
 /**
  * @private
@@ -10878,6 +10886,17 @@ const FloatingLocalVideoLayout = (props) => {
  * Currently the Calling JS SDK supports up to 4 remote video streams
  */
 const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
+/**
+ * @private
+ * Styles to disable the selectivity of a text in video gallery
+ */
+const unselectable = {
+    '-webkit-user-select': 'none',
+    '-webkit-touch-callout': 'none',
+    '-moz-user-select': 'none',
+    '-ms-user-select': 'none',
+    'user-select': 'none'
+};
 /**
  * @private
  * Default remote video tile menu options
@@ -11093,7 +11112,7 @@ const VideoGallery = (props) => {
     return (React__default['default'].createElement("div", { 
         /* @conditional-compile-remove(pinned-participants) */
         // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
-        id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root) },
+        id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root, unselectable) },
         videoGalleryLayout,
         /* @conditional-compile-remove(pinned-participants) */
         React__default['default'].createElement(Announcer, { announcementString: announcementString, ariaLive: "polite" })));