diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 714eb582..d20fc8d7 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -25,6 +25,12 @@
"Segments": {
"message": "segments"
},
+ "SegmentsCap": {
+ "message": "Segments"
+ },
+ "Chapters": {
+ "message": "Chapters"
+ },
"upvoteButtonInfo": {
"message": "Upvote this submission"
},
diff --git a/public/popup.css b/public/popup.css
index eab8dcd3..28e50758 100644
--- a/public/popup.css
+++ b/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);
+}
\ No newline at end of file
diff --git a/public/popup.html b/public/popup.html
index f21c674d..618cb986 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -24,6 +24,14 @@
+
+
+ __MSG_SegmentsCap__
+
+
+ __MSG_Chapters__
+
+
diff --git a/src/popup.ts b/src/popup.ts
index 56ffd528..ad018620 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -107,7 +107,10 @@ async function runThePopup(messageListener?: MessageListener): Promise {
//"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 {
//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 {
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 {
//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 {
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 {
//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) {