99 lines
3.1 KiB
HTML
99 lines
3.1 KiB
HTML
{% extends "base.html" %}
|
|
{% load bootstrap4 %}
|
|
{% load staticfiles %}
|
|
|
|
{% block title %} - {{playlist.name}}{% endblock %}
|
|
|
|
{% block js %}<script src="{% static "js/playlist.js" %}"></script>{% endblock %}
|
|
|
|
{% block content %}
|
|
<script>
|
|
var tracks = [{% for link in playlist.link_set.all %}
|
|
"{{link.token}}",
|
|
{% endfor %}];
|
|
var add_url = "{% url 'player:add' playlist.get_token %}";
|
|
var get_url = "{% url 'player:list' playlist.get_token %}";
|
|
$(document).ready(function(){
|
|
$(window).resize(function(){
|
|
$("#links").height($('#player').height());
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="row" style="height:100%">
|
|
<div class="col-md-6">
|
|
<h1>{{playlist.name}}</h1>
|
|
<div class="row">
|
|
<div class="col-md-10">
|
|
<h2>Lecture</h2>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="btn-group">
|
|
<a class="btn btn-outline-dark" role="button" onclick="prev();">
|
|
<i class="fas fa-step-backward"></i>
|
|
</a>
|
|
<a class="btn btn-outline-dark" role="button" onclick="next();">
|
|
<i class="fas fa-step-forward"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
|
|
<div id="player" style="max-width:100%"></div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h2>Pistes à venir</h2>
|
|
<div id="links" style="overflow-y:scroll;">
|
|
{% for link in playlist.link_set.all %}
|
|
<div class="card bg-secondary text-white" onclick="setCurrent(parseInt(this.id));" id="{{ forloop.counter0 }}">
|
|
<div class="card-body">
|
|
<div class="row container">
|
|
<div class="col-md-9" >
|
|
<i class="far fa-play-circle"></i>
|
|
{{link.title}}
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="btn-group">
|
|
<a class="btn btn-outline-light" href="#"><i class="fas fa-thumbs-up"></i></a>
|
|
<a class="btn btn-outline-light" href="#"><i class="fas fa-thumbs-down"></i></a>
|
|
<a class="btn btn-outline-light" href="#"><i class="fas fa-trash"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
{% endfor %}
|
|
</div>
|
|
<form onSubmit="return addLink();" class="form row border-top" id="add_link_form">
|
|
{% csrf_token %}
|
|
<div class="col-md-9">
|
|
{% bootstrap_form form %}
|
|
</div>
|
|
<div class="col-md-3">
|
|
<br/>
|
|
<button class="btn btn-outline-primary"><i class="fa fa-plus"></i> Ajouter</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div style="display:none;" onclick="setCurrent(parseInt(this.id));" class="card bg-secondary text-white" id="link_template">
|
|
<div class="card-body">
|
|
<div class="row container">
|
|
<div class="col-md-9">
|
|
<i class="far fa-play-circle"></i>
|
|
<span class="link_name"></span>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="btn-group">
|
|
<a class="btn btn-outline-light" href="#"><i class="fas fa-thumbs-up"></i></a>
|
|
<a class="btn btn-outline-light" href="#"><i class="fas fa-thumbs-down"></i></a>
|
|
<a class="btn btn-outline-light" href="#"><i class="fas fa-trash"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|