\n \n \n \n \n \n {isSidebarOpen ? \n \n \n\n
\n \n {label && (\n \n )}\n ({\n ...theme,\n colors: {\n ...theme.colors,\n primary: styles.colorBrand,\n primary25: styles.colorGrey,\n primary50: styles.colorGrey,\n },\n })}\n value={selectedOption}\n />\n
\n );\n};\n\nexport default InputList;\n","import Alert from '@mui/material/Alert';\nimport { useMemo } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { Locales } from 'kognia/i18n/types';\nimport Input from 'shared/components/input';\nimport InputList, { InputListOption } from 'shared/components/input-list';\nimport { useBranding } from 'shared/hooks/use-branding/useBranding';\nimport { User } from 'shared/types';\n\nimport styles from './AccountForm.module.scss';\n\ntype AccountFormProps = {\n user: User;\n};\n\nconst AccountForm = ({ user }: AccountFormProps): JSX.Element => {\n const { t } = useTranslation();\n const branding = useBranding();\n const languageOptions = useMemo(\n () =>\n [\n { label: t('languages:english'), value: Locales['en-US'] },\n { label: t('languages:spanish'), value: Locales['es-ES'] },\n ] as InputListOption[],\n [t],\n );\n\n const getSelectedLocale = (locale: string, options: InputListOption[]) => {\n return options.find((option) => option.value === locale);\n };\n\n const selectedLocale = useMemo(() => getSelectedLocale(user.locale, languageOptions), [languageOptions, user.locale]);\n\n return (\n \n
\n );\n};\n\nexport default AccountForm;\n","import { ErrorBoundary } from '@sentry/react';\nimport { ReactNode } from 'react';\n\nimport { ContainerWrapper, ContainerWrapperProps, Content } from './index.styled';\nimport { ErrorContainer } from '../error-boundary/error-container';\n\ninterface Props extends ContainerWrapperProps {\n children: ReactNode;\n fullScreen?: boolean;\n}\n\nconst Container = ({ children, fullScreen = false, backgroundImage, backgroundSize, backgroundColor }: Props) => {\n return (\n \n \n\n \n\n \n\n \n\n \n \n {t('account:info-alert', {\n clientDisplayName: branding.displayName,\n })}\n \n
\n {t('home:solutions.tactical-analysis.title')}
\n{t('home:solutions.tagging.title')}
\n{t('home:solutions.playlists.title')}
\n\n
\n {t('home:welcome', { firstName: user.firstName })}
\n{t('home:what-would-you-like-to-do')}
\n{t('recording-edit:form.title')}
\n\n
\n \n \n {\n onSubmit(liveTaggingSessionData.name);\n }}\n variant='contained'\n >\n {t('common:actions.update')}\n \n
\n \n );\n};\n\nexport default LiveTaggingSessionEditForm;\n","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { generatePath, RouteComponentProps, useHistory } from 'react-router-dom';\n\nimport { useFetchLiveTaggingSession } from 'api/tagging-tool/use-fetch-live-session';\nimport { useUpdateLiveTaggingSession } from 'api/tagging-tool/use-update-live-session';\nimport { routes } from 'kognia/router/routes';\nimport Container from 'shared/components/container';\nimport { SidebarLayout } from 'shared/components/sidebar-layout';\nimport Spinner from 'shared/components/spinner';\n\nimport styles from './LiveTaggingSessionEditPage.module.scss';\nimport LiveTaggingSessionEditForm from '../live-tagging-session-edit-form';\n\ntype RouteParams = { recordingId: string };\n\nconst LiveTaggingSessionEditPage = ({ liveTaggingSessionId }: LiveTaggingSessionEditPageProps) => {\n const { data, isError, isFetching, isSuccess } = useFetchLiveTaggingSession(liveTaggingSessionId);\n const history = useHistory();\n const redirectToRecordingListPage = () => {\n const recordingListPath = generatePath(routes.TAGGING_TOOL);\n history.push(recordingListPath);\n };\n\n const { sendLiveTaggingSessionUpdate } = useUpdateLiveTaggingSession(liveTaggingSessionId, () =>\n redirectToRecordingListPage(),\n );\n\n const { t } = useTranslation();\n\n const [isPageReady, setIsPageReady] = useState(false);\n\n useEffect(() => {\n if (isError || (!isFetching && !isPageReady)) {\n if (isSuccess) {\n setIsPageReady(true);\n } else {\n setIsPageReady(false);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isFetching, isError]);\n\n const showLoading = !isPageReady && isFetching;\n const showPage = isPageReady && isSuccess;\n const showError = !isPageReady && isError;\n\n const onSubmit = (params: string) => {\n sendLiveTaggingSessionUpdate(params);\n };\n\n return (\n {t('live-session-edit:error')}
}\n{t('playlist-detail:download-modal.choose-download-type')}
\n \n {t('playlist-detail:download-modal.single-video-file')}\n
\n }\n />\n \n {t('playlist-detail:download-modal.multiple-video-files')}\n
\n }\n />\n \n {t('playlist-detail:download-modal.choose-preferences')}
\n event.stopPropagation()} className={styles.formContainer}>\n \n
\n )}\n \n );\n};\n\nexport default MenuItemNewPlaylist;\n","import makeStyles from '@mui/styles/makeStyles';\nimport { Colors } from 'kognia-ui';\n\nexport const useAutocompleteStyles = makeStyles(() => ({\n root: {\n minHeight: '40px',\n },\n inputRoot: {\n paddingRight: `8px !important`,\n },\n endAdornment: {\n position: 'absolute',\n top: `calc(50% - 16px})`,\n },\n option: {\n padding: '0 !important',\n transition: 'all 0.2s ease-out',\n // Hover\n '&[data-focus=\"true\"]': {\n backgroundColor: Colors.athens,\n },\n // Selected\n '&[aria-selected=\"true\"]': {\n backgroundColor: 'transparent',\n '&:hover': {\n backgroundColor: Colors.athens,\n },\n },\n },\n}));\n","import { SvgIcon, type SvgIconProps } from '../svg-icon/SvgIcon';\n\nconst IconSearch = (props: Omit\n {props.showSearchResults && (\n
\n );\n};\n\nexport const SearchPlaylistResultsPopOver = (props: ResultsWrapperProps) => {\n const { t } = useTranslation();\n\n if (!open) return null;\n\n return (\n {props.title ? props.title : t('timeline:latest-playlists')}
\n )}\n {props.children}
\n {props.title ? props.title : t('timeline:latest-playlists')}
\n )}\n {props.children}
\n {children as React.ReactNode}
;\n};\n\nconst SearchItemClipsCount = styled('span')(({ theme }) => ({\n marginLeft: theme.spacing(1),\n marginRight: theme.spacing(0.5),\n fontSize: fontSizes.default,\n color: Colors.storm,\n}));\n\ninterface Props {\n playlistId: string;\n className?: string;\n onUpdateValue?: (playlist: Playlist | null, name: string, reason: AutocompleteChangeReason) => void;\n onClickElement?: (item: Playlist) => void;\n onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;\n onFocus?: () => void;\n onSearchTermChange?: (name: string) => void;\n onKeyDown?: (key: string) => void;\n onSubmit?: (name?: string) => void;\n onBlur?: (name?: string) => void;\n open?: boolean;\n showResultsInPopOver?: boolean;\n title?: string;\n}\n\nconst DEBOUNCE_TIME = 300;\n\nexport const SearchPlaylistAutocomplete = ({\n playlistId,\n onUpdateValue,\n className,\n onFocus,\n onBlur,\n onSearchTermChange,\n onSubmit,\n onKeyDown,\n onClickElement,\n open = false,\n title,\n showResultsInPopOver = false,\n}: Props) => {\n const filters = usePlaylistsFilters(playlistId);\n const [searchTerm, setSearchTerm] = React.useState(filters.name);\n const { t } = useTranslation();\n const [isActive, setIsActive] = useState(false);\n const { data, isLoading, appliedFilters, filterActions, fetchNextPage } = usePlaylists({\n playlistId,\n refetchInterval: false,\n isAutocomplete: true,\n });\n\n useEffect(() => {\n setSearchTerm(filters.name);\n }, [filters.name]);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const handleTermChange = useCallback(\n debounce((name: string) => {\n setSearchTerm(name);\n filterActions.setName(name);\n }, DEBOUNCE_TIME),\n [filterActions.setName],\n );\n\n const handleOnFocus = useCallback(() => {\n onFocus && onFocus();\n setIsActive(true);\n }, [onFocus]);\n\n const handleOnBlur = useCallback(() => {\n onBlur && onBlur(appliedFilters.name);\n setIsActive(false);\n }, [appliedFilters.name, onBlur]);\n\n const handleOnClose = useCallback(() => {\n setIsActive(false);\n }, []);\n\n const handleOnSubmit = useCallback(() => {\n onSubmit && onSubmit(appliedFilters.name);\n setIsActive(false);\n }, [appliedFilters.name, onSubmit]);\n\n const handleOnKeyUp = useCallback(\n (key: string) => {\n onKeyDown && onKeyDown(key);\n setIsActive(true);\n },\n [onKeyDown],\n );\n\n const isOpen = open || isActive;\n\n const PlaylistResultsComponent = useCallback(\n (props: any) => (\n