error states in sources and episodes empty state

src/components/player/atoms/Episodes.tsx

@@ -118,6 +118,11 @@ function EpisodesView({
   else if (loadingState.value) {
     content = (
       <Menu.Section className="pb-6">
+        {loadingState.value.season.episodes.length === 0 ? (
+          <Menu.TextDisplay title="No episodes found">
+            There are no episodes in this season, check back later!
+          </Menu.TextDisplay>
+        ) : null}
         {loadingState.value.season.episodes.map((ep) => {
           return (
             <Menu.ChevronLink

src/components/player/atoms/Settings.tsx

@@ -56,14 +56,14 @@ function SettingsOverlay({ id }: { id: string }) {
           </Menu.Card>
         </OverlayPage>
         <OverlayPage id={id} path="/source" width={343} height={431}>
-          <Menu.Card>
+          <Menu.CardWithScrollable>
             <SourceSelectionView id={id} onChoose={setChosenSourceId} />
-          </Menu.Card>
+          </Menu.CardWithScrollable>
         </OverlayPage>
         <OverlayPage id={id} path="/source/embeds" width={343} height={431}>
-          <Menu.Card>
+          <Menu.CardWithScrollable>
             <EmbedSelectionView id={id} sourceId={chosenSourceId} />
-          </Menu.Card>
+          </Menu.CardWithScrollable>
         </OverlayPage>
         <OverlayPage id={id} path="/playback" width={343} height={215}>
           <Menu.Card>

src/components/player/atoms/settings/SourceSelectingView.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useMemo, useRef } from "react";
 import { useAsyncFn } from "react-use";
 
+import { Loading } from "@/components/layout/Loading";
 import { Menu } from "@/components/player/internals/ContextMenu";
 import { SelectableLink } from "@/components/player/internals/ContextMenu/Links";
 import { convertRunoutputToSource } from "@/components/player/utils/convertRunoutputToSource";
@@ -46,8 +47,19 @@ export function EmbedOption(props: {
   }, [props.embedId, props.sourceId, meta, router]);
 
   let content: ReactNode = null;
-  if (request.loading) content = <span>loading...</span>;
-  else if (request.error) content = <span>Failed to scrape</span>;
+  if (request.loading)
+    content = (
+      <Menu.TextDisplay noIcon>
+        <Loading />
+      </Menu.TextDisplay>
+    );
+  else if (request.error)
+    content = (
+      <Menu.TextDisplay title="Failed to scrape">
+        We were unable to find any videos for this source. Don&apos;t come
+        bitchin&apos; to us about it, just try another source.
+      </Menu.TextDisplay>
+    );
 
   return (
     <SelectableLink onClick={run}>
@@ -107,10 +119,25 @@ export function EmbedSelectionView({ sourceId, id }: EmbedSelectionViewProps) {
   }, [run, sourceId]);
 
   let content: ReactNode = null;
-  if (request.loading) content = <p>loading...</p>;
-  else if (request.error) content = <p>Failed to scrape</p>;
+  if (request.loading)
+    content = (
+      <Menu.TextDisplay noIcon>
+        <Loading />
+      </Menu.TextDisplay>
+    );
+  else if (request.error)
+    content = (
+      <Menu.TextDisplay title="Failed to scrape">
+        We were unable to find any videos for this source. Don&apos;t come
+        bitchin&apos; to us about it, just try another source.
+      </Menu.TextDisplay>
+    );
   else if (request.value && request.value.length === 0)
-    content = <p>No embeds found</p>;
+    content = (
+      <Menu.TextDisplay title="No embeds found">
+        We were unable to find any embeds for this source, please try another.
+      </Menu.TextDisplay>
+    );
   else if (request.value)
     content = request.value.map((v) => (
       <EmbedOption

src/components/player/internals/ContextMenu/Misc.tsx

@@ -48,3 +48,25 @@ export function Anchor(props: {
 export function FieldTitle(props: { children: React.ReactNode }) {
   return <p className="font-medium">{props.children}</p>;
 }
+
+export function TextDisplay(props: {
+  children: React.ReactNode;
+  title?: string;
+  noIcon?: boolean;
+}) {
+  return (
+    <div className="w-full h-full flex justify-center items-center text-center">
+      <div className="flex items-center gap-4 flex-col">
+        {props.noIcon ? null : (
+          <div className="w-16 h-10 border border-video-context-border rounded-lg flex justify-center items-center">
+            <Icon className="text-xl" icon={Icons.EYE_SLASH} />
+          </div>
+        )}
+        {props.title ? (
+          <h2 className="text-white text-lg font-bold">{props.title}</h2>
+        ) : null}
+        <div>{props.children}</div>
+      </div>
+    </div>
+  );
+}