aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay <[email protected]>2022-01-06 20:08:12 -0500
committerAjay <[email protected]>2022-01-06 20:08:12 -0500
commite9b217c6858bb217731e28caf980e630fd2e892f (patch)
treea29f709dc66e5dd2e858f1d6643d0b4925988263
parent2db35a624a59b96c7c6c7cfca59b819ad772283c (diff)
downloadSponsorBlock-e9b217c6858bb217731e28caf980e630fd2e892f.tar.gz
SponsorBlock-e9b217c6858bb217731e28caf980e630fd2e892f.zip
Add tooltip about full video update
-rw-r--r--public/_locales/en/messages.json4
-rw-r--r--public/content.css6
-rw-r--r--src/background.ts3
-rw-r--r--src/config.ts2
-rw-r--r--src/render/CategoryPill.tsx22
-rw-r--r--src/render/Tooltip.tsx8
6 files changed, 39 insertions, 6 deletions
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index ac7cbe09..a6bd1ca0 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -849,8 +849,8 @@
"SponsorTimeEditScrollNewFeature": {
"message": "Use your mousewheel while hovering over the edit box to quickly adjust the time. Combinations of the ctrl or shift key can be used to fine tune the changes."
},
- "fillerNewFeature": {
- "message": "New! Skip tangents and jokes with the filler category. Enable in options"
+ "categoryPillNewFeature": {
+ "message": "New! See when a video is entirely sponsored or self-promotion"
},
"dayAbbreviation": {
"message": "d",
diff --git a/public/content.css b/public/content.css
index bfcd4f30..4c15212e 100644
--- a/public/content.css
+++ b/public/content.css
@@ -586,6 +586,12 @@ input::-webkit-inner-spin-button {
max-width: 300px;
white-space: normal;
line-height: 1.5em;
+ color: white;
+ font-size: 12px;
+}
+
+.sponsorBlockTooltip a {
+ color: white;
}
.sponsorBlockTooltip::after {
diff --git a/src/background.ts b/src/background.ts
index 2d5ffe8e..5a7bacd5 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -80,6 +80,9 @@ chrome.runtime.onInstalled.addListener(function () {
const newUserID = utils.generateUserID();
//save this UUID
Config.config.userID = newUserID;
+
+ // Don't show update notification
+ Config.config.categoryPillUpdate = true;
}
}, 1500);
});
diff --git a/src/config.ts b/src/config.ts
index ae6f45aa..e2a4a4d0 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -53,6 +53,7 @@ interface SBConfig {
locked: string
},
scrollToEditTimeUpdate: boolean,
+ categoryPillUpdate: boolean,
// What categories should be skipped
categorySelections: CategorySelection[],
@@ -205,6 +206,7 @@ const Config: SBObject = {
autoHideInfoButton: true,
autoSkipOnMusicVideos: false,
scrollToEditTimeUpdate: false, // false means the tooltip will be shown
+ categoryPillUpdate: false,
categorySelections: [{
name: "sponsor" as Category,
diff --git a/src/render/CategoryPill.tsx b/src/render/CategoryPill.tsx
index d3530c38..fc20c6db 100644
--- a/src/render/CategoryPill.tsx
+++ b/src/render/CategoryPill.tsx
@@ -1,9 +1,11 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import CategoryPillComponent, { CategoryPillState } from "../components/CategoryPillComponent";
+import Config from "../config";
import { VoteResponse } from "../messageTypes";
import { Category, SegmentUUID, SponsorTime } from "../types";
import { GenericUtils } from "../utils/genericUtils";
+import { Tooltip } from "./Tooltip";
export class CategoryPill {
container: HTMLElement;
@@ -79,7 +81,7 @@ export class CategoryPill {
}
}
- setSegment(segment: SponsorTime): void {
+ async setSegment(segment: SponsorTime): Promise<void> {
if (this.ref.current?.state?.segment !== segment) {
const newState = {
segment,
@@ -92,7 +94,23 @@ export class CategoryPill {
} else {
this.unsavedState = newState;
}
+
+ if (!Config.config.categoryPillUpdate) {
+ Config.config.categoryPillUpdate = true;
+
+ const watchDiv = await GenericUtils.wait(() => document.querySelector("#info.ytd-watch-flexy") as HTMLElement);
+ if (watchDiv) {
+ new Tooltip({
+ text: chrome.i18n.getMessage("categoryPillNewFeature"),
+ link: "https://blog.ajay.app/full-video-sponsorblock",
+ referenceNode: watchDiv,
+ prependElement: watchDiv.firstChild as HTMLElement,
+ bottomOffset: "-10px",
+ opacity: 0.95,
+ timeout: 50000
+ });
+ }
+ }
}
-
}
} \ No newline at end of file
diff --git a/src/render/Tooltip.tsx b/src/render/Tooltip.tsx
index 7bb2e1f3..3fe14410 100644
--- a/src/render/Tooltip.tsx
+++ b/src/render/Tooltip.tsx
@@ -8,6 +8,7 @@ export interface TooltipProps {
prependElement?: HTMLElement, // Element to append before
bottomOffset?: string
timeout?: number;
+ opacity?: number;
}
export class Tooltip {
@@ -18,11 +19,12 @@ export class Tooltip {
constructor(props: TooltipProps) {
props.bottomOffset ??= "70px";
+ props.opacity ??= 0.7;
this.text = props.text;
this.container = document.createElement('div');
this.container.id = "sponsorTooltip" + props.text;
- this.container.style.display = "relative";
+ this.container.style.position = "relative";
if (props.prependElement) {
props.referenceNode.insertBefore(this.container, props.prependElement);
@@ -34,8 +36,10 @@ export class Tooltip {
this.timer = setTimeout(() => this.close(), props.timeout * 1000);
}
+ const backgroundColor = `rgba(28, 28, 28, ${props.opacity})`;
+
ReactDOM.render(
- <div style={{bottom: props.bottomOffset}}
+ <div style={{bottom: props.bottomOffset, backgroundColor}}
className="sponsorBlockTooltip" >
<div>
<img className="sponsorSkipLogo sponsorSkipObject"