From adf5689c4837f0cd082fb07978e712cc41f8e488 Mon Sep 17 00:00:00 2001 From: mrjvs Date: Wed, 18 Oct 2023 16:08:33 +0200 Subject: [PATCH] selected source shown correctly --- .../player/atoms/settings/SettingsMenu.tsx | 10 ++++++++-- .../player/atoms/settings/SourceSelectingView.tsx | 15 +++++++++++---- src/components/player/hooks/usePlayer.ts | 4 +++- src/pages/PlayerView.tsx | 2 +- src/stores/player/slices/source.ts | 8 ++++++++ 5 files changed, 31 insertions(+), 8 deletions(-) diff --git a/src/components/player/atoms/settings/SettingsMenu.tsx b/src/components/player/atoms/settings/SettingsMenu.tsx index 861418c8..1e3178e3 100644 --- a/src/components/player/atoms/settings/SettingsMenu.tsx +++ b/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 }) { router.navigate("/source")}> Video source - SuperStream + {sourceName} Download diff --git a/src/components/player/atoms/settings/SourceSelectingView.tsx b/src/components/player/atoms/settings/SourceSelectingView.tsx index 483afa0d..f0f1a9f4 100644 --- a/src/components/player/atoms/settings/SourceSelectingView.tsx +++ b/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 (
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 = loading...; @@ -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} diff --git a/src/components/player/hooks/usePlayer.ts b/src/components/player/hooks/usePlayer.ts index 862bd1fc..b9f4eb38 100644 --- a/src/components/player/hooks/usePlayer.ts +++ b/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(); }, diff --git a/src/pages/PlayerView.tsx b/src/pages/PlayerView.tsx index 6ac39e14..8c0723b0 100644 --- a/src/pages/PlayerView.tsx +++ b/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] ); diff --git a/src/stores/player/slices/source.ts b/src/stores/player/slices/source.ts index 584249d0..b221cdb5 100644 --- a/src/stores/player/slices/source.ts +++ b/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 = (set, get) => ({ source: null, + sourceId: null, qualities: [], currentQuality: null, status: playerStatus.IDLE, @@ -91,6 +94,11 @@ export const createSourceSlice: MakeSlice = (set, get) => ({ selected: null, asTrack: false, }, + setSourceId(id) { + set((s) => { + s.sourceId = id; + }); + }, setStatus(status: PlayerStatus) { set((s) => { s.status = status;