Show notice in first slot if available

src/components/NoticeComponent.tsx

@@ -12,6 +12,7 @@ export interface NoticeProps {
 
     maxCountdownTime?: () => number,
     amountOfPreviousNotices?: number,
+    showInSecondSlot?: boolean,
     timed?: boolean,
     idSuffix?: string,
 
@@ -97,7 +98,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         return (
             <div id={"sponsorSkipNotice" + this.idSuffix} 
                 className={"sponsorSkipObject sponsorSkipNoticeParent"
-                    + (this.amountOfPreviousNotices > 0 ? " secondSkipNotice" : "")}
+                    + (this.props.showInSecondSlot ? " secondSkipNotice" : "")}
                 onMouseEnter={(e) => this.onMouseEnter(e) }
                 onMouseLeave={() => this.timerMouseLeave()}
                 style={noticeStyle} >

src/components/SkipNoticeComponent.tsx

@@ -59,6 +59,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     contentContainer: ContentContainer;
 
     amountOfPreviousNotices: number;
+    showInSecondSlot: boolean;
     audio: HTMLAudioElement;
     
     idSuffix: string;
@@ -88,8 +89,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             noticeTitle = chrome.i18n.getMessage(messageId).replace("{0}", categoryName);
         }
     
-        //add notice
-        this.amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
+        const previousSkipNotices = document.getElementsByClassName("sponsorSkipNoticeParent");
+        this.amountOfPreviousNotices = previousSkipNotices.length;
+        // If there is at least one already in the first slot
+        this.showInSecondSlot = previousSkipNotices.length > 0 && [...previousSkipNotices].some(notice => !notice.classList.contains("secondSkipNotice"));
 
         // Sort segments
         if (this.segments.length > 1) {
@@ -156,6 +159,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         return (
             <NoticeComponent noticeTitle={this.state.noticeTitle}
                 amountOfPreviousNotices={this.amountOfPreviousNotices}
+                showInSecondSlot={this.showInSecondSlot}
                 idSuffix={this.idSuffix}
                 fadeIn={true}
                 startFaded={true}