sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-11 10:09:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enable strict mode for extension build

Browse Source
This commit is contained in:
hensm
2020-01-23 00:58:33 +00:00
parent 3553912584
commit 7f84b90431
59 changed files with 526 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ext/src/ui/options/Bridge.tsx
View File

@@ -68,12 +68,12 @@ interface BridgeState {
isUpdateAvailable: boolean;
wasErrorCheckingUpdates: boolean;
checkUpdatesEllipsis: string;
updateStatus: string;
updateStatus?: string;
}
export default class Bridge extends Component<BridgeProps, BridgeState> {
private updateData: any;
private updateStatusTimeout: number;
private updateStatusTimeout?: number;
constructor (props: BridgeProps) {
super(props);
@@ -83,7 +83,6 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
, isUpdateAvailable: false
, wasErrorCheckingUpdates: false
, checkUpdatesEllipsis: "..."
, updateStatus: null
};
this.onCheckUpdates = this.onCheckUpdates.bind(this);
@@ -142,7 +141,7 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
let statusIcon: string;
let statusTitle: string;
let statusText: string;
let statusText: (string | null);
if (!this.props.info) {
statusIcon = "assets/icons8-cancel-120.png";
@@ -156,6 +155,8 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
statusIcon = "assets/icons8-warn-120.png";
statusTitle = _("optionsBridgeIssueStatusTitle");
}
statusText = null;
}
return (
@@ -213,11 +214,14 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
this.setState({
isCheckingUpdates: false
, isUpdateAvailable
, updateStatus: !isUpdateAvailable
? _("optionsBridgeUpdateStatusNoUpdates")
: null
});
if (!isUpdateAvailable) {
this.setState({
updateStatus: _("optionsBridgeUpdateStatusNoUpdates")
});
}
this.showUpdateStatus();
}
@@ -237,7 +241,7 @@ export default class Bridge extends Component<BridgeProps, BridgeState> {
}
this.updateStatusTimeout = window.setTimeout(() => {
this.setState({
updateStatus: null
updateStatus: undefined
});
}, 1500);
}

10
ext/src/ui/options/EditableList.tsx
View File

