Merge branch 'master' of github.com:ajayyy/SponsorBlock

src/components/CategorySkipOptionsComponent.tsx

@@ -71,7 +71,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                     <td id={this.props.category + "ColorOption"}>
                         <input
                             className="categoryColorTextBox option-text-box"
-                            type="text"
+                            type="color"
                             onChange={(event) => this.setColorState(event, false)}
                             value={this.state.color} />
                     </td>
@@ -79,20 +79,11 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                     <td id={this.props.category + "PreviewColorOption"}>
                         <input
                             className="categoryColorTextBox option-text-box"
-                            type="text"
+                            type="color"
                             onChange={(event) => this.setColorState(event, true)}
                             value={this.state.previewColor} />
                     </td>
 
-                    <td id={this.props.category + "SaveButton"}>
-                        <div 
-                            className="option-button trigger-button"
-                            onClick={() => this.save()}>
-                            {chrome.i18n.getMessage("save")}
-                        </div>
-                    </td>
-
-                    
                 </tr>
 
                 <tr id={this.props.category + "DescriptionRow"}
@@ -169,32 +160,22 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
         return elements;
     }
 
-    setColorState(event: React.ChangeEvent<HTMLInputElement>, preview: boolean) {
+    setColorState(event: React.FormEvent<HTMLInputElement>, preview: boolean) {
         if (preview) {
             this.setState({
-                previewColor: event.target.value
+                previewColor: event.currentTarget.value
             });
+
+            Config.config.barTypes["preview-" + this.props.category].color = event.currentTarget.value;
+
         } else {
             this.setState({
-                color: event.target.value
+                color: event.currentTarget.value
             });
-        }
-    }
 
-    // Save text box data
-    save() {
-        // Validate colors
-        let checkVar = [this.state.color, this.state.previewColor]
-        for (const color of checkVar) {
-            if (color[0] !== "#" || (color.length !== 7 && color.length !== 4) || !utils.isHex(color.slice(1))) {
-                alert(chrome.i18n.getMessage("colorFormatIncorrect") + " " + color.slice(1) + " " + utils.isHex(color.slice(1)) + " " + utils.isHex("abcd123"));
-                return;
-            }
+            Config.config.barTypes[this.props.category].color = event.currentTarget.value;
         }
 
-        // Save colors
-        Config.config.barTypes[this.props.category].color = this.state.color;
-        Config.config.barTypes["preview-" + this.props.category].color = this.state.previewColor;
         // Make listener get called
         Config.config.barTypes = Config.config.barTypes;
     }

src/content.ts

@@ -324,7 +324,7 @@ async function videoIDChange(id) {
     if (previousVideoID != null) {
         //get the sponsor times from storage
         let sponsorTimes = Config.config.segmentTimes.get(previousVideoID);
-        if (sponsorTimes != undefined && sponsorTimes.length > 0) {
+        if (sponsorTimes != undefined && sponsorTimes.length > 0 && new URL(document.URL).host !== "music.youtube.com") {
             //warn them that they have unsubmitted sponsor times
             chrome.runtime.sendMessage({
                 message: "alertPrevious",
@@ -760,7 +760,7 @@ function getYouTubeVideoID(url: string) {
         onInvidious = true;
     } else if (urlObject.host === "m.youtube.com") {
         onMobileYouTube = true;
-    } else if (!["m.youtube.com", "www.youtube.com", "www.youtube-nocookie.com"].includes(urlObject.host)) {
+    } else if (!["m.youtube.com", "www.youtube.com", "www.youtube-nocookie.com", "music.youtube.com"].includes(urlObject.host)) {
         if (!Config.config) {
             // Call this later, in case this is an Invidious tab
             utils.wait(() => Config.config !== null).then(() => videoIDChange(getYouTubeVideoID(url)));
@@ -1087,7 +1087,7 @@ async function createButtons(): Promise<boolean> {
     let createdButton = false;
 
     // Add button if does not already exist in html
-    createdButton = createButton("startSponsor", "sponsorStart", startSponsorClicked, "PlayerStartIconSponsorBlocker256px.png") || createdButton;	  
+    createdButton = createButton("startSponsor", "sponsorStart", startSponsorClicked, "PlayerStartIconSponsorBlocker256px.png") || createdButton;
     createdButton = createButton("info", "openPopup", openInfoMenu, "PlayerInfoIconSponsorBlocker256px.png") || createdButton;
     createdButton = createButton("delete", "clearTimes", clearSponsorTimes, "PlayerDeleteIconSponsorBlocker256px.png") || createdButton;
     createdButton = createButton("submit", "SubmitTimes", submitSponsorTimes, "PlayerUploadIconSponsorBlocker256px.png") || createdButton;
@@ -1330,7 +1330,7 @@ function clearSponsorTimes() {
 function vote(type: number, UUID: string, category?: string, skipNotice?: SkipNoticeComponent) {
     if (skipNotice !== null && skipNotice !== undefined) {
         //add loading info
-        skipNotice.addVoteButtonInfo.bind(skipNotice)("Loading...")
+        skipNotice.addVoteButtonInfo.bind(skipNotice)(chrome.i18n.getMessage("Loading"))
         skipNotice.setNoticeInfoMessage.bind(skipNotice)();
     }
 

src/popup.ts

@@ -105,7 +105,7 @@ async function runThePopup(messageListener?: MessageListener) {
     ].forEach(id => PageElements[id] = document.getElementById(id));
 
     //setup click listeners
-    //PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
+    PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
     PageElements.whitelistToggle.addEventListener("change", function() {
         if (this.checked) {
             whitelistChannel();
@@ -114,8 +114,8 @@ async function runThePopup(messageListener?: MessageListener) {
         }
     });
     //PageElements.whitelistChannel.addEventListener("click", whitelistChannel);
-    //PageElements.whitelistForceCheck.addEventListener("click", openOptions);
-    //ageElements.unwhitelistChannel.addEventListener("click", unwhitelistChannel);
+    PageElements.whitelistForceCheck.addEventListener("click", openOptions);
+    //PageElements.unwhitelistChannel.addEventListener("click", unwhitelistChannel);
     PageElements.toggleSwitch.addEventListener("change", function() {
         if (this.checked) {
             toggleSkipping(false);
@@ -125,7 +125,7 @@ async function runThePopup(messageListener?: MessageListener) {
     });
     //PageElements.disableSkipping.addEventListener("click", () => toggleSkipping(true));
     //PageElements.enableSkipping.addEventListener("click", () => toggleSkipping(false));
-    //PageElements.submitTimes.addEventListener("click", submitTimes);
+    PageElements.submitTimes.addEventListener("click", submitTimes);
     //PageElements.showNoticeAgain.addEventListener("click", showNoticeAgain);
     PageElements.setUsernameButton.addEventListener("click", setUsernameButton);
     PageElements.submitUsername.addEventListener("click", submitUsername);
@@ -855,7 +855,7 @@ async function runThePopup(messageListener?: MessageListener) {
     function submitUsername() {
         //add loading indicator
         PageElements.setUsernameStatusContainer.style.display = "unset";
-        PageElements.setUsernameStatus.innerText = "Loading...";
+        PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading");
 
         //get the userID
         utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) {
@@ -902,7 +902,7 @@ async function runThePopup(messageListener?: MessageListener) {
   
     function vote(type, UUID) {
         //add loading info
-        addVoteMessage("Loading...", UUID)
+        addVoteMessage(chrome.i18n.getMessage("Loading"), UUID)
   
         //send the vote message to the tab
         chrome.runtime.sendMessage({

src/render/SkipNotice.tsx

@@ -2,19 +2,19 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import SkipNoticeComponent from "../components/SkipNoticeComponent";
-import { SponsorTime } from "../types";
+import { SponsorTime, ContentContainer } from "../types";
 
 class SkipNotice {
     segments: SponsorTime[];
     autoSkip: boolean;
     // Contains functions and variables from the content script needed by the skip notice
-    contentContainer: () => any;
+    contentContainer: ContentContainer;
 
     noticeElement: HTMLDivElement;
 
     skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
 
-    constructor(segments: SponsorTime[], autoSkip: boolean = false, contentContainer) {
+    constructor(segments: SponsorTime[], autoSkip: boolean = false, contentContainer: ContentContainer) {
         this.segments = segments;
         this.autoSkip = autoSkip;
         this.contentContainer = contentContainer;
@@ -35,6 +35,10 @@ class SkipNotice {
                 index++;
             }
         }
+        // YouTube Music
+        if (new URL(document.URL).host === "music.youtube.com") {
+            referenceNode = document.querySelector("#main-panel.ytmusic-player-page");
+        }
     
         let amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length;
         //this is the suffix added at the end of every id