mirror of
https://github.com/hensm/fx_cast.git
synced 2026-06-10 09:39:58 +00:00
Switch from babel to typescript for initial ext conversion
This commit is contained in:
hensm
@@ -1,12 +1,12 @@
|
||||
"use strict";
|
||||
|
||||
export function getNextEllipsis (ellipsis) {
|
||||
return do {
|
||||
if (ellipsis === "") ".";
|
||||
else if (ellipsis === ".") "..";
|
||||
else if (ellipsis === "..") "...";
|
||||
else if (ellipsis === "...") "";
|
||||
};
|
||||
return {
|
||||
"": "."
|
||||
, ".": ".."
|
||||
, "..": "..."
|
||||
, "...": ""
|
||||
}[ellipsis];
|
||||
}
|
||||
|
||||
export function getWindowCenteredProps (refWin, width, height) {
|
||||
|
||||
@@ -60,31 +60,25 @@ const BridgeStats = (props) => (
|
||||
<tr>
|
||||
<th>{ _("optionsBridgeStatsCompatibility") }</th>
|
||||
<td>
|
||||
{ do {
|
||||
if (props.info.isVersionCompatible) {
|
||||
if (props.info.isVersionExact) {
|
||||
_("optionsBridgeCompatible")
|
||||
} else {
|
||||
_("optionsBridgeLikelyCompatible")
|
||||
}
|
||||
} else {
|
||||
_("optionsBridgeIncompatible")
|
||||
}
|
||||
}}
|
||||
{ props.info.isVersionCompatible
|
||||
? props.info.isVersionExact
|
||||
? _("optionsBridgeCompatible")
|
||||
: _("optionsBridgeLikelyCompatible")
|
||||
: _("optionsBridgeIncompatible") }
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{ _("optionsBridgeStatsRecommendedAction") }</th>
|
||||
<td>
|
||||
{ do {
|
||||
if (props.info.isVersionOlder) {
|
||||
_("optionsBridgeOlderAction")
|
||||
} else if (props.info.isVersionNewer) {
|
||||
_("optionsBridgeNewerAction")
|
||||
} else {
|
||||
_("optionsBridgeNoAction")
|
||||
}
|
||||
}}
|
||||
{ // If older
|
||||
props.info.isVersionOlder
|
||||
? _("optionsBridgeOlderAction")
|
||||
// else if newer
|
||||
: props.info.isVersionNewer
|
||||
? _("optionsBridgeNewerAction")
|
||||
// else
|
||||
: _("optionsBridgeNoAction")
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -227,127 +221,110 @@ export default class Bridge extends Component {
|
||||
}
|
||||
|
||||
|
||||
renderStatus () {
|
||||
const infoClasses = `bridge__info ${this.props.info
|
||||
? "bridge__info--found"
|
||||
: "bridge__info--not-found"}`;
|
||||
|
||||
let statusIcon;
|
||||
let statusTitle;
|
||||
let statusText;
|
||||
|
||||
if (!this.props.info) {
|
||||
statusIcon = "assets/icons8-cancel-120.png";
|
||||
statusTitle = _("optionsBridgeNotFoundStatusTitle");
|
||||
statusText = _("optionsBridgeNotFoundStatusText");
|
||||
} else {
|
||||
if (this.props.info.isVersionCompatible) {
|
||||
statusIcon = "assets/icons8-ok-120.png";
|
||||
statusTitle = _("optionsBridgeFoundStatusTitle";
|
||||
} else {
|
||||
statusIcon = "assets/icons8-warn-120.png";
|
||||
statusTitle = _("optionsBridgeIssueStatusTitle");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={infoClasses}>
|
||||
<div className="bridge__status">
|
||||
<img className="bridge__status-icon"
|
||||
width="60" height="60"
|
||||
src={ statusIcon } />
|
||||
|
||||
<h2 className="bridge__status-title">
|
||||
{ statusTitle }
|
||||
</h2>
|
||||
|
||||
{ statusText &&
|
||||
<p className="bridge__status-text">
|
||||
{ statusText }
|
||||
</p> }
|
||||
</div>
|
||||
|
||||
{ this.props.info &&
|
||||
<BridgeStats info={ this.props.info }/> }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="bridge">
|
||||
{ do {
|
||||
if (this.props.loading) {
|
||||
<div className="bridge__loading">
|
||||
{ this.props.loading
|
||||
? ( <div className="bridge__loading">
|
||||
{ _("optionsBridgeLoading") }
|
||||
<progress></progress>
|
||||
</div>
|
||||
} else {
|
||||
const infoClasses = `bridge__info ${this.props.info
|
||||
? "bridge__info--found"
|
||||
: "bridge__info--not-found"}`;
|
||||
: this.renderStatus() }
|
||||
|
||||
const [ statusIcon, statusTitle, statusText ] = do {
|
||||
if (!this.props.info) {
|
||||
[ "assets/icons8-cancel-120.png"
|
||||
, _("optionsBridgeNotFoundStatusTitle")
|
||||
, _("optionsBridgeNotFoundStatusText") ]
|
||||
} else {
|
||||
if (this.props.info.isVersionCompatible) {
|
||||
[ "assets/icons8-ok-120.png"
|
||||
, _("optionsBridgeFoundStatusTitle") ]
|
||||
} else {
|
||||
[ "assets/icons8-warn-120.png"
|
||||
, _("optionsBridgeIssueStatusTitle") ]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
<div className={infoClasses}>
|
||||
<div className="bridge__status">
|
||||
<img className="bridge__status-icon"
|
||||
width="60" height="60"
|
||||
src={ statusIcon } />
|
||||
|
||||
<h2 className="bridge__status-title">
|
||||
{ statusTitle }
|
||||
</h2>
|
||||
|
||||
{ do {
|
||||
if (statusText) {
|
||||
<p className="bridge__status-text">
|
||||
{ statusText }
|
||||
</p>
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
|
||||
{ do {
|
||||
if (this.props.info) {
|
||||
<BridgeStats info={ this.props.info }/>
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
}}
|
||||
|
||||
{ do {
|
||||
if (!this.props.loading) {
|
||||
<div className="bridge__update-info">
|
||||
{ do {
|
||||
if (this.state.isUpdateAvailable) {
|
||||
<div className="bridge__update">
|
||||
<p className="bridge__update-label">
|
||||
{ _("optionsBridgeUpdateAvailable") }
|
||||
</p>
|
||||
<div className="bridge__update-options">
|
||||
{ do {
|
||||
if (this.props.platform === "linux") {
|
||||
<select className="bridge__update-package-type"
|
||||
onChange={ this.onPackageTypeChange }
|
||||
value={ this.state.packageType }>
|
||||
<option value="" disabled selected>
|
||||
{ _("optionsBridgeUpdatePackageTypeSelect") }
|
||||
</option>
|
||||
<option value="deb">
|
||||
{ _("optionsBridgeUpdatePackageTypeDeb") }
|
||||
</option>
|
||||
<option value="rpm">
|
||||
{ _("optionsBridgeUpdatePackageTypeRpm") }
|
||||
</option>
|
||||
</select>
|
||||
}
|
||||
}}
|
||||
<button className="bridge__update-start"
|
||||
onClick={ this.onUpdate }
|
||||
disabled={ this.props.platform === "linux"
|
||||
&& !this.state.packageType }>
|
||||
{ _("optionsBridgeUpdate") }
|
||||
</button>
|
||||
</div>
|
||||
{ !this.props.loading &&
|
||||
<div className="bridge__update-info">
|
||||
{ this.state.isUpdateAvailable
|
||||
? (
|
||||
<div className="bridge__update">
|
||||
<p className="bridge__update-label">
|
||||
{ _("optionsBridgeUpdateAvailable") }
|
||||
</p>
|
||||
<div className="bridge__update-options">
|
||||
{ this.props.platform === "linux" &&
|
||||
<select className="bridge__update-package-type"
|
||||
onChange={ this.onPackageTypeChange }
|
||||
value={ this.state.packageType }>
|
||||
<option value="" disabled selected>
|
||||
{ _("optionsBridgeUpdatePackageTypeSelect") }
|
||||
</option>
|
||||
<option value="deb">
|
||||
{ _("optionsBridgeUpdatePackageTypeDeb") }
|
||||
</option>
|
||||
<option value="rpm">
|
||||
{ _("optionsBridgeUpdatePackageTypeRpm") }
|
||||
</option>
|
||||
</select> }
|
||||
<button className="bridge__update-start"
|
||||
onClick={ this.onUpdate }
|
||||
disabled={ this.props.platform === "linux"
|
||||
&& !this.state.packageType }>
|
||||
{ _("optionsBridgeUpdate") }
|
||||
</button>
|
||||
</div>
|
||||
} else {
|
||||
<button className="bridge__update-check"
|
||||
disabled={ this.state.isCheckingUpdates }
|
||||
onClick={ this.onCheckUpdates }>
|
||||
</div>
|
||||
) : (
|
||||
<button className="bridge__update-check"
|
||||
disabled={ this.state.isCheckingUpdates }
|
||||
onClick={ this.onCheckUpdates }>
|
||||
|
||||
{ do {
|
||||
if (this.state.isCheckingUpdates) {
|
||||
_("optionsBridgeUpdateChecking"
|
||||
, getNextEllipsis(this.state.checkUpdatesEllipsis));
|
||||
} else {
|
||||
_("optionsBridgeUpdateCheck");
|
||||
}
|
||||
}}
|
||||
</button>
|
||||
}
|
||||
}}
|
||||
{ this.state.isCheckingUpdates
|
||||
? _("optionsBridgeUpdateChecking"
|
||||
, getNextEllipsis(this.state.checkUpdatesEllipsis))
|
||||
: _("optionsBridgeUpdateCheck") }
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="bridge--update-status">
|
||||
{ do {
|
||||
if (this.state.updateStatus
|
||||
&& !this.state.isUpdateAvailable) {
|
||||
this.state.updateStatus;
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
<div className="bridge--update-status">
|
||||
{ this.state.updateStatus && !this.state.isUpdateAvailable
|
||||
&& this.state.updateStatus }
|
||||
</div>
|
||||
}
|
||||
}}
|
||||
</div> }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -56,14 +56,13 @@ export default class EditableList extends Component {
|
||||
|
||||
return {
|
||||
rawView: true
|
||||
, rawViewValue: [...currentState.items.values()].join("\n")
|
||||
, rawViewValue: Array.from(currentState.items.values()).join("\n")
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
handleSaveRaw () {
|
||||
this.setState(currentState => {
|
||||
console.log(currentState.rawViewValue);
|
||||
const newItems = currentState.rawViewValue.split("\n")
|
||||
.filter(item => item !== "");
|
||||
|
||||
@@ -137,15 +136,15 @@ export default class EditableList extends Component {
|
||||
</button>
|
||||
</div>
|
||||
<hr />
|
||||
{ do {
|
||||
if (this.state.rawView) {
|
||||
{ this.state.rawView
|
||||
? (
|
||||
<textarea className="editable-list__raw-view"
|
||||
rows={ items.length}
|
||||
value={ this.state.rawViewValue}
|
||||
onChange={ this.handleRawViewTextAreaChange }
|
||||
ref={ el => { this.rawViewTextArea = el }}>
|
||||
</textarea>
|
||||
} else {
|
||||
) : (
|
||||
<ul className="editable-list__items">
|
||||
{ items.map((item, i) =>
|
||||
<EditableListItem text={ item }
|
||||
@@ -169,8 +168,7 @@ export default class EditableList extends Component {
|
||||
</button>
|
||||
</div>
|
||||
</ul>
|
||||
}
|
||||
}}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -323,11 +323,7 @@ class App extends Component {
|
||||
|
||||
<div id="buttons">
|
||||
<div id="status-line">
|
||||
{ do {
|
||||
if (this.state.hasSaved) {
|
||||
_("optionsSaved")
|
||||
}
|
||||
}}
|
||||
{ this.state.hasSaved && _("optionsSaved") }
|
||||
</div>
|
||||
<button onClick={ this.handleReset }>
|
||||
{ _("optionsReset") }
|
||||
|
||||
@@ -187,25 +187,18 @@ class Receiver extends Component {
|
||||
{ `${this.props.receiver.address}:${this.props.receiver.port}` }
|
||||
</div>
|
||||
<div className="receiver-status">
|
||||
{ do {
|
||||
if (this.props.receiver.currentApp) {
|
||||
`- ${this.props.receiver.currentApp}`
|
||||
}
|
||||
}}
|
||||
{ this.props.receiver.currentApp &&
|
||||
`- ${this.props.receiver.currentApp}` }
|
||||
</div>
|
||||
<button className="receiver-connect"
|
||||
onClick={this.onClick.bind(this)}
|
||||
disabled={this.props.isLoading}>
|
||||
{ do {
|
||||
if (this.state.isLoading) {
|
||||
_("popupCastingButtonLabel") +
|
||||
(this.state.isLoading
|
||||
? this.state.ellipsis
|
||||
: "" )
|
||||
} else {
|
||||
_("popupCastButtonLabel")
|
||||
}
|
||||
}}
|
||||
{ this.state.isLoading
|
||||
? _("popupCastingButtonLabel") +
|
||||
(this.state.isLoading
|
||||
? this.state.ellipsis
|
||||
: "")
|
||||
: _("popupCastButtonLabel") }
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user