fix playable logic

- Add new icon Eye

- Show preview button
This commit is contained in:
btzr-io 2018-06-18 12:18:25 -06:00 committed by Sean Yesmunt
parent 78029ce5c3
commit f026ed6db6
3 changed files with 12 additions and 11 deletions

View file

@ -14,8 +14,8 @@ class VideoPlayButton extends React.PureComponent<Props> {
const { fileInfo, mediaType, isLoading, play } = this.props; const { fileInfo, mediaType, isLoading, play } = this.props;
const disabled = isLoading || fileInfo === undefined; const disabled = isLoading || fileInfo === undefined;
const doesPlayback = ['audio', 'video'].indexOf(mediaType) !== -1; const doesPlayback = ['audio', 'video'].indexOf(mediaType) !== -1;
const icon = doesPlayback ? 'Play' : 'Folder'; const icon = doesPlayback ? 'Play' : 'Eye';
const label = doesPlayback ? 'Play' : 'View'; const label = doesPlayback ? 'Play' : 'Preview';
return <Button button="primary" disabled={disabled} label={label} icon={icon} onClick={play} />; return <Button button="primary" disabled={disabled} label={label} icon={icon} onClick={play} />;
} }

View file

@ -28,3 +28,4 @@ export const CHECK_SIMPLE = 'Check';
export const GLOBE = 'Globe'; export const GLOBE = 'Globe';
export const EXTERNAL_LINK = 'ExternalLink'; export const EXTERNAL_LINK = 'ExternalLink';
export const GIFT = 'Gift'; export const GIFT = 'Gift';
export const EYE = 'Eye';

View file

@ -14,7 +14,6 @@ import Button from 'component/button';
import SubscribeButton from 'component/subscribeButton'; import SubscribeButton from 'component/subscribeButton';
import ViewOnWebButton from 'component/viewOnWebButton'; import ViewOnWebButton from 'component/viewOnWebButton';
import Page from 'component/page'; import Page from 'component/page';
import player from 'render-media';
import * as settings from 'constants/settings'; import * as settings from 'constants/settings';
import type { Claim } from 'types/claim'; import type { Claim } from 'types/claim';
import type { Subscription } from 'types/subscription'; import type { Subscription } from 'types/subscription';
@ -49,7 +48,8 @@ type Props = {
}; };
class FilePage extends React.Component<Props> { class FilePage extends React.Component<Props> {
static MEDIA_TYPES = ['audio', '3D-file', 'e-book', 'comic-book']; static PLAYABLE_MEDIA_TYPES = ['audio', 'video'];
static PREVIEW_MEDIA_TYPES = ['text', 'image', '3D-file'];
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -114,13 +114,13 @@ class FilePage extends React.Component<Props> {
// File info // File info
const { title, thumbnail, filename } = metadata; const { title, thumbnail, filename } = metadata;
const { height, channel_name: channelName, value } = claim;
const { PLAYABLE_MEDIA_TYPES, PREVIEW_MEDIA_TYPES } = FilePage;
const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id); const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id);
const shouldObscureThumbnail = obscureNsfw && metadata.nsfw; const shouldObscureThumbnail = obscureNsfw && metadata.nsfw;
const { height, channel_name: channelName, value } = claim; const mediaType = Lbry.getMediaType(contentType, filename);
// TODO: fix getMediaType logic (lbry-redux) const showFile =
const mediaType = Lbry.getMediaType(null, filename) || Lbry.getMediaType(contentType); PLAYABLE_MEDIA_TYPES.includes(mediaType) || PREVIEW_MEDIA_TYPES.includes(mediaType);
const isPlayable =
Object.values(player.mime).indexOf(contentType) !== -1 || FilePage.MEDIA_TYPES.indexOf(mediaType);
const channelClaimId = const channelClaimId =
value && value.publisherSignature && value.publisherSignature.certificateId; value && value.publisherSignature && value.publisherSignature.certificateId;
let subscriptionUri; let subscriptionUri;
@ -154,8 +154,8 @@ class FilePage extends React.Component<Props> {
</section> </section>
) : ( ) : (
<section className="card"> <section className="card">
{isPlayable && <Video className="content__embedded" uri={uri} />} {showFile && <Video className="content__embedded" uri={uri} />}
{!isPlayable && {!showFile &&
(thumbnail ? ( (thumbnail ? (
<Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} /> <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
) : ( ) : (