From ca2727655eff4cbcfa6e3e7eff2befd0fd2bb331 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 3 Jun 2020 20:20:02 -0400 Subject: [PATCH 01/13] Added customizable seek bar colors --- public/_locales/en/messages.json | 17 +++++ src/components/CategoryChooserComponent.tsx | 21 +++++- .../CategorySkipOptionsComponent.tsx | 69 +++++++++++++++-- src/config.ts | 74 ++++++++++++++++++- src/js-components/previewBar.ts | 59 +-------------- src/types.ts | 8 +- src/utils.ts | 4 + 7 files changed, 186 insertions(+), 66 deletions(-) diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index 30e9be2e..06863e14 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -510,6 +510,23 @@ "showOverlay": { "message": "Show In Seek Bar" }, + "colorFormatIncorrect": { + "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", + "description": "Referring to submissions that have not been sent to the server yet." + }, + "seekBarColor": { + "message": "Seek Bar Color" + }, + "category": { + "message": "Category" + }, + "skipOption": { + "message": "Skip Option", + "description": "Used on the options page to describe the ways to skip the segment (auto skip, manual, etc.)" + }, "enableTestingServer": { "message": "Enable Beta Testing Server" }, diff --git a/src/components/CategoryChooserComponent.tsx b/src/components/CategoryChooserComponent.tsx index 3ec272fa..1aa401c1 100644 --- a/src/components/CategoryChooserComponent.tsx +++ b/src/components/CategoryChooserComponent.tsx @@ -28,6 +28,26 @@ class CategoryChooserComponent extends React.Component + {/* Headers */} + + + {chrome.i18n.getMessage("category")} + + + + {chrome.i18n.getMessage("skipOption")} + + + + {chrome.i18n.getMessage("seekBarColor")} + + + + {chrome.i18n.getMessage("previewColor")} + + + {this.getCategorySkipOptions()} @@ -40,7 +60,6 @@ class CategoryChooserComponent extends React.Component ); diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx index 58301d7b..eef5636d 100644 --- a/src/components/CategorySkipOptionsComponent.tsx +++ b/src/components/CategorySkipOptionsComponent.tsx @@ -2,14 +2,19 @@ import * as React from "react"; import Config from "../config" import { CategorySkipOption } from "../types"; +import Utils from "../utils"; + +const utils = new Utils(); export interface CategorySkipOptionsProps { category: string; - defaultColor: string; + defaultColor?: string; + defaultPreviewColor?: string; } export interface CategorySkipOptionsState { color: string; + previewColor: string; } class CategorySkipOptionsComponent extends React.Component { @@ -19,7 +24,8 @@ class CategorySkipOptionsComponent extends React.Component + + + this.setColorState(event, false)} + value={this.state.color} /> + - {/* TODO: Add colour chooser */} + + this.setColorState(event, true)} + value={this.state.previewColor} /> + + + +
this.save()}> + {chrome.i18n.getMessage("save")} +
+ + + ); } @@ -112,7 +141,7 @@ class CategorySkipOptionsComponent extends React.Component, preview: boolean) { + if (preview) { + this.setState({ + previewColor: event.target.value + }); + } else { + this.setState({ + color: event.target.value + }); + } + } + + // Save text box data + save() { + // Validate colors + let checkVar = [this.state.color, this.state.previewColor] + for (const color of checkVar) { + if (color[0] !== "#" || (color.length !== 7 && color.length !== 4) || !utils.isHex(color.slice(1))) { + alert(chrome.i18n.getMessage("colorFormatIncorrect") + " " + color.slice(1) + " " + utils.isHex(color.slice(1)) + " " + utils.isHex("abcd123")); + return; + } + } + + // Save colors + Config.config.barTypes[this.props.category].color = this.state.color; + Config.config.barTypes["preview-" + this.props.category].color = this.state.previewColor; + // Make listener get called + Config.config.barTypes = Config.config.barTypes; + } } export default CategorySkipOptionsComponent; \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index 1b0a56d1..ce7efc91 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,5 +1,5 @@ import * as CompileConfig from "../config.json"; -import { CategorySelection, CategorySkipOption } from "./types"; +import { CategorySelection, CategorySkipOption, PreviewBarOption } from "./types"; import Utils from "./utils"; const utils = new Utils(); @@ -33,7 +33,23 @@ interface SBConfig { testingServer: boolean, // What categories should be skipped - categorySelections: CategorySelection[] + categorySelections: CategorySelection[], + + // Preview bar + barTypes: { + "sponsor": PreviewBarOption, + "preview-sponsor": PreviewBarOption, + "intro": PreviewBarOption, + "preview-intro": PreviewBarOption, + "outro": PreviewBarOption, + "preview-outro": PreviewBarOption, + "interaction": PreviewBarOption, + "preview-interaction": PreviewBarOption, + "selfpromo": PreviewBarOption, + "preview-selfpromo": PreviewBarOption, + "music_offtopic": PreviewBarOption, + "preview-music_offtopic": PreviewBarOption + } } interface SBObject { @@ -134,7 +150,59 @@ var Config: SBObject = { categorySelections: [{ name: "sponsor", option: CategorySkipOption.AutoSkip - }] + }], + + // Preview bar + barTypes: { + "sponsor": { + color: "#00d400", + opacity: "0.7" + }, + "preview-sponsor": { + color: "#007800", + opacity: "0.7" + }, + "intro": { + color: "#00ffff", + opacity: "0.7" + }, + "preview-intro": { + color: "#008080", + opacity: "0.7" + }, + "outro": { + color: "#0202ed", + opacity: "0.7" + }, + "preview-outro": { + color: "#000070", + opacity: "0.7" + }, + "interaction": { + color: "#cc00ff", + opacity: "0.7" + }, + "preview-interaction": { + color: "#6c0087", + opacity: "0.7" + }, + "selfpromo": { + color: "#ffff00", + opacity: "0.7" + }, + "preview-selfpromo": { + color: "#bfbf35", + opacity: "0.7" + }, + "music_offtopic": { + color: "#ff9900", + opacity: "0.7" + }, + "preview-music_offtopic": { + color: "#a6634a", + opacity: "0.7" + } + } }, localConfig: null, config: null, diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts index a7e5c8ec..e0931d91 100644 --- a/src/js-components/previewBar.ts +++ b/src/js-components/previewBar.ts @@ -5,60 +5,7 @@ 'use strict'; -let barTypes = { - "undefined": { - color: "#00d400", - opacity: "0.7" - }, - "sponsor": { - color: "#00d400", - opacity: "0.7" - }, - "preview-sponsor": { - color: "#007800", - opacity: "0.7" - }, - "intro": { - color: "#00ffff", - opacity: "0.7" - }, - "preview-intro": { - color: "#008080", - opacity: "0.7" - }, - "outro": { - color: "#0202ed", - opacity: "0.7" - }, - "preview-outro": { - color: "#000070", - opacity: "0.7" - }, - "interaction": { - color: "#cc00ff", - opacity: "0.7" - }, - "preview-interaction": { - color: "#6c0087", - opacity: "0.7" - }, - "selfpromo": { - color: "#ffff00", - opacity: "0.7" - }, - "preview-selfpromo": { - color: "#bfbf35", - opacity: "0.7" - }, - "music_offtopic": { - color: "#ff9900", - opacity: "0.7" - }, - "preview-music_offtopic": { - color: "#a6634a", - opacity: "0.7" - } -}; +import Config from "../config"; class PreviewBar { container: HTMLUListElement; @@ -208,8 +155,8 @@ class PreviewBar { let bar = this.createBar(); bar.setAttribute('data-vs-segment-type', types[i]); - bar.style.backgroundColor = barTypes[types[i]].color; - if (!this.onMobileYouTube) bar.style.opacity = barTypes[types[i]].opacity; + bar.style.backgroundColor = Config.config.barTypes[types[i]].color; + if (!this.onMobileYouTube) bar.style.opacity = Config.config.barTypes[types[i]].opacity; bar.style.width = width + '%'; bar.style.left = (timestamps[i][0] / duration * 100) + "%"; bar.style.position = "absolute" diff --git a/src/types.ts b/src/types.ts index 3bef9248..3d0f783e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -58,6 +58,11 @@ interface SponsorTime { hidden?: SponsorHideType; } +interface PreviewBarOption { + color: string, + opacity: string +} + type VideoID = string; export { @@ -68,5 +73,6 @@ export { CategorySkipOption, SponsorTime, VideoID, - SponsorHideType + SponsorHideType, + PreviewBarOption }; \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts index f3501b5d..6e12a0e5 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -358,6 +358,10 @@ class Utils { return window.location.protocol === "http:" || window.location.protocol === "https:"; } + isHex(num: string): boolean { + return Boolean(num.match(/^[0-9a-f]+$/i)); + } + /** * Is this Firefox (web-extensions) */ From fa7f5771779d3c982253364c0a7c1e1aa8f55aa7 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 3 Jun 2020 20:30:25 -0400 Subject: [PATCH 02/13] Fix skip options --- src/components/CategorySkipOptionsComponent.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx index eef5636d..5b89c94a 100644 --- a/src/components/CategorySkipOptionsComponent.tsx +++ b/src/components/CategorySkipOptionsComponent.tsx @@ -59,6 +59,7 @@ class CategorySkipOptionsComponent extends React.Component From d9800b3c14026c26976ecb67e82883e03c92e5cd Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 3 Jun 2020 20:31:14 -0400 Subject: [PATCH 03/13] Added options page to help page as iframe --- public/help/index_en.html | 8 ++++---- src/components/CategorySkipOptionsComponent.tsx | 2 ++ 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/public/help/index_en.html b/public/help/index_en.html index 163e26e5..2c363ac3 100644 --- a/public/help/index_en.html +++ b/public/help/index_en.html @@ -30,15 +30,15 @@ Come contribute, make some suggestions and help out in the Discord: https://discord.gg/QnmVMpU

