From 8f7ed9ce13ae8dfbf8e25e1354421658d7f97e06 Mon Sep 17 00:00:00 2001
From: mmble <23295125+mmble@users.noreply.github.com>
Date: Tue, 22 Sep 2020 19:24:34 +0200
Subject: [PATCH] Popup - Vote buttons, Creating sponsor segments

---
 public/_locales/en/messages.json |  2 +-
 public/icons/thumb.svg           |  1 +
 public/popup.css                 | 55 ++++++++++++++++++++--
 public/popup.html                | 81 +++++++++++++++++---------------
 src/popup.ts                     | 56 +++++++++++-----------
 5 files changed, 124 insertions(+), 71 deletions(-)
 create mode 100644 public/icons/thumb.svg

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 8beb3305..d25ab7a4 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -146,7 +146,7 @@
          "message": "Submit"
     },
     "popupHint": {
-         "message": "Hint: Press the semicolon key while focused on a video to report the start/end of a segment and quote to submit. (This can be changed in the options)"
+         "message": "Hint: Press the semicolon key while focused on a video to report the start/end of a segment and quote to submit."
     },
     "clearTimesButton": {
         "message": "Clear Times"
diff --git a/public/icons/thumb.svg b/public/icons/thumb.svg
new file mode 100644
index 00000000..c66bcdbd
--- /dev/null
+++ b/public/icons/thumb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#fff" d="M21.4 9.6c-1.2 0-2.9-.3-4-.8.8-3.3 1.3-8.8-2.2-8.8-1.8 0-2.3 1.7-2.8 3.3-1.6 5.4-4 6.9-6.4 7.5V10H0v12h6v-.9a19.2 19.2 0 016.2 1.8c1.2.5 3 1.1 5.3 1.1 2.5 0 4.3-1 5-3.7.5-1.9 1.5-7.2 1.5-8.2 0-1.7-1.2-2.5-2.6-2.5zM4 20H2v-8h2v8zm15.9-5.6h1c1.2 0 1.1 1.5 0 1.6h-1.7c-.7.2-.7 1.3.1 1.2h1.2c1 0 1 1.4 0 1.5l-1.7.1c-.8.1-.7 1.3 0 1.2h.8c.9-.1 1 .8-.3 1.6-1.5.9-4.6.1-6.4-.6-2.2-1-4.4-2-7-2v-6c3.3-.8 6.4-2.3 8.4-9.1.9-3.1 1.7-2 1.7.6 0 2-.5 3.8-1 5.5 1.1.5 3.4 1.4 6.2 1.6 1 0 1 1.4 0 1.5l-1.5.2s-.6 1.1.2 1.1z"/></svg>
\ No newline at end of file
diff --git a/public/popup.css b/public/popup.css
index dec0b897..e3d86b45 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -20,8 +20,29 @@
   text-align: center;
 }
 
-#downloadedSponsorMessageTimes{
+#issueReporterTimeButtons {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}
+
+#issueReporterTimeButtons > button {
   font-weight: bold;
+  color: var(--sb-main-fg-color);
+  background: none;
+  border: none;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 10px;
+}
+
+#issueReporterTimeButtons > div > img:nth-child(2) {
+  margin-left: 6px;
+  transform: scaleY(-1);
+}
+
+#issueReporterTimeButtons > div > h2 {
+  margin: 0;
 }
 
 #videoInfo>p, #videoInfo>div>p {
@@ -47,14 +68,32 @@ div.logoText>p, .sbHeader {
   padding: 6px 24px;
   font-size: 20px;
   border-radius: 25px;
+  border: none;
   text-decoration: none;
   color: black;
   min-height: 26px;
-  height: 26px;
-  width: 152px;
+  min-width: 152px;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-family: 'Source Sans Pro', sans-serif;
+}
+
+.mediumButton {
+  background: red;
+  /* font-weight: bold; */
+  padding: 6px 24px;
+  font-size: 16px;
+  border-radius: 25px;
+  border: none;
+  text-decoration: none;
+  color: white;
+  min-height: 26px;
+  min-width: 152px;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: 'Source Sans Pro', sans-serif;
 }
 
 /* disable extension */
