external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-11-10 01:01:55 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix chapter suggestions disappearing on click

Browse source
This commit is contained in:
Ajay 2022-09-24 00:39:28 -04:00
parent e1688c3f58
commit fc160e1d09
2 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/SelectorComponent.tsx
View file

@ -8,6 +8,8 @@ export interface SelectorProps {
id: string;
options: SelectorOption[];
onChange: (value: string) => void;
onMouseEnter?: () => void;
onMouseLeave?: () => void;
}
export interface SelectorState {
@ -30,7 +32,9 @@ class SelectorComponent extends React.Component<SelectorProps, SelectorState> {
<div id={this.props.id}
style={{display: this.props.options.length > 0 ? "inherit" : "none"}}
className="sbSelector">
<div className="sbSelectorBackground">
<div onMouseEnter={this.props.onMouseEnter}
onMouseLeave={this.props.onMouseLeave}
className="sbSelectorBackground">
{this.getOptions()}
</div>
</div>

12
src/components/SponsorTimeEditComponent.tsx
View file

@ -32,6 +32,7 @@ export interface SponsorTimeEditState {
description: string;
suggestedNames: SelectorOption[];
chapterNameSelectorOpen: boolean;
chapterNameSelectorHovering: boolean;
}
const categoryNamesGrams: string[] = [].concat(...CompileConfig.categoryList.filter((name) => name !== "chapter")
@ -73,7 +74,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
selectedCategory: DEFAULT_CATEGORY as Category,
description: sponsorTime.description || "",
suggestedNames: [],
chapterNameSelectorOpen: false
chapterNameSelectorOpen: false,
chapterNameSelectorHovering: false
};
}
@ -230,7 +232,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
{/* Chapter Name */}
{sponsorTime.actionType === ActionType.Chapter ? (
<div>
<div onBlur={() => this.setState({chapterNameSelectorOpen: false})}>
<input id={"chapterName" + this.idSuffix}
className="sponsorTimeEdit sponsorTimeEditInput sponsorChapterNameInput"
style={{color: "inherit", backgroundColor: "inherit"}}
@ -239,13 +241,15 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
value={this.state.description}
onContextMenu={(e) => e.stopPropagation()}
onChange={(e) => this.descriptionUpdate(e.target.value)}
onBlur={() => this.setState({chapterNameSelectorOpen: false})}
onFocus={() => this.setState({chapterNameSelectorOpen: true})}>
</input>
{this.state.chapterNameSelectorOpen && this.state.description &&
{this.state.description
&& (this.state.chapterNameSelectorOpen || this.state.chapterNameSelectorHovering) &&
<SelectorComponent
id={"chapterNameSelector" + this.idSuffix}
options={this.state.suggestedNames}
onMouseEnter={() => this.setState({chapterNameSelectorHovering: true})}
onMouseLeave={() => this.setState({chapterNameSelectorHovering: false})}
onChange={(v) => this.descriptionUpdate(v)}
/>
}