In FileTile, show a message when a file is unavailable

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 (
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card-obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
-        <div className={"row-fluid card-content file-tile__row"}>
+        {showUnavailable
+          ? <div className='file-tile__not-available-message'>
+              This file is not currently available. <ToolTipLink label="Why?" tooltip={unavailableMessage} className="not-available-tooltip-link" />
+            </div>
+          : null}
+        <div className={"row-fluid card-content file-tile__row" + (showUnavailable ? ' file-tile__row--unavailable' : '')}>
           <div className="span3">
             <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + (title || this.props.name)} /></a>
           </div>

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;

scss/component/_file-tile.scss

@@ -5,7 +5,7 @@
 }
 
 .file-tile__row--unavailable {
-  opacity: 0.65;
+  opacity: 0.5;
 }
 
 .file-tile__thumbnail {
@@ -29,3 +29,13 @@
   margin-top: 12px;
   font-size: 0.9em;
 }
+
+.file-tile__not-available-message {
+  height: auto;
+  text-align: right;
+  color: $color-notice;
+}
+
+.file-tile .not-available-tooltip-link__tooltip { /* temporary */
+  left: -225px;
+}