Merge pull request #3222 from tylershuster/sigil-favicon

Interface: Set favicon to ship sigil

pkg/interface/src/App.js

@@ -3,6 +3,7 @@ import 'react-hot-loader';
 import * as React from 'react';
 import { BrowserRouter as Router, Route, withRouter, Switch } from 'react-router-dom';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
+import { sigil as sigiljs, stringRenderer } from 'urbit-sigil-js';
 
 import './css/indigo-static.css';
 import './css/fonts.css';
@@ -22,6 +23,8 @@ import ErrorComponent from './components/Error';
 import GlobalStore from './store/store';
 import GlobalSubscription from './subscription/global';
 import GlobalApi from './api/global';
+import { uxToHex } from './lib/util';
+import { Sigil } from './lib/sigil';
 
 // const Style = createGlobalStyle`
 //   ${cssReset}
@@ -62,6 +65,7 @@ class App extends React.Component {
       new GlobalSubscription(this.store, this.api, this.appChannel);
 
     this.updateTheme = this.updateTheme.bind(this);
+    this.setFavicon = this.setFavicon.bind(this);
   }
 
   componentDidMount() {
@@ -70,16 +74,41 @@ class App extends React.Component {
     this.api.local.setDark(this.themeWatcher.matches);
     this.themeWatcher.addListener(this.updateTheme);
     this.api.local.getBaseHash();
+    this.setFavicon();
   }
 
   componentWillUnmount() {
     this.themeWatcher.removeListener(this.updateTheme);
   }
 
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    this.setFavicon();
+  }
+
   updateTheme(e) {
     this.api.local.setDark(e.matches);
   }
 
+  setFavicon() {
+    if (window.ship.length < 14) {
+      let background = '#ffffff';
+      if (this.state.contacts.hasOwnProperty('/~/default')) {
+        background = `#${uxToHex(this.state.contacts['/~/default'][window.ship].color)}`;
+      }
+      const foreground = Sigil.foregroundFromBackground(background);
+      const svg = sigiljs({
+        patp: window.ship,
+        renderer: stringRenderer,
+        size: 16,
+        colors: [background, foreground]
+      });
+      const dataurl = 'data:image/svg+xml;base64,' + btoa(svg);
+      const favicon = document.querySelector('[rel=icon]');
+      favicon.href = dataurl;
+      favicon.type = 'image/svg+xml';
+    }
+  }
+
   render() {
     const channel = window.channel;
 

pkg/interface/src/components/StatusBar.js

@@ -68,8 +68,8 @@ const StatusBar = (props) => {
               </Link>
         }
          <p className="dib f9 v-mid inter ml2 white-d">{locationName}</p>
-    { connection === 'disconnected' && 
-      (<span 
+    { connection === 'disconnected' &&
+      (<span
         onClick={reconnect}
         className="ml4 ph2 dib f9 v-mid red2 inter ba b-red2 br1 pointer"
         >Reconnect ↻</span> )

pkg/interface/src/lib/sigil.js

@@ -2,24 +2,24 @@ import React, { Component } from 'react';
 import { sigil, reactRenderer } from 'urbit-sigil-js';
 
 export class Sigil extends Component {
+  static foregroundFromBackground(background) {
+    const rgb = {
+      r: parseInt(background.slice(1, 3), 16),
+      g: parseInt(background.slice(3, 5), 16),
+      b: parseInt(background.slice(5, 7), 16)
+    };
+    const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000;
+    const whiteBrightness = 255;
+
+    return ((whiteBrightness - brightness) < 50) ? 'black' : 'white';
+  }
+  
   render() {
     const { props } = this;
 
     const classes = props.classes || '';
 
-    const rgb = {
-      r: parseInt(props.color.slice(1, 3), 16),
-      g: parseInt(props.color.slice(3, 5), 16),
-      b: parseInt(props.color.slice(5, 7), 16)
-    };
-    const brightness = ((299 * rgb.r) + (587 * rgb.g) + (114 * rgb.b)) / 1000;
-    const whiteBrightness = 255;
-
-    let foreground = 'white';
-
-    if ((whiteBrightness - brightness) < 50) {
-      foreground = 'black';
-    }
+    const foreground = Sigil.foregroundFromBackground(props.color);
 
     if (props.ship.length > 14) {
       return (