Merge pull request #189 from 6ea86b96/play-more-file-types

Render all file types that render-media can handle

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>
     )

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>

ui/scss/page/_show.scss

@@ -6,4 +6,9 @@
   img {
     max-width: 100%;
   }
+
+  iframe {
+    width: 100%;
+    min-height: 500px;
+  }
 }