forked from rc/aircox
		
	add 'parts' system + script; work on player; create list_item.html template; update on_air
This commit is contained in:
		@ -19,6 +19,7 @@ a website in a fast and simple manner.
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
## Sections
 | 
			
		||||
* **Player**: player widget
 | 
			
		||||
* **Diffusions**: generic section list to retrieve diffusions by date, related
 | 
			
		||||
  or not to a specific Program. If wanted, can show schedule in the header of
 | 
			
		||||
  the section (with indication of reruns).
 | 
			
		||||
 | 
			
		||||
@ -1,3 +1,5 @@
 | 
			
		||||
import json
 | 
			
		||||
 | 
			
		||||
from django.utils import timezone as tz
 | 
			
		||||
from django.utils.translation import ugettext as _, ugettext_lazy
 | 
			
		||||
 | 
			
		||||
@ -5,10 +7,12 @@ import aircox.programs.models as programs
 | 
			
		||||
import aircox.cms.models as cms
 | 
			
		||||
import aircox.cms.routes as routes
 | 
			
		||||
import aircox.cms.sections as sections
 | 
			
		||||
import aircox.cms.decorators as decorators
 | 
			
		||||
 | 
			
		||||
import aircox.website.models as models
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@decorators.parts
 | 
			
		||||
class Player(sections.Section):
 | 
			
		||||
    """
 | 
			
		||||
    Display a player that is cool.
 | 
			
		||||
@ -20,8 +24,9 @@ class Player(sections.Section):
 | 
			
		||||
    """
 | 
			
		||||
    #default_sounds
 | 
			
		||||
 | 
			
		||||
    @staticmethod
 | 
			
		||||
    def on_air():
 | 
			
		||||
    @decorators.part
 | 
			
		||||
    @decorators.template(template_name = 'aircox/cms/list_item.html')
 | 
			
		||||
    def on_air(cl, request):
 | 
			
		||||
        """
 | 
			
		||||
        View that return what is on air formatted in JSON.
 | 
			
		||||
        """
 | 
			
		||||
