Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-13 15:07:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #896 from ajayyy/improvements

Browse Source 
More highlight improvements
This commit is contained in:
Ajay Ramachandran
2021-08-20 03:57:27 -04:00
committed by GitHub
parent 12f41521f5 d089e43b8a
commit 032264d8bb
20 changed files with 364 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
public/_locales/en/messages.json
View File

@@ -19,7 +19,7 @@
"channelWhitelisted": { "channelWhitelisted": {
"message": "Channel Whitelisted!" "message": "Channel Whitelisted!"
}, },
"Segment": { "Segment": {
"message": "segment" "message": "segment"
}, },
"Segments": { "Segments": {
@@ -711,6 +711,10 @@
"help": { "help": {
"message": "Help" "message": "Help"
}, },
"GotIt": {
"message": "Got it",
"description": "Used as the button to dismiss a tooltip"
},
"experiementOptOut": { "experiementOptOut": {
"message": "Opt-out of all future experiments", "message": "Opt-out of all future experiments",
"description": "This is used in a popup about a new experiment to get a list of unlisted videos to back up since all unlisted videos uploaded before 2017 will be set to private." "description": "This is used in a popup about a new experiment to get a list of unlisted videos to back up since all unlisted videos uploaded before 2017 will be set to private."
@@ -724,5 +728,74 @@
"voteRejectedWarning": { "voteRejectedWarning": {
"message": "Vote rejected due to a warning. Click to open a chat to resolve it, or come back later when you have time.", "message": "Vote rejected due to a warning. Click to open a chat to resolve it, or come back later when you have time.",
"description": "This is an integrated chat panel that will appearing allowing them to talk to the Discord/Matrix chat without leaving their browser." "description": "This is an integrated chat panel that will appearing allowing them to talk to the Discord/Matrix chat without leaving their browser."
},
"Donate": {
"message": "Donate"
},
"hideDonationLink": {
"message": "Hide Donation Link"
},
"helpPageThanksForInstalling": {
"message": "Thanks for installing SponsorBlock."
},
"helpPageReviewOptions": {
"message": "Please review the options below"
},
"helpPageFeatureDisclaimer": {
"message": "Many features are disabled by default. If you want to skip intros, outros, use Invidious, etc., enable them below. You can also hide/show UI elements."
},
"helpPageHowSkippingWorks": {
"message": "How skipping works"
},
"helpPageHowSkippingWorks1": {
"message": "Video segments will automatically be skipped if they are found in the database. You can open the popup by clicking the extension icon to get a preview of what they are."
},
"helpPageHowSkippingWorks2": {
"message": "Whenever you skip a segment, you will get notice. If the timing seems wrong vote down by clicking downvote! You can also vote in the popup."
},
"Submitting": {
"message": "Submitting"
},
"helpPageSubmitting1": {
"message": "Submitting can either be done in the popup by hitting the \"Segment Starts Now\" button or in the video player with the buttons on the player."
},
"helpPageSubmitting2": {
"message": "Clicking the play button indicated the start of a segment and clicking the stop icon indicates the end. You can prepare multiple sponsors before hitting submit. Clicking the upload button will submit. Clicking the garbage can will delete."
},
"Editing": {
"message": "Editing"
},
"helpPageEditing1": {
"message": "If you messed up, you can edit or delete your segments after clicking the up arrow button."
},
"helpPageTooSlow": {
"message": "This is too slow"
},
"helpPageTooSlow1": {
"message": "There are hotkeys if you want to use them. Press the semicolon key to indicate the start/end of a sponsor segment and click the apostrophe to submit. These can be changed in the options. If you don't use QWERTY, you should probably change the keybinding."
},
"helpPageCopyOfDatabase": {
"message": "Can I get a copy of the Database? What happens if you disappear?"
},
"helpPageCopyOfDatabase1": {
"message": "The database is public and available at"
},
"helpPageCopyOfDatabase2": {
"message": "The source code is freely available. So, even if something happens to me, your submissions are not lost."
},
"helpPageNews": {
"message": "News and how it is made"
},
"helpPageSourceCode": {
"message": "Where can I get the source code?"
},
"Credits": {
"message": "Credits"
},
"highlightNewFeature": {
"message": "New! Get to the point of the video with one click with the new highlight category"
},
"LearnMore": {
"message": "Learn More"
} }
} }

21
public/content.css
View File

@@ -518,4 +518,25 @@ input::-webkit-inner-spin-button {
bottom: 0px; bottom: 0px;
display: block; display: block;
margin: auto; margin: auto;
}
.sponsorBlockTooltip {
position: absolute;
background-color: rgba(28, 28, 28, 0.7);
border-radius: 5px;
padding: 10px;
max-width: 300px;
white-space: normal;
line-height: 1.5em;
}
.sponsorBlockTooltip::after {
content: " ";
position: absolute;
top: 100%;
left: 15%;
margin-left: -15px;
border-width: 15px;
border-style: solid;
border-color: rgba(28, 28, 28, 0.7) transparent transparent transparent;
} }

BIN
public/help/images/popup.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
public/help/images/voting on notice.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

55
public/help/index_en.html → public/help/index.html
View File

@@ -5,6 +5,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link href="styles.css" rel="stylesheet"/> <link href="styles.css" rel="stylesheet"/>
<script src="../js/vendor.js"></script>
<script src="../js/help.js"></script>
</head> </head>
<body> <body>
@@ -14,90 +17,92 @@
SponsorBlock SponsorBlock
</div> </div>
<div class="container"> <div class="container sponsorBlockPageBody">
<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 class="createdBy">
<img src="https://ajay.app/newprofilepic.jpg" height="30" class="profilepiccircle"/>
Created By <a href="https://ajay.app">Ajay Ramachandran</a>
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(Donate)</a>
</p>
<p> <p>
Thanks for installing SponsorBlock. By using this extension, you agree to the <a href="https://gist.github.com/ajayyy/aa9f8ded2b573d4f73a3ffa0ef74f796">Privacy Policy</a> and <a href="https://gist.github.com/ajayyy/9e8100f069348e0bc062641f34d6af12">Terms of Use</a>. __MSG_helpPageThanksForInstalling__ By using this extension, you agree to the <a href="https://gist.github.com/ajayyy/aa9f8ded2b573d4f73a3ffa0ef74f796">Privacy Policy</a> and <a href="https://gist.github.com/ajayyy/9e8100f069348e0bc062641f34d6af12">Terms of Use</a>.
</p> </p>
<p> <p>
Come contribute, make some suggestions and help out on <a href="https://discord.gg/QnmVMpU">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>. Come contribute, make some suggestions and help out on <a href="https://discord.gg/QnmVMpU">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>.
</p> </p>
<p style="margin-bottom: 0; margin-top: 0" class="bigText center">Please review the options below</p> <p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
<p class="smallText"> <p class="smallText">
Many features are disabled by default. If you want to skip intros, outros, use Invidious, etc., enable them below. __MSG_helpPageFeatureDisclaimer__
You can also hide/show UI elements.
</p> </p>
<iframe src="../options/options.html#embed" width="100%" height="500px" style="border: none"></iframe> <iframe src="../options/options.html#embed" width="100%" height="500px" style="border: none"></iframe>
<h1>How skipping works</h1> <h1>__MSG_helpPageHowSkippingWorks__</h1>
<p class="projectPreview"> <p class="projectPreview">
<span class="projectPreviewImageLarge"> <span class="projectPreviewImageLarge">
<img src="https://i.imgur.com/caf5Bju.png"> <img src="images/popup.png">
</span> </span>
Video segments will automatically be skipped if they are found in the database. You can open the popup by clicking the extension icon to get a preview of what they are. __MSG_helpPageHowSkippingWorks1__
<br/> <br/>
<br/> <br/>
Whenever you skip a segment, you will get notice. If the timing seems wrong vote down by clicking downvote! You can also vote in the popup. __MSG_helpPageHowSkippingWorks2__
</p> </p>
<div class="center"><img height="120px" src="https://user-images.githubusercontent.com/12688112/63067735-5a638700-bede-11e9-8147-f321b57527ec.gif"></div> <div class="center"><img height="120px" src="images/voting on notice.gif"></div>
<h1>Submitting</h1> <h1>__MSG_Submitting__</h1>
<p class="projectPreview"> <p class="projectPreview">
<span class="projectPreviewImageLargeRight"> <span class="projectPreviewImageLargeRight">
<img src="https://i.imgur.com/A1ilk6x.gif"> <img src="https://i.imgur.com/A1ilk6x.gif">
</span> </span>
Submitting can either be done in the popup by hitting the "Segment Starts Now" button or in the video player with the buttons on the player. __MSG_helpPageSubmitting1__
<br/> <br/>
<br/> <br/>
Clicking the play button indicated the start of a segment and clicking the stop icon indicates the end. You can prepare multiple sponsors before hitting submit. Clicking the upload button will submit. Clicking the garbage can will delete. __MSG_helpPageSubmitting2__
</p> </p>
<h1>Editing</h1> <h1>__MSG_Editing__</h1>
<p class="projectPreview"> <p class="projectPreview">
<span class="projectPreviewImageLarge"> <span class="projectPreviewImageLarge">
<img src="https://i.imgur.com/DZHqbsx.gif"> <img src="https://wiki.sponsor.ajay.app/images/6/6a/Popup_only.png">
</span> </span>
If you messed up, you can edit or delete your segments in the popup or in the info menu (by hitting the info icon). __MSG_helpPageEditing1__
</p> </p>
<h1>This is too slow</h1> <h1>__MSG_helpPageTooSlow__</h1>
<p> <p>
There are hotkeys if you want to use them. Press the semicolon key to indicate the start/end of a sponsor segment and click the apostrophe to submit. __MSG_helpPageTooSlow1__
These can be changed in the options. If you don't use QWERTY, you should probably change the keybinding.
</p> </p>
<h1>Can I get a copy of the Database? What happens if you disappear?</h1> <h1>__MSG_helpPageCopyOfDatabase__</h1>
<p> <p>
The database is public and available at <a href="https://sponsor.ajay.app/database">https://sponsor.ajay.app/database</a>. The source code is freely available. So, even if something happens to me, your submissions are not lost. __MSG_helpPageCopyOfDatabase1__ <a href="https://sponsor.ajay.app/database">https://sponsor.ajay.app/database</a>. __MSG_helpPageCopyOfDatabase2__
</p> </p>
<h1>News and how it is made</h1> <h1>__MSG_helpPageNews__</h1>
<p> <p>
See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>. See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
</p> </p>
<h1>Where can I get the source code?</h1> <h1>__MSG_helpPageSourceCode__</h1>
<h4 style="display: inline">Client:</h4> <h4 style="display: inline">Client:</h4>
<!-- Github logo --> <!-- Github logo -->
@@ -107,7 +112,7 @@
<!-- Github logo --> <!-- Github logo -->
<a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a> <a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
<h1>Credits</h1> <h1>__MSG_Credits__</h1>
<p> <p>
Thanks to all <a href="https://github.com/ajayyy/SponsorBlock/graphs/contributors">SponsorBlock contributors</a>, Thanks to all <a href="https://github.com/ajayyy/SponsorBlock/graphs/contributors">SponsorBlock contributors</a>,

4
public/help/styles.css
View File

@@ -183,4 +183,8 @@ h1,h2,h3,h4,h5,h6 {
svg { svg {
text-decoration: none; text-decoration: none;
}
#sbDonate {
font-size: 10px;
} }

4
public/options/options.css
View File

@@ -364,4 +364,8 @@ svg {
background: none; background: none;
border: none; border: none;
}
#sbDonate {
font-size: 10px;
} }

