external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-09-20 04:53:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #332 from ajayyy/react

Browse source 
Categories Improvements
This commit is contained in:
Ajay Ramachandran 2020-05-10 23:09:40 -04:00 committed by GitHub
commit ab84b9d2e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 407 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
.github/workflows/release.yml vendored
View file

@ -28,7 +28,7 @@ jobs:
- run: mkdir ./builds
- uses: montudor/action-zip@v0.1.0
with:
args: zip -qq -r ./builds/ChromeExtension.zip ./dist
args: zip -qq -r ./builds/ChromeExtension.zip ./dist/*
# Create Firefox artifacts
- name: Create Firefox artifacts
@ -39,7 +39,7 @@ jobs:
path: dist
- uses: montudor/action-zip@v0.1.0
with:
args: zip -qq -r ./builds/FirefoxExtension.zip ./dist
args: zip -qq -r ./builds/FirefoxExtension.zip ./dist/*
# Create Beta artifacts (Builds with the name changed to beta)
- name: Create Chrome Beta artifacts
@ -50,7 +50,7 @@ jobs:
path: dist
- uses: montudor/action-zip@v0.1.0
with:
args: zip -qq -r ./builds/ChromeExtensionBeta.zip ./dist
args: zip -qq -r ./builds/ChromeExtensionBeta.zip ./dist/*
- name: Create Firefox Beta artifacts
run: npm run build:firefox -- --env.stream=beta
@ -60,7 +60,24 @@ jobs:
path: dist
- uses: montudor/action-zip@v0.1.0
with:
args: zip -qq -r ./builds/FirefoxExtensionBeta.zip ./dist
args: zip -qq -r ./builds/FirefoxExtensionBeta.zip ./dist/*
# Create Firefox Signed Beta version
- name: Create Firefox Signed Beta artifacts
run: npm run web-sign
env:
WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }}
WEB_EXT_API_SECRET: ${{ secrets.WEB_EXT_API_SECRET }}
- name: Install rename
run: sudo apt-get install rename
- name: Install signed file
run: cd ./web-ext-artifacts
run: rename 's/.*/FirefoxSignedInstaller.xpi/' *
run: cd ..
- uses: actions/upload-artifact@v1
with:
name: FirefoxExtensionSigned.xpi
path: ./web-ext-artifacts/FirefoxSignedInstaller.xpi
# Upload each release asset
- name: Upload to release
@ -70,6 +87,13 @@ jobs:
name: ChromeExtension.zip
path: ./builds/ChromeExtension.zip
repo-token: ${{ secrets.GITHUB_TOKEN }}
- name: Upload to release
uses: Shopify/upload-to-release@master
with:
args: builds/ChromeExtensionBeta.zip
name: ChromeExtensionBeta.zip
path: ./builds/ChromeExtensionBeta.zip
repo-token: ${{ secrets.GITHUB_TOKEN }}
- name: Upload to release
uses: Shopify/upload-to-release@master
with:
@ -77,4 +101,11 @@ jobs:
name: FirefoxExtension.zip
path: ./builds/FirefoxExtension.zip
repo-token: ${{ secrets.GITHUB_TOKEN }}
- name: Upload to release
uses: Shopify/upload-to-release@master
with:
args: web-ext-artifacts/FirefoxSignedInstaller.xpi
name: FirefoxSignedInstaller.xpi
path: ./web-ext-artifacts/FirefoxSignedInstaller.xpi
repo-token: ${{ secrets.GITHUB_TOKEN }}

2
config.json.example
View file

@ -2,5 +2,5 @@
"serverAddress": "https://sponsor.ajay.app",
"testingServerAddress": "https://sponsor.ajay.app/test",
"serverAddressComment": "This specifies the default SponsorBlock server to conect to",
"categoryList": ["sponsor", "intro", "outro", "interaction", "selfpromo", "offtopic"]
"categoryList": ["sponsor", "intro", "outro", "interaction", "selfpromo", "music_offtopic"]
}

