Merge pull request #2336 from mini-bomba/fix/segment-hiding

Fix segment hiding/unhiding
This commit is contained in:
Ajay Ramachandran
2025-09-19 15:56:19 -04:00
committed by GitHub

View File

@@ -28,8 +28,8 @@ enum SegmentListTab {
Chapter
}
interface segmentWithNesting extends SponsorTime {
innerChapters?: (segmentWithNesting|SponsorTime)[];
interface SegmentWithNesting extends SponsorTime {
innerChapters?: (SegmentWithNesting|SponsorTime)[];
}
export const SegmentListComponent = (props: SegmentListComponentProps) => {
@@ -58,9 +58,10 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
}
};
const segmentsWithNesting: segmentWithNesting[] = [];
const segmentsWithNesting = React.useMemo(() => {
const result: SegmentWithNesting[] = [];
let nbTrailingNonChapters = 0;
function nestChapters(segments: segmentWithNesting[], seg: SponsorTime, topLevel?: boolean) {
function nestChapters(segments: SegmentWithNesting[], seg: SponsorTime, topLevel?: boolean) {
if (seg.actionType === ActionType.Chapter && segments.length) {
// trailing non-chapters can only exist at top level
const lastElement = segments[segments.length - (topLevel ? nbTrailingNonChapters + 1 : 1)]
@@ -88,7 +89,10 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
segments.push(seg);
}
}
props.segments.forEach((seg) => nestChapters(segmentsWithNesting, {...seg}, true));
props.segments.forEach((seg) => nestChapters(result, {...seg}, true));
return result;
}, [props.segments])
return (
<div id="issueReporterContainer">
@@ -136,7 +140,7 @@ export const SegmentListComponent = (props: SegmentListComponentProps) => {
};
function SegmentListItem({ segment, videoID, currentTime, isVip, loopedChapter, tabFilter, sendMessage }: {
segment: segmentWithNesting;
segment: SegmentWithNesting;
videoID: VideoID;
currentTime: number;
isVip: boolean;
@@ -146,18 +150,32 @@ function SegmentListItem({ segment, videoID, currentTime, isVip, loopedChapter,
sendMessage: (request: Message) => Promise<MessageResponse>;
}) {
const [voteMessage, setVoteMessage] = React.useState<string | null>(null);
const [hidden, setHidden] = React.useState(segment.hidden || SponsorHideType.Visible);
const [hidden, setHidden] = React.useState(segment.hidden ?? SponsorHideType.Visible); // undefined ?? undefined lol
const [isLooped, setIsLooped] = React.useState(loopedChapter === segment.UUID);
let extraInfo = "";
if (segment.hidden === SponsorHideType.Downvoted) {
// This one is downvoted
// Update internal state if the hidden property of the segment changes
React.useEffect(() => {
setHidden(segment.hidden ?? SponsorHideType.Visible);
}, [segment.hidden])
let extraInfo: string;
switch (hidden) {
case SponsorHideType.Visible:
extraInfo = "";
break;
case SponsorHideType.Downvoted:
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDownvote") + ")";
} else if (segment.hidden === SponsorHideType.MinimumDuration) {
// This one is too short
break;
case SponsorHideType.MinimumDuration:
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
} else if (segment.hidden === SponsorHideType.Hidden) {
break;
case SponsorHideType.Hidden:
extraInfo = " (" + chrome.i18n.getMessage("manuallyHidden") + ")";
break;
default:
// hidden satisfies never; // need to upgrade TS
console.warn(`[SB] Unhandled variant of SponsorHideType in SegmentListItem: ${hidden}`);
extraInfo = "";
}
return (
@@ -279,7 +297,7 @@ function SegmentListItem({ segment, videoID, currentTime, isVip, loopedChapter,
{
(segment.actionType === ActionType.Skip || segment.actionType === ActionType.Mute
|| segment.actionType === ActionType.Poi
&& [SponsorHideType.Visible, SponsorHideType.Hidden].includes(segment.hidden)) &&
&& [SponsorHideType.Visible, SponsorHideType.Hidden].includes(hidden)) &&
<img
className="voteButton"
title={chrome.i18n.getMessage("hideSegment")}
@@ -288,17 +306,11 @@ function SegmentListItem({ segment, videoID, currentTime, isVip, loopedChapter,
const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.4);
stopAnimation();
if (segment.hidden === SponsorHideType.Hidden) {
segment.hidden = SponsorHideType.Visible;
setHidden(SponsorHideType.Visible);
} else {
segment.hidden = SponsorHideType.Hidden;
setHidden(SponsorHideType.Hidden);
}
const newState = hidden === SponsorHideType.Hidden ? SponsorHideType.Visible : SponsorHideType.Hidden;
setHidden(newState);
sendMessage({
message: "hideSegment",
type: segment.hidden,
type: newState,
UUID: segment.UUID
});
}}/>
@@ -343,7 +355,7 @@ function SegmentListItem({ segment, videoID, currentTime, isVip, loopedChapter,
}
function InnerChapterList({ chapters, videoID, currentTime, isVip, loopedChapter, tabFilter, sendMessage }: {
chapters: (segmentWithNesting)[];
chapters: (SegmentWithNesting)[];
videoID: VideoID;
currentTime: number;
isVip: boolean;