diff --git a/js/component/file-tile.js b/js/component/file-tile.js index 2349df364..d7e4f915f 100644 --- a/js/component/file-tile.js +++ b/js/component/file-tile.js @@ -1,6 +1,6 @@ import React from 'react'; import lbry from '../lbry.js'; -import {Link} from '../component/link.js'; +import {Link, ToolTipLink} from '../component/link.js'; import {FileActions} from '../component/file-actions.js'; import {Thumbnail, TruncatedText, CreditAmount} from '../component/common.js'; @@ -125,11 +125,18 @@ export let FileTileStream = React.createClass({ const metadata = this.props.metadata || {}, obscureNsfw = this.props.obscureNsfw && metadata.nsfw, - title = metadata.title ? metadata.title : ('lbry://' + this.props.name); - + title = metadata.title ? metadata.title : ('lbry://' + this.props.name), + showUnavailable = this.isAvailable() === false, + unavailableMessage = ("The content on LBRY is hosted by its users. It appears there are no " + + "users connected that have this file at the moment."); return (
-
+ {showUnavailable + ?
+ This file is not currently available. +
+ : null} +
diff --git a/scss/_global.scss b/scss/_global.scss index b59b5821f..7c616ac29 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -8,6 +8,7 @@ $color-primary: #155B4A; $color-light-alt: hsl(hue($color-primary), 15, 85); $color-text-dark: #000; $color-help: rgba(0,0,0,.6); +$color-notice: #921010; $color-canvas: #f5f5f5; $color-bg: #ffffff; $color-bg-alt: #D9D9D9; diff --git a/scss/component/_file-tile.scss b/scss/component/_file-tile.scss index 74b06c461..b5118fb22 100644 --- a/scss/component/_file-tile.scss +++ b/scss/component/_file-tile.scss @@ -5,7 +5,7 @@ } .file-tile__row--unavailable { - opacity: 0.65; + opacity: 0.5; } .file-tile__thumbnail { @@ -28,4 +28,14 @@ color: #444; margin-top: 12px; font-size: 0.9em; -} \ No newline at end of file +} + +.file-tile__not-available-message { + height: auto; + text-align: right; + color: $color-notice; +} + +.file-tile .not-available-tooltip-link__tooltip { /* temporary */ + left: -225px; +}