Merge pull request #456 from ajayyy/expiremental

Improvements

README.md

@@ -77,6 +77,18 @@ The result is in `dist`. This can be loaded as an unpacked extension
 Run `npm run dev` to run the extension using a clean browser profile with hot reloading. Use `npm run dev:firefox` for Firefox. This uses [`web-ext run`](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#commands).  
 Known chromium bug: Extension is not loaded properly on first start. Visit `chrome://extensions/` and reload the extension.
 
+
+### Attribution Generation
+
+If you contribute and add a dependency, update the attribution file using the following steps:
+
+Make sure the attribution generator is installed: `npm i -g oss-attribution-generator`
+
+```bash
+generate-attribution
+mv ./oss-attribution/attribution.txt ./public/oss-attribution/attribution.txt
+```
+
 # Credit
 
 The awesome [Invidious API](https://github.com/omarroth/invidious/wiki/API) was previously used.
@@ -85,4 +97,4 @@ Originally forked from [YTSponsorSkip](https://github.com/NDevTK/YTSponsorSkip),
 
 Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
 
-Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>

public/help/index_en.html

@@ -19,15 +19,11 @@
     <p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a> <img src="https://ajay.app/newprofilepic.jpg" height="30" class="profilepiccircle"/></p>
 
     <p>
-        Thanks for installing SponsorBlock. Here are some quick tips for getting started. Feel free to contact me if you have any questions. 
+        Thanks for installing SponsorBlock. Here are some quick tips for getting started. Feel free to contact me if you have any questions. By using this extension, you agree to the <a href="https://gist.github.com/ajayyy/aa9f8ded2b573d4f73a3ffa0ef74f796">Privacy Policy</a>.
     </p>
 
     <p class="projectPreview">
-      <span class="projectPreviewImage">
-          <a href="https://discord.gg/QnmVMpU"><img width="80" src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png"/></a>
-      </span>
-	  
-	  Come contribute, make some suggestions and help out in the Discord: <a href="https://discord.gg/QnmVMpU">https://discord.gg/QnmVMpU</a>
+	      Come contribute, make some suggestions and help out in the Discord: <a href="https://discord.gg/QnmVMpU">https://discord.gg/QnmVMpU</a>
     </p>
 
     <p style="margin-bottom: 0" class="bigText center">Please review the options below</p>
@@ -125,12 +121,22 @@
 
     <h1>Credits</h1>
 
+    <p>
+      Thanks to all <a href="https://github.com/ajayyy/SponsorBlock/graphs/contributors">SponsorBlock contributors</a>,
+      <a href="https://github.com/ajayyy/SponsorBlockServer/graphs/contributors">SponsorBlockServer contributors</a> and
+      <a href="https://github.com/ajayyy/SponsorBlockSite/graphs/contributors">SponsorBlockSite contributors</a> such 
+      as <a href="https://github.com/NDevTK">NDev</a>, <a href="https://github.com/Joe-Dowd">Joe Dowd</a>,
+      <a href="https://github.com/bershanskiy">Anton Bershanskiy</a> and more.
+    </p>
+
     <p>The awesome <a href="https://github.com/omarroth/invidious/wiki/API">Invidious API</a> is used to grab the time the video was published.</p>
 
     <p>Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
     
     <p>Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
 
+    <p style="text-align: center;"><a href="/oss-attribution/attribution.txt">Open Source Licenses</a></p>
+
   </div>
 
 </body>

public/options/options.css

@@ -350,4 +350,7 @@ svg {
 
 .categoryColorTextBox {
     width: 60px;
+
+    background: none;
+    border: none;
 }

public/popup.html

@@ -1,6 +1,5 @@
 <html>
   <head>
-    <title>__MSG_openPopup__</title>
     <link id="sponsorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
     <link id="sponsorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
   </head>
@@ -38,6 +37,8 @@
             <sub class="popupElement">__MSG_popupHint__</sub>
 
             <div id="submissionSection"  class="popupElement" style="display: none">
+              <br/>
+
               <b>Sponsor Editing has been moved and will appear after you click submit</b>
 
               <br/>

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