Merge pull request #456 from ajayyy/expiremental

Improvements

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)));

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