Add hide segment button to submission menu

Author: ajayyy

public/content.css

@@ -683,6 +683,14 @@ input::-webkit-inner-spin-button {
 	color: white;
 }
 
+.hideSegmentSubmitButton {
+	cursor: pointer;
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	position: absolute;
+}
+
 /* Start SelectorComponent */
 
 .sbSelector {

src/components/SponsorTimeEditComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config";
-import { ActionType, Category, ChannelIDStatus, ContentContainer, SponsorTime } from "../types";
+import { ActionType, Category, ChannelIDStatus, ContentContainer, SponsorHideType, SponsorTime } from "../types";
 import SubmissionNoticeComponent from "./SubmissionNoticeComponent";
 import { RectangleTooltip } from "../render/RectangleTooltip";
 import SelectorComponent, { SelectorOption } from "./SelectorComponent";
@@ -10,6 +10,7 @@ import { getFormattedTime, getFormattedTimeToSeconds } from "../../maze-utils/sr
 import { asyncRequestToServer } from "../utils/requests";
 import { defaultPreviewTime } from "../utils/constants";
 import { getVideo, getVideoDuration } from "../../maze-utils/src/video";
+import { AnimationUtils } from "../../maze-utils/src/animationUtils";
 
 export interface SponsorTimeEditProps {
     index: number;
@@ -242,6 +243,22 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                             onChange={(e) => this.actionTypeSelectionChange(e)}>
                             {this.getActionTypeOptions(sponsorTime)}
                         </select>
+                        <img
+                            className="voteButton hideSegmentSubmitButton"
+                            title={chrome.i18n.getMessage("hideSegment")}
+                            src={sponsorTime.hidden === SponsorHideType.Hidden ? chrome.runtime.getURL("icons/not_visible.svg") : chrome.runtime.getURL("icons/visible.svg")}
+                            onClick={(e) => {
+                                const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.4);
+                                stopAnimation();
+    
+                                if (sponsorTime.hidden === SponsorHideType.Hidden) {
+                                    sponsorTime.hidden = SponsorHideType.Visible;
+                                } else {
+                                    sponsorTime.hidden = SponsorHideType.Hidden;
+                                }
+
+                                this.saveEditTimes();
+                        }}/>
                     </div>
                 ): ""}
 

src/content.ts

@@ -713,7 +713,9 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
         forceVideoTime ||= Math.max(getCurrentTime(), getVirtualTime());
 
         if ((shouldSkip(currentSkip)
-                || sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment && segment.actionType !== ActionType.Chapter))) {
+                || sponsorTimesSubmitting?.some((segment) => segment.segment === currentSkip.segment
+                    && segment.actionType !== ActionType.Chapter
+                    && segment.hidden === SponsorHideType.Visible))) {
             if (forceVideoTime >= skipTime[0] - skipBuffer && (forceVideoTime < skipTime[1] || skipTime[1] < skipTime[0])) {
                 skipToTime({
                     v: getVideo(),
@@ -1427,7 +1429,8 @@ function updatePreviewBar(): void {
     }
 
     sponsorTimesSubmitting.forEach((segment) => {
-        if (segment.actionType !== ActionType.Chapter || segment.segment.length > 1) {
+        if (segment.hidden === SponsorHideType.Visible
+                && (segment.actionType !== ActionType.Chapter || segment.segment.length > 1)) {
             previewBarSegments.push({
                 segment: segment.segment as [number, number],
                 category: segment.category,
@@ -1940,7 +1943,7 @@ function shouldAutoSkip(segment: SponsorTime): boolean {
 }
 
 function shouldSkip(segment: SponsorTime): boolean {
-    return (segment.actionType !== ActionType.Full
+    return segment.hidden === SponsorHideType.Visible && (segment.actionType !== ActionType.Full
             && getCategorySelection(segment)?.option > CategorySkipOption.ShowOverlay)
             || (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")
                 && segment.actionType === ActionType.Skip)
@@ -2135,6 +2138,7 @@ function updateSponsorTimesSubmitting(getFromConfig = true) {
                 category: segmentTime.category,
                 actionType: segmentTime.actionType,
                 description: segmentTime.description,
+                hidden: segmentTime.hidden,
                 source: segmentTime.source
             });
         }

src/popup/SegmentListComponent.tsx

@@ -237,7 +237,7 @@ function SegmentListItem({ segment, videoID, currentTime, isVip, startingLooped,
                         && [SponsorHideType.Visible, SponsorHideType.Hidden].includes(segment.hidden)) &&
                     <img
                         className="voteButton"
-                        title="Hide Segment"
+                        title={chrome.i18n.getMessage("hideSegment")}
                         src={hidden === SponsorHideType.Hidden ? chrome.runtime.getURL("icons/not_visible.svg") : chrome.runtime.getURL("icons/visible.svg")}
                         onClick={(e) => {
                             const stopAnimation = AnimationUtils.applyLoadingAnimation(e.currentTarget, 0.4);