From b56dce7ae724d5b955a96d7d3d5b3b476d2e28fb Mon Sep 17 00:00:00 2001
From: =?utf8?q?C=C4=83lin-Andrei=20Burloiu?= <calin.burloiu@gmail.com>
Date: Fri, 17 Feb 2012 15:03:13 +0200
Subject: [PATCH] video thumbnails are displayed as slideshow when mouse is
 over; video widget bugs solved

---
 application/config/article.php                | 12 +++-
 application/config/p2p-tube.php               |  2 +-
 application/controllers/catalog.php           | 11 +--
 application/core/Article_Controller.php       |  2 +-
 application/models/videos_model.php           | 14 +++-
 application/views/article/english/test.php    | 17 +++++
 .../views/catalog/search_results_view.php     | 15 +++-
 .../views/catalog/videos_summary_view.php     |  8 ++-
 js/jquery.ui.nsvideo.js                       |  4 +-
 js/jquery.ui.thumbs.js                        | 68 +++++++++++++++++++
 10 files changed, 133 insertions(+), 20 deletions(-)
 create mode 100644 application/views/article/english/test.php
 create mode 100644 js/jquery.ui.thumbs.js

diff --git a/application/config/article.php b/application/config/article.php
index 1677048..b43dc9c 100644
--- a/application/config/article.php
+++ b/application/config/article.php
@@ -1,8 +1,11 @@
 <?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
 /**
- * Article Engine Configurations which include libraries and helpers to be
- * loaded for each article.
+ * Article Engine Configurations which include libraries, helpers,
+ * JavaScript sources, CSS files to be loaded for each article.
+ * 
+ * For more details check documentation from
+ * 'application/core/Article_Controller'.
  */
 
 // Examples
@@ -11,4 +14,7 @@
 
 
 // Help article
-$config['article_help_js'] = array('jquery.ui.imagemap.js');
\ No newline at end of file
+$config['article_help_js'] = array('jquery.ui.imagemap.js');
+
+// Test article
+$config['article_test_js'] = array('jquery.ui.thumbs.js');
\ No newline at end of file
diff --git a/application/config/p2p-tube.php b/application/config/p2p-tube.php
index 96491f5..35ba1df 100644
--- a/application/config/p2p-tube.php
+++ b/application/config/p2p-tube.php
@@ -171,4 +171,4 @@ $config['noreply_email'] = 'no-reply@p2p-next.cs.pub.ro';
 | administrator.
 |
 */
-$config['require_moderation'] = TRUE;
\ No newline at end of file
+$config['require_moderation'] = FALSE;
\ No newline at end of file
diff --git a/application/controllers/catalog.php b/application/controllers/catalog.php
index d9aa933..581e147 100644
--- a/application/controllers/catalog.php
+++ b/application/controllers/catalog.php
@@ -60,7 +60,7 @@ class Catalog extends CI_Controller {
 			'css' => array(
 				'catalog.css'
 			),
-				//'js' => array(),
+				'js' => array('jquery.ui.thumbs.js'),
 				//'metas' => array('description'=>'','keywords'=>'')
 		);
 		$this->load->library('html_head_params', $params);
@@ -135,8 +135,9 @@ class Catalog extends CI_Controller {
 			. $this->config->item('site_name'),
 			'css' => array(
 				'catalog.css'
-			)
-				//'metas' => array('description'=>'','keywords'=>'')
+			),
+			'js' => array('jquery.ui.thumbs.js')
+			//'metas' => array('description'=>'','keywords'=>'')
 		);
 		$this->load->library('html_head_params', $params);
 
@@ -234,8 +235,8 @@ class Catalog extends CI_Controller {
 			'css' => array(
 				'catalog.css'
 			),
-				//'js' => array(),
-				//'metas' => array('description'=>'','keywords'=>'')
+			'js' => array('jquery.ui.thumbs.js'),
+			//'metas' => array('description'=>'','keywords'=>'')
 		);
 		$this->load->library('html_head_params', $params);
 
diff --git a/application/core/Article_Controller.php b/application/core/Article_Controller.php
index 480b847..6324883 100644
--- a/application/core/Article_Controller.php
+++ b/application/core/Article_Controller.php
@@ -3,7 +3,7 @@
  * Library Article_Controller can be extended by a controller to be used for 
  * content pages that depend on the language.
  *
