fix playable logic
- Add new icon Eye - Show preview button
This commit is contained in:
parent
78029ce5c3
commit
f026ed6db6
3 changed files with 12 additions and 11 deletions
|
@ -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} />;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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} />
|
||||||
) : (
|
) : (
|
||||||
|
|
Loading…
Reference in a new issue