Thumbnails saved in data/

7 files changed, 140 insertions, 118 deletions

diff --git a/reader/ajax/canvas_saver.php b/reader/ajax/canvas_saver.php
new file mode 100644
index 000000000..78fa5b5ac
--- /dev/null
+++ b/reader/ajax/canvas_saver.php
@@ -0,0 +1,23 @@
+<?php
+    // Get the data
+   $imageData=$_POST['canv_data'];	
+   $title = rtrim($_POST['title'],'pdf');
+   $location = urldecode(dirname($_POST['location']));
+  
+   if($location != '/')
+	$location = $location.'/';
+    $filteredData=substr($imageData, strpos($imageData, ",")+1);
+    $owner = OCP\USER::getUser();
+	$save_dir = OCP\Config::getSystemValue("datadirectory").'/'. $owner .'/reader';	
+    $save_dir .= $location;
+	$thumb_file = $save_dir . $title;
+	if (!is_dir($save_dir)) {
+		mkdir($save_dir, 0777, true);
+	}
+	$image = new OC_Image($filteredData);
+	if ($image->valid()) {
+		$image->centerCrop(100);
+		$image->fixOrientation();
+		$image->save($thumb_file.'png');
+	}
+?>
diff --git a/reader/ajax/thumbnail.php b/reader/ajax/thumbnail.php
new file mode 100644
index 000000000..f1aac876e
--- /dev/null
+++ b/reader/ajax/thumbnail.php
@@ -0,0 +1,14 @@
+<?php
+
+	OCP\JSON::checkLoggedIn();
+	OCP\JSON::checkAppEnabled('reader');
+
+	require_once('apps/reader/lib/thumbnail.php');
+	$img = $_GET['filepath'];
+	$image = thumb($img);
+	if ($image) {
+		OCP\Response::enableCaching(3600 * 24); // 24 hour
+		$image->show();
+	}
+
+?>
diff --git a/reader/css/reader.css b/reader/css/reader.css
index 484ebebbc..8edfbd55a 100644
--- a/reader/css/reader.css
+++ b/reader/css/reader.css
@@ -6,25 +6,18 @@ div.crumb.last { font-weight:bold; }
 
 table { white-space:normal; position:absolute; top:40px; left:5px;font-family:Arial;}
 
-tbody tr { background:white; float:left; height:200px; width:auto; font-size:12px;}
+tbody tr { background:white; float:left; height:150px;font-size:12px;}
 tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#ffffff; }
 	
 .thumbnail:not([data-loaded]) { background-color: white; }
 
-td.filename.svg{ background:no-repeat; vertical-align:text-bottom; height:200px; width:150px; white-space:normal; text-align:center;
-	 color:#888; text-shadow:#fff 0 1px 0; }
-
+td.filename.svg{ background:no-repeat; vertical-align:text-bottom; height:150px; width:150px; white-space:normal; text-align:center;
+	 color:#888; text-shadow:#fff 0 1px 0;}
 td.filename.svg:hover{ background-color:#ffffff; }
 
-div.thumbnail { box-shadow: 5px 5px 5px #888888; border:1px solid #888888; -webkit-border-radius: 3px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
-    border-radius: 3px; }
-	
-#dirsCanvas { border:1px solid #888888; position:absolute; margin-top:3px;box-shadow: 3px 3px 3px #888888;
-	-webkit-border-radius: 3px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */ border-radius: 3px; }
-
-center { width:150px; overflow:hidden; text-overflow:ellipsis; }
+a.name img,a.dirs img { border: 1px solid #EEE; -webkit-box-shadow: 4px 4px 4px 0px grey; box-shadow: 4px 4px 4px 0px grey;}
+a.dirs{ position:relative; left:5px; margin-left:5px; }
 
+center { width:150px; overflow:hidden; text-overflow:ellipsis;}
 span.nametext{ font-family:Arial;font-size:15px;font-weight:normal;width:150px; white-space:nowrap; margin-left:5px; margin-right:5px; text-transform:capitalize; }
 
-div.title{ font-family:Arial;font-size:14px;font-weight:100;opacity:0;z-index:800;color:white;position:absolute;background-color:black;padding:5px; height:auto;-webkit-transition: opacity 0.5s;border:0;-webkit-border-radius: 3px;}
-div.visible{opacity:0.8;}
diff --git a/reader/img/directory.jpg b/reader/img/directory.jpg
new file mode 100644
index 000000000..93bbc2e30
--- /dev/null
+++ b/reader/img/directory.jpg
diff --git a/reader/js/integrate.js b/reader/js/integrate.js
index 6ed40defe..79dec7ef6 100755
--- a/reader/js/integrate.js
+++ b/reader/js/integrate.js
@@ -5,6 +5,23 @@ $(document).ready(function() {
 	});
 	
 	$('#file_action_panel').attr('activeAction', false);
+
+	$('td.filename.svg a.dirs').hover(function(){
+		$(this).children().children('img#img2').animate({
+			left: '-=60'}, 50, function(){
+			});
+		$(this).children().children('img#img3').animate({
+			left: '+=60'}, 50, function(){
+			});
+	});
+	$('td.filename.svg a.dirs').mouseleave(function(){
+		$(this).children().children('img#img2').animate({
+			left: '+=120'}, 50, function(){
+			});
+		$(this).children().children('img#img3').animate({
+			left: '-=120'}, 50, function(){
+			});
+	});
 });	
 
 $(function() {
@@ -27,22 +44,6 @@ $(function() {
 				action(filename);
 			}
 		});
-		// Generate thumbnails for folders.
-		create_folder_thumbnails();
-		
-		// On close of the pdf viewer, reload the page.
-		$('#close').live('click',function(event) {
-			location.reload();
-		});
-		// On hover over pdf thumbnails, their title should show.
-		$('a.name').hover(function(){
-			if($(this).children().hasClass('title'))
-				$(this).children().addClass('visible');
-		});
-		$('a.name').mouseleave(function(){
-			if($(this).children().hasClass('title'))
-				$(this).children().removeClass('visible');
-		});
 	}
 });
 
