First working version that actually transmits the file to another peer and synchornizes displaying. Still work-in-progress though...

static/js/directives/pdfviewer.js

@@ -22,15 +22,17 @@ define(['require', 'jquery', 'underscore', 'text!partials/pdfviewer.html', 'pdf'
 
 	pdf.workerSrc = require.toUrl('pdf.worker') + ".js";
 
-	return ["$window", "fileUpload", "alertify", "translation", function($window, fileUpload, alertify, translation) {
+	return ["$window", "mediaStream", "fileUpload", "fileDownload", "alertify", "translation", "randomGen", function($window, mediaStream, fileUpload, fileDownload, alertify, translation, randomGen) {
 
 		var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
 
+			var pdfViewerCount = 0;
 			var pane = $element.find(".pdfviewerpane");
 			var canvases = $element.find(".pdfviewercanvas");
 			$scope.canvasIndex = 0;
 
 			$scope.layout.pdfviewer = false;
+			$scope.isPresenter = false;
 			$scope.hideControlsBar = false;
 
 			$scope.doc = null;
@@ -41,27 +43,52 @@ define(['require', 'jquery', 'underscore', 'text!partials/pdfviewer.html', 'pdf'
 			$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;
+			var handleRequest = function(event, currenttoken, to, data, type, to2, from, peerpdfviewer) {
+				console.log("PdfViewer answer message", currenttoken, data, type);
 			};
 
+			mediaStream.api.e.on("received.pdfviewer", function(event, id, from, data, p2p) {
+				if (!p2p) {
+					console.warn("Received pdfviewer info without p2p. This should not happen!");
+					return;
+				}
+
+				var token = data.id;
+				$scope.$emit("mainview", "pdfviewer", true);
+
+				// Bind token.
+				var handler = mediaStream.tokens.on(token, handleRequest, "pdfviewer");
+
+				if (data.Type) {
+					switch (data.Type) {
+					case "FileInfo":
+						console.log("Received PdfViewer file request", data);
+						var subscope = $scope.$new();
+						subscope.info = data.FileInfo;
+						subscope.$on("downloadComplete", function(event) {
+							event.stopPropagation();
+						});
+						subscope.$on("writeComplete", function(event, url) {
+							event.stopPropagation();
+							$scope.doOpenFile(url);
+						});
+						handler = mediaStream.tokens.on(subscope.info.id, function(event, currenttoken, to, data, type, to2, from, xfer) {
+							//console.log("PdfViewer token request", currenttoken, data, type);
+							fileDownload.handleRequest($scope, xfer, data);
+						}, "xfer");
+						fileDownload.startDownload(subscope, from, subscope.info.id);
+						break;
+
+					case "Page":
+						$scope.$emit("queuePageRendering", data.Page);
+						break;
+
+					default:
+						console.log("Received unknown PdfViewer event", data);
+					}
+				}
+			});
+
 			$scope.showPage = function(page) {
 				console.log("Showing page", page, "/", $scope.maxPageNumber);
 				if ($scope.currentPage) {
@@ -103,45 +130,180 @@ define(['require', 'jquery', 'underscore', 'text!partials/pdfviewer.html', 'pdf'
 				});
 			};
 
-			$scope.queuePageRendering = function(page) {
-				if ($scope.rendering) {
+			$scope.$on("queuePageRendering", function(event, page) {
+				if (!$scope.doc || $scope.rendering) {
 					$scope.pendingPageNumber = page;
 				} else {
 					$scope.showPage(page);
 				}
-			};
+			});
 
 			$scope.prevPage = function() {
 				if ($scope.currentPageNumber > 1) {
-					$scope.queuePageRendering($scope.currentPageNumber - 1);
+					$scope.$emit("queuePageRendering", $scope.currentPageNumber - 1);
 				}
 			};
 
 			$scope.nextPage = function() {
 				if ($scope.currentPageNumber < $scope.maxPageNumber) {
-					$scope.queuePageRendering($scope.currentPageNumber + 1);
+					$scope.$emit("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.doOpenFile = function(source) {
+				pdf.getDocument(source).then(function(doc) {
 					$scope.$apply(function(scope) {
 						scope.doc = doc;
 						scope.maxPageNumber = doc.numPages;
 						console.log("PDF loaded", doc);
-						scope.queuePageRendering(1);
+						scope.$emit("queuePageRendering", 1);
 					});
 				});
+			};
+
+			$scope.openFile = function(file) {
+				console.log("Loading PDF from", file);
+				var fp = file.file;
+				if (typeof URL !== "undefined" && URL.createObjectURL1) {
+					var url = URL.createObjectURL(fp);
+					$scope.doOpenFile(url);
+				} else {
+					var fileReader = new FileReader();
+					fileReader.onload = function webViewerChangeFileReaderOnload(evt) {
+					  var buffer = evt.target.result;
+					  var uint8Array = new Uint8Array(buffer);
+					  $scope.doOpenFile(uint8Array);
+					};
+					fileReader.readAsArrayBuffer(fp);
+				}
+			};
+
+			$scope.showPDFViewer = function() {
+				console.log("PDF viewer active");
+				if ($scope.layout.pdfviewer) {
+					$scope.hidePDFViewer();
+				}
 
 				$scope.layout.pdfviewer = true;
 				$scope.$emit("mainview", "pdfviewer", true);
+
+				var peers = {};
+				var pdfviewers = [];
+
+				var connector = function(token, peercall) {
+					console.log("XXX connector", token, peercall);
+					if (peers.hasOwnProperty(peercall.id)) {
+						// Already got a connection.
+						return;
+					}
+					peers[peercall.id] = true;
+					mediaStream.api.apply("sendPdfViewer", {
+						send: function(type, data) {
+							return peercall.peerconnection.send(data);
+						}
+					})(peercall.from, token);
+				};
+
+				// Create token to register with us and send token out to all peers.
+				// Peers when connect to us with the token and we answer.
+				var token = "pdfviewer_" + $scope.id + "_" + (pdfViewerCount++);
+
+				// Updater function to bring in new calls.
+				var updater = function(event, state, currentcall) {
+					console.log("XXX updater", event, state, currentcall);
+					switch (state) {
+						case "completed":
+						case "connected":
+							connector(token, currentcall);
+							break;
+						case "closed":
+							delete peers[currentcall.id];
+							if (!peers.length) {
+								console.log("All peers disconnected, stopping sharing");
+								$scope.$apply(function(scope) {
+									scope.hidePDFViewer();
+								});
+							}
+							break;
+					}
+				};
+
+				// Create callbacks are called for each incoming connections.
+				handler = mediaStream.tokens.create(token, function(event, currenttoken, to, data, type, to2, from, peerpdfviewer) {
+					console.log("PDF viewer create", currenttoken, data, type, peerpdfviewer);
+					pdfviewers.push(peerpdfviewer);
+					//usermedia.addToPeerConnection(peerscreenshare.peerconnection);
+				}, "pdfviewer");
+
+				// Connect all current calls.
+				mediaStream.webrtc.callForEachCall(function(peercall) {
+					connector(token, peercall);
+				});
+				// Catch later calls too.
+				mediaStream.webrtc.e.on("statechange", updater);
+
+				$scope.$on("queuePageRendering", function(event, page) {
+					_.each(peers, function(ignore, peerId) {
+						var peercall = mediaStream.webrtc.findTargetCall(peerId);
+						mediaStream.api.apply("sendPdfViewer", {
+							send: function(type, data) {
+								return peercall.peerconnection.send(data);
+							}
+						})(peerId, token, {
+							Type: "Page",
+							Page: page
+						});
+					});
+				});
+
+				// create drag-drop target
+				var namespace = "file_" + $scope.id;
+				var binder = fileUpload.bindDrop(namespace, $element, _.bind(function(files) {
+					console.log("Files dragged", files);
+					if (files.length > 1) {
+						alertify.dialog.alert(translation._("Only single PDF documents can be shared at this time."));
+						return;
+					}
+
+					_.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): other peers should either request the file or subscribe rendered images (e.g. for mobile app), for now we send the whole file
+						_.each(peers, function(ignore, peerId) {
+							var peercall = mediaStream.webrtc.findTargetCall(peerId);
+							mediaStream.api.apply("sendPdfViewer", {
+								send: function(type, data) {
+									return peercall.peerconnection.send(data);
+								}
+							})(peerId, token, {
+								Type: "FileInfo",
+								FileInfo: info
+							});
+						});
+						var subscope = $scope.$new();
+						subscope.info = info;
+						var session = fileUpload.startUpload(subscope, info.id);
+						// This binds the token to transfer and ui.
+						var handler = mediaStream.tokens.on(info.id, function(event, currenttoken, to, data, type, to2, from, xfer) {
+							//console.log("PdfViewer token request", currenttoken, data, type);
+							session.handleRequest(subscope, xfer, data);
+						}, "xfer");
+						$scope.openFile(f);
+						$scope.isPresenter = true;
+					}, this));
+				}, this));
+				binder.namespace = function() {
+					// Inject own id into namespace.
+					return namespace + "_" + $scope.myid;
+				};
+
 			};
 
 			$scope.hidePDFViewer = function() {
@@ -155,6 +317,7 @@ define(['require', 'jquery', 'underscore', 'text!partials/pdfviewer.html', 'pdf'
 				var canvas = canvases[$scope.canvasIndex];
 				canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
 				$scope.layout.pdfviewer = false;
+				$scope.isPresenter = false;
 				$scope.$emit("mainview", "pdfviewer", false);
 			};