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

Use formatted time inputs for segment editing

Browse Source 
Additionally, removes unused util functions and saves the edits on changes to update the preview immediately
This commit is contained in:
opl-
2020-11-06 13:21:39 +01:00
parent e88de89e0f
commit 618f8a52f7
3 changed files with 40 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/content.css
View File

@@ -372,12 +372,8 @@ input::-webkit-inner-spin-button {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
.sponsorTimeEditMinutes { .sponsorTimeEditInput {
width: 30px; width: 90px;
}
.sponsorTimeEditSeconds {
width: 60px;
} }
.sponsorNowButton { .sponsorNowButton {

76
src/components/SponsorTimeEditComponent.tsx
View File

@@ -20,7 +20,7 @@ export interface SponsorTimeEditProps {
export interface SponsorTimeEditState { export interface SponsorTimeEditState {
editing: boolean; editing: boolean;
sponsorTimeEdits: string[][]; sponsorTimeEdits: [string, string];
} }
class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> { class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, SponsorTimeEditState> {
@@ -40,7 +40,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
this.state = { this.state = {
editing: false, editing: false,
sponsorTimeEdits: [[null, null], [null, null]] sponsorTimeEdits: [null, null]
}; };
} }
@@ -96,29 +96,18 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
{chrome.i18n.getMessage("bracketNow")} {chrome.i18n.getMessage("bracketNow")}
</span> </span>
<input id={"submittingTimeMinutes0" + this.idSuffix} <input id={"submittingTime0" + this.idSuffix}
className="sponsorTimeEdit sponsorTimeEditMinutes" className="sponsorTimeEdit sponsorTimeEditInput"
ref={oldYouTubeDarkStyles} ref={oldYouTubeDarkStyles}
type="number" type="text"
value={this.state.sponsorTimeEdits[0][0]} value={this.state.sponsorTimeEdits[0]}
onChange={(e) => { onChange={(e) => {
let sponsorTimeEdits = this.state.sponsorTimeEdits; let sponsorTimeEdits = this.state.sponsorTimeEdits;
sponsorTimeEdits[0][0] = e.target.value; sponsorTimeEdits[0] = e.target.value;
this.setState({sponsorTimeEdits}); this.setState({sponsorTimeEdits});
}}>
</input>
<input id={"submittingTimeSeconds0" + this.idSuffix} this.saveEditTimes();
className="sponsorTimeEdit sponsorTimeEditSeconds"
ref={oldYouTubeDarkStyles}
type="number"
value={this.state.sponsorTimeEdits[0][1]}
onChange={(e) => {
let sponsorTimeEdits = this.state.sponsorTimeEdits;
sponsorTimeEdits[0][1] = e.target.value;
this.setState({sponsorTimeEdits});
}}> }}>
</input> </input>
@@ -126,29 +115,18 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
{" " + chrome.i18n.getMessage("to") + " "} {" " + chrome.i18n.getMessage("to") + " "}
</span> </span>
<input id={"submittingTimeMinutes1" + this.idSuffix} <input id={"submittingTime1" + this.idSuffix}
className="sponsorTimeEdit sponsorTimeEditMinutes" className="sponsorTimeEdit sponsorTimeEditInput"
ref={oldYouTubeDarkStyles} ref={oldYouTubeDarkStyles}
type="text" type="text"
value={this.state.sponsorTimeEdits[1][0]} value={this.state.sponsorTimeEdits[1]}
onChange={(e) => { onChange={(e) => {
let sponsorTimeEdits = this.state.sponsorTimeEdits; let sponsorTimeEdits = this.state.sponsorTimeEdits;
sponsorTimeEdits[1][0] = e.target.value; sponsorTimeEdits[1] = e.target.value;
this.setState({sponsorTimeEdits}); this.setState({sponsorTimeEdits});
}}>
</input>
<input id={"submittingTimeSeconds1" + this.idSuffix} this.saveEditTimes();
className="sponsorTimeEdit sponsorTimeEditSeconds"
ref={oldYouTubeDarkStyles}
type="text"
value={this.state.sponsorTimeEdits[1][1]}
onChange={(e) => {
let sponsorTimeEdits = this.state.sponsorTimeEdits;
sponsorTimeEdits[1][1] = e.target.value;
this.setState({sponsorTimeEdits});
}}> }}>
</input> </input>
@@ -318,19 +296,23 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
} }
} }
/** Returns an array in the sponsorTimeEdits form (minutes and seconds) from a normal seconds sponsor time */ /** Returns an array in the sponsorTimeEdits form (formatted time string) from a normal seconds sponsor time */
getFormattedSponsorTimesEdits(sponsorTime: SponsorTime): string[][] { getFormattedSponsorTimesEdits(sponsorTime: SponsorTime): [string, string] {
return [[String(utils.getFormattedMinutes(sponsorTime.segment[0])), String(utils.getFormattedSeconds(sponsorTime.segment[0]))], return [utils.getFormattedTime(sponsorTime.segment[0], true),
[String(utils.getFormattedMinutes(sponsorTime.segment[1])), String(utils.getFormattedSeconds(sponsorTime.segment[1]))]]; utils.getFormattedTime(sponsorTime.segment[1], true)];
} }
saveEditTimes() { saveEditTimes() {
let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting; let sponsorTimesSubmitting = this.props.contentContainer().sponsorTimesSubmitting;
if (this.state.editing) { if (this.state.editing) {
sponsorTimesSubmitting[this.props.index].segment = const startTime = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[0]);
[utils.getRawSeconds(parseFloat(this.state.sponsorTimeEdits[0][0]), parseFloat(this.state.sponsorTimeEdits[0][1])), const endTime = utils.getFormattedTimeToSeconds(this.state.sponsorTimeEdits[1]);
utils.getRawSeconds(parseFloat(this.state.sponsorTimeEdits[1][0]), parseFloat(this.state.sponsorTimeEdits[1][1]))];
// Change segment time only if the format was correct
if (startTime !== null && endTime !== null) {
sponsorTimesSubmitting[this.props.index].segment = [startTime, endTime];
}
} }
sponsorTimesSubmitting[this.props.index].category = this.categoryOptionRef.current.value; sponsorTimesSubmitting[this.props.index].category = this.categoryOptionRef.current.value;
@@ -346,11 +328,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
let skipTime = sponsorTimes[index].segment[0]; let skipTime = sponsorTimes[index].segment[0];
if (this.state.editing) {
// Save edits before previewing
this.saveEditTimes();
}
this.props.contentContainer().previewTime(skipTime - 2); this.props.contentContainer().previewTime(skipTime - 2);
} }
@@ -360,11 +337,6 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
let skipTime = sponsorTimes[index].segment[0]; let skipTime = sponsorTimes[index].segment[0];
if (this.state.editing) {
// Save edits before inspecting
this.saveEditTimes();
}
this.props.contentContainer().previewTime(skipTime + 0.000001, false); this.props.contentContainer().previewTime(skipTime + 0.000001, false);
} }