@@ -146,9 +185,17 @@ div.logoText>p, .sbHeader {
   margin-bottom: 6px !important;
 }
 
-#videoInfo, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton {
+#videoInfo, #mainControls, .sidebyside, #sponsorTimesSkipsDoneContainer, .largeButton, #submissionSection>b {
   margin-bottom: 12px !important;
 }
+#mainControls{
+flex-flow: column;
+align-items: center;
+}
+#submitTimesContainer{
+  flex-flow: column;
+  align-items: center;
+}
 /* additional buttons */
 
 #additionalButtons {
diff --git a/public/popup.html b/public/popup.html
index ac147382..6baa12e1 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -19,7 +19,10 @@
         <!-- If the video was found in the database -->
         <p id="videoFound"></p>
       </div>
-      <p id="downloadedSponsorMessageTimes"></p>
+      <div id="issueReporterContainer">
+        <div id="issueReporterTimeButtons"></div>
+      </div>
+    </div>
     <div class="sidebyside">
       <div id="disableExtension">
         <!--github: mbledkowski/toggle-switch-->
@@ -43,6 +46,9 @@
             </svg>
             <p id="whitelistChannel">__MSG_whitelistChannel__</p>
             <p id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</p>
+            <div id="whitelistForceCheck" style="text-decoration: underline; cursor: pointer;display: none">
+              __MSG_forceChannelCheckPopup__
+            </div>
           </label>
         </div>
         <button id="optionsButton" title="__MSG_optionsInfo__">
@@ -52,69 +58,68 @@
       </div>
     </div>
     <div id="mainControls" style="display: none">
-      <p class="popupElement" class="sbHeader">
+      <p class="sbHeader">
         __MSG_recordTimesDescription__
       </p>
-      <sub class="popupElement">__MSG_popupHint__</sub>
+      <sub>__MSG_popupHint__</sub>
       <div>
-        <button id="sponsorStart" class="greenButton popupElement">__MSG_sponsorStart__</button>
+        <button id="sponsorStart" class="mediumButton">__MSG_sponsorStart__</button>
       </div>
-      <div id="submissionSection"  class="popupElement" style="display: none">
-        <b>Sponsor Editing has been moved and will appear after you click submit</b>
-        <div id="submitTimesContainer" class="popupElement" style="display: none">
-          <button id="submitTimes" class="smallButton popupElement">__MSG_submitTimesButton__</button>
+      <div id="submissionSection" style="display: none">
+        <b>Section editing will appear after you click submit</b>
+        <div id="submitTimesContainer" style="display: none">
+          <button id="submitTimes" class="largeButton">__MSG_submitTimesButton__</button>
         </div>
       </div>
     </div>
-    </div>
     <h1 class="recordingSubtitle sbHeader">__MSG_yourWork__</h1>
     <div class="sidebyside">
       <div id="usernameElement">
         <div>
-        <p>__MSG_Username__</p>
-        <div id="setUsernameContainer">
-          <p id="usernameValue"></p>
-          <button id="setUsernameButton" title="__MSG_setUsername__">
-            <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
-          </button>
-        </div>
-        <div id="setUsername" style="display: none">
-          <div id="setUsernameStatusContainer" style="display: none">
-            <p id="setUsernameStatus"></p>
+          <p>__MSG_Username__</p>
+          <div id="setUsernameContainer">
+            <p id="usernameValue"></p>
+            <button id="setUsernameButton" title="__MSG_setUsername__">
+              <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
+            </button>
+          </div>
+          <div id="setUsername" style="display: none">
+            <div id="setUsernameStatusContainer" style="display: none">
+              <p id="setUsernameStatus"></p>
+            </div>
+            <input id="usernameInput" hint="Username"></input>
+            <button id="submitUsername">
+              <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
+            </button>
           </div>
-          <input id="usernameInput" hint="Username"></input>
-          <button id="submitUsername">
-            <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
-          </button>
-        </div>
         </div>
       </div>
       <div id="sponsorTimesContributionsContainer" style="display: none">
         <div>
-        <p>__MSG_soFarUHSubmited__</p>
-        <span id="sponsorTimesContributionsDisplay">
-          0
-        </span>
+          <p>__MSG_soFarUHSubmited__</p>
+          <span id="sponsorTimesContributionsDisplay">
+            0
+          </span>
         </div>
       </div>
     </div>
 
