diff --git a/ui/js/component/channel-indicator.js b/ui/js/component/channel-indicator.js new file mode 100644 index 000000000..674484200 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/ui/scss/all.scss b/ui/scss/all.scss index 8729eb666..6012fc3ee 100644 --- a/ui/scss/all.scss +++ b/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"; \ No newline at end of file diff --git a/ui/scss/component/_channel-indicator.scss b/ui/scss/component/_channel-indicator.scss new file mode 100644 index 000000000..06446e23f --- /dev/null +++ b/ui/scss/component/_channel-indicator.scss @@ -0,0 +1,5 @@ +@import "../global"; + +.channel-indicator__icon--invalid { + color: #b01c2e; +}