add horizontal episode selector

src/backend/metadata/tmdb.ts

@@ -84,6 +84,8 @@ export function formatTMDBMeta(
               number: v.episode_number,
               title: v.title,
               air_date: v.air_date,
+              still_path: v.still_path,
+              overview: v.overview,
             })),
         }
       : (undefined as any),
@@ -312,6 +314,8 @@ export async function getEpisodes(
     episode_number: e.episode_number,
     title: e.name,
     air_date: e.air_date,
+    still_path: e.still_path,
+    overview: e.overview,
   }));
 }
 

src/backend/metadata/types/mw.ts

@@ -19,6 +19,8 @@ export type MWSeasonWithEpisodeMeta = {
     number: number;
     title: string;
     air_date: string;
+    still_path: string | null;
+    overview: string;
   }[];
 };
 

src/backend/metadata/types/tmdb.ts

@@ -14,6 +14,8 @@ export type TMDBEpisodeShort = {
   id: number;
   episode_number: number;
   air_date: string;
+  still_path: string | null;
+  overview: string;
 };
 
 export type TMDBMediaResult = {

src/components/overlays/OverlayPage.tsx

@@ -16,6 +16,7 @@ interface Props {
   className?: string;
   height: number;
   width: number;
+  fullWidth?: boolean;
 }
 
 export function OverlayPage(props: Props) {
@@ -29,12 +30,16 @@ export function OverlayPage(props: Props) {
   useEffect(() => {
     registerRoute({
       id: path,
-      width: props.width,
+      width: props.fullWidth ? window.innerWidth - 60 : props.width,
       height: props.height,
     });
-  }, [props.height, props.width, path, registerRoute]);
+  }, [props.height, props.width, props.fullWidth, path, registerRoute]);
 
-  const width = !isMobile ? `${props.width}px` : "100%";
+  const width = !isMobile
+    ? props.fullWidth
+      ? "calc(100vw - 60px)"
+      : `${props.width}px`
+    : "100%";
   let animation: TransitionAnimations = "none";
   if (backwards === "yes" || backwards === "no")
     animation = backwards === "yes" ? "slide-full-left" : "slide-full-right";
@@ -47,7 +52,11 @@ export function OverlayPage(props: Props) {
       show={show}
     >
       <div
-        className={classNames(["grid grid-rows-1 max-h-full", props.className])}
+        className={classNames([
+          "grid grid-rows-1 max-h-full",
+          props.className,
+          props.fullWidth ? "max-w-none" : "",
+        ])}
         style={{
           height: props.height ? `${props.height}px` : undefined,
           width: props.width ? width : undefined,

src/components/player/atoms/Episodes.tsx

@@ -5,7 +5,7 @@ import { useAsync } from "react-use";
 
 import { getMetaFromId } from "@/backend/metadata/getmeta";
 import { MWMediaType, MWSeasonMeta } from "@/backend/metadata/types/mw";
-import { Icons } from "@/components/Icon";
+import { Icon, Icons } from "@/components/Icon";
 import { ProgressRing } from "@/components/layout/ProgressRing";
 import { OverlayAnchor } from "@/components/overlays/OverlayAnchor";
 import { Overlay } from "@/components/overlays/OverlayDisplay";
@@ -111,6 +111,8 @@ function EpisodesView({
   const meta = usePlayerStore((s) => s.meta);
   const [loadingState] = useSeasonData(meta?.tmdbId ?? "", selectedSeason);
   const progress = useProgressStore();
+  const carouselRef = useRef<HTMLDivElement>(null);
+  const activeEpisodeRef = useRef<HTMLDivElement>(null);
 
   const playEpisode = useCallback(
     (episodeId: string) => {
@@ -125,6 +127,48 @@ function EpisodesView({
     [setPlayerMeta, loadingState, router, onChange],
   );
 
+  const handleScroll = (direction: "left" | "right") => {
+    if (!carouselRef.current) return;
+
+    const cardWidth = 256; // w-64 in pixels
+    const cardSpacing = 16; // space-x-4 in pixels
+    const scrollAmount = (cardWidth + cardSpacing) * 2;
+
+    const newScrollPosition =
+      carouselRef.current.scrollLeft +
+      (direction === "left" ? -scrollAmount : scrollAmount);
+
+    carouselRef.current.scrollTo({
+      left: newScrollPosition,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    if (activeEpisodeRef.current) {
+      // horizontal scroll
+      if (window.innerWidth >= 1024 && carouselRef.current) {
+        const containerLeft = carouselRef.current.getBoundingClientRect().left;
+        const containerWidth = carouselRef.current.clientWidth;
+        const elementLeft =
+          activeEpisodeRef.current.getBoundingClientRect().left;
+        const elementWidth = activeEpisodeRef.current.clientWidth;
+
+        // Calculate center
+        const scrollPosition =
+          elementLeft - containerLeft - containerWidth / 2 + elementWidth / 2;
+
+        carouselRef.current.scrollLeft += scrollPosition;
+      } else {
+        // vertical scroll
+        activeEpisodeRef.current.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      }
+    }
+  }, [loadingState.value]);
+
   if (!meta?.tmdbId) return null;
 
   let content: ReactNode = null;
@@ -137,76 +181,227 @@ function EpisodesView({
       <CenteredText>{t("player.menus.episodes.loadingList")}</CenteredText>
     );
   else if (loadingState.value) {
-    const hasUnairedEpisodes = loadingState.value.season.episodes.some(
-      (ep) => !hasAired(ep.air_date),
-    );
     content = (
-      <Menu.ScrollToActiveSection className="pb-6">
-        {loadingState.value.season.episodes.length === 0 ? (
-          <Menu.TextDisplay title="No episodes found">
-            {t("player.menus.episodes.emptyState")}
-          </Menu.TextDisplay>
-        ) : null}
-        {loadingState.value.season.episodes.map((ep) => {
-          const episodeProgress =
-            progress.items[meta?.tmdbId]?.episodes?.[ep.id];
+      <div className="relative">
+        {/* Horizontal scroll buttons */}
+        <div className="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
+          <button
+            type="button"
+            className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
+            onClick={() => handleScroll("left")}
+          >
+            <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
+          </button>
+        </div>
 
-          let rightSide;
-          if (episodeProgress) {
-            const percentage =
-              (episodeProgress.progress.watched /
-                episodeProgress.progress.duration) *
-              100;
-            rightSide = (
-              <ProgressRing
-                className="h-[18px] w-[18px] text-white"
-                percentage={percentage > 90 ? 100 : percentage}
-              />
-            );
-          }
+        <div
+          ref={carouselRef}
+          className="flex flex-col lg:flex-row lg:overflow-x-auto space-y-3 sm:space-y-4 lg:space-y-0 lg:space-x-4 pb-4 pt-2 lg:px-12 scrollbar-hide"
+          style={{
+            scrollbarWidth: "none",
+            msOverflowStyle: "none",
+          }}
+        >
+          {loadingState.value.season.episodes.length === 0 ? (
+            <div className="flex-shrink-0 w-full flex justify-center items-center p-4">
+              <p>{t("player.menus.episodes.emptyState")}</p>
+            </div>
+          ) : (
+            loadingState.value.season.episodes.map((ep) => {
+              const episodeProgress =
+                progress.items[meta?.tmdbId]?.episodes?.[ep.id];
+              const percentage = episodeProgress
+                ? (episodeProgress.progress.watched /
+                    episodeProgress.progress.duration) *
+                  100
+                : 0;
 
-          return (
-            <Menu.Link
-              key={ep.id}
-              onClick={() => playEpisode(ep.id)}
-              active={ep.id === meta?.episode?.tmdbId}
-              clickable={hasAired(ep.air_date)}
-              rightSide={rightSide}
-            >
-              <Menu.LinkTitle>
-                <div
-                  className={classNames(
-                    "text-left flex items-center space-x-3 text-video-context-type-main",
-                    hasAired(ep.air_date) || ep.id === meta?.episode?.tmdbId
-                      ? ""
-                      : "text-opacity-25",
-                  )}
-                >
-                  <span
+              const isAired = hasAired(ep.air_date);
+              const isActive = ep.id === meta?.episode?.tmdbId;
+
+              return (
+                <div key={ep.id} ref={isActive ? activeEpisodeRef : null}>
+                  {/* Extra small screens - Simple vertical list with no thumbnails */}
+                  <div className="block sm:hidden w-full px-3">
+                    <Menu.Link
+                      onClick={() => playEpisode(ep.id)}
+                      active={isActive}
+                      clickable={isAired}
+                      rightSide={
+                        episodeProgress && (
+                          <ProgressRing
+                            className="h-[18px] w-[18px] text-white"
+                            percentage={percentage > 90 ? 100 : percentage}
+                          />
+                        )
+                      }
+                    >
+                      <Menu.LinkTitle>
+                        <div
+                          className={classNames(
+                            "text-left flex items-center space-x-1 text-video-context-type-main",
+                            isAired || isActive ? "" : "text-opacity-25",
+                          )}
+                        >
+                          <span className="p-0.5 px-2 rounded inline bg-video-context-hoverColor bg-opacity-50">
+                            E{ep.number}
+                          </span>
+                          <span className="line-clamp-1 break-all">
+                            {ep.title}
+                          </span>
+                        </div>
+                      </Menu.LinkTitle>
+                    </Menu.Link>
+                  </div>
+
+                  {/* Small screens - Vertical list with thumbnails to the left */}
+                  <div
+                    onClick={() => playEpisode(ep.id)}
                     className={classNames(
-                      "p-0.5 px-2 rounded inline bg-video-context-hoverColor",
-                      ep.id === meta?.episode?.tmdbId
-                        ? "text-white bg-opacity-100"
-                        : "bg-opacity-50",
-                      hasAired(ep.air_date) || ep.id === meta?.episode?.tmdbId
-                        ? ""
-                        : "!bg-opacity-25",
+                      "hidden sm:flex lg:hidden w-full rounded-lg overflow-hidden transition-all duration-200 relative cursor-pointer",
+                      isActive
+                        ? "bg-video-context-hoverColor/50"
+                        : "hover:bg-video-context-hoverColor/50",
+                      !isAired ? "opacity-50" : "",
                     )}
                   >
-                    {t("player.menus.episodes.episodeBadge", {
-                      episode: ep.number,
-                    })}
-                  </span>
-                  <span className="line-clamp-1 break-all">{ep.title}</span>
+                    {/* Thumbnail */}
+                    <div className="relative aspect-video max-h-[110px] w-1/3 flex-shrink-0 bg-video-context-hoverColor">
+                      {ep.still_path ? (
+                        <img
+                          src={`https://image.tmdb.org/t/p/w300${ep.still_path}`}
+                          alt={ep.title}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center bg-black bg-opacity-50">
+                          <Icon
+                            icon={Icons.FILM}
+                            className="text-video-context-type-main opacity-50 text-3xl"
+                          />
+                        </div>
+                      )}
+
+                      {/* Episode Number Badge */}
+                      <div className="absolute top-2 left-2 flex items-center space-x-2">
+                        <span className="p-0.5 px-2 rounded inline bg-video-context-hoverColor bg-opacity-80 text-video-context-type-main text-sm">
+                          E{ep.number}
+                        </span>
+                        {!isAired && (
+                          <span className="text-video-context-type-main/70 text-sm">
+                            (Unreleased)
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Content */}
+                    <div className="p-3 flex-1">
+                      <h3 className="font-bold text-white line-clamp-1">
+                        {ep.title}
+                      </h3>
+                      {ep.overview && (
+                        <p className="text-sm text-white/80 mt-1.5 line-clamp-2">
+                          {ep.overview}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Progress indicator */}
+                    {percentage > 0 && (
+                      <div className="absolute bottom-0 left-0 right-0 h-1 bg-progress-background/25">
+                        <div
+                          className="h-full bg-progress-filled"
+                          style={{
+                            width: `${percentage > 98 ? 100 : percentage}%`,
+                          }}
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Large screens - Horizontal cards with thumbnails above title */}
+                  <div
+                    onClick={() => playEpisode(ep.id)}
+                    className={classNames(
+                      "hidden lg:block flex-shrink-0 w-64 rounded-lg overflow-hidden transition-all duration-200 relative cursor-pointer",
+                      isActive
+                        ? "bg-video-context-hoverColor/50"
+                        : "hover:bg-video-context-hoverColor/50",
+                      !isAired ? "opacity-50" : "hover:scale-95",
+                    )}
+                  >
+                    {/* Thumbnail */}
+                    <div className="relative aspect-video w-full bg-video-context-hoverColor">
+                      {ep.still_path ? (
+                        <img
+                          src={`https://image.tmdb.org/t/p/w300${ep.still_path}`}
+                          alt={ep.title}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center bg-black bg-opacity-50">
+                          <Icon
+                            icon={Icons.FILM}
+                            className="text-video-context-type-main opacity-50 text-3xl"
+                          />
+                        </div>
+                      )}
+
+                      {/* Episode Number Badge */}
+                      <div className="absolute top-2 left-2 flex items-center space-x-2">
+                        <span className="p-0.5 px-2 rounded inline bg-video-context-hoverColor bg-opacity-80 text-video-context-type-main text-sm">
+                          E{ep.number}
+                        </span>
+                        {!isAired && (
+                          <span className="text-video-context-type-main/70 text-sm">
+                            (Unreleased)
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Content */}
+                    <div className="p-3">
+                      <h3 className="font-bold text-white line-clamp-1">
+                        {ep.title}
+                      </h3>
+                      {ep.overview && (
+                        <p className="text-sm text-white/80 mt-1.5 line-clamp-2">
+                          {ep.overview}
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Progress indicator */}
+                    {percentage > 0 && (
+                      <div className="absolute bottom-0 left-0 right-0 h-1 bg-progress-background/25">
+                        <div
+                          className="h-full bg-progress-filled"
+                          style={{
+                            width: `${percentage > 98 ? 100 : percentage}%`,
+                          }}
+                        />
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </Menu.LinkTitle>
-            </Menu.Link>
-          );
-        })}
-        {hasUnairedEpisodes ? (
-          <p>{t("player.menus.episodes.unairedEpisodes")}</p>
-        ) : null}
-      </Menu.ScrollToActiveSection>
+              );
+            })
+          )}
+        </div>
+
+        {/* Right scroll button */}
+        <div className="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
+          <button
+            type="button"
+            className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
+            onClick={() => handleScroll("right")}
+          >
+            <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
+          </button>
+        </div>
+      </div>
     );
   }
 
@@ -215,10 +410,12 @@ function EpisodesView({
       <Menu.BackLink
         onClick={goBack}
         rightSide={
-          <span>
-            {loadingState?.value?.season.title ||
-              t("player.menus.episodes.loadingTitle")}
-          </span>
+          <div className="text-right">
+            <div>
+              {loadingState?.value?.season.title ||
+                t("player.menus.episodes.loadingTitle")}
+            </div>
+          </div>
         }
       >
         {t("player.menus.episodes.seasons")}
@@ -260,7 +457,7 @@ function EpisodesOverlay({
         <OverlayPage id={id} path="/" width={343} height={431}>
           <SeasonsView setSeason={setSeason} selectedSeason={selectedSeason} />
         </OverlayPage>
-        <OverlayPage id={id} path="/episodes" width={343} height={431}>
+        <OverlayPage id={id} path="/episodes" width={0} height={360} fullWidth>
           {selectedSeason.length > 0 ? (
             <EpisodesView
               selectedSeason={selectedSeason}