Add tabs for chapters and other segments

public/_locales/en/messages.json

@@ -25,6 +25,12 @@
     "Segments": {
         "message": "segments"
     },
+    "SegmentsCap": {
+        "message": "Segments"
+    },
+    "Chapters": {
+        "message": "Chapters"
+    },
     "upvoteButtonInfo": {
         "message": "Upvote this submission"
     },

public/popup.css

@@ -409,3 +409,37 @@ label>p, #disableExtension>p, #usernameValue, #usernameElement > div > p,#sponso
 
   border-radius: 5px;
 }
+
+#issueReporterTabs {
+  margin: 5px;
+}
+
+#issueReporterTabs > span {
+  padding: 2px 4px;
+  margin: 0 3px;
+  cursor: pointer;
+  background-color: #444848;
+  border-radius: 10px;
+}
+
+#issueReporterTabs > span > span {
+  position: relative;
+  padding: 0.2em 0;
+}
+
+#issueReporterTabs > span > span::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0.1em;
+  background-color: rgb(145, 0, 0);
+  transition: transform 300ms;
+  transform: scaleX(0);
+  transform-origin: center;
+}
+
+#issueReporterTabs > span.sbSelected > span::after {
+  transform: scaleX(0.8);
+}

public/popup.html

@@ -24,6 +24,14 @@
           </button>
         </div>
         <div id="issueReporterContainer">
+          <div id="issueReporterTabs" class="hidden">
+            <span id="issueReporterTabSegments" class="sbSelected">
+              <span>__MSG_SegmentsCap__</span>
+            </span>
+            <span id="issueReporterTabChapters">
+              <span>__MSG_Chapters__</span>
+            </span>
+          </div>
           <div id="issueReporterTimeButtons"></div>
         </div>
       </div>

src/popup.ts

@@ -107,7 +107,10 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         //"downloadedSponsorMessageTimes",
         "refreshSegmentsButton",
         "whitelistButton",
-        "sbDonate"
+        "sbDonate",
+        "issueReporterTabs",
+        "issueReporterTabSegments",
+        "issueReporterTabChapters"
     ].forEach(id => PageElements[id] = document.getElementById(id));
 
     // Hide donate button if wanted (Safari, or user choice)
@@ -147,6 +150,12 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     //current video ID of this tab
     let currentVideoID = null;
 
+    enum SegmentTab {
+        Segments,
+        Chapters
+    }
+    let segmentTab = SegmentTab.Segments;
+
     //show proper disable skipping button
     const disableSkipping = Config.config.disableSkipping;
     if (disableSkipping != undefined && disableSkipping) {
@@ -240,6 +249,22 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
     getSegmentsFromContentScript(false);
 
+    PageElements.issueReporterTabSegments.addEventListener("click", () => {
+        PageElements.issueReporterTabSegments.classList.add("sbSelected");
+        PageElements.issueReporterTabChapters.classList.remove("sbSelected");
+
+        segmentTab = SegmentTab.Segments;
+        getSegmentsFromContentScript(true);
+    });
+
+    PageElements.issueReporterTabChapters.addEventListener("click", () => {
+        PageElements.issueReporterTabSegments.classList.remove("sbSelected");
+        PageElements.issueReporterTabChapters.classList.add("sbSelected");
+
+        segmentTab = SegmentTab.Chapters;
+        getSegmentsFromContentScript(true);
+    });
+
     function onTabs(tabs, updating: boolean): void {
         messageHandler.sendMessage(tabs[0].id, { message: 'getVideoID' }, function (result) {
             if (result !== undefined && result.videoID) {
@@ -369,8 +394,25 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     //display the video times from the array at the top, in a different section
     function displayDownloadedSponsorTimes(request: { found: boolean, sponsorTimes: SponsorTime[] }) {
         if (request.sponsorTimes != undefined) {
+            let currentSegmentTab = segmentTab;
+            if (!request.sponsorTimes.some((segment) => segment.actionType === ActionType.Chapter)) {
+                PageElements.issueReporterTabs.classList.add("hidden");
+                currentSegmentTab = SegmentTab.Segments;
+            } else {
+                PageElements.issueReporterTabs.classList.remove("hidden");
+            }
+
             // Sort list by start time
             const segmentTimes = request.sponsorTimes
+                .filter((segment) => {
+                    if (currentSegmentTab === SegmentTab.Segments) {
+                        return segment.actionType !== ActionType.Chapter;
+                    } else if (currentSegmentTab === SegmentTab.Chapters) {
+                        return segment.actionType === ActionType.Chapter;
+                    } else {
+                        return true;
+                    }
+                })
                 .sort((a, b) => a.segment[1] - b.segment[1])
                 .sort((a, b) => a.segment[0] - b.segment[0]);
 
@@ -438,7 +480,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 downvoteButton.addEventListener("click", () => vote(0, UUID));
 
                 //uuid button
-
                 const uuidButton = document.createElement("img");
                 uuidButton.id = "sponsorTimesCopyUUIDButtonContainer" + UUID;
                 uuidButton.className = "voteButton";
@@ -563,6 +604,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     //this is not a YouTube video page
     function displayNoVideo() {
         document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
+
+        PageElements.issueReporterTabs.classList.add("hidden");
     }
 
     function addVoteMessage(message, UUID) {