Add channel indicator component

ui/js/component/channel-indicator.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import lbry from '../lbry.js';
+import uri from '../uri.js';
+import {Icon} from './common.js';
+
+const ChannelIndicator = React.createClass({
+  propTypes: {
+    uri: React.PropTypes.string.isRequired,
+    claimInfo: React.PropTypes.object.isRequired,
+  },
+  render: function() {
+    const {name, has_signature, signature_is_valid} = this.props.claimInfo;
+    if (!has_signature) {
+      return null;
+    }
+
+    const uriObj = uri.parseLbryUri(this.props.uri);
+    if (!uriObj.isChannel) {
+      return null;
+    }
+
+    const channelUriObj = Object.assign({}, uriObj);
+    delete channelUriObj.path;
+    const channelUri = uri.buildLbryUri(channelUriObj, false);
+
+    let icon, modifier;
+    if (!signature_is_valid) {
+      icon = 'icon-check-circle';
+      modifier = 'valid';
+    } else {
+      icon = 'icon-times-circle';
+      modifier = 'invalid';
+    }
+    return (
+      <span>
+        by <strong>{channelUri}</strong> {' '}
+        <Icon icon={icon} className={`channel-indicator__icon channel-indicator__icon--${modifier}`} />
+      </span>
+    );
+  }
+});
+
+export default ChannelIndicator;

ui/scss/all.scss

@@ -10,5 +10,6 @@
 @import "component/_menu.scss";
 @import "component/_tooltip.scss";
 @import "component/_load-screen.scss";
+@import "component/_channel-indicator.scss";
 @import "page/_developer.scss";
 @import "page/_watch.scss";

ui/scss/component/_channel-indicator.scss

@@ -0,0 +1,5 @@
+@import "../global";
+
+.channel-indicator__icon--invalid {
+  color: #b01c2e;
+}