-
- Enable optional features -
+

Please review the options below

- Some features, such as support for non third-party YouTube sites, are disabled by default and can be enabled in the options. These can be enabled or disabled at any time. + Many features are disabled by default. If you want to skip Intros, outros, use Invidious, please enable the specific options. These can be enabled or disabled at any time. You can also hide/show all UI elements added to the YouTube page.

+ +

How skipping works

diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx index 5b89c94a..75b7f397 100644 --- a/src/components/CategorySkipOptionsComponent.tsx +++ b/src/components/CategorySkipOptionsComponent.tsx @@ -45,6 +45,8 @@ class CategorySkipOptionsComponent extends React.Component Date: Wed, 3 Jun 2020 20:42:38 -0400 Subject: [PATCH 04/13] Added short category names --- public/_locales/en/messages.json | 12 ++++++++++++ src/components/SkipNoticeComponent.tsx | 3 ++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index 06863e14..a1419071 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -486,21 +486,33 @@ "category_intro": { "message": "Intro Animation" }, + "category_intro_short": { + "message": "Intro" + }, "category_outro": { "message": "Endcards/Credits" }, "category_interaction": { "message": "Interaction Reminder (Subscribe)" }, + "category_interaction_short": { + "message": "Interaction Reminder" + }, "category_selfpromo": { "message": "Unpaid/Self Promotion" }, "category_music_offtopic": { "message": "Music: Non-Music Section" }, + "category_music_offtopic_short": { + "message": "Non-Music" + }, "category_livestream_messages": { "message": "Livestream: Donation/Message Readings" }, + "category_livestream_messages_short": { + "message": "Message Reading" + }, "disable": { "message": "Disable" }, diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx index 7e6c4751..4aedacec 100644 --- a/src/components/SkipNoticeComponent.tsx +++ b/src/components/SkipNoticeComponent.tsx @@ -73,7 +73,8 @@ class SkipNoticeComponent extends React.Component 1 ? "multipleSegments" : "category_" + this.segments[0].category); + let categoryName = chrome.i18n.getMessage(this.segments.length > 1 ? "multipleSegments" + : "category_" + this.segments[0].category + "_short") || chrome.i18n.getMessage("category_" + this.segments[0].category); let noticeTitle = categoryName + " " + chrome.i18n.getMessage("skipped"); if (!this.autoSkip) { noticeTitle = chrome.i18n.getMessage("skip") + " " + categoryName + "?"; From b4e03ae05509d50685f75ff01f5406d1c7f45620 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 3 Jun 2020 21:00:32 -0400 Subject: [PATCH 05/13] Added category descriptions --- public/_locales/en/messages.json | 18 ++++ .../CategorySkipOptionsComponent.tsx | 89 +++++++++++-------- 2 files changed, 68 insertions(+), 39 deletions(-) diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index a1419071..f3690e6c 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -483,27 +483,45 @@ "category_sponsor": { "message": "Sponsor" }, + "category_sponsor_description": { + "message": "Paid promotion, paid referrals and direct advertisements. Not for self-promotion or free shoutouts to causes or other creators/websites/products they like." + }, "category_intro": { "message": "Intro Animation" }, + "category_intro_description": { + "message": "Intro animations that are recurring in the series or provide no direct value. This should not be used on music videos." + }, "category_intro_short": { "message": "Intro" }, "category_outro": { "message": "Endcards/Credits" }, + "category_outro_description": { + "message": "Credits or when the YouTube endcards appear. Not for spoken conclusions. This should not include useful content. This should not be used on music videos." + }, "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_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_music_offtopic": { "message": "Music: Non-Music Section" }, + "category_music_offtopic_description": { + "message": "Only for use in music videos. This includes introductions or outros in music videos." + }, "category_music_offtopic_short": { "message": "Non-Music" }, diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx index 75b7f397..57fab501 100644 --- a/src/components/CategorySkipOptionsComponent.tsx +++ b/src/components/CategorySkipOptionsComponent.tsx @@ -45,54 +45,65 @@ class CategorySkipOptionsComponent extends React.Component - - {chrome.i18n.getMessage("category_" + this.props.category)} - + <> + + + {chrome.i18n.getMessage("category_" + this.props.category)} + - - - - - - this.setColorState(event, false)} - value={this.state.color} /> - + + + + + + this.setColorState(event, false)} + value={this.state.color} /> + - - this.setColorState(event, true)} - value={this.state.previewColor} /> - + + this.setColorState(event, true)} + value={this.state.previewColor} /> + - -

