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 @@
+
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) {