Fix url encoding in search + error page not showing any error info

src/components/player/display/displayInterface.ts

@@ -1,7 +1,7 @@
 import { LoadableSource, SourceQuality } from "@/stores/player/utils/qualities";
 import { Listener } from "@/utils/events";
 
-export type DisplayErrorType = "hls" | "htmlvideo";
+export type DisplayErrorType = "hls" | "htmlvideo" | "global";
 export type DisplayError = {
   stackTrace?: string;
   message?: string;

src/hooks/useSearchQuery.ts

@@ -1,6 +1,10 @@
 import { useEffect, useState } from "react";
 import { generatePath, useHistory, useParams } from "react-router-dom";
 
+function decode(query: string | null | undefined) {
+  return query ? decodeURIComponent(query) : "";
+}
+
 export function useSearchQuery(): [
   string,
   (inp: string, force?: boolean) => void,
@@ -8,10 +12,10 @@ export function useSearchQuery(): [
 ] {
   const history = useHistory();
   const params = useParams<{ query: string }>();
-  const [search, setSearch] = useState(params.query ?? "");
+  const [search, setSearch] = useState(decode(params.query));
 
   useEffect(() => {
-    setSearch(params.query ?? "");
+    setSearch(decode(params.query));
   }, [params.query]);
 
   const updateParams = (inp: string, commitToUrl = false) => {

src/pages/parts/errors/ErrorPart.tsx

@@ -3,25 +3,35 @@ import { useTranslation } from "react-i18next";
 import { ButtonPlain } from "@/components/buttons/Button";
 import { Icons } from "@/components/Icon";
 import { IconPill } from "@/components/layout/IconPill";
+import { DisplayError } from "@/components/player/display/displayInterface";
 import { Title } from "@/components/text/Title";
 import { Paragraph } from "@/components/utils/Text";
 import { ErrorContainer, ErrorLayout } from "@/pages/layouts/ErrorLayout";
+import { ErrorCard } from "@/pages/parts/errors/ErrorCard";
 
 export function ErrorPart(props: { error: any; errorInfo: any }) {
-  const data = JSON.stringify({
-    error: props.error,
-    errorInfo: props.errorInfo,
-  });
   const { t } = useTranslation();
 
+  const maxLineCount = 5;
+  const errorLines = (props.errorInfo.componentStack || "")
+    .split("\n")
+    .slice(0, maxLineCount);
+
+  const error: DisplayError = {
+    errorName: "What does this do",
+    type: "global",
+    message: errorLines.join("\n"),
+  };
+
   return (
-    <div className="relative flex flex-1 flex-col">
+    <div className="relative flex flex-1 flex-col min-h-screen">
       <div className="flex h-full flex-1 flex-col items-center justify-center p-5 text-center">
         <ErrorLayout>
-          <ErrorContainer>
+          <ErrorContainer maxWidth="max-w-2xl">
             <IconPill icon={Icons.EYE_SLASH}>{t("errors.badge")}</IconPill>
             <Title>{t("errors.title")}</Title>
-            <Paragraph>{data}</Paragraph>
+            <Paragraph>{props.error.toString()}</Paragraph>
+            <ErrorCard error={error} />
             <ButtonPlain
               theme="purple"
               className="mt-6 md:px-12 p-2.5"