forked from rc/aircox
352 lines
8.8 KiB
HTML
352 lines
8.8 KiB
HTML
{% extends 'aircox/cms/list.html' %}
|
|
|
|
{% load staticfiles %}
|
|
{% load i18n %}
|
|
|
|
{% block header %}
|
|
<style>
|
|
.player-box {
|
|
padding-top: 0.2em;
|
|
}
|
|
|
|
.player-box * {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.player-box h3, #player h2 {
|
|
display: inline-block;
|
|
font-size: 0.9em;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.player-button {
|
|
display: inline-block;
|
|
height: 1.2em;
|
|
width: 1.2em;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
margin-right: 0.4em;
|
|
}
|
|
|
|
.player-button img {
|
|
height: inherit;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#player[play] .player-button img {
|
|
margin-left: -100%;
|
|
}
|
|
|
|
#player .on_air {
|
|
padding: 0.2em;
|
|
margin: 0.2em 0em;
|
|
}
|
|
|
|
#player .on_air .title {
|
|
font-size: 0.8em;
|
|
display: inline;
|
|
}
|
|
|
|
#player .on_air a {
|
|
float: right;
|
|
}
|
|
|
|
|
|
.playlists {
|
|
}
|
|
|
|
.playlists ul:not([selected]) {
|
|
display: none;
|
|
}
|
|
|
|
.playlists nav a.close {
|
|
float: right;
|
|
}
|
|
|
|
.playlist {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 15em;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.playlist .item > * {
|
|
display: inline;
|
|
margin: 0.2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.playlist .item .info {
|
|
float: right;
|
|
}
|
|
|
|
.playlist .item a {
|
|
float: right;
|
|
}
|
|
|
|
</style>
|
|
<div id="player">
|
|
<li class='item' style="display: none;">
|
|
<h2 class="title"></h2>
|
|
<a class="url">+</a>
|
|
<div class="info"></div>
|
|
</li>
|
|
<div class="player-box">
|
|
<div id="embed-player">
|
|
</div>
|
|
<div id="simple-player">
|
|
<audio preload="metadata">
|
|
Your browser does not support the <code>audio</code> element.
|
|
{% for stream in live_streams %}
|
|
<source src="{{ stream.detail_url }}">
|
|
{% endfor %}
|
|
</audio>
|
|
|
|
<span class="player-button" onclick="player.play()">
|
|
<img src="{% static "aircox/website/player_button.png" %}"
|
|
alt="{% trans "play audio" %}">
|
|
</span>
|
|
|
|
<h3 class="title"></h3>
|
|
|
|
<div class='item on_air'>
|
|
<h2 class="title"></h2>
|
|
<a class="url">+</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="playlists">
|
|
<nav>
|
|
<a onclick="player.select_playlist()" class="close"
|
|
title="{% trans "close" %}">✖</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Create a Playlist:
|
|
// * name: name of the playlist, used for container id and storage
|
|
// * tab: text to put in the tab
|
|
// * items: list of items to append
|
|
// * store: store the playlist in localStorage
|
|
function Playlist(name, tab, items, store = false) {
|
|
this.name = name;
|
|
this.store = store;
|
|
|
|
var self = this;
|
|
this.playlist = document.createElement('ul');
|
|
this.playlist.setAttribute('id', 'playlist-' + name );
|
|
this.playlist.className = 'playlist list';
|
|
|
|
this.tab = document.createElement('a');
|
|
this.tab.addEventListener('click', function(event) {
|
|
player.select_playlist(self);
|
|
event.preventDefault();
|
|
}, true);
|
|
this.tab.className = 'tab';
|
|
this.tab.innerHTML = tab;
|
|
|
|
player.playlists.appendChild(this.playlist);
|
|
player.playlists.querySelector('nav').appendChild(this.tab);
|
|
|
|
this.items = [];
|
|
if(store)
|
|
this.load()
|
|
if(items)
|
|
this.add_list(items);
|
|
}
|
|
|
|
Playlist.prototype = {
|
|
items: undefined,
|
|
|
|
/// Create an item and add to the given container [ = this.playlist ]
|
|
add: function (info, container) {
|
|
var item = player.player.querySelector('.item');
|
|
item = item.cloneNode(true);
|
|
item.removeAttribute('style');
|
|
|
|
if(container)
|
|
container.appendChild(item);
|
|
else
|
|
this.playlist.appendChild(item);
|
|
|
|
info.item = item;
|
|
item.info = info;
|
|
|
|
item.querySelector('.title').innerHTML = info.title;
|
|
item.querySelector('.url').href = info.url;
|
|
item.querySelector('.info').innerHTML = info.info || '';
|
|
|
|
if(info.class)
|
|
item.className += " " + info.class;
|
|
|
|
if(info.stream || info.embed)
|
|
item.addEventListener('click', function(event) {
|
|
if(event.target.className.indexOf('url') != -1)
|
|
return;
|
|
player.select(event.currentTarget.info);
|
|
event.preventDefault();
|
|
}, true);
|
|
this.items.push(info);
|
|
|
|
if(this.store)
|
|
this.save()
|
|
},
|
|
|
|
/// Add a list of items (optimized)
|
|
add_list: function (items) {
|
|
container = document.createDocumentFragment();
|
|
for(var i = 0; i < items.length; i++)
|
|
this.add(items[i], container);
|
|
this.playlist.appendChild(container);
|
|
},
|
|
|
|
/// Save a playlist to local storage
|
|
save: function() {
|
|
pl = []
|
|
for(var i = 0; i < this.items.length; i++)
|
|
info = Object.assign({}, this.items[i])
|
|
info.item = undefined;
|
|
pl.push(info);
|
|
|
|
localStorage.setItem('playlist.' + self.name,
|
|
JSON.stringify(pl))
|
|
},
|
|
|
|
/// Load playlist from local storage
|
|
load: function() {
|
|
pl = localStorage.getItem('playlist.' + self.name)
|
|
if(pl)
|
|
this.add_list(JSON.parse(pl));
|
|
},
|
|
|
|
}
|
|
|
|
|
|
player = {
|
|
/// main container of the player
|
|
player: undefined,
|
|
/// <audio> container
|
|
audio: undefined,
|
|
|
|
/// init player
|
|
init: function(id) {
|
|
this.player = document.getElementById(id);
|
|
this.audio = this.player.querySelector('audio');
|
|
this.playlists = this.player.querySelector('.playlists');
|
|
this.live = new Playlist(
|
|
'live',
|
|
"☰ {% trans "live" %}",
|
|
[ {% for sound in live_streams %}
|
|
{ title: "{{ sound.title }}",
|
|
url: "{{ sound.url }}",
|
|
stream: "{{ sound.url }}",
|
|
info: "{{ sound.info }}",
|
|
}, {% endfor %} ]
|
|
);
|
|
this.recents = new Playlist(
|
|
'recents', '☀ {% trans "recents" %}',
|
|
[ {% for sound in last_sounds %}
|
|
{ title: "{{ sound.title }}",
|
|
url: "{{ sound.url }}",
|
|
{% if sound.related.embed %}
|
|
embed: "{{ sound.related.embed }}",
|
|
{% else %}
|
|
stream: "{{ MEDIA_URL }}{{ sound.related.url|safe }}",
|
|
{% endif %}
|
|
info: "{{ sound.related.duration|date:"i:s" }}",
|
|
}, {% endfor %} ]
|
|
);
|
|
this.favorite = new Playlist(
|
|
'favorite', '♥ {% trans "favorites" %}', null, true);
|
|
this.playlist = new Playlist(
|
|
'playlist', '★ {% trans "playlist" %}', null, true);
|
|
|
|
this.select(this.live.items[0], false)
|
|
this.update_on_air();
|
|
},
|
|
|
|
/// update on air informations
|
|
update_on_air: function() {
|
|
part = Part('{% url "exp.player.on_air" %}').get()
|
|
.select({
|
|
title: '.title',
|
|
url: ['.url', 'href'],
|
|
})
|
|
.map(this.player.querySelector('.on_air'))
|
|
.send();
|
|
|
|
window.setTimeout(function() {
|
|
player.update_on_air();
|
|
}, 60000*5);
|
|
},
|
|
|
|
/// play a given item { title, src }
|
|
play: function() {
|
|
var player = this.player;
|
|
var audio = this.audio;
|
|
|
|
if(audio.paused) {
|
|
audio.play();
|
|
player.setAttribute('play', 'true');
|
|
}
|
|
else {
|
|
audio.pause();
|
|
player.removeAttribute('play');
|
|
}
|
|
},
|
|
|
|
/// 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()
|
|
|
|
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();
|
|
},
|
|
|
|
/// 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
|
|
if(playlist) {
|
|
playlist.playlist.setAttribute('selected', 'true');
|
|
playlist.tab.setAttribute('selected', 'true');
|
|
}
|
|
},
|
|
}
|
|
|
|
player.init('player')
|
|
</script>
|
|
{% endblock %}
|
|
|