Merge pull request #2340 from FelixFourcolor/master

Auto-select the chapters tab if video only has chapters
This commit is contained in:
Ajay Ramachandran
2025-09-30 01:33:38 -04:00
committed by GitHub

View File

@@ -32,6 +32,14 @@ interface SegmentWithNesting extends SponsorTime {
innerChapters?: (SegmentWithNesting|SponsorTime)[]; innerChapters?: (SegmentWithNesting|SponsorTime)[];
} }
function isSegment(segment) {
return segment.actionType !== ActionType.Chapter;
}
function isChapter(segment) {
return segment.actionType === ActionType.Chapter;
}
export const SegmentListComponent = (props: SegmentListComponentProps) => { export const SegmentListComponent = (props: SegmentListComponentProps) => {
const [tab, setTab] = React.useState(SegmentListTab.Segments); const [tab, setTab] = React.useState(SegmentListTab.Segments);
const [isVip, setIsVip] = React.useState(Config.config?.isVip ?? false); const [isVip, setIsVip] = React.useState(Config.config?.isVip ?? false);
@@ -46,17 +54,19 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
} }
}, []); }, []);
React.useEffect(() => { const [hasSegments, hasChapters] = React.useMemo(() => {
setTab(SegmentListTab.Segments); const hasSegments = Boolean(props.segments.find(isSegment))
}, [props.videoID]); const hasChapters = Boolean(props.segments.find(isChapter))
return [hasSegments, hasChapters];
}, [props.segments]);
const tabFilter = (segment: SponsorTime) => { React.useEffect(() => {
if (tab === SegmentListTab.Chapter) { if (hasSegments){
return segment.actionType === ActionType.Chapter; setTab(SegmentListTab.Segments);
} else { } else {
return segment.actionType !== ActionType.Chapter; setTab(SegmentListTab.Chapter);
} }
}; }, [props.videoID, hasSegments]);
const segmentsWithNesting = React.useMemo(() => { const segmentsWithNesting = React.useMemo(() => {
const result: SegmentWithNesting[] = []; const result: SegmentWithNesting[] = [];
@@ -98,7 +108,7 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
return ( return (
<div id="issueReporterContainer"> <div id="issueReporterContainer">
<div id="issueReporterTabs" className={props.segments && props.segments.find(s => s.actionType === ActionType.Chapter) ? "" : "hidden"}> <div id="issueReporterTabs" className={hasSegments && hasChapters ? "" : "hidden"}>
<span id="issueReporterTabSegments" className={tab === SegmentListTab.Segments ? "sbSelected" : ""} onClick={() => { <span id="issueReporterTabSegments" className={tab === SegmentListTab.Segments ? "sbSelected" : ""} onClick={() => {
setTab(SegmentListTab.Segments); setTab(SegmentListTab.Segments);
}}> }}>
@@ -125,7 +135,7 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
isVip={isVip} isVip={isVip}
loopedChapter={props.loopedChapter} // UUID instead of boolean so it can be passed down to nested chapters loopedChapter={props.loopedChapter} // UUID instead of boolean so it can be passed down to nested chapters
tabFilter={tabFilter} tabFilter={tab === SegmentListTab.Chapter ? isChapter : isSegment}
sendMessage={props.sendMessage} sendMessage={props.sendMessage}
/> />
)) ))