Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-11 05:57:07 +03:00
Code Issues Packages Projects Releases 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
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; id: string;
options: SelectorOption[]; options: SelectorOption[];
onChange: (value: string) => void; onChange: (value: string) => void;
onMouseEnter?: () => void;
onMouseLeave?: () => void;
} }
export interface SelectorState { export interface SelectorState {
@@ -30,7 +32,9 @@ class SelectorComponent extends React.Component<SelectorProps, SelectorState> {
<div id={this.props.id} <div id={this.props.id}
style={{display: this.props.options.length > 0 ? "inherit" : "none"}} style={{display: this.props.options.length > 0 ? "inherit" : "none"}}
className="sbSelector"> className="sbSelector">
<div className="sbSelectorBackground"> <div onMouseEnter={this.props.onMouseEnter}
onMouseLeave={this.props.onMouseLeave}
className="sbSelectorBackground">
{this.getOptions()} {this.getOptions()}
</div> </div>
</div> </div>

12
src/components/SponsorTimeEditComponent.tsx
View File

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