Make highlight bigger on timeline when skip to highlight button hovered

This commit is contained in:
Ajay 2023-10-31 01:16:36 -04:00
parent ca7eb50a82
commit 6f54c8a731
2 changed files with 21 additions and 5 deletions

View file

@ -302,8 +302,7 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
reskipSponsorTime(sponsorTimes.find((segment) => segment.UUID === request.UUID), true); reskipSponsorTime(sponsorTimes.find((segment) => segment.UUID === request.UUID), true);
break; break;
case "selectSegment": case "selectSegment":
selectedSegment = request.UUID; selectSegment(request.UUID);
updatePreviewBar();
break; break;
case "submitVote": case "submitVote":
vote(request.type, request.UUID).then((response) => sendResponse(response)); vote(request.type, request.UUID).then((response) => sendResponse(response));
@ -1071,6 +1070,7 @@ function setupSkipButtonControlBar() {
openNotice: true, openNotice: true,
forceAutoSkip: true forceAutoSkip: true
}), }),
selectSegment,
onMobileYouTube: isOnMobileYouTube() onMobileYouTube: isOnMobileYouTube()
}); });
} }
@ -1349,6 +1349,11 @@ function updatePreviewBarPositionMobile(parent: HTMLElement) {
} }
} }
function selectSegment(UUID: SegmentUUID): void {
selectedSegment = UUID;
updatePreviewBar();
}
function updatePreviewBar(): void { function updatePreviewBar(): void {
if (previewBar === null) return; if (previewBar === null) return;

View file

@ -1,11 +1,12 @@
import Config from "../config"; import Config from "../config";
import { SponsorTime } from "../types"; import { SegmentUUID, SponsorTime } from "../types";
import { getSkippingText } from "../utils/categoryUtils"; import { getSkippingText } from "../utils/categoryUtils";
import { AnimationUtils } from "../utils/animationUtils"; import { AnimationUtils } from "../utils/animationUtils";
import { keybindToString } from "../../maze-utils/src/config"; import { keybindToString } from "../../maze-utils/src/config";
export interface SkipButtonControlBarProps { export interface SkipButtonControlBarProps {
skip: (segment: SponsorTime) => void; skip: (segment: SponsorTime) => void;
selectSegment: (UUID: SegmentUUID) => void;
onMobileYouTube: boolean; onMobileYouTube: boolean;
} }
@ -54,8 +55,18 @@ export class SkipButtonControlBar {
this.container.appendChild(this.skipIcon); this.container.appendChild(this.skipIcon);
this.container.appendChild(this.textContainer); this.container.appendChild(this.textContainer);
this.container.addEventListener("click", () => this.toggleSkip()); this.container.addEventListener("click", () => this.toggleSkip());
this.container.addEventListener("mouseenter", () => this.stopTimer()); this.container.addEventListener("mouseenter", () => {
this.container.addEventListener("mouseleave", () => this.startTimer()); this.stopTimer();
if (this.segment) {
props.selectSegment(this.segment.UUID);
}
});
this.container.addEventListener("mouseleave", () => {
this.startTimer();
props.selectSegment(null);
});
if (this.onMobileYouTube) { if (this.onMobileYouTube) {
this.container.addEventListener("touchstart", (e) => this.handleTouchStart(e)); this.container.addEventListener("touchstart", (e) => this.handleTouchStart(e));
this.container.addEventListener("touchmove", (e) => this.handleTouchMove(e)); this.container.addEventListener("touchmove", (e) => this.handleTouchMove(e));