@@ -23,7 +23,7 @@ interface EditableListState {
export default class EditableList extends Component<
EditableListProps, EditableListState> {
private rawViewTextArea: HTMLTextAreaElement;
private rawViewTextArea: (HTMLTextAreaElement | null) = null;
constructor (props: EditableListProps) {
super(props);
@@ -140,13 +140,13 @@ export default class EditableList extends Component<
if ("itemPattern" in this.props) {
for (const item of newItems) {
if (!this.props.itemPattern.test(item)) {
this.rawViewTextArea.setCustomValidity(
this.rawViewTextArea?.setCustomValidity(
this.props.itemPatternError(item));
return;
}
}
this.rawViewTextArea.setCustomValidity("");
this.rawViewTextArea?.setCustomValidity("");
}
this.props.onChange(newItems);
@@ -154,6 +154,10 @@ export default class EditableList extends Component<
}
private handleRawViewTextAreaChange (ev: React.ChangeEvent<HTMLTextAreaElement>) {
if (!this.rawViewTextArea) {
return;
}
if (this.rawViewTextArea.scrollHeight > this.rawViewTextArea.clientHeight) {
this.rawViewTextArea.style.height = `${this.rawViewTextArea.scrollHeight}px`;
}

4
ext/src/ui/options/EditableListItem.tsx
View File

@@ -23,7 +23,7 @@ interface EditableListItemState {
export default class EditableListItem extends Component<
EditableListItemProps, EditableListItemState> {
private input: HTMLInputElement;
private input: (HTMLInputElement | null) = null;
constructor (props: EditableListItemProps) {
super(props);
@@ -96,7 +96,7 @@ export default class EditableListItem extends Component<
editing: true
, editValue: this.props.text
}, () => {
this.input.focus();
this.input?.focus();
});
}

127
ext/src/ui/options/index.tsx
View File

@@ -10,6 +10,7 @@ import Bridge from "./Bridge";
import EditableList from "./EditableList";
import bridge, { BridgeInfo } from "../../lib/bridge";
import logger from "../../lib/logger";
import options, { Options } from "../../lib/options";
import { REMOTE_MATCH_PATTERN_REGEX } from "../../lib/utils";
@@ -83,25 +84,23 @@ function getInputValue (input: HTMLInputElement) {
interface OptionsAppState {
hasLoaded: boolean;
options: Options;
bridgeInfo: BridgeInfo;
platform: string;
bridgeLoading: boolean;
isFormValid: boolean;
hasSaved: boolean;
options?: Options;
bridgeInfo?: BridgeInfo;
platform?: string;
}
class OptionsApp extends Component<{}, OptionsAppState> {
private form: HTMLFormElement;
private form: (HTMLFormElement | null) = null;
constructor (props: {}) {
super(props);
this.state = {
hasLoaded: false
, options: null
, bridgeInfo: null
, platform: null
, bridgeLoading: true
, isFormValid: true
, hasSaved: false
@@ -113,11 +112,11 @@ class OptionsApp extends Component<{}, OptionsAppState> {
this.handleInputChange = this.handleInputChange.bind(this);
this.handleWhitelistChange = this.handleWhitelistChange.bind(this);
this.handleReceiverSelectorTypeChange
= this.handleReceiverSelectorTypeChange.bind(this);
this.handleReceiverSelectorTypeChange =
this.handleReceiverSelectorTypeChange.bind(this);
this.getWhitelistItemPatternError
= this.getWhitelistItemPatternError.bind(this);
this.getWhitelistItemPatternError =
this.getWhitelistItemPatternError.bind(this);
}
public async componentDidMount () {
@@ -126,14 +125,18 @@ class OptionsApp extends Component<{}, OptionsAppState> {
, options: await options.getAll()
});
const bridgeInfo = await bridge.getInfo();
const { os } = await browser.runtime.getPlatformInfo();
try {
const bridgeInfo = await bridge.getInfo();
const { os } = await browser.runtime.getPlatformInfo();
this.setState({
bridgeInfo
, platform: os
, bridgeLoading: false
});
this.setState({
bridgeInfo
, platform: os
, bridgeLoading: false
});
} catch {
logger.error("Failed to fetch bridge/platform info.");
}
}
public render () {
@@ -143,9 +146,10 @@ class OptionsApp extends Component<{}, OptionsAppState> {
return (
<div>
<Bridge info={ this.state.bridgeInfo }
platform={ this.state.platform }
loading={ this.state.bridgeLoading } />
{ this.state.bridgeInfo && this.state.platform &&
<Bridge info={ this.state.bridgeInfo }
platform={ this.state.platform }
loading={ this.state.bridgeLoading } /> }
<form id="form" ref={ form => { this.form = form; }}
onSubmit={ this.handleFormSubmit }
@@ -163,7 +167,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<div className="option__control">
<input name="mediaEnabled"
type="checkbox"
checked={ this.state.options.mediaEnabled }
checked={ this.state.options?.mediaEnabled }
onChange={ this.handleInputChange } />
</div>
<div className="option__label">
@@ -175,7 +179,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<div className="option__control">
<input name="mediaSyncElement"
type="checkbox"
checked={ this.state.options.mediaSyncElement }
checked={ this.state.options?.mediaSyncElement }
onChange={ this.handleInputChange } />
</div>
<div className="option__label">
@@ -190,7 +194,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<div className="option__control">
<input name="mediaStopOnUnload"
type="checkbox"
checked={ this.state.options.mediaStopOnUnload }
checked={ this.state.options?.mediaStopOnUnload }
onChange={ this.handleInputChange } />
</div>
<div className="option__label">
@@ -202,7 +206,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<div className="option__control">
<input name="mediaOverlayEnabled"
type="checkbox"
checked={ this.state.options.mediaOverlayEnabled }
checked={ this.state.options?.mediaOverlayEnabled }
onChange={ this.handleInputChange } />
</div>
<div className="option__label">
@@ -219,7 +223,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<div className="option__control">
<input name="localMediaEnabled"
type="checkbox"
checked={ this.state.options.localMediaEnabled }
checked={ this.state.options?.localMediaEnabled }
onChange={ this.handleInputChange } />
</div>
<div className="option__label">
@@ -240,7 +244,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
required
min="1025"
max="65535"
value={ this.state.options.localMediaServerPort }
value={ this.state.options?.localMediaServerPort }
onChange={ this.handleInputChange } />
</div>
</label>
@@ -258,7 +262,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<div className="option__control">
<input name="mirroringEnabled"
type="checkbox"
checked={ this.state.options.mirroringEnabled }
checked={ this.state.options?.mirroringEnabled }
onChange={ this.handleInputChange } />
</div>
<div className="option__label">
@@ -274,7 +278,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<input name="mirroringAppId"
type="text"
required
value={ this.state.options.mirroringAppId }
value={ this.state.options?.mirroringAppId }
onChange={ this.handleInputChange } />
<div className="option__description">
{ _("optionsMirroringAppIdDescription") }
@@ -298,7 +302,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
</div>
<div className="option__control">
<select name="receiverSelectorType"
value={ this.state.options.receiverSelectorType }
value={ this.state.options?.receiverSelectorType }
onChange={ this.handleReceiverSelectorTypeChange }>
<option value={ ReceiverSelectorType.Popup }>
{ _("optionsReceiverSelectorTypeBrowser") }
@@ -314,7 +318,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<div className="option__control">
<input name="receiverSelectorWaitForConnection"
type="checkbox"
checked={ this.state.options.receiverSelectorWaitForConnection }
checked={ this.state.options?.receiverSelectorWaitForConnection }
onChange={ this.handleInputChange } />
</div>
<div className="option__label">
@@ -329,7 +333,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<div className="option__control">
<input name="receiverSelectorCloseIfFocusLost"
type="checkbox"
checked={ this.state.options.receiverSelectorCloseIfFocusLost }
checked={ this.state.options?.receiverSelectorCloseIfFocusLost }
onChange={ this.handleInputChange } />
</div>
<div className="option__label">
@@ -350,7 +354,7 @@ class OptionsApp extends Component<{}, OptionsAppState> {
<div className="option__control">
<input name="userAgentWhitelistEnabled"
type="checkbox"
checked={ this.state.options.userAgentWhitelistEnabled }
checked={ this.state.options?.userAgentWhitelistEnabled }
onChange={ this.handleInputChange } />
</div>
<div className="option__label">
@@ -363,10 +367,11 @@ class OptionsApp extends Component<{}, OptionsAppState> {
{ _("optionsUserAgentWhitelistContent") }
</div>
<div className="option__control">
<EditableList data={ this.state.options.userAgentWhitelist }
onChange={ this.handleWhitelistChange }
itemPattern={ REMOTE_MATCH_PATTERN_REGEX }
itemPatternError={ this.getWhitelistItemPatternError } />
{ this.state.options?.userAgentWhitelist &&
<EditableList data={ this.state.options.userAgentWhitelist }
onChange={ this.handleWhitelistChange }
itemPattern={ REMOTE_MATCH_PATTERN_REGEX }
itemPatternError={ this.getWhitelistItemPatternError } /> }
</div>
</div>
</fieldset>
@@ -400,20 +405,22 @@ class OptionsApp extends Component<{}, OptionsAppState> {
private async handleFormSubmit (ev: React.FormEvent<HTMLFormElement>) {
ev.preventDefault();
this.form.reportValidity();
this.form?.reportValidity();
try {
await options.setAll(this.state.options);
if (this.state.options) {
await options.setAll(this.state.options);
this.setState({
hasSaved: true
}, () => {
window.setTimeout(() => {
this.setState({
hasSaved: false
});
}, 1000);
});
this.setState({
hasSaved: true
}, () => {
window.setTimeout(() => {
this.setState({
hasSaved: false
});
}, 1000);
});
}
} catch (err) {
console.error("Failed to save options");
}
@@ -422,14 +429,20 @@ class OptionsApp extends Component<{}, OptionsAppState> {
private handleFormChange (ev: React.FormEvent<HTMLFormElement>) {
ev.preventDefault();
this.setState({
isFormValid: this.form.checkValidity()
});
const isFormValid = this.form?.checkValidity();
if (isFormValid !== undefined) {
this.setState({
isFormValid
});
}
}
private handleInputChange (ev: React.ChangeEvent<HTMLInputElement>) {
this.setState(currentState => {
currentState.options[ev.target.name] = getInputValue(ev.target);
if (currentState.options) {
currentState.options[ev.target.name] = getInputValue(ev.target);
}
return currentState;
});
}
@@ -438,14 +451,20 @@ class OptionsApp extends Component<{}, OptionsAppState> {
ev: React.ChangeEvent<HTMLSelectElement>) {
this.setState(currentState => {
currentState.options[ev.target.name] = parseInt(ev.target.value);
if (currentState.options) {
currentState.options[ev.target.name] = parseInt(ev.target.value);
}
return currentState;
});
}
private handleWhitelistChange (whitelist: string[]) {
this.setState(currentState => {
currentState.options.userAgentWhitelist = whitelist;
if (currentState.options) {
currentState.options.userAgentWhitelist = whitelist;
}
return currentState;
});
}