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

Format options index.tsx

Browse Source
This commit is contained in:
hensm
2022-05-29 20:37:21 +01:00
parent 088c550987
commit 32a6b218f8
1 changed files with 205 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,13 +14,10 @@ import logger from "../../lib/logger";
import options, { Options } from "../../lib/options"; import options, { Options } from "../../lib/options";
import { REMOTE_MATCH_PATTERN_REGEX } from "../../lib/matchPattern"; import { REMOTE_MATCH_PATTERN_REGEX } from "../../lib/matchPattern";
const _ = browser.i18n.getMessage; const _ = browser.i18n.getMessage;
// macOS styles // macOS styles
browser.runtime.getPlatformInfo() browser.runtime.getPlatformInfo().then(platformInfo => {
.then(platformInfo => {
const link = document.createElement("link"); const link = document.createElement("link");
link.rel = "stylesheet"; link.rel = "stylesheet";
@@ -36,7 +33,6 @@ browser.runtime.getPlatformInfo()
} }
}); });
function getInputValue(input: HTMLInputElement) { function getInputValue(input: HTMLInputElement) {
switch (input.type) { switch (input.type) {
case "checkbox": case "checkbox":
@@ -62,17 +58,15 @@ interface OptionsAppState {
platform?: string; platform?: string;
} }
class OptionsApp extends Component< class OptionsApp extends Component<OptionsAppProps, OptionsAppState> {
OptionsAppProps, OptionsAppState> { private form: HTMLFormElement | null = null;
private form: (HTMLFormElement | null) = null;
state: OptionsAppState = { state: OptionsAppState = {
hasLoaded: false hasLoaded: false,
, bridgeLoading: true bridgeLoading: true,
, bridgeLoadingTimedOut: false bridgeLoadingTimedOut: false,
, isFormValid: true isFormValid: true,
, hasSaved: false hasSaved: false
}; };
constructor(props: OptionsAppProps) { constructor(props: OptionsAppProps) {
@@ -90,9 +84,9 @@ class OptionsApp extends Component<
public async componentDidMount() { public async componentDidMount() {
this.setState({ this.setState({
hasLoaded: true hasLoaded: true,
, options: await options.getAll() options: await options.getAll(),
, platform: (await browser.runtime.getPlatformInfo()).os platform: (await browser.runtime.getPlatformInfo()).os
}); });
// Update options data if changed whilst page is open // Update options data if changed whilst page is open
@@ -106,16 +100,16 @@ class OptionsApp extends Component<
const bridgeInfo = await bridge.getInfo(); const bridgeInfo = await bridge.getInfo();
this.setState({ this.setState({
bridgeInfo bridgeInfo,
, bridgeLoading: false bridgeLoading: false
}); });
} catch (err) { } catch (err) {
logger.error("Failed to fetch bridge/platform info."); logger.error("Failed to fetch bridge/platform info.");
if (err instanceof BridgeTimedOutError) { if (err instanceof BridgeTimedOutError) {
this.setState({ this.setState({
bridgeLoading: false bridgeLoading: false,
, bridgeLoadingTimedOut: true bridgeLoadingTimedOut: true
}); });
} else { } else {
this.setState({ this.setState({
@@ -132,15 +126,21 @@ class OptionsApp extends Component<
return ( return (
<div> <div>
<form id="form" ref={ form => { this.form = form; }} <form
id="form"
ref={form => {
this.form = form;
}}
onSubmit={this.handleFormSubmit} onSubmit={this.handleFormSubmit}
onChange={ this.handleFormChange }> onChange={this.handleFormChange}
>
<Bridge info={ this.state.bridgeInfo } <Bridge
info={this.state.bridgeInfo}
loading={this.state.bridgeLoading} loading={this.state.bridgeLoading}
loadingTimedOut={this.state.bridgeLoadingTimedOut} loadingTimedOut={this.state.bridgeLoadingTimedOut}
options={this.state.options} options={this.state.options}
onChange={ this.handleInputChange } /> onChange={this.handleInputChange}
/>
<fieldset className="category"> <fieldset className="category">
<legend className="category__name"> <legend className="category__name">
@@ -152,10 +152,12 @@ class OptionsApp extends Component<
<label className="option option--inline"> <label className="option option--inline">
<div className="option__control"> <div className="option__control">
<input name="mediaEnabled" <input
name="mediaEnabled"
type="checkbox" type="checkbox"
checked={this.state.options?.mediaEnabled} checked={this.state.options?.mediaEnabled}
onChange={ this.handleInputChange } /> onChange={this.handleInputChange}
/>
</div> </div>
<div className="option__label"> <div className="option__label">
{_("optionsMediaEnabled")} {_("optionsMediaEnabled")}
@@ -164,10 +166,14 @@ class OptionsApp extends Component<
<label className="option option--inline"> <label className="option option--inline">
<div className="option__control"> <div className="option__control">
<input name="mediaSyncElement" <input
name="mediaSyncElement"
type="checkbox" type="checkbox"
checked={ this.state.options?.mediaSyncElement } checked={
onChange={ this.handleInputChange } /> this.state.options?.mediaSyncElement
}
onChange={this.handleInputChange}
/>
</div> </div>
<div className="option__label"> <div className="option__label">
{_("optionsMediaSyncElement")} {_("optionsMediaSyncElement")}
@@ -179,10 +185,14 @@ class OptionsApp extends Component<
<label className="option option--inline"> <label className="option option--inline">
<div className="option__control"> <div className="option__control">
<input name="mediaStopOnUnload" <input
name="mediaStopOnUnload"
type="checkbox" type="checkbox"
checked={ this.state.options?.mediaStopOnUnload } checked={
onChange={ this.handleInputChange } /> this.state.options?.mediaStopOnUnload
}
onChange={this.handleInputChange}
/>
</div> </div>
<div className="option__label"> <div className="option__label">
{_("optionsMediaStopOnUnload")} {_("optionsMediaStopOnUnload")}
@@ -193,10 +203,14 @@ class OptionsApp extends Component<
<label className="option option--inline"> <label className="option option--inline">
<div className="option__control"> <div className="option__control">
<input name="localMediaEnabled" <input
name="localMediaEnabled"
type="checkbox" type="checkbox"
checked={ this.state.options?.localMediaEnabled } checked={
onChange={ this.handleInputChange } /> this.state.options?.localMediaEnabled
}
onChange={this.handleInputChange}
/>
</div> </div>
<div className="option__label"> <div className="option__label">
{_("optionsLocalMediaEnabled")} {_("optionsLocalMediaEnabled")}
@@ -211,13 +225,17 @@ class OptionsApp extends Component<
{_("optionsLocalMediaServerPort")} {_("optionsLocalMediaServerPort")}
</div> </div>
<div className="option__control"> <div className="option__control">
<input name="localMediaServerPort" <input
name="localMediaServerPort"
type="number" type="number"
required required
min="1025" min="1025"
max="65535" max="65535"
value={ this.state.options?.localMediaServerPort } value={
onChange={ this.handleInputChange } /> this.state.options?.localMediaServerPort
}
onChange={this.handleInputChange}
/>
</div> </div>
</label> </label>
</fieldset> </fieldset>
@@ -232,10 +250,14 @@ class OptionsApp extends Component<
<label className="option option--inline"> <label className="option option--inline">
<div className="option__control"> <div className="option__control">
<input name="mirroringEnabled" <input
name="mirroringEnabled"
type="checkbox" type="checkbox"
checked={ this.state.options?.mirroringEnabled } checked={
onChange={ this.handleInputChange } /> this.state.options?.mirroringEnabled
}
onChange={this.handleInputChange}
/>
</div> </div>
<div className="option__label"> <div className="option__label">
{_("optionsMirroringEnabled")} {_("optionsMirroringEnabled")}
@@ -247,11 +269,13 @@ class OptionsApp extends Component<
{_("optionsMirroringAppId")} {_("optionsMirroringAppId")}
</div> </div>
<div className="option__control"> <div className="option__control">
<input name="mirroringAppId" <input
name="mirroringAppId"
type="text" type="text"
required required
value={this.state.options?.mirroringAppId} value={this.state.options?.mirroringAppId}
onChange={ this.handleInputChange } /> onChange={this.handleInputChange}
/>
<div className="option__description"> <div className="option__description">
{_("optionsMirroringAppIdDescription")} {_("optionsMirroringAppIdDescription")}
</div> </div>
@@ -269,25 +293,37 @@ class OptionsApp extends Component<
<label className="option option--inline"> <label className="option option--inline">
<div className="option__control"> <div className="option__control">
<input name="receiverSelectorWaitForConnection" <input
name="receiverSelectorWaitForConnection"
type="checkbox" type="checkbox"
checked={ this.state.options?.receiverSelectorWaitForConnection } checked={
onChange={ this.handleInputChange } /> this.state.options
?.receiverSelectorWaitForConnection
}
onChange={this.handleInputChange}
/>
</div> </div>
<div className="option__label"> <div className="option__label">
{_("optionsReceiverSelectorWaitForConnection")} {_("optionsReceiverSelectorWaitForConnection")}
</div> </div>
<div className="option__description"> <div className="option__description">
{ _("optionsReceiverSelectorWaitForConnectionDescription") } {_(
"optionsReceiverSelectorWaitForConnectionDescription"
)}
</div> </div>
</label> </label>
<label className="option option--inline"> <label className="option option--inline">
<div className="option__control"> <div className="option__control">
<input name="receiverSelectorCloseIfFocusLost" <input
name="receiverSelectorCloseIfFocusLost"
type="checkbox" type="checkbox"
checked={ this.state.options?.receiverSelectorCloseIfFocusLost } checked={
onChange={ this.handleInputChange } /> this.state.options
?.receiverSelectorCloseIfFocusLost
}
onChange={this.handleInputChange}
/>
</div> </div>
<div className="option__label"> <div className="option__label">
{_("optionsReceiverSelectorCloseIfFocusLost")} {_("optionsReceiverSelectorCloseIfFocusLost")}
@@ -297,7 +333,9 @@ class OptionsApp extends Component<
<fieldset className="category"> <fieldset className="category">
<legend className="category__name"> <legend className="category__name">
<h2>{ _("optionsUserAgentWhitelistCategoryName") }</h2> <h2>
{_("optionsUserAgentWhitelistCategoryName")}
</h2>
</legend> </legend>
<p className="category__description"> <p className="category__description">
{_("optionsUserAgentWhitelistCategoryDescription")} {_("optionsUserAgentWhitelistCategoryDescription")}
@@ -305,10 +343,15 @@ class OptionsApp extends Component<
<label className="option option--inline"> <label className="option option--inline">
<div className="option__control"> <div className="option__control">
<input name="userAgentWhitelistEnabled" <input
name="userAgentWhitelistEnabled"
type="checkbox" type="checkbox"
checked={ this.state.options?.userAgentWhitelistEnabled } checked={
onChange={ this.handleInputChange } /> this.state.options
?.userAgentWhitelistEnabled
}
onChange={this.handleInputChange}
/>
</div> </div>
<div className="option__label"> <div className="option__label">
{_("optionsUserAgentWhitelistEnabled")} {_("optionsUserAgentWhitelistEnabled")}
@@ -320,19 +363,28 @@ class OptionsApp extends Component<
<label className="option option--inline"> <label className="option option--inline">
<div className="option__control"> <div className="option__control">
<input name="userAgentWhitelistRestrictedEnabled" <input
name="userAgentWhitelistRestrictedEnabled"
type="checkbox" type="checkbox"
checked={ this.state.options?.userAgentWhitelistRestrictedEnabled } checked={
onChange={ this.handleInputChange } /> this.state.options
?.userAgentWhitelistRestrictedEnabled
}
onChange={this.handleInputChange}
/>
</div> </div>
<div className="option__label"> <div className="option__label">
{ _("optionsUserAgentWhitelistRestrictedEnabled") } {_(
"optionsUserAgentWhitelistRestrictedEnabled"
)}
<span className="option__recommended"> <span className="option__recommended">
{_("optionsOptionRecommended")} {_("optionsOptionRecommended")}
</span> </span>
</div> </div>
<div className="option__description"> <div className="option__description">
{ _("optionsUserAgentWhitelistRestrictedEnabledDescription") } {_(
"optionsUserAgentWhitelistRestrictedEnabledDescription"
)}
</div> </div>
</label> </label>
@@ -341,11 +393,19 @@ class OptionsApp extends Component<
{_("optionsUserAgentWhitelistContent")} {_("optionsUserAgentWhitelistContent")}
</div> </div>
<div className="option__control"> <div className="option__control">
{ this.state.options?.userAgentWhitelist && {this.state.options?.userAgentWhitelist && (
<EditableList data={ this.state.options.userAgentWhitelist } <EditableList
data={
this.state.options
.userAgentWhitelist
}
onChange={this.handleWhitelistChange} onChange={this.handleWhitelistChange}
itemPattern={REMOTE_MATCH_PATTERN_REGEX} itemPattern={REMOTE_MATCH_PATTERN_REGEX}
itemPatternError={ this.getWhitelistItemPatternError } /> } itemPatternError={
this.getWhitelistItemPatternError
}
/>
)}
</div> </div>
</div> </div>
</fieldset> </fieldset>
@@ -354,14 +414,15 @@ class OptionsApp extends Component<
<div id="status-line"> <div id="status-line">
{this.state.hasSaved && _("optionsSaved")} {this.state.hasSaved && _("optionsSaved")}
</div> </div>
<button onClick={ this.handleReset } <button onClick={this.handleReset} type="button">
type="button">
{_("optionsReset")} {_("optionsReset")}
</button> </button>
<button type="submit" <button
type="submit"
// @ts-ignore // @ts-ignore
default default
disabled={ !this.state.isFormValid }> disabled={!this.state.isFormValid}
>
{_("optionsSave")} {_("optionsSave")}
</button> </button>
</div> </div>
@@ -370,7 +431,6 @@ class OptionsApp extends Component<
); );
} }
private handleReset() { private handleReset() {
this.setState({ this.setState({
options: { ...defaultOptions } options: { ...defaultOptions }
@@ -386,15 +446,18 @@ class OptionsApp extends Component<
if (this.state.options) { if (this.state.options) {
await options.setAll(this.state.options); await options.setAll(this.state.options);
this.setState({ this.setState(
{
hasSaved: true hasSaved: true
}, () => { },
() => {
window.setTimeout(() => { window.setTimeout(() => {
this.setState({ this.setState({
hasSaved: false hasSaved: false
}); });
}, 1000); }, 1000);
}); }
);
} }
} catch (err) { } catch (err) {
logger.error("Failed to save options"); logger.error("Failed to save options");