101 lines
3.2 KiB
HTML
101 lines
3.2 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 %}";
|
|
</script>
|
|
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<h1>{{playlist.name}}</h1>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<a class="btn btn-success btn-sm" type='button' href="">
|
|
<i class="fa fa-edit"></i> Changer le nom
|
|
</a>
|
|
</div>
|
|
<div class="col-md-6">
|
|
Lien de partage : <input class="input-monospace" value="{{request.get_host}}{{playlist.get_absolute_url}}" type="text" readonly="">
|
|
</div>
|
|
</div>
|
|
<div class="row" style="height:100%">
|
|
<div class="col-md-6">
|
|
<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>
|
|
<form onSubmit="return addLink();" class="form" id="add_link_form">
|
|
{% csrf_token %}
|
|
{% bootstrap_form form %}
|
|
<button class="btn btn-outline-primary"><i class="fa fa-plus"></i> Ajouter</button>
|
|
</form>
|
|
</div>
|
|
<div class="col-md-6" style="height:100%; overflow-y:scroll;">
|
|
<h2>Pistes à venir</h2>
|
|
<div id="links">
|
|
{% for link in playlist.link_set.all %}
|
|
<div class="card bg-secondary text-white" onclick="setCurrentFromToken('{{link.token}}');" id="{{link.token}}">
|
|
<div class="card-body">
|
|
<div class="row container">
|
|
<div class="col-md-6" >
|
|
<i class="far fa-play-circle"></i>
|
|
{{link.token}}
|
|
</div>
|
|
<div class="col-md-3">
|
|
</div>
|
|
<div class="col-md-3 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>
|
|
<br/>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:none;" class="card bg-secondary text-white" id="link_template">
|
|
<div class="card-body">
|
|
<div class="row container">
|
|
<div class="col-md-6">
|
|
<i class="far fa-play-circle"></i>
|
|
<span class="link_name"></span>
|
|
</div>
|
|
<div class="col-md-3">
|
|
</div>
|
|
<div class="col-md-3 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>
|
|
|
|
{% endblock %}
|