first stage finished: ready to publish to production; does not support users and...
authorCalin Burloiu <calin.burloiu@gmail.com>
Wed, 31 Aug 2011 11:53:20 +0000 (14:53 +0300)
committerCalin Burloiu <calin.burloiu@gmail.com>
Wed, 31 Aug 2011 11:53:20 +0000 (14:53 +0300)
14 files changed:
application/config/p2p-tube.php
application/controllers/catalog.php
application/controllers/video.php
application/language/english/ui_lang.php
application/language/romanian/ui_lang.php
application/views/article/english/about.php
application/views/article/english/help.php
application/views/article/english/install-plugins.php
application/views/header.php
application/views/video/watch_view.php
css/default.css
css/jquery-ui-1.8.15.custom.css
js/jquery.ui.imagemap.js
js/jquery.ui.nsvideo.js

index 045f54d..24281e8 100644 (file)
@@ -90,7 +90,7 @@ $config['default_torrent_ext'] = 'tstream';
 | IDs must be numeric and must preferably start from 1.
 |
 */
-$config['categories'] = array(1 => 'movies', 2 => 'tech_talks', 3 => 'events', 4 => 'karaoke');
+$config['categories'] = array(1 => 'movies', 2 => 'tech-talks', 3 => 'events', 4 => 'karaoke');
 
 /*
 |--------------------------------------------------------------------------
index 0c05388..3ed020f 100644 (file)
@@ -85,24 +85,25 @@ class Catalog extends CI_Controller {
                $this->load->view('html_end');
        }
        
-       public function category($category_id, $offset = 0)
+       public function category($category_name, $offset = 0)
        {
                // **
                // ** LOADING MODEL
                // **
+               // Video Category
+               $categories = $this->config->item('categories');
+               $category_id = array_search($category_name, $categories);
+               $vs_data['category_name'] = $category_name;
+               $vs_data['category_id'] = $category_id;
+               $vs_data['category_title'] = $category_name ?
+               $this->lang->line("ui_categ_$category_name") : $category_name;          
+               
                // Retrieve videos summary.
                $this->load->model('videos_model');
                $vs_data['videos'] = $this->videos_model->get_videos_summary(
-                       $category_id, intval($offset),
+                       $vs_data['category_id'], intval($offset),
                        $this->config->item('videos_per_page'));
                
-               // Video Category
-               $categories = $this->config->item('categories');
-               $category_name = $categories[$category_id];
-               $vs_data['category_title'] = $category_name ?
-                       $this->lang->line("ui_categ_$category_name") : $category_name;
-               $vs_data['category_id'] = $category_id;
-               
                // Pagination
                $this->load->library('pagination');
                $pg_config['base_url'] = site_url("catalog/category/$category_id/");
index 45e66d3..3637f14 100644 (file)
@@ -40,6 +40,9 @@ class Video extends CI_Controller {
                $this->load->model('videos_model');
                $this->videos_model->inc_video_var($id, 'views');
                $data['video'] = $this->videos_model->get_video($id, $name);
+               $categories = $this->config->item('categories');
+               $data['video']['category_name'] = 
+                       $categories[ $data['video']['category_id'] ];
                $data['plugin_type'] = ($plugin === NULL ? 'auto' : $plugin);
                
                // Display page.
index 70dffc0..fd366ea 100644 (file)
@@ -20,7 +20,7 @@ $lang['ui_install_already_installed'] = ' is installed';
 
 // Video Categories
 $lang['ui_categ_movies'] = 'Movies';
-$lang['ui_categ_tech_talks'] = 'TechTalks';
+$lang['ui_categ_tech-talks'] = 'TechTalks';
 $lang['ui_categ_events'] = 'Events';
 $lang['ui_categ_karaoke'] = 'Karaoke';
 
index 7417d32..878a6d6 100644 (file)
@@ -12,7 +12,7 @@ $lang['ui_search'] = 'Search';
 
 // Video Categories
 $lang['ui_categ_movies'] = 'Filme';
-$lang['ui_categ_tech_talks'] = 'TechTalks';
+$lang['ui_categ_tech-talks'] = 'TechTalks';
 $lang['ui_categ_events'] = 'Evenimente';
 $lang['ui_categ_karaoke'] = 'Karaoke';
 
index 64e7160..0c75b63 100644 (file)
@@ -1,15 +1,15 @@
-<h1>P2P-Next</h1>
-<p><a title="P2P-Next" href="http://www.p2p-next.org/">P2P-Next</a> is an integrated FP7 EU project involving more than 20 partners, including <a title="University Politehnica of Bucharest" href="http://www.upb.ro" ref="nofollow">University Politehnica of Bucharest</a> (UPB).</p>
-<p>P2P-Next aims to build the next generation Peer-to-Peer (P2P) content delivery platform.</p>
+<h1><a id="p2p-next">P2P-Next</a></h1>
+<p><a title="P2P-Next" href="http://www.p2p-next.org/">P2P-Next</a> is an integrated FP7 EU project involving more than 20 partners, including <a title="University Politehnica of Bucharest" href="http://www.upb.ro" rel="nofollow">University Politehnica of Bucharest</a> (UPB).</p>
+<p>P2P-Next aims to build the next generation Peer-to-Peer (P2P) content delivery platform threw through the <a id="next-share"><strong>NextShare</strong></a> technology which enables video-on-demand and live streaming for both computers and digital set-top-boxes (STB).</p>
 <p>This site provides information on UPB's contribution to the P2P-Next project activities. We are currently part of WP4 (Work Package 4 - IPvNext Networking Fabric) and WP8 (Work Package 8 - Living Lab Trials).</p>
 
-<h1>NextShare Video Plugins</h1>
+<h1><a id="next-share-video-plugins">NextShare Video Plugins</a></h1>
 <dl>
-       <dt><a href="http://www.tribler.org/trac/wiki/BrowserPlugin" target="_blank">NextSharePC</a></dt>
-       <dd>a media-player browser plugin which uses <a href="http://www.videolan.org/vlc/" target="_blank" ref="nofollow">VLC</a> libraries for video rendering and incorporates P2P technology for VideoOnDemand (VoD) and LiveStreaming content delivery. The plugin is currently working with Internet Explorer and Firefox on Windows.</dd>
+       <dt><a id="nextsharepc" href="http://www.tribler.org/trac/wiki/BrowserPlugin" target="_blank">NextSharePC</a></dt>
+       <dd>a media-player browser plugin which uses <a href="http://www.videolan.org/vlc/" target="_blank" rel="nofollow">VLC</a> libraries for video rendering and incorporates P2P technology for VideoOnDemand (VoD) and LiveStreaming content delivery. The plugin is currently working with Internet Explorer and Firefox on Windows.</dd>
 </dl>
 <dl>
-       <dt><a href="http://www.tribler.org/trac/wiki/SwarmPlayer" target="_blank">SwarmPlayer</a></dt>
+       <dt><a id="swarmplayer" href="http://www.tribler.org/trac/wiki/SwarmPlayer" target="_blank">SwarmPlayer</a></dt>
        <dd>a browser plugin which uses the new HTML5 rendering and incorporates P2P technology for VideoOnDemand (VoD) and LiveStreaming content delivery</dd>
 </dl>
 
                        <a href="http://www.tribler.org/trac/wiki/BrowserPlugin" target="_blank">NextSharePC</a>
                </th>
                <td>
-                       <a href="http://www.videolan.org/vlc/" target="_blank" ref="nofollow"><img src="<?php echo site_url('img/vlc-icon.png') ?>" alt="win" /> VLC</a>
+                       <a href="http://www.videolan.org/vlc/" target="_blank" rel="nofollow"><img src="<?php echo site_url('img/vlc-icon.png') ?>" alt="win" /> VLC</a>
                </td>
                <td>
                        <p><img src="<?php echo site_url('img/windows-icon.png') ?>" alt="win" /> Windows</p>
                        <p><img src="<?php echo site_url('img/macosx-icon.png') ?>" alt="win" /> Mac OS X</p>
                </td>
                <td>
-                       <p><img src="<?php echo site_url('img/firefox-icon.png') ?>" alt="win" /> <a href="http://www.mozilla.com/" target="_blank" ref="nofollow">Mozilla Firefox</a> 3.5 or greater</p>
-                       <p><img src="<?php echo site_url('img/ie-icon.png') ?>" alt="win" /> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank" ref="nofollow">Internet Explorer</a> 7.0 or greater</p>
+                       <p><img src="<?php echo site_url('img/firefox-icon.png') ?>" alt="win" /> <a href="http://www.mozilla.com/" target="_blank" rel="nofollow">Mozilla Firefox</a> 3.5 or greater</p>
+                       <p><img src="<?php echo site_url('img/ie-icon.png') ?>" alt="win" /> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank" rel="nofollow">Internet Explorer</a> 7.0 or greater</p>
                </td>
        </tr>
        <tr>
@@ -41,7 +41,7 @@
                        <a href="http://www.tribler.org/trac/wiki/SwarmPlayer" target="_blank">SwarmPlayer</a>
                </th>
                <td>
-                       <a href="http://www.w3.org/TR/html5/" target="_blank" ref="nofollow"><img src="<?php echo site_url('img/html5-icon.png') ?>" alt="win" /> HTML5</a>
+                       <a href="http://www.w3.org/TR/html5/" target="_blank" rel="nofollow"><img src="<?php echo site_url('img/html5-icon.png') ?>" alt="win" /> HTML5</a>
                </td>
                <td>
                        <p><img src="<?php echo site_url('img/windows-icon.png') ?>" alt="win" /> Windows</p>
@@ -49,8 +49,8 @@
                        <p><img src="<?php echo site_url('img/macosx-icon.png') ?>" alt="win" /> Mac OS X</p>
                </td>
                <td>
-                       <p><img src="<?php echo site_url('img/firefox-icon.png') ?>" alt="win" /> <a href="http://www.mozilla.com/" target="_blank" ref="nofollow">Mozilla Firefox</a> 3.5 or greater</p>
-                       <p><img src="<?php echo site_url('img/ie-icon.png') ?>" alt="win" /> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank" ref="nofollow">Internet Explorer</a> 7.0 or greater</p>
+                       <p><img src="<?php echo site_url('img/firefox-icon.png') ?>" alt="win" /> <a href="http://www.mozilla.com/" target="_blank" rel="nofollow">Mozilla Firefox</a> 3.5 or greater</p>
+                       <p><img src="<?php echo site_url('img/ie-icon.png') ?>" alt="win" /> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="_blank" rel="nofollow">Internet Explorer</a> 7.0 or greater</p>
                </td>
        </tr>
 </table>
@@ -62,9 +62,9 @@
        <li>from <a href="<?php site_url('catalog/category/1') ?>">feature films</a></li>
        <li>from <a href="<?php echo site_url('catalog/category/2') ?>"><em>TechTalks</em> technical presentations</a></li>
        <li>or from <a href="<?php site_url('catalog/category/3') ?>">various events</a> from our faculty</li>
-       <li>from <a href="<?php site_url('catalog/category/4') ?>">karaoke parties</a> in <a href="http://acs.pub.ro/" target="_blank" ref="nofollow">Automatic Control and Computers Faculty</a></li>
+       <li>from <a href="<?php site_url('catalog/category/4') ?>">karaoke parties</a> in <a href="http://acs.pub.ro/" target="_blank" rel="nofollow">Automatic Control and Computers Faculty</a></li>
 </ul>
-<p>All available movies are currently seeded by 5 peers with high bandwidth (1Gbit) kindly provided by the<a title="NCIT-Cluster" href="http://cluster.ncit.pub.ro/" target="_blank" ref="nofollow"> NCIT-Cluster</a>. Anyone that watches a movie will take part in the swarm and ensure greater availability to provided content.</p>
+<p>All available movies are currently seeded by 5 peers with high bandwidth (1Gbit) kindly provided by the<a title="NCIT-Cluster" href="http://cluster.ncit.pub.ro/" target="_blank" rel="nofollow"> NCIT-Cluster</a>. Anyone that watches a movie will take part in the swarm and ensure greater availability to provided content.</p>
 
 <h1>The Platform</h1>
 
index 99a6494..da28fc4 100644 (file)
@@ -1,77 +1,91 @@
 <div id="video-widget-imagemap">
+       <h1>Video Widget Snapshot</h1>
        <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" />
+               <img src="<?php echo site_url('img/nsvideo-widget.jpg') ?>" alt="NextShare Video Widget Screenshot" title="NextShare Video Widget Screenshot" width="446" height="353" />
        </div></div>
+       <h4>Click on a component bellow to highlight it on the snapshot above and view a description of it:</h4> 
        
+       <h1>Video Widget Components</h1>
        <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>
+               <h3 class="ui-imagemap-title"
+                               data-left="5px" data-top="44px" data-width="433px" data-height="246px">
+                       <a href="#">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>
+               <h3 class="ui-imagemap-title"
+                               data-left="3px" data-top="314px" data-width="32px" data-height="34px">
+                       <a href="#"><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>
+               <h3 class="ui-imagemap-title"
+                               data-left="41px" data-top="321px" data-width="39px" data-height="21px">
+                       <a href="#">Current Time</a>
+               </h3>
                <div>
-                       ...
+                       View the time elapsed from the beginning of the video.
                </div>
                
-               <h3><a href="#" class="ui-imagemap-title"
-                       data-left="86px" data-top="323px" data-width="57px" data-height="19px"
-                       >Total Time</a></h3>
+               <h3 class="ui-imagemap-title"
+                               data-left="86px" data-top="323px" data-width="57px" data-height="19px">
+                       <a href="#">Total Time</a>
+               </h3>
                <div>
-                       ...
+                       View video duration.
                </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>
+               <h3 class="ui-imagemap-title"
+                               data-left="2px" data-top="295px" data-width="439px" data-height="22px">
+                       <a href="#">Time Progress Slider</a>
+               </h3>
                <div>
-                       ...
+                       View a graphical representation of the time elapsed from the movie from its duration. You can also use this slider to seek current position in the video to a desired point.
                </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>
+               <h3 class="ui-imagemap-title"
+                               data-left="213px" data-top="320px" data-width="80px" data-height="24px">
+                       <a href="#"><em>Volume</em> Slider</a>
+               </h3>
                <div>
-                       ...
+                       A graphical representation of the sound volume level which can be manipulated with the mouse in order change current volume.
                </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>
+               <h3 class="ui-imagemap-title"
+                               data-left="181px" data-top="313px" data-width="32px" data-height="36px">
+                       <a href="#"><em>Mute</em> button</a>
+               </h3>
                <div>
-                       ...
+                       Use this button to alternatively disable or enable the sound for the video.
                </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>
+               <h3 class="ui-imagemap-title"
+                               data-left="293px" data-top="313px" data-width="119px" data-height="37px">
+                       <a href="#">Switch Video Definition (Resolution)</a>
+               </h3>
                <div>
-                       ...
+                       <p>This group of check buttons show definitions available for the video. The definition characterizes its resolution (number of pixels on horizontal and vertical). A definition is coded here, as in television systems, with a number, representing the number of vertical pixels (height), and a "p", which is an abbreviation from <a href="http://en.wikipedia.org/wiki/Progressive_scan" rel="nofollow" target="_blank"><em>progressive scan</em></a>.</p>
+                       <p>The number of vertical pixels depends on the <a href="http://en.wikipedia.org/wiki/Display_aspect_ratio" rel="nofollow" target="_blank"><em>display aspect ratio</em></a> which is usually 4:3 or 16:9. Because the video needs to fit in your browser its actual size (when not in Full Screen mode) will be between 640 and 1024 horizontal pixels.</p>
                </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>
+               <h3 class="ui-imagemap-title"
+                               data-left="6px" data-top="6px" data-width="134px" data-height="42px">
+                       <a href="#">Switch Video Plugin</a>
+               </h3>
                <div>
-                       ...
+                       Use this two check buttons to switch between <a href="<?php echo site_url('about#next-share-video-plugins') ?>">the two NextShare plug-ins available</a>. Choose <em>HTML5</em> for <a href="<?php echo site_url('about#swarmplayer') ?>">SwarmPlayer</a> and <em>VLC</em> for <a href="<?php echo site_url('about#nextsharepc') ?>">NextSharePC</a>.
                </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>
+               <h3 class="ui-imagemap-title"
+                               data-left="407px" data-top="315px" data-width="35px" data-height="34px">
+                       <a href="#"><em>Full Screen</em> button</a>
+               </h3>
                <div>
-                       ...
+                       Displays the video on the whole screen without having to be limited by the web page.
                </div>
        </div>
 
@@ -81,6 +95,7 @@
 $(function() {
        $('#video-widget-titles').accordion({
                collapsible: true,
+               autoHeight: false,
                active: false
        });
 
index 5ed9ce2..677278b 100644 (file)
@@ -4,7 +4,7 @@
        <li><a href="#NextSharePC">NextSharePC (based on VLC)</a></li>
 </ol>
 
-<h1><a name="SwarmPlayer">SwarmPlayer</a></h1>
+<h1><a id="SwarmPlayer">SwarmPlayer</a></h1>
 <p>To install the SwarmPlayer video plugin (based on <a href="http://www.w3.org/TR/html5/">HTML5</a>) visit P2P-Next's <a href="http://swarmplayer.p2p-next.org/" target="_blank">SwarmPlayer Site</a>. You'll find a page such as the one in the screenshot below.
 </p>
 
@@ -13,7 +13,7 @@
 <p>
 Find the green button labeled "Add Swarmplayer ...". Click it and follow the instructions.</p>
 
-<h1><a name="NextSharePC">NextSharePC</a></h1>
+<h1><a id="NextSharePC">NextSharePC</a></h1>
 <p>To install the NextSharePC video plugin (based on <a href="http://www.videolan.org/vlc/">VLC</a>) follow the steps below:</p>
 <ol>
        <li>If you are using ...
index 3e9342d..dffaca3 100644 (file)
@@ -32,4 +32,4 @@ endif ?>
                <label for="quick-search-box"><?php echo $this->lang->line('ui_search') . ': ' ?></label>
                <input type="text" id="quick-search-box" name="quick-search-box" disabled="disabled" value="not yet implemented" />
        </form>
-</div>
+</div>
\ No newline at end of file
index 9f7d091..11662fc 100644 (file)
@@ -3,7 +3,7 @@
        siteUrl = '<?php echo site_url() ?>';
 </script>
 
-<div id="watch-main">
+<div id="main">
 <?php // Invalid name in URL ?>
 <?php if (isset($video['err'])):
        if ($video['err'] == 'INVALID_NAME'):
@@ -19,7 +19,7 @@
        
 <?php // Correct URL ?>
 <?php else: ?>
-       <h1><?php echo $video['title'] ?></h1>
+       <h1><a href="<?php echo site_url('catalog/category/'. $video['category_name']) ?>"><?php echo $video['category_title'] ?></a> &rsaquo; <?php echo $video['title'] ?></h1>
        
        <div id="video-widget-tabs">
                <ul>
                                type: "<?php echo $plugin_type ?>",
                                src: <?php echo json_encode($video['assets']) ?>,
 
-                                               
-                               width: 427,
-                               height: 240,
                                showState: false,
-
                                
-                               //minWidth: 640,
-                               //maxWidth: 1024,
+                               minWidth: 640,
+                               maxWidth: 1024,
                                initialDuration: "<?php echo $video['duration'] ?>",
                                
                                resize: function() {
index fac6909..ae58bc4 100644 (file)
@@ -141,7 +141,7 @@ h1
        width: 100%;*/
        /* padding: 12px; */
        margin: 0 auto;
