From 1fd1b3c06481557aef3f6123b58c14845b088d1d Mon Sep 17 00:00:00 2001
From: 6ea86b96 <6ea86b96@gmail.com>
Date: Sat, 3 Jun 2017 00:54:11 +0700
Subject: [PATCH] Render all file types that render-media can handle

---
 ui/js/component/video/view.jsx | 6 ++++--
 ui/js/page/filePage/view.jsx   | 5 ++++-
 ui/scss/page/_show.scss        | 5 +++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx
index 09ca9a5ac..247be7740 100644
--- a/ui/js/component/video/view.jsx
+++ b/ui/js/component/video/view.jsx
@@ -49,7 +49,7 @@ class VideoPlayButton extends React.Component {
      */
 
     const disabled = isLoading || fileInfo === undefined || (fileInfo === null && (!costInfo || costInfo.cost === undefined))
-    const icon = mediaType == "image" ? "icon-folder-o" : "icon-play"
+    const icon = ["audio", "video"].indexOf(mediaType) !== -1 ? "icon-play" : "icon-folder-o"
 
     return (<div>
       <Link button={ button ? button : null }
@@ -119,6 +119,8 @@ class Video extends React.Component {
     if (mediaType === "video") {
       klassName += "video-embedded video"
       klassName += isPlaying ? " video--active" : " video--hidden"
+    } else if (mediaType === "application") {
+      klassName += "video-embedded"
     } else {
       if (!isPlaying) klassName += "video-embedded"
     }
@@ -170,7 +172,7 @@ class VideoPlayer extends React.Component {
 
     return (
       <div>
-        {mediaType === "audio" && <Thumbnail src={poster} className="video-embedded" />}
+        {["audio", "application"].indexOf(mediaType) !== -1 && <Thumbnail src={poster} className="video-embedded" />}
         <div ref="media" />
       </div>
     )
diff --git a/ui/js/page/filePage/view.jsx b/ui/js/page/filePage/view.jsx
index b1e031df7..cdee31c35 100644
--- a/ui/js/page/filePage/view.jsx
+++ b/ui/js/page/filePage/view.jsx
@@ -93,11 +93,14 @@ class FilePage extends React.Component{
     const channelUri = signatureIsValid && hasSignature && channelName ? lbryuri.build({channelName, claimId: channelClaimId}, false) : null
     const uriIndicator = <UriIndicator uri={uri} />
     const mediaType = lbry.getMediaType(contentType)
+    const player = require('render-media')
+    const isPlayable = Object.values(player.mime).indexOf(contentType) !== -1 ||
+      mediaType === "audio"
 
     return (
       <main className="main--single-column">
         <section className="show-page-media">
-          { ["video", "audio", "image"].indexOf(mediaType) !== -1 ?
+          { isPlayable ?
             <Video className="video-embedded" uri={uri} /> :
             (metadata && metadata.thumbnail ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
         </section>
diff --git a/ui/scss/page/_show.scss b/ui/scss/page/_show.scss
index 48b82d065..0dbfea2e0 100644
--- a/ui/scss/page/_show.scss
+++ b/ui/scss/page/_show.scss
@@ -6,4 +6,9 @@
   img {
     max-width: 100%;
   }
+
+  iframe {
+    width: 100%;
+    min-height: 500px;
+  }
 }
\ No newline at end of file