work on player
This commit is contained in:
parent
a7197cc4f7
commit
7752e37b74
|
@ -999,7 +999,10 @@ class Sound(Nameable):
|
||||||
return None
|
return None
|
||||||
|
|
||||||
import mutagen
|
import mutagen
|
||||||
meta = mutagen.File(self.path)
|
try:
|
||||||
|
meta = mutagen.File(self.path)
|
||||||
|
except:
|
||||||
|
meta = {}
|
||||||
|
|
||||||
def get_meta(key, cast=str):
|
def get_meta(key, cast=str):
|
||||||
value = meta.get(key)
|
value = meta.get(key)
|
||||||
|
|
|
@ -550,7 +550,7 @@ class DiffusionPage(Publication):
|
||||||
sound = self.diffusion.get_archives() \
|
sound = self.diffusion.get_archives() \
|
||||||
.filter(public = True).first()
|
.filter(public = True).first()
|
||||||
if sound:
|
if sound:
|
||||||
sound.detail_url = self.detail_url
|
sound.detail_url = self.url
|
||||||
return sound
|
return sound
|
||||||
|
|
||||||
def get_podcasts(self):
|
def get_podcasts(self):
|
||||||
|
@ -682,6 +682,11 @@ class LogsPage(DatedListPage):
|
||||||
help_text = _('maximum days in the past allowed to be shown. '
|
help_text = _('maximum days in the past allowed to be shown. '
|
||||||
'0 means no limit')
|
'0 means no limit')
|
||||||
)
|
)
|
||||||
|
reverse = models.BooleanField(
|
||||||
|
_('reverse list'),
|
||||||
|
default=False,
|
||||||
|
help_text = _('print logs in ascending order by date'),
|
||||||
|
)
|
||||||
|
|
||||||
class Meta:
|
class Meta:
|
||||||
verbose_name = _('Logs')
|
verbose_name = _('Logs')
|
||||||
|
@ -691,6 +696,7 @@ class LogsPage(DatedListPage):
|
||||||
MultiFieldPanel([
|
MultiFieldPanel([
|
||||||
FieldPanel('station'),
|
FieldPanel('station'),
|
||||||
FieldPanel('age_max'),
|
FieldPanel('age_max'),
|
||||||
|
FieldPanel('reverse'),
|
||||||
], heading=_('Configuration')),
|
], heading=_('Configuration')),
|
||||||
]
|
]
|
||||||
|
|
||||||
|
@ -718,7 +724,9 @@ class LogsPage(DatedListPage):
|
||||||
for date in context['nav_dates']['dates']:
|
for date in context['nav_dates']['dates']:
|
||||||
items = [ SectionLogsList.as_item(item)
|
items = [ SectionLogsList.as_item(item)
|
||||||
for item in self.station.on_air(date = date) ]
|
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
|
return logs
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -323,6 +323,14 @@ ul.list {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.player .playlist .duration {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player .playlist progress {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.player .item[selected] {
|
.player .item[selected] {
|
||||||
border-left: 1px #007EDF solid;
|
border-left: 1px #007EDF solid;
|
||||||
|
@ -345,7 +353,6 @@ ul.list {
|
||||||
max-height: 2.0em;
|
max-height: 2.0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.player:not([state]) .item[selected] .button > img:not(.play),
|
.player:not([state]) .item[selected] .button > img:not(.play),
|
||||||
.player[state="paused"] .item[selected] .button > img:not(.play),
|
.player[state="paused"] .item[selected] .button > img:not(.play),
|
||||||
.player[state="playing"] .item[selected] .button > img:not(.pause),
|
.player[state="playing"] .item[selected] .button > img:not(.pause),
|
||||||
|
|
|
@ -36,6 +36,7 @@ Sound.prototype = {
|
||||||
on_air: false,
|
on_air: false,
|
||||||
|
|
||||||
item: undefined,
|
item: undefined,
|
||||||
|
position_item: undefined,
|
||||||
|
|
||||||
get seekable() {
|
get seekable() {
|
||||||
return this.duration != undefined;
|
return this.duration != undefined;
|
||||||
|
@ -59,6 +60,7 @@ Sound.prototype = {
|
||||||
|
|
||||||
item.sound = this;
|
item.sound = this;
|
||||||
this.item = item;
|
this.item = item;
|
||||||
|
this.position_item = item.querySelector('.position');
|
||||||
|
|
||||||
// events
|
// events
|
||||||
var self = this;
|
var self = this;
|
||||||
|
@ -164,9 +166,9 @@ Playlist.prototype = {
|
||||||
sound.item.setAttribute('selected', 'true');
|
sound.item.setAttribute('selected', 'true');
|
||||||
|
|
||||||
if(!sound.on_air)
|
if(!sound.on_air)
|
||||||
sound.item.querySelector('.content').insertBefore(
|
sound.item.querySelector('.content').parentNode.appendChild(
|
||||||
this.player.progress.item,
|
this.player.progress.item //,
|
||||||
sound.item.querySelector('.content .duration')
|
// sound.item.querySelector('.content .duration')
|
||||||
)
|
)
|
||||||
|
|
||||||
if(sound.seekable)
|
if(sound.seekable)
|
||||||
|
@ -217,6 +219,7 @@ Playlist.prototype = {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var ActivePlayer = null;
|
||||||
|
|
||||||
function Player(id, on_air_url, show_cover) {
|
function Player(id, on_air_url, show_cover) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
|
@ -253,6 +256,10 @@ Player.prototype = {
|
||||||
sound: undefined,
|
sound: undefined,
|
||||||
on_air_url: undefined,
|
on_air_url: undefined,
|
||||||
|
|
||||||
|
get sound() {
|
||||||
|
return this.playlist.sound;
|
||||||
|
},
|
||||||
|
|
||||||
init_events: function() {
|
init_events: function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
@ -265,19 +272,20 @@ Player.prototype = {
|
||||||
function update_info() {
|
function update_info() {
|
||||||
var progress = self.progress;
|
var progress = self.progress;
|
||||||
var pos = self.audio.currentTime;
|
var pos = self.audio.currentTime;
|
||||||
|
var position = self.sound.position_item;
|
||||||
|
|
||||||
// progress
|
// progress
|
||||||
if(!self.sound || !self.sound.seekable ||
|
if(!self.audio || !self.audio.seekable ||
|
||||||
!pos || self.audio.duration == Infinity)
|
!pos || self.audio.duration == Infinity)
|
||||||
{
|
{
|
||||||
progress.duration.innerHTML = '';
|
position.innerHTML = '';
|
||||||
progress.bar.value = 0;
|
progress.bar.value = 0;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress.bar.value = pos;
|
progress.bar.value = pos;
|
||||||
progress.bar.max = self.audio.duration;
|
progress.bar.max = self.audio.duration;
|
||||||
progress.duration.innerHTML = duration_str(pos);
|
position.innerHTML = duration_str(pos);
|
||||||
}
|
}
|
||||||
|
|
||||||
// audio
|
// audio
|
||||||
|
@ -302,7 +310,7 @@ Player.prototype = {
|
||||||
this.audio.addEventListener('ended', function() {
|
this.audio.addEventListener('ended', function() {
|
||||||
self.player.removeAttribute('state');
|
self.player.removeAttribute('state');
|
||||||
if(!self.controls.single.checked)
|
if(!self.controls.single.checked)
|
||||||
self.next(true);
|
self.playlist.next(true);
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
// progress
|
// progress
|
||||||
|
@ -318,7 +326,8 @@ Player.prototype = {
|
||||||
return;
|
return;
|
||||||
|
|
||||||
var pos = time_from_progress(event);
|
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);
|
}, false);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -368,6 +377,11 @@ Player.prototype = {
|
||||||
},
|
},
|
||||||
|
|
||||||
play: function() {
|
play: function() {
|
||||||
|
if(ActivePlayer && ActivePlayer != this) {
|
||||||
|
ActivePlayer.stop();
|
||||||
|
}
|
||||||
|
ActivePlayer = this;
|
||||||
|
|
||||||
if(this.audio.paused)
|
if(this.audio.paused)
|
||||||
this.audio.play();
|
this.audio.play();
|
||||||
else
|
else
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<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(
|
var sound = player.playlist.add(
|
||||||
new Sound(
|
new Sound(
|
||||||
'{{ self.live_title }}',
|
'{{ self.live_title }}',
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
<div class="flex_item">
|
<div class="flex_item">
|
||||||
<h3 class="title flex_item">{{ self.live_title }}</h3>
|
<h3 class="title flex_item">{{ self.live_title }}</h3>
|
||||||
<div class="content flex_row">
|
<div class="content flex_row">
|
||||||
|
<span class="info position flex_item"></span>
|
||||||
<span class="info duration flex_item"></span>
|
<span class="info duration flex_item"></span>
|
||||||
<span class="actions">
|
<span class="actions">
|
||||||
<a class="action add" title="{% trans "add to the player" %}">+</a>
|
<a class="action add" title="{% trans "add to the player" %}">+</a>
|
||||||
|
@ -34,10 +35,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<span class="progress">
|
<div class="progress">
|
||||||
<span class="info duration"></span>
|
<!-- <div class="info duration"></span> -->
|
||||||
<progress class="flex_item progress" value="0" max="1"></progress>
|
<progress class="flex_item progress" value="0" max="1"></progress>
|
||||||
</span>
|
</div>
|
||||||
|
|
||||||
<input type="checkbox" class="single" id="player_single_mode">
|
<input type="checkbox" class="single" id="player_single_mode">
|
||||||
<label for="player_single_mode" class="info"
|
<label for="player_single_mode" class="info"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user