bug fixes; views is incrementing; started to create help page -- imagemap widget...
authorCalin Burloiu <calin.burloiu@gmail.com>
Tue, 30 Aug 2011 13:38:29 +0000 (16:38 +0300)
committerCalin Burloiu <calin.burloiu@gmail.com>
Tue, 30 Aug 2011 13:38:40 +0000 (16:38 +0300)
14 files changed:
application/config/article.php
application/config/pagination.php
application/controllers/article.php
application/controllers/video.php
application/core/Article_Controller.php
application/language/english/ui_lang.php
application/models/videos_model.php
application/views/article/english/contact.php
application/views/article/english/help.php
application/views/video/watch_view.php
css/default.css
img/nsvideo-widget.jpg [new file with mode: 0644]
js/jquery.ui.imagemap.js [new file with mode: 0644]
js/jquery.ui.nsvideo.js

index 8e6bc9f..1677048 100644 (file)
@@ -6,5 +6,9 @@
  */
 
 // Examples
-$config['article_$method_helpers'] = array();
-$config['article_$method_libraries'] = array();
\ No newline at end of file
+// $config['article_$method_helpers'] = array();
+// $config['article_$method_libraries'] = array();
+
+
+// Help article
+$config['article_help_js'] = array('jquery.ui.imagemap.js');
\ No newline at end of file
index 8df4933..cd18203 100644 (file)
@@ -1,7 +1,14 @@
 <?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
+$CI =& get_instance();
+
 $config['per_page'] = 16; 
 $config['num_links'] = 2;
 
 $config['full_tag_open'] = '<div class="pagination">';