- * The page views are usually located in
+ * The page views are located in
  * "application/views/article/$language/$method".
  * Parameters:
  * <ul>
diff --git a/application/models/videos_model.php b/application/models/videos_model.php
index 87b0d3b..c09673c 100644
--- a/application/models/videos_model.php
+++ b/application/models/videos_model.php
@@ -140,6 +140,7 @@ class Videos_model extends CI_Model {
 			// Thumbnails
 			$video['thumbs'] = $this->get_thumbs($video['name'], 
 				$video['thumbs_count']);
+			$video['json_thumbs'] = json_encode($video['thumbs']);
 				
 			// Ellipsized title
 			//$video['shorted_title'] = ellipsize($video['title'], 45, 0.75);
@@ -273,6 +274,8 @@ class Videos_model extends CI_Model {
 	public function add_video($name, $title, $description, $tags, $duration,
 			$formats, $category_id, $user_id, $uploaded_file)
 	{
+		$this->load->config('content_ingestion');
+		
 		// Tags.
 		$json_tags = array();
 		$tok = strtok($tags, ',');
@@ -284,15 +287,19 @@ class Videos_model extends CI_Model {
 		}
 		$json_tags = json_encode($json_tags);
 		
-		// TODO formats
 		$json_formats = json_encode($formats);
 		
+		// Thumbnail images
+		$thumbs_count = $this->config->item('thumbs_count');
+		$default_thumb = rand(0, $thumbs_count - 1);
+		
 		$query = $this->db->query("INSERT INTO `videos`
 				(name, title, description, duration, formats, category_id,
-						user_id, tags, date)
+						user_id, tags, date, thumbs_count, default_thumb)
 				VALUES ('$name', '$title', '$description', '$duration',
 						'$json_formats', $category_id,
-						$user_id, '$json_tags', utc_timestamp())");
+						$user_id, '$json_tags', utc_timestamp(),
+						$thumbs_count, $default_thumb)");
 		if ($query === FALSE)
 			return FALSE;
 		
@@ -684,6 +691,7 @@ class Videos_model extends CI_Model {
 			// Thumbnails
 			$video['thumbs'] = $this->get_thumbs($video['name'], 
 				$video['thumbs_count']);
+			$video['json_thumbs'] = json_encode($video['thumbs']);
 				
 			// Ellipsized title
 			//$video['shorted_title'] = ellipsize($video['title'], 45, 0.75);
diff --git a/application/views/article/english/test.php b/application/views/article/english/test.php
new file mode 100644
index 0000000..7cc5bd4
--- /dev/null
+++ b/application/views/article/english/test.php
@@ -0,0 +1,17 @@
+<?php
+$src[] = site_url('data/thumbs/IndependentaRomaniei_t00.jpg');
+$src[] = site_url('data/thumbs/IndependentaRomaniei_t01.jpg');
+$src[] = site_url('data/thumbs/IndependentaRomaniei_t02.jpg');
+$src[] = site_url('data/thumbs/IndependentaRomaniei_t03.jpg');
+
+$json_src = json_encode($src);
+?>
+
+<img id="d" src="<?php echo site_url('data/thumbs/IndependentaRomaniei_t02.jpg') ?>"
+	data-src='<?php echo $json_src ?>'>tra-la-la</img>
+
+<script type="text/javascript">
+	$('#d').thumbs({
+		
+	});
+</script>
\ No newline at end of file
diff --git a/application/views/catalog/search_results_view.php b/application/views/catalog/search_results_view.php
index 30b7aac..b300d7d 100644
--- a/application/views/catalog/search_results_view.php
+++ b/application/views/catalog/search_results_view.php
@@ -7,12 +7,14 @@
 	<?php echo $pagination ?>
 
 	<?php foreach($videos as $video):
-		$thumb_src = $video['thumbs'][ $video['default_thumb'] ];
+		$default_thumb = $video['thumbs'][ $video['default_thumb'] ];
 		?>
 	<div class="video-icon">
 		<div class="video-thumb ui-widget-content ui-corner-all">
 			<a href="<?php echo $video['video_url'] ?>">
-				<img src="<?php echo $thumb_src ?>" />
+				<img class="video-thumb-img"
+						src="<?php echo $default_thumb ?>"
+						data-src='<?php echo $video['json_thumbs'] ?>' />
 				<div class="video-duration"><?php echo $video['duration'] ?></div>
 			</a>
 		</div>
@@ -37,4 +39,11 @@
 	
 	<div style="clear: both"></div>
 
-</div>
\ No newline at end of file
+</div>
+
+<script type="text/javascript">
+	$(function() {		
+		$('.video-thumb-img').thumbs();
+	});
+
+</script>
\ No newline at end of file
diff --git a/application/views/catalog/videos_summary_view.php b/application/views/catalog/videos_summary_view.php
index 42d0683..a888a5c 100644
--- a/application/views/catalog/videos_summary_view.php
+++ b/application/views/catalog/videos_summary_view.php
@@ -26,12 +26,14 @@
 	<p><?php echo $this->lang->line('user_no_videos_uploaded') ?></p>
   <?php else: ?>
 	<?php foreach($videos as $video):
-		$thumb_src = $video['thumbs'][ $video['default_thumb'] ];
+		$default_thumb = $video['thumbs'][ $video['default_thumb'] ];
 		?>
 	<div class="video-icon">
 		<div class="video-thumb ui-widget-content ui-corner-all">
 			<a href="<?php echo $video['video_url'] ?>">
-				<img src="<?php echo $thumb_src ?>" />
+				<img class="video-thumb-img"
+						src="<?php echo $default_thumb ?>"
+						data-src='<?php echo $video['json_thumbs'] ?>' />
 				<div class="video-duration"><?php echo $video['duration'] ?></div>
 			</a>
 		</div>
@@ -71,6 +73,8 @@
 				
 			window.location = uri;
 		});
+		
+		$('.video-thumb-img').thumbs();
 	});
 
 </script>
