bitsnap-react 1.12.0 → 1.13.0

package/dist/chunk-4BW6J7FP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/emems/web/bitsnap/bitsnap/bitsnap-react/dist/chunk-4BW6J7FP.js","../src/panel/components/PanelLogin.tsx","../src/ui/card.tsx","../src/ui/input-otp.tsx","../src/panel/LoadingIndicator.tsx","../src/panel/return-url.ts","../src/lib/render.text.tsx","../src/panel/audio-player/AudioPlayer.tsx"],"names":["Card","className","props","jsx","cn","CardHeader","CardTitle","CardDescription","CardContent","InputOTP","containerClassName","OTPInput","InputOTPGroup","InputOTPSlot","index","inputOTPContext","OTPInputContext","char","hasFakeCaret","isActive","jsxs","InputOTPSeparator","MinusIcon","LoadingIndicator","LoadingIndicator_default","RETURN_URL_PARAM","RETURN_URL_STORAGE_KEY","ACCESS_TOKEN_PARAM","getReturnURLFromSearch","search","raw","validateReturnURL","persistReturnURL","returnURL","readPersistedReturnURL","stored","isOriginAllowed","origin","allowedOrigins","allowed","allowedHost","originHost"],"mappings":"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","file":"/home/emems/web/bitsnap/bitsnap/bitsnap-react/dist/chunk-4BW6J7FP.js","sourcesContent":[null,"import { useAutoAnimate } from \"@formkit/auto-animate/react\";\nimport {\n  useEffect,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FormEvent,\n} from \"react\";\nimport {\n  InstrumentProvider,\n  useInstrument,\n  useInstrumentContext,\n  type AnalyticsOption,\n} from \"../../analytics/instrument\";\nimport { cn } from \"../../lib/utils\";\nimport { rpcProvider, useMutation } from \"../../rpc-provider\";\nimport { Button } from \"../../ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"../../ui/card\";\nimport { Input } from \"../../ui/input\";\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"../../ui/input-otp\";\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\";\nimport { Label } from \"../../ui/label\";\nimport LoadingIndicator from \"../LoadingIndicator\";\nimport {\n  getAllowedReturnOrigins,\n  setAllowedReturnOrigins,\n} from \"../config\";\nimport { usePanelConfig } from \"../PanelProvider\";\nimport {\n  buildAccessTokenRedirect,\n  getReturnURLFromSearch,\n  persistReturnURL,\n  readPersistedReturnURL,\n} from \"../return-url\";\nimport { getPanelSession, savePanelSession } from \"../session-storage\";\n\ntype LoginResponseStatus = \"success\" | \"error\" | \"default\";\n\nif (typeof window !== \"undefined\") {\n  const currentOrigin = window.location.origin;\n  const knownSiblings = [\n    currentOrigin,\n    \"https://bitsnap.pl\",\n    \"https://kursy.bitsnap.pl\",\n  ];\n  if (getAllowedReturnOrigins().length === 0) {\n    setAllowedReturnOrigins(Array.from(new Set(knownSiblings)));\n  }\n}\n\ninterface LoginUserPanelProps {\n  projectID?: string;\n  host?: string;\n  reveal: () => void;\n  email: string;\n  setEmail: (input: string) => void;\n  loginUser: () => void;\n  isLoginLoading: boolean;\n  errMsg: string;\n}\n\ninterface VerifyCodePanelProps {\n  projectID?: string;\n  host?: string;\n  email: string;\n  reveal: () => void;\n  setEmail: (input: string) => void;\n  loginUser: () => void;\n  isLoginLoading: boolean;\n  loginUserResponse: {\n    status: \"error\" | \"ok\";\n    retryIn: number;\n    message?: string | undefined;\n  } | null;\n  setLoginUserResponse: (\n    response: {\n      status: \"error\" | \"ok\";\n      retryIn: number;\n      message?: string | undefined;\n    } | null,\n  ) => void;\n  responseStatus: LoginResponseStatus;\n  setResponseStatus: (status: LoginResponseStatus) => void;\n  errMsg: string;\n}\n\nconst LoginUserPanel = ({\n  projectID,\n  host,\n  reveal,\n  email,\n  setEmail,\n  loginUser,\n  isLoginLoading,\n  errMsg,\n}: LoginUserPanelProps) => {\n  const { projectID: configuredProjectID, host: configuredHost } = usePanelConfig();\n  if (\n    typeof window !== \"undefined\" &&\n    getPanelSession(projectID ?? configuredProjectID, host ?? configuredHost) != null\n  ) {\n    // @ts-ignore\n    window.location.href = window.location.href.replaceAll(\"login\", \"\");\n    return null;\n  }\n\n  const [isValidEmail, setIsValidEmail] = useState<boolean>(false);\n\n  const emailValidation = (input: string) => {\n    const emailPattern =\n      /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n\n    if (emailPattern.test(input.trim())) {\n      return setIsValidEmail(true);\n    }\n\n    return setIsValidEmail(false);\n  };\n\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const { value } = e.target;\n    emailValidation(value);\n    setEmail(value);\n  };\n\n  function goToVerifyCode() {\n    reveal();\n  }\n\n  function onSubmit(e: FormEvent<HTMLFormElement>) {\n    e.preventDefault();\n    void loginUser();\n  }\n\n  return (\n    <main className=\"mx-auto flex max-w-sm flex-1 flex-col justify-center space-y-12\">\n      <div className={cn(\"flex min-w-sm flex-col gap-6\")}>\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Zaloguj się</CardTitle>\n            <CardDescription>\n              Wyślemy do Ciebie kod na maila, dzięki któremu się zalogujesz.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <form onSubmit={onSubmit}>\n              <div className=\"flex flex-col gap-6\">\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"email\">Email</Label>\n                  <Input\n                    id=\"email\"\n                    onChange={handleInputChange}\n                    type=\"email\"\n                    placeholder=\"m@example.com\"\n                    required\n                  />\n                  <span\n                    className={cn(\n                      !isValidEmail && email.length > 0\n                        ? \"font-bold text-red-500\"\n                        : \"text-neutral-700 dark:text-neutral-400\",\n                      \"text-xs\",\n                    )}\n                  >\n                    {!isValidEmail && email.length > 0\n                      ? \"Nieprawidłowy adres email\"\n                      : \"Wpisz swój adres email\"}\n                  </span>\n                </div>\n\n                <div>\n                  <Button\n                    type=\"submit\"\n                    disabled={isLoginLoading}\n                    className=\"relative w-full\"\n                    onClick={loginUser}\n                  >\n                    {isLoginLoading && (\n                      <div className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n                        <LoadingIndicator />\n                      </div>\n                    )}\n                    Zaloguj się\n                  </Button>\n                  {errMsg.length > 0 && (\n                    <p className=\"text-xs font-medium text-red-500\">{errMsg}</p>\n                  )}\n                </div>\n              </div>\n              <div className=\"mt-4 text-center text-sm\">\n                Masz już kod?{\" \"}\n                <button\n                  type=\"button\"\n                  onClick={goToVerifyCode}\n                  className=\"underline underline-offset-4\"\n                >\n                  Mam już kod\n                </button>\n              </div>\n            </form>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  );\n};\n\nconst VerifyCodePanel = ({\n  projectID,\n  host,\n  email,\n  reveal,\n  setEmail,\n  isLoginLoading,\n  loginUserResponse,\n  setLoginUserResponse,\n  setResponseStatus,\n  errMsg,\n}: VerifyCodePanelProps) => {\n  const instrument = useInstrumentContext();\n  const { mutateAsync: verifyCodeAsync, isPending: isVerifyLoading } =\n    useMutation(rpcProvider.publicApi.userPanelLoginWithCode);\n\n  const [code, setCode] = useState<string>(\"\");\n  const [isValidCode, setIsValidCode] = useState<boolean>(false);\n  const [isSubmitted, setIsSubmitted] = useState<boolean>(false);\n  const [retryIn, setRetryIn] = useState(0);\n\n  const codeValidation = (input: string) => {\n    const codePattern = /^\\d+$/;\n\n    if (codePattern.test(input.trim())) {\n      return setIsValidCode(true);\n    }\n\n    return setIsValidCode(false);\n  };\n\n  const handleInputChange = (value: string) => {\n    codeValidation(value);\n    setCode(value);\n  };\n\n  async function login() {\n    setIsSubmitted(true);\n    if (code.length == 0) {\n      setIsValidCode(false);\n      return;\n    }\n    const codeValue = parseInt(code);\n\n    const verifyCodeResult = await verifyCodeAsync({\n      code: codeValue,\n    });\n\n    let status, message, accessToken;\n\n    if (verifyCodeResult.result.case === \"accessToken\") {\n      setIsValidCode(true);\n      status = \"ok\";\n      message = undefined;\n      accessToken = verifyCodeResult.result.value;\n    } else {\n      setIsValidCode(false);\n      status = \"error\";\n      message = verifyCodeResult.result.value;\n      accessToken = undefined;\n    }\n\n    if (status === \"error\") {\n      setIsValidCode(false);\n      console.warn(\"error:\", `Kod błędu: ${message}`);\n      console.warn(\"Nieprawidłowy kod, spróbuj ponownie.\");\n    }\n\n    if (status === \"ok\") {\n      instrument.track(\"panel_login\", {});\n      if (accessToken) {\n        savePanelSession(projectID, accessToken, email, host);\n      }\n      const returnURL = typeof window !== \"undefined\"\n        ? readPersistedReturnURL()\n        : null;\n      setTimeout(() => {\n        if (accessToken && returnURL) {\n          window.location.href = buildAccessTokenRedirect(returnURL, accessToken);\n          return;\n        }\n        window.location.reload();\n      }, 100);\n    }\n  }\n\n  function handleRetryInTime() {\n    const intervalId = setInterval(() => {\n      setRetryIn((prevRetryIn) => {\n        if (prevRetryIn > 0) {\n          return prevRetryIn - 1;\n        } else {\n          clearInterval(intervalId);\n          return 0;\n        }\n      });\n    }, 1000);\n\n    return () => {\n      clearInterval(intervalId);\n    };\n  }\n\n  useEffect(() => {\n    if (loginUserResponse?.status === \"ok\" && loginUserResponse?.retryIn > 0) {\n      setRetryIn(loginUserResponse.retryIn);\n      handleRetryInTime();\n    }\n  }, [loginUserResponse]);\n\n  function backToLoginComponent() {\n    setEmail(\"\");\n    setLoginUserResponse(null);\n    setResponseStatus(\"default\");\n    reveal();\n  }\n\n  function onCodeSubmit(e: FormEvent<HTMLFormElement>) {\n    e.preventDefault();\n    void login();\n  }\n\n  return (\n    <main className=\"mx-auto flex max-w-md flex-1 flex-col justify-center space-y-8\">\n      <div className={cn(\"flex min-w-sm flex-col gap-6\")}>\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Wpisz kod z maila</CardTitle>\n            <CardDescription>\n              Sprawdź czy przypadkiem nie wylądował w spamie.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <form onSubmit={onCodeSubmit} className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <div className=\"my-5 flex w-full items-center justify-center\">\n                  <div className=\"flex flex-col gap-2\">\n                    <InputOTP\n                      id=\"verify-code\"\n                      maxLength={6}\n                      pattern={REGEXP_ONLY_DIGITS}\n                      onChange={(newValue) => {\n                        handleInputChange(newValue);\n                      }}\n                    >\n                      <InputOTPGroup>\n                        <InputOTPSlot index={0} />\n                        <InputOTPSlot index={1} />\n                        <InputOTPSlot index={2} />\n                      </InputOTPGroup>\n                      <InputOTPSeparator />\n                      <InputOTPGroup>\n                        <InputOTPSlot index={3} />\n                        <InputOTPSlot index={4} />\n                        <InputOTPSlot index={5} />\n                      </InputOTPGroup>\n                    </InputOTP>\n                    <span\n                      className={cn(\n                        !isValidCode && isSubmitted\n                          ? \"text-red-500\"\n                          : \"text-neutral-700 dark:text-neutral-400\",\n                        \"text-xs\",\n                      )}\n                    >\n                      {!isValidCode && isSubmitted\n                        ? code.length == 0\n                          ? \"Kod nie może być pusty\"\n                          : \"Kod musi składać się z cyfr\"\n                        : \"Wpisz kod z maila\"}\n                    </span>\n                  </div>\n                </div>\n              </div>\n\n              <div>\n                <Button\n                  type=\"submit\"\n                  disabled={isLoginLoading || isVerifyLoading}\n                  className=\"relative w-full\"\n                >\n                  {(isLoginLoading || isVerifyLoading) && (\n                    <div className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n                      <LoadingIndicator />\n                    </div>\n                  )}\n                  Zaloguj się\n                </Button>\n                {errMsg.length > 0 && (\n                  <p className=\"text-xs font-medium text-red-500\">{errMsg}</p>\n                )}\n              </div>\n            </form>\n            <div className=\"mt-4 text-center text-sm\">\n              Nie masz kodu?{\" \"}\n              <button\n                type=\"button\"\n                onClick={backToLoginComponent}\n                className=\"underline underline-offset-4\"\n              >\n                Wróć\n              </button>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  );\n};\n\nconst PanelLoginComponentWrapper = ({\n  analytics,\n}: {\n  analytics?: AnalyticsOption;\n}) => {\n  const { theme, allowedReturnOrigins, projectID, host } = usePanelConfig();\n  const instrument = useInstrument(projectID, analytics, \"panel\");\n\n  const styles = {\n    \"--button-background-color\": theme?.colors?.brand ?? \"#FFFFFF\",\n    \"--button-background-color-dark\": theme?.colors?.brandDark ?? \"#000000\",\n    \"--button-text-color\": theme?.colors?.brandDark ?? \"#000000\",\n    \"--button-text-color-dark\": theme?.colors?.brand ?? \"#FFFFFF\",\n  } as CSSProperties;\n\n  type Screen = \"login\" | \"verifyCode\";\n\n  const [activeScreen, setActiveScreen] = useState<Screen>(\"login\");\n  const [parent] = useAutoAnimate({\n    duration: 300,\n    easing: \"ease-in-out\",\n    disrespectUserMotionPreference: false,\n  });\n\n  const reveal = () =>\n    setActiveScreen((prevScreen) =>\n      prevScreen === \"login\" ? \"verifyCode\" : \"login\",\n    );\n\n  const [email, setEmail] = useState<string>(\"\");\n  const [responseStatus, setResponseStatus] =\n    useState<LoginResponseStatus>(\"default\");\n  const [loginUserResponse, setLoginUserResponse] = useState<{\n    status: \"error\" | \"ok\";\n    retryIn: number;\n    message?: string | undefined;\n  } | null>(null);\n  const { mutateAsync: loginUserAsync, isPending: isLoginLoading } =\n    useMutation(rpcProvider.publicApi.userPanelLogin);\n\n  const [errMsg, setErrMsg] = useState(\"\");\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    if (window.parent !== window) return;\n\n    const queryReturnURL = getReturnURLFromSearch(window.location.search);\n    if (queryReturnURL) {\n      persistReturnURL(queryReturnURL);\n    }\n\n    const returnURL = queryReturnURL ?? readPersistedReturnURL();\n    if (!returnURL) return;\n\n    const existingToken = getPanelSession(projectID, host);\n    if (!existingToken) return;\n\n    window.location.href = buildAccessTokenRedirect(returnURL, existingToken);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [allowedReturnOrigins, projectID, host]);\n\n  async function loginUser() {\n    setErrMsg(\"\");\n    setResponseStatus(\"default\");\n    const loginUserResult = await loginUserAsync({\n      email: email,\n    });\n\n    const status = loginUserResult.result.case === \"success\" ? \"ok\" : \"error\";\n    let retryIn = 0;\n    let message = undefined;\n\n    if (loginUserResult.result.case === \"success\") {\n      retryIn = loginUserResult.result.value.retryIn;\n    }\n\n    if (status === \"error\") {\n      message = \"Nieprawidłowy adres email, spróbuj ponownie.\";\n    }\n\n    setLoginUserResponse({\n      status: status,\n      retryIn: retryIn,\n      message: message,\n    });\n\n    if (status === \"ok\" && activeScreen === \"login\") {\n      reveal();\n    } else if (status === \"ok\" && activeScreen === \"verifyCode\") {\n      setResponseStatus(\"success\");\n    } else if (status === \"error\") {\n      setErrMsg(message ?? \"Nieprawidłowy adres email, spróbuj ponownie.\");\n    }\n  }\n\n  return (\n    <InstrumentProvider value={instrument}>\n    <div className=\"bg-white text-black dark:bg-black dark:text-white\">\n      <div\n        className=\"font-inter flex h-screen w-screen flex-col p-4\"\n        style={styles}\n        ref={parent}\n      >\n        <header>\n          {theme?.logoDarkURL && (\n            <img\n              src={theme?.logoDarkURL}\n              className=\"hidden dark:inline\"\n              alt=\"Company Logo\"\n              draggable={false}\n            />\n          )}\n          {theme?.logoURL && (\n            <img\n              src={theme?.logoURL}\n              className=\"dark:hidden\"\n              alt=\"Company Logo\"\n              draggable={false}\n            />\n          )}\n        </header>\n        {activeScreen === \"login\" && (\n          <LoginUserPanel\n            projectID={projectID}\n            host={host}\n            reveal={reveal}\n            email={email}\n            setEmail={setEmail}\n            loginUser={loginUser}\n            isLoginLoading={isLoginLoading}\n            errMsg={errMsg}\n          />\n        )}\n        {activeScreen === \"verifyCode\" && (\n          <VerifyCodePanel\n            projectID={projectID}\n            host={host}\n            email={email}\n            reveal={reveal}\n            setEmail={setEmail}\n            loginUser={loginUser}\n            isLoginLoading={isLoginLoading}\n            loginUserResponse={loginUserResponse}\n            setLoginUserResponse={setLoginUserResponse}\n            responseStatus={responseStatus}\n            setResponseStatus={setResponseStatus}\n            errMsg={errMsg}\n          />\n        )}\n      </div>\n    </div>\n    </InstrumentProvider>\n  );\n};\n\nexport const PanelLogin = ({\n  analytics,\n}: { analytics?: AnalyticsOption } = {}) => {\n  return <PanelLoginComponentWrapper analytics={analytics} />;\n};\n","import * as React from \"react\"\n\nimport { cn } from \"@/src/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","import * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/src/lib/utils\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"flex items-center gap-2 has-disabled:opacity-50\",\n        containerClassName\n      )}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n","export function LoadingIndicator() {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <div className=\"h-3 w-3 animate-bounce rounded-full bg-current [animation-delay:-0.3s]\" />\n      <div className=\"h-3 w-3 animate-bounce rounded-full bg-current [animation-delay:-0.15s]\" />\n      <div className=\"h-3 w-3 animate-bounce rounded-full bg-current\" />\n    </div>\n  );\n}\n\nexport default LoadingIndicator;\n","import { getAllowedReturnOrigins } from \"./config\";\n\nconst RETURN_URL_PARAM = \"return_url\";\nconst RETURN_URL_STORAGE_KEY = \"__return_url\";\nconst ACCESS_TOKEN_PARAM = \"accessToken\";\n\nexport function getReturnURLFromSearch(search: string): string | null {\n  const raw = new URLSearchParams(search).get(RETURN_URL_PARAM);\n  if (!raw) return null;\n  return validateReturnURL(raw);\n}\n\nexport function persistReturnURL(returnURL: string | null): void {\n  if (typeof window === \"undefined\") return;\n  if (returnURL) {\n    window.sessionStorage.setItem(RETURN_URL_STORAGE_KEY, returnURL);\n  } else {\n    window.sessionStorage.removeItem(RETURN_URL_STORAGE_KEY);\n  }\n}\n\nexport function readPersistedReturnURL(): string | null {\n  if (typeof window === \"undefined\") return null;\n  const stored = window.sessionStorage.getItem(RETURN_URL_STORAGE_KEY);\n  if (!stored) return null;\n  return validateReturnURL(stored);\n}\n\nfunction isOriginAllowed(origin: string, allowedOrigins: string[]): boolean {\n  return allowedOrigins.some((allowed) => {\n    if (origin === allowed) return true;\n    const allowedHost = new URL(allowed).hostname;\n    const originHost = new URL(origin).hostname;\n    return originHost.endsWith(`.${allowedHost}`) || originHost === allowedHost;\n  });\n}\n\nfunction validateReturnURL(raw: string): string | null {\n  try {\n    const u = new URL(raw);\n    if (u.protocol !== \"https:\" && u.protocol !== \"http:\") return null;\n    if (!isOriginAllowed(u.origin, getAllowedReturnOrigins())) return null;\n    return u.toString();\n  } catch {\n    return null;\n  }\n}\n\nexport function buildAccessTokenRedirect(\n  returnURL: string,\n  accessToken: string,\n): string {\n  const u = new URL(returnURL);\n  u.searchParams.set(ACCESS_TOKEN_PARAM, accessToken);\n  return u.toString();\n}\n","const URL_REGEX =\n  /https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\\+.~#?&//=]*)/g;\n\ntype Replacements = {\n  url: string;\n  startIndex: number;\n  endIndex: number;\n  replacementText?: string;\n};\n\nconst findURLIndices = (text: string) => {\n  const matches = [...text.matchAll(URL_REGEX)];\n  return matches.map(\n    (match) =>\n      ({\n        url: match[0],\n        startIndex: match.index,\n        endIndex: match.index + match[0].length - 1,\n      }) as Replacements,\n  );\n};\n\nconst replaceTextByIndices = (\n  originalText: string,\n  replacements: Replacements[],\n) => {\n  let result = \"\";\n  let lastIndex = 0;\n\n  // Sort replacements by startIndex to handle them in order\n  replacements.sort((a, b) => a.startIndex - b.startIndex);\n\n  for (const { startIndex, endIndex, replacementText } of replacements) {\n    // Append text before the current replacement\n    result += originalText.slice(lastIndex, startIndex);\n    // Append the replacement text\n    result += replacementText;\n    // Update lastIndex to after the replaced segment\n    lastIndex = endIndex + 1;\n  }\n\n  // Append any remaining text after the last replacement\n  result += originalText.slice(lastIndex);\n\n  return result;\n};\n\nexport const renderText = (txt: string) => {\n  const urlIndices = findURLIndices(txt);\n\n  return (\n    <p\n      dangerouslySetInnerHTML={{\n        __html: replaceTextByIndices(\n          txt,\n          urlIndices.map((el) => {\n            el[\"replacementText\"] =\n              `<a key=${el.url} href=${el.url} style=\"text-decoration: underline;\" target=\"_blank\">\n        ${el.url}\n        </a>`;\n            return el;\n          }),\n        ),\n      }}\n    ></p>\n  );\n};\n","import Hls from \"hls.js\";\nimport { Pause, Play } from \"lucide-react\";\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n} from \"react\";\nimport { Button } from \"../../ui/button\";\nimport LoadingIndicator from \"../LoadingIndicator\";\nimport {\n  mediaSessionPause,\n  mediaSessionPlay,\n  mediaSessionUpdateDurationAndPosition,\n  startMediaSessionCoordinator,\n  stopMediaSessionCoordinator,\n} from \"./media.session.coordinator\";\n\nimport \"./audio-player.css\";\n\ntype ChapterWithPublicUrl = {\n  id: string;\n  multimediaId?: string;\n  name: string;\n  description?: string;\n  publicUrl: string;\n  downloadableUrl?: string;\n  duration?: number;\n};\n\nexport type AudioPlayerMethods = {\n  selectChapter: (chapter: ChapterWithPublicUrl) => void;\n};\n\ntype AudioPlayerProps = {\n  chapters: ChapterWithPublicUrl[];\n  styles: CSSProperties;\n  updateCurrentTime?: (currentTime: number) => void;\n\n  title?: string;\n  imageURL?: string;\n\n  setCurrentTimeHandler?: (seekTo: (second: number) => void) => void;\n  uniqueProductID: string;\n\n  onChapterChange?: (chapter: ChapterWithPublicUrl) => void;\n};\n\nconst AudioPlayer = forwardRef<AudioPlayerMethods, AudioPlayerProps>(\n  (\n    {\n      chapters,\n      styles,\n      updateCurrentTime,\n      setCurrentTimeHandler,\n      title,\n      imageURL,\n      uniqueProductID,\n      onChapterChange,\n    },\n    ref,\n  ) => {\n    enum PlayState {\n      Playing,\n      Paused,\n    }\n\n    const [playState, setPlayState] = useState<PlayState>(PlayState.Paused);\n\n    useEffect(() => {\n      switch (playState) {\n        case PlayState.Playing:\n          mediaSessionPlay();\n          break;\n        case PlayState.Paused:\n          mediaSessionPause();\n          break;\n      }\n    }, [playState]);\n\n    useImperativeHandle(ref, () => {\n      return {\n        selectChapter: (chapter: ChapterWithPublicUrl) => {\n          playChapter(chapter);\n        },\n      };\n    });\n\n    const [currentTime, setCurrentTime] = useState<number | undefined>(\n      undefined,\n    );\n    const [duration, setDuration] = useState<number | undefined>(undefined);\n\n    const videoRef = useRef<HTMLVideoElement | null>(null);\n    const hlsRef = useRef<Hls | undefined>(undefined);\n    const timerRef = useRef<number | undefined>(undefined);\n\n    const audioPlayerContainerRef = useRef<HTMLDivElement>(null!);\n\n    const currentChapterRef = useRef<ChapterWithPublicUrl | null>(null);\n\n    const [playWhenReady, setPlayWhenReady] = useState(true);\n    const [isStarted, setIsStarted] = useState(false);\n    const [isLoading, setIsLoading] = useState(!isSafari());\n\n    function saveLastPlayedTime(timeInSeconds: number) {\n      if (timeInSeconds < 10) {\n        return;\n      }\n      localStorage.setItem(\n        `__player__${uniqueProductID}_${currentChapterRef.current?.id}`,\n        `${timeInSeconds}`,\n      );\n    }\n\n    function getLastPlayedTime(): number | undefined {\n      const time = localStorage.getItem(\n        `__player__${uniqueProductID}_${currentChapterRef.current?.id}`,\n      );\n\n      if (time == null) {\n        return undefined;\n      }\n      try {\n        const result = parseInt(time);\n\n        if (isNaN(result) || result < 0) {\n          return undefined;\n        }\n\n        return result;\n      } catch (e) {\n        return undefined;\n      }\n    }\n\n    function getLastSelectedChapterID(): string | undefined {\n      const lastSelectedChapterID = localStorage.getItem(\n        `__player__${uniqueProductID}_last_chapter`,\n      );\n      if (lastSelectedChapterID == null) {\n        return undefined;\n      }\n      return lastSelectedChapterID;\n    }\n\n    function setLastSelectedChapterID(chapterID: string) {\n      localStorage.setItem(\n        `__player__${uniqueProductID}_last_chapter`,\n        chapterID,\n      );\n    }\n\n    function deleteMemoryChapter(chapterID: string) {\n      localStorage.removeItem(`__player__${uniqueProductID}_${chapterID}`);\n    }\n\n    function setupObservers() {\n      if (videoRef.current == null) {\n        return;\n      }\n      videoRef.current.onloadeddata = () => {\n        if (videoRef.current == null) {\n          return;\n        }\n        if (videoRef.current.readyState < 2) {\n          setIsLoading(true);\n        }\n        if (videoRef.current.readyState >= 2) {\n          setIsLoading(false);\n        }\n\n        if (!isStarted) {\n          const lastPlayedTime = getLastPlayedTime();\n          if (lastPlayedTime != undefined) {\n            seekTo(lastPlayedTime);\n          }\n          setIsStarted(true);\n        }\n        if (playWhenReady) {\n          setPlayWhenReady(false);\n          try {\n            play();\n          } catch (e) {\n            console.log(\"play error\", e);\n          }\n        }\n      };\n      videoRef.current.onplay = () => {};\n\n      videoRef.current.onseeked = () => {};\n      videoRef.current.onseeking = () => {};\n\n      videoRef.current.onpause = () => {};\n\n      videoRef.current.onended = () => {\n        playNextChapter();\n      };\n\n      startMediaSessionCoordinator({\n        title: title ?? \"\",\n        artwork: imageURL,\n        action: (details) => {\n          switch (details.action) {\n            case \"play\":\n              play();\n              break;\n            case \"pause\":\n              pause();\n              break;\n            case \"seekbackward\":\n              seekBy(-15);\n              break;\n            case \"seekforward\":\n              seekBy(15);\n              break;\n            case \"seekto\":\n              if (details.seekTime) {\n                seekTo(details.seekTime);\n              }\n              break;\n            case \"stop\":\n              pause();\n              break;\n            default:\n              break;\n          }\n        },\n      });\n\n      startTimer();\n    }\n\n    function playNextChapter() {\n      if (chapters == null || chapters.length == 0) {\n        return;\n      }\n      const currentChapterIndex = chapters.findIndex(\n        (chapter) => chapter.id == currentChapterRef.current?.id,\n      );\n      if (currentChapterIndex == -1) {\n        return;\n      }\n      deleteMemoryChapter(chapters[currentChapterIndex].id);\n      const nextChapterIndex = currentChapterIndex + 1;\n      if (nextChapterIndex >= chapters.length) {\n        return;\n      }\n      playChapter(chapters[currentChapterIndex + 1]);\n    }\n\n    function startTimer() {\n      updatePlayerDetails();\n      if (timerRef.current != null) return;\n\n      timerRef.current = setTimeout(() => {\n        updatePlayerDetails();\n        timerRef.current = undefined;\n        startTimer();\n      }, 500) as unknown as number;\n    }\n\n    function stopTimer() {\n      if (timerRef.current == null) return;\n      clearTimeout(timerRef.current as unknown as number);\n    }\n\n    function updatePlayerDetails() {\n      if (videoRef.current == null) {\n        return;\n      }\n      setPlayState(\n        videoRef.current.paused ? PlayState.Paused : PlayState.Playing,\n      );\n      setDuration(videoRef.current.duration);\n      setCurrentTime(videoRef.current.currentTime);\n      saveLastPlayedTime(videoRef.current.currentTime);\n      mediaSessionUpdateDurationAndPosition(\n        videoRef.current.duration,\n        videoRef.current.currentTime,\n      );\n      if (\n        videoRef.current.networkState === videoRef.current.NETWORK_LOADING &&\n        videoRef.current.readyState <= videoRef.current.HAVE_FUTURE_DATA\n      ) {\n        setIsLoading(true);\n      } else {\n        setIsLoading(false);\n      }\n      if (updateCurrentTime) {\n        updateCurrentTime(videoRef.current.currentTime);\n      }\n    }\n\n    function play() {\n      videoRef.current?.play().then().catch();\n      updatePlayerDetails();\n    }\n\n    function pause() {\n      videoRef.current?.pause();\n      updatePlayerDetails();\n    }\n\n    function togglePlayState() {\n      if (playState === PlayState.Playing) {\n        pause();\n        return;\n      }\n      play();\n    }\n\n    function seekBy(seconds: number) {\n      if (videoRef.current == null) {\n        return;\n      }\n      const newTime = videoRef.current.currentTime + seconds;\n      if (newTime < 0) {\n        videoRef.current.currentTime = 0;\n        return;\n      }\n      if (newTime > videoRef.current.duration) {\n        videoRef.current.currentTime = videoRef.current.duration;\n        return;\n      }\n      videoRef.current.currentTime += seconds;\n    }\n\n    function seekTo(toSecond: number) {\n      if (videoRef.current == null) {\n        return;\n      }\n      setCurrentTime(toSecond);\n      if (toSecond < 0) {\n        videoRef.current.currentTime = 0;\n        return;\n      }\n      if (toSecond > videoRef.current.duration) {\n        videoRef.current.currentTime = videoRef.current.duration;\n        return;\n      }\n      videoRef.current.currentTime = toSecond;\n    }\n\n    function destroyPlayer() {\n      if (videoRef.current == null) {\n        return;\n      }\n      videoRef.current.onplay = null;\n      videoRef.current.onseeked = null;\n      videoRef.current.onseeking = null;\n      videoRef.current.onpause = null;\n      videoRef.current.onended = null;\n      videoRef.current.src = \"\";\n      hlsRef.current?.destroy();\n    }\n\n    function loadChapters(chapters: ChapterWithPublicUrl[]) {\n      if (chapters.length == 0) {\n        return;\n      }\n\n      const chapterID = getLastSelectedChapterID();\n      if (chapterID == null) {\n        playChapter(chapters[0]);\n        return;\n      }\n\n      const chapter = chapters.find((chapter) => chapter.id == chapterID);\n      if (chapter == null) {\n        playChapter(chapters[0]);\n        return;\n      }\n\n      playChapter(chapter);\n    }\n\n    function playChapter(chapter: ChapterWithPublicUrl) {\n      setIsStarted(false);\n      setPlayWhenReady(true);\n      currentChapterRef.current = chapter;\n      playURL(chapter.publicUrl);\n      onChapterChange?.(chapter);\n      setLastSelectedChapterID(chapter.id);\n    }\n\n    function playURL(src: string) {\n      if (videoRef.current == null) {\n        return;\n      }\n      if (videoRef.current.canPlayType(\"application/vnd.apple.mpegurl\")) {\n        videoRef.current.src = src;\n      } else if (Hls.isSupported()) {\n        if (hlsRef.current == null) {\n          hlsRef.current = new Hls();\n          hlsRef.current?.attachMedia(videoRef.current);\n        }\n        hlsRef.current?.loadSource(src);\n      }\n    }\n\n    useEffect(() => {\n      if (videoRef.current == null) {\n        return;\n      }\n      setupObservers();\n      loadChapters(chapters);\n    }, [videoRef.current]);\n\n    useEffect(() => {\n      loadChapters(chapters);\n    }, [chapters]);\n\n    useEffect(() => {\n      if (setCurrentTimeHandler != null) {\n        setCurrentTimeHandler(seekTo);\n      }\n\n      return () => {\n        setCurrentTime(undefined);\n        videoRef.current?.pause();\n        destroyPlayer();\n        stopMediaSessionCoordinator();\n      };\n    }, []);\n\n    const calculateTime = (secs: number) => {\n      const hours = Math.floor(secs / 3600);\n      const minutes = Math.floor(secs / 60) % 60;\n      const seconds = Math.floor(secs % 60);\n      const returnedHours =\n        hours > 0 ? (hours < 10 ? `0${hours}:` : `${hours}:`) : \"\";\n      const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;\n      if (isNaN(seconds) || isNaN(minutes) || isNaN(hours)) {\n        return \"\";\n      }\n      return `${returnedHours}${minutes}:${returnedSeconds}`;\n    };\n\n    const showRangeProgress = (rangeInput: HTMLInputElement) => {\n      const barProgress =\n        (parseFloat(rangeInput.value) / parseFloat(rangeInput.max)) * 100;\n      audioPlayerContainerRef.current.style.setProperty(\n        \"--seek-before-width\",\n        barProgress + \"%\",\n      );\n\n      const selectedTime = (duration! * barProgress) / 100;\n      seekTo(selectedTime);\n    };\n\n    return (\n      <div\n        id=\"audio-player-container\"\n        className=\"flex flex-col\"\n        style={styles}\n        ref={audioPlayerContainerRef}\n      >\n        <video\n          ref={videoRef}\n          className=\"hidden\"\n          poster={imageURL}\n          title={title}\n        ></video>\n\n        <input\n          type=\"range\"\n          min=\"0\"\n          max={duration != undefined ? Math.floor(duration).toString() : 100}\n          value={currentTime ?? 0}\n          onChange={(e) => showRangeProgress(e.target as HTMLInputElement)}\n          className=\"w-full\"\n        />\n\n        <section className=\"flex w-full items-center justify-between text-sm font-medium\">\n          <span id=\"current-time\">{calculateTime(currentTime!)}</span>\n          <span id=\"duration\">{calculateTime(duration!)}</span>\n        </section>\n        <div className=\"mt-6 flex items-center justify-center gap-x-12\">\n          <Button\n            variant=\"outline\"\n            onClick={() => seekBy(-10)}\n            aria-label=\"Rewind 10 Seconds\"\n          >\n            -10\n          </Button>\n          <Button\n            variant=\"outline\"\n            onClick={togglePlayState}\n            aria-label=\"Play Or Pause\"\n          >\n            {playState === PlayState.Paused && <Play className=\"h-5 w-5\" />}\n            {playState === PlayState.Playing && <Pause className=\"h-5 w-5\" />}\n          </Button>\n          <Button\n            variant=\"outline\"\n            onClick={() => seekBy(10)}\n            aria-label=\"Fast Forward 10 Seconds\"\n          >\n            +10\n          </Button>\n        </div>\n        {isLoading && (\n          <div className=\"mt-2 flex w-full justify-center\">\n            <LoadingIndicator />\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nfunction isSafari() {\n  return navigator.userAgent.toLowerCase().indexOf(\"safari/\") > -1;\n}\n\nexport default AudioPlayer;\n"]}