Merge pull request #401 from ajayyy/react

Improvements

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "2.0.3",
+    "version": "2.0.4",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "content_scripts": [{

public/_locales/en/messages.json

@@ -571,6 +571,12 @@
     "moreCategories": {
         "message": "More Categories"
     },
+    "chooseACategory": {
+        "message": "Choose a Category"
+    },
+    "youMustSelectACategory": {
+        "message": "You must select a category for all segments you are submitting!"
+    },
     "bracketEnd": {
         "message": "(End)"
     },

public/content.css

@@ -140,6 +140,7 @@
 	color: rgb(235, 235, 235);
 	border: none;
 	display: inline-block;
+	font-size: 13.3333px !important;
 
 	cursor: pointer;
 
@@ -179,6 +180,7 @@
 .sponsorSkipNoticeCloseButton {
 	height: 10px;
 	width: 10px;
+	box-sizing: unset;
 	
 	padding: 2px 5px;
 

src/components/SponsorTimeEditComponent.tsx

@@ -230,7 +230,12 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
     }
 
     getCategoryOptions() {
-        let elements = [];
+        let elements = [(
+            <option value={"chooseACategory"}
+                    key={"chooseACategory"}>
+                {chrome.i18n.getMessage("chooseACategory")}
+            </option>
+        )];
 
         for (const category of Config.config.categorySelections) {
             elements.push(

src/components/SubmissionNoticeComponent.tsx

@@ -167,9 +167,16 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
             ref.current.saveEditTimes();
         }
 
+        let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
+        for (const sponsorTime of sponsorTimesSubmitting) {
+            if (sponsorTime.category === "chooseACategory") {
+                alert(chrome.i18n.getMessage("youMustSelectACategory"));
+                return;
+            }
+        }
+
         // Check if any non music categories are being used on a music video
         if (this.contentContainer().videoInfo?.microformat?.playerMicroformatRenderer?.category === "Music") {
-            let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
             for (const sponsorTime of sponsorTimesSubmitting) {
                 if (!sponsorTime.category.startsWith("music_")) {
                     if (!confirm(chrome.i18n.getMessage("nonMusicCategoryOnMusic"))) return;

src/config.ts

@@ -8,6 +8,7 @@ interface SBConfig {
     userID: string,
     // sponsorTimes: SBMap<string, SponsorTime[]>,
     segmentTimes: SBMap<string, SponsorTime[]>,
+    defaultCategory: string,
     whitelistedChannels: string[],
     forceChannelCheck: boolean,
     startSponsorKeybind: string,
@@ -40,6 +41,7 @@ interface SBConfig {
 
     // Preview bar
     barTypes: {
+        "preview-chooseACategory": PreviewBarOption,
         "sponsor": PreviewBarOption,
         "preview-sponsor": PreviewBarOption,
         "intro": PreviewBarOption,
@@ -109,7 +111,15 @@ class SBMap<T, U> extends Map {
     delete(key) {
         const result = super.delete(key);
 
-	    this.update();
+        // Make sure there are no empty elements
+        for (const entry of this.entries()) {
+            if (entry[1].length === 0) {
+                super.delete(entry[0]);
+            }
+        }
+
+        this.update();
+
         return result;
     }
 
@@ -129,6 +139,7 @@ var Config: SBObject = {
     defaults: {
         userID: null,
         segmentTimes: new SBMap("segmentTimes"),
+        defaultCategory: "chooseACategory",
         whitelistedChannels: [],
         forceChannelCheck: false,
         startSponsorKeybind: ";",
@@ -163,6 +174,10 @@ var Config: SBObject = {
 
         // Preview bar
         barTypes: {
+            "preview-chooseACategory": {
+                color: "#ffffff",
+                opacity: "0.7"
+            },
             "sponsor": {
                 color: "#00d400",
                 opacity: "0.7"

src/content.ts

@@ -418,7 +418,7 @@ function createPreviewBar(): void {
         const el = document.querySelectorAll(selector);
 
         if (el && el.length && el[0]) {
-            previewBar = new PreviewBar(el[0], onMobileYouTube);
+            previewBar = new PreviewBar(el[0], onMobileYouTube, onInvidious);
             
             updatePreviewBar();
 
@@ -1011,8 +1011,6 @@ function unskipSponsorTime(segment: SponsorTime) {
     if (sponsorTimes != null) {
         //add a tiny bit of time to make sure it is not skipped again
         video.currentTime = segment.segment[0] + 0.001;
-
-        checkIfInsideSegment();
     }
 }
 
@@ -1020,16 +1018,6 @@ function reskipSponsorTime(segment: SponsorTime) {
     video.currentTime = segment.segment[1];
 }
 
-/**
- * Checks if currently inside a segment and will trigger 
- * a skip schedule if true.
- * 
- * This is used for when a manual skip is finished or a reskip is complete
- */
-function checkIfInsideSegment() {
-    // for
-}
-
 function createButton(baseID, title, callback, imageName, isDraggable=false): boolean {
     if (document.getElementById(baseID + "Button") != null) return false;
 
@@ -1038,18 +1026,10 @@ function createButton(baseID, title, callback, imageName, isDraggable=false): bo
     newButton.draggable = isDraggable;
     newButton.id = baseID + "Button";
     newButton.classList.add("playerButton");
-    if (!onMobileYouTube) {
+    newButton.classList.add("ytp-button");
-        newButton.classList.add("ytp-button");
-    } else {
-        newButton.classList.add("icon-button");
-        newButton.style.padding = "0";
-    }
     newButton.setAttribute("title", chrome.i18n.getMessage(title));
     newButton.addEventListener("click", (event: Event) => {
         callback();
-
-        // Prevents the contols from closing when clicked
-        if (onMobileYouTube) event.stopPropagation();
     });
 
     // Image HTML
@@ -1091,6 +1071,8 @@ function getControls(): HTMLElement | boolean {
 
 //adds all the player controls buttons
 async function createButtons(): Promise<boolean> {
+    if (onMobileYouTube) return;
+
     let result = await utils.wait(getControls).catch();
 
     //set global controls variable
@@ -1168,8 +1150,7 @@ function startSponsorClicked() {
         sponsorTimesSubmitting.push({
             segment: [getRealCurrentTime()],
             UUID: null,
-            // Default to sponsor
+            category: Config.config.defaultCategory
-            category: "sponsor"
         });
     }
 
@@ -1217,9 +1198,9 @@ 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.hideUploadButtonPlayerControls) {
+        if (document.getElementById("startSponsorImage").style.display != "none" && uploadButtonVisible && !Config.config.hideUploadButtonPlayerControls && !onInvidious) {
             document.getElementById("submitButton").style.display = "unset";
-        } else if (!uploadButtonVisible) {
+        } else if (!uploadButtonVisible || onInvidious) {
             //disable submit button
             document.getElementById("submitButton").style.display = "none";
         }
@@ -1592,6 +1573,8 @@ function updateAdFlag() {
 }
 
 function showTimeWithoutSkips(allSponsorTimes): void {
+    if (onMobileYouTube || onInvidious) return;
+
 	let skipDuration = 0;
 	
 	// Calculate skipDuration based from the segments in the preview bar
@@ -1605,7 +1588,7 @@ function showTimeWithoutSkips(allSponsorTimes): void {
 	
 	// YouTube player time display
 	let display = document.getElementsByClassName("ytp-time-display notranslate")[0];
-	if (display === undefined) return
+	if (!display) return;
 	
     let formatedTime = utils.getFormattedTime(video.duration - skipDuration);
 	

src/js-components/previewBar.ts

@@ -13,16 +13,18 @@ class PreviewBar {
 	container: HTMLUListElement;
 	parent: any;
 	onMobileYouTube: boolean;
+	onInvidious: boolean;
 
 	timestamps: number[][];
 	types: string;
 
-	constructor(parent, onMobileYouTube) {
+	constructor(parent, onMobileYouTube, onInvidious) {
 		this.container = document.createElement('ul');
 		this.container.id = 'previewbar';
 		this.parent = parent;
 
 		this.onMobileYouTube = onMobileYouTube;
+		this.onInvidious = onInvidious;
 
 		this.updatePosition(parent);
 
@@ -30,6 +32,8 @@ class PreviewBar {
 	}
 
 	setupHoverText() {
+		if (this.onMobileYouTube || this.onInvidious) return;
+
 		let seekBar = document.querySelector(".ytp-progress-bar-container");
 
 		// Create label placeholder

src/popup.ts

@@ -338,7 +338,7 @@ async function runThePopup(messageListener?: MessageListener) {
         if (sponsorTimes[sponsorTimesIndex] == undefined) {
             sponsorTimes[sponsorTimesIndex] = {
                 segment: [],
-                category: "sponsor",
+                category: Config.config.defaultCategory,
                 UUID: null
             };
         }

src/utils.ts

@@ -331,9 +331,10 @@ class Utils {
         return seconds % 60;
     }
 
-    getFormattedTime(seconds: number, precise?: boolean) {
+    getFormattedTime(seconds: number, precise?: boolean): string {
-        let minutes = Math.floor(seconds / 60);
+        let hours = Math.floor(seconds / 60 / 60);
-        let secondsNum: number = seconds - minutes * 60;
+        let minutes = Math.floor(seconds / 60) % 60;
+        let secondsNum = seconds % 60;
         if (!precise) {
             secondsNum = Math.floor(secondsNum);
         }
@@ -345,7 +346,7 @@ class Utils {
             secondsDisplay = "0" + secondsDisplay;
         }
 
-        let formatted = minutes + ":" + secondsDisplay;
+        let formatted = (hours ? hours + ":" : "") + minutes + ":" + secondsDisplay;
 
         return formatted;
     }