25
public/options/options.html
View File

@@ -19,7 +19,12 @@
</div> </div>
<div class="center"> <div class="center">
<p class="createdBy titleBar">__MSG_createdBy__ <a href="https://ajay.app">Ajay Ramachandran</a> <img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle"/></p> <p class="createdBy titleBar">
<img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle"/>
__MSG_createdBy__
<a href="https://ajay.app">Ajay Ramachandran</a>
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(__MSG_Donate__)</a>
</p>
<h1>__MSG_Options__</h1> <h1>__MSG_Options__</h1>
@@ -451,6 +456,24 @@
<br/> <br/>
<br/> <br/>
<div option-type="toggle" toggle-type="reverse" sync-option="showDonationLink" no-safari="true">
<label class="switch-container">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<div class="switch-label">
__MSG_hideDonationLink__
</div>
</label>
</div>
<br/>
<br/>
<br/>
<br/>
<div option-type="private-text-change" sync-option="userID" confirm-message="userIDChangeWarning"> <div option-type="private-text-change" sync-option="userID" confirm-message="userIDChangeWarning">
<div class="option-button trigger-button"> <div class="option-button trigger-button">

6
src/background.ts
View File

@@ -35,7 +35,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
chrome.tabs.create({url: chrome.runtime.getURL('options/options.html' + (request.hash ? '#' + request.hash : ''))}); chrome.tabs.create({url: chrome.runtime.getURL('options/options.html' + (request.hash ? '#' + request.hash : ''))});
return; return;
case "openHelp": case "openHelp":
chrome.tabs.create({url: chrome.runtime.getURL('help/index_en.html')}); chrome.tabs.create({url: chrome.runtime.getURL('help/index.html')});
return; return;
case "openPage": case "openPage":
chrome.tabs.create({url: chrome.runtime.getURL(request.url)}); chrome.tabs.create({url: chrome.runtime.getURL(request.url)});
@@ -74,12 +74,14 @@ chrome.runtime.onInstalled.addListener(function () {
// If there is no userID, then it is the first install. // If there is no userID, then it is the first install.
if (!userID){ if (!userID){
//open up the install page //open up the install page
chrome.tabs.create({url: chrome.extension.getURL("/help/index_en.html")}); chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
//generate a userID //generate a userID
const newUserID = utils.generateUserID(); const newUserID = utils.generateUserID();
//save this UUID //save this UUID
Config.config.userID = newUserID; Config.config.userID = newUserID;
Config.config.highlightCategoryUpdate = false;
} }
}, 1500); }, 1500);
}); });

