restructure html to allow for non boxed-content classes within content blocks, #98

This commit is contained in:
simon 2021-12-06 18:05:25 +07:00
parent 8c5bb0bc1f
commit e2238c16f5
10 changed files with 898 additions and 876 deletions

View File

@ -1,17 +1,19 @@
{% extends "home/base.html" %} {% extends "home/base.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="title-bar"> <div class="boxed-content">
<h1>About The Tube Archivist</h1> <div class="title-bar">
</div> <h1>About The Tube Archivist</h1>
<div class="about-section"> </div>
<h2>Useful Links</h2> <div class="about-section">
<p>This project is in active and constant development, take a look at the <a href="https://github.com/bbilly1/tubearchivist#roadmap" target="_blank">roadmap</a> for a overview.</p> <h2>Useful Links</h2>
<p>For any questions on what a button or a function does, You can find the up-to-date user documentation on <a href="https://github.com/bbilly1/tubearchivist/wiki" target="_blank">Github</a>.</p> <p>This project is in active and constant development, take a look at the <a href="https://github.com/bbilly1/tubearchivist#roadmap" target="_blank">roadmap</a> for a overview.</p>
<p>All contributions are welcome: Open an <a href="https://github.com/bbilly1/tubearchivist/issues" target="_blank">issue</a> for any bugs and errors, start a <a href="https://github.com/bbilly1/tubearchivist/discussions" target="_blank">discussion</a> for anything that will require a more indepth look. The <a href="https://github.com/bbilly1/tubearchivist/blob/master/CONTRIBUTING.md" target="_blank">contributing</a> page is a good place to get started.</p> <p>For any questions on what a button or a function does, You can find the up-to-date user documentation on <a href="https://github.com/bbilly1/tubearchivist/wiki" target="_blank">Github</a>.</p>
</div> <p>All contributions are welcome: Open an <a href="https://github.com/bbilly1/tubearchivist/issues" target="_blank">issue</a> for any bugs and errors, start a <a href="https://github.com/bbilly1/tubearchivist/discussions" target="_blank">discussion</a> for anything that will require a more indepth look. The <a href="https://github.com/bbilly1/tubearchivist/blob/master/CONTRIBUTING.md" target="_blank">contributing</a> page is a good place to get started.</p>
<div class="about-section"> </div>
<h2>Donate</h2> <div class="about-section">
<p>Here are <a href="https://github.com/bbilly1/tubearchivist#donate" target="_blank">some links</a>, if you want to buy the developer a coffee. Thank you for your support!</p> <h2>Donate</h2>
<p>Here are <a href="https://github.com/bbilly1/tubearchivist#donate" target="_blank">some links</a>, if you want to buy the developer a coffee. Thank you for your support!</p>
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View File

@ -20,45 +20,48 @@
<script type="text/javascript" src="{% static 'script.js' %}"></script> <script type="text/javascript" src="{% static 'script.js' %}"></script>
</head> </head>
<body> <body>
<div class="boxed-content"> <div class="main-content">
<div class="top-banner"> <div class="boxed-content">
<a href="{% url 'home' %}"> <div class="top-banner">
{% if colors == 'dark' %}
<img src="{% static 'img/banner-tube-archivist-dark.png' %}" alt="tube-archivist-banner">
{% endif %}
{% if colors == 'light' %}
<img src="{% static 'img/banner-tube-archivist-light.png' %}" alt="tube-archivist-banner">
{% endif %}
</a>
</div>
<div class="top-nav">
<div class="nav-items">
<a href="{% url 'home' %}"> <a href="{% url 'home' %}">
<div class="nav-item">home</div> {% if colors == 'dark' %}
</a> <img src="{% static 'img/banner-tube-archivist-dark.png' %}" alt="tube-archivist-banner">
<a href="{% url 'channel' %}"> {% endif %}
<div class="nav-item">channels</div> {% if colors == 'light' %}
</a> <img src="{% static 'img/banner-tube-archivist-light.png' %}" alt="tube-archivist-banner">
<a href="{% url 'playlist' %}"> {% endif %}
<div class="nav-item">playlists</div>
</a>
<a href="{% url 'downloads' %}">
<div class="nav-item">downloads</div>
</a> </a>
</div> </div>
<div class="nav-icons"> <div class="top-nav">
<a href="{% url 'about' %}"> <div class="nav-items">
<img src="{% static 'img/icon-help.svg' %}" alt="help-icon" title="About"> <a href="{% url 'home' %}">
</a> <div class="nav-item">home</div>
<a href="{% url 'settings' %}"> </a>
<img src="{% static 'img/icon-gear.svg' %}" alt="gear-icon" title="Settings"> <a href="{% url 'channel' %}">
</a> <div class="nav-item">channels</div>
<a href="{% url 'logout' %}"> </a>
<img src="{% static 'img/icon-exit.svg' %}" alt="exit-icon" title="Logout"> <a href="{% url 'playlist' %}">
</a> <div class="nav-item">playlists</div>
</a>
<a href="{% url 'downloads' %}">
<div class="nav-item">downloads</div>
</a>
</div>
<div class="nav-icons">
<a href="{% url 'about' %}">
<img src="{% static 'img/icon-help.svg' %}" alt="help-icon" title="About">
</a>
<a href="{% url 'settings' %}">
<img src="{% static 'img/icon-gear.svg' %}" alt="gear-icon" title="Settings">
</a>
<a href="{% url 'logout' %}">
<img src="{% static 'img/icon-exit.svg' %}" alt="exit-icon" title="Logout">
</a>
</div>
</div> </div>
</div> </div>
{% block content %}{% endblock %} {% block content %}{% endblock %}
<div class="boxed-content">
<div class="pagination"> <div class="pagination">
{% if pagination %} {% if pagination %}
{% if pagination.current_page > 1 %} {% if pagination.current_page > 1 %}
@ -99,6 +102,7 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
</div> </div>
</div>
</div> </div>
<div class="footer"> <div class="footer">
<div class="boxed-content"> <div class="boxed-content">

View File

@ -2,98 +2,100 @@
{% load static %} {% load static %}
{% load humanize %} {% load humanize %}
{% block content %} {% block content %}
<div class="title-bar"> <div class="boxed-content">
<h1>Channels</h1> <div class="title-bar">
</div> <h1>Channels</h1>
<div id="notifications" data="channel"></div> </div>
<div class="info-box info-box-2"> <div id="notifications" data="channel"></div>
<div class="icon-text"> <div class="info-box info-box-2">
<img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon"> <div class="icon-text">
<p>Subscribe to Channels</p> <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
<div class="show-form"> <p>Subscribe to Channels</p>
<form id="hidden-form" action="/channel/" method="post"> <div class="show-form">
<form id="hidden-form" action="/channel/" method="post">
{% csrf_token %}
{{ subscribe_form }}
<button type="submit">Subscribe</button>
</form>
</div>
</div>
<div class="search-form icon-text">
<div class="search-icon">
<img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()">
<p>Search your Channels</p>
</div>
<form onSubmit="return channelRedirect();" id="search-box">
{% csrf_token %} {% csrf_token %}
{{ subscribe_form }} {{ search_form }}
<button type="submit">Subscribe</button> <datalist id="resultBox">
</datalist>
</form> </form>
</div> </div>
</div> </div>
<div class="search-form icon-text"> <div class="view-controls">
<div class="search-icon"> <div class="toggle">
<img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()"> <span>Show only subscribed channels:</span>
<p>Search your Channels</p> <div class="toggleBox">
</div> <input
<form onSubmit="return channelRedirect();" id="search-box"> id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox"
{% csrf_token %} {% if show_subed_only %}
{{ search_form }} checked
<datalist id="resultBox"> {% endif %}
</datalist> >
</form> <label for="" class="onbtn">On</label>
</div> <label for="" class="ofbtn">Off</label>
</div>
<div class="view-controls">
<div class="toggle">
<span>Show only subscribed channels:</span>
<div class="toggleBox">
<input
id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox"
{% if show_subed_only %}
checked
{% endif %}
>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div>
</div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="list" alt="list view">
</div>
</div>
<h2>Total matching channels: {{ max_hits }}</h2>
<div class="channel-list {{ view_style }}">
{% if channels %}
{% for channel in channels %}
<div class="channel-item {{ view_style }}">
<div class="channel-banner {{ view_style }}">
<a href="{% url 'channel_id' channel.source.channel_id %}">
<img src="/cache/channels/{{ channel.source.channel_id }}_banner.jpg" alt="{{ channel.source.channel_id }}-banner">
</a>
</div> </div>
<div class="info-box info-box-2 {{ view_style }}"> </div>
<div class="info-box-item"> <div class="view-icons">
<div class="round-img"> <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="grid" alt="grid view">
<a href="{% url 'channel_id' channel.source.channel_id %}"> <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="list" alt="list view">
<img src="/cache/channels/{{ channel.source.channel_id }}_thumb.jpg" alt="channel-thumb"> </div>
</a> </div>
</div> <h2>Total matching channels: {{ max_hits }}</h2>
<div> <div class="channel-list {{ view_style }}">
<h3><a href="{% url 'channel_id' channel.source.channel_id %}">{{ channel.source.channel_name }}</a></h3> {% if channels %}
{% if channel.source.channel_subs >= 1000000 %} {% for channel in channels %}
<p>Subscribers: {{ channel.source.channel_subs|intword }}</p> <div class="channel-item {{ view_style }}">
{% else %} <div class="channel-banner {{ view_style }}">
<p>Subscribers: {{ channel.source.channel_subs|intcomma }}</p> <a href="{% url 'channel_id' channel.source.channel_id %}">
{% endif %} <img src="/cache/channels/{{ channel.source.channel_id }}_banner.jpg" alt="{{ channel.source.channel_id }}-banner">
</div> </a>
</div> </div>
<div class="info-box-item"> <div class="info-box info-box-2 {{ view_style }}">
<div> <div class="info-box-item">
<p>Last refreshed: {{ channel.source.channel_last_refresh }}</p> <div class="round-img">
<p>Subscribed: <a href="{% url 'channel_id' channel.source.channel_id %}">
{% if channel.source.channel_subscribed %} <img src="/cache/channels/{{ channel.source.channel_id }}_thumb.jpg" alt="channel-thumb">
<button type="button" id="{{ channel.source.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel.source.channel_name }}">Unsubscribe</button> </a>
{% else %} </div>
<button type="button" id="{{ channel.source.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel.source.channel_name }}">Subscribe</button> <div>
{% endif %} <h3><a href="{% url 'channel_id' channel.source.channel_id %}">{{ channel.source.channel_name }}</a></h3>
</p> {% if channel.source.channel_subs >= 1000000 %}
<p>Subscribers: {{ channel.source.channel_subs|intword }}</p>
{% else %}
<p>Subscribers: {{ channel.source.channel_subs|intcomma }}</p>
{% endif %}
</div>
</div>
<div class="info-box-item">
<div>
<p>Last refreshed: {{ channel.source.channel_last_refresh }}</p>
<p>Subscribed:
{% if channel.source.channel_subscribed %}
<button type="button" id="{{ channel.source.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel.source.channel_name }}">Unsubscribe</button>
{% else %}
<button type="button" id="{{ channel.source.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel.source.channel_name }}">Subscribe</button>
{% endif %}
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> {% endfor %}
{% endfor %} {% else %}
{% else %} <h2>No channels found...</h2>
<h2>No channels found...</h2> {% endif %}
{% endif %} </div>
</div> </div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script> <script type="text/javascript" src="{% static 'progress.js' %}"></script>
{% endblock content %} {% endblock content %}

View File

@ -2,146 +2,148 @@
{% block content %} {% block content %}
{% load static %} {% load static %}
{% load humanize %} {% load humanize %}
<div class="channel-banner"> <div class="boxed-content">
<a href="/channel/{{ channel_info.channel_id }}/"><img src="/cache/channels/{{ channel_info.channel_id }}_banner.jpg" alt="channel_banner"></a> <div class="channel-banner">
</div> <a href="/channel/{{ channel_info.channel_id }}/"><img src="/cache/channels/{{ channel_info.channel_id }}_banner.jpg" alt="channel_banner"></a>
<div class="info-box info-box-3">
<div class="info-box-item">
<div class="round-img">
<a href="{% url 'channel_id' channel_info.channel_id %}">
<img src="/cache/channels/{{ channel_info.channel_id }}_thumb.jpg" alt="channel-thumb">
</a>
</div>
<div>
<h3><a href="{% url 'channel_id' channel_info.channel_id %}">{{ channel_info.channel_name }}</a></h3>
{% if channel_info.channel_subs >= 1000000 %}
<span>Subscribers: {{ channel_info.channel_subs|intword }}</span>
{% else %}
<span>Subscribers: {{ channel_info.channel_subs|intcomma }}</span>
{% endif %}
</div>
</div> </div>
<div class="info-box-item"> <div class="info-box info-box-3">
<div> <div class="info-box-item">
<p>Last refreshed: {{ channel_info.channel_last_refresh }}</p> <div class="round-img">
<p>Subscribed: <a href="{% url 'channel_id' channel_info.channel_id %}">
{% if channel_info.channel_subscribed %} <img src="/cache/channels/{{ channel_info.channel_id }}_thumb.jpg" alt="channel-thumb">
<button type="button" id="{{ channel_info.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel_info.channel_name }}">Unsubscribe</button> </a>
{% else %} </div>
<button type="button" id="{{ channel_info.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel_info.channel_name }}">Subscribe</button> <div>
{% endif %} <h3><a href="{% url 'channel_id' channel_info.channel_id %}">{{ channel_info.channel_name }}</a></h3>
</p> {% if channel_info.channel_subs >= 1000000 %}
{% if channel_info.channel_active %} <span>Subscribers: {{ channel_info.channel_subs|intword }}</span>
<p>Youtube: <a href="https://www.youtube.com/channel/{{ channel_info.channel_id }}" target="_blank">Active</a></p> {% else %}
{% else %} <span>Subscribers: {{ channel_info.channel_subs|intcomma }}</span>
<p>Youtube: Deactivated</p> {% endif %}
{% endif %}
<button onclick="deleteConfirm()" id="delete-item">Delete Channel</button>
<div class="delete-confirm" id="delete-button">
<span>Delete {{ channel_info.channel_name }} including all videos? </span><button class="danger-button" onclick="deleteChannel(this)" data-id="{{ channel_info.channel_id }}">Delete</button> <button onclick="cancelDelete()">Cancel</button>
</div> </div>
</div> </div>
</div> <div class="info-box-item">
<div class="info-box-item"> <div>
<div> <p>Last refreshed: {{ channel_info.channel_last_refresh }}</p>
{% if channel_info.channel_views >= 1000000 %} <p>Subscribed:
<p>Channel views: {{ channel_info.channel_views|intword }}</p> {% if channel_info.channel_subscribed %}
{% elif channel_info.channel_views > 0 %} <button type="button" id="{{ channel_info.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel_info.channel_name }}">Unsubscribe</button>
<p>Channel views: {{ channel_info.channel_views|intcomma }}</p> {% else %}
{% endif %} <button type="button" id="{{ channel_info.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel_info.channel_name }}">Subscribe</button>
{% if max_hits %}
<p>Total Videos archived: {{ max_hits }}</p>
<p>Watched: <button title="Mark all videos from {{ channel_info.channel_name }} as watched" type="button" id="watched-button" data-id="{{ channel_info.channel_id }}" onclick="isWatchedButton(this)">Mark as watched</button></p>
{% endif %}
<button title="Search for playlists on YouTube for {{ channel_info.channel_name }}" type="button" id="find-playlists-button" data-id="{{ channel_info.channel_id }}" onclick="findPlaylists(this)">Find Playlists</button>
<a href="/playlist/?search={{ channel_info.channel_id }}" title="Show all playlists belonging to {{ channel_info.channel_name }}"><button>Show Playlists</button></a>
</div>
</div>
</div>
{% if channel_info.channel_description %}
<div class="info-box-item description-box">
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
<div id="text-reveal" class="description-text">
{{ channel_info.channel_description|linebreaks }}
</div>
</div>
{% endif %}
<div id="notifications" data="channel_id"></div>
<div id="player" class="video-player"></div>
<div class="sort">
<p>Sort by <span class="settings-current">{{ sort_by }}</span>
<select name="sort" id="sort" onchange="sortChange(this.value)">
<option value="" disabled selected> -- change sort by -- </option>
<option value="published">date published</option>
<option value="downloaded">date downloaded</option>
<option value="views">views</option>
<option value="likes">likes</option>
</select>
<select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
{% if sort_order == "asc" %}
<option value="asc" selected>asc</option>
{% else %}
<option value="asc">asc</option>
{% endif %}
{% if sort_order == "desc" %}
<option value="desc" selected>desc</option>
{% else %}
<option value="desc">desc</option>
{% endif %}
</select>
</p>
</div>
<div class="view-controls">
<div class="toggle">
<span>Hide watched videos:</span>
<div class="toggleBox">
<input
id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox"
{% if hide_watched %}
checked
{% endif %} {% endif %}
> </p>
<label for="" class="onbtn">On</label> {% if channel_info.channel_active %}
<label for="" class="ofbtn">Off</label> <p>Youtube: <a href="https://www.youtube.com/channel/{{ channel_info.channel_id }}" target="_blank">Active</a></p>
</div> {% else %}
</div> <p>Youtube: Deactivated</p>
<div class="view-icons"> {% endif %}
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view"> <button onclick="deleteConfirm()" id="delete-item">Delete Channel</button>
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view"> <div class="delete-confirm" id="delete-button">
</div> <span>Delete {{ channel_info.channel_name }} including all videos? </span><button class="danger-button" onclick="deleteChannel(this)" data-id="{{ channel_info.channel_id }}">Delete</button> <button onclick="cancelDelete()">Cancel</button>
</div>
<div class="video-list {{ view_style }}">
{% if videos %}
{% for video in videos %}
<div class="video-item {{ view_style }}">
<a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/{{ video.source.vid_thumb_url }}" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
<div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb">
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
</div>
<div class="video-play">
<img src="{% static 'img/icon-play.svg' %}" alt="play-icon">
</div>
</div>
</a>
<div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
{% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
{% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div>
<div>
<a class="video-more" href="{% url 'video' video.source.youtube_id %}"><h2>{{ video.source.title }}</h2></a>
</div>
</div> </div>
</div> </div>
{% endfor %} </div>
{% else %} <div class="info-box-item">
<h2>No videos found...</h2> <div>
{% if channel_info.channel_views >= 1000000 %}
<p>Channel views: {{ channel_info.channel_views|intword }}</p>
{% elif channel_info.channel_views > 0 %}
<p>Channel views: {{ channel_info.channel_views|intcomma }}</p>
{% endif %}
{% if max_hits %}
<p>Total Videos archived: {{ max_hits }}</p>
<p>Watched: <button title="Mark all videos from {{ channel_info.channel_name }} as watched" type="button" id="watched-button" data-id="{{ channel_info.channel_id }}" onclick="isWatchedButton(this)">Mark as watched</button></p>
{% endif %}
<button title="Search for playlists on YouTube for {{ channel_info.channel_name }}" type="button" id="find-playlists-button" data-id="{{ channel_info.channel_id }}" onclick="findPlaylists(this)">Find Playlists</button>
<a href="/playlist/?search={{ channel_info.channel_id }}" title="Show all playlists belonging to {{ channel_info.channel_name }}"><button>Show Playlists</button></a>
</div>
</div>
</div>
{% if channel_info.channel_description %}
<div class="info-box-item description-box">
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
<div id="text-reveal" class="description-text">
{{ channel_info.channel_description|linebreaks }}
</div>
</div>
{% endif %} {% endif %}
<div id="notifications" data="channel_id"></div>
<div id="player" class="video-player"></div>
<div class="sort">
<p>Sort by <span class="settings-current">{{ sort_by }}</span>
<select name="sort" id="sort" onchange="sortChange(this.value)">
<option value="" disabled selected> -- change sort by -- </option>
<option value="published">date published</option>
<option value="downloaded">date downloaded</option>
<option value="views">views</option>
<option value="likes">likes</option>
</select>
<select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
{% if sort_order == "asc" %}
<option value="asc" selected>asc</option>
{% else %}
<option value="asc">asc</option>
{% endif %}
{% if sort_order == "desc" %}
<option value="desc" selected>desc</option>
{% else %}
<option value="desc">desc</option>
{% endif %}
</select>
</p>
</div>
<div class="view-controls">
<div class="toggle">
<span>Hide watched videos:</span>
<div class="toggleBox">
<input
id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox"
{% if hide_watched %}
checked
{% endif %}
>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div>
</div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div>
</div>
<div class="video-list {{ view_style }}">
{% if videos %}
{% for video in videos %}
<div class="video-item {{ view_style }}">
<a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/{{ video.source.vid_thumb_url }}" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
<div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb">
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
</div>
<div class="video-play">
<img src="{% static 'img/icon-play.svg' %}" alt="play-icon">
</div>
</div>
</a>
<div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
{% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
{% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div>
<div>
<a class="video-more" href="{% url 'video' video.source.youtube_id %}"><h2>{{ video.source.title }}</h2></a>
</div>
</div>
</div>
{% endfor %}
{% else %}
<h2>No videos found...</h2>
{% endif %}
</div>
</div> </div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script> <script type="text/javascript" src="{% static 'progress.js' %}"></script>
{% endblock content %} {% endblock content %}

View File

@ -1,92 +1,94 @@
{% extends "home/base.html" %} {% extends "home/base.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="title-bar"> <div class="boxed-content">
<h1>Downloads</h1> <div class="title-bar">
</div> <h1>Downloads</h1>
<div id="notifications" data="download"></div>
<div id="downloadControl"></div>
<div class="info-box info-box-3">
<div class="icon-text">
<img id="rescan-icon" onclick="rescanPending()" src="{% static 'img/icon-rescan.svg' %}" alt="rescan-icon">
<p>Rescan subscriptions</p>
</div> </div>
<div class="icon-text"> <div id="notifications" data="download"></div>
<img id="download-icon" onclick="dlPending()" src="{% static 'img/icon-download.svg' %}" alt="download-icon"> <div id="downloadControl"></div>
<p>Start download</p> <div class="info-box info-box-3">
</div> <div class="icon-text">
<div class="icon-text"> <img id="rescan-icon" onclick="rescanPending()" src="{% static 'img/icon-rescan.svg' %}" alt="rescan-icon">
<img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon"> <p>Rescan subscriptions</p>
<p>Add to download queue</p>
<div class="show-form">
<form id='hidden-form' action="/downloads/" method="post">
{% csrf_token %}
{{ add_form }}
<button type="submit">Add to download queue</button>
</form>
</div> </div>
</div> <div class="icon-text">
</div> <img id="download-icon" onclick="dlPending()" src="{% static 'img/icon-download.svg' %}" alt="download-icon">
<div class="view-controls"> <p>Start download</p>
<div class="toggle">
<span>Show only ignored videos:</span>
<div class="toggleBox">
<input
id="show_ignored_only" onclick="toggleCheckbox(this)" type="checkbox"
{% if show_ignored_only %}
checked
{% endif %}
>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div> </div>
</div> <div class="icon-text">
<div class="view-icons"> <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view"> <p>Add to download queue</p>
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view"> <div class="show-form">
</div> <form id='hidden-form' action="/downloads/" method="post">
</div> {% csrf_token %}
<div class="title-split"> {{ add_form }}
{% if show_ignored_only %} <button type="submit">Add to download queue</button>
<h2>Ignored from download</h2> </form>
<button onclick="deleteQueue(this)" data-id="ignore" title="Delete all previously ignored videos from the queue">Delete all ignored</button>
{% else %}
<h2>Download queue</h2>
<button onclick="deleteQueue(this)" data-id="pending" title="Delete all pending videos from the queue">Delete all queued</button>
{% endif %}
</div>
<h3>Total videos: {{ max_hits }}</h3>
<div class="dl-list {{ view_style }}">
{% if all_video_hits %}
{% for video in all_video_hits %}
<div class="dl-item {{ view_style }}" id="dl-{{ video.youtube_id }}">
<div class="dl-thumb {{ view_style }}">
<img src="/cache/{{ video.vid_thumb_url }}" alt="video_thumb">
{% if show_ignored_only %}
<span>ignored</span>
{% else %}
<span>queued</span>
{% endif %}
</div>
<div class="dl-desc {{ view_style }}">
<h3>{{ video.title }}</h3>
{% if video.channel_indexed %}
<a href="{% url 'channel_id' video.channel_id %}">{{ video.channel_name }}</a>
{% else %}
<span>{{ video.channel_name }}</span>
{% endif %}
<p>Published: {{ video.published }} | Duration: {{ video.duration }} | {{ video.youtube_id }}</p>
{% if show_ignored_only %}
<button data-id="{{ video.youtube_id }}" onclick="forgetIgnore(this)">Forget</button>
<button data-id="{{ video.youtube_id }}" onclick="addSingle(this)">Add to queue</button>
{% else %}
<button data-id="{{ video.youtube_id }}" onclick="toIgnore(this)">Ignore</button>
<button id="{{ video.youtube_id }}" data-id="{{ video.youtube_id }}" onclick="downloadNow(this)">Download now</button>
{% endif %}
</div>
</div> </div>
{% endfor %} </div>
{% endif %} </div>
<div class="view-controls">
<div class="toggle">
<span>Show only ignored videos:</span>
<div class="toggleBox">
<input
id="show_ignored_only" onclick="toggleCheckbox(this)" type="checkbox"
{% if show_ignored_only %}
checked
{% endif %}
>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div>
</div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view">
</div>
</div>
<div class="title-split">
{% if show_ignored_only %}
<h2>Ignored from download</h2>
<button onclick="deleteQueue(this)" data-id="ignore" title="Delete all previously ignored videos from the queue">Delete all ignored</button>
{% else %}
<h2>Download queue</h2>
<button onclick="deleteQueue(this)" data-id="pending" title="Delete all pending videos from the queue">Delete all queued</button>
{% endif %}
</div>
<h3>Total videos: {{ max_hits }}</h3>
<div class="dl-list {{ view_style }}">
{% if all_video_hits %}
{% for video in all_video_hits %}
<div class="dl-item {{ view_style }}" id="dl-{{ video.youtube_id }}">
<div class="dl-thumb {{ view_style }}">
<img src="/cache/{{ video.vid_thumb_url }}" alt="video_thumb">
{% if show_ignored_only %}
<span>ignored</span>
{% else %}
<span>queued</span>
{% endif %}
</div>
<div class="dl-desc {{ view_style }}">
<h3>{{ video.title }}</h3>
{% if video.channel_indexed %}
<a href="{% url 'channel_id' video.channel_id %}">{{ video.channel_name }}</a>
{% else %}
<span>{{ video.channel_name }}</span>
{% endif %}
<p>Published: {{ video.published }} | Duration: {{ video.duration }} | {{ video.youtube_id }}</p>
{% if show_ignored_only %}
<button data-id="{{ video.youtube_id }}" onclick="forgetIgnore(this)">Forget</button>
<button data-id="{{ video.youtube_id }}" onclick="addSingle(this)">Add to queue</button>
{% else %}
<button data-id="{{ video.youtube_id }}" onclick="toIgnore(this)">Ignore</button>
<button id="{{ video.youtube_id }}" data-id="{{ video.youtube_id }}" onclick="downloadNow(this)">Download now</button>
{% endif %}
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div> </div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script> <script type="text/javascript" src="{% static 'progress.js' %}"></script>
{% endblock content %} {% endblock content %}

View File

@ -1,95 +1,97 @@
{% extends "home/base.html" %} {% extends "home/base.html" %}
{% block content %} {% block content %}
{% load static %} {% load static %}
<div class="title-bar"> <div class="boxed-content">
<h1>Recent Videos</h1> <div class="title-bar">
</div> <h1>Recent Videos</h1>
<div class="info-box info-box-2">
<div class="sort">
<p>Sort by <span class="settings-current">{{ sort_by }}</span>
<select name="sort" id="sort" onchange="sortChange(this.value)">
<option value="" disabled selected> -- change sort by -- </option>
<option value="published">date published</option>
<option value="downloaded">date downloaded</option>
<option value="views">views</option>
<option value="likes">likes</option>
</select>
<select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
{% if sort_order == "asc" %}
<option value="asc" selected>asc</option>
{% else %}
<option value="asc">asc</option>
{% endif %}
{% if sort_order == "desc" %}
<option value="desc" selected>desc</option>
{% else %}
<option value="desc">desc</option>
{% endif %}
</select>
</p>
</div> </div>
<div class="search-form icon-text"> <div class="info-box info-box-2">
<div class="search-icon"> <div class="sort">
<img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()"> <p>Sort by <span class="settings-current">{{ sort_by }}</span>
<select name="sort" id="sort" onchange="sortChange(this.value)">
<option value="" disabled selected> -- change sort by -- </option>
<option value="published">date published</option>
<option value="downloaded">date downloaded</option>
<option value="views">views</option>
<option value="likes">likes</option>
</select>
<select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
{% if sort_order == "asc" %}
<option value="asc" selected>asc</option>
{% else %}
<option value="asc">asc</option>
{% endif %}
{% if sort_order == "desc" %}
<option value="desc" selected>desc</option>
{% else %}
<option value="desc">desc</option>
{% endif %}
</select>
</p>
</div> </div>
<form action="/" method="POST" id="search-box"> <div class="search-form icon-text">
{% csrf_token %} <div class="search-icon">
{{ search_form }} <img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()">
</form> </div>
</div> <form action="/" method="POST" id="search-box">
</div> {% csrf_token %}
<div class="view-controls"> {{ search_form }}
<div class="toggle"> </form>
<span>Hide watched videos:</span>
<div class="toggleBox">
<input
id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox"
{% if hide_watched %}
checked
{% endif %}
>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div> </div>
</div> </div>
<div class="view-icons"> <div class="view-controls">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view"> <div class="toggle">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view"> <span>Hide watched videos:</span>
<div class="toggleBox">
<input
id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox"
{% if hide_watched %}
checked
{% endif %}
>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div>
</div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div>
</div> </div>
</div> <div id="player" class="video-player"></div>
<div id="player" class="video-player"></div> <div class="video-list {{ view_style }}">
<div class="video-list {{ view_style }}"> {% if videos %}
{% if videos %} {% for video in videos %}
{% for video in videos %} <div class="video-item {{ view_style }}">
<div class="video-item {{ view_style }}"> <a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/{{ video.source.vid_thumb_url }}" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
<a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/{{ video.source.vid_thumb_url }}" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)"> <div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb-wrap {{ view_style }}"> <div class="video-thumb">
<div class="video-thumb"> <img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb"> </div>
<div class="video-play">
<img src="{% static 'img/icon-play.svg' %}" alt="play-icon">
</div>
</div> </div>
<div class="video-play"> </a>
<img src="{% static 'img/icon-play.svg' %}" alt="play-icon"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
{% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
{% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div>
<div>
<a href="{% url 'channel_id' video.source.channel.channel_id %}"><h3>{{ video.source.channel.channel_name }}</h3></a>
<a class="video-more" href="{% url 'video' video.source.youtube_id %}"><h2>{{ video.source.title }}</h2></a>
</div> </div>
</div>
</a>
<div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
{% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
{% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div>
<div>
<a href="{% url 'channel_id' video.source.channel.channel_id %}"><h3>{{ video.source.channel.channel_name }}</h3></a>
<a class="video-more" href="{% url 'video' video.source.youtube_id %}"><h2>{{ video.source.title }}</h2></a>
</div> </div>
</div> </div>
</div> {% endfor %}
{% endfor %} {% else %}
{% else %} <h2>No videos found...</h2>
<h2>No videos found...</h2> {% endif %}
{% endif %} </div>
</div> </div>
{% endblock content %} {% endblock content %}

View File

@ -1,82 +1,84 @@
{% extends "home/base.html" %} {% extends "home/base.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="title-bar"> <div class="boxed-content">
<h1>Playlists</h1> <div class="title-bar">
</div> <h1>Playlists</h1>
<div id="notifications" data="playlist"></div> </div>
<div class="info-box info-box-2"> <div id="notifications" data="playlist"></div>
<div class="icon-text"> <div class="info-box info-box-2">
{% if running == "subscribing" %} <div class="icon-text">
<p>Subscribing in progress, refresh.</p> {% if running == "subscribing" %}
{% else %} <p>Subscribing in progress, refresh.</p>
<img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon"> {% else %}
<p>Subscribe to Playlist</p> <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
<div class="show-form"> <p>Subscribe to Playlist</p>
<form id="hidden-form" action="/playlist/" method="post"> <div class="show-form">
{% csrf_token %} <form id="hidden-form" action="/playlist/" method="post">
{{ subscribe_form }} {% csrf_token %}
<button type="submit">Subscribe</button> {{ subscribe_form }}
</form> <button type="submit">Subscribe</button>
</form>
</div>
{% endif %}
</div>
<div class="search-form icon-text">
<div class="search-icon">
<img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()">
<p>Search your Playlists</p>
</div> </div>
<form action="/playlist/" method="POST" id="search-box">
{% csrf_token %}
{{ search_form }}
</form>
</div>
</div>
<div class="view-controls">
<div class="toggle">
<span>Show only subscribed playlists:</span>
<div class="toggleBox">
<input
id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox"
{% if show_subed_only %}
checked
{% endif %}
>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div>
</div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="playlist" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="playlist" data-value="list" alt="list view">
</div>
</div>
<div class="playlist-list {{ view_style }}">
{% if playlists %}
{% for playlist in playlists %}
<div class="playlist-item {{ view_style }}">
<div class="playlist-thumbnail">
<a href="{% url 'playlist_id' playlist.source.playlist_id %}">
<img src="/cache/playlists/{{ playlist.source.playlist_id }}.jpg" alt="{{ playlist.source.playlist_id }}-thumbnail">
</a>
</div>
<div class="playlist-desc {{ view_style }}">
<a href="{% url 'channel_id' playlist.source.playlist_channel_id %}"><h3>{{ playlist.source.playlist_channel }}</h3></a>
<a href="{% url 'playlist_id' playlist.source.playlist_id %}"><h2>{{ playlist.source.playlist_name }}</h2></a>
<p>Last refreshed: {{ playlist.source.playlist_last_refresh }}</p>
<p>Subscribed:
{% if playlist.source.playlist_subscribed %}
<button type="button" id="{{ playlist.source.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
{% else %}
<button type="button" id="{{ playlist.source.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
{% endif %}
</p>
</div>
</div>
{% endfor %}
{% else %}
<h2>No playlists found...</h2>
{% endif %} {% endif %}
</div> </div>
<div class="search-form icon-text">
<div class="search-icon">
<img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()">
<p>Search your Playlists</p>
</div>
<form action="/playlist/" method="POST" id="search-box">
{% csrf_token %}
{{ search_form }}
</form>
</div>
</div>
<div class="view-controls">
<div class="toggle">
<span>Show only subscribed playlists:</span>
<div class="toggleBox">
<input
id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox"
{% if show_subed_only %}
checked
{% endif %}
>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div>
</div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="playlist" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="playlist" data-value="list" alt="list view">
</div>
</div>
<div class="playlist-list {{ view_style }}">
{% if playlists %}
{% for playlist in playlists %}
<div class="playlist-item {{ view_style }}">
<div class="playlist-thumbnail">
<a href="{% url 'playlist_id' playlist.source.playlist_id %}">
<img src="/cache/playlists/{{ playlist.source.playlist_id }}.jpg" alt="{{ playlist.source.playlist_id }}-thumbnail">
</a>
</div>
<div class="playlist-desc {{ view_style }}">
<a href="{% url 'channel_id' playlist.source.playlist_channel_id %}"><h3>{{ playlist.source.playlist_channel }}</h3></a>
<a href="{% url 'playlist_id' playlist.source.playlist_id %}"><h2>{{ playlist.source.playlist_name }}</h2></a>
<p>Last refreshed: {{ playlist.source.playlist_last_refresh }}</p>
<p>Subscribed:
{% if playlist.source.playlist_subscribed %}
<button type="button" id="{{ playlist.source.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
{% else %}
<button type="button" id="{{ playlist.source.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
{% endif %}
</p>
</div>
</div>
{% endfor %}
{% else %}
<h2>No playlists found...</h2>
{% endif %}
</div> </div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script> <script type="text/javascript" src="{% static 'progress.js' %}"></script>
{% endblock content %} {% endblock content %}

View File

@ -2,113 +2,115 @@
{% load static %} {% load static %}
{% load humanize %} {% load humanize %}
{% block content %} {% block content %}
<div class="title-bar"> <div class="boxed-content">
<h1>{{ playlist_info.playlist_name }}</h1> <div class="title-bar">
</div> <h1>{{ playlist_info.playlist_name }}</h1>
<div class="info-box info-box-3">
<div class="info-box-item">
<div class="round-img">
<a href="{% url 'channel_id' channel_info.channel_id %}">
<img src="/cache/channels/{{ channel_info.channel_id }}_thumb.jpg" alt="channel-thumb">
</a>
</div>
<div>
<h3><a href="{% url 'channel_id' channel_info.channel_id %}">{{ channel_info.channel_name }}</a></h3>
{% if channel_info.channel_subs >= 1000000 %}
<span>Subscribers: {{ channel_info.channel_subs|intword }}</span>
{% else %}
<span>Subscribers: {{ channel_info.channel_subs|intcomma }}</span>
{% endif %}
</div>
</div> </div>
<div class="info-box-item"> <div class="info-box info-box-3">
<div> <div class="info-box-item">
<p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p> <div class="round-img">
<p>Subscribed: <a href="{% url 'channel_id' channel_info.channel_id %}">
{% if playlist_info.playlist_subscribed %} <img src="/cache/channels/{{ channel_info.channel_id }}_thumb.jpg" alt="channel-thumb">
<button type="button" id="{{ playlist_info.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button> </a>
</div>
<div>
<h3><a href="{% url 'channel_id' channel_info.channel_id %}">{{ channel_info.channel_name }}</a></h3>
{% if channel_info.channel_subs >= 1000000 %}
<span>Subscribers: {{ channel_info.channel_subs|intword }}</span>
{% else %} {% else %}
<button type="button" id="{{ playlist_info.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button> <span>Subscribers: {{ channel_info.channel_subs|intcomma }}</span>
{% endif %} {% endif %}
</p>
{% if playlist_info.playlist_active %}
<p>Youtube: <a href="https://www.youtube.com/playlist?list={{ playlist_info.playlist_id }}" target="_blank">Active</a></p>
{% else %}
<p>Youtube: Deactivated</p>
{% endif %}
<button onclick="deleteConfirm()" id="delete-item">Delete Playlist</button>
<div class="delete-confirm" id="delete-button">
<span>Delete {{ playlist_info.playlist_name }}?</span>
<button onclick="deletePlaylist(this)" data-action="metadata" data-id="{{ playlist_info.playlist_id }}">Delete metadata</button>
<button onclick="deletePlaylist(this)" data-action="all" class="danger-button" data-id="{{ playlist_info.playlist_id }}">Delete all</button><br>
<button onclick="cancelDelete()">Cancel</button>
</div> </div>
</div> </div>
</div> <div class="info-box-item">
<div class="info-box-item"> <div>
<div> <p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p>
{% if max_hits %} <p>Subscribed:
<p>Total Videos archived: {{ max_hits }}/{{ playlist_info.playlist_entries|length }}</p> {% if playlist_info.playlist_subscribed %}
<p>Watched: <button title="Mark all videos from {{ playlist_info.playlist_name }} as watched" type="button" id="watched-button" data-id="{{ playlist_info.playlist_id }}" onclick="isWatchedButton(this)">Mark as watched</button></p> <button type="button" id="{{ playlist_info.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button>
{% endif %} {% else %}
</div> <button type="button" id="{{ playlist_info.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
</div> {% endif %}
</div> </p>
{% if playlist_info.playlist_description %} {% if playlist_info.playlist_active %}
<div class="info-box-item description-box"> <p>Youtube: <a href="https://www.youtube.com/playlist?list={{ playlist_info.playlist_id }}" target="_blank">Active</a></p>
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p> {% else %}
<div id="text-reveal" class="description-text"> <p>Youtube: Deactivated</p>
{{ playlist_info.playlist_description|linebreaks }} {% endif %}
</div> <button onclick="deleteConfirm()" id="delete-item">Delete Playlist</button>
</div> <div class="delete-confirm" id="delete-button">
{% endif %} <span>Delete {{ playlist_info.playlist_name }}?</span>
<div id="player" class="video-player"></div> <button onclick="deletePlaylist(this)" data-action="metadata" data-id="{{ playlist_info.playlist_id }}">Delete metadata</button>
<div class="view-controls"> <button onclick="deletePlaylist(this)" data-action="all" class="danger-button" data-id="{{ playlist_info.playlist_id }}">Delete all</button><br>
<div class="toggle"> <button onclick="cancelDelete()">Cancel</button>
<span>Hide watched videos:</span>
<div class="toggleBox">
<input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox"
{% if hide_watched %}checked{% endif %}>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div>
</div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div>
</div>
<div class="video-list {{ view_style }}">
{% if videos %}
{% for video in videos %}
<div class="video-item {{ view_style }}">
<a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/{{ video.source.vid_thumb_url }}" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
<div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb">
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
</div>
<div class="video-play">
<img src="{% static 'img/icon-play.svg' %}" alt="play-icon">
</div>
</div>
</a>
<div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
{% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
{% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div>
<div>
<a class="video-more" href="{% url 'video' video.source.youtube_id %}"><h2>{{ video.source.title }}</h2></a>
</div>
</div> </div>
</div> </div>
{% endfor %} </div>
{% else %} <div class="info-box-item">
<h2>No videos found...</h2> <div>
{% if max_hits %}
<p>Total Videos archived: {{ max_hits }}/{{ playlist_info.playlist_entries|length }}</p>
<p>Watched: <button title="Mark all videos from {{ playlist_info.playlist_name }} as watched" type="button" id="watched-button" data-id="{{ playlist_info.playlist_id }}" onclick="isWatchedButton(this)">Mark as watched</button></p>
{% endif %}
</div>
</div>
</div>
{% if playlist_info.playlist_description %}
<div class="info-box-item description-box">
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
<div id="text-reveal" class="description-text">
{{ playlist_info.playlist_description|linebreaks }}
</div>
</div>
{% endif %} {% endif %}
<div id="player" class="video-player"></div>
<div class="view-controls">
<div class="toggle">
<span>Hide watched videos:</span>
<div class="toggleBox">
<input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox"
{% if hide_watched %}checked{% endif %}>
<label for="" class="onbtn">On</label>
<label for="" class="ofbtn">Off</label>
</div>
</div>
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div>
</div>
<div class="video-list {{ view_style }}">
{% if videos %}
{% for video in videos %}
<div class="video-item {{ view_style }}">
<a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/{{ video.source.vid_thumb_url }}" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
<div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb">
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
</div>
<div class="video-play">
<img src="{% static 'img/icon-play.svg' %}" alt="play-icon">
</div>
</div>
</a>
<div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
{% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
{% endif %}
<span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
</div>
<div>
<a class="video-more" href="{% url 'video' video.source.youtube_id %}"><h2>{{ video.source.title }}</h2></a>
</div>
</div>
</div>
{% endfor %}
{% else %}
<h2>No videos found...</h2>
{% endif %}
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View File

@ -1,188 +1,190 @@
{% extends "home/base.html" %} {% extends "home/base.html" %}
{% block content %} {% block content %}
<div class="title-bar"> <div class="boxed-content">
<h1>User Configurations</h1>
</div>
<form action="/settings/" method="POST" name="user-update">
{% csrf_token %}
<div class="settings-group">
<h2>Color scheme</h2>
<div class="settings-item">
<p>Current color scheme: <span class="settings-current">{{ config.application.colors }}</span></p>
<i>Select your preferred color scheme between dark and light mode.</i><br>
{{ user_form.colors }}
</div>
</div>
<div class="settings-group">
<h2>Archive View</h2>
<div class="settings-item">
<p>Current page size: <span class="settings-current">{{ config.archive.page_size }}</span></p>
<i>Result of videos showing in archive page</i><br>
{{ user_form.page_size }}
</div>
</div>
<button type="submit" name="user-settings">Update User Configurations</button>
</form>
<div class="title-bar">
<h1>Application Configurations</h1>
</div>
<form action="/settings/" method="POST" name="application-update">
{% csrf_token %}
<div class="settings-group">
<h2 id="subscriptions">Subscriptions</h2>
<div class="settings-item">
<p>Current page size: <span class="settings-current">{{ config.subscriptions.channel_size }}</span></p>
<i>Recent videos for channels and playlist to check when running <b>Rescan subscriptions</b>, max recommended 50.</i><br>
{{ app_form.subscriptions_channel_size }}
</div>
<div class="settings-item">
<p>Auto scan subscribed channels:</p>
<i>Coming soon</i>
</div>
<div class="settings-item">
<p>Auto download pending:</p>
<i>Coming soon</i>
</div>
</div>
<div class="settings-group">
<h2 id="downloads">Downloads</h2>
<div class="settings-item">
<p>Current download limit: <span class="settings-current">{{ config.downloads.limit_count }}</span></p>
<i>Limit the number of videos getting downloaded on every run. 0 (zero) to deactivate.</i><br>
{{ app_form.downloads_limit_count }}
</div>
<div class="settings-item">
<p>Current download speed limit in KB/s: <span class="settings-current">{{ config.downloads.limit_speed }}</span></p>
<i>Limit download speed. 0 (zero) to deactivate, e.g. 1000 (1MB/s). Speeds are in KB/s.</i><br>
{{ app_form.downloads_limit_speed }}
</div>
<div class="settings-item">
<p>Current throttled rate limit in KB/s: <span class="settings-current">{{ config.downloads.throttledratelimit }}</span></p>
<i>Download will restart if speeds drop below specified amount. 0 (zero) to deactivate, e.g. 100. Speeds are in KB/s.</i><br>
{{ app_form.downloads_throttledratelimit }}
</div>
<div class="settings-item">
<p>Current scraping sleep interval: <span class="settings-current">{{ config.downloads.sleep_interval }}</p>
<i>Seconds to sleep between calls to YouTube. Might be necessary to avoid throttling. Recommended 3.</i><br>
{{ app_form.downloads_sleep_interval }}
</div>
<div class="settings-item">
<p>External downloader:</p>
<i>Coming soon</i>
</div>
</div>
<div class="settings-group">
<h2 id="format">Download Format</h2>
<div class="settings-item">
<p>Limit video and audio quality format for yt-dlp.<br>
Currently: <span class="settings-current">{{ config.downloads.format }}</span>
</p>
<p>Example configurations:</p>
<ul>
<li><span class="settings-current">bestvideo[height<=720]+bestaudio/best[height<=720]</span>: best audio and max video height of 720p.</li>
<li><span class="settings-current">bestvideo[height<=1080]+bestaudio/best[height<=1080]</span>: best audio and max video height of 1080p.</li>
<li><span class="settings-current">bestvideo[height<=1080][VCODEC=avc1]+bestaudio[ACODEC=mp4a]/mp4</span>: Max 1080p video height with iOS compatible video and audio codecs.</li>
<li><span class="settings-current">0</span>: deactivate and download the best quality possible as decided by yt-dlp.</li>
</ul>
<i>Make sure your custom format gets merged into a single file. Check out the <a href="https://github.com/yt-dlp/yt-dlp#format-selection" target="_blank">documentation</a> for valid configurations.</i><br>
{{ app_form.downloads_format }}
<br>
</div>
<div class="settings-item">
<p>Current metadata embed setting: <span class="settings-current">{{ config.downloads.add_metadata }}</span></p>
<i>Metadata is not embedded into the downloaded files by default.</i><br>
{{ app_form.downloads_add_metadata }}
</div>
<div class="settings-item">
<p>Current thumbnail embed setting: <span class="settings-current">{{ config.downloads.add_thumbnail }}</span></p>
<i>Embed thumbnail into the mediafile.</i><br>
{{ app_form.downloads_add_thumbnail }}
</div>
</div>
<button type="submit" name="application-settings">Update Application Configurations</button>
</form>
<div class="title-bar">
<h1>Scheduler setup</h1>
</div>
<form action="/settings/" method="POST" name="scheduler-update">
{% csrf_token %}
<div class="settings-group">
<div class="settings-item">
<h2>Rescan Subscriptions</h2>
<p>Periodically rescan your subscriptions.</p>
{{ scheduler_form.update_subscribed }}
</div>
<div class="settings-item">
<h2>Start download</h2>
<p>Periodically download videos.</p>
{{ scheduler_form.download_pending }}
</div>
<div class="settings-item">
<h2>Refresh Metadata</h2>
<p>Periodically refresh metadata from YouTube.</p>
{{ scheduler_form.check_reindex }}
</div>
<div class="settings-item">
<h2>Thumbnail check</h2>
<p>Periodically check and cleanup thumbnails.</p>
{{ scheduler_form.thumbnail_check }}
</div>
<div class="settings-item">
<h2>Index backup</h2>
<p>Periodically backup metadata.</p>
{{ scheduler_form.run_backup }}
</div>
</div>
<button type="submit" name="scheduler-settings">Update Scheduler Settings</button>
</form>
<div class="title-bar">
<h1>Actions</h1>
</div>
<div class="settings-group">
<h2>Manual media files import.</h2>
<p>Add files to the <span class="settings-current">cache/import</span> folder. Make sure to follow the instructions in the Github <a href="https://github.com/bbilly1/tubearchivist/wiki/Settings" target="_blank">Wiki</a>.</p>
<div id="manual-import">
<button onclick="manualImport()">Start import</button>
</div>
</div>
<div class="settings-group">
<h2>Embed thumbnails into media file.</h2>
<p>Set extracted youtube thumbnail as cover art of the media file.</p>
<div id="re-embed">
<button onclick="reEmbed()">Start process</button>
</div>
</div>
<div class="settings-group">
<h2>Backup database</h2>
<p>Export your database to a zip file stored at <span class="settings-current">cache/backup</span>.</p>
<div id="db-backup">
<button onclick="dbBackup()">Start backup</button>
</div>
</div>
<div class="settings-group">
<h2>Restore from backup</h2>
<p><span class="danger-zone">Danger Zone</span>: This will replace your existing index with the backup.</p>
<p>Add the backup zip file to the <span class="settings-current">cache/backup</span> folder.</p>
<div id="db-restore">
<button onclick="dbRestore()">Restore backup</button>
</div>
</div>
<div class="settings-group">
<h2>Rescan filesystem</h2>
<p><span class="danger-zone">Danger Zone</span>: This will delete the metadata of deleted videos from the filesystem.</p>
<p>Rescan your media folder looking for missing videos and clean up index. More infos on the Github <a href="https://github.com/bbilly1/tubearchivist/wiki/Settings" target="_blank">Wiki</a>.</p>
<div id="fs-rescan">
<button onclick="fsRescan()">Rescan filesystem</button>
</div>
</div>
{% if request.user.is_superuser %}
<div class="title-bar"> <div class="title-bar">
<h1>Users</h1> <h1>User Configurations</h1>
</div>
<form action="/settings/" method="POST" name="user-update">
{% csrf_token %}
<div class="settings-group">
<h2>Color scheme</h2>
<div class="settings-item">
<p>Current color scheme: <span class="settings-current">{{ config.application.colors }}</span></p>
<i>Select your preferred color scheme between dark and light mode.</i><br>
{{ user_form.colors }}
</div>
</div>
<div class="settings-group">
<h2>Archive View</h2>
<div class="settings-item">
<p>Current page size: <span class="settings-current">{{ config.archive.page_size }}</span></p>
<i>Result of videos showing in archive page</i><br>
{{ user_form.page_size }}
</div>
</div>
<button type="submit" name="user-settings">Update User Configurations</button>
</form>
<div class="title-bar">
<h1>Application Configurations</h1>
</div>
<form action="/settings/" method="POST" name="application-update">
{% csrf_token %}
<div class="settings-group">
<h2 id="subscriptions">Subscriptions</h2>
<div class="settings-item">
<p>Current page size: <span class="settings-current">{{ config.subscriptions.channel_size }}</span></p>
<i>Recent videos for channels and playlist to check when running <b>Rescan subscriptions</b>, max recommended 50.</i><br>
{{ app_form.subscriptions_channel_size }}
</div>
<div class="settings-item">
<p>Auto scan subscribed channels:</p>
<i>Coming soon</i>
</div>
<div class="settings-item">
<p>Auto download pending:</p>
<i>Coming soon</i>
</div>
</div>
<div class="settings-group">
<h2 id="downloads">Downloads</h2>
<div class="settings-item">
<p>Current download limit: <span class="settings-current">{{ config.downloads.limit_count }}</span></p>
<i>Limit the number of videos getting downloaded on every run. 0 (zero) to deactivate.</i><br>
{{ app_form.downloads_limit_count }}
</div>
<div class="settings-item">
<p>Current download speed limit in KB/s: <span class="settings-current">{{ config.downloads.limit_speed }}</span></p>
<i>Limit download speed. 0 (zero) to deactivate, e.g. 1000 (1MB/s). Speeds are in KB/s.</i><br>
{{ app_form.downloads_limit_speed }}
</div>
<div class="settings-item">
<p>Current throttled rate limit in KB/s: <span class="settings-current">{{ config.downloads.throttledratelimit }}</span></p>
<i>Download will restart if speeds drop below specified amount. 0 (zero) to deactivate, e.g. 100. Speeds are in KB/s.</i><br>
{{ app_form.downloads_throttledratelimit }}
</div>
<div class="settings-item">
<p>Current scraping sleep interval: <span class="settings-current">{{ config.downloads.sleep_interval }}</p>
<i>Seconds to sleep between calls to YouTube. Might be necessary to avoid throttling. Recommended 3.</i><br>
{{ app_form.downloads_sleep_interval }}
</div>
<div class="settings-item">
<p>External downloader:</p>
<i>Coming soon</i>
</div>
</div>
<div class="settings-group">
<h2 id="format">Download Format</h2>
<div class="settings-item">
<p>Limit video and audio quality format for yt-dlp.<br>
Currently: <span class="settings-current">{{ config.downloads.format }}</span>
</p>
<p>Example configurations:</p>
<ul>
<li><span class="settings-current">bestvideo[height<=720]+bestaudio/best[height<=720]</span>: best audio and max video height of 720p.</li>
<li><span class="settings-current">bestvideo[height<=1080]+bestaudio/best[height<=1080]</span>: best audio and max video height of 1080p.</li>
<li><span class="settings-current">bestvideo[height<=1080][VCODEC=avc1]+bestaudio[ACODEC=mp4a]/mp4</span>: Max 1080p video height with iOS compatible video and audio codecs.</li>
<li><span class="settings-current">0</span>: deactivate and download the best quality possible as decided by yt-dlp.</li>
</ul>
<i>Make sure your custom format gets merged into a single file. Check out the <a href="https://github.com/yt-dlp/yt-dlp#format-selection" target="_blank">documentation</a> for valid configurations.</i><br>
{{ app_form.downloads_format }}
<br>
</div>
<div class="settings-item">
<p>Current metadata embed setting: <span class="settings-current">{{ config.downloads.add_metadata }}</span></p>
<i>Metadata is not embedded into the downloaded files by default.</i><br>
{{ app_form.downloads_add_metadata }}
</div>
<div class="settings-item">
<p>Current thumbnail embed setting: <span class="settings-current">{{ config.downloads.add_thumbnail }}</span></p>
<i>Embed thumbnail into the mediafile.</i><br>
{{ app_form.downloads_add_thumbnail }}
</div>
</div>
<button type="submit" name="application-settings">Update Application Configurations</button>
</form>
<div class="title-bar">
<h1>Scheduler setup</h1>
</div>
<form action="/settings/" method="POST" name="scheduler-update">
{% csrf_token %}
<div class="settings-group">
<div class="settings-item">
<h2>Rescan Subscriptions</h2>
<p>Periodically rescan your subscriptions.</p>
{{ scheduler_form.update_subscribed }}
</div>
<div class="settings-item">
<h2>Start download</h2>
<p>Periodically download videos.</p>
{{ scheduler_form.download_pending }}
</div>
<div class="settings-item">
<h2>Refresh Metadata</h2>
<p>Periodically refresh metadata from YouTube.</p>
{{ scheduler_form.check_reindex }}
</div>
<div class="settings-item">
<h2>Thumbnail check</h2>
<p>Periodically check and cleanup thumbnails.</p>
{{ scheduler_form.thumbnail_check }}
</div>
<div class="settings-item">
<h2>Index backup</h2>
<p>Periodically backup metadata.</p>
{{ scheduler_form.run_backup }}
</div>
</div>
<button type="submit" name="scheduler-settings">Update Scheduler Settings</button>
</form>
<div class="title-bar">
<h1>Actions</h1>
</div> </div>
<div class="settings-group"> <div class="settings-group">
<h2>User Management</h2> <h2>Manual media files import.</h2>
<p>Access the admin interface for basic user management functionality like adding and deleting users, changing passwords and more.</p> <p>Add files to the <span class="settings-current">cache/import</span> folder. Make sure to follow the instructions in the Github <a href="https://github.com/bbilly1/tubearchivist/wiki/Settings" target="_blank">Wiki</a>.</p>
<a href="/admin/"><button>Admin Interface</button></a> <div id="manual-import">
<button onclick="manualImport()">Start import</button>
</div>
</div> </div>
{% endif %} <div class="settings-group">
<h2>Embed thumbnails into media file.</h2>
<p>Set extracted youtube thumbnail as cover art of the media file.</p>
<div id="re-embed">
<button onclick="reEmbed()">Start process</button>
</div>
</div>
<div class="settings-group">
<h2>Backup database</h2>
<p>Export your database to a zip file stored at <span class="settings-current">cache/backup</span>.</p>
<div id="db-backup">
<button onclick="dbBackup()">Start backup</button>
</div>
</div>
<div class="settings-group">
<h2>Restore from backup</h2>
<p><span class="danger-zone">Danger Zone</span>: This will replace your existing index with the backup.</p>
<p>Add the backup zip file to the <span class="settings-current">cache/backup</span> folder.</p>
<div id="db-restore">
<button onclick="dbRestore()">Restore backup</button>
</div>
</div>
<div class="settings-group">
<h2>Rescan filesystem</h2>
<p><span class="danger-zone">Danger Zone</span>: This will delete the metadata of deleted videos from the filesystem.</p>
<p>Rescan your media folder looking for missing videos and clean up index. More infos on the Github <a href="https://github.com/bbilly1/tubearchivist/wiki/Settings" target="_blank">Wiki</a>.</p>
<div id="fs-rescan">
<button onclick="fsRescan()">Rescan filesystem</button>
</div>
</div>
{% if request.user.is_superuser %}
<div class="title-bar">
<h1>Users</h1>
</div>
<div class="settings-group">
<h2>User Management</h2>
<p>Access the admin interface for basic user management functionality like adding and deleting users, changing passwords and more.</p>
<a href="/admin/"><button>Admin Interface</button></a>
</div>
{% endif %}
</div>
{% endblock content %} {% endblock content %}

View File

@ -2,110 +2,112 @@
{% block content %} {% block content %}
{% load static %} {% load static %}
{% load humanize %} {% load humanize %}
<div class="video-main"> <div class="boxed-content">
<video <div class="video-main">
src="/media/{{ video.media_url }}" <video
poster="/cache/{{ video.vid_thumb_url }}" controls preload="false" src="/media/{{ video.media_url }}"
type='video/mp4' width="100%" playsinline> poster="/cache/{{ video.vid_thumb_url }}" controls preload="false"
</video> type='video/mp4' width="100%" playsinline>
<h1>{{ video.title }}</h1> </video>
</div> <h1>{{ video.title }}</h1>
<div class="info-box info-box-3">
<div class="info-box-item">
<div class="round-img">
<a href="{% url 'channel_id' video.channel.channel_id %}">
<img src="/cache/channels/{{ video.channel.channel_id }}_thumb.jpg" alt="channel-thumb">
</a>
</div>
<div>
<h3><a href="{% url 'channel_id' video.channel.channel_id %}">{{ video.channel.channel_name }}</a></h3>
{% if video.channel.channel_subs >= 1000000 %}
<p>Subscribers: {{ video.channel.channel_subs|intword }}</p>
{% else %}
<p>Subscribers: {{ video.channel.channel_subs|intcomma }}</p>
{% endif %}
</div>
</div> </div>
<div class="info-box-item"> <div class="info-box info-box-3">
<div> <div class="info-box-item">
<p>Published: {{ video.published }}</p> <div class="round-img">
<p>Last refreshed: {{ video.vid_last_refresh }}</p> <a href="{% url 'channel_id' video.channel.channel_id %}">
<p class="video-info-watched">Watched: <img src="/cache/channels/{{ video.channel.channel_id }}_thumb.jpg" alt="channel-thumb">
{% if video.player.watched %} </a>
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched"> </div>
<div>
<h3><a href="{% url 'channel_id' video.channel.channel_id %}">{{ video.channel.channel_name }}</a></h3>
{% if video.channel.channel_subs >= 1000000 %}
<p>Subscribers: {{ video.channel.channel_subs|intword }}</p>
{% else %} {% else %}
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched."> <p>Subscribers: {{ video.channel.channel_subs|intcomma }}</p>
{% endif %} {% endif %}
</p>
{% if video.active %}
<p>Youtube: <a href="https://www.youtube.com/watch?v={{ video.youtube_id }}" target="_blank">Active</a></p>
{% else %}
<p>Youtube: Deactivated</p>
{% endif %}
<button onclick="deleteConfirm()" id="delete-item">Delete Video</button>
<div class="delete-confirm" id="delete-button">
<span>Are you sure? </span><button class="danger-button" onclick="deleteVideo(this)" data-id="{{ video.youtube_id }}" data-redirect = "{{ video.channel.channel_id }}">Delete</button> <button onclick="cancelDelete()">Cancel</button>
</div> </div>
</div> </div>
</div> <div class="info-box-item">
<div class="info-box-item"> <div>
<div> <p>Published: {{ video.published }}</p>
<p>Views: {{ video.stats.view_count|intcomma }}</p> <p>Last refreshed: {{ video.vid_last_refresh }}</p>
<p class="thumb-icon like"><img src="{% static 'img/icon-thumb.svg' %}" alt="thumbs-up">: {{ video.stats.like_count|intcomma }}</p> <p class="video-info-watched">Watched:
<p class="thumb-icon dislike"><img src="{% static 'img/icon-thumb.svg' %}" alt="thumbs-down">: {{ video.stats.dislike_count|intcomma }}</p> {% if video.player.watched %}
{% if video.stats.average_rating %} <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
<p class="rating-stars">Rating: {% else %}
{% for star in video.stats.average_rating %} <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
<img src="/static/img/icon-star-{{ star }}.svg" alt="{{ star }}"> {% endif %}
{% endfor %}
</p> </p>
{% endif %} {% if video.active %}
</div> <p>Youtube: <a href="https://www.youtube.com/watch?v={{ video.youtube_id }}" target="_blank">Active</a></p>
</div> {% else %}
</div> <p>Youtube: Deactivated</p>
{% if video.description %} {% endif %}
<div class="info-box-item description-box"> <button onclick="deleteConfirm()" id="delete-item">Delete Video</button>
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p> <div class="delete-confirm" id="delete-button">
<div id="text-reveal" class="description-text"> <span>Are you sure? </span><button class="danger-button" onclick="deleteVideo(this)" data-id="{{ video.youtube_id }}" data-redirect = "{{ video.channel.channel_id }}">Delete</button> <button onclick="cancelDelete()">Cancel</button>
{{ video.description|linebreaks }}
</div>
</div>
{% endif %}
{% if playlist_nav %}
{% for playlist_item in playlist_nav %}
<div class="playlist-wrap">
<a href="{% url 'playlist_id' playlist_item.playlist_meta.playlist_id %}">
<h3>Playlist [{{ playlist_item.playlist_meta.current_idx|add:"1" }}]: {{ playlist_item.playlist_meta.playlist_name }}</h3>
</a>
<div class="playlist-nav">
<div class="playlist-nav-item">
{% if playlist_item.playlist_previous %}
<a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
<img src="/cache/{{ playlist_item.playlist_previous.vid_thumb }}" alt="previous thumbnail">
</a>
<div class="playlist-desc">
<p>Previous:</p>
<a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
<h3>[{{ playlist_item.playlist_previous.idx|add:"1" }}] {{ playlist_item.playlist_previous.title }}</h3>
</a>
</div>
{% endif %}
</div>
<div class="playlist-nav-item">
{% if playlist_item.playlist_next %}
<div class="playlist-desc">
<p>Next:</p>
<a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
<h3>[{{ playlist_item.playlist_next.idx|add:"1" }}] {{ playlist_item.playlist_next.title }}</h3>
</a>
</div>
<a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
<img src="/cache/{{ playlist_item.playlist_next.vid_thumb }}" alt="previous thumbnail">
</a>
{% endif %}
</div> </div>
</div> </div>
</div> </div>
{% endfor %} <div class="info-box-item">
{% endif %} <div>
<p>Views: {{ video.stats.view_count|intcomma }}</p>
<p class="thumb-icon like"><img src="{% static 'img/icon-thumb.svg' %}" alt="thumbs-up">: {{ video.stats.like_count|intcomma }}</p>
<p class="thumb-icon dislike"><img src="{% static 'img/icon-thumb.svg' %}" alt="thumbs-down">: {{ video.stats.dislike_count|intcomma }}</p>
{% if video.stats.average_rating %}
<p class="rating-stars">Rating:
{% for star in video.stats.average_rating %}
<img src="/static/img/icon-star-{{ star }}.svg" alt="{{ star }}">
{% endfor %}
</p>
{% endif %}
</div>
</div>
</div>
{% if video.description %}
<div class="info-box-item description-box">
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
<div id="text-reveal" class="description-text">
{{ video.description|linebreaks }}
</div>
</div>
{% endif %}
{% if playlist_nav %}
{% for playlist_item in playlist_nav %}
<div class="playlist-wrap">
<a href="{% url 'playlist_id' playlist_item.playlist_meta.playlist_id %}">
<h3>Playlist [{{ playlist_item.playlist_meta.current_idx|add:"1" }}]: {{ playlist_item.playlist_meta.playlist_name }}</h3>
</a>
<div class="playlist-nav">
<div class="playlist-nav-item">
{% if playlist_item.playlist_previous %}
<a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
<img src="/cache/{{ playlist_item.playlist_previous.vid_thumb }}" alt="previous thumbnail">
</a>
<div class="playlist-desc">
<p>Previous:</p>
<a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
<h3>[{{ playlist_item.playlist_previous.idx|add:"1" }}] {{ playlist_item.playlist_previous.title }}</h3>
</a>
</div>
{% endif %}
</div>
<div class="playlist-nav-item">
{% if playlist_item.playlist_next %}
<div class="playlist-desc">
<p>Next:</p>
<a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
<h3>[{{ playlist_item.playlist_next.idx|add:"1" }}] {{ playlist_item.playlist_next.title }}</h3>
</a>
</div>
<a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
<img src="/cache/{{ playlist_item.playlist_next.vid_thumb }}" alt="previous thumbnail">
</a>
{% endif %}
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
{% endblock content %} {% endblock content %}