-$config['full_tag_close'] = '</div>';
\ No newline at end of file
+$config['full_tag_close'] = '</div>';
+
+$config['first_link'] = $CI->lang->line('ui_page_first');
+$config['prev_link'] = $CI->lang->line('ui_page_previous');
+$config['next_link'] = $CI->lang->line('ui_page_next');
+$config['last_link'] = $CI->lang->line('ui_page_last');
\ No newline at end of file
index 5073a5b..f1909b9 100644 (file)
@@ -26,8 +26,8 @@ class Article extends Article_Controller {
                
                $html_params = array('title' => $this->title.' - '
                                                                        . $this->config->item('site_name'),
-                                                       //'css' => array(),
-                                                       //'js' => array(),
+                                                       'css' => $this->css,
+                                                       'js' => $this->js,
                                                        'metas' => 
                                                                array('description'=>$this->metaDescription)
                                                        );
index 019fa2c..45e66d3 100644 (file)
@@ -38,6 +38,7 @@ class Video extends CI_Controller {
                // **
                // Retrieve video information.
                $this->load->model('videos_model');
+               $this->videos_model->inc_video_var($id, 'views');
                $data['video'] = $this->videos_model->get_video($id, $name);
                $data['plugin_type'] = ($plugin === NULL ? 'auto' : $plugin);
                
index e6a50aa..480b847 100644 (file)
  * an entry named "article_${method}_helpers" or "article_${method}_libraries"
  * respectively with an array of helpers or libraries to be loaded for the
  * article.</li>
+ * <li><strong>CSSs, JSs:</strong> in config file 'article.php':
+ * an entry named "article_${method}_css" or "article_${method}_js"
+ * respectively with an array of .css or .js to be loaded into members $css
+ * and $js. It's up to the programmer to define how this members are going
+ * to be used.</li>
  * </ul> 
  *
  * @category   Base Controller Library
@@ -27,6 +32,8 @@ class Article_Controller extends CI_Controller {
        protected $metaDescription = NULL;
        protected $helpers = array();
        protected $libraries = array();
+       protected $css = array();
+       protected $js = array();
        
        function __construct()
        {
@@ -65,6 +72,16 @@ class Article_Controller extends CI_Controller {
                $this->libraries = $this->config->item("article_${method}_library");
                if ($this->libraries !== FALSE)
                        $this->load->library($libraries);
+               
+               // CSSs
+               $css =& $this->config->item("article_${method}_css");
+               if ($css !== FALSE)
+                       $this->css = $css;
+               
+               // JavaScripts
+               $js =& $this->config->item("article_${method}_js");
+               if ($js !== FALSE)
+                       $this->js = $js;
        }
        
        /**
index 0bd140d..70dffc0 100644 (file)
@@ -24,6 +24,12 @@ $lang['ui_categ_tech_talks'] = 'TechTalks';
 $lang['ui_categ_events'] = 'Events';
 $lang['ui_categ_karaoke'] = 'Karaoke';
 
+// Pagination
+$lang['ui_page_first'] = 'First';
+$lang['ui_page_previous'] = 'Previous';
+$lang['ui_page_next'] = 'Next';
+$lang['ui_page_last'] = 'Last';
+
 // Video asset metrics
 $lang['ui_view'] = 'view';
 $lang['ui_views'] = 'views';
index ec7bb39..1ba9e8f 100644 (file)
@@ -176,6 +176,21 @@ class Videos_model extends CI_Model {
                return $video;
        }
        
+       /**
+        * Increment a video parameter from DB: `views`, `likes` or `dislikes`.
+        * 
+        * @param int $id       DB video id
+        * @param string $param DB parameter column name.
+        * @return void
+        */
+       public function inc_video_var($id, $var)
+       {
+               // TODO error report if query returns FALSE
+               $this->db->query('UPDATE `videos` '
+                                               . 'SET `'. $var. '`=`'. $var. '`+1 '
+                                               . 'WHERE id='. $id); 
+       }
+       
        public function get_thumbs($name, $count)
        {
                $thumbs = array();
index 34b39a7..02e5d6f 100644 (file)
@@ -6,7 +6,7 @@
        <dd>
                <?php echo safe_mailto('p2p-next-contact@cs.pub.ro', 'p2p-next-contact@cs.pub.ro') ?>
        </dd>
-       <dt><img src="<?php echo site_url('img/redmine-logo.svg') ?>" class="inline" alt="email" width="48" height="33" /> Redmine Issue Tracker: </dt>
+       <dt><img src="<?php echo site_url('img/redmine-logo.svg') ?>" class="inline" alt="redmine" width="48" height="33" /> Redmine Issue Tracker: </dt>
        <dd>
                <a href="http://p2p-next.cs.pub.ro/redmine/site/issues">http://p2p-next.cs.pub.ro/redmine/site/issues</a>
        </dd>
index 30b2de3..99a6494 100644 (file)
@@ -1 +1,91 @@
-TODO <em>Help</em>
\ No newline at end of file
+<div id="video-widget-imagemap">
+       <div><div class="ui-imagemap-image" style="margin: 0 auto; margin-bottom: 1em">
+               <img src="<?php echo site_url('img/nsvideo-widget.jpg') ?>" alt="NextShare Video Widget Screenshot" width="446" height="353" />
+       </div></div>
+       
+       <div id="video-widget-titles">
+               <h3><a href="#" class="ui-imagemap-title"
+                       data-left="5px" data-top="44px" data-width="433px" data-height="246px"
+                       >Watching Area</a></h3>
+               <div>
+                       Here you can watch the video.
+               </div>
+               
+               <h3><a href="#" class="ui-imagemap-title"
+                       data-left="3px" data-top="314px" data-width="32px" data-height="34px"
+                       ><em>Play</em> / <em>Pause</em> button</a></h3>
+               <div>
+                       Toggle playing and pausing the video.
+               </div>
+               
+               <h3><a href="#" class="ui-imagemap-title"
+                       data-left="41px" data-top="321px" data-width="39px" data-height="21px"
+                       >Current Time</a></h3>
+               <div>
+                       ...
+               </div>
+               
+               <h3><a href="#" class="ui-imagemap-title"
+                       data-left="86px" data-top="323px" data-width="57px" data-height="19px"
+                       >Total Time</a></h3>
+               <div>
+                       ...
+               </div>
+               
+               <h3><a href="#" class="ui-imagemap-title"
+                       data-left="2px" data-top="295px" data-width="439px" data-height="22px"
+                       >Time Progress Slider</a></h3>
+               <div>
+                       ...
+               </div>
+               
+               <h3><a href="#" class="ui-imagemap-title"
+                       data-left="213px" data-top="320px" data-width="80px" data-height="24px"
+                       ><em>Volume</em> Slider</a></h3>
+               <div>
+                       ...
+               </div>
+               
+               <h3><a href="#" class="ui-imagemap-title"
+                       data-left="181px" data-top="313px" data-width="32px" data-height="36px"
+                       ><em>Mute</em> button</a></h3>
+               <div>
+                       ...
+               </div>
+               
+               <h3><a href="#" class="ui-imagemap-title"
+                       data-left="293px" data-top="313px" data-width="119px" data-height="37px"
+                       >Switch Video Definition (Resolution)</a></h3>
+               <div>
+                       ...
+               </div>
+               
+               <h3><a href="#" class="ui-imagemap-title"
+                       data-left="6px" data-top="6px" data-width="134px" data-height="42px"
+                       >Switch Video Plugin</a></h3>
+               <div>
+                       ...
+               </div>
+               
+               <h3><a href="#" class="ui-imagemap-title"
+                       data-left="407px" data-top="315px" data-width="35px" data-height="34px"
+                       ><em>Full Screen</em> button</a></h3>
+               <div>
+                       ...
+               </div>
+       </div>
+
+</div>
+
+<script type="text/javascript">
+$(function() {
+       $('#video-widget-titles').accordion({
+               collapsible: true,
+               active: false
+       });
+
+       $('#video-widget-imagemap').imagemap({
+
+       });
+});
+</script>
\ No newline at end of file
index 36ae1e0..9f7d091 100644 (file)
                        .nsvideo({
                                type: "<?php echo $plugin_type ?>",
                                src: <?php echo json_encode($video['assets']) ?>,
-                               //width: videoWidth,
-                               //height: videoHeight
-                               minWidth: 640,
-                               maxWidth: 1024,
+
+                                               
+                               width: 427,
+                               height: 240,
+                               showState: false,
+
+                               
+                               //minWidth: 640,
+                               //maxWidth: 1024,
                                initialDuration: "<?php echo $video['duration'] ?>",
                                
                                resize: function() {
index e1abafa..fac6909 100644 (file)
@@ -210,4 +210,5 @@ h1
 .pagination
 {
        clear: both;
+       word-spacing: 0.5em;
 }
diff --git a/img/nsvideo-widget.jpg b/img/nsvideo-widget.jpg
new file mode 100644 (file)
index 0000000..7504176
Binary files /dev/null and b/img/nsvideo-widget.jpg differ
diff --git a/js/jquery.ui.imagemap.js b/js/jquery.ui.imagemap.js
new file mode 100644 (file)
index 0000000..a34a2c2
--- /dev/null
@@ -0,0 +1,81 @@
+/*
+ * jQuery UI ImageMap 1.0.0 beta
+ *
+ * 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.imagemap", {
+       version: "1.0.0 beta",
+       options: {
+
+       },
+       
+       _create: function() {
+               var widget = this;
+               
+               $('div.ui-imagemap-image', widget.element)
+                       .css('position', 'relative')
+                       .css('width', $('div.ui-imagemap-image > img', widget.element).css('width'))
+                       .css('height', $('div.ui-imagemap-image > img', widget.element).css('height'))
+                       ;
+               
+               widget.$marker = $('<div></div>')
+                       .appendTo('div.ui-imagemap-image', widget.element);
+               widget.$marker
+                       .css('position', 'absolute')
+                       .css('outline', '2px solid red')
+                       .css('background', 'transparent');
+               
+               $('.ui-imagemap-title', widget.element)
+                       .click(function() {
+                               var $title = $(this);
+                               
+                               if (typeof $title.data('top') == 'undefined')
+                                       return false;
+                               if (typeof $title.data('left') == 'undefined')
+                                       return false;
+                               
+                               var top = $title.data('top')
+                               var left = $title.data('left');
+                               var width, height;
+                               
+                               if (typeof $title.data('width') == 'undefined')
+                                       width = '1px';
+                               else
+                                       width = $title.data('width');
+                               if (typeof $title.data('height') == 'undefined')
+                                       height = '1px';
+                               else
+                                       height = $title.data('height');
+                               
+                               widget.$marker
+                                       .css('top', top)
+                                       .css('left', left)
+                                       .css('width', width)
+                                       .css('height', height);
+                               
+                       });
+       },
+
+       _destroy: function() {
+               this.element.html('');
+       },
+       
+       _setOption: function( key, value ) {
+               // TODO
+               if ( key === "TODO" ) {
+                       
+               }
+
+               this._super( "_setOption", key, value );
+       }
+});
+
+})( jQuery );
\ No newline at end of file
index ccf9a13..ec30d87 100644 (file)
@@ -200,13 +200,19 @@ $.widget( "ui.nsvideo", {
                widget.$videoContainer.html('');
                
                // Install buttons or not supported message if required
-               var $installContainer = $('<div class="container-install-in-widget"></div>')
-                       .appendTo(widget.$videoContainer);
-               $installContainer
-                       .nsinstall({
-                               type: widget.options.type,
-                               hideIfAlreadyInstalled: true
-                       });
+               if (typeof $.fn.nsinstall == 'function')
+               {
+                       widget.$installContainer = $('<div class="container-install-in-widget"></div>')
+                               .appendTo(widget.$videoContainer);
+                       widget.$installContainer
+                               .nsinstall({
+                                       type: widget.options.type,
+                                       hideIfAlreadyInstalled: true
+                               });
+                       if (widget.$installContainer.nsinstall('option', 'error')
+                                       == 'already installed')
+                               widget.$installContainer.hide();
+               }
                
                var width = widget.options.width;
                var height = widget.options.height;
@@ -243,6 +249,10 @@ $.widget( "ui.nsvideo", {
                                                widget.html5.refreshVolume();
                                                widget.html5.refreshState();
                                                widget._setWidgetWidth();
+                                               
+                                               if (widget.$video[0].error != 3
+                                                               && widget.$video[0].error != 4)
+                                                       widget.$installContainer.hide();
                                        },
                                        seeked: function() {
                                                widget.html5.play();
@@ -375,7 +385,7 @@ $.widget( "ui.nsvideo", {
                if (widget.$video.width() < 640)
                {
                        widget.element.css('width',
-                                                       640 + 8 + 'px');
+                                                       427 + 8 + 'px');//TODO 640 + 8
                        widget.$video.css('left', 
                                Math.round(widget.$videoContainer.width()/2 
                                - widget.$video.width()/2)
@@ -826,6 +836,11 @@ $.widget( "ui.nsvideo", {
                },
                
                play: function() {
+                       if(typeof widget.$video[0].playlist.isPlaying == 'undefined')
+                               return widget;
+                       
+                       widget.$installContainer.hide();
+                       
                        if (! widget.$video[0].playlist.isPlaying)
                                widget.$video[0].playlist.play();