2
src/components/CategorySkipOptionsComponent.tsx
View File

@@ -151,8 +151,6 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
const optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"]; const optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
console.log(getCategoryActionType(this.props.category))
for (const optionName of optionNames) { for (const optionName of optionNames) {
elements.push( elements.push(
<option key={optionName} value={optionName}> <option key={optionName} value={optionName}>

4
src/config.ts
View File

@@ -38,8 +38,10 @@ interface SBConfig {
refetchWhenNotFound: boolean, refetchWhenNotFound: boolean,
ytInfoPermissionGranted: boolean, ytInfoPermissionGranted: boolean,
allowExpirements: boolean, allowExpirements: boolean,
showDonationLink: boolean,
autoHideInfoButton: boolean, autoHideInfoButton: boolean,
autoSkipOnMusicVideos: boolean, autoSkipOnMusicVideos: boolean,
highlightCategoryUpdate: boolean
// What categories should be skipped // What categories should be skipped
categorySelections: CategorySelection[], categorySelections: CategorySelection[],
@@ -181,8 +183,10 @@ const Config: SBObject = {
refetchWhenNotFound: true, refetchWhenNotFound: true,
ytInfoPermissionGranted: false, ytInfoPermissionGranted: false,
allowExpirements: true, allowExpirements: true,
showDonationLink: true,
autoHideInfoButton: true, autoHideInfoButton: true,
autoSkipOnMusicVideos: false, autoSkipOnMusicVideos: false,
highlightCategoryUpdate: false, // TODO: Remove this once update is done
categorySelections: [{ categorySelections: [{
name: "sponsor" as Category, name: "sponsor" as Category,

15
src/content.ts
View File

@@ -15,6 +15,7 @@ import { Message, MessageResponse } from "./messageTypes";
import * as Chat from "./js-components/chat"; import * as Chat from "./js-components/chat";
import { getCategoryActionType } from "./utils/categoryUtils"; import { getCategoryActionType } from "./utils/categoryUtils";
import { SkipButtonControlBar } from "./js-components/skipButtonControlBar"; import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
import { Tooltip } from "./render/Tooltip";
// Hack to get the CSS loaded on permission-based sites (Invidious) // Hack to get the CSS loaded on permission-based sites (Invidious)
utils.wait(() => Config.config !== null, 5000, 10).then(addCSS); utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
@@ -1104,7 +1105,19 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
if (!autoSkip if (!autoSkip
&& skippingSegments.length === 1 && skippingSegments.length === 1
&& getCategoryActionType(skippingSegments[0].category) === CategoryActionType.POI) { && getCategoryActionType(skippingSegments[0].category) === CategoryActionType.POI) {
skipButtonControlBar.enable(skippingSegments[0]); skipButtonControlBar.enable(skippingSegments[0], !Config.config.highlightCategoryUpdate ? 15 : 0);
if (!Config.config.highlightCategoryUpdate) {
new Tooltip({
text: chrome.i18n.getMessage("highlightNewFeature"),
link: "https://blog.ajay.app/highlight-sponsorblock",
referenceNode: skipButtonControlBar.getElement().parentElement,
prependElement: skipButtonControlBar.getElement(),
timeout: 15
});
Config.config.highlightCategoryUpdate = true;
}
activeSkipKeybindElement?.setShowKeybindHint(false); activeSkipKeybindElement?.setShowKeybindHint(false);
activeSkipKeybindElement = skipButtonControlBar; activeSkipKeybindElement = skipButtonControlBar;

17
src/help.ts Normal file
View File

@@ -0,0 +1,17 @@
import Config from "./config";
import { showDonationLink } from "./utils/configUtils";
import Utils from "./utils";
const utils = new Utils();
window.addEventListener('DOMContentLoaded', init);
async function init() {
utils.localizeHtmlPage();
await utils.wait(() => Config.config !== null);
if (!showDonationLink()) {
document.getElementById("sbDonate").style.display = "none";
}
}

10
src/js-components/skipButtonControlBar.ts
View File

@@ -18,6 +18,7 @@ export class SkipButtonControlBar {
showKeybindHint = true; showKeybindHint = true;
timeout: NodeJS.Timeout; timeout: NodeJS.Timeout;
duration = 0;
skip: (segment: SponsorTime) => void; skip: (segment: SponsorTime) => void;
@@ -42,6 +43,10 @@ export class SkipButtonControlBar {
this.container.addEventListener("mouseleave", () => this.startTimer()); this.container.addEventListener("mouseleave", () => this.startTimer());
} }
getElement(): HTMLElement {
return this.container;
}
attachToPage(): void { attachToPage(): void {
const leftControlsContainer = document.querySelector(".ytp-left-controls"); const leftControlsContainer = document.querySelector(".ytp-left-controls");
this.chapterText = document.querySelector(".ytp-chapter-container"); this.chapterText = document.querySelector(".ytp-chapter-container");
@@ -51,7 +56,8 @@ export class SkipButtonControlBar {
} }
} }
enable(segment: SponsorTime): void { enable(segment: SponsorTime, duration?: number): void {
if (duration) this.duration = duration;
this.segment = segment; this.segment = segment;
this.refreshText(); this.refreshText();
@@ -78,7 +84,7 @@ export class SkipButtonControlBar {
startTimer(): void { startTimer(): void {
this.stopTimer(); this.stopTimer();
this.timeout = setTimeout(() => this.disable(), Config.config.skipNoticeDuration * 1000); this.timeout = setTimeout(() => this.disable(), Math.max(Config.config.skipNoticeDuration, this.duration) * 1000);
} }
disable(): void { disable(): void {

5
src/options.ts
View File

@@ -6,6 +6,7 @@ window.SB = Config;
import Utils from "./utils"; import Utils from "./utils";
import CategoryChooser from "./render/CategoryChooser"; import CategoryChooser from "./render/CategoryChooser";
import { showDonationLink } from "./utils/configUtils";
const utils = new Utils(); const utils = new Utils();
window.addEventListener('DOMContentLoaded', init); window.addEventListener('DOMContentLoaded', init);
@@ -28,6 +29,10 @@ async function init() {
await utils.wait(() => Config.config !== null); await utils.wait(() => Config.config !== null);
if (!showDonationLink()) {
document.getElementById("sbDonate").style.visibility = "hidden";
}
// Set all of the toggle options to the correct option // Set all of the toggle options to the correct option
const optionsContainer = document.getElementById("options"); const optionsContainer = document.getElementById("options");
const optionsElements = optionsContainer.querySelectorAll("*"); const optionsElements = optionsContainer.querySelectorAll("*");

150
src/popup.ts
View File

@@ -3,6 +3,7 @@ import Config from "./config";
import Utils from "./utils"; import Utils from "./utils";
import { SponsorTime, SponsorHideType } from "./types"; import { SponsorTime, SponsorHideType } from "./types";
import { Message, MessageResponse } from "./messageTypes"; import { Message, MessageResponse } from "./messageTypes";
import { showDonationLink } from "./utils/configUtils";
const utils = new Utils(); const utils = new Utils();
interface MessageListener { interface MessageListener {
@@ -12,7 +13,7 @@ interface MessageListener {
class MessageHandler { class MessageHandler {
messageListener: MessageListener; messageListener: MessageListener;
constructor (messageListener?: MessageListener) { constructor(messageListener?: MessageListener) {
this.messageListener = messageListener; this.messageListener = messageListener;
} }
@@ -107,14 +108,14 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
"sbDonate" "sbDonate"
].forEach(id => PageElements[id] = document.getElementById(id)); ].forEach(id => PageElements[id] = document.getElementById(id));
// Hide donate button on safari // Hide donate button if wanted (Safari, or user choice)
if (navigator.vendor === "Apple Computer, Inc.") { if (!showDonationLink()) {
PageElements.sbDonate.style.display = "none"; PageElements.sbDonate.style.display = "none";
} }
//setup click listeners //setup click listeners
PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage); PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
PageElements.whitelistToggle.addEventListener("change", function() { PageElements.whitelistToggle.addEventListener("change", function () {
if (this.checked) { if (this.checked) {
whitelistChannel(); whitelistChannel();
} else { } else {
@@ -122,7 +123,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
} }
}); });
PageElements.whitelistForceCheck.addEventListener("click", openOptions); PageElements.whitelistForceCheck.addEventListener("click", openOptions);
PageElements.toggleSwitch.addEventListener("change", function() { PageElements.toggleSwitch.addEventListener("change", function () {
toggleSkipping(!this.checked); toggleSkipping(!this.checked);
}); });
PageElements.submitTimes.addEventListener("click", submitTimes); PageElements.submitTimes.addEventListener("click", submitTimes);
@@ -174,7 +175,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
if (userID != undefined) { if (userID != undefined) {
//there are probably some views on these submissions then //there are probably some views on these submissions then
//get the amount of views from the sponsors submitted //get the amount of views from the sponsors submitted
utils.sendRequestToServer("GET", "/api/getViewsForUser?userID=" + userID, function(response) { utils.sendRequestToServer("GET", "/api/getViewsForUser?userID=" + userID, function (response) {
if (response.status == 200) { if (response.status == 200) {
const viewCount = JSON.parse(response.responseText).viewCount; const viewCount = JSON.parse(response.responseText).viewCount;
if (viewCount != 0) { if (viewCount != 0) {
@@ -191,7 +192,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
}); });
//get this time in minutes //get this time in minutes
utils.sendRequestToServer("GET", "/api/getSavedTimeForUser?userID=" + userID, function(response) { utils.sendRequestToServer("GET", "/api/getSavedTimeForUser?userID=" + userID, function (response) {
if (response.status == 200) { if (response.status == 200) {
const minutesSaved = JSON.parse(response.responseText).timeSaved; const minutesSaved = JSON.parse(response.responseText).timeSaved;
if (minutesSaved != 0) { if (minutesSaved != 0) {
@@ -237,7 +238,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
getSegmentsFromContentScript(false); getSegmentsFromContentScript(false);
function onTabs(tabs, updating: boolean): void { function onTabs(tabs, updating: boolean): void {
messageHandler.sendMessage(tabs[0].id, {message: 'getVideoID'}, function(result) { messageHandler.sendMessage(tabs[0].id, { message: 'getVideoID' }, function (result) {
if (result !== undefined && result.videoID) { if (result !== undefined && result.videoID) {
currentVideoID = result.videoID; currentVideoID = result.videoID;
creatingSegment = result.creatingSegment; creatingSegment = result.creatingSegment;
@@ -262,7 +263,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
messageHandler.sendMessage( messageHandler.sendMessage(
tabs[0].id, tabs[0].id,
{message: 'isInfoFound', updating}, { message: 'isInfoFound', updating },
infoFound infoFound
); );
} }
@@ -274,8 +275,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
}, (tabs) => onTabs(tabs, updating)); }, (tabs) => onTabs(tabs, updating));
} }
function infoFound(request: {found: boolean, sponsorTimes: SponsorTime[]}) { function infoFound(request: { found: boolean, sponsorTimes: SponsorTime[] }) {
if(chrome.runtime.lastError) { if (chrome.runtime.lastError) {
//This page doesn't have the injected content script, or at least not yet //This page doesn't have the injected content script, or at least not yet
displayNoVideo(); displayNoVideo();
return; return;
@@ -306,8 +307,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
}, tabs => { }, tabs => {
messageHandler.sendMessage( messageHandler.sendMessage(
tabs[0].id, tabs[0].id,
{message: 'isChannelWhitelisted'}, { message: 'isChannelWhitelisted' },
function(response) { function (response) {
if (response.value) { if (response.value) {
PageElements.whitelistChannel.style.display = "none"; PageElements.whitelistChannel.style.display = "none";
PageElements.unwhitelistChannel.style.display = "unset"; PageElements.unwhitelistChannel.style.display = "unset";
@@ -315,7 +316,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated"); document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
} }
}); });
} }
); );
} }
@@ -327,7 +328,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
}, (tabs) => { }, (tabs) => {
messageHandler.sendMessage( messageHandler.sendMessage(
tabs[0].id, tabs[0].id,
{from: 'popup', message: 'sponsorStart'}, { from: 'popup', message: 'sponsorStart' },
async (response) => { async (response) => {
startSponsorCallback(response); startSponsorCallback(response);
@@ -351,7 +352,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
}); });
} }
function startSponsorCallback(response: {creatingSegment: boolean}) { function startSponsorCallback(response: { creatingSegment: boolean }) {
creatingSegment = response.creatingSegment; creatingSegment = response.creatingSegment;
// Only update the segments after a segment was created // Only update the segments after a segment was created
@@ -364,12 +365,12 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
} }
//display the video times from the array at the top, in a different section //display the video times from the array at the top, in a different section
function displayDownloadedSponsorTimes(request: {found: boolean, sponsorTimes: SponsorTime[]}) { function displayDownloadedSponsorTimes(request: { found: boolean, sponsorTimes: SponsorTime[] }) {
if (request.sponsorTimes != undefined) { if (request.sponsorTimes != undefined) {
// Sort list by start time // Sort list by start time
const segmentTimes = request.sponsorTimes const segmentTimes = request.sponsorTimes
.sort((a, b) => a.segment[1] - b.segment[1]) .sort((a, b) => a.segment[1] - b.segment[1])
.sort((a, b) => a.segment[0] - b.segment[0]); .sort((a, b) => a.segment[0] - b.segment[0]);
//add them as buttons to the issue reporting container //add them as buttons to the issue reporting container
const container = document.getElementById("issueReporterTimeButtons"); const container = document.getElementById("issueReporterTimeButtons");
@@ -388,7 +389,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category]?.color; categoryColorCircle.style.backgroundColor = Config.config.barTypes[segmentTimes[i].category]?.color;
categoryColorCircle.classList.add("dot"); categoryColorCircle.classList.add("dot");
categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle"); categoryColorCircle.classList.add("sponsorTimesCategoryColorCircle");
let extraInfo = ""; let extraInfo = "";
if (segmentTimes[i].hidden === SponsorHideType.Downvoted) { if (segmentTimes[i].hidden === SponsorHideType.Downvoted) {
//this one is downvoted //this one is downvoted
@@ -397,7 +398,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
//this one is too short //this one is too short
extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")"; extraInfo = " (" + chrome.i18n.getMessage("hiddenDueToDuration") + ")";
} }
const textNode = document.createTextNode(utils.shortCategoryName(segmentTimes[i].category) + extraInfo); const textNode = document.createTextNode(utils.shortCategoryName(segmentTimes[i].category) + extraInfo);
const segmentTimeFromToNode = document.createElement("div"); const segmentTimeFromToNode = document.createElement("div");
segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) + " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true); segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) + " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true);
@@ -446,7 +447,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
voteButtonsContainer.appendChild(uuidButton); voteButtonsContainer.appendChild(uuidButton);
//add click listener to open up vote panel //add click listener to open up vote panel
sponsorTimeButton.addEventListener("click", function() { sponsorTimeButton.addEventListener("click", function () {
voteButtonsContainer.classList.toggle("voteButtonsContainer--hide"); voteButtonsContainer.classList.toggle("voteButtonsContainer--hide");
}); });
@@ -478,15 +479,15 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
}, tabs => { }, tabs => {
messageHandler.sendMessage( messageHandler.sendMessage(
tabs[0].id, tabs[0].id,
{message: 'submitTimes'}, { message: 'submitTimes' },
); );
}); });
} }
} }
function showNoticeAgain() { function showNoticeAgain() {
Config.config.dontShowNotice = false; Config.config.dontShowNotice = false;
PageElements.showNoticeAgain.style.display = "none"; PageElements.showNoticeAgain.style.display = "none";
} }
@@ -499,11 +500,11 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
//make the options div visible //make the options div visible
function openOptions() { function openOptions() {
chrome.runtime.sendMessage({"message": "openConfig"}); chrome.runtime.sendMessage({ "message": "openConfig" });
} }
function openHelp() { function openHelp() {
chrome.runtime.sendMessage({"message": "openHelp"}); chrome.runtime.sendMessage({ "message": "openHelp" });
} }
//make the options username setting option visible //make the options username setting option visible
@@ -516,7 +517,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
PageElements.setUsernameContainer.style.display = "none"; PageElements.setUsernameContainer.style.display = "none";
PageElements.setUsername.style.display = "flex"; PageElements.setUsername.style.display = "flex";
PageElements.setUsername.classList.add("SBExpanded"); PageElements.setUsername.classList.add("SBExpanded");
PageElements.setUsernameStatusContainer.style.display = "none"; PageElements.setUsernameStatusContainer.style.display = "none";
PageElements.sponsorTimesContributionsContainer.classList.add("hidden"); PageElements.sponsorTimesContributionsContainer.classList.add("hidden");
@@ -555,18 +556,18 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
function displayNoVideo() { function displayNoVideo() {
document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID"); document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
} }
function addVoteMessage(message, UUID) { function addVoteMessage(message, UUID) {
const voteButtonsContainer = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID); const voteButtonsContainer = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
voteButtonsContainer.style.display = "none"; voteButtonsContainer.style.display = "none";
const voteStatusContainer = document.getElementById("sponsorTimesVoteStatusContainer" + UUID); const voteStatusContainer = document.getElementById("sponsorTimesVoteStatusContainer" + UUID);
voteStatusContainer.style.removeProperty("display"); voteStatusContainer.style.removeProperty("display");
const thanksForVotingText = document.getElementById("sponsorTimesThanksForVotingText" + UUID); const thanksForVotingText = document.getElementById("sponsorTimesThanksForVotingText" + UUID);
thanksForVotingText.innerText = message; thanksForVotingText.innerText = message;
} }
function vote(type, UUID) { function vote(type, UUID) {
//add loading info //add loading info
addVoteMessage(chrome.i18n.getMessage("Loading"), UUID); addVoteMessage(chrome.i18n.getMessage("Loading"), UUID);
@@ -597,8 +598,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
}, tabs => { }, tabs => {
messageHandler.sendMessage( messageHandler.sendMessage(
tabs[0].id, tabs[0].id,
{message: 'getChannelID'}, { message: 'getChannelID' },
function(response) { function (response) {
if (!response.channelID) { if (!response.channelID) {
alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753"); alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
return; return;
@@ -630,10 +631,10 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
}, tabs => { }, tabs => {
messageHandler.sendMessage( messageHandler.sendMessage(
tabs[0].id, { tabs[0].id, {
message: 'whitelistChange', message: 'whitelistChange',
value: true value: true
}); });
} }
); );
} }
); );
@@ -648,38 +649,38 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
}, tabs => { }, tabs => {
messageHandler.sendMessage( messageHandler.sendMessage(
tabs[0].id, tabs[0].id,
{message: 'getChannelID'}, { message: 'getChannelID' },
function(response) { function (response) {
//get whitelisted channels //get whitelisted channels
let whitelistedChannels = Config.config.whitelistedChannels; let whitelistedChannels = Config.config.whitelistedChannels;
if (whitelistedChannels == undefined) { if (whitelistedChannels == undefined) {
whitelistedChannels = []; whitelistedChannels = [];
} }
//remove this channel //remove this channel
const index = whitelistedChannels.indexOf(response.channelID); const index = whitelistedChannels.indexOf(response.channelID);
whitelistedChannels.splice(index, 1); whitelistedChannels.splice(index, 1);
//change button //change button
PageElements.whitelistChannel.style.display = "unset"; PageElements.whitelistChannel.style.display = "unset";
PageElements.unwhitelistChannel.style.display = "none"; PageElements.unwhitelistChannel.style.display = "none";
document.querySelectorAll('.SBWhitelistIcon')[0].classList.remove("rotated"); document.querySelectorAll('.SBWhitelistIcon')[0].classList.remove("rotated");
//save this //save this
Config.config.whitelistedChannels = whitelistedChannels; Config.config.whitelistedChannels = whitelistedChannels;
//send a message to the client //send a message to the client
messageHandler.query({ messageHandler.query({
active: true, active: true,
currentWindow: true currentWindow: true
}, tabs => { }, tabs => {
messageHandler.sendMessage( messageHandler.sendMessage(
tabs[0].id, { tabs[0].id, {
message: 'whitelistChange', message: 'whitelistChange',
value: false value: false
}); });
} }
); );
} }
); );
}); });
@@ -694,12 +695,13 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
}, tabs => { }, tabs => {
messageHandler.sendMessage( messageHandler.sendMessage(
tabs[0].id, tabs[0].id,
{message: 'refreshSegments'}, { message: 'refreshSegments' },
(response) => { (response) => {
infoFound(response); infoFound(response);
stopAnimation(); stopAnimation();
} }
)} )
}
); );
} }
@@ -707,7 +709,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
* Should skipping be disabled (visuals stay) * Should skipping be disabled (visuals stay)
*/ */
function toggleSkipping(disabled) { function toggleSkipping(disabled) {
Config.config.disableSkipping = disabled; Config.config.disableSkipping = disabled;
let hiddenButton = PageElements.disableSkipping; let hiddenButton = PageElements.disableSkipping;
let shownButton = PageElements.enableSkipping; let shownButton = PageElements.enableSkipping;
@@ -728,13 +730,13 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
* @param {float} seconds * @param {float} seconds
* @returns {string} * @returns {string}
*/ */
function getFormattedHours(minutes) { function getFormattedHours(minutes) {
minutes = Math.round(minutes * 10) / 10 minutes = Math.round(minutes * 10) / 10
const hours = Math.floor(minutes / 60); const hours = Math.floor(minutes / 60);
return (hours > 0 ? hours + "h " : "") + (minutes % 60).toFixed(1); return (hours > 0 ? hours + "h " : "") + (minutes % 60).toFixed(1);
} }
//end of function //end of function
} }
if (chrome.tabs != undefined) { if (chrome.tabs != undefined) {

73
src/render/Tooltip.tsx Normal file
View File

@@ -0,0 +1,73 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
export interface TooltipProps {
text: string,
link?: string,
referenceNode: HTMLElement,
prependElement?: HTMLElement, // Element to append before
bottomOffset?: string
timeout?: number;
}
export class Tooltip {
text: string;
container: HTMLDivElement;
timer: NodeJS.Timeout;
constructor(props: TooltipProps) {
props.bottomOffset ??= "70px";
this.text = props.text;
this.container = document.createElement('div');
this.container.id = "sponsorTooltip" + props.text;
this.container.style.display = "relative";
if (props.prependElement) {
props.referenceNode.insertBefore(this.container, props.prependElement);
} else {
props.referenceNode.appendChild(this.container);
}
if (props.timeout) {
this.timer = setTimeout(() => this.close(), props.timeout * 1000);
}
ReactDOM.render(
<div style={{bottom: props.bottomOffset}}
className="sponsorBlockTooltip" >
<div>
<img className="sponsorSkipLogo sponsorSkipObject"
src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
</img>
<span className="sponsorSkipObject">
{this.text + (props.link ? ". " : "")}
{props.link ?
<a style={{textDecoration: "underline"}}
target="_blank"
rel="noopener noreferrer"
href={props.link}>
{chrome.i18n.getMessage("LearnMore")}
</a>
: null}
</span>
</div>
<button className="sponsorSkipObject sponsorSkipNoticeButton"
style ={{float: "right" }}
onClick={() => this.close()}>
{chrome.i18n.getMessage("GotIt")}
</button>
</div>,
this.container
)
}
close(): void {
ReactDOM.unmountComponentAtNode(this.container);
this.container.remove();
if (this.timer) clearTimeout(this.timer);
}
}

1
src/utils.ts
View File

@@ -261,7 +261,6 @@ export default class Utils {
const objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children; const objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
for (let j = 0; j < objects.length; j++) { for (let j = 0; j < objects.length; j++) {
const obj = objects[j]; const obj = objects[j];
const localizedMessage = this.getLocalizedMessage(obj.innerHTML.toString()); const localizedMessage = this.getLocalizedMessage(obj.innerHTML.toString());
if (localizedMessage) obj.innerHTML = localizedMessage; if (localizedMessage) obj.innerHTML = localizedMessage;
} }

5
src/utils/configUtils.ts Normal file
View File

@@ -0,0 +1,5 @@
import Config from "../config";
export function showDonationLink(): boolean {
return navigator.vendor !== "Apple Computer, Inc." && Config.config.showDonationLink;
}

1
webpack/webpack.common.js
View File

@@ -10,6 +10,7 @@ module.exports = env => ({
background: path.join(__dirname, srcDir + 'background.ts'), background: path.join(__dirname, srcDir + 'background.ts'),
content: path.join(__dirname, srcDir + 'content.ts'), content: path.join(__dirname, srcDir + 'content.ts'),
options: path.join(__dirname, srcDir + 'options.ts'), options: path.join(__dirname, srcDir + 'options.ts'),
help: path.join(__dirname, srcDir + 'help.ts'),
permissions: path.join(__dirname, srcDir + 'permissions.ts') permissions: path.join(__dirname, srcDir + 'permissions.ts')
}, },
output: { output: {