[Vertigo M&C] : disable video meanwhile countdown

diff --git a/app/themes/base/static/src/js/modules/live-streaming-counter.js b/app/themes/base/static/src/js/modules/live-streaming-counter.js
index 3b6f4c24608ebc9247f6a8fdeeeec7d31b471956..94270dd7ebeec0ac946d9c86f10669b428ac20eb 100644 (file)
--- a/app/themes/base/static/src/js/modules/live-streaming-counter.js
+++ b/app/themes/base/static/src/js/modules/live-streaming-counter.js
@@ -34,7 +34,7 @@ function cleanCounter(timer) {
     $('.countdown-overlay').show();
 }
 
-function CountDownTimer(json_event, id, video_id)
+function CountDownTimer(json_event, id, video_id, video_container)
     {
 
         var curr_event;
@@ -48,8 +48,10 @@ function CountDownTimer(json_event, id, video_id)
         var timer;
         var distance_out = 1;
         var distance_in = 1;
+        var video_html;
 
         function init() {
+
             if (Object.keys(json_event).length > 0 ) {
                 curr_event = json_event[curr_event_index];
                 begin = moment(new Date(curr_event.begin));
@@ -65,24 +67,27 @@ function CountDownTimer(json_event, id, video_id)
             var distance_out = begin.diff(now);
             updateDisplay(distance_out);
             if (distance_out < 0) {
-                //clearInterval(timer);
-                // $('#countdown-title').html('<br /><br />');
-                // $('#'+id).html('<br />');
-                // $('#live').html('- Live !');
-                //switchVideo(video_id, video_url);
+                if ($(video_container).is(':empty')){
+                    $(video_container).html(video_html);
+                }
                 $('.countdown-overlay').hide();
                 hideRemaining();
+                distance_out = 0;
             }
 
         }
 
         function hideRemaining() {
-            var now = moment().tz("Europe/Paris").format(); //moment(new Date());
+            var now = moment().tz("Europe/Paris").format();
             var distance_in = end.diff(now);
             if (distance_in < 0) {
                 nextEvent();
                 showRemaining();
+                if (! $(video_container).is(':empty')){
+                    $(video_container).empty();
+                }
                 $('.countdown-overlay').show();
+                distance_in = 0;
             }
         }
 
@@ -111,19 +116,21 @@ function CountDownTimer(json_event, id, video_id)
         }
 
         function start() {
-                // out of event
-                if (distance_out > 0) {
-                    showRemaining();
-                }
+            // out of event
+            if (distance_out > 0) {
+                showRemaining();
+            }
 
-                // meanwhile an event
-                if (distance_in > 0) {
-                    hideRemaining();
-                }
+            // meanwhile an event
+            if (distance_in > 0) {
+                hideRemaining();
+            }
 
         }
 
         // initialize
+        video_html = $(video_container).html();
+        $(video_container).empty();
         init();
     }
 

diff --git a/app/themes/base/templates/media/live_streaming/live_streaming_detail.html b/app/themes/base/templates/media/live_streaming/live_streaming_detail.html
index 95bc7305462c94073a8808b8c06855c3e14ca66f..b0265ed536fd397818d3839f6f5aeb3d071e1248 100644 (file)
--- a/app/themes/base/templates/media/live_streaming/live_streaming_detail.html
+++ b/app/themes/base/templates/media/live_streaming/live_streaming_detail.html
@@ -18,25 +18,25 @@
 {% endblock %}
 
 {% block page_content %}
-
-    {% if type == "youtube" %}
-        {% if object.youtube_id %}
-            <p class="intro">If YouTube streaming is not working, try HTML5 version by <a href="{% url 'organization-streaming-detail' slug 'html5' %}" title="">clicking here</a></p>
-            <iframe src="https://www.youtube.com/embed/{{ object.youtube_id }}?ecver=2" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
-        {% else %}
-            <p>Please fill youtube id</p>
-        {% endif %}
-    {% elif type == "html5" %}
-        {% if object.html5_url %}
-            <p class="intro">If HTML5 streaming is not working, try Youtube version by <a href="{% url 'organization-streaming-detail' slug 'youtube' %}" title="">clicking here</a></p>
-            <video id="live-streaming" width="100%" height="100%"  controls autoplay>
-                <source src="{{ object.html5_url }}" type="video/webm">
-            </video>
-        {% else %}
-            <p>Please fill html5 live streaming url</p>
+    <div id="video_container">
+        {% if type == "youtube" %}
+            {% if object.youtube_id %}
+                <p class="intro">If YouTube streaming is not working, try HTML5 version by <a href="{% url 'organization-streaming-detail' slug 'html5' %}" title="">clicking here</a></p>
+                <iframe src="https://www.youtube.com/embed/{{ object.youtube_id }}?ecver=2" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
+            {% else %}
+                <p>Please fill youtube id</p>
+            {% endif %}
+        {% elif type == "html5" %}
+            {% if object.html5_url %}
+                <p class="intro">If HTML5 streaming is not working, try Youtube version by <a href="{% url 'organization-streaming-detail' slug 'youtube' %}" title="">clicking here</a></p>
+                <video id="live-streaming" width="100%" height="100%"  controls autoplay>
+                    <source src="{{ object.html5_url }}" type="video/webm">
+                </video>
+            {% else %}
+                <p>Please fill html5 live streaming url</p>
+            {% endif %}
         {% endif %}
-    {% endif %}
-
+    </div>
     <div class="countdown-overlay">
         <div id="countdown-title"></div>
         <div id="countdown"></div>
@@ -49,6 +49,6 @@
 
     <script type="text/javascript">
         var json_event = {{ json_event|safe }}
-        CountDownTimer(json_event, 'countdown', 'live-streaming');
+        CountDownTimer(json_event, 'countdown', 'live-streaming', '#video_container');
     </script>
 {% endblock %}