Make required segments thicker in preview bar

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;

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
             });
         });
     }

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;