ctactic/aircox-radiocampus
1
0
Fork 0
forked from rc/aircox
Code Issues 8 Pull Requests Activity

work on player: integrate vuejs + noscript; remove TemplateMixin for Component and ExposedData; rewrite most of the player; clean up files; do lot of other things

Browse Source
This commit is contained in:
bkfox
2018-02-08 06:46:42 +01:00
parent 343279a777
commit d80322dd15
36 changed files with 12711 additions and 1740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
aircox_cms/templates/aircox_cms/base_site.html
View File

@ -1,4 +1,4 @@
{% load staticfiles %}
{% load static %}
{% load i18n %}
{% load wagtailcore_tags %}
@ -26,14 +26,33 @@
{% block css_extras %}{% endblock %}
{% endblock %}
{% if settings.DEBUG %}
<script src="{% static 'lib/vue.js' %}">
{% else %}
<script src="{% static 'lib/vue.min.js' %}">
{% endif %}
<script src="{% static 'aircox_cms/js/bootstrap.js' %}"></script>
<script src="{% static 'aircox_cms/js/utils.js' %}"></script>
<script src="{% static 'aircox_cms/js/player.js' %}"></script>
<title>{{ page.title }}</title>
{# TODO: include vues somewhere else #}
{% include "aircox_cms/vues/player.html" %}
<script>
window.addEventListener('loaded', function() {
new Vue({
el: "#app",
delimiters: ['${', '}'],
});
}, false);
</script>
</head>
{% spaceless %}
<body>
<body id="app">
<nav class="top">
<div class="menu row">
{% render_sections position="top" %}

33
aircox_cms/templates/aircox_cms/diffusion_page.html
View File

@ -1,5 +1,6 @@
{% extends "aircox_cms/publication.html" %}
{% load i18n %}
{% load aircox_cms %}
{% block content_extras %}
{% with tracks=page.tracks.all %}
@ -32,39 +33,9 @@
</section>
{% endif %}
{% with podcasts=self.get_podcasts %}
{% if podcasts %}
<section class="podcasts list">
<h2>{% trans "Podcasts" %}</h2>
<div id="player_diff_{{ page.id }}" class="player">
{% include 'aircox_cms/snippets/player.html' %}
<script>
var podcasts = new Player('player_diff_{{ page.id }}', undefined, true)
{% for item in podcasts %}
{% if not item.embed %}
podcasts.playlist.add(new Sound(
title='{{ item.name|escape }}',
detail='{{ item.detail_url }}',
duration={{ item.duration|date:"H*3600+i*60+s" }},
streams='{{ item.url }}',
{% if page and page.cover %}cover='{{ page.icon }}',{% endif %}
undefined
));
{% endif %}
{% endfor %}
</script>
<p>
{% for item in podcasts %}
{% if item.embed %}
{{ item.embed|safe }}
{% endif %}
{% endfor %}
</p>
</div>
</section>
{% render_section section=podcasts %}
{% endif %}
{% endwith %}
{% endblock %}

5
aircox_cms/templates/aircox_cms/publication.html
View File

@ -20,11 +20,6 @@
{% with list_paginator=paginator %}
{% include "aircox_cms/snippets/list.html" %}
{% endwith %}
{% else %}
{# detail view #}
{% if page.links.count %}
{% include "aircox_cms/sections/section_link_list.html" %}
{% endif %}
{% endif %}
</div>
{% endblock %}

0
aircox_cms/templates/aircox_cms/sections/section_item.html → aircox_cms/templates/aircox_cms/sections/item.html
View File

2
aircox_cms/templates/aircox_cms/sections/section_link_list.html → aircox_cms/templates/aircox_cms/sections/link_list.html
View File

@ -1,4 +1,4 @@
{% extends "aircox_cms/sections/section_item.html" %}
{% extends "aircox_cms/sections/item.html" %}
{% load wagtailimages_tags %}
{% load aircox_cms %}

2
aircox_cms/templates/aircox_cms/sections/section_list.html → aircox_cms/templates/aircox_cms/sections/list.html
View File

@ -1,4 +1,4 @@
{% extends "aircox_cms/sections/section_item.html" %}
{% extends "aircox_cms/sections/item.html" %}
{% block content %}
{% with url=url url_text=self.url_text %}

2
aircox_cms/templates/aircox_cms/sections/section_logs_list.html → aircox_cms/templates/aircox_cms/sections/logs_list.html
View File

@ -1,4 +1,4 @@
{% extends "aircox_cms/sections/section_item.html" %}
{% extends "aircox_cms/sections/item.html" %}
{% block content %}
{% with item_date_format="H:i" list_css_class="date_list" list_no_cover=True list_no_headline=True %}

54
aircox_cms/templates/aircox_cms/sections/playlist.html Executable file
View File

@ -0,0 +1,54 @@
{% extends 'aircox_cms/sections/item.html' %}
{% load staticfiles %}
{% load i18n %}
{% load aircox_cms %}
{% block content %}
{% with playlist_id="playlist"|gen_id %}
<a-playlist class="playlist" id="{{ playlist_id }}">
<noscript>
{% for track in tracks %}
<li class="item">
<span class="name">{{ track.name }} ({{ track.duration|date:"H\"i's" }}): </span>
<span class="podcast">
{% if not track.embed %}
<audio src="{{ track.url|escape }}" controls>
{% else %}
{{ track.embed|safe }}
{% endif %}
</span>
</li>
{% endfor %}
</noscript>
<script>
window.addEventListener('load', function() {
var playlist = new Playlist({
data: {
id: "{{ playlist_id }}",
{% if is_default %}
default: true,
{% endif %}
{% if single_mode %}
single_mode: true,
{% endif %}
{% if modifiable %}
modifiable: true,
{% endif %}
{% if storage_key %}
storage_key: "{{ storage_key }}",
{% endif %}
tracks: [
{% for track in tracks %}
new Track({{ track.to_json }}),
{% endfor %}
],
},
});
playlist.$mount('#{{ playlist_id }}');
}, false);
</script>
</a-playlist>
{% endwith %}
{% endblock %}

2
aircox_cms/templates/aircox_cms/sections/section_publication_info.html → aircox_cms/templates/aircox_cms/sections/publication_info.html
View File

@ -1,4 +1,4 @@
{% extends "aircox_cms/sections/section_item.html" %}
{% extends "aircox_cms/sections/item.html" %}
{% load i18n %}
{% load static %}

2
aircox_cms/templates/aircox_cms/sections/section_search_field.html → aircox_cms/templates/aircox_cms/sections/search_field.html
View File

@ -1,4 +1,4 @@
{% extends "aircox_cms/sections/section_item.html" %}
{% extends "aircox_cms/sections/item.html" %}
{% load i18n %}
{% load static %}

25
aircox_cms/templates/aircox_cms/sections/section_player.html
View File

@ -1,25 +0,0 @@
{% extends 'aircox_cms/sections/section_item.html' %}
{% block content %}
<div id="player" class="player">
{% include "aircox_cms/snippets/player.html" %}
</div>
<script>
var player = new Player('player', '{% url 'aircox.on_air' %}', true);
var sound = player.playlist.add(
new Sound(
'{{ self.live_title }}',
'', undefined,
streams=[ {% for stream in streams %}'{{ stream }}',{% endfor %} ],
cover = undefined,
on_air = true
), undefined, 0
);
sound.item.className += ' live';
player.playlist.select(sound, false);
player.update_on_air();
</script>
{% endblock %}

2
aircox_cms/templates/aircox_cms/sections/section_timetable.html → aircox_cms/templates/aircox_cms/sections/timetable.html
View File

@ -1,4 +1,4 @@
{% extends "aircox_cms/sections/section_item.html" %}
{% extends "aircox_cms/sections/item.html" %}
{% block content %}
{% include "aircox_cms/snippets/date_list.html" %}

49
aircox_cms/templates/aircox_cms/snippets/player.html
View File

@ -1,49 +0,0 @@
{% load staticfiles %}
{% load i18n %}
<audio preload="metadata">
{% trans "Your browser does not support the <code>audio</code> element." %}
{% for stream in streams %}
<source src="{{ stream }}" />
{% endfor %}
</audio>
<div class="playlist">
<li class='item list_item flex_row' style="display: none;">
<div class="button">
<img src="" class="cover"/>
<img src="{% static "aircox/images/play.png" %}" class="play"
title="{% trans "play" %}" />
<img src="{% static "aircox/images/pause.png" %}" class="pause"
title="{% trans "pause" %}" />
<img src="{% static "aircox/images/loading.png" %}" class="loading"
title="{% trans "loading..." %}" />
</div>
<div class="flex_item">
<h3 class="title flex_item">{{ self.live_title }}</h3>
<div class="content flex_row">
<span class="info position flex_item"></span>
<span class="info duration flex_item"></span>
</div>
</div>
<span class="actions">
<a class="action add" title="{% trans "add to the player" %}">+</a>
<a class="action detail" title="{% trans "more informations" %}">➔</a>
<a class="action remove" title="{% trans "remove this sound" %}">✖</a>
</span>
</li>
</div>
<div class="controls">
<div class="progress">
<!-- <div class="info duration"></span> -->
<progress class="flex_item progress" value="0" max="1"></progress>
</div>
<input type="checkbox" class="single" id="player_single_mode">
<label for="player_single_mode" class="info"
title="{% trans "enable and disable single mode" %}">↻</label>
</div>

82
aircox_cms/templates/aircox_cms/vues/player.html Normal file
View File

@ -0,0 +1,82 @@
{% load staticfiles %}
{% load i18n %}
<script type="text/x-template" id="template-sound">
<div class="sound">
<audio preload="metadata" ref="audio"
@pause="state = State.Stop"
@playing="state = State.Play"
@ended="ended"
@timeupdate="timeUpdate"
>
<source v-for="source in track.sources" :src="source">
</audio>
<img :src="track.cover" v-if="track.cover" class="icon cover">
<button class="button" @click="play_stop">
<img class="icon pause"
src="{% static "aircox/images/pause.png" %}"
title="{% trans "Click to pause" %}"
v-if="state === State.Play" >
<img class="icon loading"
src="{% static "aircox/images/loading.png" %}"
title="{% trans "Loading... Click to pause" %}"
v-else-if="state === State.Loading" >
<img class="icon play"
src="{% static "aircox/images/play.png" %}"
title="{% trans "Click to play" %}"
v-else >
</button>
<div>
<h3>
<a :href="detail_url">[[ track.name ]]</a>
</h3>
<span v-if="track.duration" class="info">
[[ (track.duration[0] && track.duration[0] + '"') || '' ]]
[[ track.duration[1] + "'" + track.duration[2] ]]
</span>
</div>
<div class="actions">
<a class="action remove"
title="{% trans "Remove from playlist" %}"
v-if="this.$parent.modifiable"
@click="remove"
>✖</a>
<a class="action add"
title="{% trans "Add to my playlist" %}"
@click="add_to_playlist"
v-else
>+</a>
</div>
<div class="content flex_row" v-show="track.duration != null">
<span v-if="seek_position !== null">[[ seek_position ]]</span>
<span v-else>[[ position ]]</span>
<progress class="flex_item progress" ref="progress"
v-show="track.duration"
v-on:click.prevent="progress_clicked"
v-on:mousemove = "progress_mouse_move"
v-on:mouseout = "progress_mouse_out"
:value="position" :max="duration"
></progress>
</div>
</div>
</script>
<script type="text/x-template" id="template-playlist">
<div class="playlist">
<a-sound v-for="track in tracks" ref="sounds"
:id="track.id" :track="track"
@ended="sound_ended"
@beforeDestroy="sound_ended"
/>
<div v-show="tracks.length > 1" class="playlist_footer">
<input type="checkbox" class="single" id="[[ playlist ]]_single_mode"
value="true" v-model="single_mode">
<label for="[[ playlist ]]_single_mode" class="info"
title="{% trans "Enable and disable single mode" %}">↻</label>
</div>
</div>
</script>