selected source shown correctly

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { Toggle } from "@/components/buttons/Toggle";
 import { Icons } from "@/components/Icon";
@@ -6,10 +6,16 @@ import { Context } from "@/components/player/internals/ContextUtils";
 import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 import { usePlayerStore } from "@/stores/player/store";
 import { qualityToString } from "@/stores/player/utils/qualities";
+import { providers } from "@/utils/providers";
 
 export function SettingsMenu({ id }: { id: string }) {
   const router = useOverlayRouter(id);
   const currentQuality = usePlayerStore((s) => s.currentQuality);
+  const currentSourceId = usePlayerStore((s) => s.sourceId);
+  const sourceName = useMemo(() => {
+    if (!currentSourceId) return "...";
+    return providers.getMetadata(currentSourceId)?.name ?? "...";
+  }, [currentSourceId]);
 
   const [tmpBool, setTmpBool] = useState(false);
 
@@ -29,7 +35,7 @@ export function SettingsMenu({ id }: { id: string }) {
         </Context.Link>
         <Context.Link onClick={() => router.navigate("/source")}>
           <Context.LinkTitle>Video source</Context.LinkTitle>
-          <Context.LinkChevron>SuperStream</Context.LinkChevron>
+          <Context.LinkChevron>{sourceName}</Context.LinkChevron>
         </Context.Link>
         <Context.Link>
           <Context.LinkTitle>Download</Context.LinkTitle>

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

@@ -1,9 +1,8 @@
 import classNames from "classnames";
-import { ReactNode, useCallback, useEffect, useMemo, useRef } from "react";
+import { ReactNode, useEffect, useMemo, useRef } from "react";
 import { useAsyncFn } from "react-use";
 
 import { Icon, Icons } from "@/components/Icon";
-import { usePlayerMeta } from "@/components/player/hooks/usePlayerMeta";
 import { Context } from "@/components/player/internals/ContextUtils";
 import { convertRunoutputToSource } from "@/components/player/utils/convertRunoutputToSource";
 import { useOverlayRouter } from "@/hooks/useOverlayRouter";
@@ -29,7 +28,7 @@ export function SourceOption(props: {
   return (
     <div
       onClick={props.onClick}
-      className="grid grid-cols-[auto,1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border hover:bg-opacity-10"
+      className="grid grid-cols-[1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border hover:bg-opacity-10"
     >
       <span
         className={classNames(props.selected && "text-white", "font-medium")}
@@ -49,11 +48,13 @@ export function SourceOption(props: {
 export function EmbedOption(props: {
   embedId: string;
   url: string;
+  sourceId: string | null;
   routerId: string;
 }) {
   const router = useOverlayRouter(props.routerId);
   const meta = usePlayerStore((s) => s.meta);
   const setSource = usePlayerStore((s) => s.setSource);
+  const setSourceId = usePlayerStore((s) => s.setSourceId);
   const progress = usePlayerStore((s) => s.progress.time);
   const embedName = useMemo(() => {
     if (!props.embedId) return "...";
@@ -65,9 +66,10 @@ export function EmbedOption(props: {
       id: props.embedId,
       url: props.url,
     });
+    setSourceId(props.sourceId);
     setSource(convertRunoutputToSource({ stream: result.stream }), progress);
     router.close();
-  }, [props.embedId, meta, router]);
+  }, [props.embedId, props.sourceId, meta, router]);
 
   let content: ReactNode = null;
   if (request.loading) content = <span>loading...</span>;
@@ -87,6 +89,7 @@ export function EmbedSelectionView({ sourceId, id }: EmbedSelectionViewProps) {
   const router = useOverlayRouter(id);
   const meta = usePlayerStore((s) => s.meta);
   const setSource = usePlayerStore((s) => s.setSource);
+  const setSourceId = usePlayerStore((s) => s.setSourceId);
   const progress = usePlayerStore((s) => s.progress.time);
   const sourceName = useMemo(() => {
     if (!sourceId) return "...";
@@ -102,6 +105,7 @@ export function EmbedSelectionView({ sourceId, id }: EmbedSelectionViewProps) {
     });
     if (result.stream) {
       setSource(convertRunoutputToSource({ stream: result.stream }), progress);
+      setSourceId(sourceId);
       router.close();
       return null;
     }
@@ -128,6 +132,7 @@ export function EmbedSelectionView({ sourceId, id }: EmbedSelectionViewProps) {
         embedId={v.embedId}
         url={v.url}
         routerId={id}
+        sourceId={sourceId}
       />
     ));
 
@@ -147,6 +152,7 @@ export function SourceSelectionView({
 }: SourceSelectionViewProps) {
   const router = useOverlayRouter(id);
   const metaType = usePlayerStore((s) => s.meta?.type);
+  const currentSourceId = usePlayerStore((s) => s.sourceId);
   const sources = useMemo(() => {
     if (!metaType) return [];
     return providers
@@ -167,6 +173,7 @@ export function SourceSelectionView({
               onChoose?.(v.id);
               router.navigate("/source/embeds");
             }}
+            selected={v.id === currentSourceId}
           >
             {v.name}
           </SourceOption>

src/components/player/hooks/usePlayer.ts

@@ -29,6 +29,7 @@ export function usePlayer() {
   const setStatus = usePlayerStore((s) => s.setStatus);
   const setMeta = usePlayerStore((s) => s.setMeta);
   const setSource = usePlayerStore((s) => s.setSource);
+  const setSourceId = usePlayerStore((s) => s.setSourceId);
   const status = usePlayerStore((s) => s.status);
   const reset = usePlayerStore((s) => s.reset);
   const meta = usePlayerStore((s) => s.meta);
@@ -41,8 +42,9 @@ export function usePlayer() {
     setMeta(m: PlayerMeta) {
       setMeta(m);
     },
-    playMedia(source: SourceSliceSource) {
+    playMedia(source: SourceSliceSource, sourceId: string | null) {
       setSource(source, getProgress(progressStore.items, meta));
+      setSourceId(sourceId);
       setStatus(playerStatus.PLAYING);
       init();
     },

src/pages/PlayerView.tsx

@@ -44,7 +44,7 @@ export function PlayerView() {
   const playAfterScrape = useCallback(
     (out: RunOutput | null) => {
       if (!out) return;
-      playMedia(convertRunoutputToSource(out));
+      playMedia(convertRunoutputToSource(out), out.sourceId);
     },
     [playMedia]
   );

src/stores/player/slices/source.ts

@@ -44,6 +44,7 @@ export interface Caption {
 export interface SourceSlice {
   status: PlayerStatus;
   source: SourceSliceSource | null;
+  sourceId: string | null;
   qualities: SourceQuality[];
   currentQuality: SourceQuality | null;
   caption: {
@@ -56,6 +57,7 @@ export interface SourceSlice {
   switchQuality(quality: SourceQuality): void;
   setMeta(meta: PlayerMeta): void;
   setCaption(caption: Caption | null): void;
+  setSourceId(id: string | null): void;
 }
 
 export function metaToScrapeMedia(meta: PlayerMeta): ScrapeMedia {
@@ -83,6 +85,7 @@ export function metaToScrapeMedia(meta: PlayerMeta): ScrapeMedia {
 
 export const createSourceSlice: MakeSlice<SourceSlice> = (set, get) => ({
   source: null,
+  sourceId: null,
   qualities: [],
   currentQuality: null,
   status: playerStatus.IDLE,
@@ -91,6 +94,11 @@ export const createSourceSlice: MakeSlice<SourceSlice> = (set, get) => ({
     selected: null,
     asTrack: false,
   },
+  setSourceId(id) {
+    set((s) => {
+      s.sourceId = id;
+    });
+  },
   setStatus(status: PlayerStatus) {
     set((s) => {
       s.status = status;