From 9601cf75f8f66a1bf65723ea7582bbd4c55236a4 Mon Sep 17 00:00:00 2001
From: Ian Denhardt <ian@zenhack.net>
Date: Tue, 30 Apr 2019 20:07:17 -0400
Subject: [PATCH] Web UI: Render PDFs in detail view.

Per the comment, this is pretty straightforward: just embed it in an
iframe

Tested in Firefox and Chromium.

Fixes #795

Change-Id: Ic9620ae974a4c6c562c769db4f2c0f76f22a4041
---
 server/perkeepd/ui/detail.js     |  2 +-
 server/perkeepd/ui/index.js      |  2 +
 server/perkeepd/ui/pdf_detail.js | 84 ++++++++++++++++++++++++++++++++
 3 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 server/perkeepd/ui/pdf_detail.js

diff --git a/server/perkeepd/ui/detail.js b/server/perkeepd/ui/detail.js
index 229f8242a..53a91f40d 100644
--- a/server/perkeepd/ui/detail.js
+++ b/server/perkeepd/ui/detail.js
@@ -30,7 +30,7 @@ goog.require('cam.SearchSession');
 goog.require('cam.SpritedAnimation');
 
 // Top-level control for the detail view. Handles loading data specified in URL and left/right navigation.
-// The details of the actual rendering are left up to child controls which are chosen based on the type of data loaded. However, currently there is only one type of child control: cam.ImageDetail.
+// The details of the actual rendering are left up to child controls which are chosen based on the type of data loaded.
 cam.DetailView = React.createClass({
 	displayName: 'DetailView',
 
diff --git a/server/perkeepd/ui/index.js b/server/perkeepd/ui/index.js
index f901217ac..363720c8b 100644
--- a/server/perkeepd/ui/index.js
+++ b/server/perkeepd/ui/index.js
@@ -49,6 +49,7 @@ goog.require('cam.Dialog');
 goog.require('cam.MapAspect');
 goog.require('cam.Header');
 goog.require('cam.Navigator');
+goog.require('cam.PdfDetail');
 goog.require('cam.PermanodeDetail');
 goog.require('cam.permanodeUtils');
 goog.require('cam.reactUtil');
@@ -246,6 +247,7 @@ cam.IndexPage = React.createClass({
 
 		var specificAspects = [
 			cam.ImageDetail.getAspect,
+			cam.PdfDetail.getAspect,
 			this.getDirAspect_.bind(null),
 		].map(getAspect).filter(goog.functions.identity);
 
diff --git a/server/perkeepd/ui/pdf_detail.js b/server/perkeepd/ui/pdf_detail.js
new file mode 100644
index 000000000..8e09c467d
--- /dev/null
+++ b/server/perkeepd/ui/pdf_detail.js
@@ -0,0 +1,84 @@
+/*
+Copyright 2019 The Perkeep Authors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+	http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+goog.provide('cam.PdfDetail');
+
+// Renders PDFs. This matches files with a "mimeType" of "application/pdf",
+// and displays them by embedding the PDF in an iframe.
+//
+// It would be easy to extend this to any content that browsers know how
+// to render themselves.
+cam.PdfDetail = React.createClass({
+	displayName: 'PdfDetail',
+
+	propTypes: {
+		height: React.PropTypes.number.isRequired,
+		resolvedMeta: React.PropTypes.object.isRequired,
+		width: React.PropTypes.number.isRequired,
+	},
+
+	render: function() {
+		var rm = this.props.resolvedMeta;
+		var downloadUrl = goog.string.subs(
+			'%s%s/%s?inline=1',
+			goog.global.CAMLISTORE_CONFIG.downloadHelper,
+			rm.blobRef,
+			rm.file.fileName
+		);
+		return React.DOM.iframe({
+			src: downloadUrl,
+			style: {
+				width: this.props.width,
+				height: this.props.height,
+				border: 'none',
+			},
+		});
+	},
+});
+
+cam.PdfDetail.getAspect = function(blobref, searchSession) {
+	if(!blobref) {
+		return null;
+	}
+
+	var rm = searchSession.getResolvedMeta(blobref);
+	var pm = searchSession.getMeta(blobref);
+
+	if (!pm) {
+		return null;
+	}
+
+	if (pm.camliType != 'permanode') {
+		pm = null;
+	}
+
+
+	if(rm.camliType !== 'file' || rm.file.mimeType !== 'application/pdf') {
+		return null;
+	}
+
+	return {
+		fragment: 'document',
+		title: 'Document',
+		createContent: function(size, backwardPiggy) {
+			return React.createElement(cam.PdfDetail, {
+				resolvedMeta: rm,
+				height: size.height,
+				width: size.width,
+			})
+		},
+	}
+}