mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-13 06:57:09 +03:00
Merge pull request #896 from ajayyy/improvements
More highlight improvements
This commit is contained in:
Ajay Ramachandran
@@ -711,6 +711,10 @@
|
||||
"help": {
|
||||
"message": "Help"
|
||||
},
|
||||
"GotIt": {
|
||||
"message": "Got it",
|
||||
"description": "Used as the button to dismiss a tooltip"
|
||||
},
|
||||
"experiementOptOut": {
|
||||
"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."
|
||||
@@ -724,5 +728,74 @@
|
||||
"voteRejectedWarning": {
|
||||
"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."
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -519,3 +519,24 @@ input::-webkit-inner-spin-button {
|
||||
display: block;
|
||||
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
BIN
public/help/images/popup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
public/help/images/voting on notice.gif
Normal file
BIN
public/help/images/voting on notice.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
@@ -5,6 +5,9 @@
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="styles.css" rel="stylesheet"/>
|
||||
|
||||
<script src="../js/vendor.js"></script>
|
||||
<script src="../js/help.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -14,90 +17,92 @@
|
||||
SponsorBlock
|
||||
</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>
|
||||
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>
|
||||
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 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">
|
||||
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.
|
||||
__MSG_helpPageFeatureDisclaimer__
|
||||
</p>
|
||||
|
||||
<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">
|
||||
<span class="projectPreviewImageLarge">
|
||||
<img src="https://i.imgur.com/caf5Bju.png">
|
||||
<img src="images/popup.png">
|
||||
</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/>
|
||||
|
||||
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>
|
||||
|
||||
<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">
|
||||
<span class="projectPreviewImageLargeRight">
|
||||
<img src="https://i.imgur.com/A1ilk6x.gif">
|
||||
</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/>
|
||||
|
||||
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>
|
||||
|
||||
<h1>Editing</h1>
|
||||
<h1>__MSG_Editing__</h1>
|
||||
|
||||
<p class="projectPreview">
|
||||
<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>
|
||||
|
||||
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>
|
||||
|
||||
<h1>This is too slow</h1>
|
||||
<h1>__MSG_helpPageTooSlow__</h1>
|
||||
|
||||
<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.
|
||||
These can be changed in the options. If you don't use QWERTY, you should probably change the keybinding.
|
||||
__MSG_helpPageTooSlow1__
|
||||
</p>
|
||||
|
||||
<h1>Can I get a copy of the Database? What happens if you disappear?</h1>
|
||||
<h1>__MSG_helpPageCopyOfDatabase__</h1>
|
||||
|
||||
<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>
|
||||
|
||||
<h1>News and how it is made</h1>
|
||||
<h1>__MSG_helpPageNews__</h1>
|
||||
|
||||
<p>
|
||||
See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
|
||||
</p>
|
||||
|
||||
<h1>Where can I get the source code?</h1>
|
||||
<h1>__MSG_helpPageSourceCode__</h1>
|
||||
|
||||
<h4 style="display: inline">Client:</h4>
|
||||
<!-- Github logo -->
|
||||
@@ -107,7 +112,7 @@
|
||||
<!-- 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>
|
||||
|
||||
<h1>Credits</h1>
|
||||
<h1>__MSG_Credits__</h1>
|
||||
|
||||
<p>
|
||||
Thanks to all <a href="https://github.com/ajayyy/SponsorBlock/graphs/contributors">SponsorBlock contributors</a>,
|
||||
@@ -184,3 +184,7 @@ h1,h2,h3,h4,h5,h6 {
|
||||
svg {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#sbDonate {
|
||||
font-size: 10px;
|
||||
}
|
||||
@@ -365,3 +365,7 @@ svg {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#sbDonate {
|
||||
font-size: 10px;
|
||||
}
|
||||
@@ -19,7 +19,12 @@
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -452,6 +457,24 @@
|
||||
<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 class="option-button trigger-button">
|
||||
__MSG_changeUserID__
|
||||
|
||||
@@ -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 : ''))});
|
||||
return;
|
||||
case "openHelp":
|
||||
chrome.tabs.create({url: chrome.runtime.getURL('help/index_en.html')});
|
||||
chrome.tabs.create({url: chrome.runtime.getURL('help/index.html')});
|
||||
return;
|
||||
case "openPage":
|
||||
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 (!userID){
|
||||
//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
|
||||
const newUserID = utils.generateUserID();
|
||||
//save this UUID
|
||||
Config.config.userID = newUserID;
|
||||
|
||||
Config.config.highlightCategoryUpdate = false;
|
||||
}
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
@@ -151,8 +151,6 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
|
||||
|
||||
const optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
|
||||
|
||||
console.log(getCategoryActionType(this.props.category))
|
||||
|
||||
for (const optionName of optionNames) {
|
||||
elements.push(
|
||||
<option key={optionName} value={optionName}>
|
||||
|
||||
@@ -38,8 +38,10 @@ interface SBConfig {
|
||||
refetchWhenNotFound: boolean,
|
||||
ytInfoPermissionGranted: boolean,
|
||||
allowExpirements: boolean,
|
||||
showDonationLink: boolean,
|
||||
autoHideInfoButton: boolean,
|
||||
autoSkipOnMusicVideos: boolean,
|
||||
highlightCategoryUpdate: boolean
|
||||
|
||||
// What categories should be skipped
|
||||
categorySelections: CategorySelection[],
|
||||
@@ -181,8 +183,10 @@ const Config: SBObject = {
|
||||
refetchWhenNotFound: true,
|
||||
ytInfoPermissionGranted: false,
|
||||
allowExpirements: true,
|
||||
showDonationLink: true,
|
||||
autoHideInfoButton: true,
|
||||
autoSkipOnMusicVideos: false,
|
||||
highlightCategoryUpdate: false, // TODO: Remove this once update is done
|
||||
|
||||
categorySelections: [{
|
||||
name: "sponsor" as Category,
|
||||
|
||||
@@ -15,6 +15,7 @@ import { Message, MessageResponse } from "./messageTypes";
|
||||
import * as Chat from "./js-components/chat";
|
||||
import { getCategoryActionType } from "./utils/categoryUtils";
|
||||
import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
|
||||
import { Tooltip } from "./render/Tooltip";
|
||||
|
||||
// Hack to get the CSS loaded on permission-based sites (Invidious)
|
||||
utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
|
||||
@@ -1104,7 +1105,19 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
|
||||
if (!autoSkip
|
||||
&& skippingSegments.length === 1
|
||||
&& 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 = skipButtonControlBar;
|
||||
|
||||
17
src/help.ts
Normal file
17
src/help.ts
Normal 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";
|
||||
}
|
||||
}
|
||||
@@ -18,6 +18,7 @@ export class SkipButtonControlBar {
|
||||
showKeybindHint = true;
|
||||
|
||||
timeout: NodeJS.Timeout;
|
||||
duration = 0;
|
||||
|
||||
skip: (segment: SponsorTime) => void;
|
||||
|
||||
@@ -42,6 +43,10 @@ export class SkipButtonControlBar {
|
||||
this.container.addEventListener("mouseleave", () => this.startTimer());
|
||||
}
|
||||
|
||||
getElement(): HTMLElement {
|
||||
return this.container;
|
||||
}
|
||||
|
||||
attachToPage(): void {
|
||||
const leftControlsContainer = document.querySelector(".ytp-left-controls");
|
||||
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.refreshText();
|
||||
|
||||
@@ -78,7 +84,7 @@ export class SkipButtonControlBar {
|
||||
|
||||
startTimer(): void {
|
||||
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 {
|
||||
|
||||
@@ -6,6 +6,7 @@ window.SB = Config;
|
||||
|
||||
import Utils from "./utils";
|
||||
import CategoryChooser from "./render/CategoryChooser";
|
||||
import { showDonationLink } from "./utils/configUtils";
|
||||
const utils = new Utils();
|
||||
|
||||
window.addEventListener('DOMContentLoaded', init);
|
||||
@@ -28,6 +29,10 @@ async function init() {
|
||||
|
||||
await utils.wait(() => Config.config !== null);
|
||||
|
||||
if (!showDonationLink()) {
|
||||
document.getElementById("sbDonate").style.visibility = "hidden";
|
||||
}
|
||||
|
||||
// Set all of the toggle options to the correct option
|
||||
const optionsContainer = document.getElementById("options");
|
||||
const optionsElements = optionsContainer.querySelectorAll("*");
|
||||
|
||||
56
src/popup.ts
56
src/popup.ts
@@ -3,6 +3,7 @@ import Config from "./config";
|
||||
import Utils from "./utils";
|
||||
import { SponsorTime, SponsorHideType } from "./types";
|
||||
import { Message, MessageResponse } from "./messageTypes";
|
||||
import { showDonationLink } from "./utils/configUtils";
|
||||
const utils = new Utils();
|
||||
|
||||
interface MessageListener {
|
||||
@@ -12,7 +13,7 @@ interface MessageListener {
|
||||
class MessageHandler {
|
||||
messageListener: MessageListener;
|
||||
|
||||
constructor (messageListener?: MessageListener) {
|
||||
constructor(messageListener?: MessageListener) {
|
||||
this.messageListener = messageListener;
|
||||
}
|
||||
|
||||
@@ -107,14 +108,14 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
"sbDonate"
|
||||
].forEach(id => PageElements[id] = document.getElementById(id));
|
||||
|
||||
// Hide donate button on safari
|
||||
if (navigator.vendor === "Apple Computer, Inc.") {
|
||||
// Hide donate button if wanted (Safari, or user choice)
|
||||
if (!showDonationLink()) {
|
||||
PageElements.sbDonate.style.display = "none";
|
||||
}
|
||||
|
||||
//setup click listeners
|
||||
PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
|
||||
PageElements.whitelistToggle.addEventListener("change", function() {
|
||||
PageElements.whitelistToggle.addEventListener("change", function () {
|
||||
if (this.checked) {
|
||||
whitelistChannel();
|
||||
} else {
|
||||
@@ -122,7 +123,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
}
|
||||
});
|
||||
PageElements.whitelistForceCheck.addEventListener("click", openOptions);
|
||||
PageElements.toggleSwitch.addEventListener("change", function() {
|
||||
PageElements.toggleSwitch.addEventListener("change", function () {
|
||||
toggleSkipping(!this.checked);
|
||||
});
|
||||
PageElements.submitTimes.addEventListener("click", submitTimes);
|
||||
@@ -174,7 +175,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
if (userID != undefined) {
|
||||
//there are probably some views on these submissions then
|
||||
//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) {
|
||||
const viewCount = JSON.parse(response.responseText).viewCount;
|
||||
if (viewCount != 0) {
|
||||
@@ -191,7 +192,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
});
|
||||
|
||||
//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) {
|
||||
const minutesSaved = JSON.parse(response.responseText).timeSaved;
|
||||
if (minutesSaved != 0) {
|
||||
@@ -237,7 +238,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
getSegmentsFromContentScript(false);
|
||||
|
||||
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) {
|
||||
currentVideoID = result.videoID;
|
||||
creatingSegment = result.creatingSegment;
|
||||
@@ -262,7 +263,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
|
||||
messageHandler.sendMessage(
|
||||
tabs[0].id,
|
||||
{message: 'isInfoFound', updating},
|
||||
{ message: 'isInfoFound', updating },
|
||||
infoFound
|
||||
);
|
||||
}
|
||||
@@ -274,8 +275,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
}, (tabs) => onTabs(tabs, updating));
|
||||
}
|
||||
|
||||
function infoFound(request: {found: boolean, sponsorTimes: SponsorTime[]}) {
|
||||
if(chrome.runtime.lastError) {
|
||||
function infoFound(request: { found: boolean, sponsorTimes: SponsorTime[] }) {
|
||||
if (chrome.runtime.lastError) {
|
||||
//This page doesn't have the injected content script, or at least not yet
|
||||
displayNoVideo();
|
||||
return;
|
||||
@@ -306,8 +307,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
}, tabs => {
|
||||
messageHandler.sendMessage(
|
||||
tabs[0].id,
|
||||
{message: 'isChannelWhitelisted'},
|
||||
function(response) {
|
||||
{ message: 'isChannelWhitelisted' },
|
||||
function (response) {
|
||||
if (response.value) {
|
||||
PageElements.whitelistChannel.style.display = "none";
|
||||
PageElements.unwhitelistChannel.style.display = "unset";
|
||||
@@ -327,7 +328,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
}, (tabs) => {
|
||||
messageHandler.sendMessage(
|
||||
tabs[0].id,
|
||||
{from: 'popup', message: 'sponsorStart'},
|
||||
{ from: 'popup', message: 'sponsorStart' },
|
||||
async (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;
|
||||
|
||||
// Only update the segments after a segment was created
|
||||
@@ -364,7 +365,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
}
|
||||
|
||||
//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) {
|
||||
// Sort list by start time
|
||||
const segmentTimes = request.sponsorTimes
|
||||
@@ -446,7 +447,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
voteButtonsContainer.appendChild(uuidButton);
|
||||
|
||||
//add click listener to open up vote panel
|
||||
sponsorTimeButton.addEventListener("click", function() {
|
||||
sponsorTimeButton.addEventListener("click", function () {
|
||||
voteButtonsContainer.classList.toggle("voteButtonsContainer--hide");
|
||||
});
|
||||
|
||||
@@ -478,7 +479,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
}, tabs => {
|
||||
messageHandler.sendMessage(
|
||||
tabs[0].id,
|
||||
{message: 'submitTimes'},
|
||||
{ message: 'submitTimes' },
|
||||
);
|
||||
});
|
||||
}
|
||||
@@ -499,11 +500,11 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
|
||||
//make the options div visible
|
||||
function openOptions() {
|
||||
chrome.runtime.sendMessage({"message": "openConfig"});
|
||||
chrome.runtime.sendMessage({ "message": "openConfig" });
|
||||
}
|
||||
|
||||
function openHelp() {
|
||||
chrome.runtime.sendMessage({"message": "openHelp"});
|
||||
chrome.runtime.sendMessage({ "message": "openHelp" });
|
||||
}
|
||||
|
||||
//make the options username setting option visible
|
||||
@@ -597,8 +598,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
}, tabs => {
|
||||
messageHandler.sendMessage(
|
||||
tabs[0].id,
|
||||
{message: 'getChannelID'},
|
||||
function(response) {
|
||||
{ message: 'getChannelID' },
|
||||
function (response) {
|
||||
if (!response.channelID) {
|
||||
alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
|
||||
return;
|
||||
@@ -648,8 +649,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
}, tabs => {
|
||||
messageHandler.sendMessage(
|
||||
tabs[0].id,
|
||||
{message: 'getChannelID'},
|
||||
function(response) {
|
||||
{ message: 'getChannelID' },
|
||||
function (response) {
|
||||
//get whitelisted channels
|
||||
let whitelistedChannels = Config.config.whitelistedChannels;
|
||||
if (whitelistedChannels == undefined) {
|
||||
@@ -694,12 +695,13 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
}, tabs => {
|
||||
messageHandler.sendMessage(
|
||||
tabs[0].id,
|
||||
{message: 'refreshSegments'},
|
||||
{ message: 'refreshSegments' },
|
||||
(response) => {
|
||||
infoFound(response);
|
||||
stopAnimation();
|
||||
}
|
||||
)}
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@@ -734,7 +736,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
|
||||
return (hours > 0 ? hours + "h " : "") + (minutes % 60).toFixed(1);
|
||||
}
|
||||
|
||||
//end of function
|
||||
//end of function
|
||||
}
|
||||
|
||||
if (chrome.tabs != undefined) {
|
||||
|
||||
73
src/render/Tooltip.tsx
Normal file
73
src/render/Tooltip.tsx
Normal 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);
|
||||
}
|
||||
}
|
||||
@@ -261,7 +261,6 @@ export default class Utils {
|
||||
const objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
|
||||
for (let j = 0; j < objects.length; j++) {
|
||||
const obj = objects[j];
|
||||
|
||||
const localizedMessage = this.getLocalizedMessage(obj.innerHTML.toString());
|
||||
if (localizedMessage) obj.innerHTML = localizedMessage;
|
||||
}
|
||||
|
||||
5
src/utils/configUtils.ts
Normal file
5
src/utils/configUtils.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import Config from "../config";
|
||||
|
||||
export function showDonationLink(): boolean {
|
||||
return navigator.vendor !== "Apple Computer, Inc." && Config.config.showDonationLink;
|
||||
}
|
||||
@@ -10,6 +10,7 @@ module.exports = env => ({
|
||||
background: path.join(__dirname, srcDir + 'background.ts'),
|
||||
content: path.join(__dirname, srcDir + 'content.ts'),
|
||||
options: path.join(__dirname, srcDir + 'options.ts'),
|
||||
help: path.join(__dirname, srcDir + 'help.ts'),
|
||||
permissions: path.join(__dirname, srcDir + 'permissions.ts')
|
||||
},
|
||||
output: {
|
||||
|
||||
Reference in New Issue
Block a user