mirror of
https://github.com/hensm/fx_cast.git
synced 2026-06-12 02:29:59 +00:00
Move AirPlay auth module to extension and add initial options UI
This commit is contained in:
hensm
292
ext/src/ui/options/AirPlayDeviceManager.tsx
Normal file
292
ext/src/ui/options/AirPlayDeviceManager.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
"use strict";
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
||||
import { AirPlayAuthCredentials } from "../../lib/auth"
|
||||
import * as base64 from "../../lib/base64";
|
||||
import * as devices from "./devices";
|
||||
|
||||
|
||||
//const _ = browser.i18n.getMessage;
|
||||
|
||||
|
||||
interface AirPlayDeviceProps {
|
||||
data: devices.Device;
|
||||
|
||||
onRemove: (device: devices.Device) => void;
|
||||
onRegenCredentials: (device: devices.Device) => void;
|
||||
onPairCredentials: (device: devices.Device) => void;
|
||||
}
|
||||
|
||||
const AirPlayDevice = (props: AirPlayDeviceProps) => {
|
||||
const clientSk = base64.encode(props.data.credentials.clientSk);
|
||||
const clientPk = base64.encode(props.data.credentials.clientPk);
|
||||
|
||||
const pairedStatusClassName = !props.data.isPaired
|
||||
? "device__paired-status"
|
||||
: "device__paired-status device__paired-status--paired";
|
||||
|
||||
|
||||
function copyCredentials () {
|
||||
navigator.clipboard.writeText(
|
||||
` Client ID: ${props.data.credentials.clientId}\n`
|
||||
+ `Private Key: ${clientSk}\n`
|
||||
+ ` Public Key: ${clientPk}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="device">
|
||||
<div className="device__actions">
|
||||
<button className="device__action"
|
||||
onClick={ () => {
|
||||
props.onRemove(props.data);
|
||||
}}>
|
||||
Remove Device
|
||||
</button>
|
||||
|
||||
{ props.data.isPaired ||
|
||||
<button className="device__action"
|
||||
onClick={ () => {
|
||||
props.onPairCredentials(props.data);
|
||||
}}>
|
||||
Pair Device
|
||||
</button> }
|
||||
</div>
|
||||
<div className="device__meta">
|
||||
<div className="device__name">
|
||||
{ props.data.name }
|
||||
<span className={pairedStatusClassName}>
|
||||
{ props.data.isPaired ? "Paired" : "Unpaired" }
|
||||
</span>
|
||||
</div>
|
||||
<div className="device__address">
|
||||
{ props.data.address }
|
||||
</div>
|
||||
</div>
|
||||
<details className="device__credentials">
|
||||
<summary>Credentials</summary>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Client ID</th>
|
||||
<td>{ props.data.credentials.clientId }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Private key</th>
|
||||
<td>{ clientSk }</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Public key</th>
|
||||
<td>{ clientPk }</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div className="device__credentials-actions">
|
||||
<button className="small"
|
||||
onClick={ () => {
|
||||
props.onRegenCredentials(props.data);
|
||||
}}>
|
||||
Regenerate Credentials
|
||||
</button>
|
||||
<button className="small"
|
||||
onClick={ copyCredentials }>
|
||||
Copy to Clipboard
|
||||
</button>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
interface AirPlayDeviceManagerProps {}
|
||||
interface AirPlayDeviceManagerState {
|
||||
hasLoaded: boolean;
|
||||
isFormValid: boolean;
|
||||
devices: devices.Device[];
|
||||
|
||||
newDeviceName: string;
|
||||
newDeviceAddress: string;
|
||||
newDeviceAddressSuggestion: string;
|
||||
}
|
||||
|
||||
export default class AirPlayDeviceManager extends Component<
|
||||
AirPlayDeviceManagerProps, AirPlayDeviceManagerState> {
|
||||
|
||||
constructor (props: AirPlayDeviceManagerProps) {
|
||||
super(props);
|
||||
|
||||
this.onFormSubmit = this.onFormSubmit.bind(this);
|
||||
this.onFormInput = this.onFormInput.bind(this);
|
||||
|
||||
this.onDeviceAdd = this.onDeviceAdd.bind(this);
|
||||
this.onDeviceRemove = this.onDeviceRemove.bind(this);
|
||||
this.onDeviceRegenCredentials = this.onDeviceRegenCredentials.bind(this);
|
||||
this.onDevicePairCredentials = this.onDevicePairCredentials.bind(this);
|
||||
|
||||
this.onNewDeviceNameChange = this.onNewDeviceNameChange.bind(this);
|
||||
this.onNewDeviceAddressChange = this.onNewDeviceAddressChange.bind(this);
|
||||
|
||||
|
||||
this.state = {
|
||||
hasLoaded: false
|
||||
, isFormValid: false
|
||||
, devices: []
|
||||
|
||||
, newDeviceName: ""
|
||||
, newDeviceAddress: ""
|
||||
, newDeviceAddressSuggestion: ""
|
||||
};
|
||||
}
|
||||
|
||||
public render () {
|
||||
if (!this.state.hasLoaded) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="device-manager">
|
||||
<ul className="device-manager__devices">
|
||||
{ this.state.devices.length
|
||||
? this.state.devices.map(device => (
|
||||
<AirPlayDevice data={ device }
|
||||
onRemove={ this.onDeviceRemove }
|
||||
onRegenCredentials={this.onDeviceRegenCredentials }
|
||||
onPairCredentials={ this.onDevicePairCredentials } /> ))
|
||||
: <div className="device-manager__no-devices">
|
||||
No devices added
|
||||
</div> }
|
||||
</ul>
|
||||
|
||||
<form className="device-manager-new"
|
||||
onSubmit={this.onFormSubmit}
|
||||
onInput={this.onFormInput}>
|
||||
|
||||
<label className="device-manager-new__label">
|
||||
<div className="device-manager-new__input-label">
|
||||
Device name
|
||||
</div>
|
||||
<input className="device-manager-new__input-name"
|
||||
type="text"
|
||||
//required
|
||||
name="newDeviceName"
|
||||
placeholder="Living Room"
|
||||
value={ this.state.newDeviceName }
|
||||
onChange={ this.onNewDeviceNameChange } />
|
||||
</label>
|
||||
|
||||
<label className="device-manager-new__label">
|
||||
<div className="device-manager-new__input-label">
|
||||
Device address
|
||||
</div>
|
||||
<input className="device-manager-new__input-address"
|
||||
type="text"
|
||||
pattern="^[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]$"
|
||||
name="newDeviceAddress"
|
||||
placeholder={
|
||||
(this.state.newDeviceName
|
||||
&& this.state.newDeviceAddressSuggestion)
|
||||
|| "living-room.local" }
|
||||
value={ this.state.newDeviceAddress }
|
||||
onChange={ this.onNewDeviceAddressChange } />
|
||||
</label>
|
||||
|
||||
<button className="device-manager-new__submit"
|
||||
type="submit"
|
||||
disabled={ !this.state.isFormValid }>
|
||||
Add Device
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
public async componentDidMount () {
|
||||
this.setState({
|
||||
hasLoaded: true
|
||||
, devices: await devices.getAll()
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
private onFormSubmit (ev: React.FormEvent<HTMLFormElement>) {
|
||||
ev.preventDefault();
|
||||
|
||||
if (ev.currentTarget.reportValidity()) {
|
||||
this.onDeviceAdd();
|
||||
}
|
||||
}
|
||||
|
||||
private onFormInput (ev: React.ChangeEvent<HTMLFormElement>) {
|
||||
this.setState({
|
||||
isFormValid: ev.currentTarget.reportValidity()
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
private async onDeviceAdd () {
|
||||
const device: devices.Device = {
|
||||
name: this.state.newDeviceName
|
||||
, address: this.state.newDeviceAddress
|
||||
, credentials: new AirPlayAuthCredentials()
|
||||
, isPaired: false
|
||||
};
|
||||
|
||||
// Use generated address if user left it blank
|
||||
if (!this.state.newDeviceAddress) {
|
||||
device.address = this.state.newDeviceAddressSuggestion;
|
||||
}
|
||||
|
||||
await devices.add(device);
|
||||
|
||||
this.setState({
|
||||
devices: await devices.getAll()
|
||||
});
|
||||
}
|
||||
|
||||
private onDeviceRemove (device: devices.Device) {
|
||||
this.setState(state => ({
|
||||
devices: state.devices.filter(d => d.name !== device.name)
|
||||
}));
|
||||
|
||||
devices.remove(device);
|
||||
}
|
||||
|
||||
private onDeviceRegenCredentials (device: devices.Device) {
|
||||
this.setState(state => {
|
||||
devices: state.devices.map(d => {
|
||||
if (d.name === device.name) {
|
||||
d.credentials = new AirPlayAuthCredentials();
|
||||
}
|
||||
|
||||
return d;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private onDevicePairCredentials () {}
|
||||
|
||||
|
||||
private onNewDeviceNameChange (ev: React.ChangeEvent<HTMLInputElement>) {
|
||||
this.setState({
|
||||
newDeviceName: ev.target.value
|
||||
});
|
||||
|
||||
if (!this.state.newDeviceAddress) {
|
||||
const formattedName = ev.target.value
|
||||
.replace(/\s{2,}/g, " ")
|
||||
.replace(/ /g, "-")
|
||||
.replace(/[^a-zA-Z0-9-]/g, "");
|
||||
|
||||
this.setState({
|
||||
newDeviceAddressSuggestion: `${formattedName}.local`
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private onNewDeviceAddressChange (ev: React.ChangeEvent<HTMLInputElement>) {
|
||||
this.setState({
|
||||
newDeviceAddress: ev.target.value
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user