From 8505959c22e7385b3610749d16b1047ee293027b Mon Sep 17 00:00:00 2001
From: 6ea86b96 <6ea86b96@gmail.com>
Date: Wed, 31 May 2017 21:36:38 +0400
Subject: [PATCH] Use render-media to render audio and images

---
 ui/js/component/fileActions/view.jsx |  2 ++
 ui/js/component/video/index.js       |  5 +++-
 ui/js/component/video/view.jsx       | 40 ++++++++++++++++++++--------
 ui/js/lbry.js                        |  2 +-
 ui/js/page/filePage/view.jsx         |  3 ++-
 5 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx
index 6653bd236..604261376 100644
--- a/ui/js/component/fileActions/view.jsx
+++ b/ui/js/component/fileActions/view.jsx
@@ -73,6 +73,8 @@ class FileActions extends React.Component {
 
     let content
 
+    console.log(fileInfo)
+
     if (downloading) {
 
       const
diff --git a/ui/js/component/video/index.js b/ui/js/component/video/index.js
index 423ff533a..e581f4bc6 100644
--- a/ui/js/component/video/index.js
+++ b/ui/js/component/video/index.js
@@ -13,7 +13,8 @@ import {
   doLoadVideo,
 } from 'actions/content'
 import {
-  makeSelectMetadataForUri
+  makeSelectMetadataForUri,
+  makeSelectContentTypeForUri,
 } from 'selectors/claims'
 import {
   makeSelectFileInfoForUri,
@@ -32,6 +33,7 @@ const makeSelect = () => {
   const selectIsLoading = makeSelectLoadingForUri()
   const selectIsDownloading = makeSelectDownloadingForUri()
   const selectMetadata = makeSelectMetadataForUri()
+  const selectContentType = makeSelectContentTypeForUri()
 
   const select = (state, props) => ({
     costInfo: selectCostInfo(state, props),
@@ -40,6 +42,7 @@ const makeSelect = () => {
     modal: selectCurrentModal(state),
     isLoading: selectIsLoading(state, props),
     isDownloading: selectIsDownloading(state, props),
+    contentType: selectContentType(state, props),
   })
 
   return select
diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx
index d7a1f274f..723b92c62 100644
--- a/ui/js/component/video/view.jsx
+++ b/ui/js/component/video/view.jsx
@@ -2,6 +2,10 @@ import React from 'react';
 import FilePrice from 'component/filePrice'
 import Link from 'component/link';
 import Modal from 'component/modal';
+import lbry from 'lbry'
+import {
+  Thumbnail,
+} from 'component/common'
 
 class VideoPlayButton extends React.Component {
   onPurchaseConfirmed() {
@@ -33,6 +37,7 @@ class VideoPlayButton extends React.Component {
       isLoading,
       costInfo,
       fileInfo,
+      mediaType,
     } = this.props
 
     /*
@@ -44,13 +49,14 @@ 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"
 
     return (<div>
       <Link button={ button ? button : null }
             disabled={disabled}
             label={label ? label : ""}
             className="video__play-button"
-            icon="icon-play"
+            icon={icon}
             onClick={this.onWatchClick.bind(this)} />
       <Modal contentLabel="Not enough credits" isOpen={modal == 'notEnoughCredits'} onConfirmed={closeModal}>
         You don't have enough LBRY credits to pay for this stream.
@@ -89,12 +95,14 @@ class Video extends React.Component {
       isLoading,
       isDownloading,
       fileInfo,
+      contentType,
     } = this.props
     const {
       isPlaying = false,
     } = this.state
 
     const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0
+    const mediaType = lbry.getMediaType(contentType, fileInfo && fileInfo.file_name)
 
     let loadStatusMessage = ''
 
@@ -106,14 +114,24 @@ class Video extends React.Component {
       loadStatusMessage = "Downloading stream... not long left now!"
     }
 
+    let klassName = ""
+    if (isLoading || isDownloading) klassName += "video-embedded video"
+    if (mediaType === "video") {
+      klassName += "video-embedded video"
+      klassName += isPlaying ? " video--active" : " video--hidden"
+    } else {
+      if (!isPlaying) klassName += "video-embedded"
+    }
+    const poster = metadata.thumbnail
+
     return (
-      <div className={"video " + this.props.className + (isPlaying ? " video--active" : " video--hidden")}>{
+      <div className={klassName}>{
         isPlaying || isLoading ?
           (!isReadyToPlay ?
             <span>this is the world's worst loading screen and we shipped our software with it anyway... <br /><br />{loadStatusMessage}</span> :
-            <VideoPlayer filename={fileInfo.file_name} poster={metadata.thumbnail} downloadPath={fileInfo.download_path} />) :
+            <VideoPlayer filename={fileInfo.file_name} poster={poster} downloadPath={fileInfo.download_path} mediaType={mediaType} poster={poster} />) :
         <div className="video__cover" style={{backgroundImage: 'url("' + metadata.thumbnail + '")'}}>
-          <VideoPlayButton startPlaying={this.startPlaying.bind(this)} {...this.props} />
+          <VideoPlayButton startPlaying={this.startPlaying.bind(this)} {...this.props} mediaType={mediaType} />
         </div>
       }</div>
     );
@@ -126,10 +144,9 @@ const fs = require('fs')
 
 class VideoPlayer extends React.Component {
   componentDidMount() {
-    const elem = this.refs.video
+    const elem = this.refs.media
     const {
       downloadPath,
-      contentType,
       filename,
     } = this.props
     const file = {
@@ -138,7 +155,7 @@ class VideoPlayer extends React.Component {
         return fs.createReadStream(downloadPath, opts)
       }
     }
-    player.render(file, elem, {
+    player.append(file, elem, {
       autoplay: true,
       controls: true,
     })
@@ -147,14 +164,15 @@ class VideoPlayer extends React.Component {
   render() {
     const {
       downloadPath,
-      contentType,
+      mediaType,
       poster,
     } = this.props
 
     return (
-      <video controls ref="video" style={{backgroundImage: "url('" + poster + "')"}} >
-        <source src={downloadPath} type={contentType} />
-      </video>
+      <div>
+        {mediaType === "audio" && <Thumbnail src={poster} className="video-embedded" />}
+        <div ref="media" />
+      </div>
     )
   }
 }
diff --git a/ui/js/lbry.js b/ui/js/lbry.js
index b7e0f9960..7b95016ac 100644
--- a/ui/js/lbry.js
+++ b/ui/js/lbry.js
@@ -286,7 +286,7 @@ lbry.imagePath = function(file)
 
 lbry.getMediaType = function(contentType, fileName) {
   if (contentType) {
-    return /^[^/]+/.exec(contentType);
+    return /^[^/]+/.exec(contentType)[0];
   } else if (fileName) {
     var dotIndex = fileName.lastIndexOf('.');
     if (dotIndex == -1) {
diff --git a/ui/js/page/filePage/view.jsx b/ui/js/page/filePage/view.jsx
index e7a1e2068..b1e031df7 100644
--- a/ui/js/page/filePage/view.jsx
+++ b/ui/js/page/filePage/view.jsx
@@ -92,11 +92,12 @@ class FilePage extends React.Component{
     const channelClaimId = claim.value && claim.value.publisherSignature ? claim.value.publisherSignature.certificateId : null;
     const channelUri = signatureIsValid && hasSignature && channelName ? lbryuri.build({channelName, claimId: channelClaimId}, false) : null
     const uriIndicator = <UriIndicator uri={uri} />
+    const mediaType = lbry.getMediaType(contentType)
 
     return (
       <main className="main--single-column">
         <section className="show-page-media">
-          { contentType && contentType.startsWith('video/') ?
+          { ["video", "audio", "image"].indexOf(mediaType) !== -1 ?
             <Video className="video-embedded" uri={uri} /> :
             (metadata && metadata.thumbnail ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
         </section>