Make the video player use more screen space

This commit is contained in:
Jacob Mansfield [root@Helix] 2019-09-22 19:48:56 +01:00
parent cb7e1d1be5
commit 23a9cb62eb
1 changed files with 33 additions and 49 deletions

View File

@ -4,24 +4,48 @@
{% load ratings %}
{% block body %}
<div class="container">
<h2>{{ object.name }}</h2>
<div class="row">
<div class="col-8">
<div class="col-10">
<h2>{{ object.name }}</h2>
</div>
<div class="col-2">
<a class="btn btn-secondary" href="https://youtube.com/watch?v={{ object.video_id }}" title="Watch on YouTube"><span class="typcn typcn-social-youtube"></span></a>
{% if object.watched %}
<a class="btn btn-secondary ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_unwatched' object.id %}" title="Mark not watched">
<span class="typcn typcn-eye" style="color:lightgreen;"></span>
</a>
{% else %}
<a class="btn btn-secondary ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_watched' object.id %}" title="Mark watched">
<span class="typcn typcn-eye-outline"></span>
</a>
{% endif %}
{% if object.downloaded_path %}
<a class="btn btn-secondary ajax-link" href="#" data-post-url="{% url 'ajax_action_delete_video_files' object.id %}" title="Delete downloaded">
<span class="typcn typcn-download" style="color:lightgreen;"></span>
</a>
{% else %}
<a class="btn btn-secondary ajax-link" href="#" data-post-url="{% url 'ajax_action_download_video_files' object.id %}" title="Download">
<span class="typcn typcn-download-outline"></span>
</a>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-12">
{% if video_mime != None %}
<video width="100%" controls autoplay>
<video width="100%" height="600px" controls autoplay>
<source src="{% url 'video-src' object.id %}" type="{{ video_mime }}">
</video>
{% else %}
<iframe id="ytplayer" type="text/html" width="100%" height="400"
<iframe id="ytplayer" type="text/html" width="100%" height="600"
src="https://www.youtube-nocookie.com/embed/{{ object.video_id }}?autoplay=1"
frameborder="0"></iframe>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-12">
<div class="row mx-0 mt-2">
<p class="text-muted mb-1">
<span>{{ object.views | intcomma }} views</span>
@ -32,51 +56,11 @@
{% starrating object.rating %}
</div>
</div>
<div class="video-description">
{{ object.description | linebreaks | urlize }}
</div>
</div>
<div class="col-4">
<h5>Manage video</h5>
<p>
<a class="btn btn-secondary" href="https://youtube.com/watch?v={{ object.video_id }}">
Watch on YouTube <span class="typcn typcn-social-youtube"></span>
</a>
</p>
{% if object.watched %}
<p>
<a class="btn btn-secondary ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_unwatched' object.id %}">
Mark not watched
</a>
</p>
{% else %}
<p>
<a class="btn btn-secondary ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_watched' object.id %}">
Mark watched
</a>
</p>
{% endif %}
{% if object.downloaded_path %}
<p>
<a class="btn btn-secondary ajax-link" href="#" data-post-url="{% url 'ajax_action_delete_video_files' object.id %}">
Delete downloaded
</a>
</p>
{% else %}
<p>
<a class="btn btn-secondary ajax-link" href="#" data-post-url="{% url 'ajax_action_download_video_files' object.id %}" >
Download
</a>
</p>
{% endif %}
</div>
</div>
</div>
{% endblock %}