Use i18n for AirPlay strings

ext/src/_locales/en/messages.json

@@ -327,6 +327,75 @@
         "message": "App ID for a registered Chromecast receiver application. Advanced use only. Must be compatible with the default app (see GitHub repo)."
       , "description": "Mirroring app ID option description."
     }
+  
+  , "optionsAirPlayCategoryName": {
+        "message": "AirPlay"
+      , "description": "Options page AirPlay category name."
+    }
+  , "optionsAirPlayCategoryDescription": {
+        "message": "Management of AirPlay devices and API settings."
+      , "description": "Options page AirPlay category description."
+    }
+  , "optionsAirPlayDeviceManager": {
+        "message": "Device manager"
+      , "description": "Label for the options page AirPlay device manager control."
+    }
+  , "optionsAirPlayDeviceManagerNoDevices": {
+        "message": "No devices paired"
+      , "description": "Message displayed in the AirPlay device manager when there are no paired devices to display."
+    }
+  , "optionsAirPlayDeviceManagerNewName": {
+        "message": "Device name"
+      , "description": "Label for the AirPlay device manager new device name field."
+    }
+  , "optionsAirPlayDeviceManagerNewAddress": {
+        "message": "Device address"
+      , "description": "Label for the AirPlay device manager new device name field."
+    }
+  , "optionsAirPlayDeviceManagerNewSubmit": {
+        "message": "Add Device"
+      , "description": "Label for the AirPlay device manager new device submit button."
+    }
+  , "optionsAirPlayDeviceRemove": {
+        "message": "Remove Device"
+      , "description": "AirPlay device remove button label."
+    }
+  , "optionsAirPlayDevicePair": {
+        "message": "Pair Device"
+      , "description": "AirPlay device pair button label. Ellipsis indicates additional action required as it requires the user to enter additional info (pairing PIN)."
+    }
+  , "optionsAirPlayDevicePairedStatusPaired": {
+        "message": "Paired"
+      , "description": "AirPlay device status for paired devices."
+    }
+  , "optionsAirPlayDevicePairedStatusUnpaired": {
+        "message": "Unpaired"
+      , "description": "AirPlay device status for unpaired devices."
+    }
+  , "optionsAirPlayDeviceCredentials": {
+        "message": "Credentials"
+      , "description": "AirPlay device credentials <summary> label."
+    }
+  , "optionsAirPlayDeviceCredentialsClientId": {
+        "message": "Client ID"
+      , "description": "AirPlay device credentials client ID table header."
+    }
+  , "optionsAirPlayDeviceCredentialsPrivateKey": {
+        "message": "Private key"
+      , "description": "AirPlay device credentials private key table header."
+    }
+  , "optionsAirPlayDeviceCredentialsPublicKey": {
+        "message": "Public key"
+      , "description": "AirPlay device credentials public key table header."
+    }
+  , "optionsAirPlayDeviceCredentialsRegenerate": {
+        "message": "Regenerate Credentials"
+      , "description": "AirPlay device credentials regenerate button label."
+    }
+  , "optionsAirPlayDeviceCredentialsCopyToClipboard": {
+        "message": "Copy to Clipboard"
+      , "description": "AirPlay device credentials copy to clipbard button label."
+    }
 
   , "optionsReset": {
         "message": "Restore Defaults"

ext/src/ui/options/AirPlayDeviceManager.tsx

@@ -7,7 +7,7 @@ import * as base64 from "../../lib/base64";
 import * as devices from "./devices";
 
 
-//const _ = browser.i18n.getMessage;
+const _ = browser.i18n.getMessage;
 
 
 interface AirPlayDeviceProps {
@@ -41,7 +41,7 @@ const AirPlayDevice = (props: AirPlayDeviceProps) => {
                         onClick={ () => {
                             props.onRemove(props.data);
                         }}>
-                    Remove Device
+                    { _("optionsAirPlayDeviceRemove") }
                 </button>
 
                 { props.data.isPaired ||
@@ -49,14 +49,16 @@ const AirPlayDevice = (props: AirPlayDeviceProps) => {
                             onClick={ () => {
                                 props.onPairCredentials(props.data);
                             }}>
-                        Pair Device
+                        { _("optionsAirPlayDevicePair") }
                     </button> }
             </div>
             <div className="device__meta">
                 <div className="device__name">
                     { props.data.name }
                     <span className={pairedStatusClassName}>
-                        { props.data.isPaired ? "Paired" : "Unpaired" }
+                        { props.data.isPaired
+                            ? _("optionsAirPlayDevicePairedStatusPaired")
+                            : _("optionsAirPlayDevicePairedStatusUnpaired") }
                     </span>
                 </div>
                 <div className="device__address">
@@ -64,19 +66,19 @@ const AirPlayDevice = (props: AirPlayDeviceProps) => {
                 </div>
             </div>
             <details className="device__credentials">
-                <summary>Credentials</summary>
+                <summary>{ _("optionsAirPlayDeviceCredentials") }</summary>
 
                 <table>
                     <tr>
-                        <th>Client ID</th>
+                        <th>{ _("optionsAirPlayDeviceCredentialsClientId") }</th>
                         <td>{ props.data.credentials.clientId }</td>
                     </tr>
                     <tr>
-                        <th>Private key</th>
+                        <th>{ _("optionsAirPlayDeviceCredentialsPrivateKey") }</th>
                         <td>{ clientSk }</td>
                     </tr>
                     <tr>
-                        <th>Public key</th>
+                        <th>{ _("optionsAirPlayDeviceCredentialsPublicKey") }</th>
                         <td>{ clientPk }</td>
                     </tr>
                 </table>
@@ -86,11 +88,11 @@ const AirPlayDevice = (props: AirPlayDeviceProps) => {
                             onClick={ () => {
                                 props.onRegenCredentials(props.data);
                             }}>
-                        Regenerate Credentials
+                        { _("optionsAirPlayDeviceCredentialsRegenerate") }
                     </button>
                     <button className="small"
                             onClick={ copyCredentials }>
-                        Copy to Clipboard
+                        { _("optionsAirPlayDeviceCredentialsCopyToClipboard") }
                     </button>
                 </div>
             </details>
@@ -154,7 +156,7 @@ export default class AirPlayDeviceManager extends Component<
                                           onRegenCredentials={this.onDeviceRegenCredentials }
                                           onPairCredentials={ this.onDevicePairCredentials } /> ))
                         : <div className="device-manager__no-devices">
-                              No devices added
+                              { _("optionsAirPlayDeviceManagerNoDevices") }
                           </div> }
                 </ul>
 
@@ -164,7 +166,7 @@ export default class AirPlayDeviceManager extends Component<
 
                     <label className="device-manager-new__label">
                         <div className="device-manager-new__input-label">
-                            Device name
+                            { _("optionsAirPlayDeviceManagerNewName") }
                         </div>                    
                         <input className="device-manager-new__input-name"
                                type="text"
@@ -177,8 +179,8 @@ export default class AirPlayDeviceManager extends Component<
 
                     <label className="device-manager-new__label">
                         <div className="device-manager-new__input-label">
-                            Device address
-                        </div>                    
+                            { _("optionsAirPlayDeviceManagerNewAddress") }
+                        </div>
                         <input className="device-manager-new__input-address"
                                type="text"
                                pattern="^[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]$"
@@ -194,7 +196,7 @@ export default class AirPlayDeviceManager extends Component<
                     <button className="device-manager-new__submit"
                            type="submit"
                            disabled={ !this.state.isFormValid }>
-                        Add Device
+                        { _("optionsAirPlayDeviceManagerNewSubmit") }
                     </button>
                 </form>
             </div>

ext/src/ui/options/index.tsx

@@ -313,15 +313,15 @@ class OptionsApp extends Component<{}, OptionsAppState> {
 
                     <fieldset className="category">
                         <legend className="category__name">
-                            <h2>AirPlay</h2>
+                            <h2>{ _("optionsAirPlayCategoryName") }</h2>
                         </legend>
                         <p className="category__description">
-                            Management of AirPlay devices and API settings.
+                            { _("optionsAirPlayCategoryDescription") }
                         </p>
 
                         <div className="option">
                             <div className="option__label">
-                                Device manager
+                            { _("optionsAirPlayDeviceManager") }
                             </div>
                             <div className="option__control">
                                 <AirPlayDeviceManager />