@@ -67,10 +68,13 @@ function getAction(mime,type) {
 
 function create_thumbnails() {
 	PDFJS.disableWorker = true;
-		$('td.filename a').each(function() {
+		$('td.filename a.name').each(function() {
 			// Get url and title of each pdf file from anchor tags.
 			var url = $(this).attr('href');
 			var title = $(this).parent().parent().attr('data-file');
+			var location = $(this).attr('dir');
+			var thumbnail_exists = $(this).attr('value');
+			if (thumbnail_exists == "false") {
 			if (url.indexOf('pdf') != -1) {
 				PDFJS.getDocument(url).then(function(pdf) {
 				// Using promise to fetch the page
@@ -78,13 +82,8 @@ function create_thumbnails() {
 						var scale = 0.2;
 						var viewport = page.getViewport(scale);
 						
-						var div = document.createElement('div');
-						div.id = 'thumbnailContainer';
-						div.className = 'thumbnail';
-						var anchor = document.getElementById(url);
 						// Create canvas elements for each pdf's first page.
 						var canvas = document.createElement("canvas");
-						canvas.id = 'thumbnail';
 						
 						// Canvas elements should be of proper size, not too big, not too small. 
 						if (viewport.height > 170 || viewport.width > 130) {
@@ -98,89 +97,37 @@ function create_thumbnails() {
 						canvas.height = viewport.height;
 						canvas.width = viewport.width;
 						
-						div.style.height = canvas.height + 'px';
-						div.style.width = canvas.width + 'px';
-						div.appendChild(canvas);
-						anchor.appendChild(div);
-						
-						var title_div = document.createElement('div');
-						title_div.className = 'title';
-						title_div.innerHTML = title;
-						anchor.appendChild(title_div);
-					
 						var ctx = canvas.getContext('2d');
 						ctx.save();
 						ctx.fillStyle = 'rgb(255, 255, 255)';
 						ctx.fillRect(0, 0, canvas.width, canvas.height);
-						ctx.restore();
-    
+						ctx.restore(); 
+						
 						var view = page.view;
 						var scaleX = (canvas.width / page.width);
 						var scaleY = (canvas.height / page.height);
 						ctx.translate(-view.x * scaleX, -view.y * scaleY);
-
-					// Render PDF page into canvas context
+					
+						// Render PDF page into canvas context
 						var renderContext = {
 							canvasContext: ctx,
 							viewport: viewport
 						};
-						page.render(renderContext);
+					
+						pageRendering = page.render(renderContext);
+						pageRendering.onData(function(){
+							canvasSaver(canvas,title,location);
+						});
 					});
 				});
 			}
-		});
+		}
+	});
 }
 
-// Function to create thumbnails for folders.
-function create_folder_thumbnails() {
-	$('a.dirs input').each(function() {
-		// fetch margin, url and and directory name values for each pdf, stored in input tags.
-			var margin = $(this).attr('name');
-			var pdf_dir = $(this).attr('value');
-			var url = $(this).attr('id');
-			
-			PDFJS.getDocument(url).then(function(pdf) {
-				// Using promise to fetch the page
-					pdf.getPage(1).then(function(page) {
-						var scale = 0.3;
-						var viewport = page.getViewport(scale);
-					
-						// Prepare canvas using PDF page dimensions
-						var anchor = document.getElementById(pdf_dir);
-			
-						var canvas = document.createElement("canvas");
-						canvas.id = "dirsCanvas";
-						// Each thumbnail in the 3-thumbnail set should be of same dimensions.
-						canvas.height = '168';
-						canvas.width = '120';
-						// Canvases should be on top of each other
-						$(canvas).css('z-index',100 - margin);
-						$(canvas).css('margin-left', margin  + 'px');
-						$(canvas).css('-webkit-backface-visibility', 'visible');
-						$(canvas).css('-webkit-transform-origin', '0% 51%');
-						$(canvas).css('-webkit-transform',' perspective(' + margin*35 + 'px) rotateY(23deg)');
-				
-						anchor.appendChild(canvas);
-
-						var ctx = canvas.getContext('2d');
-						ctx.save();
-						ctx.fillStyle = 'rgb(255, 255, 255)';
-						ctx.fillRect(0, 0, canvas.width, canvas.height);
-						ctx.restore();
-    
-						var view = page.view;
-						var scaleX = (canvas.width / page.width);
-						var scaleY = (canvas.height / page.height);
-						ctx.translate(-view.x * scaleX, -view.y * scaleY);
-					
-						// Render PDF page into canvas context
-					
-						var renderContext = {
-							canvasContext: ctx,
-							viewport: viewport
-						};
-						page.render(renderContext);
-					});
-			});
-	});
+function canvasSaver(canvas,title,location) {
+	var canvas_data = canvas.toDataURL('image/png');
+	$.post("apps/reader/ajax/canvas_saver.php", {canv_data:canvas_data,title:title,location:location});
 }
+
+
diff --git a/reader/lib/thumbnail.php b/reader/lib/thumbnail.php
new file mode 100644
index 000000000..04dafaa06
--- /dev/null
+++ b/reader/lib/thumbnail.php
@@ -0,0 +1,34 @@
+<?php
+	
+	function check_thumb_exists($location,$filename) {
+		$image_path = rtrim($location,'.pdf').'.png';
+		if(!file_exists('/opt/lampp/htdocs/owncloud/data/priyanka/reader/'.$image_path)) {
+			$check = "false";
+		}
+		else
+			$check = "true";
+		return $check;
+	}
+
+	function thumb($path) {
+		$thumb_path = \OCP\Config::getSystemValue( 'datadirectory' ).'/'.\OC_User::getUser().'/reader';
+		if (file_exists($thumb_path.$path)) {
+			return new \OC_Image($thumb_path.$path);
+		}
+		if (!\OC_Filesystem::file_exists($path)) {
+			return false;
+		}
+	}
+
+	function check_dir_exists($current_dir,$dir) {
+		$owner = OCP\USER::getUser();
+		$path = OCP\Config::getSystemValue("datadirectory").'/'. $owner .'/reader';
+		$path .= $current_dir.$dir;
+		if (!is_dir($path)) {
+			return false;
+		}
+		else
+			return true;
+	}
+
+?>
diff --git a/reader/templates/index.php b/reader/templates/index.php
index 017fefe32..eb51f2c0b 100755
--- a/reader/templates/index.php
+++ b/reader/templates/index.php
@@ -1,13 +1,15 @@
+<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
+<META HTTP-EQUIV="Expires" CONTENT="-1">
 <script type="text/javascript">
     // Specify the main script used to create a new PDF.JS web worker.
     // In production, change this to point to the combined `pdf.js` file.
     PDFJS.workerSrc = 'apps/reader/js/pdf.js';
 </script>
 
-
 <div id = "controls">
 	<?php
 	include('apps/reader/lib/dir.php');
+	include('apps/reader/lib/thumbnail.php');
 	// Get the current directory.
 	$current_dir = empty($_['dir'])?'/':$_['dir'];
 	$base_url = OCP\Util::linkTo('reader', 'index.php').'&dir=';
@@ -53,6 +55,7 @@
 <table>
 	<tbody id = "fileList">
 		<?php
+		
 		// Array to store directory entries, which contain pdfs.
 			$sub_dirs = array();
 			foreach ($files as $file) {
@@ -64,14 +67,16 @@
 				if ($file['dirname'] == '.') { 
 		?>			
 					<!-- Each tr displays a file -->	
-					<tr id = "row" data-file="<?php echo $name;?>" data-type="<?php echo 'file'?>" data-mime="<?php echo 'application/pdf'?>" data-size="3462755" data-write="true" >
+					<tr id = "row" data-file="<?php echo $name;?>" data-type="<?php echo 'file'?>" data-mime="<?php echo 'application/pdf'?>" data-size="3462755" data-write="true">
 						<td class="filename svg">
-							<a class="name" id = "http://localhost<?php echo \OCP\Util::linkTo('files', 'download.php').'?file='.$directory.$name; ?>" href="http://localhost<?php echo \OCP\Util::linkTo('files', 'download.php').'?file='.$directory.$name; ?>" title="">
+							<?php $check_thumb = check_thumb_exists($directory,$name);?>
+							<a class="name" href="http://localhost<?php echo \OCP\Util::linkTo('files', 'download.php').'?file='.$directory.$name; ?>" title="<?php echo urldecode($name);?>" dir ="<?php echo $directory.$name?>" value  = "<?php echo $check_thumb;?>">
 								<center>
 									<span class = "nametext">
 										<?php echo htmlspecialchars($file['basename']);?>
 									</span>
 								</center>
+								<img rel ="images" src = "<?php echo \OCP\Util::linkTo('reader', 'ajax/thumbnail.php').'&filepath='.urlencode($current_dir.rtrim($file['filename'],'pdf').'png');?>">	
 							</a>
 						</td>
 					</tr>
@@ -94,7 +99,8 @@
 			 * directory name to fetch any 3 pdf urls inside those directories.*/
 			$results = explore($current_dir,$sub_dirs);
 			
-			foreach ($results as $r) {?>
+			foreach ($results as $r) {
+			?>
 			<!-- Display folder name--> 
 				<tr id = "row" data-file="<?php echo $r[0];?>" data-type="dir">
 					<td class = "filename svg">
@@ -103,18 +109,24 @@
 								<span class = "nametext">
 									<?php echo htmlspecialchars($r[0]);?>
 								</span>
-							</center>
+							
 							<?php
-								$margin = 15;
-								// Display thumbnails of 3 pdf pages to show a folder. 
-								foreach ($r[1] as $thumbs) {
-									// Use directory name, pdf url, margin value to be sent to javascript to generate thumbnail. 
-									echo '<input type = "hidden" value = "'.$r[0].'" id = "http://localhost'.\OCP\Util::linkTo('files', 'download.php').'?file='.$directory.$r[0].'/'.$thumbs.'" name = "'.$margin.'">';
-									// Left Margin of each page should increase from the left to right.
-									$margin = $margin + 15;
+								// Check if sub-directory($r[0]) exists or not-->
+								$is_dir = check_dir_exists($current_dir,$r[0]);
+								if($is_dir == false)
+									echo '<img src= "">';
+								else {
+									$margin = 5;
+									$img = 1;
+									// Display thumbnails of 3 pdf pages to show a folder. 
+									foreach ($r[1] as $thumbs) {
+										echo '<img id = "img'.$img.'" src = "'.\OCP\Util::linkTo('reader', 'ajax/thumbnail.php').'&filepath='.urlencode($current_dir.$r[0].'/'.rtrim($thumbs,'pdf').'png').'" style = "position:absolute; top:20px; left:10px; margin-left:'.$margin.'px; z-index:'.(100-$margin).';">';
+										$margin = $margin + 5;
+										$img = $img + 1;
+									}
 								}
 							?>	
-							
+							</center>
 						</a>
 					</td>
 				</tr><?php
@@ -122,5 +134,4 @@
 		?>
 	</tbody>
 </table>	
-
-
+