Merge pull request #265 from ajayyy/typescript

Issue fixing
2026-01-27 21:01:00 +03:00 · 2020-02-08 22:44:47 -05:00
parent ceae02426d 6159605afd
commit cd5adc1b82
8 changed files with 95 additions and 41 deletions
--- a/manifest/manifest.json
+++ b/manifest/manifest.json
@@ -36,7 +36,8 @@
        "icons/close.png",
        "icons/PlayerInfoIconSponsorBlocker256px.png",
        "icons/PlayerDeleteIconSponsorBlocker256px.png",
-        "popup.html"
+        "popup.html",
+        "content.css"
    ],
    "permissions": [
        "storage",
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -396,6 +396,12 @@
    "shortCheck": {
        "message": "The following submission is shorter than your minimum duration option. This could mean that this is already submitted, and just being ignored due to this option. Are you sure you would like to submit?"
    },
+    "showUploadButton": {
+        "message": "Show Upload Button"
+    },
+    "whatUploadButton": {
+        "message": "This button appears on the YouTube player after you have selected a timestamp and are ready to submit."
+    },
    "customServerAddress": {
        "message": "SponsorBlock Server Address"
    },
--- a/public/help/index_en.html
+++ b/public/help/index_en.html
@@ -19,7 +19,7 @@
    <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. Please join the Discord if you have any questions or suggestions.
+        Thanks for installing SponsorBlock. Here are some quick tips for getting started. Feel free to contact me if you have any questions. 
    </p>

    <p class="projectPreview">
@@ -30,10 +30,13 @@
 	  Come contribute, make some suggestions and help out in the Discord: <a href="https://discord.gg/QnmVMpU">https://discord.gg/QnmVMpU</a>
    </p>

-    <a class="bigText" href="/options/options.html">Enable Invidious Support</a>
+    <div class="center">
+      <a class="bigText" href="/options/options.html">Enable optional features</a>
+    </div>

    <p>
-      Invidious is a third-party YouTube viewer. SponsorBlock now supports invidious along with YouTube. Please visit the options page to make sure everything is how you want it to be.
+      Some features, such as support for non third-party YouTube sites, are disabled by default and can be enabled in the options. These can be enabled or disabled at any time.
+      You can also hide/show all UI elements added to the YouTube page.
    </p>

    <h1>How skipping works</h1>
@@ -83,6 +86,7 @@

    <p>
      There are hotkeys if you want to use them. You must be focused on the YouTube player to use them. Press the semicolon key to indicate the start/end of a sponsor segment and click the appostrophe to submit.
+      These can be changed in the options. If you don't use QWERTY, you should probably change the keybinds.
    </p>

    <h1>I hate these buttons, they are so ugly</h1>
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -214,6 +214,23 @@
 			<br/>
 			<br/>
 	
+			<div option-type="toggle" toggle-type="reverse" sync-option="hideUploadButtonPlayerControls">
+				<label class="switch-container" label-name="__MSG_showUploadButton__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_whatUploadButton__</div>
+			</div>
+
+			<br/>
+			<br/>
+	
 			<div option-type="toggle" sync-option="autoUpvote">
 				<label class="switch-container" label-name="__MSG_enableAutoUpvote__">
 					<label class="switch">
--- a/public/popup.html
+++ b/public/popup.html
@@ -145,7 +145,7 @@
              <span id="sponsorTimesSkipsDoneDisplay" class="popupElement">
                0
              </span>
-              <span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span> (since December).
+              <span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span> (since February).
            </div>

            <div id="sponsorTimeSavedContainer"  class="popupElement" style="display: none">
@@ -153,7 +153,7 @@
              <span id="sponsorTimeSavedDisplay" class="popupElement">
                0
              </span>
-              <span id="sponsorTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span> (since December).
+              <span id="sponsorTimeSavedEndWord" class="popupElement">__MSG_minsLower__</span>.

              </br/>
              </br/>
--- a/src/config.ts
+++ b/src/config.ts
@@ -16,12 +16,13 @@ interface SBConfig {
    hideVideoPlayerControls: boolean,
    hideInfoButtonPlayerControls: boolean,
    hideDeleteButtonPlayerControls: boolean,
+    hideUploadButtonPlayerControls: boolean,
    hideDiscordLaunches: number,
    hideDiscordLink: boolean,
    invidiousInstances: string[],
    invidiousUpdateInfoShowCount: number,
    autoUpvote: boolean,
-    supportInvidious: false,
+    supportInvidious: boolean,
    serverAddress: string,
    minDuration: number
 }
@@ -110,6 +111,7 @@ var Config: SBObject = {
        hideVideoPlayerControls: false,
        hideInfoButtonPlayerControls: false,
        hideDeleteButtonPlayerControls: false,
+        hideUploadButtonPlayerControls: false,
        hideDiscordLaunches: 0,
        hideDiscordLink: false,
        invidiousInstances: ["invidio.us", "invidiou.sh", "invidious.snopyta.org"],
@@ -229,7 +231,7 @@ function resetConfig() {
 };

 function convertJSON() {
-    Object.keys(Config.defaults).forEach(key => {
+    Object.keys(Config.localConfig).forEach(key => {
        Config.localConfig[key] = decodeStoredItem(key, Config.localConfig[key]);
    });
 }
--- a/src/content.ts
+++ b/src/content.ts
@@ -8,12 +8,15 @@ import runThePopup from "./popup";
 import PreviewBar from "./js-components/previewBar";
 import SkipNotice from "./js-components/skipNotice";

+// Hack to get the CSS loaded on permission-based sites (Invidious)
+utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
+
 //was sponsor data found when doing SponsorsLookup
 var sponsorDataFound = false;
 var previousVideoID = null;
 //the actual sponsorTimes if loaded and UUIDs associated with them
 var sponsorTimes = null;
-var UUIDs = null;
+var UUIDs = [];
 //what video id are these sponsors for
 var sponsorVideoID = null;

@@ -215,7 +218,7 @@ function resetValues() {

    //reset sponsor times
    sponsorTimes = null;
-    UUIDs = null;
+    UUIDs = [];
    sponsorLookupRetries = 0;

    //empty the preview bar
@@ -629,7 +632,7 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
    }

    lastSponsorTimeSkipped = sponsorTimes[index][0];
-  
+
    let currentUUID =  UUIDs[index];
    lastSponsorTimeSkippedUUID = currentUUID; 

@@ -643,17 +646,18 @@ function skipToTime(v, index, sponsorTimes, openNotice) {
                vote(1, currentUUID, null);
            }
        }
-    }

-    //send telemetry that a this sponsor was skipped
-    if (Config.config.trackViewCount && !sponsorSkipped[index]) {
-        utils.sendRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);
+        //send telemetry that a this sponsor was skipped
+        if (Config.config.trackViewCount && !sponsorSkipped[index]) {
+            utils.sendRequestToServer("POST", "/api/viewedVideoSponsorTime?UUID=" + currentUUID);

-        if (!Config.config.disableAutoSkip) {
-            // Count this as a skip
-            Config.config.minutesSaved = Config.config.minutesSaved + (sponsorTimes[index][1] - sponsorTimes[index][0]) / 60;
-            Config.config.skipCount = Config.config.skipCount + 1;
-            sponsorSkipped[index] = true;
+            if (!Config.config.disableAutoSkip) {
+                // Count this as a skip
+                Config.config.minutesSaved = Config.config.minutesSaved + (sponsorTimes[index][1] - sponsorTimes[index][0]) / 60;
+                Config.config.skipCount = Config.config.skipCount + 1;
+
+                sponsorSkipped[index] = true;
+            }
        }
    }
 }
@@ -803,7 +807,7 @@ async function changeStartSponsorButton(showStartSponsor, uploadButtonVisible) {
        (<HTMLImageElement> document.getElementById("startSponsorImage")).src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png");
        document.getElementById("startSponsorButton").setAttribute("title", chrome.i18n.getMessage("sponsorStart"));

-        if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible && !Config.config.hideInfoButtonPlayerControls) {
+        if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible && !Config.config.hideUploadButtonPlayerControls) {
            document.getElementById("submitButton").style.display = "unset";
        } else if (!uploadButtonVisible) {
            //disable submit button
@@ -937,12 +941,10 @@ function vote(type, UUID, skipNotice) {
            sponsorSkipped[sponsorIndex] = false;
        }

-            // Count this as a skip
-            Config.config.minutesSaved = Config.config.minutesSaved + factor * (sponsorTimes[sponsorIndex][1] - sponsorTimes[sponsorIndex][0]) / 60;
-		
-            Config.config.skipCount = 0;
-
-            Config.config.skipCount = Config.config.skipCount + factor * 1;
+        // Count this as a skip
+        Config.config.minutesSaved = Config.config.minutesSaved + factor * (sponsorTimes[sponsorIndex][1] - sponsorTimes[sponsorIndex][0]) / 60;
+    
+        Config.config.skipCount = Config.config.skipCount + factor;
    }
 
    chrome.runtime.sendMessage({
@@ -1119,6 +1121,27 @@ function getSponsorTimesMessage(sponsorTimes) {
    return sponsorTimesMessage;
 }

+/**
+ * Adds the CSS to the page if needed. Required on optional sites with Chrome.
+ */
+function addCSS() {
+    if (!utils.isFirefox() && Config.config.invidiousInstances.includes(new URL(document.URL).host)) {
+        window.addEventListener("DOMContentLoaded", () => {
+            let head = document.getElementsByTagName("head")[0];
+
+            for (const file of utils.css) {
+                let fileref = document.createElement("link");
+
+                fileref.rel = "stylesheet";
+                fileref.type = "text/css";
+                fileref.href = chrome.extension.getURL(file);
+
+                head.appendChild(fileref);
+            }
+        });
+    }
+}
+
 //converts time in seconds to minutes:seconds
 function getFormattedTime(seconds) {
    let minutes = Math.floor(seconds / 60);
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -5,6 +5,17 @@ class Utils {
    // Contains functions needed from the background script
    backgroundScriptContainer: any = null;

+    // Used to add content scripts and CSS required
+    js = [
+        "./js/vendor.js",
+        "./js/content.js"
+    ];
+    css = [
+        "content.css",
+        "./libs/Source+Sans+Pro.css",
+        "popup.css"
+    ];
+
    constructor(backgroundScriptContainer?: any) {
        this.backgroundScriptContainer = backgroundScriptContainer;
    }
@@ -66,25 +77,15 @@ class Utils {
     * For now, it is just SB.config.invidiousInstances.
     */
    setupExtraSiteContentScripts() {
-        let js = [
-            "./js/vendor.js",
-            "./js/content.js"
-        ];
-        let css = [
-            "content.css",
-            "./libs/Source+Sans+Pro.css",
-            "popup.css"
-        ];
-
        let self = this;

        if (this.isFirefox()) {
            let firefoxJS = [];
-            for (const file of js) {
+            for (const file of this.js) {
                firefoxJS.push({file});
            }
            let firefoxCSS = [];
-            for (const file of css) {
+            for (const file of this.css) {
                firefoxCSS.push({file});
            }

@@ -118,8 +119,8 @@ class Utils {
                    // This API is experimental and not visible by the TypeScript compiler
                    actions: [new (<any> chrome.declarativeContent).RequestContentScript({
                        allFrames: true,
-                        js,
-                        css
+                        js: self.js,
+                        css: self.css
                    })]
                };