@ -31,19 +36,27 @@ class Player(sections.Section):
 | 
			
		||||
        )
 | 
			
		||||
 | 
			
		||||
        if not qs or not qs[0].is_date_in_my_range():
 | 
			
		||||
            return None
 | 
			
		||||
            return ''
 | 
			
		||||
 | 
			
		||||
        qs = qs[0]
 | 
			
		||||
        post = models.Diffusion.objects.filter(related = qs)
 | 
			
		||||
        if not post:
 | 
			
		||||
            post = models.Program.objects.filter(related = qs.program)
 | 
			
		||||
 | 
			
		||||
        if not post:
 | 
			
		||||
            post = ListItem(title = qs.program.name)
 | 
			
		||||
        return post
 | 
			
		||||
        else:
 | 
			
		||||
            post = post[0]
 | 
			
		||||
 | 
			
		||||
        return {
 | 
			
		||||
            'item': post,
 | 
			
		||||
            'list': sections.List,
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return json.dumps({ 'title': post.title, 'url': post.url() })
 | 
			
		||||
 | 
			
		||||
    def get_context_data(self, *args, **kwargs):
 | 
			
		||||
        context = super().get_context_data(*args, **kwargs)
 | 
			
		||||
 | 
			
		||||
        context.update({
 | 
			
		||||
            'base_template': 'aircox/cms/section.html',
 | 
			
		||||
            'live_streams': self.live_streams,
 | 
			
		||||
 | 
			
		||||
@ -56,14 +56,14 @@
 | 
			
		||||
 | 
			
		||||
        .playlists nav a {
 | 
			
		||||
            padding: 0.2em;
 | 
			
		||||
            cursor: pointer;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .playlists nav > *[selected],
 | 
			
		||||
        .playlists .item[selected] {
 | 
			
		||||
            color: black;
 | 
			
		||||
            border-top-right-radius: 0.2em;
 | 
			
		||||
            background-color: rgba(0, 126, 223, 0.8);
 | 
			
		||||
        }
 | 
			
		||||
            .playlists nav > *[selected] {
 | 
			
		||||
                color: black;
 | 
			
		||||
                border-top-right-radius: 0.2em;
 | 
			
		||||
                background-color: rgba(0, 126, 223, 0.8);
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
        .playlists ul:not([selected]) {
 | 
			
		||||
            display: none;
 | 
			
		||||
@ -80,10 +80,6 @@
 | 
			
		||||
        vertical-align: center;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .playlist .item .title {
 | 
			
		||||
        color: #007EDF;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .playlist .item .info {
 | 
			
		||||
        float: right;
 | 
			
		||||
        font-size: 0.8em;
 | 
			
		||||
@ -94,6 +90,9 @@
 | 
			
		||||
        font-weight: bold;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .playlist .item[selected] .title {
 | 
			
		||||
        color: #007EDF;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
</style>
 | 
			
		||||
<div id="player">
 | 
			
		||||
@ -139,6 +138,7 @@ function Playlist(id, name, items) {
 | 
			
		||||
        player.select_playlist(self);
 | 
			
		||||
        event.preventDefault();
 | 
			
		||||
    }, true);
 | 
			
		||||
    this.tab.className = 'tab';
 | 
			
		||||
    this.tab.innerHTML = name;
 | 
			
		||||
 | 
			
		||||
    player.playlists.appendChild(this.playlist);
 | 
			
		||||
@ -163,10 +163,12 @@ Playlist.prototype = {
 | 
			
		||||
        else
 | 
			
		||||
            self.playlist.appendChild(item);
 | 
			
		||||
 | 
			
		||||
        info.item = item;
 | 
			
		||||
        item.info = info;
 | 
			
		||||
 | 
			
		||||
        item.querySelector('.title').innerHTML = info.title;
 | 
			
		||||
        item.querySelector('.detail').href = info.url;
 | 
			
		||||
        item.querySelector('.info').innerHTML = info.info || '';
 | 
			
		||||
        item.info = info;
 | 
			
		||||
 | 
			
		||||
        item.addEventListener('click', function(event) {
 | 
			
		||||
            if(event.target.className.indexOf('detail') != -1)
 | 
			
		||||
@ -174,7 +176,6 @@ Playlist.prototype = {
 | 
			
		||||
            player.select(event.currentTarget.info);
 | 
			
		||||
            event.preventDefault();
 | 
			
		||||
        }, true);
 | 
			
		||||
 | 
			
		||||
        this.items.push(info);
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
@ -228,6 +229,16 @@ player = {
 | 
			
		||||
        this.select(this.live.items[0], false)
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /// update "on_air"
 | 
			
		||||
    get_on_air: function() {
 | 
			
		||||
      part = Part('').select({
 | 
			
		||||
          'title': '.title',
 | 
			
		||||
          'url': 'a',
 | 
			
		||||
      }, function(r) {
 | 
			
		||||
        document.title = r.title;
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /// play a given item { title, src }
 | 
			
		||||
    play: function() {
 | 
			
		||||
        var player = this.player;
 | 
			
		||||
@ -243,35 +254,45 @@ player = {
 | 
			
		||||
        }
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /// update info on the player from the given item
 | 
			
		||||
    set_info: function(item) {
 | 
			
		||||
        var player = this.player;
 | 
			
		||||
        player.querySelectorAll('#simple-player .title')[0]
 | 
			
		||||
            .innerHTML = item.title;
 | 
			
		||||
        player.querySelectorAll('.playlists')[0]
 | 
			
		||||
            .setAttribute('playlist', item.playlist);
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    /// select the current track to play, and start playing it
 | 
			
		||||
    select: function(item, play = true) {
 | 
			
		||||
        var audio = this.audio;
 | 
			
		||||
        var player = this.player;
 | 
			
		||||
 | 
			
		||||
        audio.pause();
 | 
			
		||||
        audio.src = item.stream;
 | 
			
		||||
        audio.load()
 | 
			
		||||
 | 
			
		||||
        self.item = item;
 | 
			
		||||
        this.set_info(item);
 | 
			
		||||
        if(this.item && this.item.item)
 | 
			
		||||
            this.item.item.removeAttribute('selected')
 | 
			
		||||
 | 
			
		||||
        this.item = item;
 | 
			
		||||
 | 
			
		||||
        if(item.item)
 | 
			
		||||
            console.log(item.item)
 | 
			
		||||
            item.item.setAttribute('selected', 'true');
 | 
			
		||||
 | 
			
		||||
        player.querySelectorAll('#simple-player .title')[0]
 | 
			
		||||
            .innerHTML = item.title;
 | 
			
		||||
        player.querySelectorAll('.playlists')[0]
 | 
			
		||||
            .setAttribute('playlist', item.playlist);
 | 
			
		||||
 | 
			
		||||
        if(play)
 | 
			
		||||
            this.play();
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /// select current playlist to show
 | 
			
		||||
    select_playlist: function(playlist) {
 | 
			
		||||
        v = this.player.querySelectorAll('.playlists *[selected]');
 | 
			
		||||
    /// remove selection using the given selector.
 | 
			
		||||
    __unselect: function (selector) {
 | 
			
		||||
        v = this.player.querySelectorAll(selector);
 | 
			
		||||
        if(v)
 | 
			
		||||
            for(var i = 0; i < v.length; i++)
 | 
			
		||||
                v[i].removeAttribute('selected');
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /// select current playlist to show
 | 
			
		||||
    select_playlist: function(playlist) {
 | 
			
		||||
        this.__unselect('.playlists nav .tab[selected]');
 | 
			
		||||
        this.__unselect('.playlists .playlist[selected]');
 | 
			
		||||
 | 
			
		||||
        self.playlist = playlist
 | 
			
		||||
        playlist.playlist.setAttribute('selected', 'true');
 | 
			
		||||
 | 
			
		||||
@ -22,27 +22,14 @@ function update_schedule(event) {
 | 
			
		||||
        return;
 | 
			
		||||
    console.log(schedule.className)
 | 
			
		||||
 | 
			
		||||
    // xhr
 | 
			
		||||
    var xhr = new XMLHttpRequest();
 | 
			
		||||
    xhr.onreadystatechange = function() {
 | 
			
		||||
        if(xhr.readyState != 4 || xhr.status != 200 && xhr.status)
 | 
			
		||||
            return;
 | 
			
		||||
 | 
			
		||||
        var obj = document.implementation.createHTMLDocument('result');
 | 
			
		||||
        obj.documentElement.innerHTML = xhr.responseText;
 | 
			
		||||
        obj = obj.documentElement;
 | 
			
		||||
 | 
			
		||||
        schedule.querySelector('header').innerHTML =
 | 
			
		||||
            obj.querySelector('header').innerHTML;
 | 
			
		||||
 | 
			
		||||
        schedule.querySelector('.content').innerHTML =
 | 
			
		||||
            obj.querySelector('.content').innerHTML;
 | 
			
		||||
    }
 | 
			
		||||
    fields = [ {% for field in list.fields %}"fields={{ field }}",{% endfor %} ];
 | 
			
		||||
    fields = fields.join('&');
 | 
			
		||||
 | 
			
		||||
    xhr.open('GET', url + '?embed=1&' + fields, true);
 | 
			
		||||
    xhr.send();
 | 
			
		||||
    part = new Part(url, 'embed&' + fields);
 | 
			
		||||
    part.get().select({
 | 
			
		||||
        'header': ['header', 'innerHTML', true],
 | 
			
		||||
        'content': ['.content', 'innerHTML', true],
 | 
			
		||||
    }).map(schedule).send();
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<a href="{{ prev_week }}" onclick="update_schedule(event); return true;"><</a>
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user