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

Buttons now change color depending on state. Added colorPalette config entry

Browse Source
This commit is contained in:
FlorianZahn
2021-10-09 02:43:39 +02:00
parent 44f9ab9806
commit 907bd68e4e
7 changed files with 112 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -700,7 +700,7 @@
"message": "Incorrect/Wrong Timing"
},
"incorrectCategory": {
"message": "Wrong Category"
"message": "Change Category"
},
"nonMusicCategoryOnMusic": {
"message": "This video is categorized as music. Are you sure this has a sponsor? If this is actually a \"Non-Music segment\", open up the extension options and enable this category. Then, you can submit this segment as \"Non-Music\" instead of sponsor. Please read the guidelines if you are confused."
@@ -822,5 +822,8 @@
},
"ContinueVoting": {
"message": "Continue Voting"
},
"ChangeCategoryTooltip": {
"message": "This will instantly apply to your segments"
}
}

9
public/content.css
View File

@@ -254,12 +254,16 @@
.sponsorTimesVoteButtonsContainer {
float: left;
vertical-align:middle;
padding: 2px 5px;
margin-right: 4px;
}
.sponsorTimesVoteButtonsContainer div{
display: inline-block;
}
.sponsorSkipNoticeRightSection {
right: 0;
position: absolute;
@@ -330,7 +334,8 @@
}
.voteButton {
height: 17px;
height: 24px;
width: 24px;
cursor: pointer;
}
.voteButton:hover {

57
src/components/SkipNoticeComponent.tsx
View File

@@ -8,6 +8,10 @@ import SubmissionNotice from "../render/SubmissionNotice";
import { getCategoryActionType, getSkippingText } from "../utils/categoryUtils";
import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
import PencilSvg from "../svg-icons/pencil_svg";
export enum SkipNoticeAction {
None,
Upvote,
@@ -96,7 +100,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
this.segments.sort((a, b) => a.segment[0] - b.segment[0]);
}
//this is the suffix added at the end of every id
// This is the suffix added at the end of every id
for (const segment of this.segments) {
this.idSuffix += segment.UUID;
}
@@ -188,36 +192,37 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
key={0}>
{/* Vote Button Container */}
{!this.state.thanksForVotingText ?
{!this.state.thanksForVotingText ?
<td id={"sponsorTimesVoteButtonsContainer" + this.idSuffix}
className="sponsorTimesVoteButtonsContainer">
{/* Upvote Button */}
<img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
className="sponsorSkipObject voteButton"
style={{marginRight: "10px"}}
src={chrome.extension.getURL("icons/thumbs_up.svg")}
title={chrome.i18n.getMessage("upvoteButtonInfo")}
onClick={() => this.prepAction(SkipNoticeAction.Upvote)}>
</img>
<div id={"sponsorTimesDownvoteButtonsContainerUpvote" + this.idSuffix}
className="voteButton"
style={{marginRight: "5px"}}
title={chrome.i18n.getMessage("upvoteButtonInfo")}
onClick={() => this.prepAction(SkipNoticeAction.Upvote)}>
<ThumbsUpSvg fill={(this.state.actionState === SkipNoticeAction.Upvote) ? Config.config.colorPalette.get("SponsorBlockRed") : Config.config.colorPalette.get("SponsorBlockWhite")} />
</div>
{/* Report Button */}
<img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
className="sponsorSkipObject voteButton"
style={{marginRight: "10px"}}
src={chrome.extension.getURL("icons/thumbs_down.svg")}
title={chrome.i18n.getMessage("reportButtonInfo")}
onClick={() => this.prepAction(SkipNoticeAction.Downvote)}>
</img>
<div id={"sponsorTimesDownvoteButtonsContainerDownvote" + this.idSuffix}
className="voteButton"
style={{marginRight: "5px", marginLeft: "5px"}}
title={chrome.i18n.getMessage("reportButtonInfo")}
onClick={() => this.prepAction(SkipNoticeAction.Downvote)}>
<ThumbsDownSvg fill={(this.state.actionState === SkipNoticeAction.Downvote) ? Config.config.colorPalette.get("SponsorBlockRed") : Config.config.colorPalette.get("SponsorBlockWhite")} />
</div>
{/* Copy and Downvote Button */}
<img id={"sponsorTimesDownvoteButtonsContainer" + this.idSuffix}
className="sponsorSkipObject voteButton voteButtonImageCopyDownvote"
title={chrome.i18n.getMessage("CopyDownvoteButtonInfo")}
src={chrome.extension.getURL("icons/pencil.svg")}
onClick={() => this.adjustEditingState(true)}>
</img>
<div id={"sponsorTimesDownvoteButtonsContainerCopyDownvote" + this.idSuffix}
className="voteButton"
style={{marginLeft: "5px"}}
onClick={() => this.adjustEditingState(true)}>
<PencilSvg fill={(this.state.editing === true ||
this.state.actionState === SkipNoticeAction.CopyDownvote ||
this.state.choosingCategory === true) ? Config.config.colorPalette.get("SponsorBlockRed") : Config.config.colorPalette.get("SponsorBlockWhite")} />
</div>
</td>
:
@@ -250,7 +255,6 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
key={1}>
<button className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeRightButton"
onClick={this.contentContainer().dontShowNoticeAgain}>
{chrome.i18n.getMessage("Hide")}
</button>
</td>
@@ -265,14 +269,15 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
{/* Copy Segment */}
<button className="sponsorSkipObject sponsorSkipNoticeButton"
title={chrome.i18n.getMessage("CopyDownvoteButtonInfo")}
onClick={() => this.prepAction(SkipNoticeAction.CopyDownvote)}>
{chrome.i18n.getMessage("CopyAndDownvote")}
{chrome.i18n.getMessage("CopyAndDownvote")}
</button>
{/* Category vote */}
<button className="sponsorSkipObject sponsorSkipNoticeButton"
title={chrome.i18n.getMessage("ChangeCategoryTooltip")}
onClick={() => this.openCategoryChooser()}>
{chrome.i18n.getMessage("incorrectCategory")}
</button>
</td>

8
src/config.ts
View File

@@ -44,7 +44,8 @@ interface SBConfig {
autoHideInfoButton: boolean,
autoSkipOnMusicVideos: boolean,
highlightCategoryUpdate: boolean,
wikiPages: SBMap<string, string>
wikiPages: SBMap<string, string>,
colorPalette: SBMap<string, string>
// What categories should be skipped
categorySelections: CategorySelection[],
@@ -211,6 +212,11 @@ const Config: SBObject = {
["mute", "https://wiki.sponsor.ajay.app/w/Mute_Segment"],
]),
colorPalette: new SBMap("colorPalette", [
["SponsorBlockRed", "#780303"],
["SponsorBlockWhite", "#ffffff"]
]),
// Preview bar
barTypes: {
"preview-chooseACategory": {

18
src/svg-icons/pencil_svg.tsx Normal file
View File

@@ -0,0 +1,18 @@
import * as React from "react";
const pencilSvg = ({
fill = "#ffffff"
}) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill={fill}
>
<path
d="M14.1 7.1l2.9 2.9L6.1 20.7l-3.6.7.7-3.6L14.1 7.1zm0-2.8L1.4 16.9 0 24l7.1-1.4L19.8 9.9l-5.7-5.7zm7.1 4.3L24 5.7 18.3 0l-2.8 2.8 5.7 5.7z"></path>
</svg>
);
export default pencilSvg;

23
src/svg-icons/thumbs_down_svg.tsx Normal file
View File

@@ -0,0 +1,23 @@
import * as React from "react";
const thumbsDownSvg = ({
fill = "#ffffff"
}) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
fill={fill}
viewBox="0 0 24 24"
>
<path
fill="none"
d="M0 0h24v24H0z">
</path>
<path
d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
></path>
</svg>
);
export default thumbsDownSvg;

22
src/svg-icons/thumbs_up_svg.tsx Normal file
View File

@@ -0,0 +1,22 @@
import * as React from "react";
const thumbsUpSvg = ({
fill = "#ffffff"
}) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
fill={fill}
viewBox="0 0 24 24"
>
<path
fill="none"
d="M0 0h24v24H0V0z"></path>
<path
d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
></path>
</svg>
);
export default thumbsUpSvg;