fix playable logic

- Add new icon Eye

- Show preview button

src/renderer/component/video/internal/play-button.jsx

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

src/renderer/constants/icons.js

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

src/renderer/page/file/view.jsx

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