2
manifest/manifest.json
View file

@ -1,7 +1,7 @@
{
"name": "__MSG_fullName__",
"short_name": "__MSG_Name__",
"version": "1.2.27",
"version": "1.2.28",
"default_locale": "en",
"description": "__MSG_Description__",
"content_scripts": [{

1
package.json
View file

@ -32,6 +32,7 @@
},
"scripts": {
"web-run": "npm run web-run:chrome",
"web-sign": "web-ext sign -s dist",
"web-run:firefox": "cd dist && web-ext run --start-url https://addons.mozilla.org/firefox/addon/ublock-origin/",
"web-run:chrome": "cd dist && web-ext run --start-url https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm -t chromium",
"build": "npm run build:chrome",

24
public/_locales/en/messages.json
View file

@ -351,7 +351,7 @@
"message": "Support Invidious"
},
"supportInvidiousDescription": {
"message": "Invidious (invidio.us) is a third party YouTube client. To enable support, you must accept the extra permissions. This does NOT work in incongnito on Chrome and other Chromium variants."
"message": "Invidious (invidio.us) is a third party YouTube client. To enable support, you must accept the extra permissions. This does NOT work in incognito on Chrome and other Chromium variants."
},
"optionsInfo": {
"message": "Enable Invidious support, disable autoskip, hide buttons and more."
@ -490,19 +490,22 @@
"message": "Sponsor"
},
"category_intro": {
"message": "Intro"
"message": "Intro Animation"
},
"category_outro": {
"message": "Outro"
"message": "Endcards/Credits"
},
"category_interaction": {
"message": "Interaction (Redundant Like, Subscribe, Follow, etc.)"
"message": "Interaction Reminder (Subscribe)"
},
"category_selfpromo": {
"message": "Self-Promotion and Merchandise"
},
"category_offtopic": {
"message": "Offtopic tangent (Subjective)"
"category_music_offtopic": {
"message": "Music: Non-Music Section"
},
"category_livestream_messages": {
"message": "Livestream: Donation/Message Readings"
},
"disable": {
"message": "Disable"
@ -554,5 +557,14 @@
},
"forceChannelCheckPopup": {
"message": "Consider Enabling Force Channel Check Before Skipping Sponsors"
},
"downvoteDescription": {
"message": "Incorrect"
},
"incorrectCategory": {
"message": "Wrong Category"
},
"nonMusicCategoryOnMusic": {
"message": "This video is categorized as music. Are you sure you would like to submit segments with non-music categories? Unless this video is not actually music, you should not be submitting this segment. Please read the guidelines if you are confused."
}
}

17
public/content.css
View file

@ -11,11 +11,28 @@
z-index: 40;
}
.sbHidden {
display: none !important;
}
.previewbar {
display: inline-block;
height: 100%;
}
/* Preview Bar page hacks */
.sbTooltipTwoTitleThumbnailOffset {
bottom: -5px !important;
}
.sbTooltipOneTitleThumbnailOffset {
bottom: 10px !important;
}
/* */
.popup {
z-index: 10;
width: 100%;

2
public/popup.html
View file

@ -135,7 +135,7 @@
<span id="sponsorTimesSkipsDoneDisplay" class="popupElement">
0
</span>
<span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span> (since February).
<span id="sponsorTimesSkipsDoneEndWord" class="popupElement">__MSG_Segments__</span>
</div>
<div id="sponsorTimeSavedContainer" class="popupElement" style="display: none">

8
src/background.ts
View file

@ -47,7 +47,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
//this allows the callback to be called later
return true;
case "submitVote":
submitVote(request.type, request.UUID, callback);
submitVote(request.type, request.UUID, request.category, callback);
//this allows the callback to be called later
return true;
@ -147,7 +147,7 @@ function addSponsorTime(time, videoID, callback) {
});
}
function submitVote(type, UUID, callback) {
function submitVote(type, UUID, category, callback) {
let userID = Config.config.userID;
if (userID == undefined || userID === "undefined") {
@ -156,8 +156,10 @@ function submitVote(type, UUID, callback) {
Config.config.userID = userID;
}
let typeSection = (type !== undefined) ? "&type=" + type : "&category=" + category;
//publish this vote
utils.sendRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + "&type=" + type, function(xmlhttp, error) {
utils.sendRequestToServer("POST", "/api/voteOnSponsorTime?UUID=" + UUID + "&userID=" + userID + typeSection, function(xmlhttp, error) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback({
successType: 1

174
src/components/SkipNoticeComponent.tsx
View file

@ -1,4 +1,5 @@
import * as React from "react";
import * as CompileConfig from "../../config.json";
import Config from "../config"
import { ContentContainer, SponsorHideType } from "../types";
@ -19,16 +20,19 @@ export interface SkipNoticeProps {
}
export interface SkipNoticeState {
noticeTitle: string,
noticeTitle: string;
messages: string[],
messages: string[];
countdownTime: number,
countdownTime: number;
maxCountdownTime: () => number;
countdownText: string,
countdownText: string;
unskipText: string,
unskipCallback: () => void
unskipText: string;
unskipCallback: () => void;
downvoting: boolean;
choosingCategory: boolean;
}
class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeState> {
@ -43,10 +47,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
idSuffix: any;
noticeRef: React.MutableRefObject<NoticeComponent>;
categoryOptionRef: React.RefObject<HTMLSelectElement>;
// Used to update on config change
configListener: () => void;
constructor(props: SkipNoticeProps) {
super(props);
this.noticeRef = React.createRef();
this.categoryOptionRef = React.createRef();
this.UUID = props.UUID;
this.autoSkip = props.autoSkip;
@ -83,7 +92,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
countdownText: null,
unskipText: chrome.i18n.getMessage("unskip"),
unskipCallback: this.unskip.bind(this)
unskipCallback: this.unskip.bind(this),
downvoting: false,
choosingCategory: false
}
if (!this.autoSkip) {
@ -115,7 +127,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
timed={true}
maxCountdownTime={this.state.maxCountdownTime}
ref={this.noticeRef}
closeListener={this.props.closeListener}>
closeListener={() => this.closeListener()}>
{(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
<source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
@ -124,7 +136,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
{/* Text Boxes */}
{this.getMessageBoxes()}
{/* Last Row */}
{/* Bottom Row */}
<tr id={"sponsorSkipNoticeSecondRow" + this.idSuffix}>
{/* Vote Button Container */}
@ -145,7 +157,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
className="sponsorSkipObject voteButton"
src={chrome.extension.getURL("icons/report.png")}
title={chrome.i18n.getMessage("reportButtonInfo")}
onClick={() => this.contentContainer().vote(0, this.UUID, this)}>
onClick={() => this.adjustDownvotingState(true)}>
</img>
@ -174,6 +186,54 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
}
</tr>
{/* Downvote Options Row */}
{this.state.downvoting &&
<tr id={"sponsorSkipNoticeDownvoteOptionsRow" + this.idSuffix}>
<td id={"sponsorTimesDownvoteOptionsContainer" + this.idSuffix}>
{/* Normal downvote */}
<button className="sponsorSkipObject sponsorSkipNoticeButton"
onClick={() => this.contentContainer().vote(0, this.UUID, undefined, this)}>
{chrome.i18n.getMessage("downvoteDescription")}
</button>
{/* Category vote */}
{Config.config.testingServer &&
<button className="sponsorSkipObject sponsorSkipNoticeButton"
onClick={() => this.openCategoryChooser()}>
{chrome.i18n.getMessage("incorrectCategory")}
</button>
}
</td>
</tr>
}
{/* Category Chooser Row */}
{this.state.choosingCategory &&
<tr id={"sponsorSkipNoticeCategoryChooserRow" + this.idSuffix}>
<td>
{/* Category Selector */}
<select id={"sponsorTimeCategories" + this.idSuffix}
className="sponsorTimeCategories"
defaultValue={utils.getSponsorTimeFromUUID(this.props.contentContainer().sponsorTimes, this.props.UUID).category}
ref={this.categoryOptionRef}
onChange={this.categorySelectionChange.bind(this)}>
{this.getCategoryOptions()}
</select>
{/* Submit Button */}
<button className="sponsorSkipObject sponsorSkipNoticeButton"
onClick={() => this.contentContainer().vote(undefined, this.UUID, this.categoryOptionRef.current.value, this)}>
{chrome.i18n.getMessage("submit")}
</button>
</td>
</tr>
}
</NoticeComponent>
);
}
@ -202,6 +262,70 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
return elements;
}
adjustDownvotingState(value: boolean) {
if (!value) this.clearConfigListener();
this.setState({
downvoting: value,
choosingCategory: false
});
}
clearConfigListener() {
if (this.configListener) {
Config.configListeners.splice(Config.configListeners.indexOf(this.configListener), 1);
this.configListener = null;
}
}
openCategoryChooser() {
// Add as a config listener
this.configListener = () => this.forceUpdate();
Config.configListeners.push(this.configListener);
this.setState({
choosingCategory: true,
downvoting: false
});
}
getCategoryOptions() {
let elements = [];
for (const category of Config.config.categorySelections) {
elements.push(
<option value={category.name}
key={category.name}>
{chrome.i18n.getMessage("category_" + category.name)}
</option>
);
}
if (elements.length < CompileConfig.categoryList.length) {
// Add show more button
elements.push(
<option value={"moreCategories"}
key={"moreCategories"}>
{chrome.i18n.getMessage("moreCategories")}
</option>
);
}
return elements;
}
categorySelectionChange(event: React.ChangeEvent<HTMLSelectElement>) {
// See if show more categories was pressed
if (event.target.value === "moreCategories") {
// Open options page
chrome.runtime.sendMessage({"message": "openConfig"});
// Reset option to original
event.target.value = utils.getSponsorTimeFromUUID(this.props.contentContainer().sponsorTimes, this.props.UUID).category;
return;
}
}
unskip() {
this.contentContainer().unskipSponsorTime(this.UUID);
@ -258,22 +382,22 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
}
}
afterDownvote() {
afterDownvote(type: number, category: string) {
this.addVoteButtonInfo(chrome.i18n.getMessage("voted"));
this.setNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"));
this.adjustDownvotingState(false);
//remove this sponsor from the sponsors looked up
//find which one it is
for (let i = 0; i < this.contentContainer().sponsorTimes.length; i++) {
if (this.contentContainer().sponsorTimes[i].UUID == this.UUID) {
//this one is the one to hide
//add this as a hidden sponsorTime
this.contentContainer().sponsorTimes[i].hidden = SponsorHideType.Downvoted;
this.contentContainer().updatePreviewBar();
break;
// Change the sponsor locally
let sponsorTime = utils.getSponsorTimeFromUUID(this.contentContainer().sponsorTimes, this.UUID);
if (sponsorTime) {
if (type === 0) {
sponsorTime.hidden = SponsorHideType.Downvoted;
} else if (category) {
sponsorTime.category = category;
}
this.contentContainer().updatePreviewBar();
}
}
@ -316,6 +440,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
//show button again
document.getElementById("sponsorTimesDownvoteButtonsContainer" + this.idSuffix).style.removeProperty("display");
}
closeListener() {
this.clearConfigListener();
this.props.closeListener();
}
}
export default SkipNoticeComponent;

28
src/components/SponsorTimeEditComponent.tsx
View file

@ -29,6 +29,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
categoryOptionRef: React.RefObject<HTMLSelectElement>;
configUpdateListener: () => void;
constructor(props: SponsorTimeEditProps) {
super(props);
@ -49,7 +51,16 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
});
// Add as a config listener
Config.configListeners.push(this.configUpdate.bind(this));
if (!this.configUpdateListener) {
this.configUpdateListener = () => this.configUpdate();
Config.configListeners.push(this.configUpdate.bind(this));
}
}
componentWillUnmount() {
if (this.configUpdateListener) {
Config.configListeners.splice(Config.configListeners.indexOf(this.configUpdate.bind(this)));
}
}
render() {
@ -61,6 +72,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
style.marginTop = "15px";
}
// This method is required to get !important
// https://stackoverflow.com/a/45669262/1985387
let oldYouTubeDarkStyles = (node) => {
if (node) {
node.style.setProperty("color", "black", "important");
node.style.setProperty("text-shadow", "none", "important");
}
};
// Create time display
let timeDisplay: JSX.Element;
let sponsorTime = this.props.contentContainer().sponsorTimesSubmitting[this.props.index];
@ -78,6 +98,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
<input id={"submittingTimeMinutes0" + this.idSuffix}
className="sponsorTimeEdit sponsorTimeEditMinutes"
ref={oldYouTubeDarkStyles}
type="number"
value={this.state.sponsorTimeEdits[0][0]}
onChange={(e) => {
@ -90,6 +111,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
<input id={"submittingTimeSeconds0" + this.idSuffix}
className="sponsorTimeEdit sponsorTimeEditSeconds"
ref={oldYouTubeDarkStyles}
type="number"
value={this.state.sponsorTimeEdits[0][1]}
onChange={(e) => {
@ -106,6 +128,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
<input id={"submittingTimeMinutes1" + this.idSuffix}
className="sponsorTimeEdit sponsorTimeEditMinutes"
ref={oldYouTubeDarkStyles}
type="text"
value={this.state.sponsorTimeEdits[1][0]}
onChange={(e) => {
@ -118,6 +141,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
<input id={"submittingTimeSeconds1" + this.idSuffix}
className="sponsorTimeEdit sponsorTimeEditSeconds"
ref={oldYouTubeDarkStyles}
type="text"
value={this.state.sponsorTimeEdits[1][1]}
onChange={(e) => {
@ -236,7 +260,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
}
setTimeToNow(index: number) {
this.setTimeTo(index, this.props.contentContainer().v.currentTime);
this.setTimeTo(index, this.props.contentContainer().getRoughCurrentTime());
}
setTimeToEnd() {

19
src/components/SubmissionNoticeComponent.tsx
View file

@ -93,13 +93,6 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
<td className="sponsorSkipNoticeRightSection"
style={{position: "relative"}}>
{/* Cancel Button */}
<button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
onClick={this.cancel.bind(this)}>
{chrome.i18n.getMessage("cancel")}
</button>
{/* Submit Button */}
<button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
onClick={this.submit.bind(this)}>
@ -167,6 +160,18 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
ref.current.saveEditTimes();
}
// 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;
break;
}
}
}
this.props.callback();
this.cancel();

4
src/config.ts
View file

@ -123,7 +123,7 @@ var Config: SBObject = {
hideUploadButtonPlayerControls: false,
hideDiscordLaunches: 0,
hideDiscordLink: false,
invidiousInstances: ["invidio.us", "invidiou.sh", "invidious.snopyta.org"],
invidiousInstances: ["invidio.us", "invidious.snopyta.org"],
autoUpvote: true,
supportInvidious: false,
serverAddress: CompileConfig.serverAddress,
@ -254,7 +254,7 @@ async function migrateOldFormats() {
// Channel URLS
if (Config.config.whitelistedChannels.length > 0 &&
(Config.config.whitelistedChannels[0].includes("/") || Config.config.whitelistedChannels[0] == null)) {
(Config.config.whitelistedChannels[0] == null || Config.config.whitelistedChannels[0].includes("/"))) {
let newChannelList: string[] = [];
for (const item of Config.config.whitelistedChannels) {
if (item != null) {

61
src/content.ts
View file

@ -114,7 +114,9 @@ var skipNoticeContentContainer: ContentContainer = () => ({
sponsorSubmissionNotice: submissionNotice,
resetSponsorSubmissionNotice,
changeStartSponsorButton,
previewTime
previewTime,
videoInfo,
getRoughCurrentTime
});
//get messages from the background script and the popup
@ -178,7 +180,7 @@ function messageListener(request: any, sender: any, sendResponse: (response: any
return
case "getCurrentTime":
sendResponse({
currentTime: video.currentTime
currentTime: getRoughCurrentTime()
});
break;
@ -461,6 +463,7 @@ function cancelSponsorSchedule(): void {
*/
function startSponsorSchedule(includeIntersectingSegments: boolean = false, currentTime?: number): void {
cancelSponsorSchedule();
if (video.paused) return;
if (Config.config.disableSkipping || channelWhitelisted || (channelID === null && Config.config.forceChannelCheck)){
@ -478,6 +481,7 @@ function startSponsorSchedule(includeIntersectingSegments: boolean = false, curr
let currentSkip = skipInfo.array[skipInfo.index];
let skipTime: number[] = [currentSkip.segment[0], skipInfo.array[skipInfo.endIndex].segment[1]];
let timeUntilSponsor = skipTime[0] - currentTime;
let videoID = sponsorVideoID;
// Don't skip if this category should not be skipped
if (utils.getCategorySelection(currentSkip.category).option === CategorySkipOption.ShowOverlay) return;
@ -486,7 +490,7 @@ function startSponsorSchedule(includeIntersectingSegments: boolean = false, curr
let forcedSkipTime: number = null;
let forcedIncludeIntersectingSegments = false;
if (incorrectVideoIDCheck()) return;
if (incorrectVideoIDCheck(videoID)) return;
if (video.currentTime >= skipTime[0] && video.currentTime < skipTime[1]) {
skipToTime(video, skipInfo.endIndex, skipInfo.array, skipInfo.openNotice);
@ -515,9 +519,9 @@ function startSponsorSchedule(includeIntersectingSegments: boolean = false, curr
*
* TODO: Remove this bug catching if statement when the bug is found
*/
function incorrectVideoIDCheck(): boolean {
function incorrectVideoIDCheck(videoID?: string): boolean {
let currentVideoID = getYouTubeVideoID(document.URL);
if (currentVideoID !== sponsorVideoID) {
if (currentVideoID !== (videoID || sponsorVideoID)) {
// Something has really gone wrong
console.error("[SponsorBlock] The videoID recorded when trying to skip is different than what it should be.");
console.error("[SponsorBlock] VideoID recorded: " + sponsorVideoID + ". Actual VideoID: " + currentVideoID);
@ -967,7 +971,7 @@ function skipToTime(v: HTMLVideoElement, index: number, sponsorTimes: SponsorTim
//auto-upvote this sponsor
if (Config.config.trackViewCount && autoSkip && Config.config.autoUpvote) {
vote(1, currentUUID, null);
vote(1, currentUUID);
}
}
@ -1117,6 +1121,36 @@ async function updateVisibilityOfPlayerControlsButton(): Promise<boolean> {
return createdButtons;
}
/**
* Used for submitting. This will use the HTML displayed number when required as the video's
* current time is out of date while scrubbing or at the end of the video. This is not needed
* for sponsor skipping as the video is not playing during these times.
*/
function getRoughCurrentTime(): number {
let htmlCurrentTimeString = document.querySelector(".ytp-time-current").textContent;
let htmlDurationString = document.querySelector(".ytp-time-duration").textContent;
// Used to check if endscreen content is visible
let endScreenContent = document.querySelector(".ytp-endscreen-content");
// Used to check autoplay display
let autoPlayDisplay: HTMLDivElement = document.querySelector(".ytp-upnext");
if (htmlCurrentTimeString == htmlDurationString
|| endScreenContent.childElementCount > 0 || autoPlayDisplay.style.display !== "none") {
// At the end of the video
return video.duration;
}
let htmlCurrentTimeSections = htmlCurrentTimeString.split(":")[0];
let htmlCurrentTime: number = parseInt(htmlCurrentTimeSections[0]) * 60 + parseInt(htmlCurrentTimeSections[1]);
if (Math.abs(video.currentTime - htmlCurrentTime) > 3) {
return htmlCurrentTime;
} else {
return video.currentTime;
}
}
function startSponsorClicked() {
//it can't update to this info yet
closeInfoMenu();
@ -1126,11 +1160,11 @@ function startSponsorClicked() {
//add to sponsorTimes
if (sponsorTimesSubmitting.length > 0 && sponsorTimesSubmitting[sponsorTimesSubmitting.length - 1].segment.length < 2) {
//it is an end time
sponsorTimesSubmitting[sponsorTimesSubmitting.length - 1].segment[1] = video.currentTime;
sponsorTimesSubmitting[sponsorTimesSubmitting.length - 1].segment[1] = getRoughCurrentTime();
} else {
//it is a start time
sponsorTimesSubmitting.push({
segment: [video.currentTime],
segment: [getRoughCurrentTime()],
UUID: null,
// Default to sponsor
category: "sponsor"
@ -1306,7 +1340,7 @@ function clearSponsorTimes() {
}
//if skipNotice is null, it will not affect the UI
function vote(type, UUID, skipNotice?: SkipNoticeComponent) {
function vote(type: number, UUID: string, category?: string, skipNotice?: SkipNoticeComponent) {
if (skipNotice !== null && skipNotice !== undefined) {
//add loading info
skipNotice.addVoteButtonInfo.bind(skipNotice)("Loading...")
@ -1319,7 +1353,7 @@ function vote(type, UUID, skipNotice?: SkipNoticeComponent) {
if (sponsorIndex == -1 || sponsorTimes[sponsorIndex].UUID === null) return;
// See if the local time saved count and skip count should be saved
if (type == 0 && sponsorSkipped[sponsorIndex] || type == 1 && !sponsorSkipped[sponsorIndex]) {
if (type === 0 && sponsorSkipped[sponsorIndex] || type === 1 && !sponsorSkipped[sponsorIndex]) {
let factor = 1;
if (type == 0) {
factor = -1;
@ -1336,15 +1370,16 @@ function vote(type, UUID, skipNotice?: SkipNoticeComponent) {
chrome.runtime.sendMessage({
message: "submitVote",
type: type,
UUID: UUID
UUID: UUID,
category: category
}, function(response) {
if (response != undefined) {
//see if it was a success or failure
if (skipNotice != null) {
if (response.successType == 1 || (response.successType == -1 && response.statusCode == 429)) {
//success (treat rate limits as a success)
if (type == 0) {
skipNotice.afterDownvote.bind(skipNotice)();
if (type === 0 || category) {
skipNotice.afterDownvote.bind(skipNotice)(type, category);
}
} else if (response.successType == 0) {
//failure: duplicate vote

86
src/js-components/previewBar.ts
View file

@ -50,11 +50,11 @@ let barTypes = {
color: "#bfbf35",
opacity: "0.7"
},
"offtopic": {
"music_offtopic": {
color: "#ff9900",
opacity: "0.7"
},
"preview-offtopic": {
"preview-music_offtopic": {
color: "#a6634a",
opacity: "0.7"
}
@ -65,6 +65,9 @@ class PreviewBar {
parent: any;
onMobileYouTube: boolean;
timestamps: number[][];
types: string;
constructor(parent, onMobileYouTube) {
this.container = document.createElement('ul');
this.container.id = 'previewbar';
@ -73,6 +76,82 @@ class PreviewBar {
this.onMobileYouTube = onMobileYouTube;
this.updatePosition(parent);
this.setupHoverText();
}
setupHoverText() {
let seekBar = document.querySelector(".ytp-progress-bar-container");
// Create label placeholder
let tooltipTextWrapper = document.querySelector(".ytp-tooltip-text-wrapper");
let titleTooltip = document.querySelector(".ytp-tooltip-title");
let categoryTooltip = document.createElement("div");
categoryTooltip.className = "sbHidden ytp-tooltip-title";
categoryTooltip.id = "sponsor-block-category-tooltip"
tooltipTextWrapper.insertBefore(categoryTooltip, titleTooltip.nextSibling);
let mouseOnSeekBar = false;
seekBar.addEventListener("mouseenter", (event) => {
mouseOnSeekBar = true;
});
seekBar.addEventListener("mouseleave", (event) => {
mouseOnSeekBar = false;
categoryTooltip.classList.add("sbHidden");
});
const observer = new MutationObserver(() => {
if (!mouseOnSeekBar) return;
let tooltips = document.querySelectorAll(".ytp-tooltip-text");
for (const tooltip of tooltips) {
let splitData = tooltip.textContent.split(":");
if (splitData.length === 2 && !isNaN(parseInt(splitData[0])) && !isNaN(parseInt(splitData[1]))) {
// Add label
let timeInSeconds = parseInt(splitData[0]) * 60 + parseInt(splitData[1]);
// Find category at that location
let category = null;
for (let i = 0; i < this.timestamps.length; i++) {
if (this.timestamps[i][0] < timeInSeconds && this.timestamps[i][1] > timeInSeconds){
category = this.types[i];
}
}
if (category === null && !categoryTooltip.classList.contains("sbHidden")) {
categoryTooltip.classList.add("sbHidden");
tooltipTextWrapper.classList.remove("sbTooltipTwoTitleThumbnailOffset");
tooltipTextWrapper.classList.remove("sbTooltipOneTitleThumbnailOffset");
} else if (category !== null) {
categoryTooltip.classList.remove("sbHidden");
categoryTooltip.textContent = chrome.i18n.getMessage("category_" + category)
|| (chrome.i18n.getMessage("preview") + " " + chrome.i18n.getMessage("category_" + category.split("preview-")[1]));
// There is a title now
tooltip.classList.remove("ytp-tooltip-text-no-title");
// Add the correct offset for the number of titles there are
if (titleTooltip.textContent !== "") {
if (!tooltipTextWrapper.classList.contains("sbTooltipTwoTitleThumbnailOffset")) {
tooltipTextWrapper.classList.add("sbTooltipTwoTitleThumbnailOffset");
}
} else if (!tooltipTextWrapper.classList.contains("sbTooltipOneTitleThumbnailOffset")) {
tooltipTextWrapper.classList.add("sbTooltipOneTitleThumbnailOffset");
}
}
break;
}
}
});
observer.observe(tooltipTextWrapper, {
childList: true,
subtree: true
});
}
updatePosition(parent) {
@ -109,6 +188,9 @@ class PreviewBar {
return;
}
this.timestamps = timestamps;
this.types = types;
// to avoid rounding error resulting in width more than 100%
duration = Math.floor(duration * 100) / 100;
let width;

6
src/types.ts
View file

@ -3,7 +3,7 @@ import SkipNoticeComponent from "./components/SkipNoticeComponent";
interface ContentContainer {
(): {
vote: (type: any, UUID: any, skipNotice?: SkipNoticeComponent) => void,
vote: (type: any, UUID: any, category?: string, skipNotice?: SkipNoticeComponent) => void,
dontShowNoticeAgain: () => void,
unskipSponsorTime: (UUID: any) => void,
sponsorTimes: SponsorTime[],
@ -16,7 +16,9 @@ interface ContentContainer {
sponsorSubmissionNotice: SubmissionNotice,
resetSponsorSubmissionNotice: () => void,
changeStartSponsorButton: (showStartSponsor: any, uploadButtonVisible: any) => Promise<boolean>,
previewTime: (time: number) => void
previewTime: (time: number) => void,
videoInfo: any,
getRoughCurrentTime: () => number
}
}