diff --git a/public/content.css b/public/content.css index da79f74d..de892be8 100644 --- a/public/content.css +++ b/public/content.css @@ -39,6 +39,10 @@ height: 100%; } +.previewbar.requiredSegment { + transform: scaleY(3) +} + /* Make sure settings are upfront */ .ytp-settings-menu { z-index: 6000 !important; diff --git a/src/content.ts b/src/content.ts index b60f0a2b..0842e521 100644 --- a/src/content.ts +++ b/src/content.ts @@ -1227,6 +1227,7 @@ function updatePreviewBar(): void { if (video === null) return; + const hashParams = getHashParams(); const previewBarSegments: PreviewBarSegment[] = []; if (sponsorTimes) { sponsorTimes.forEach((segment) => { @@ -1240,6 +1241,7 @@ function updatePreviewBar(): void { showLarger: segment.actionType === ActionType.Poi, description: segment.description, source: segment.source, + requiredSegment: hashParams.requiredSegment && segment.UUID === hashParams.requiredSegment }); }); } diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts index 9779913f..29cc1bbd 100644 --- a/src/js-components/previewBar.ts +++ b/src/js-components/previewBar.ts @@ -23,6 +23,7 @@ export interface PreviewBarSegment { showLarger: boolean; description: string; source: SponsorSourceType; + requiredSegment?: boolean; } interface ChapterGroup extends SegmentContainer { @@ -251,6 +252,7 @@ class PreviewBar { const bar = document.createElement('li'); bar.classList.add('previewbar'); + if (barSegment.requiredSegment) bar.classList.add("requiredSegment"); bar.innerHTML = showLarger ? '  ' : ' '; const fullCategoryName = (unsubmitted ? 'preview-' : '') + category;