@azure/communication-react 1.22.0-alpha-202412040017 → 1.22.0-alpha-202412100018

package/dist/dist-esm/react-composites/src/composites/common/CaptionsBanner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { useState, useEffect, useCallback } from 'react';\nimport { _CaptionsBanner, _CaptionsBannerStrings, CustomAvatarOptions } from '@internal/react-components';\nimport { _DrawerMenu, _DrawerMenuItemProps, _DrawerSurface } from '@internal/react-components';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { CaptionsSettingsModal } from './CaptionsSettingsModal';\nimport { CaptionsBannerMoreButton } from './CaptionsBannerMoreButton';\nimport { useAdaptedSelector } from '../CallComposite/hooks/useAdaptedSelector';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { _captionsBannerSelector } from '@internal/calling-component-bindings';\nimport { useLocale } from '../localization';\nimport { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';\nimport { FocusableElement } from './types/FocusableElement';\n\nconst mobileViewBannerWidth = '90%';\n\n/** @private */\nexport const CaptionsBanner = (props: {\n  isMobile: boolean;\n  useTeamsCaptions?: boolean;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n  /** Element to return focus to when the Captions Banner is closed */\n  returnFocusRef?: React.RefObject<FocusableElement>;\n}): JSX.Element => {\n  const captionsBannerProps = useAdaptedSelector(_captionsBannerSelector);\n\n  const handlers = useHandlers(_CaptionsBanner);\n\n  const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = useState<boolean>(false);\n\n  const onClickCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(true);\n  };\n\n  const onDismissCaptionsSettings = (): void => {\n    setIsCaptionsSettingsOpen(false);\n  };\n\n  const containerClassName = mergeStyles(\n    props.captionsOptions?.height === 'full'\n      ? mergeStyles({\n          position: 'absolute',\n          height: '100%',\n          width: '100%'\n        })\n      : { position: 'relative' }\n  );\n\n  const floatingChildClassName = mergeStyles({\n    position: 'absolute',\n    right: 0,\n    top: 0\n  });\n\n  const strings = useLocale().strings.call;\n\n  const captionsBannerStrings: _CaptionsBannerStrings = {\n    captionsBannerSpinnerText: strings.captionsBannerSpinnerText\n  };\n\n  const onRenderAvatar = useCallback(\n    (userId?: string, options?: CustomAvatarOptions) => {\n      return <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />;\n    },\n    [props.onFetchAvatarPersonaData]\n  );\n\n  const { innerWidth: width } = window;\n\n  const [windowWidth, setWindowWidth] = useState(width);\n\n  useEffect(() => {\n    function handleResize(): void {\n      setWindowWidth(window.innerWidth);\n    }\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';\n\n  return (\n    <>\n      {isCaptionsSettingsOpen && (\n        <CaptionsSettingsModal\n          showCaptionsSettingsModal={isCaptionsSettingsOpen}\n          onDismissCaptionsSettings={onDismissCaptionsSettings}\n          changeCaptionLanguage={props.useTeamsCaptions}\n        />\n      )}\n      {\n        <div className={containerClassName}>\n          <Stack horizontalAlign=\"center\">\n            <Stack.Item style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth }}>\n              <_CaptionsBanner\n                {...captionsBannerProps}\n                {...handlers}\n                captionsOptions={props.captionsOptions}\n                onRenderAvatar={onRenderAvatar}\n                formFactor={props.isMobile ? 'compact' : 'default'}\n                strings={captionsBannerStrings}\n              />\n            </Stack.Item>\n          </Stack>\n          {!props.isMobile && captionsBannerProps.isCaptionsOn && (\n            <div className={floatingChildClassName}>\n              <CaptionsBannerMoreButton\n                onCaptionsSettingsClick={onClickCaptionsSettings}\n                returnFocusRef={props.returnFocusRef}\n              />\n            </div>\n          )}\n        </div>\n      }\n    </>\n  );\n};\n"]}