26
src/utils.ts
View File

@@ -323,14 +323,6 @@ class Utils {
}); });
} }
getFormattedMinutes(seconds: number) {
return Math.floor(seconds / 60);
}
getFormattedSeconds(seconds: number) {
return seconds % 60;
}
getFormattedTime(seconds: number, precise?: boolean): string { getFormattedTime(seconds: number, precise?: boolean): string {
let hours = Math.floor(seconds / 60 / 60); let hours = Math.floor(seconds / 60 / 60);
let minutes = Math.floor(seconds / 60) % 60; let minutes = Math.floor(seconds / 60) % 60;
@@ -356,12 +348,22 @@ class Utils {
return formatted; return formatted;
} }
shortCategoryName(categoryName: string): string { getFormattedTimeToSeconds(formatted: string): number | null {
return chrome.i18n.getMessage("category_" + categoryName + "_short") || chrome.i18n.getMessage("category_" + categoryName); const fragments = /^(?:(?:(\d+):)?(\d+):)?(\d*(?:\.\d+)?)$/.exec(formatted);
if (fragments === null) {
return null;
}
const hours = fragments[1] ? parseInt(fragments[1]) : 0;
const minutes = fragments[2] ? parseInt(fragments[2] || '0') : 0;
const seconds = fragments[3] ? parseFloat(fragments[3]) : 0;
return hours * 3600 + minutes * 60 + seconds;
} }
getRawSeconds(minutes: number, seconds: number): number { shortCategoryName(categoryName: string): string {
return minutes * 60 + seconds; return chrome.i18n.getMessage("category_" + categoryName + "_short") || chrome.i18n.getMessage("category_" + categoryName);
} }
isContentScript(): boolean { isContentScript(): boolean {