From 03c9e53dd2928114519ba775014fe6f11e535c9d Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 4 Jul 2018 20:49:12 -0600 Subject: [PATCH] add pdf-viewer reduce lbry.getMedia calls update fileRender logic --- src/main/createWindow.js | 18 ++++++-------- src/renderer/component/fileRender/view.jsx | 12 ++++++++-- .../component/video/internal/player.jsx | 3 ++- src/renderer/component/video/view.jsx | 6 ++--- src/renderer/component/viewers/pdfViewer.jsx | 24 +++++++++++++++++++ src/renderer/page/file/view.jsx | 15 ++++++++---- src/renderer/scss/component/_file-render.scss | 1 + 7 files changed, 57 insertions(+), 22 deletions(-) create mode 100644 src/renderer/component/viewers/pdfViewer.jsx 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 { // Add routes to viewer... }; - const viewer = mediaType && source && mediaTypes[mediaType]; + // Supported fileType + const fileTypes = { + pdf: , + // 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 = ; 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 { @@ -123,12 +123,12 @@ class Video extends React.PureComponent { 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 { + render() { + const { source } = this.props; + return ( + + ); + } +} + +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 { 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 { 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 { ) : (
- {showFile &&