video thumbnails are displayed as slideshow when mouse is over; video widget bugs...
authorCălin-Andrei Burloiu <calin.burloiu@gmail.com>
Fri, 17 Feb 2012 13:03:13 +0000 (15:03 +0200)
committerCălin-Andrei Burloiu <calin.burloiu@gmail.com>
Fri, 17 Feb 2012 13:03:13 +0000 (15:03 +0200)
application/config/article.php
application/config/p2p-tube.php
application/controllers/catalog.php
application/core/Article_Controller.php
application/models/videos_model.php
application/views/article/english/test.php [new file with mode: 0644]
application/views/catalog/search_results_view.php
application/views/catalog/videos_summary_view.php
js/jquery.ui.nsvideo.js
js/jquery.ui.thumbs.js [new file with mode: 0644]

index 1677048..b43dc9c 100644 (file)
@@ -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
index 96491f5..35ba1df 100644 (file)
@@ -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
index d9aa933..581e147 100644 (file)
@@ -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);
 
index 480b847..6324883 100644 (file)
@@ -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>
index 87b0d3b..c09673c 100644 (file)
@@ -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 (file)
index 0000000..7cc5bd4
--- /dev/null
@@ -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
index 30b7aac..b300d7d 100644 (file)
@@ -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>
        
        <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
index 42d0683..a888a5c 100644 (file)
        <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
index 2d87c07..9e0d71b 100644 (file)
@@ -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 (file)
index 0000000..f7d5d91
--- /dev/null
@@ -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 );
+