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

@@ -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',
 

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);
 

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,
+			})
+		},
+	}
+}