-      <span id="sponsorTimesViewsContainer" style="display: none">
-        __MSG_savedPeopleFrom__
-        <b><span id="sponsorTimesViewsDisplay">
+    <span id="sponsorTimesViewsContainer" style="display: none">
+      __MSG_savedPeopleFrom__
+      <b><span id="sponsorTimesViewsDisplay">
           0
         </span></b>
-        <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
-        <br>
-        (<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
+      <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
+      <br>
+      (<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
         <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
-        <span>__MSG_youHaveSavedTimeEnd__</span>).
-      </span>
+      <span>__MSG_youHaveSavedTimeEnd__</span>).
+    </span>
     <div id="sponsorTimesSkipsDoneContainer" style="display: none">
       __MSG_youHaveSkipped__
       <b><span id="sponsorTimesSkipsDoneDisplay">
-        0
-      </span></b>
+          0
+        </span></b>
       <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
       (<b><span id="sponsorTimeSavedDisplay">
           0
diff --git a/src/popup.ts b/src/popup.ts
index 1ddebf26..ebbdeccf 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -52,7 +52,7 @@ async function runThePopup(messageListener?: MessageListener) {
     "whitelistChannel",
     "unwhitelistChannel",
     "whitelistToggle",
-    //"whitelistForceCheck",
+    "whitelistForceCheck",
     "disableSkipping",
     "enableSkipping",
     "toggleSwitch",
@@ -100,7 +100,7 @@ async function runThePopup(messageListener?: MessageListener) {
     "loadingIndicator",
     "videoFound",
     "sponsorMessageTimes",
-    "downloadedSponsorMessageTimes",
+    //"downloadedSponsorMessageTimes",
     "whitelistButton",
     ].forEach(id => PageElements[id] = document.getElementById(id));
 
@@ -287,7 +287,7 @@ async function runThePopup(messageListener?: MessageListener) {
             sponsorTimes = sponsorTimesStorage;
 
             //show submission section
-            PageElements.submissionSection.style.display = "unset";
+            PageElements.submissionSection.style.display = "flex";
 
             showSubmitTimesIfNecessary();
         }
@@ -310,7 +310,7 @@ async function runThePopup(messageListener?: MessageListener) {
         //if request is undefined, then the page currently being browsed is not YouTube
         if (request != undefined) {
             //remove loading text
-            PageElements.mainControls.style.display = "unset";
+            PageElements.mainControls.style.display = "flex";
             PageElements.whitelistButton.classList.remove("grayedOut");
             PageElements.loadingIndicator.style.display = "none";
 
@@ -338,8 +338,8 @@ async function runThePopup(messageListener?: MessageListener) {
                         PageElements.whitelistToggle.checked = true;
                         document.querySelectorAll('label > svg')[0].classList.add("rotated");
 
-                        PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
-                        PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
+                        //PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
+                        //PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
                     }
                 });
             }
@@ -401,12 +401,12 @@ async function runThePopup(messageListener?: MessageListener) {
     function displayDownloadedSponsorTimes(request: {found: boolean, sponsorTimes: SponsorTime[]}) {
         if (request.sponsorTimes != undefined) {
             //set it to the message
-            if (PageElements.downloadedSponsorMessageTimes.innerText != chrome.i18n.getMessage("channelWhitelisted")) {
+            /*if (PageElements.downloadedSponsorMessageTimes.innerText != chrome.i18n.getMessage("channelWhitelisted")) {
                 PageElements.downloadedSponsorMessageTimes.innerText = getSponsorTimesMessage(request.sponsorTimes);
-            }
+            }*/
 
             //add them as buttons to the issue reporting container
-            //let container = document.getElementById("issueReporterTimeButtons");
+            let container = document.getElementById("issueReporterTimeButtons");
             for (let i = 0; i < request.sponsorTimes.length; i++) {
                 let sponsorTimeButton = document.createElement("button");
                 sponsorTimeButton.className = "warningButton popupElement";
@@ -421,7 +421,7 @@ async function runThePopup(messageListener?: MessageListener) {
                 }
 
                 sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i].segment[0]) + " " + chrome.i18n.getMessage("to") + " " + getFormattedTime(request.sponsorTimes[i].segment[1]) + extraInfo;
-                
+
                 let votingButtons = document.createElement("div");
 
                 let UUID = request.sponsorTimes[i].UUID;
@@ -434,19 +434,19 @@ async function runThePopup(messageListener?: MessageListener) {
 
                 let upvoteButton = document.createElement("img");
                 upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
-                upvoteButton.className = "voteButton popupElement";
-                upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
+                upvoteButton.className = "voteButton";
+                upvoteButton.src = chrome.extension.getURL("icons/thumb.svg");
                 upvoteButton.addEventListener("click", () => vote(1, UUID));
 
                 let downvoteButton = document.createElement("img");
                 downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
-                downvoteButton.className = "voteButton popupElement";
-                downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+                downvoteButton.className = "voteButton";
+                downvoteButton.src = chrome.extension.getURL("icons/thumb.svg");
                 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(document.createElement("br"));
+                //voteButtonsContainer.appendChild(document.createElement("br"));
                 voteButtonsContainer.appendChild(upvoteButton);
                 voteButtonsContainer.appendChild(downvoteButton);
 
@@ -455,8 +455,8 @@ async function runThePopup(messageListener?: MessageListener) {
                     voteButtonsContainer.style.display = "unset";
                 });
 
-                //container.appendChild(sponsorTimeButton);
-                //container.appendChild(voteButtonsContainer);
+                container.appendChild(sponsorTimeButton);
+                container.appendChild(voteButtonsContainer);
 
                 //if it is not the last iteration
                 if (i != request.sponsorTimes.length - 1) {
@@ -591,7 +591,7 @@ async function runThePopup(messageListener?: MessageListener) {
         }
 
         //hide submit button
-        //document.getElementById("submitTimesContainer").style.display = "none";
+        document.getElementById("submitTimesContainer").style.display = "none";
   
         let sponsorTimeContainer = document.getElementById("sponsorTimeContainer" + index);
   
@@ -814,10 +814,10 @@ async function runThePopup(messageListener?: MessageListener) {
         //check if an end time has been specified for the latest sponsor time
         if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].segment.length > 1) {
             //show submit times button
-            //document.getElementById("submitTimesContainer").style.display = "unset";
+            document.getElementById("submitTimesContainer").style.display = "flex";
         } else {
             //hide submit times button
-            //document.getElementById("submitTimesContainer").style.display = "none";
+            document.getElementById("submitTimesContainer").style.display = "none";
         }
     }
   
@@ -880,10 +880,10 @@ async function runThePopup(messageListener?: MessageListener) {
         document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
     }
   
-    function reportAnIssue() {
+    /*function reportAnIssue() {
         document.getElementById("issueReporterContainer").style.display = "unset";
         //PageElements.reportAnIssue.style.display = "none";
-    }
+    }*/
   
     function addVoteMessage(message, UUID) {
         let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
@@ -972,10 +972,10 @@ async function runThePopup(messageListener?: MessageListener) {
                     PageElements.unwhitelistChannel.style.display = "unset";
                     document.querySelectorAll('label > svg')[0].classList.add("rotated");
 
-                    //TODO if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.style.display = "unset";
+                    if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.style.display = "unset";
 
-                    PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
-                    PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
+                    //PageElements.downloadedSponsorMessageTimes.innerText = chrome.i18n.getMessage("channelWhitelisted");
+                    //PageElements.downloadedSponsorMessageTimes.style.fontWeight = "bold";
 
                     //save this
                     Config.config.whitelistedChannels = whitelistedChannels;
@@ -1022,8 +1022,8 @@ async function runThePopup(messageListener?: MessageListener) {
                         PageElements.unwhitelistChannel.style.display = "none";
                         document.querySelectorAll('label > svg')[0].classList.remove("rotated");
 
-                        PageElements.downloadedSponsorMessageTimes.innerText = "";
-                        PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset";
+                        //PageElements.downloadedSponsorMessageTimes.innerText = "";
+                        //PageElements.downloadedSponsorMessageTimes.style.fontWeight = "unset";
 
                         //save this
                         Config.config.whitelistedChannels = whitelistedChannels;