diff --git a/src/content.ts b/src/content.ts index 4b480ddd..2b24039e 100644 --- a/src/content.ts +++ b/src/content.ts @@ -419,9 +419,12 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?: return; } - if (!video || video.paused) return; + if (!video) return; if (currentTime === undefined || currentTime === null) currentTime = video.currentTime; + previewBar.updateChapterText(sponsorTimes, currentTime); + + if (video.paused) return; if (videoMuted && !inMuteSegment(currentTime)) { video.muted = false; videoMuted = false; @@ -601,6 +604,8 @@ function setupVideoListeners() { lastCheckVideoTime = video.currentTime; startSponsorSchedule(); + } else { + previewBar.updateChapterText(sponsorTimes, video.currentTime); } if (!Config.config.dontShowNotice) { diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts index 191053b9..bdfa6989 100644 --- a/src/js-components/previewBar.ts +++ b/src/js-components/previewBar.ts @@ -6,7 +6,9 @@ https://github.com/videosegments/videosegments/commits/f1e111bdfe231947800c6efdd 'use strict'; import Config from "../config"; +import { ActionType, ActionTypes, SponsorTime } from "../types"; import Utils from "../utils"; +import { getSkippingText } from "../utils/categoryUtils"; const utils = new Utils(); const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible'; @@ -203,6 +205,51 @@ class PreviewBar { return bar; } + updateChapterText(segments: SponsorTime[], currentTime: number): void { + if (!segments) return; + + const activeSegments = segments.filter((segment) => { + return segment.segment[0] <= currentTime && segment.segment[1] >= currentTime; + }); + + this.setActiveSegments(activeSegments); + } + + /** + * Adds the text to the chapters slot if not filled by default + */ + private setActiveSegments(segments: SponsorTime[]): void { + const chaptersContainer = document.querySelector(".ytp-chapter-container") as HTMLDivElement; + + if (chaptersContainer) { + // TODO: Check if existing chapters exist (if big chapters menu is available?) + + if (segments.length > 0) { + chaptersContainer.style.removeProperty("display"); + + const chosenSegment = segments.sort((a, b) => { + if (a.actionType === ActionType.Chapter && b.actionType !== ActionType.Chapter) { + return -1; + } else if (a.actionType !== ActionType.Chapter && b.actionType === ActionType.Chapter) { + return 1; + } else { + return (a.segment[0] - b.segment[1]); + } + })[0]; + + const chapterButton = chaptersContainer.querySelector("button.ytp-chapter-title") as HTMLButtonElement; + chapterButton.classList.remove("ytp-chapter-container-disabled"); + chapterButton.disabled = false; + + const chapterTitle = chaptersContainer.querySelector(".ytp-chapter-title-content") as HTMLDivElement; + chapterTitle.innerText = chosenSegment.description || utils.shortCategoryName(chosenSegment.category); + } else { + // Hide chapters menu again + chaptersContainer.style.display = "none"; + } + } + } + remove(): void { this.container.remove(); diff --git a/src/types.ts b/src/types.ts index c60e52bb..cd2dca43 100644 --- a/src/types.ts +++ b/src/types.ts @@ -58,7 +58,8 @@ export enum CategoryActionType { export enum ActionType { Skip = "skip", - Mute = "mute" + Mute = "mute", + Chapter = "chapter", } export const ActionTypes = [ActionType.Skip, ActionType.Mute]; @@ -77,6 +78,7 @@ export interface SponsorTime { category: Category; actionType: ActionType; + description?: string; hidden?: SponsorHideType; source?: SponsorSourceType;