tubearchivist/tubearchivist/home/templates/home/playlist_id.html

{% extends "home/base.html" %}
{% load static %}
{% load humanize %}
{% block content %}
<div class="title-bar">
    <h1>{{ playlist_info.playlist_name }}</h1>
</div>
<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 class="info-box-item">
        <div>
            <p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p>
            <p>Subscribed: 
                {% if playlist_info.playlist_subscribed %}
                    <button type="button" id="{{ playlist_info.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button>
                {% else %}
                    <button type="button" id="{{ playlist_info.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
                {% 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 class="info-box-item">
        <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 %}
<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>
{% endblock content %}