{"version":3,"sources":["webpack:///./src/constants.ts","webpack:///./src/components/privacy-info.tsx","webpack:///./src/components/request-language-modal/language-autocomplete.tsx","webpack:///./src/components/request-language-modal/language-request-success.tsx","webpack:///./src/components/request-language-modal/request-language-modal.tsx","webpack:///./src/components/pages/languages/images/_1.svg","webpack:///./src/components/pages/languages/images/_2.svg","webpack:///./src/components/pages/languages/images/_3.svg","webpack:///./src/components/pages/languages/images/fading.svg","webpack:///./src/components/pages/languages/images/Eq.svg","webpack:///../src/uid.ts","webpack:///../src/Svg.tsx","webpack:///../src/Holder.tsx","webpack:///./src/components/progress-bar/progress-bar.tsx","webpack:///./src/components/pages/languages/get-involved-modal.tsx","webpack:///./src/components/pages/languages/localization-box.tsx","webpack:///./src/components/pages/languages/languages.tsx"],"names":["DAILY_GOALS","Object","freeze","speak","listen","BENEFITS","WHATS_PUBLIC","localizedPrefix","React","Localized","id","className","elems","privacyLink","href","target","rel","LanguageAutocomplete","onChange","requestedLanguages","useTypedSelector","store","languages","fetchRequestedLanguages","useAction","RequestedLanguages","actions","fetch","Input","LabeledInput","useEffect","Downshift","getInputProps","getItemProps","isOpen","inputValue","selectedItem","highlightedIndex","options","Array","from","Set","filter","name","toLowerCase","includes","exactMatch","find","attrs","label","assign","required","type","style","position","left","top","zIndex","border","width","maxHeight","overflowY","background","item","backgroundColor","fontWeight","map","index","key","onRequestClose","SuccessIcon","TextButton","onClick","color","RequestLanguageModal","constructor","state","email","this","props","user","isSubmitted","language","NATIVE_NAMES","navigator","lang","split","otherLanguage","sendEmails","update","setState","checked","value","updateOtherLanguage","save","event","__awaiter","preventDefault","api","createLanguageRequest","updateUser","subscribeToNewsletter","render","Modal","innerClassName","LanguageRequestSuccess","onSubmit","LabeledSelect","entries","code","Hr","Button","disabled","rounded","PrivacyInfo","mapDispatchToProps","create","User","connect","mapStateToProps","module","exports","uid","Math","random","toString","substring","Svg","_a","rtl","speed","interval","height","baseUrl","gradientRatio","animate","ariaLabel","children","uniquekey","primaryColor","primaryOpacity","secondaryColor","secondaryOpacity","preserveAspectRatio","__rest","idClip","idGradient","rtlStyle","transform","keyTimes","dur","createElement","__assign","role","viewBox","x","y","clipPath","fill","offset","stopColor","stopOpacity","attributeName","values","repeatCount","defaultProps","InitialComponent","rx","ry","ContentLoader","mergedProps","progress","secondary","padding","GetInvolvedModal","locale","nativeName","vars","lineBreak","formatSeconds","totalSeconds","seconds","minutes","floor","hours","toPrecision","timeParts","push","join","Skeleton","loading","title","metricLabel","metricValue","progressLabel","progressTotal","progressSecondary","formatProgress","n","toLocaleString","ProgressBar","LoadingLocalizationBox","LocalizationBox","history","localeMessages","globalLocale","useLocale","showModal","setShowModal","useState","l10n","createCrossLocalization","LocalizationProvider","localizedPercentage","sentencesCount","speakers","goal","length","trackLanguages","toLocaleRouteBuilder","URLS","SPEAK","withRouter","LanguagesPage","inProgress","filteredInProgress","launched","filteredLaunched","selectedSection","showAllInProgress","showAllLaunched","showLanguageRequestModal","query","smallSearchInputRef","largeSearchInputRef","sortLocales","slice","presortLanguages","sortFn","l1","l2","sort","toggleShowAllInProgress","toggleShowAllLaunched","toggleSearch","changeSection","section","handleQueryChange","getString","filterLanguages","q","trim","handleQueryKeyDown","componentDidMount","Promise","all","fetchCrossLocaleMessages","fetchLanguageStats","componentDidUpdate","descriptionElems","localizationGlossaryLink","StyledLink","to","FAQ","sentenceCollectionGlossaryLink","speakLink","listenLink","LISTEN","inProgressCountLabel","launchedCountLabel","src","require","right","outline","bind","renderSearch","localization","i","display","flexDirection","marginRight","inputRef","placeholder","onKeyDown","ref","CloseIcon","black","marginTop","boxSizing","current","focus","SearchIcon","withLocalization"],"mappings":"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","file":"10.js?id=c2510bf73b61d1926d0d","sourcesContent":["export const DAILY_GOALS = Object.freeze({\n  speak: [120, 250],\n  listen: [240],\n});\n\nexport const BENEFITS = [\n  'rich-data',\n  'improve-audio',\n  'keep-track',\n  'compare-progress',\n  'view-goals',\n  'join-newsletter',\n];\n\nexport const WHATS_PUBLIC = [\n  'email-not-public',\n  'recordings-and-locale-public',\n  'username-optin-public',\n  'demographic-deidentified-clarity',\n  'username-email-not-demographic',\n];\n","import { Localized } from '@fluent/react';\nimport * as React from 'react';\n\nexport default ({ localizedPrefix }: { localizedPrefix?: string }) => {\n  localizedPrefix = localizedPrefix || '';\n  return (\n    <>\n      <Localized id={localizedPrefix + 'stayintouch'}>\n        <p className=\"small\" />\n      </Localized>\n      <br />\n\n      <Localized\n        id={localizedPrefix + 'privacy-info'}\n        elems={{\n          privacyLink: (\n            <a href=\"/privacy\" target=\"_blank\" rel=\"noopener noreferrer\" />\n          ),\n        }}>\n        <p className=\"small\" />\n      </Localized>\n    </>\n  );\n};\n","import Downshift from 'downshift';\nimport { Localized } from '@fluent/react';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport { useAction } from '../../hooks/store-hooks';\nimport { RequestedLanguages } from '../../stores/requested-languages';\nimport { useTypedSelector } from '../../stores/tree';\nimport { LabeledInput } from '../ui/ui';\n\nexport default function LanguageAutocomplete({\n  onChange,\n}: {\n  onChange: (...args: any[]) => any;\n}) {\n  const requestedLanguages = useTypedSelector(\n    store => store.requestedLanguages.languages\n  );\n  const fetchRequestedLanguages = useAction(RequestedLanguages.actions.fetch);\n\n  // Types for Downshift haven't caught up yet. Can be removed in the future\n  const Input = LabeledInput as any;\n\n  useEffect(() => {\n    fetchRequestedLanguages();\n  }, []);\n\n  return (\n    <Downshift onChange={onChange}>\n      {({\n        getInputProps,\n        getItemProps,\n        isOpen,\n        inputValue,\n        selectedItem,\n        highlightedIndex,\n      }) => {\n        const options = Array.from(\n          new Set(requestedLanguages || [])\n        ).filter(name => name.toLowerCase().includes(inputValue.toLowerCase()));\n        const exactMatch = options.find(\n          name => name.toLowerCase() === inputValue.toLowerCase()\n        );\n        return (\n          <div>\n            <Localized id=\"language-autocomplete\" attrs={{ label: true }}>\n              <Input\n                {...getInputProps({\n                  label: (\n                    <Localized id=\"other-language\">\n                      <span />\n                    </Localized>\n                  ),\n                  required: true,\n                  type: 'text',\n                })}\n              />\n            </Localized>\n            <div style={{ position: 'relative' }}>\n              {isOpen && (\n                <div\n                  style={{\n                    position: 'absolute',\n                    left: 0,\n                    top: '-1rem',\n                    zIndex: 10,\n                    border: '1px solid #ccc',\n                    width: '100%',\n                    maxHeight: '5rem',\n                    overflowY: 'auto',\n                    background: 'white',\n                  }}>\n                  {!exactMatch && (\n                    <div\n                      {...getItemProps({ item: inputValue })}\n                      style={{\n                        backgroundColor:\n                          highlightedIndex === 0 ? 'lightgray' : 'white',\n                        fontWeight: selectedItem === name ? 'bold' : 'normal',\n                      }}>\n                      Add new Language \"{inputValue}\"\n                    </div>\n                  )}\n                  {options.map((name, index) => (\n                    <div\n                      {...getItemProps({ item: name })}\n                      key={name}\n                      style={{\n                        backgroundColor:\n                          highlightedIndex === index + (exactMatch ? 0 : 1)\n                            ? 'lightgray'\n                            : 'white',\n                        fontWeight: selectedItem === name ? 'bold' : 'normal',\n                      }}>\n                      {name}\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        );\n      }}\n    </Downshift>\n  );\n}\n","import { Localized } from '@fluent/react';\nimport * as React from 'react';\nimport { SuccessIcon } from '../ui/icons';\nimport { TextButton } from '../ui/ui';\n\nexport default ({ onRequestClose }: { onRequestClose: () => void }) => (\n  <>\n    <SuccessIcon className=\"success\" />\n\n    <Localized id=\"request-language-success-title\">\n      <h2 />\n    </Localized>\n\n    <br />\n\n    <Localized id=\"request-language-success-content\">\n      <p className=\"small\" />\n    </Localized>\n\n    <br />\n\n    <Localized id=\"return-to-cv\">\n      <TextButton\n        onClick={onRequestClose}\n        className=\"small\"\n        style={{ fontWeight: 'bold', color: 'black' }}\n      />\n    </Localized>\n\n    <br />\n    <br />\n  </>\n);\n","import { Localized } from '@fluent/react';\nimport * as React from 'react';\nimport { connect } from 'react-redux';\nimport Modal from '../modal/modal';\nimport { Button, Hr, LabeledInput, LabeledSelect } from '../ui/ui';\nimport API from '../../services/api';\nimport { NATIVE_NAMES } from '../../services/localization';\nimport { RequestedLanguages } from '../../stores/requested-languages';\nimport StateTree from '../../stores/tree';\nimport { User } from '../../stores/user';\nimport PrivacyInfo from '../privacy-info';\nimport LanguageAutocomplete from './language-autocomplete';\nimport LanguageRequestSuccess from './language-request-success';\n\ninterface PropsFromState {\n  api: API;\n  user: User.State;\n}\n\ninterface PropsFromDispatch {\n  createLanguageRequest: typeof RequestedLanguages.actions.create;\n  updateUser: typeof User.actions.update;\n}\n\ninterface Props extends PropsFromState, PropsFromDispatch {\n  onRequestClose: () => void;\n}\n\ninterface State {\n  email: string;\n  isSubmitted: boolean;\n  language: string;\n  otherLanguage: string;\n  sendEmails: boolean;\n}\n\nclass RequestLanguageModal extends React.Component<Props, State> {\n  state: State = {\n    email: this.props.user.email,\n    isSubmitted: false,\n    language:\n      NATIVE_NAMES[\n        navigator.languages.find(lang => lang.split('-')[0] !== 'en')\n      ],\n    otherLanguage: '',\n    sendEmails: this.props.user.sendEmails,\n  };\n\n  private update = ({ target }: any) => {\n    this.setState({\n      [target.name]: target.type === 'checkbox' ? target.checked : target.value,\n    } as any);\n  };\n\n  private updateOtherLanguage = (otherLanguage: string) => {\n    this.setState({ otherLanguage });\n  };\n\n  private save = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const { api, createLanguageRequest, updateUser, user } = this.props;\n    const { email, language, otherLanguage, sendEmails } = this.state;\n\n    createLanguageRequest(language == 'other' ? otherLanguage : language);\n    if (!user.sendEmails && sendEmails) {\n      await api.subscribeToNewsletter(email);\n    }\n    updateUser({ email, sendEmails });\n    this.setState({ isSubmitted: true });\n  };\n\n  render() {\n    const { onRequestClose } = this.props;\n    const {\n      email,\n      language,\n      otherLanguage,\n      isSubmitted,\n      sendEmails,\n    } = this.state;\n    return (\n      <Modal\n        innerClassName={\n          'request-language-modal ' + (isSubmitted ? '' : 'left-align')\n        }\n        onRequestClose={onRequestClose}>\n        {isSubmitted ? (\n          <LanguageRequestSuccess onRequestClose={onRequestClose} />\n        ) : (\n          <form onSubmit={this.save}>\n            <div className=\"title-and-action\">\n              <Localized id=\"request-language-title\">\n                <h2 />\n              </Localized>\n            </div>\n\n            <br />\n\n            <Localized\n              id=\"request-language-form-language\"\n              attrs={{ label: true }}>\n              <LabeledSelect\n                name=\"language\"\n                required\n                value={language}\n                onChange={this.update}>\n                <Localized id=\"select-language\">\n                  <option value=\"\" />\n                </Localized>\n                {Object.entries(NATIVE_NAMES).map(([code, name]) => (\n                  <option key={name} value={name}>\n                    {name}\n                  </option>\n                ))}\n                <Localized id=\"other\">\n                  <option value=\"other\" />\n                </Localized>\n              </LabeledSelect>\n            </Localized>\n\n            {language == 'other' && (\n              <LanguageAutocomplete onChange={this.updateOtherLanguage} />\n            )}\n\n            <Localized id=\"email-input\" attrs={{ label: true }}>\n              <LabeledInput\n                label=\"Email\"\n                name=\"email\"\n                required\n                type=\"email\"\n                value={email}\n                onChange={this.update}\n              />\n            </Localized>\n\n            <label className=\"opt-in\">\n              <input\n                name=\"sendEmails\"\n                type=\"checkbox\"\n                checked={sendEmails}\n                onChange={this.update}\n              />\n              <Localized id=\"yes-receive-emails\">\n                <span />\n              </Localized>\n            </label>\n\n            <Hr />\n\n            <div className=\"actions\">\n              <Localized id=\"submit-form-action\">\n                <Button\n                  disabled={\n                    !email || (language == 'other' ? !otherLanguage : !language)\n                  }\n                  type=\"submit\"\n                  rounded\n                />\n              </Localized>\n              <div />\n            </div>\n\n            <br />\n\n            <PrivacyInfo />\n          </form>\n        )}\n      </Modal>\n    );\n  }\n}\n\nconst mapStateToProps = ({ api, user }: StateTree) => ({\n  api,\n  user,\n});\n\nconst mapDispatchToProps = {\n  createLanguageRequest: RequestedLanguages.actions.create,\n  updateUser: User.actions.update,\n};\n\nexport default connect<PropsFromState, any>(\n  mapStateToProps,\n  mapDispatchToProps\n)(RequestLanguageModal) as any;\n","module.exports = __webpack_public_path__ + \"79dbffceb35013c923b72303c9d0df86.svg\";","module.exports = __webpack_public_path__ + \"55f4e672ddb75a6950a89b83d458e4a9.svg\";","module.exports = __webpack_public_path__ + \"d63a5aded4eb0bb89848a31980429cb6.svg\";","module.exports = __webpack_public_path__ + \"0b0d3cdd003f14debd6d155a627b8dd3.svg\";","module.exports = __webpack_public_path__ + \"0fa4bb2a6927c6aa8377a61023968dfa.svg\";","export default (): string =>\n  Math.random()\n    .toString(36)\n    .substring(2)\n","import * as React from 'react'\n\nimport { IContentLoaderProps } from './'\nimport uid from './uid'\n\nexport default ({\n  rtl,\n  speed,\n  interval,\n  style,\n  width,\n  height,\n  baseUrl,\n  gradientRatio,\n  animate,\n  ariaLabel,\n  children,\n  className,\n  uniquekey,\n  primaryColor,\n  primaryOpacity,\n  secondaryColor,\n  secondaryOpacity,\n  preserveAspectRatio,\n  ...props\n}: IContentLoaderProps) => {\n  const idClip = uniquekey ? `${uniquekey}-idClip` : uid()\n  const idGradient = uniquekey ? `${uniquekey}-idGradient` : uid()\n  const rtlStyle = rtl ? { transform: 'scaleX(-1)' } : {}\n  const keyTimes = `0; ${interval}; 1`\n  const dur = `${speed}s`\n\n  return (\n    <svg\n      role=\"img\"\n      style={{ ...style, ...rtlStyle }}\n      className={className}\n      aria-label={ariaLabel ? ariaLabel : null}\n      viewBox={`0 0 ${width} ${height}`}\n      preserveAspectRatio={preserveAspectRatio}\n      {...props}\n    >\n      {ariaLabel ? <title>{ariaLabel}</title> : null}\n      <rect\n        x=\"0\"\n        y=\"0\"\n        width={width}\n        height={height}\n        clipPath={`url(${baseUrl}#${idClip})`}\n        style={{ fill: `url(${baseUrl}#${idGradient})` }}\n      />\n\n      <defs>\n        <clipPath id={idClip}>{children}</clipPath>\n\n        <linearGradient id={idGradient}>\n          <stop\n            offset=\"0%\"\n            stopColor={primaryColor}\n            stopOpacity={primaryOpacity}\n          >\n            {animate && (\n              <animate\n                attributeName=\"offset\"\n                values={`${-gradientRatio}; ${-gradientRatio}; 1`}\n                keyTimes={keyTimes}\n                dur={dur}\n                repeatCount=\"indefinite\"\n              />\n            )}\n          </stop>\n\n          <stop\n            offset=\"50%\"\n            stopColor={secondaryColor}\n            stopOpacity={secondaryOpacity}\n          >\n            {animate && (\n              <animate\n                attributeName=\"offset\"\n                values={`${-gradientRatio / 2}; ${-gradientRatio / 2}; ${1 +\n                  gradientRatio / 2}`}\n                keyTimes={keyTimes}\n                dur={dur}\n                repeatCount=\"indefinite\"\n              />\n            )}\n          </stop>\n\n          <stop\n            offset=\"100%\"\n            stopColor={primaryColor}\n            stopOpacity={primaryOpacity}\n          >\n            {animate && (\n              <animate\n                attributeName=\"offset\"\n                values={`0; 0; ${1 + gradientRatio}`}\n                keyTimes={keyTimes}\n                dur={dur}\n                repeatCount=\"indefinite\"\n              />\n            )}\n          </stop>\n        </linearGradient>\n      </defs>\n    </svg>\n  )\n}\n","import * as React from 'react'\n\nimport Svg from './Svg'\nimport { IContentLoaderProps } from './'\n\nexport const defaultProps: IContentLoaderProps = {\n  animate: true,\n  ariaLabel: 'Loading interface...',\n  baseUrl: '',\n  gradientRatio: 2,\n  height: 130,\n  interval: 0.25,\n  preserveAspectRatio: 'none',\n  primaryColor: '#f0f0f0',\n  primaryOpacity: 1,\n  rtl: false,\n  secondaryColor: '#e0e0e0',\n  secondaryOpacity: 1,\n  speed: 2,\n  style: {},\n  width: 400,\n}\n\nconst InitialComponent: React.FC<IContentLoaderProps> = props => (\n  <rect x=\"0\" y=\"0\" rx=\"5\" ry=\"5\" width={props.width} height={props.height} />\n)\n\nconst ContentLoader = (props: IContentLoaderProps) => {\n  const mergedProps = { ...defaultProps, ...props }\n\n  return (\n    <Svg {...mergedProps}>\n      {props.children || <InitialComponent {...mergedProps} />}\n    </Svg>\n  )\n}\n\nexport default ContentLoader\n","import * as React from 'react';\n\nexport default ({\n  children,\n  progress,\n  secondary,\n}: {\n  children?: any;\n  progress: number;\n  secondary?: boolean;\n}) => (\n  <div className=\"progress-bar\">\n    <div\n      className={'progress ' + (secondary ? 'blue' : '')}\n      style={\n        progress > 0\n          ? { width: 100 * progress + '%' }\n          : { width: 0, padding: 0 }\n      }>\n      {children}\n    </div>\n  </div>\n);\n","import * as React from 'react';\nimport { connect } from 'react-redux';\nimport Modal from '../../modal/modal';\nimport { SuccessIcon } from '../../ui/icons';\nimport API from '../../../services/api';\nimport { NATIVE_NAMES } from '../../../services/localization';\nimport { RequestedLanguages } from '../../../stores/requested-languages';\nimport StateTree from '../../../stores/tree';\nimport { User } from '../../../stores/user';\nimport PrivacyInfo from '../../privacy-info';\nimport { Button, Hr, LabeledInput } from '../../ui/ui';\nimport { Localized } from '@fluent/react';\n\ninterface PropsFromState {\n  api: API;\n  user: User.State;\n}\n\ninterface PropsFromDispatch {\n  createLanguageRequest: typeof RequestedLanguages.actions.create;\n  updateUser: typeof User.actions.update;\n}\n\ninterface Props extends PropsFromState, PropsFromDispatch {\n  locale: string;\n  onRequestClose: () => void;\n}\n\ninterface State {\n  email: string;\n  isSubmitted: boolean;\n  sendEmails: boolean;\n}\n\nclass GetInvolvedModal extends React.Component<Props, State> {\n  state: State = {\n    email: this.props.user.email,\n    isSubmitted: false,\n    sendEmails: this.props.user.sendEmails,\n  };\n\n  private update = ({ target }: any) => {\n    this.setState({\n      [target.name]: target.type === 'checkbox' ? target.checked : target.value,\n    } as any);\n  };\n\n  private save = async (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const { api, createLanguageRequest, locale, updateUser, user } = this.props;\n    const { email, sendEmails } = this.state;\n    createLanguageRequest(NATIVE_NAMES[locale]);\n    updateUser({ email, sendEmails });\n    this.setState({ isSubmitted: true });\n    if (!user.sendEmails && sendEmails) {\n      await api.subscribeToNewsletter(email);\n    }\n  };\n\n  render() {\n    const { locale, onRequestClose } = this.props;\n    const { email, isSubmitted, sendEmails } = this.state;\n\n    const nativeName = NATIVE_NAMES[locale] || locale;\n\n    return (\n      <Modal\n        innerClassName=\"get-involved-modal\"\n        onRequestClose={onRequestClose}>\n        <br />\n        <Localized id=\"get-involved-title\" vars={{ lang: nativeName }}>\n          <h2 />\n        </Localized>\n        <br />\n        <Localized\n          id=\"get-involved-text\"\n          vars={{ lang: nativeName }}\n          elems={{ lineBreak: <br /> }}>\n          <p />\n        </Localized>\n        <br />\n        <div className=\"title-and-action\">\n          {!isSubmitted && (\n            <Localized id=\"get-involved-form-title\" vars={{ lang: nativeName }}>\n              <h4 />\n            </Localized>\n          )}\n        </div>\n        {isSubmitted ? (\n          <div className=\"signup-success\">\n            <SuccessIcon />\n\n            <Localized\n              id=\"get-involved-success-title\"\n              vars={{ language: nativeName }}>\n              <h2 />\n            </Localized>\n\n            <br />\n\n            <Localized id=\"get-involved-success-text\">\n              <p className=\"small\" />\n            </Localized>\n\n            <br />\n\n            <Localized id=\"get-involved-return-to-languages\">\n              <Button rounded onClick={onRequestClose} />\n            </Localized>\n          </div>\n        ) : (\n          <form onSubmit={this.save}>\n            <br />\n\n            <Localized id=\"get-involved-email\" attrs={{ label: true }}>\n              <LabeledInput\n                label=\"Email\"\n                name=\"email\"\n                required\n                type=\"email\"\n                value={email}\n                onChange={this.update}\n              />\n            </Localized>\n\n            <label className=\"opt-in\">\n              <input\n                name=\"sendEmails\"\n                type=\"checkbox\"\n                checked={sendEmails}\n                onChange={this.update}\n              />\n              <Localized id=\"get-involved-opt-in\">\n                <span />\n              </Localized>\n            </label>\n\n            <Hr />\n\n            <div className=\"center\">\n              <Localized id=\"get-involved-submit\">\n                <Button\n                  disabled={!email || !sendEmails}\n                  type=\"submit\"\n                  rounded\n                />\n              </Localized>\n              <div />\n            </div>\n\n            <br />\n\n            <PrivacyInfo localizedPrefix=\"get-involved-\" />\n          </form>\n        )}\n      </Modal>\n    );\n  }\n}\n\nconst mapStateToProps = ({ api, user }: StateTree) => ({\n  api,\n  user,\n});\n\nconst mapDispatchToProps = {\n  createLanguageRequest: RequestedLanguages.actions.create,\n  updateUser: User.actions.update,\n};\n\nexport default connect<PropsFromState, any>(\n  mapStateToProps,\n  mapDispatchToProps\n)(GetInvolvedModal) as any;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { DAILY_GOALS } from '../../../constants';\nimport { RouteComponentProps, withRouter } from 'react-router';\nimport ContentLoader from 'react-content-loader';\nimport { InProgressLanguage, LaunchedLanguage } from 'common';\nimport URLS from '../../../urls';\nimport { createCrossLocalization } from '../../../services/localization';\nimport { trackLanguages } from '../../../services/tracker';\nimport { toLocaleRouteBuilder, useLocale } from '../../locale-helpers';\nimport ProgressBar from '../../progress-bar/progress-bar';\nimport { Hr } from '../../ui/ui';\nimport GetInvolvedModal from './get-involved-modal';\nimport { Localized, LocalizationProvider } from '@fluent/react';\n\nconst SENTENCE_COUNT_TARGET = 5000;\n\nfunction formatSeconds(totalSeconds: number) {\n  const seconds = totalSeconds % 60;\n  const minutes = Math.floor(totalSeconds / 60) % 60;\n  const hours = Math.floor(totalSeconds / 3600);\n\n  if (hours >= 1000) {\n    return (hours / 1000).toPrecision(2) + 'k';\n  }\n\n  const timeParts = [];\n\n  if (hours > 0) {\n    timeParts.push(hours + 'h');\n  }\n\n  if (hours < 10 && minutes > 0) {\n    timeParts.push(minutes + 'm');\n  }\n\n  if (hours == 0 && minutes < 10 && seconds > 0) {\n    timeParts.push(seconds + 's');\n  }\n\n  return timeParts.join(' ') || '0';\n}\n\nfunction Skeleton({\n  loading,\n  title,\n  metricLabel,\n  metricValue,\n  progressLabel,\n  progress,\n  progressTotal,\n  progressSecondary,\n  formatProgress = n => n.toString(),\n  children,\n  onClick,\n}: {\n  loading?: boolean;\n  title?: React.ReactNode;\n  metricLabel?: React.ReactNode;\n  metricValue?: React.ReactNode;\n  progressLabel?: React.ReactNode;\n  progress?: number;\n  progressTotal?: number;\n  progressSecondary?: boolean;\n  formatProgress?: (n: number) => string;\n  children?: React.ReactNode;\n  onClick?: any;\n}) {\n  return (\n    <li className={'language ' + (loading ? 'loading' : '')}>\n      <div className=\"info\">\n        <h2>{loading ? <ContentLoader /> : title}</h2>\n        <div className=\"numbers\">\n          <div>\n            {loading ? (\n              <ContentLoader height={25} />\n            ) : (\n              <>\n                {metricLabel}\n                <b className=\"value\">{metricValue.toLocaleString()}</b>\n              </>\n            )}\n          </div>\n          <Hr />\n          <div>\n            {loading ? (\n              <ContentLoader height={25} />\n            ) : (\n              <>\n                {progressLabel}\n                <span className=\"value\">\n                  <b>{formatProgress(progress)}</b> /{' '}\n                  {formatProgress(progressTotal)}\n                </span>\n              </>\n            )}\n          </div>\n          {loading ? (\n            <ContentLoader height={25} />\n          ) : (\n            <ProgressBar\n              progress={progress / progressTotal}\n              secondary={progressSecondary}\n            />\n          )}\n        </div>\n      </div>\n      {loading ? (\n        <button>Loading...</button>\n      ) : (\n        children && <button onClick={onClick}>{children}</button>\n      )}\n    </li>\n  );\n}\n\nexport function LoadingLocalizationBox() {\n  return <Skeleton loading />;\n}\n\ntype Props = RouteComponentProps<{}> & {\n  localeMessages: string[][];\n} & (\n    | (InProgressLanguage & { type: 'in-progress' })\n    | (LaunchedLanguage & { type: 'launched' })\n  );\n\nconst LocalizationBox = React.memo((props: Props) => {\n  const { history, locale, localeMessages } = props;\n\n  const [globalLocale] = useLocale();\n\n  const [showModal, setShowModal] = useState(false);\n\n  const l10n = createCrossLocalization(localeMessages, [locale, globalLocale]);\n\n  const title = (\n    <Localized id={locale}>\n      <span />\n    </Localized>\n  );\n\n  return (\n    <>\n      {showModal && (\n        <LocalizationProvider l10n={l10n}>\n          <GetInvolvedModal\n            locale={locale}\n            onRequestClose={() => setShowModal(false)}\n          />\n        </LocalizationProvider>\n      )}\n      {props.type === 'in-progress' ? (\n        <Skeleton\n          title={title}\n          metricLabel={\n            <Localized id=\"localized\">\n              <span />\n            </Localized>\n          }\n          metricValue={props.localizedPercentage + '%'}\n          progressLabel={\n            <Localized id=\"sentences\">\n              <span />\n            </Localized>\n          }\n          progress={props.sentencesCount}\n          progressTotal={SENTENCE_COUNT_TARGET}\n          onClick={() => setShowModal(true)}>\n          <LocalizationProvider l10n={l10n}>\n            <Localized id=\"get-involved-button\">\n              <span />\n            </Localized>\n          </LocalizationProvider>\n        </Skeleton>\n      ) : (\n        <Skeleton\n          title={title}\n          metricLabel={\n            <Localized id=\"language-speakers\">\n              <span />\n            </Localized>\n          }\n          metricValue={props.speakers}\n          progressLabel={\n            <Localized id=\"total-hours\">\n              <span />\n            </Localized>\n          }\n          progress={props.seconds}\n          progressTotal={\n            (DAILY_GOALS.speak.find(goal => goal * 3600 > props.seconds) ||\n              DAILY_GOALS.speak[DAILY_GOALS.speak.length - 1]) * 3600\n          }\n          formatProgress={formatSeconds}\n          progressSecondary\n          onClick={() => {\n            trackLanguages('contribute', locale);\n            history.push(toLocaleRouteBuilder(locale)(URLS.SPEAK));\n          }}>\n          <LocalizationProvider l10n={l10n}>\n            <Localized id=\"contribute\">\n              <span />\n            </Localized>\n          </LocalizationProvider>\n        </Skeleton>\n      )}\n    </>\n  );\n});\n\nexport default withRouter(LocalizationBox);\n","import {\n  Localized,\n  withLocalization,\n  WithLocalizationProps,\n} from '@fluent/react';\nimport * as React from 'react';\nimport { connect } from 'react-redux';\nimport { BaseLanguage, InProgressLanguage, LaunchedLanguage } from 'common';\nimport API from '../../../services/api';\nimport { NATIVE_NAMES } from '../../../services/localization';\nimport { trackLanguages } from '../../../services/tracker';\nimport { Locale } from '../../../stores/locale';\nimport StateTree from '../../../stores/tree';\nimport URLS from '../../../urls';\nimport RequestLanguageModal from '../../request-language-modal/request-language-modal';\nimport { CloseIcon, SearchIcon } from '../../ui/icons';\nimport { Button, Hr, StyledLink, TextButton } from '../../ui/ui';\nimport LocalizationBox, { LoadingLocalizationBox } from './localization-box';\n\ninterface PropsFromState {\n  api: API;\n  locale: Locale.State;\n}\n\ninterface Props extends PropsFromState, WithLocalizationProps {}\n\ntype LanguageSection = 'in-progress' | 'launched';\n\ninterface State {\n  inProgress: InProgressLanguage[];\n  filteredInProgress: InProgressLanguage[];\n  launched: LaunchedLanguage[];\n  filteredLaunched: LaunchedLanguage[];\n  localeMessages: string[][];\n  selectedSection: LanguageSection;\n  showAllInProgress: boolean;\n  showAllLaunched: boolean;\n  showLanguageRequestModal: boolean;\n  query: string;\n}\n\nclass LanguagesPage extends React.PureComponent<Props, State> {\n  state: State = {\n    inProgress: [],\n    filteredInProgress: [],\n    launched: [],\n    filteredLaunched: [],\n    localeMessages: null,\n    selectedSection: 'launched',\n    showAllInProgress: false,\n    showAllLaunched: false,\n    showLanguageRequestModal: false,\n    query: '',\n  };\n\n  smallSearchInputRef = React.createRef<HTMLInputElement>();\n  largeSearchInputRef = React.createRef<HTMLInputElement>();\n\n  async componentDidMount() {\n    const { api } = this.props;\n\n    const [localeMessages, { launched, inProgress }] = await Promise.all([\n      api.fetchCrossLocaleMessages(),\n      api.fetchLanguageStats(),\n    ]);\n\n    this.setState(\n      {\n        inProgress,\n        filteredInProgress: inProgress,\n        launched,\n        filteredLaunched: launched,\n        localeMessages,\n      },\n      this.sortLocales\n    );\n  }\n\n  componentDidUpdate({ locale }: Props) {\n    if (this.props.locale !== locale) {\n      this.sortLocales();\n    }\n  }\n\n  sortLocales = () => {\n    const { locale } = this.props;\n    const inProgress = this.state.inProgress.slice();\n    const launched = this.state.launched.slice();\n\n    function presortLanguages<T extends BaseLanguage>(\n      sortFn: (l1: T, l2: T) => number\n    ): (l1: T, l2: T) => number {\n      return (l1, l2) => {\n        // Selected locale comes first\n        if (l1.locale === locale) {\n          return -1;\n        }\n        if (l2.locale === locale) {\n          return 1;\n        }\n\n        // Browser locales are prioritized as well\n        if (navigator.languages.includes(l1.locale)) {\n          return -1;\n        }\n        if (navigator.languages.includes(l2.locale)) {\n          return 1;\n        }\n        return sortFn(l1, l2);\n      };\n    }\n\n    inProgress.sort(\n      presortLanguages((l1, l2) =>\n        l1.sentencesCount < l2.sentencesCount ||\n        l1.localizedPercentage < l2.localizedPercentage\n          ? 1\n          : -1\n      )\n    );\n    launched.sort(\n      presortLanguages((l1, l2) => (l1.seconds < l2.seconds ? 1 : -1))\n    );\n\n    this.setState({\n      inProgress,\n      filteredInProgress: inProgress,\n      launched,\n      filteredLaunched: launched,\n    });\n  };\n\n  toggleShowAllInProgress = () => {\n    this.setState(state => {\n      const showAllInProgress = !state.showAllInProgress;\n      trackLanguages(\n        showAllInProgress ? 'see-more' : 'see-less',\n        this.props.locale\n      );\n      return { showAllInProgress };\n    });\n  };\n\n  toggleShowAllLaunched = () => {\n    this.setState(state => {\n      const showAllLaunched = !state.showAllLaunched;\n      trackLanguages(\n        showAllLaunched ? 'see-more' : 'see-less',\n        this.props.locale\n      );\n      return { showAllLaunched };\n    });\n  };\n\n  toggleSearch = () =>\n    this.setState(({ inProgress, launched }) => ({\n      filteredInProgress: inProgress,\n      filteredLaunched: launched,\n      query: '',\n    }));\n\n  changeSection = (section: LanguageSection) => {\n    this.setState({\n      selectedSection: section,\n      showAllInProgress: false,\n      showAllLaunched: false,\n    });\n  };\n\n  handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { getString } = this.props;\n    const { inProgress, launched, selectedSection } = this.state;\n    const query = event.target.value;\n\n    function filterLanguages<T>(languages: T[]): T[] {\n      return query\n        ? languages.filter(({ locale }: any) => {\n            const q = query.toLowerCase().trim();\n            return (\n              locale.includes(q) ||\n              getString(locale).toLowerCase().includes(q) ||\n              (NATIVE_NAMES[locale] || '').toLowerCase().includes(q)\n            );\n          })\n        : languages;\n    }\n\n    const filteredInProgress = filterLanguages(inProgress);\n    const filteredLaunched = filterLanguages(launched);\n    this.setState({\n      filteredInProgress: filteredInProgress,\n      filteredLaunched: filteredLaunched,\n      query,\n      selectedSection:\n        filteredInProgress.length == 0\n          ? 'launched'\n          : filteredLaunched.length == 0\n          ? 'in-progress'\n          : selectedSection,\n    });\n  };\n\n  handleQueryKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Escape') {\n      this.toggleSearch();\n    }\n  };\n\n  render() {\n    const { getString } = this.props;\n    const {\n      inProgress,\n      filteredInProgress,\n      launched,\n      filteredLaunched,\n      localeMessages,\n      selectedSection,\n      showAllInProgress,\n      showAllLaunched,\n      showLanguageRequestModal,\n      query,\n    } = this.state;\n\n    const descriptionElems = {\n      localizationGlossaryLink: <StyledLink to={URLS.FAQ + '#localization'} />,\n      sentenceCollectionGlossaryLink: (\n        <StyledLink to={URLS.FAQ + '#sentence-collection'} />\n      ),\n      speakLink: <StyledLink to={URLS.SPEAK} />,\n      listenLink: <StyledLink to={URLS.LISTEN} />,\n    };\n\n    const inProgressCountLabel = query ? (\n      <span className=\"count\">({filteredInProgress.length})</span>\n    ) : (\n      ''\n    );\n    const launchedCountLabel = query ? (\n      <span className=\"count\">({filteredLaunched.length})</span>\n    ) : (\n      ''\n    );\n\n    return (\n      <div className={'selected-' + selectedSection}>\n        <br />\n\n        <div className=\"top\">\n          <div className=\"waves\">\n            <img src={require('./images/_1.svg')} />\n            <img src={require('./images/_2.svg')} />\n            <img src={require('./images/_3.svg')} className=\"red\" />\n\n            <img src={require('./images/fading.svg')} style={{ right: -5 }} />\n            <img src={require('./images/Eq.svg')} className=\"eq\" />\n          </div>\n\n          <div className=\"text\">\n            <div className=\"inner\">\n              <Localized id=\"request-language-text\">\n                <h2 />\n              </Localized>\n              <Localized id=\"request-language-button\">\n                <Button\n                  outline\n                  rounded\n                  onClick={() => {\n                    trackLanguages(\n                      'open-request-language-modal',\n                      this.props.locale\n                    );\n                    this.setState({ showLanguageRequestModal: true });\n                  }}\n                />\n              </Localized>\n            </div>\n          </div>\n        </div>\n\n        <br />\n\n        {showLanguageRequestModal && (\n          <RequestLanguageModal\n            onRequestClose={() =>\n              this.setState({ showLanguageRequestModal: false })\n            }\n          />\n        )}\n\n        <div className=\"mobile-headings\">\n          <Hr />\n\n          <div className=\"labels\">\n            <h2\n              className=\"launched\"\n              onClick={this.changeSection.bind(this, 'launched')}>\n              {getString('language-section-launched')}\n              {launchedCountLabel}\n            </h2>\n\n            <h2\n              className=\"in-progress\"\n              onClick={this.changeSection.bind(this, 'in-progress')}>\n              {getString('language-section-in-progress')}\n              {inProgressCountLabel}\n            </h2>\n          </div>\n\n          {this.renderSearch(this.smallSearchInputRef)}\n        </div>\n\n        <div className=\"language-sections\">\n          <section className=\"launched\">\n            <div className=\"title-and-search\">\n              <h1>\n                {getString('language-section-launched')}\n                {launchedCountLabel}\n              </h1>\n              {this.renderSearch(this.largeSearchInputRef)}\n              <Hr />\n            </div>\n\n            <Localized\n              id=\"language-section-launched-description\"\n              elems={descriptionElems}>\n              <p />\n            </Localized>\n            <ul>\n              {launched.length > 0\n                ? (query || showAllLaunched\n                    ? filteredLaunched\n                    : filteredLaunched.slice(0, 3)\n                  ).map((localization, i) => (\n                    <LocalizationBox\n                      key={localization.locale}\n                      localeMessages={localeMessages}\n                      type=\"launched\"\n                      {...localization}\n                    />\n                  ))\n                : [1, 2, 3].map((n, i) => <LoadingLocalizationBox key={i} />)}\n            </ul>\n\n            {!query && (\n              <Localized\n                id={'languages-show-' + (showAllLaunched ? 'less' : 'more')}>\n                <button\n                  disabled={launched.length === 0}\n                  className=\"show-all-languages\"\n                  onClick={this.toggleShowAllLaunched}\n                />\n              </Localized>\n            )}\n          </section>\n\n          <section className=\"in-progress\">\n            <div className=\"md-block\">\n              <div style={{ display: 'flex', flexDirection: 'row' }}>\n                <h1 style={{ marginRight: '1.5rem' }}>\n                  {getString('language-section-in-progress')}\n                  {inProgressCountLabel}\n                </h1>\n              </div>\n              <Hr />\n            </div>\n\n            <Localized\n              id=\"language-section-in-progress-new-description\"\n              elems={descriptionElems}>\n              <p />\n            </Localized>\n            <ul>\n              {inProgress.length > 0\n                ? (query || showAllInProgress\n                    ? filteredInProgress\n                    : filteredInProgress.slice(0, 3)\n                  ).map((localization, i) => (\n                    <LocalizationBox\n                      key={localization.locale}\n                      localeMessages={localeMessages}\n                      type=\"in-progress\"\n                      {...localization}\n                    />\n                  ))\n                : [1, 2, 3].map(i => <LoadingLocalizationBox key={i} />)}\n            </ul>\n\n            {!query && (\n              <Localized\n                id={'languages-show-' + (showAllInProgress ? 'less' : 'more')}>\n                <button\n                  disabled={inProgress.length === 0}\n                  className=\"show-all-languages\"\n                  onClick={this.toggleShowAllInProgress}\n                />\n              </Localized>\n            )}\n          </section>\n        </div>\n      </div>\n    );\n  }\n\n  renderSearch(inputRef: { current: null | HTMLInputElement }) {\n    const { query } = this.state;\n    return (\n      <div className=\"search\">\n        <Localized id=\"language-search-input\" attrs={{ placeholder: true }}>\n          <input\n            type=\"text\"\n            value={query}\n            onChange={this.handleQueryChange}\n            onKeyDown={this.handleQueryKeyDown}\n            ref={inputRef}\n          />\n        </Localized>\n        {query ? (\n          <TextButton onClick={this.toggleSearch} style={{ padding: 0 }}>\n            <CloseIcon\n              black\n              style={{\n                marginTop: 2,\n                marginRight: 8,\n                padding: 4,\n                boxSizing: 'border-box',\n              }}\n            />\n          </TextButton>\n        ) : (\n          <TextButton onClick={() => inputRef.current.focus()}>\n            <SearchIcon />\n          </TextButton>\n        )}\n      </div>\n    );\n  }\n}\n\nconst mapStateToProps = ({ api, locale }: StateTree) => ({\n  api,\n  locale,\n});\n\nexport default connect<PropsFromState>(mapStateToProps)(\n  withLocalization(LanguagesPage)\n);\n"],"sourceRoot":""}