LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

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

Browse source 
Render all file types that render-media can handle
This commit is contained in:
Jeremy Kauffman 2017-06-05 11:40:11 -04:00 • committed by GitHub
commit c348f552cd
3 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/js/component/video/view.jsx
View file

@ -49,7 +49,7 @@ class VideoPlayButton extends React.Component {
*/ */
const disabled = isLoading || fileInfo === undefined || (fileInfo === null && (!costInfo || costInfo.cost === undefined)) 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> return (<div>
<Link button={ button ? button : null } <Link button={ button ? button : null }
@ -119,6 +119,8 @@ class Video extends React.Component {
if (mediaType === "video") { if (mediaType === "video") {
klassName += "video-embedded video" klassName += "video-embedded video"
klassName += isPlaying ? " video--active" : " video--hidden" klassName += isPlaying ? " video--active" : " video--hidden"
} else if (mediaType === "application") {
klassName += "video-embedded"
} else { } else {
if (!isPlaying) klassName += "video-embedded" if (!isPlaying) klassName += "video-embedded"
} }
@ -170,7 +172,7 @@ class VideoPlayer extends React.Component {
return ( return (
<div> <div>
{mediaType === "audio" && <Thumbnail src={poster} className="video-embedded" />} {["audio", "application"].indexOf(mediaType) !== -1 && <Thumbnail src={poster} className="video-embedded" />}
<div ref="media" /> <div ref="media" />
</div> </div>
) )

5
ui/js/page/filePage/view.jsx
View file

@ -93,11 +93,14 @@ class FilePage extends React.Component{
const channelUri = signatureIsValid && hasSignature && channelName ? lbryuri.build({channelName, claimId: channelClaimId}, false) : null const channelUri = signatureIsValid && hasSignature && channelName ? lbryuri.build({channelName, claimId: channelClaimId}, false) : null
const uriIndicator = <UriIndicator uri={uri} /> const uriIndicator = <UriIndicator uri={uri} />
const mediaType = lbry.getMediaType(contentType) const mediaType = lbry.getMediaType(contentType)
const player = require('render-media')
const isPlayable = Object.values(player.mime).indexOf(contentType) !== -1 ||
mediaType === "audio"
return ( return (
<main className="main--single-column"> <main className="main--single-column">
<section className="show-page-media"> <section className="show-page-media">
{ ["video", "audio", "image"].indexOf(mediaType) !== -1 ? { isPlayable ?
<Video className="video-embedded" uri={uri} /> : <Video className="video-embedded" uri={uri} /> :
(metadata && metadata.thumbnail ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) } (metadata && metadata.thumbnail ? <Thumbnail src={metadata.thumbnail} /> : <Thumbnail />) }
</section> </section>

5
ui/scss/page/_show.scss
View file

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