Add preview category

Closes https://github.com/ajayyy/SponsorBlock/issues/444

(cherry picked from commit a10d7c338c)
This commit is contained in:
Ajay Ramachandran
2021-03-30 22:50:36 -04:00
parent e587addeee
commit 861ba4869e
5 changed files with 66 additions and 45 deletions

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 connect to",
"categoryList": ["sponsor", "intro", "outro", "interaction", "selfpromo", "music_offtopic"]
"categoryList": ["sponsor", "selfpromo", "interaction", "intro", "outro", "preview", "music_offtopic"]
}

View File

@@ -446,6 +446,9 @@
"preview": {
"message": "Preview"
},
"unsubmitted": {
"message": "Unsubmitted"
},
"inspect": {
"message": "Inspect"
},
@@ -480,6 +483,21 @@
"category_sponsor_description": {
"message": "Paid promotion, paid referrals and direct advertisements. Not for self-promotion or free shoutouts to causes/creators/websites/products they like."
},
"category_selfpromo": {
"message": "Unpaid/Self Promotion"
},
"category_selfpromo_description": {
"message": "Similar to \"sponsor\" except for unpaid or self promotion. This includes sections about merchandise, donations, or information about who they collaborated with."
},
"category_interaction": {
"message": "Interaction Reminder (Subscribe)"
},
"category_interaction_description": {
"message": "When there is a short reminder to like, subscribe or follow them in the middle of content. If it is long or about something specific, it should be under self promotion instead."
},
"category_interaction_short": {
"message": "Interaction Reminder"
},
"category_intro": {
"message": "Intermission/Intro Animation"
},
@@ -495,20 +513,14 @@
"category_outro_description": {
"message": "Credits or when the YouTube endcards appear. Not for conclusions with information."
},
"category_interaction": {
"message": "Interaction Reminder (Subscribe)"
"category_preview": {
"message": "Preview/Recap"
},
"category_interaction_description": {
"message": "When there is a short reminder to like, subscribe or follow them in the middle of content. If it is long or about something specific, it should be under self promotion instead."
"category_preview_description": {
"message": "Quick recap of previous episodes, or a preview of what's coming up later in the current video. Meant for edited together clips, not for spoken summaries."
},
"category_interaction_short": {
"message": "Interaction Reminder"
},
"category_selfpromo": {
"message": "Unpaid/Self Promotion"
},
"category_selfpromo_description": {
"message": "Similar to \"sponsor\" except for unpaid or self promotion. This includes sections about merchandise, donations, or information about who they collaborated with."
"category_preview_short": {
"message": "Preview"
},
"category_music_offtopic": {
"message": "Music: Non-Music Section"
@@ -538,7 +550,7 @@
"message": "Your color is formatted incorrectly. It should be a 3 or 6 digit hex code with a number sign at the beginning."
},
"previewColor": {
"message": "Preview Color",
"message": "Unsubmitted Color",
"description": "Referring to submissions that have not been sent to the server yet."
},
"seekBarColor": {

View File

@@ -47,14 +47,16 @@ interface SBConfig {
"preview-chooseACategory": PreviewBarOption,
"sponsor": PreviewBarOption,
"preview-sponsor": PreviewBarOption,
"selfpromo": PreviewBarOption,
"preview-selfpromo": PreviewBarOption,
"interaction": PreviewBarOption,
"preview-interaction": PreviewBarOption,
"intro": PreviewBarOption,
"preview-intro": PreviewBarOption,
"outro": PreviewBarOption,
"preview-outro": PreviewBarOption,
"interaction": PreviewBarOption,
"preview-interaction": PreviewBarOption,
"selfpromo": PreviewBarOption,
"preview-selfpromo": PreviewBarOption,
"preview": PreviewBarOption,
"preview-preview": PreviewBarOption,
"music_offtopic": PreviewBarOption,
"preview-music_offtopic": PreviewBarOption,
}
@@ -192,6 +194,22 @@ const Config: SBObject = {
color: "#007800",
opacity: "0.7"
},
"selfpromo": {
color: "#ffff00",
opacity: "0.7"
},
"preview-selfpromo": {
color: "#bfbf35",
opacity: "0.7"
},
"interaction": {
color: "#cc00ff",
opacity: "0.7"
},
"preview-interaction": {
color: "#6c0087",
opacity: "0.7"
},
"intro": {
color: "#00ffff",
opacity: "0.7"
@@ -208,20 +226,12 @@ const Config: SBObject = {
color: "#000070",
opacity: "0.7"
},
"interaction": {
color: "#cc00ff",
"preview": {
color: "#0b9d65",
opacity: "0.7"
},
"preview-interaction": {
color: "#6c0087",
opacity: "0.7"
},
"selfpromo": {
color: "#ffff00",
opacity: "0.7"
},
"preview-selfpromo": {
color: "#bfbf35",
"preview-preview": {
color: "#065b3a",
opacity: "0.7"
},
"music_offtopic": {

View File

@@ -805,7 +805,7 @@ function updatePreviewBar(): void {
previewBarSegments.push({
segment: segment.segment as [number, number],
category: segment.category,
preview: false,
unsubmitted: false,
});
});
}
@@ -814,7 +814,7 @@ function updatePreviewBar(): void {
previewBarSegments.push({
segment: segment.segment as [number, number],
category: segment.category,
preview: true,
unsubmitted: true,
});
});
@@ -876,14 +876,14 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
const minSponsorTimeIndex = sponsorStartTimes.indexOf(Math.min(...sponsorStartTimesAfterCurrentTime));
const endTimeIndex = getLatestEndTimeIndex(sponsorTimes, minSponsorTimeIndex);
const previewSponsorStartTimes = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments);
const previewSponsorStartTimesAfterCurrentTime = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments, currentTime, false, false);
const unsubmittedSponsorStartTimes = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments);
const unsubmittedSponsorStartTimesAfterCurrentTime = getStartTimes(sponsorTimesSubmitting, includeIntersectingSegments, includeNonIntersectingSegments, currentTime, false, false);
const minPreviewSponsorTimeIndex = previewSponsorStartTimes.indexOf(Math.min(...previewSponsorStartTimesAfterCurrentTime));
const previewEndTimeIndex = getLatestEndTimeIndex(sponsorTimesSubmitting, minPreviewSponsorTimeIndex);
const minUnsubmittedSponsorTimeIndex = unsubmittedSponsorStartTimes.indexOf(Math.min(...unsubmittedSponsorStartTimesAfterCurrentTime));
const previewEndTimeIndex = getLatestEndTimeIndex(sponsorTimesSubmitting, minUnsubmittedSponsorTimeIndex);
if ((minPreviewSponsorTimeIndex === -1 && minSponsorTimeIndex !== -1) ||
sponsorStartTimes[minSponsorTimeIndex] < previewSponsorStartTimes[minPreviewSponsorTimeIndex]) {
if ((minUnsubmittedSponsorTimeIndex === -1 && minSponsorTimeIndex !== -1) ||
sponsorStartTimes[minSponsorTimeIndex] < unsubmittedSponsorStartTimes[minUnsubmittedSponsorTimeIndex]) {
return {
array: sponsorTimes,
index: minSponsorTimeIndex,
@@ -893,7 +893,7 @@ function getNextSkipIndex(currentTime: number, includeIntersectingSegments: bool
} else {
return {
array: sponsorTimesSubmitting,
index: minPreviewSponsorTimeIndex,
index: minUnsubmittedSponsorTimeIndex,
endIndex: previewEndTimeIndex,
openNotice: false
};

View File

@@ -14,7 +14,7 @@ const TOOLTIP_VISIBLE_CLASS = 'sponsorCategoryTooltipVisible';
export interface PreviewBarSegment {
segment: [number, number];
category: string;
preview: boolean;
unsubmitted: boolean;
}
class PreviewBar {
@@ -117,8 +117,8 @@ class PreviewBar {
} else if (segment !== null) {
this.tooltipContainer.classList.add(TOOLTIP_VISIBLE_CLASS);
if (segment.preview) {
this.categoryTooltip.textContent = chrome.i18n.getMessage("preview") + " " + utils.shortCategoryName(segment.category);
if (segment.unsubmitted) {
this.categoryTooltip.textContent = chrome.i18n.getMessage("unsubmitted") + " " + utils.shortCategoryName(segment.category);
} else {
this.categoryTooltip.textContent = utils.shortCategoryName(segment.category);
}
@@ -181,13 +181,12 @@ class PreviewBar {
});
}
createBar({category, preview, segment}: PreviewBarSegment): HTMLLIElement {
createBar({category, unsubmitted, segment}: PreviewBarSegment): HTMLLIElement {
const bar = document.createElement('li');
bar.classList.add('previewbar');
bar.innerHTML = '&nbsp;';
const fullCategoryName = (preview ? 'preview-' : '') + category;
const fullCategoryName = (unsubmitted ? 'preview-' : '') + category;
bar.setAttribute('sponsorblock-category', fullCategoryName);
bar.style.backgroundColor = Config.config.barTypes[fullCategoryName]?.color;