{"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","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","module","exports","Math","random","toString","substring","_a","rtl","speed","interval","height","baseUrl","gradientRatio","animate","ariaLabel","children","uniquekey","primaryColor","primaryOpacity","secondaryColor","secondaryOpacity","preserveAspectRatio","idClip","uid","idGradient","rtlStyle","transform","keyTimes","dur","React.createElement","role","viewBox","x","y","clipPath","fill","offset","stopColor","stopOpacity","attributeName","values","repeatCount","defaultProps","InitialComponent","rx","ry","ContentLoader","mergedProps","Svg","__assign","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=879807cbc74ed9296a49","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":""}