diff --git a/src/main/createWindow.js b/src/main/createWindow.js
index 4d4a5bc25..976e8352b 100644
--- a/src/main/createWindow.js
+++ b/src/main/createWindow.js
@@ -14,7 +14,7 @@ export default appState => {
defaultHeight: height,
});
- let windowConfiguration = {
+ const windowConfiguration = {
backgroundColor: '#44b098',
minWidth: 950,
minHeight: 600,
@@ -26,17 +26,13 @@ export default appState => {
// If state is undefined, create window as maximized.
width: windowState.width === undefined ? width : windowState.width,
height: windowState.height === undefined ? height : windowState.height,
- };
- // Disable renderer process's webSecurity on development to enable CORS.
- windowConfiguration = isDev
- ? {
- ...windowConfiguration,
- webPreferences: {
- webSecurity: false,
- },
- }
- : windowConfiguration;
+ webPreferences: {
+ // Disable renderer process's webSecurity on development to enable CORS.
+ webSecurity: !isDev,
+ plugins: true,
+ },
+ };
const rendererURL = isDev
? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`
diff --git a/src/renderer/component/fileRender/view.jsx b/src/renderer/component/fileRender/view.jsx
index 8593280dc..18e2cb979 100644
--- a/src/renderer/component/fileRender/view.jsx
+++ b/src/renderer/component/fileRender/view.jsx
@@ -1,13 +1,14 @@
// @flow
import React from 'react';
import LoadingScreen from 'component/common/loading-screen';
-// import ThreeViewer from 'component/threeViewer';
+import PdfViewer from 'component/viewers/pdfViewer';
type Props = {
mediaType: string,
source: {
filePath: string,
fileType: string,
+ downloadPath: string,
},
currentTheme: string,
};
@@ -23,7 +24,14 @@ class FileRender extends React.PureComponent<Props> {
// Add routes to viewer...
};
- const viewer = mediaType && source && mediaTypes[mediaType];
+ // Supported fileType
+ const fileTypes = {
+ pdf: <PdfViewer {...viewerProps} />,
+ // Add routes to viewer...
+ };
+
+ const { fileType } = source;
+ const viewer = mediaType && source && (mediaTypes[mediaType] || fileTypes[fileType]);
const unsupportedMessage = "Sorry, looks like we can't preview this file.";
const unsupported = <LoadingScreen status={unsupportedMessage} spinner={false} />;
diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx
index ab97b62f0..76c1a9fe5 100644
--- a/src/renderer/component/video/internal/player.jsx
+++ b/src/renderer/component/video/internal/player.jsx
@@ -11,7 +11,7 @@ import LoadingScreen from 'component/common/loading-screen';
class VideoPlayer extends React.PureComponent {
static MP3_CONTENT_TYPES = ['audio/mpeg3', 'audio/mpeg'];
- static FILE_MEDIA_TYPES = ['3D-file', 'e-book', 'comic-book'];
+ static FILE_MEDIA_TYPES = ['e-book', 'comic-book', 'document', '3D-file'];
constructor(props) {
super(props);
@@ -192,6 +192,7 @@ class VideoPlayer extends React.PureComponent {
}
// File to render
const fileSource = {
+ downloadPath,
filePath: url,
fileType: path.extname(filename).substring(1),
};
diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx
index 3fc373630..569678838 100644
--- a/src/renderer/component/video/view.jsx
+++ b/src/renderer/component/video/view.jsx
@@ -1,11 +1,10 @@
// @flow
import React from 'react';
-import { Lbry } from 'lbry-redux';
import classnames from 'classnames';
import type { Claim } from 'types/claim';
+import LoadingScreen from 'component/common/loading-screen';
import VideoPlayer from './internal/player';
import VideoPlayButton from './internal/play-button';
-import LoadingScreen from 'component/common/loading-screen';
const SPACE_BAR_KEYCODE = 32;
@@ -40,6 +39,7 @@ type Props = {
obscureNsfw: boolean,
play: string => void,
searchBarFocused: boolean,
+ mediaType: string,
};
class Video extends React.PureComponent<Props> {
@@ -123,12 +123,12 @@ class Video extends React.PureComponent<Props> {
mediaPosition,
className,
obscureNsfw,
+ mediaType,
} = this.props;
const isPlaying = playingUri === uri;
const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
const shouldObscureNsfw = obscureNsfw && metadata && metadata.nsfw;
- const mediaType = (fileInfo && Lbry.getMediaType(null, fileInfo.file_name)) || Lbry.getMediaType(contentType);
let loadStatusMessage = '';
diff --git a/src/renderer/component/viewers/pdfViewer.jsx b/src/renderer/component/viewers/pdfViewer.jsx
new file mode 100644
index 000000000..80c4e94ab
--- /dev/null
+++ b/src/renderer/component/viewers/pdfViewer.jsx
@@ -0,0 +1,24 @@
+// @flow
+import React from 'react';
+
+type Props = {
+ source: {
+ fileType: string,
+ filePath: string,
+ downloadPath: string,
+ },
+};
+
+class PdfViewer extends React.PureComponent<Props> {
+ render() {
+ const { source } = this.props;
+ return (
+ <webview
+ className="file-render__viewer"
+ src={`chrome://pdf-viewer/index.html?src=file://${source.downloadPath}`}
+ />
+ );
+ }
+}
+
+export default PdfViewer;
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index 990d4b77c..4d4e3f1b7 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -28,6 +28,7 @@ type Props = {
metadata: {
title: string,
thumbnail: string,
+ file_name: string,
nsfw: boolean,
},
contentType: string,
@@ -49,7 +50,7 @@ type Props = {
class FilePage extends React.Component<Props> {
static PLAYABLE_MEDIA_TYPES = ['audio', 'video'];
- static PREVIEW_MEDIA_TYPES = ['text', 'image', '3D-file'];
+ static PREVIEW_MEDIA_TYPES = ['text', 'image', 'document', '3D-file'];
constructor(props: Props) {
super(props);
@@ -110,15 +111,17 @@ class FilePage extends React.Component<Props> {
navigate,
autoplay,
costInfo,
+ fileInfo,
} = this.props;
// File info
- const { title, thumbnail, filename } = metadata;
+ const { title, thumbnail } = 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 mediaType = Lbry.getMediaType(contentType, filename);
+ const fileName = fileInfo ? fileInfo.file_name : null;
+ const mediaType = fileName ? Lbry.getMediaType(null, fileName) : Lbry.getMediaType(contentType);
const showFile =
PLAYABLE_MEDIA_TYPES.includes(mediaType) || PREVIEW_MEDIA_TYPES.includes(mediaType);
const channelClaimId =
@@ -154,7 +157,7 @@ class FilePage extends React.Component<Props> {
</section>
) : (
<section className="card">
- {showFile && <Video className="content__embedded" uri={uri} />}
+ {showFile && <Video className="content__embedded" uri={uri} mediaType={mediaType} />}
{!showFile &&
(thumbnail ? (
<Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
@@ -164,7 +167,9 @@ class FilePage extends React.Component<Props> {
'content__empty--nsfw': shouldObscureThumbnail,
})}
>
- <div className="card__media-text">{__('This content is not playable.')}</div>
+ <div className="card__media-text">
+ {__("Sorry, looks like we can't preview this file.")}
+ </div>
</div>
))}
<div className="card__content">
diff --git a/src/renderer/scss/component/_file-render.scss b/src/renderer/scss/component/_file-render.scss
index c78bb4690..7a9d1cf2a 100644
--- a/src/renderer/scss/component/_file-render.scss
+++ b/src/renderer/scss/component/_file-render.scss
@@ -11,6 +11,7 @@
overflow: hidden;
.file-render__viewer {
+ margin: 0;
width: 100%;
height: 100%;
background: black;