From bc129eb3479bd195e633be02aa9dfe4a6784a158 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 2 Sep 2016 04:48:01 -0400
Subject: [PATCH 1/3] Make lbry.getMediaType() able to use MIME type as well as
 file name

---
 js/lbry.js | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/js/lbry.js b/js/lbry.js
index 381dde98f..c783748e6 100644
--- a/js/lbry.js
+++ b/js/lbry.js
@@ -283,21 +283,25 @@ lbry.imagePath = function(file)
   return lbry.rootPath + '/img/' + file;
 }
 
-lbry.getMediaType = function(filename) {
-  var dotIndex = filename.lastIndexOf('.');
-  if (dotIndex == -1) {
-    return 'unknown';
-  }
-
-  var ext = filename.substr(dotIndex + 1);
-  if (/^mp4|mov|m4v|flv|f4v$/i.test(ext)) {
-    return 'video';
-  } else if (/^mp3|m4a|aac|wav|flac|ogg$/i.test(ext)) {
-    return 'audio';
-  } else if (/^html|htm|pdf|odf|doc|docx|md|markdown|txt$/i.test(ext)) {
-    return 'document';
+lbry.getMediaType = function(contentType, fileName) {
+  if (contentType) {
+    return /^[^/]+/.exec(contentType);
   } else {
-    return 'unknown';
+    var dotIndex = filename.lastIndexOf('.');
+    if (dotIndex == -1) {
+      return 'unknown';
+    }
+
+    var ext = filename.substr(dotIndex + 1);
+    if (/^mp4|mov|m4v|flv|f4v$/i.test(ext)) {
+      return 'video';
+    } else if (/^mp3|m4a|aac|wav|flac|ogg$/i.test(ext)) {
+      return 'audio';
+    } else if (/^html|htm|pdf|odf|doc|docx|md|markdown|txt$/i.test(ext)) {
+      return 'document';
+    } else {
+      return 'unknown';
+    }
   }
 }
 

From 3deb1608228d5ffa75d467ffb328692d8ba4ae76 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 2 Sep 2016 04:50:44 -0400
Subject: [PATCH 2/3] Make My Files page get media type via content_type
 instead of filename

---
 js/page/my_files.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/js/page/my_files.js b/js/page/my_files.js
index c311e5b2b..45798766e 100644
--- a/js/page/my_files.js
+++ b/js/page/my_files.js
@@ -195,7 +195,9 @@ var MyFilesPage = React.createClass({
         }
 
         var ratioLoaded = written_bytes / total_bytes;
-        var showWatchButton = (lbry.getMediaType(file_name) == 'video' || lbry.getMediaType(file_name) == 'audio');
+
+        var mediaType = lbry.getMediaType(metadata.content_type, file_name);
+        var showWatchButton = (mediaType == 'video');
 
         content.push(<MyFilesRow key={lbry_uri} lbryUri={lbry_uri} title={title || ('lbry://' + lbry_uri)} completed={completed} stopped={stopped}
                                  ratioLoaded={ratioLoaded} imgUrl={thumbnail} path={download_path}

From ef3e57be8a866119094dbbffa8f8e1387f210148 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 2 Sep 2016 04:51:22 -0400
Subject: [PATCH 3/3] On Discover and Show pages, hide Watch button for
 non-video content

---
 js/page/discover.js | 6 +++---
 js/page/show.js     | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/js/page/discover.js b/js/page/discover.js
index 11fb00cef..cb9ec24c6 100644
--- a/js/page/discover.js
+++ b/js/page/discover.js
@@ -105,7 +105,7 @@ var SearchResultRow = React.createClass({
             <div className="meta"><a href={'/?show=' + this.props.name}>lbry://{this.props.name}</a></div>
             <h3 style={searchRowTitleStyle}><a href={'/?show=' + this.props.name}>{this.props.title}</a></h3>
             <div>
-              <WatchLink streamName={this.props.name} button="primary" />
+              {this.props.mediaType == 'video' ? <WatchLink streamName={this.props.name} button="primary" /> : null}
               <DownloadLink streamName={this.props.name} button="text" />
             </div>
             <p style={searchRowDescriptionStyle}>{this.props.description}</p>
@@ -175,8 +175,8 @@ var FeaturedContentItem = React.createClass({
 
     return (<div style={featuredContentItemContainerStyle}>
       <SearchResultRow name={this.props.name} title={this.state.title} imgUrl={this.state.metadata.thumbnail || '/img/default-thumb.svg'}
-                 description={this.state.metadata.description} cost={this.state.amount} nsfw={this.state.metadata.nsfw}
-                 available={this.state.available} />
+                 description={this.state.metadata.description} mediaType={lbry.getMediaType(this.state.metadata.content_type)}
+                 cost={this.state.amount} nsfw={this.state.metadata.nsfw} available={this.state.available} />
     </div>);
   }
 });
diff --git a/js/page/show.js b/js/page/show.js
index 89469c59d..ea04f9f06 100644
--- a/js/page/show.js
+++ b/js/page/show.js
@@ -24,6 +24,7 @@ var FormatItem = React.createClass({
     var language = claimInfo.language;
     var license = claimInfo.license;
     var fileContentType = (claimInfo.content_type || claimInfo['content-type']);
+    var mediaType = lbry.getMediaType(fileContentType);
     var available = this.props.available;
     var amount = this.props.amount || 0.0;
 
@@ -56,7 +57,7 @@ var FormatItem = React.createClass({
             </table>
           </section>
           <section>
-            <WatchLink streamName={this.props.name} button="primary" />
+            {mediaType == 'video' ? <WatchLink streamName={this.props.name} button="primary" /> : null}
             <DownloadLink streamName={this.props.name} button="alt" />
           </section>
         </div>