Speed up video loop, and adjust left margin for outline

bzr-revno: 1051

openlp/core/lib/htmlbuilder.py

@@ -58,7 +58,10 @@ body {
 #image {
     z-index:1;
 }
-#video {
+#video1 {
+    z-index:2;
+}
+#video2 {
     z-index:2;
 }
 #alert {
@@ -80,54 +83,12 @@ body {
 <script language="javascript">
     var timer = null;
     var video_timer = null;
+    var current_video = '1';
     var transition = %s;
 
     function show_video(state, path, volume, loop){
-        var vid = document.getElementById('video');
-        if(path != null){
-            vid.src = path;
-            vid.load();
-        }
-        if(volume != null){
-            vid.volume = volume;
-        }
-        switch(state){
-            case 'play':
-                vid.play();
-                vid.style.display = 'block';
-                if(loop)
-                    video_timer = setInterval('video_loop()', 200);
-                break;
-            case 'pause':
-                if(video_timer!=null){
-                    clearInterval(video_timer);
-                    video_timer = null;
-                }
-                vid.pause();
-                vid.style.display = 'block';
-                break;
-            case 'stop':
-                if(video_timer!=null){
-                    clearInterval(video_timer);
-                    video_timer = null;
-                }
-                vid.pause();
-                vid.style.display = 'none';
-                vid.load();
-                break;
-            case 'close':
-                if(video_timer!=null){
-                    clearInterval(video_timer);
-                    video_timer = null;
-                }
-                vid.pause();
-                vid.style.display = 'none';
-                vid.src = '';
-                break;
-        }
-    }
-    function video_loop(){
-        // The preferred method would be to use the video tag loop attribute
+        // Note, the preferred method for looping would be to use the 
+        // video tag loop attribute.
         // But QtWebKit doesn't support this. Neither does it support the
         // onended event, hence the setInterval()
         // In addition, setting the currentTime attribute to zero to restart
@@ -138,12 +99,73 @@ body {
         // Note, currently the background may go black between loops. Not 
         // desirable. Need to investigate using two <video>'s, and hiding/
         // preloading one, and toggle between the two when looping.
-        var vid = document.getElementById('video');
-        if(vid.ended||vid.currentTime+0.2>=vid.duration){
-            vid.load();
-            vid.play();
-        } 
+
+        if(current_video=='1'){
+            var vid = document.getElementById('video1');
+            var vid2 = document.getElementById('video2');
+        } else {
+            var vid = document.getElementById('video2');
+            var vid2 = document.getElementById('video1');
+        }
+        if(volume != null){
+            vid.volume = volume;
+            vid2.volume = volume;
+        }
+        switch(state){
+            case 'init':            
+                vid.src = path;
+                vid2.src = path;
+                if(loop == null) loop = false;
+                vid.looping = loop;
+                vid2.looping = loop;
+                vid.load();
+                break;
+            case 'load':
+                vid2.style.visibility = 'hidden';
+                vid2.load();
+                break;
+            case 'play':
+                vid.play();
+                vid.style.visibility = 'visible';
+                if(vid.looping){
+                    video_timer = setInterval(
+                        function() { 
+                            show_video('poll'); 
+                        }, 200);
+                }
+                break;
+            case 'pause':
+                if(video_timer!=null){
+                    clearInterval(video_timer);
+                    video_timer = null;
+                }
+                vid.pause();
+                break;
+            case 'stop':
+                show_video('pause');
+                vid.style.visibility = 'hidden';
+                break;
+            case 'poll':
+                if(vid.ended||vid.currentTime+0.2>vid.duration)
+                    show_video('swap');
+                break;
+            case 'swap':
+                show_video('pause');
+                if(current_video=='1')
+                    current_video = '2';
+                else
+                    current_video = '1';
+                show_video('play');
+                show_video('load');
+                break;
+            case 'close':
+                show_video('stop');
+                vid.src = '';
+                vid2.src = '';
+                break;
+        }
     }
+
     function show_image(src){
         var img = document.getElementById('image');
         img.src = src;
@@ -273,7 +295,10 @@ body {
 </head>
 <body>
 <img id="image" class="size" %s />
-<video id="video" class="size"></video>
+<video id="video1" class="size" style="visibility:hidden" autobuffer preload>
+</video>
+<video id="video2" class="size" style="visibility:hidden" autobuffer preload>
+</video>
 %s
 <div id="footer" class="footer"></div>
 <div id="black" class="size"></div>
@@ -424,8 +449,10 @@ def build_lyrics_css(item, webkitvers):
             outline = build_lyrics_outline_css(theme)
         if theme.display_shadow:
             if theme.display_outline and webkitvers < 534.3:
-                shadow = u'padding-left: %spx; padding-top: %spx ' % \
-                    (theme.display_shadow_size, theme.display_shadow_size)
+                shadow = u'padding-left: %spx; padding-top: %spx;' % \
+                    (int(theme.display_shadow_size) +
+                    (int(theme.display_outline_size) * 2), 
+                    theme.display_shadow_size)
                 shadow += build_lyrics_outline_css(theme, True)
             else:
                 lyricsmain += u' text-shadow: %s %spx %spx;' % \
@@ -485,13 +512,17 @@ def build_lyrics_format_css(theme, width, height):
         valign = u'middle'
     else:
         valign = u'top'
+    if theme.display_outline:
+        left_margin = int(theme.display_outline_size) * 2
+    else:
+        left_margin = 0
     lyrics = u'white-space:pre-wrap; word-wrap: break-word; ' \
         'text-align: %s; vertical-align: %s; font-family: %s; ' \
-        'font-size: %spt; color: %s; line-height: %d%%; ' \
-        'margin:0; padding:0; width: %spx; height: %spx; ' % \
+        'font-size: %spt; color: %s; line-height: %d%%; margin:0;' \
+        'padding:0; padding-left:%spx; width: %spx; height: %spx; ' % \
         (align, valign, theme.font_main_name, theme.font_main_proportion,
         theme.font_main_color, 100 + int(theme.font_main_line_adjustment),
-        width, height)
+        left_margin, width, height)
     if theme.display_outline:
         if webkit_version() < 534.3:
             lyrics += u' letter-spacing: 1px;'

openlp/core/ui/maindisplay.py

@@ -293,7 +293,7 @@ class MainDisplay(DisplayWidget):
         """
         log.debug(u'video')
         self.loaded = True
-        js = u'show_video("play", "%s", %s, true);' % \
+        js = u'show_video("init", "%s", %s, true); show_video("play");' % \
             (videoPath.replace(u'\\', u'\\\\'), str(float(volume)/float(10)))
         self.frame.evaluateJavaScript(js)
         return self.preview()