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

Improve bridge info section

Browse Source
This commit is contained in:
hensm
2018-12-12 18:50:26 +00:00
parent 4e682e4e1f
commit 54150568c2
5 changed files with 163 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
ext/src/_locales/en/messages.json
View File

@@ -18,32 +18,44 @@
}
, "optionsBridgeCategoryName": {
"message": "Bridge"
}
, "optionsBridgeCategoryDescription": {
"message": "Native bridge application."
}
, "optionsBridgeLoading": {
"message": "Loading bridge info..."
}
, "optionsBridgeMissing": {
"message": "Bridge application not found. Try downloading and installing the latest version."
, "optionsBridgeFoundStatusText": {
"message": "Bridge found"
}
, "optionsBridgeNotFoundStatusText": {
"message": "Bridge not found. Try downloading and installing the latest version."
}
, "optionsBridgeInfo": {
"message": "Bridge info:"
}
, "optionsBridgeStatusCompatible": {
"message": "STATUS: COMPATIBLE"
, "optionsBridgeStatsVersion": {
"message": "Version:"
}
, "optionsBridgeStatusIncompatible": {
"message": "STATUS: INCOMPATIBLE"
, "optionsBridgeStatsExpectedVersion": {
"message": "Expected version:"
}
, "optionsBridgeOlder": {
"message": "Bridge version older than expected, try updating bridge to the latest bridge version."
, "optionsBridgeStatsCompatibility": {
"message": "Compatibility:"
}
, "optionsBridgeNewer": {
"message": "Bridge version newer than expected, try updating extension to the latest bridge version."
, "optionsBridgeStatsRecommendedAction": {
"message": "Recommended action:"
}
, "optionsBridgeCompatible": {
"message": "COMPATIBLE"
}
, "optionsBridgeIncompatible": {
"message": "INCOMPATIBLE"
}
, "optionsBridgeOlderAction": {
"message": "Bridge version older than expected, try updating bridge to the latest version."
}
, "optionsBridgeNewerAction": {
"message": "Bridge version newer than expected, try updating extension to the latest version."
}
, "optionsBridgeNoAction": {
"message": "No action needed."
}
, "optionsMediaCategoryName": {
@@ -66,7 +78,7 @@
"message": "Local media casting enabled"
}
, "optionsLocalMediaServerPort": {
"message": "HTTP server port"
"message": "HTTP server port:"
}
, "optionsUserAgentWhitelistCategoryName": {
@@ -79,7 +91,7 @@
"message": "Site whitelist enabled"
}
, "optionsUserAgentWhitelistContent": {
"message": "Match patterns (newline-separated)"
"message": "Match patterns (newline-separated):"
}
, "optionsUserAgentWhitelistBasicView": {
"message": "Basic View"
@@ -113,7 +125,7 @@
"message": "Screen mirroring enabled"
}
, "optionsMirroringAppId": {
"message": "Receiver app ID"
"message": "Receiver app ID:"
}
, "optionsReset": {

BIN
ext/src/options/assets/icons8-cancel-120.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
ext/src/options/assets/icons8-ok-120.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

122
ext/src/options/index.jsx
View File

@@ -165,13 +165,84 @@ class App extends Component {
render () {
return (
<div>
<div className="bridge">
{ do {
if (this.state.bridgeLoading) {
<div className="bridge__loading">
{ _("optionsBridgeLoading") }
<progress></progress>
</div>
} else {
const { bridgeInfo } = this.state;
const bridgeInfoClasses = `bridge__info ${bridgeInfo
? "bridge__info--found"
: "bridge__info--not-found"}`;
<div className={bridgeInfoClasses}>
<div className="bridge__status">
<img className="bridge__status-icon"
width="60" height="60"
src={ bridgeInfo
? "assets/icons8-ok-120.png"
: "assets/icons8-cancel-120.png" } />
<h2 className="bridge__status-text">
{ bridgeInfo
? _("optionsBridgeFoundStatusText")
: _("optionsBridgeNotFoundStatusText") }
</h2>
</div>
{ do { if (bridgeInfo) {
<table className="bridge__stats">
<tr>
<th>{ _("optionsBridgeStatsVersion") }</th>
<td>{ bridgeInfo.version }</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsExpectedVersion") }</th>
<td>{ APPLICATION_VERSION }</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsCompatibility") }</th>
<td>
{ bridgeInfo.isVersionCompatible
? _("optionsBridgeCompatible")
: _("optionsBridgeIncompatible") }
</td>
</tr>
<tr>
<th>{ _("optionsBridgeStatsRecommendedAction") }</th>
<td>
{ do {
if (bridgeInfo.isVersionOlder) {
_("optionsBridgeOlderAction")
} else if (bridgeInfo.isVersionNewer) {
_("optionsBridgeNewerAction")
} else {
_("optionsBridgeNoAction")
}
}}
</td>
</tr>
</table>
} else {
// TODO: Download links
}}}
</div>
}
}}
</div>
<form id="form" ref={ form => { this.form = form; }}
onSubmit={ this.handleFormSubmit }
onChange={ this.handleFormChange }>
<fieldset className="category">
<legend className="category__name">
{ _("optionsMediaCategoryName") }
<h2>{ _("optionsMediaCategoryName") }</h2>
</legend>
<p className="category__description">
{ _("optionsMediaCategoryDescription") }
@@ -190,7 +261,7 @@ class App extends Component {
<fieldset className="category"
disabled={ !this.state.options.mediaEnabled }>
<legend className="category__name">
{ _("optionsLocalMediaCategoryName") }
<h2>{ _("optionsLocalMediaCategoryName") }</h2>
</legend>
<p className="category__description">
{ _("optionsLocalMediaCategoryDescription") }
@@ -223,7 +294,7 @@ class App extends Component {
<fieldset className="category">
<legend className="category__name">
{ _("optionsMirroringCategoryName") }
<h2>{ _("optionsMirroringCategoryName") }</h2>
</legend>
<p className="category__description">
{ _("optionsMirroringCategoryDescription") }
@@ -253,7 +324,7 @@ class App extends Component {
<fieldset className="category">
<legend className="category__name">
{ _("optionsUserAgentWhitelistCategoryName") }
<h2>{ _("optionsUserAgentWhitelistCategoryName") }</h2>
</legend>
<p className="category__description">
{ _("optionsUserAgentWhitelistCategoryDescription") }
@@ -276,7 +347,7 @@ class App extends Component {
<EditableList data={ this.state.options.userAgentWhitelist }
onChange={ this.handleWhitelistChange }
itemPattern={ MATCH_PATTERN_REGEX }
itemPatternError={ this.getWhitelistItemPatternError }/>
itemPatternError={ this.getWhitelistItemPatternError } />
</div>
</fieldset>
@@ -298,47 +369,6 @@ class App extends Component {
</button>
</div>
</form>
<div className="bridge">
{ do {
if (this.state.bridgeLoading) {
<div className="bridge__loading">
{ _("optionsBridgeLoading") }
<progress></progress>
</div>
} else if (this.state.bridgeInfo) {
const bridgeInfo = this.state.bridgeInfo;
let debugInfo =
`${bridgeInfo.isVersionCompatible
? _("optionsBridgeStatusCompatible")
: _("optionsBridgeStatusIncompatible")}\n\n`
+ `${APPLICATION_NAME} v${bridgeInfo.version}\n`
+ `Expected: ${APPLICATION_VERSION}\n`
+ `Found: ${bridgeInfo.version}\n`;
if (bridgeInfo.isVersionOlder) {
debugInfo += `\n${_("optionsBridgeOlder")}`
}
if (bridgeInfo.isVersionNewer) {
debugInfo += `\n${_("optionsBridgeNewer")}`
}
<div>
{ _("optionsBridgeInfo") }
<div className="bridge__found">
<textarea className="bridge__info">{ debugInfo }</textarea>
</div>
</div>
} else {
<div>
{ _("optionsBridgeInfo") }
<div className="bridge__missing">
{ _("optionsBridgeMissing") }
</div>
</div>
}
}}
</div>
</div>
);
}

66
ext/src/options/styles/index.css
View File

@@ -28,7 +28,7 @@
.bridge {
margin-top: 20px;
margin-bottom: 20px;
}
.bridge,
@@ -58,14 +58,52 @@
margin-top: 5px;
}
.bridge__found {
margin-top: 5px;
.bridge__info {
display: flex;
}
.bridge__info {
height: 150px;
margin-inline-start: 5px;
width: 80%;
.bridge__status {
align-items: center;
display: flex;
flex-basis: min-content;
flex-direction: column;
margin-inline-end: 50px;
margin-inline-start: 25px;
}
.bridge__status-text {
margin: initial;
font-weight: 500;
font-size: 1.5em;
white-space: nowrap;
}
.bridge__info--not-found .bridge__status {
flex-direction: row;
}
.bridge__info--found .bridge__status-icon {
margin-block-end: 5px;
}
.bridge__info--not-found .bridge__status-icon {
margin-inline-end: 10px;
}
.bridge__info--not-found .bridge__status-text {
font-weight: normal;
white-space: normal;
}
.bridge__stats {
border-collapse: collapse;
border-spacing: 0;
width: max-content;
}
.bridge__stats th {
font-weight: 500;
padding-inline-end: 10px;
text-align: end;
white-space: nowrap;
vertical-align: top;
}
@@ -73,7 +111,7 @@
border: initial;
display: grid;
grid-template-columns: 150px 1fr;
grid-column-gap: 20px;
grid-column-gap: 10px;
grid-row-gap: 5px;
margin: initial;
padding: 10px 0;
@@ -83,13 +121,13 @@
color: graytext;
}
.category:not(:first-of-type) {
#form > .category {
border-top: 1px solid var(--border-color);
}
.category > .category {
padding: 5px 0;
box-shadow: inset 6px 0 0 0 var(--border-color);
box-shadow: inset 2px 0 0 0 var(--border-color);
}
.category > .category > .category__name,
@@ -101,11 +139,19 @@
float: left;
}
.category__name > h2 {
font-size: 1.15em;
font-weight: 500;
margin: initial;
}
.category__description {
color: graytext;
margin-top: initial;
max-width: 60ch;
}
.category__name,
.category__description,
.category .category {
grid-column: span 2;