work on player

aircox/models.py

@@ -999,7 +999,10 @@ class Sound(Nameable):
             return None
 
         import mutagen
+        try:
             meta = mutagen.File(self.path)
+        except:
+            meta = {}
 
         def get_meta(key, cast=str):
             value = meta.get(key)

aircox_cms/models.py

@@ -550,7 +550,7 @@ class DiffusionPage(Publication):
         sound = self.diffusion.get_archives() \
                     .filter(public = True).first()
         if sound:
-            sound.detail_url = self.detail_url
+            sound.detail_url = self.url
         return sound
 
     def get_podcasts(self):
@@ -682,6 +682,11 @@ class LogsPage(DatedListPage):
         help_text = _('maximum days in the past allowed to be shown. '
                       '0 means no limit')
     )
+    reverse = models.BooleanField(
+        _('reverse list'),
+        default=False,
+        help_text = _('print logs in ascending order by date'),
+    )
 
     class Meta:
         verbose_name = _('Logs')
@@ -691,6 +696,7 @@ class LogsPage(DatedListPage):
         MultiFieldPanel([
             FieldPanel('station'),
             FieldPanel('age_max'),
+            FieldPanel('reverse'),
         ], heading=_('Configuration')),
     ]
 
@@ -718,7 +724,9 @@ class LogsPage(DatedListPage):
         for date in context['nav_dates']['dates']:
             items = [ SectionLogsList.as_item(item)
                         for item in self.station.on_air(date = date) ]
-            logs.append((date, items))
+            logs.append(
+                (date, reversed(items) if self.reverse else items)
+            )
         return logs
 
 

aircox_cms/static/aircox_cms/css/layout.css

@@ -323,6 +323,14 @@ ul.list {
         display: inline;
     }
 
+    .player .playlist .duration {
+       text-align: right;
+    }
+
+    .player .playlist progress {
+        width: 100%;
+    }
+
 
 .player .item[selected] {
     border-left: 1px #007EDF solid;
@@ -345,7 +353,6 @@ ul.list {
         max-height: 2.0em;
     }
 
-
     .player:not([state]) .item[selected] .button > img:not(.play),
     .player[state="paused"] .item[selected] .button > img:not(.play),
     .player[state="playing"] .item[selected] .button > img:not(.pause),

aircox_cms/static/aircox_cms/js/player.js

@@ -36,6 +36,7 @@ Sound.prototype = {
     on_air: false,
 
     item: undefined,
+    position_item: undefined,
 
     get seekable() {
         return this.duration != undefined;
@@ -59,6 +60,7 @@ Sound.prototype = {
 
         item.sound = this;
         this.item = item;
+        this.position_item = item.querySelector('.position');
 
         // events
         var self = this;
@@ -164,9 +166,9 @@ Playlist.prototype = {
         sound.item.setAttribute('selected', 'true');
 
         if(!sound.on_air)
-            sound.item.querySelector('.content').insertBefore(
-                this.player.progress.item,
-                sound.item.querySelector('.content .duration')
+            sound.item.querySelector('.content').parentNode.appendChild(
+                this.player.progress.item //,
+                // sound.item.querySelector('.content .duration')
             )
 
         if(sound.seekable)
@@ -217,6 +219,7 @@ Playlist.prototype = {
     },
 }
 
+var ActivePlayer = null;
 
 function Player(id, on_air_url, show_cover) {
     this.id = id;
@@ -253,6 +256,10 @@ Player.prototype = {
     sound: undefined,
     on_air_url: undefined,
 
+    get sound() {
+        return this.playlist.sound;
+    },
+
     init_events: function() {
         var self = this;
 
@@ -265,19 +272,20 @@ Player.prototype = {
         function update_info() {
             var progress = self.progress;
             var pos = self.audio.currentTime;
+            var position = self.sound.position_item;
 
             // progress
-            if(!self.sound || !self.sound.seekable ||
+            if(!self.audio || !self.audio.seekable ||
                     !pos || self.audio.duration == Infinity)
             {
-                progress.duration.innerHTML = '';
+                position.innerHTML = '';
                 progress.bar.value = 0;
                 return;
             }
 
             progress.bar.value = pos;
             progress.bar.max = self.audio.duration;
-            progress.duration.innerHTML = duration_str(pos);
+            position.innerHTML = duration_str(pos);
         }
 
         // audio
@@ -302,7 +310,7 @@ Player.prototype = {
         this.audio.addEventListener('ended', function() {
             self.player.removeAttribute('state');
             if(!self.controls.single.checked)
-                self.next(true);
+                self.playlist.next(true);
         }, false);
 
         // progress
@@ -318,7 +326,8 @@ Player.prototype = {
                return;
 
             var pos = time_from_progress(event);
-            self.progress.duration.innerHTML = duration_str(pos);
+            var position = self.sound.position_item;
+            position.innerHTML = duration_str(pos);
         }, false);
     },
 
@@ -368,6 +377,11 @@ Player.prototype = {
     },
 
     play: function() {
+        if(ActivePlayer && ActivePlayer != this) {
+            ActivePlayer.stop();
+        }
+        ActivePlayer = this;
+
         if(this.audio.paused)
             this.audio.play();
         else

aircox_cms/templates/aircox_cms/sections/section_player.html

@@ -7,7 +7,7 @@
 </div>
 
 <script>
-var player = new Player('player', '{% url 'aircox.on_air' %}');
+var player = new Player('player', '{% url 'aircox.on_air' %}', true);
 var sound = player.playlist.add(
     new Sound(
         '{{ self.live_title }}',

aircox_cms/templates/aircox_cms/snippets/player.html

@@ -22,6 +22,7 @@
         <div class="flex_item">
             <h3 class="title flex_item">{{ self.live_title }}</h3>
             <div class="content flex_row">
+                <span class="info position flex_item"></span>
                 <span class="info duration flex_item"></span>
                 <span class="actions">
                     <a class="action add" title="{% trans "add to the player" %}">+</a>
@@ -34,10 +35,10 @@
 </div>
 
 <div class="controls">
-    <span class="progress">
-        <span class="info duration"></span>
+    <div class="progress">
+        <!-- <div class="info duration"></span> -->
         <progress class="flex_item progress" value="0" max="1"></progress>
-    </span>
+    </div>
 
     <input type="checkbox" class="single" id="player_single_mode">
     <label for="player_single_mode" class="info"