Skip to content

Auto-select the chapters tab if video only has chapters #2340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 30, 2025
Merged

Auto-select the chapters tab if video only has chapters #2340

Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7ccdf67
Set default tab to chapters if there are no segments
FelixFourcolor Sep 21, 2025
9e501a5
refactor
FelixFourcolor Sep 21, 2025
aa04ed7
Fix: prevent auto-switch tab on refresh
FelixFourcolor Sep 21, 2025
1b2c3f5
Hide also the tab buttons if there are only chapters
FelixFourcolor Sep 21, 2025
444b90c
simplify tabFilter
FelixFourcolor Sep 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 23 additions & 5 deletions src/popup/SegmentListComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,14 @@ interface SegmentWithNesting extends 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) => {
const [tab, setTab] = React.useState(SegmentListTab.Segments);
const [isVip, setIsVip] = React.useState(Config.config?.isVip ?? false);
Expand All @@ -46,15 +54,25 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
}
}, []);

const [hasSegments, hasChapters] = React.useMemo(() => {
const hasSegments = Boolean(props.segments.find(isSegment))
const hasChapters = Boolean(props.segments.find(isChapter))
return [hasSegments, hasChapters];
}, [props.segments]);

React.useEffect(() => {
setTab(SegmentListTab.Segments);
}, [props.videoID]);
if (hasSegments){
setTab(SegmentListTab.Segments);
} else {
setTab(SegmentListTab.Chapter);
}
}, [props.videoID, hasSegments]);

const tabFilter = (segment: SponsorTime) => {
if (tab === SegmentListTab.Chapter) {
return segment.actionType === ActionType.Chapter;
return isChapter(segment);
} else {
return segment.actionType !== ActionType.Chapter;
return isSegment(segment);
}
};

Expand Down Expand Up @@ -96,7 +114,7 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {

return (
<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={() => {
setTab(SegmentListTab.Segments);
}}>
Expand Down