Started playing around with pdf.js.

For now only renders static PDF from URL, but should become PDF presentation sharing sometime in the future.

html/main.html

@@ -14,6 +14,7 @@
         </div>
         <status-message></status-message>
         <div class="ng-cloak right">
+           <button title="{{_('PDF')}}" class="btn aenablebtn" ng-show="status=='connected' || status=='conference' || layout.pdfviewer" ng-model="layout.pdfviewer" btn-checkbox><i class="fa fa-file-o"></i></button>
            <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
            <button title="{{_('Chat')}}" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen">{{chatMessagesUnseen}}</span></button>
            <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
@@ -34,6 +35,9 @@
 <div id="screenshare" class="ng-cloak mainview">
     <screenshare/>
 </div>
+<div id="pdfviewer" class="ng-cloak mainview">
+    <pdfviewer/>
+</div>
 <div class="ng-cloak" id="rightslide">
     <div class="rightslidepane">
         <div id="buddylist"><buddy-list/></div>

src/styles/components/_pdfviewer.scss

@@ -0,0 +1,54 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+.pdfviewer {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.mainPdfviewer #pdfviewer {
+  display: block;
+}
+
+.pdfviewerpane {
+  background: black;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.pdfviewerpane {
+  canvas {
+    position: relative;
+  }
+}
+
+.pdfviewer .overlaybar {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

src/styles/main.scss

@@ -49,5 +49,6 @@
 @import "components/roombar";
 @import "components/social";
 @import "components/contactsmanager";
+@import "components/pdfviewer";
 
 @import "shame";

static/js/directives/directives.js

@@ -37,7 +37,8 @@ define([
 	'directives/socialshare',
 	'directives/page',
 	'directives/contactrequest',
-	'directives/defaultdialog'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPicture, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog) {
+	'directives/defaultdialog',
+	'directives/pdfviewer'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPicture, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfviewer) {
 
 	var directives = {
 		onEnter: onEnter,
@@ -56,7 +57,8 @@ define([
 		socialShare: socialShare,
 		page: page,
 		contactRequest: contactRequest,
-		defaultDialog: defaultDialog
+		defaultDialog: defaultDialog,
+		pdfviewer: pdfviewer
 	};
 
 	var initialize = function(angModule) {

static/js/directives/pdfviewer.js

@@ -0,0 +1,181 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+define(['require', 'jquery', 'underscore', 'text!partials/pdfviewer.html', 'pdf'], function(require, $, _, template, pdf) {
+
+	pdf.workerSrc = require.toUrl('pdf.worker') + ".js";
+
+	return ["$window", "fileUpload", "alertify", "translation", function($window, fileUpload, alertify, translation) {
+
+		var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
+
+			var pane = $element.find(".pdfviewerpane");
+			var canvases = $element.find(".pdfviewercanvas");
+			$scope.canvasIndex = 0;
+
+			$scope.layout.pdfviewer = false;
+			$scope.hideControlsBar = false;
+
+			$scope.doc = null;
+			$scope.rendering = false;
+			$scope.scale = 0.8;
+			$scope.currentPage = null;
+			$scope.currentPageNumber = -1;
+			$scope.maxPageNumber = -1;
+			$scope.pendingPageNumber = null;
+
+			var namespace = "file_" + $scope.id;
+			var binder = fileUpload.bindDrop(namespace, $element, _.bind(function(files) {
+				console.log("File dragged", files);
+				_.each(files, _.bind(function(f) {
+					var info = $.extend({
+						id: f.id
+					}, f.info);
+					if (info.type !== "application/pdf") {
+						console.log("Not sharing file", f, info);
+						alertify.dialog.alert(translation._("Only PDF documents can be shared at this time."));
+						return;
+					}
+					console.log("Advertising file", f, info);
+					// TODO(fancycode): notify other peers about PDF, they should either request the file or subscribe rendered images (e.g. for mobile app)
+				}, this));
+			}, this));
+			binder.namespace = function() {
+				// Inject own id into namespace.
+				return namespace + "_" + $scope.myid;
+			};
+
+			$scope.showPage = function(page) {
+				console.log("Showing page", page, "/", $scope.maxPageNumber);
+				if ($scope.currentPage) {
+					$scope.currentPage.destroy();
+					$scope.currentPage = null;
+				}
+				$scope.rendering = true;
+				$scope.currentPageNumber = page;
+				$scope.doc.getPage(page).then(function(page) {
+					console.log("Got page", page);
+					$scope.currentPage = page;
+					var viewport = page.getViewport($scope.scale);
+					// use double-buffering to avoid flickering while
+					// the new page is rendered...
+					var canvas = canvases[1 - $scope.canvasIndex];
+					canvas.width = viewport.width;
+					canvas.height = viewport.height;
+					var renderContext = {
+						canvasContext: canvas.getContext("2d"),
+						viewport: viewport
+					};
+
+					console.log("Rendering page", page);
+					// TODO(fancycode): also render images in different resolutions for subscribed peers and send to them when ready
+					var renderTask = page.render(renderContext);
+					renderTask.promise.then(function() {
+						$scope.$apply(function(scope) {
+							console.log("Rendered page", page);
+							scope.rendering = false;
+							// ...and flip the buffers...
+							scope.canvasIndex = 1 - scope.canvasIndex;
+							console.log("Done");
+							if (scope.pendingPageNumber !== null) {
+								scope.showPage(scope.pendingPageNumber);
+								scope.pendingPageNumber = null;
+							}
+						});
+					});
+				});
+			};
+
+			$scope.queuePageRendering = function(page) {
+				if ($scope.rendering) {
+					$scope.pendingPageNumber = page;
+				} else {
+					$scope.showPage(page);
+				}
+			};
+
+			$scope.prevPage = function() {
+				if ($scope.currentPageNumber > 1) {
+					$scope.queuePageRendering($scope.currentPageNumber - 1);
+				}
+			};
+
+			$scope.nextPage = function() {
+				if ($scope.currentPageNumber < $scope.maxPageNumber) {
+					$scope.queuePageRendering($scope.currentPageNumber + 1);
+				}
+			};
+
+			$scope.showPDFViewer = function() {
+				console.log("PDF viewer active");
+				if ($scope.layout.pdfviewer) {
+					$scope.hidePDFViewer();
+				}
+
+				var url = "http://cdn.mozilla.net/pdfjs/tracemonkey.pdf";
+				console.log("Loading PDF from", url);
+				pdf.getDocument(url).then(function(doc) {
+					$scope.$apply(function(scope) {
+						scope.doc = doc;
+						scope.maxPageNumber = doc.numPages;
+						console.log("PDF loaded", doc);
+						scope.queuePageRendering(1);
+					});
+				});
+
+				$scope.layout.pdfviewer = true;
+				$scope.$emit("mainview", "pdfviewer", true);
+			};
+
+			$scope.hidePDFViewer = function() {
+				console.log("PDF viewer disabled");
+				if ($scope.doc) {
+					$scope.doc.cleanup();
+					$scope.doc.destroy();
+					$scope.doc = null;
+				}
+				// clear visible canvas so it's empty when we show the next document
+				var canvas = canvases[$scope.canvasIndex];
+				canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
+				$scope.layout.pdfviewer = false;
+				$scope.$emit("mainview", "pdfviewer", false);
+			};
+
+			$scope.$watch("layout.pdfviewer", function(newval, oldval) {
+				if (newval && !oldval) {
+					$scope.showPDFViewer();
+				} else if (!newval && oldval) {
+					$scope.hidePDFViewer();
+				}
+			});
+
+		}];
+
+		return {
+			restrict: 'E',
+			replace: true,
+			scope: true,
+			template: template,
+			controller: controller
+		};
+
+	}];
+
+});

static/partials/pdfviewer.html

@@ -0,0 +1,13 @@
+<div class="pdfviewer">
+	<div class="pdfviewerpane nicescroll">
+        <canvas class="pdfviewercanvas" ng-hide="canvasIndex"></canvas>
+        <canvas class="pdfviewercanvas" ng-show="canvasIndex"></canvas>
+    </div>
+	<div class="overlaybar form-horizontal" ng-class="{notvisible: hideControlsBar}">
+		<a class="overlaybar-button" ng-model="hideControlsBar" btn-checkbox btn-checkbox btn-checkbox-true="0" btn-checkbox-false="1" title="{{_('PDF controls')}}"><i class="fa fa-cogs"></i></a>
+		<form class="overlaybar-content form-group">
+            <a class="btn" ng-click="prevPage()" ng-show="currentPageNumber &gt; 1" title="{{_('Prev')}}"><i class="fa fa-backward"></i></a>
+            <a class="btn" ng-click="nextPage()" ng-show="currentPageNumber &lt; maxPageNumber" title="{{_('Next')}}"><i class="fa fa-forward"></i></a>
+		</form>
+	</div>
+</div>