From 888a03a708246ac2ba04874737359aa1b7ff5cfd Mon Sep 17 00:00:00 2001
From: Ajay Ramachandran <dev@ajay.app>
Date: Wed, 17 Jul 2019 22:53:42 -0400
Subject: [PATCH] Added button to popup to allow you to vote from the popup.

---
 content.js |  3 ++-
 popup.css  |  9 +++++++
 popup.html | 16 ++++++++++-
 popup.js   | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/content.js b/content.js
index b5e2fc4c..83d4735b 100644
--- a/content.js
+++ b/content.js
@@ -59,7 +59,8 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
       //send the sponsor times along with if it's found
       sendResponse({
         found: sponsorDataFound,
-        sponsorTimes: sponsorTimes
+        sponsorTimes: sponsorTimes,
+        UUIDs: UUIDs
       })
     }
 
diff --git a/popup.css b/popup.css
index 64ae0a17..36e2fb25 100644
--- a/popup.css
+++ b/popup.css
@@ -12,6 +12,15 @@ body {
   background-color: #ffd9d9;
 }
 
+.voteButton {
+	height: 32px;
+	margin-right: 15px;
+	cursor: pointer;
+}
+.voteButton:hover {
+	filter: brightness(80%);
+}
+
 .greenButton {
 	background-color:#ec1c1c;
   -moz-border-radius:28px;
diff --git a/popup.html b/popup.html
index 79b7adde..d34d9a76 100644
--- a/popup.html
+++ b/popup.html
@@ -24,7 +24,21 @@
           <div id="downloadedSponsorMessageTimes">
 
           </div>
-          
+
+          <br/>
+
+          <button id="reportAnIssue" class="dangerButton">Vote On A Sponsor Time</button>
+
+          <div id="issueReporterContainer" style="display: none">
+
+            <h3 style="margin-top: 0px">Vote On A Sponsor Time</h3>
+
+            <div id="issueReporterTimeButtons">
+
+            </div>
+
+          </div>
+
           <h2>Record the times of a sponsorship</h2>
 
           <p> 
diff --git a/popup.js b/popup.js
index d5b984f0..29deaf66 100644
--- a/popup.js
+++ b/popup.js
@@ -6,6 +6,7 @@ document.getElementById("showNoticeAgain").addEventListener("click", showNoticeA
 document.getElementById("hideVideoPlayerControls").addEventListener("click", hideVideoPlayerControls);
 document.getElementById("showVideoPlayerControls").addEventListener("click", showVideoPlayerControls);
 document.getElementById("optionsButton").addEventListener("click", openOptions);
+document.getElementById("reportAnIssue").addEventListener("click", reportAnIssue);
 
 //if true, the button now selects the end time
 var startTimeChosen = false;
@@ -164,6 +165,56 @@ function displayDownloadedSponsorTimes(request) {
   if (request.sponsorTimes != undefined) {
     //set it to the message
     document.getElementById("downloadedSponsorMessageTimes").innerHTML = getSponsorTimesMessage(request.sponsorTimes);
+
+    //add them as buttons to the issue reporting container
+    let container = document.getElementById("issueReporterTimeButtons");
+    for (let i = 0; i < request.sponsorTimes.length; i++) {
+      let sponsorTimeButton = document.createElement("button");
+      sponsorTimeButton.className = "warningButton";
+      sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]);
+      
+      let votingButtons = document.createElement("div");
+
+      let UUID = request.UUIDs[i];
+
+      //thumbs up and down buttons
+      let voteButtonsContainer = document.createElement("div");
+      voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
+      voteButtonsContainer.setAttribute("align", "center");
+      voteButtonsContainer.style.display = "none"
+
+      let upvoteButton = document.createElement("img");
+      upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
+      upvoteButton.className = "voteButton";
+      upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
+      upvoteButton.addEventListener("click", () => vote(1, UUID));
+
+      let downvoteButton = document.createElement("img");
+      downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
+      downvoteButton.className = "voteButton";
+      downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+      downvoteButton.addEventListener("click", () => vote(0, UUID));
+
+      //add thumbs up and down buttons to the container
+      voteButtonsContainer.appendChild(document.createElement("br"));
+      voteButtonsContainer.appendChild(document.createElement("br"));
+      voteButtonsContainer.appendChild(upvoteButton);
+      voteButtonsContainer.appendChild(downvoteButton);
+
+      //add click listener to open up vote panel
+      sponsorTimeButton.addEventListener("click", function() {
+        voteButtonsContainer.style.display = "unset";
+      });
+
+      container.appendChild(sponsorTimeButton);
+      container.appendChild(voteButtonsContainer);
+
+      //if it is not the last iteration
+      if (i != request.sponsorTimes.length - 1) {
+        container.appendChild(document.createElement("br"));
+        container.appendChild(document.createElement("br"));
+      }
+    }
   }
 }
 
@@ -314,6 +365,33 @@ function displayNoVideo() {
       "If you know this is a YouTube tab, close this popup and open it again.";
 }
 
+function reportAnIssue() {
+  document.getElementById("issueReporterContainer").style.display = "unset";
+  document.getElementById("reportAnIssue").style.display = "none";
+}
+
+function vote(type, UUID) {
+  let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
+  //remove all children
+  while (container.firstChild) {
+    container.removeChild(container.firstChild);
+  }
+
+  let thanksForVotingText = document.createElement("h2");
+  thanksForVotingText.innerText = "Thanks for voting!";
+  //there are already breaks there
+  thanksForVotingText.style.marginBottom = "0px";
+
+  container.appendChild(thanksForVotingText);
+
+  //send the vote message to the tab
+  chrome.runtime.sendMessage({
+    message: "submitVote",
+    type: type,
+    UUID: UUID
+  });
+}
+
 //converts time in seconds to minutes:seconds
 function getFormattedTime(seconds) {
   let minutes = Math.floor(seconds / 60);