forked from rc/aircox
		
	work on player
This commit is contained in:
		@ -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"
 | 
				
			||||||
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user