add 'parts' system + script; work on player; create list_item.html template; update on_air

This commit is contained in:
bkfox
2016-06-14 03:33:26 +02:00
parent 5da8762f77
commit 3936580275
12 changed files with 466 additions and 144 deletions

View File

@ -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).

View File

@ -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,

View File

@ -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');

View File

@ -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;">&lt;</a>