-       width: 1024px;
+       width: 1056px;
        text-align: justify;
 }
 
index b1195b7..e1cc621 100644 (file)
@@ -60,7 +60,7 @@
 .ui-widget .ui-widget { font-size: 1em; }
 .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
 .ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
-.ui-widget-content a { color: #333333; }
+.ui-widget-content a { rgb(0,90,192); }
 .ui-widget-header { border: 1px solid #abd1ff; background: #005ac0 url(images/ui-bg_gloss-wave_80_005ac0_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
 .ui-widget-header a { color: #ffffff; }
 
index a34a2c2..09475ff 100644 (file)
@@ -29,6 +29,7 @@ $.widget( "ui.imagemap", {
                widget.$marker = $('<div></div>')
                        .appendTo('div.ui-imagemap-image', widget.element);
                widget.$marker
+                       .hide()
                        .css('position', 'absolute')
                        .css('outline', '2px solid red')
                        .css('background', 'transparent');
@@ -42,7 +43,7 @@ $.widget( "ui.imagemap", {
                                if (typeof $title.data('left') == 'undefined')
                                        return false;
                                
-                               var top = $title.data('top')
+                               var top = $title.data('top');
                                var left = $title.data('left');
                                var width, height;
                                
@@ -56,6 +57,7 @@ $.widget( "ui.imagemap", {
                                        height = $title.data('height');
                                
                                widget.$marker
+                                       .show()
                                        .css('top', top)
                                        .css('left', left)
                                        .css('width', width)
index ec30d87..e556fda 100644 (file)
@@ -385,7 +385,7 @@ $.widget( "ui.nsvideo", {
                if (widget.$video.width() < 640)
                {
                        widget.element.css('width',
-                                                       427 + 8 + 'px');//TODO 640 + 8
+                                                       640 + 8 + 'px');
                        widget.$video.css('left', 
                                Math.round(widget.$videoContainer.width()/2 
                                - widget.$video.width()/2)