this.save()}> - {chrome.i18n.getMessage("save")} -
- + +
this.save()}> + {chrome.i18n.getMessage("save")} +
+ - - + + + + + + {chrome.i18n.getMessage("category_" + this.props.category + "_description")} + + + + ); } From 7de907fa2312c3eff64ba80afa23644b203c6cee Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Thu, 4 Jun 2020 21:46:56 -0400 Subject: [PATCH 06/13] Added help button to submission notice --- manifest/manifest.json | 1 + public/_locales/en/messages.json | 3 ++ public/content.css | 18 +++++++ public/icons/help.svg | 58 +++++++++++++++++++++ src/components/SponsorTimeEditComponent.tsx | 23 +++++--- 5 files changed, 96 insertions(+), 7 deletions(-) create mode 100644 public/icons/help.svg diff --git a/manifest/manifest.json b/manifest/manifest.json index 59dc3272..7c4e766f 100644 --- a/manifest/manifest.json +++ b/manifest/manifest.json @@ -32,6 +32,7 @@ "icons/downvote.png", "icons/thumbs_down.svg", "icons/thumbs_up.svg", + "icons/help.svg", "icons/report.png", "icons/close.png", "icons/beep.ogg", diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index f3690e6c..cecec1ec 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -610,5 +610,8 @@ }, "multipleSegments": { "message": "Multiple Segments" + }, + "categoryGuidelines": { + "message": "Category Guidelines" } } diff --git a/public/content.css b/public/content.css index 66838a9f..95009d26 100644 --- a/public/content.css +++ b/public/content.css @@ -394,4 +394,22 @@ input::-webkit-inner-spin-button { color: white; border-width: 3px; padding: 3px; +} + +.helpButton { + +} + +.helpButton { + height: 25px; + cursor: pointer; + padding: 5px; + + margin: auto; + top: 0; + bottom: 0; + position: absolute; +} +.helpButton:hover { + filter: brightness(80%); } \ No newline at end of file diff --git a/public/icons/help.svg b/public/icons/help.svg new file mode 100644 index 00000000..571216ba --- /dev/null +++ b/public/icons/help.svg @@ -0,0 +1,58 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/components/SponsorTimeEditComponent.tsx b/src/components/SponsorTimeEditComponent.tsx index 73e9b422..52c1da0c 100644 --- a/src/components/SponsorTimeEditComponent.tsx +++ b/src/components/SponsorTimeEditComponent.tsx @@ -182,14 +182,23 @@ class SponsorTimeEditComponent extends React.Component + - + chrome.runtime.sendMessage({"message": "openConfig"})}> + + +
From c509b8807c33a15b44fbff7c06dd804e31a5aba5 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Fri, 5 Jun 2020 19:37:39 -0400 Subject: [PATCH 07/13] Shortened sponsor description --- public/_locales/en/messages.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index cecec1ec..b876f5e8 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -484,7 +484,7 @@ "message": "Sponsor" }, "category_sponsor_description": { - "message": "Paid promotion, paid referrals and direct advertisements. Not for self-promotion or free shoutouts to causes or other creators/websites/products they like." + "message": "Paid promotion, paid referrals and direct advertisements. Not for self-promotion or free shoutouts to causes/creators/websites/products they like." }, "category_intro": { "message": "Intro Animation" From 730d9660192e5d9813f8946238984bcf4c28de40 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Fri, 5 Jun 2020 21:26:07 -0400 Subject: [PATCH 08/13] Lowered category description width --- public/options/options.css | 4 ++++ src/components/CategorySkipOptionsComponent.tsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/public/options/options.css b/public/options/options.css index 36db654e..8ad87e3d 100644 --- a/public/options/options.css +++ b/public/options/options.css @@ -346,4 +346,8 @@ svg { font-size: 14px; padding: 5px; border-radius: 5px; +} + +.categoryColorTextBox { + width: 60px; } \ No newline at end of file diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx index 57fab501..0a44b172 100644 --- a/src/components/CategorySkipOptionsComponent.tsx +++ b/src/components/CategorySkipOptionsComponent.tsx @@ -98,7 +98,7 @@ class CategorySkipOptionsComponent extends React.Component + colSpan={2}> {chrome.i18n.getMessage("category_" + this.props.category + "_description")} From 89cc6ed18496f580207a99283486a572fe98a5d4 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Fri, 5 Jun 2020 21:38:38 -0400 Subject: [PATCH 09/13] Added "read the guidelines button. --- public/_locales/en/messages.json | 8 ++++++-- src/components/SubmissionNoticeComponent.tsx | 9 ++++++++- src/config.ts | 2 ++ src/content.ts | 4 ++++ 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json index b876f5e8..4389af20 100644 --- a/public/_locales/en/messages.json +++ b/public/_locales/en/messages.json @@ -611,7 +611,11 @@ "multipleSegments": { "message": "Multiple Segments" }, - "categoryGuidelines": { - "message": "Category Guidelines" + "guidelines": { + "message": "Guidelines" + }, + "readTheGuidelines": { + "message": "Read The Guidelines!!", + "description": "Show the first time they submit or if they are \"high risk\"" } } diff --git a/src/components/SubmissionNoticeComponent.tsx b/src/components/SubmissionNoticeComponent.tsx index a380fd73..a545c340 100644 --- a/src/components/SubmissionNoticeComponent.tsx +++ b/src/components/SubmissionNoticeComponent.tsx @@ -86,13 +86,20 @@ class SubmissionNoticeComponent extends React.Component - + {/* Last Row */} + {/* Guidelines button */} + + {/* Submit Button */}