add additional_video action and eval CustomEvents

diff --git a/bin/mplayer.pl b/bin/mplayer.pl
index ce02c90..8a6ec71 100755 (executable)
--- a/bin/mplayer.pl
+++ b/bin/mplayer.pl
@@ -110,7 +110,7 @@ sub html5tv {
                        if ( ! -e $path ) {
                                warn "MISSING $path: $!\n";
                        } else {
-                               push @videos, $video;
+                               push @videos, [ @$s, $video ];
                        }
                }
 
@@ -156,10 +156,10 @@ sub html5tv {
                        my $w = $prop->{width}  / $factor;
                        my $h = $prop->{height} / $factor;
 
-                       $html5tv->{slide} ||= {
+                       $html5tv->{slide} = {
                                width  => $w,
                                height => $h,
-                       };
+                       } if $factor == 4;
 
                        my $path = "www/media/s/${w}x${h}";
                        if ( ! -d $path ) {
@@ -172,12 +172,23 @@ sub html5tv {
        $html5tv->{video_tags} =
                join("\n",
                        map {
+                               my $id = $_->[3];
+                               $id =~ s{\W+}{_}g;
+
+                               push @{ $html5tv->{sync}->{customEvents} }, {
+                                       startTime => $_->[0],
+                                       endTime   => $_->[1],
+                                       action    => 'additional_video',
+                                       args => {
+                                               video => $_[3],
+                                               id => $id,
+                                       },
+                               };
+
                                qq|
-                                       <div id="$_">
-                                               <video controls="controls" width="$html5tv->{video}->{width}px" height="$html5tv->{video}->{height}px">
-                                               <source src="media/$_" />
-                                               </video>
-                                       </div>
+                                       <video id="$id" style="display: none" controls="controls" width="$html5tv->{video}->{width}px" height="$html5tv->{video}->{height}px">
+                                       <source src="media/$_->[3]" />
+                                       </video>
                                |
                        } @videos
                )

diff --git a/www/html5tv.js b/www/html5tv.js
index 2262545..97c42fa 100644 (file)
--- a/www/html5tv.js
+++ b/www/html5tv.js
@@ -42,6 +42,22 @@ function chapterChange(isActive, args) {
     }\r
 }\r
 \r
+\r
+function additional_video(isActive, args) {\r
+       var video = $('video#' + args.id);\r
+       console.debug( isActive, args, video );\r
+       if (isActive) {\r
+               $('div#slide').hide();\r
+               video.show();\r
+               video[0].play();\r
+       } else {\r
+               video[0].pause();\r
+               video.hide();\r
+               $('div#slide').show();\r
+       }\r
+}\r
+\r
+\r
 $().ready(function() {\r
        //console.debug( video_sync );\r
        $("#vid").sync( html5tv.sync );\r

diff --git a/www/jquery.sync.js b/www/jquery.sync.js
index 6b086e3..b44abc9 100644 (file)
--- a/www/jquery.sync.js
+++ b/www/jquery.sync.js
@@ -100,7 +100,7 @@
     CustomEvent.prototype.setActive = function(isActive) {
         Event.prototype.setActive.call(this, isActive);
 
-        if ( typeof this.action === 'function' ) this.action(isActive, this.args);
+        eval( this.action + '(isActive, this.args)' ); // FIXME ugly
     }
 
     /**

diff --git a/www/tv.html b/www/tv.html
index 4770a1d..4c6d381 100644 (file)
--- a/www/tv.html
+++ b/www/tv.html
@@ -41,7 +41,7 @@
                <div id="slide" style="display: inline">\r
                <img src="media/s/bars.png">\r
                </div>\r
-               <div id="additional_video" style="display: none">\r
+               <div id="additional_video" style="display: inline">\r
                {video_tags}\r
                </div>\r
                <div id="subtitle"></div>\r