\ No newline at end of file
diff --git a/js/jquery.ui.nsvideo.js b/js/jquery.ui.nsvideo.js
index 2d87c07..9e0d71b 100644
--- a/js/jquery.ui.nsvideo.js
+++ b/js/jquery.ui.nsvideo.js
@@ -382,7 +382,7 @@ $.widget( "ui.nsvideo", {
 	},
 	
 	_setWidgetWidth: function() {
-        var widget = this;
+        //var widget = this;
         
 		if (widget.$video.width() < 640)
 		{
@@ -706,7 +706,7 @@ $.widget( "ui.nsvideo", {
 		},
 		
 		refreshState: function() {
-            var widget = this;
+            //var widget = this;
             
 			var err = "";
 			var normal = "";
diff --git a/js/jquery.ui.thumbs.js b/js/jquery.ui.thumbs.js
new file mode 100644
index 0000000..f7d5d91
--- /dev/null
+++ b/js/jquery.ui.thumbs.js
@@ -0,0 +1,68 @@
+/*
+ * jQuery UI Thumbs 1.0.0 beta
+ * 
+ * Creates an image thumbnail slideshow for an image tag when mouse is over.
+ *
+ * Copyright 2011, Călin-Andrei Burloiu
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * Depends:
+ *   jquery.ui.core.js
+ *   jquery.ui.widget.js
+ */
+(function( $, undefined ) {
+
+$.widget( "ui.thumbs", {
+	version: "1.0.0 beta",
+	options: {
+		// in milliseconds
+		period: 750,
+		src: []
+	},
+	
+	_create: function() {
+		var widget = this;
+		
+		if (typeof(widget.element.data('src')) != 'undefined')
+			widget.options.src =
+					widget.options.src.concat(widget.element.data('src'));
+				
+		widget.index = 0;
+		widget.count = widget.options.src.length;
+		widget.defaultSrc = widget.element.attr('src');
+		
+		widget._preloadImages();
+		
+		widget.element
+			.mouseover(function() {
+				// Initial frame
+				widget.index = 0;
+				widget.element.attr('src', widget.options.src[0]);
+				
+				widget.intervalHandler = setInterval(function() {
+					widget.index = (widget.index + 1) % widget.count;
+					widget.element.attr('src',
+							widget.options.src[widget.index]);
+				}, widget.options.period);
+				
+			})
+			.mouseout(function() {
+				clearInterval(widget.intervalHandler);
+				widget.element.attr('src', widget.defaultSrc);
+			});
+	},
+	
+	_preloadImages: function() {
+		var images = new Array();
+		for (var i = 0; i < this.options.src.length; i++)
+		{
+			images[i] = new Image();
+			images[i].src = this.options.src[i];
+		}
+	}
+	
+});
+
+})( jQuery );
+
-- 
2.20.1