[Vertigo M&C] live streaming > url to switch

diff --git a/app/organization/media/urls.py b/app/organization/media/urls.py
index abdd7787de2b965a1bc67d166d670dcf841dfea0..7a50bd6bf95734d0153eef72d218e6f37c1e9cf2 100644 (file)
--- a/app/organization/media/urls.py
+++ b/app/organization/media/urls.py
@@ -40,5 +40,5 @@ urlpatterns = [
     url("^playlists/list/(?P<type>.*)$", PlaylistListView.as_view(), name="organization-playlist-list"),
     url("^playlists/overlay/(?P<slug>.*)/$", PlaylistOverlayView.as_view(), name="organization-playlist-overlay"),
     url("^playlist-media-autocomplete/$",  permission_required('playlist.can_edit')(PlayListMediaView.as_view()), name='media-autocomplete'),
-    url("^streamings/(?P<slug>.*)/detail/$", LiveStreamingDetailView.as_view(), name="organization-streaming-detail"),
+    url("^streamings/(?P<slug>.*)/(?P<type>.*)/detail/$", LiveStreamingDetailView.as_view(), name="organization-streaming-detail"),
 ]

diff --git a/app/organization/media/views.py b/app/organization/media/views.py
index 0f1c8d2534ffcc7c3b3b44bd59fa78832543c3c6..8b834d3b248c2eefa65c621429bac9581e824f3d 100644 (file)
--- a/app/organization/media/views.py
+++ b/app/organization/media/views.py
@@ -137,5 +137,15 @@ class LiveStreamingDetailView(SlugMixin, DetailView):
 
     def get_context_data(self, **kwargs):
         context = super(LiveStreamingDetailView, self).get_context_data(**kwargs)
+        print("LIVE_STREAMING_TYPE_CHOICES", LIVE_STREAMING_TYPE_CHOICES)
+        type_choices = []
+        for st in LIVE_STREAMING_TYPE_CHOICES:
+            type_choices.append(st[0])
+        if not self.kwargs['type'] in type_choices:
+            context['type'] = "html5"
+        else :
+            context['type'] = self.kwargs['type']
+
+        context['slug'] = self.object.slug        
         context['next_event'] = Event.objects.filter(location=self.object.event_location).filter(start__gt=datetime.now()).first()
         return context

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 323b6e1545c69eff2af66e0221dbaa3496610242..ee0f16530f8e6dc19a98fc907f49f30dd45e100e 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
@@ -32,27 +32,31 @@ function cleanCounter() {
     $('#countdown').html('<br />');
 }
 
-function CountDownTimer(dt, id, video_id/*, video_url*/)
+function CountDownTimer(dt_begin, dt_end, id, video_id/*, video_url*/)
     {
-        var end = new Date(dt);
+        var begin = new Date(dt_begin);
+        var end = new Date(dt_end);
 
         var _second = 1000;
         var _minute = _second * 60;
         var _hour = _minute * 60;
         var _day = _hour * 24;
         var timer;
+        var now = new Date();
+
 
         function showRemaining() {
 
-            var now = new Date();
-            var distance = end - now;
+            var distance = begin - now;
 
             if (distance < 0) {
                 clearInterval(timer);
-                $('#countdown-title').html('<br /><br />');
-                $('#'+id).html('<br />');
-                $('#live').html('- Live !');
+                // $('#countdown-title').html('<br /><br />');
+                // $('#'+id).html('<br />');
+                // $('#live').html('- Live !');
                 //switchVideo(video_id, video_url);
+                $('.countdown-overlay').hide()
+                nextEvent()
                 return;
             }
 
@@ -70,6 +74,18 @@ function CountDownTimer(dt, id, video_id/*, video_url*/)
 
         }
 
+        function nextEvent() {
+            var distance = end - now;
+
+            if (distance < 0) {
+                $('.countdown-overlay').show()
+
+            }
+        }
+
+        // calculer le diff avec le prochain évènement
+        // réactiver le countdown
+
         timer = setInterval(showRemaining, 1000);
     }
 

diff --git a/app/themes/base/static/src/sass/modules/_live-streaming.scss b/app/themes/base/static/src/sass/modules/_live-streaming.scss
index 8fb6e4464fc0436c0d89081b9c2f170fe6e4649a..a66cc381c69a14348bfe604fbba0e592f33163fa 100644 (file)
--- a/app/themes/base/static/src/sass/modules/_live-streaming.scss
+++ b/app/themes/base/static/src/sass/modules/_live-streaming.scss
@@ -22,6 +22,9 @@ $module: ".page--live-streaming";
 
 #{$module} {
 
+    .intro {
+        margin-bottom : 30px;
+    }
     & .page__content {
 
         text-align: center;
@@ -32,20 +35,28 @@ $module: ".page--live-streaming";
 
     }
 
-    .overlay {
-        background: #FFFFFF;
-        position:relative;
-        top:-260px;
-        z-index:90;
+    .countdown-overlay {
+        background: #000000 none repeat scroll 0 0;
         color: white;
-        font-size:1.3em;
+        font-size: 2em;
         height: 720px;
+        left: 70px;
+        position: absolute;
+        top: 60px;
+        width: 1280px;
+        z-index: 90;
+        vertical-align: auto;
+        font-family: "Oswald",sans-serif;
+    }
+
+    #countdown-title {
+        margin-top: 5em;
     }
 
     #countdown {
         margin-top: 1em;
         font-weight: bold;
-        color: red;
+        color: white;
     }
 
 

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 11a142e6e3592049034890c8126859910177b557..486e9f6667486dfeb7aacdd0b70e9914577e801e 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,16 +18,21 @@
 {% endblock %}
 
 {% block page_content %}
-    {% if object.type = "youtube" %}
+
+    {% 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></>
+
             <div style="position:relative;height:0;padding-bottom:75.0%">
-                <iframe src="https://www.youtube.com/embed/{{ object.youtube_id }}?ecver=2" width="1280" height="720" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen></iframe>
+                <iframe src="https://www.youtube.com/embed/{{ object.youtube_id }}?ecver=2" width="1280" height="720" frameborder="0" allowfullscreen></iframe>
             </div>
         {% else %}
             <p>Please fill youtube id</p>
         {% endif %}
-    {% elif object.type = "html5" %}
+    {% 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></>
+
             <video id="live-streaming" width="1280" height="720"  controls autoplay>
                 <source src="{{ object.html5_url }}" type="video/webm">
             </video>
@@ -36,7 +41,7 @@
         {% endif %}
     {% endif %}
 
-    <div class="overlay">
+    <div class="countdown-overlay">
         <div id="countdown-title"></div>
         <div id="countdown"></div>
     </div>
@@ -47,7 +52,8 @@
     <script src="{% static "src/js/modules/live-streaming-counter.js" %}"></script>
 
     <script type="text/javascript">
-        var countdowndate = '{{ next_event.start|format_iso }}';
-        CountDownTimer(countdowndate, 'countdown', 'live-streaming');
+        var d_begin = '{{ next_event.start|format_iso }}';
+        var d_end = '{{ next_event.end|format_iso }}';
+        CountDownTimer(d_begin, d_end, 'countdown', 'live-streaming');
     </script>
 {% endblock %}