UnTube/apps/main/templates/view_playlist.html

{% extends 'base.html' %}
{% load humanize %}
{% load static %}

{% block content %}

    <div id="view_playlist">



    {% if playlist.has_playlist_changed %}
        <div hx-get="{% url 'update_playlist' playlist.playlist_id 'auto' %}" hx-trigger="load" hx-swap="outerHTML">
            <div class="d-flex justify-content-center mt-4 mb-3" id="loading-sign">
                <img src="{% static 'svg-loaders/circles.svg' %}" width="40" height="40">
                <h5 class="mt-2 ms-2">Updating playlist '{{ playlist.name }}', please wait!</h5>
            </div>
        </div>
    {% else %}
    <div class="sticky-top mb-3" style="top: 0.5rem;">
        <div hx-get="{% url 'update_playlist' playlist.playlist_id 'checkforupdates' %}" hx-trigger="load" hx-swap="outerHTML" id="checkforupdates">

        </div>
        {% if playlist.marked_as == "watching" %}
            <div id="playlist-watch-message">
                {% include 'intercooler/playlist_watch_message.html' %}
            </div>
        {% endif %}
    </div>
    <div class="list-group-item list-group-item-action active">
        <div class="d-flex w-100 justify-content-between">
            <span>
                <h2 class="mb-1"><a href="https://www.youtube.com/playlist?list={{ playlist.playlist_id }}" target="_blank" style="color: white; text-decoration: none">{{ playlist.name }}</a> <small>{% if playlist.user_label %}<span class="h3" style="border-bottom: 3px #ffffff dashed;">a.k.a {{ playlist.user_label }}</span>{% endif %}</small>
                    <small>

                        <input class="form-control me-1 visually-hidden" id="pl-{{ playlist.playlist_id }}" value="{{ playlist.playlist_id }}">
                        <button class="copy-btn btn  btn-light mb-1" data-clipboard-target="#pl-{{ playlist.playlist_id }}">
                            <i class="far fa-copy" aria-hidden="true"></i>
                        </button>
                    </small> </h2>
                <h6>by {{ playlist.channel_name }}</h6>
            </span>
            <h4>
                <span id="notice-div">
                    {% if playlist.marked_as != "none" %}
                    <span class="badge bg-success text-white" >
                        {% if playlist.marked_as == "watching" %}
                            <i class="fas fa-fire-alt me-1"></i>
                        {% elif playlist.marked_as == "plan-to-watch"%}
                            <i class="fas fa-flag me-1"></i>
                        {% endif %}
                        {{ playlist.marked_as }}
                    </span>
                    {% endif %}
                </span>
            </h4>
        </div>
        <p class="mb-1">
            {% if playlist.description %}
            <h5>{{ playlist.description|truncatewords:"50"|linebreaksbr }}</h5>
            {% else %}
            <h5>No description</h5>
            {% endif %}
        </p>
        <h6 class="h6 text-uppercase">
            <span class="badge bg-light text-black-50">{% if playlist.is_user_owned %}OWNED{% else %}IMPORTED{% endif %}</span>

            <span class="badge bg-light text-black-50">{{ playlist.video_count }} VIDEOS</span>
            <span class="badge bg-light text-black-50">{{ playlist.playlist_duration }} </span>
            <span class="badge bg-light text-black-50">{% if playlist.is_private_on_yt %}PRIVATE{% else %}PUBLIC{% endif %}</span>
            {% if playlist.has_unavailable_videos %}
                    <span class="badge bg-light text-black-50">SOME VIDEOS ARE UNAVAILABLE</span>
            {% endif %}
            {% if playlist.has_duplicate_videos %}
                    <span class="badge bg-light text-black-50">DUPLICATE VIDEOS</span>
            {% endif %}
        </h6>
        <h6 class="h6 pt-1">

            Tags:
            <span class="text-uppercase">
                <span id="playlist-tags">
                {% for tag in playlist_tags %}
                    <span id="tag-{{ tag.name|slugify }}">
                    <span class="badge rounded-pill bg-info mb-lg-1">
                        <a href="{% url 'tagged_playlists' tag.name %}" style="text-decoration: none; color: white">{{ tag.name }} </a>
                        <a class="ms-1" hx-post="{% url 'remove_playlist_tag' playlist.playlist_id tag.name %}" hx-trigger="click" hx-target="#tag-{{ tag.name|slugify }}"><i class="fas fa-times-circle"></i></a></span>
                    </span>
                {% endfor %}
                </span>
            <a data-bs-toggle="collapse" href="#addTagsCollapse" role="button" aria-expanded="false" aria-controls="addTagsCollapse">
              <span class="badge rounded-pill bg-warning mb-lg-2"><i class="fas fa-plus"></i>{% if playlist_tags.count == 0 %} add a tag{% endif %}</span>
            </a>
            </span>
            <div class="collapse" id="addTagsCollapse">
                <div class="card card-body bg-dark text-white">

      <h5>Add a tag to this playlist</h5>

        {% if unused_tags %}
      <div class="d-flex justify-content-start mt-2">
              <select class="form-select w-50 bg-dark text-white border border-secondary" name="playlistTag" hx-get="{% url 'get_unused_playlist_tags' playlist.playlist_id %}" hx-trigger="click" hx-target="#unused-playlist-tags">
                  <option selected>Pick from existing unused tags</option>
                    <span id="unused-playlist-tags">
                        {% for tag in unused_tags %}
                          <option value="{{ tag.name }}">{{ tag.name }}</option>
                        {% endfor %}
                    </span>
              </select>
            <div class="btn-group ms-2">
                <button type="button" class="btn btn-warning" hx-post="{% url 'add_playlist_tag' playlist.playlist_id %}" hx-trigger="click" hx-include="[name='playlistTag']" hx-target="this">Add Tag</button>
            </div>
      </div>
    <div class="d-flex justify-content-start mt-3 mb-2">
          - OR -
      </div>
        {% endif %}

      <div class="d-flex justify-content-start mt-2">
           <input class="form-control w-50 bg-dark text-white border border-secondary" placeholder="Enter a new tag name here" name="createTagField">
          <div class="btn-group ms-2">
            <button type="button" class="btn btn-warning" hx-post="{% url 'create_playlist_tag' playlist.playlist_id %}" hx-trigger="click" hx-include="[name='createTagField']" hx-target="this">Create & Add Tag</button>
          </div>
      </div>

    </div>

            </div>
        </h6>
    </div>


    <br>

    <div id="row1">
    <div class="d-flex bd-highlight mb-1">
        <div class="me-auto bd-highlight">
            <div class="btn-toolbar mb-2 mb-md-0">
                <!--
                <div class="btn-group me-2">
                    <button type="button" class="btn {% if playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">Grid</button>
                    <button type="button" class="btn {% if not playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">List</button>
                </div>
                -->
                {% if videos.count != 0 %}
                <div class="btn-group me-2">
                    <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                        Sort By
                    </button>
                    <ul class="dropdown-menu">
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'all' %}" hx-trigger="click" hx-target="#videos-div">All</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'favorites' %}" hx-trigger="click" hx-target="#videos-div">Favorites</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'popularity' %}" hx-trigger="click" hx-target="#videos-div">Popularity</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'date-published' %}" hx-trigger="click" hx-target="#videos-div">Date Published</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'views' %}" hx-trigger="click" hx-target="#videos-div">Views</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'has-cc' %}" hx-trigger="click" hx-target="#videos-div">Has CC</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'duration' %}" hx-trigger="click" hx-target="#videos-div">Duration</button></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'new-updates' %}" hx-trigger="click" hx-target="#videos-div">Updates</button></li>
                        <li><button class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'unavailable-videos' %}" hx-trigger="click" hx-target="#videos-div">Unavailable</button></li>

                    </ul>
                </div>
                {% endif %}


                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            Mark As
                        </button>
                        <ul class="dropdown-menu">
                            <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'none' %}" hx-trigger="click" hx-target="#notice-div">None</button></li>
                            <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'watching' %}" hx-trigger="click" hx-target="#notice-div">Watching</button></li>
                            <li><button class="dropdown-item" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'plan-to-watch' %}" hx-trigger="click" hx-target="#notice-div">Plan to Watch</button></li>
                        </ul>
                    </div>
            </div>
        </div>

        <div class="bd-highlight">
            <div class="btn-toolbar mb-2 mb-md-0">

                    <div class="btn-group me-2">
                        <a hx-get="{% url 'update_playlist' playlist.playlist_id 'manual' %}" hx-target="#view_playlist" class="btn btn-secondary">
                            <i class="fas fa-sync"></i>
                        </a>
                    </div>

                    <div class="btn-group me-2">

                        <button class="btn btn-warning" type="button" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'favorite' %}" hx-target="#playlist-fav">
                            <div id="playlist-fav">
                                {% if playlist.is_favorite %}
                                    <i class="fas fa-star"></i>
                                {% else %}
                                    <i class="far fa-star"></i>
                                {% endif %}
                            </div>
                        </button>
                    </div>


                    <div class="btn-group me-2">
                        <a href="{% url 'view_playlist_settings' playlist.playlist_id %}" class="btn btn-primary">
                            <i class="fas fa-cog"></i>
                        </a>
                    </div>

                    {% if videos.count != 0 %}
                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-light" onclick="row1_hide()">Manage</button>
                    </div>
                    {% endif %}
            </div>
        </div>
    </div>
</div>
    <div id="row2" style="display: none">
        <div class="d-flex bd-highlight mb-1">
            <div class="me-auto bd-highlight">
                <div class="btn-toolbar mb-2 mb-md-0">
                    <div id="select-all-btn">
                        <div class="btn-group me-2">
                        <button type="button" class="btn btn-info" id="select-all-btn">Select All</button>
                    </div>
                    </div>
                    <div id="deselect-all-btn" style="display: none">
                        <div class="btn-group me-2">
                        <button type="button" class="btn btn-info" id="select-all-btn">De-select All</button>
                        </div>
                    </div>

                    <div class="btn-group me-2">
                        <!-- <button type="submit" form="my-form" class="btn btn-outline-success" data-bs-toggle="dropdown" aria-expanded="false">
                            Move
                        </button> -->
                           <button class="btn btn-success" id="move-copy-vids-btn" type="button" data-bs-toggle="collapse" data-bs-target="#moveItemsToCollapse" aria-expanded="false" aria-controls="moveItemsToCollapse">
                               {% if playlist.is_user_owned %}Move/{% endif %}Copy Videos
                           </button>
                    </div>


                    <!--
                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-outline-warning" data-bs-toggle="dropdown" aria-expanded="false">
                            Mark/Unmark Favorite
                        </button>
                    </div>
                    -->
                    {% if playlist.is_user_owned %}
                    <div class="btn-group me-2">
                        <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-include="[id='video-checkboxes']" hx-target="#delete-videos-confirm-box" type="button" id="delete-vids-btn" class="btn btn-danger" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
                            Delete Selected Videos
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>



            <div class="bd-highlight">
            <div class="btn-toolbar mb-2 mb-md-0">

                    <div class="btn-group me-2">
                        <button type="button" class="btn btn-light" onclick="row1_show()" id="manageBtn">Manage</button>
                    </div>

                </div>
        </div>

        </div>
    </div>
    <div id="row3" style="background-color: #0f5132">
    <div class="collapse border-danger" id="moveItemsToCollapse">
    <div class="card card-body bg-dark text-white">

      <h5>{% if playlist.is_user_owned %}Move or {% endif %}Copy videos to another playlist!</h5>

      <div class="d-flex justify-content-start">


          <div class="col-md-7 text-dark">
                <select class="visually-hidden" onchange="triggerSubmit()"
                     id="choices-multiple-remove-button" name="playlist-tags" placeholder="Select Playlists" multiple>
                    {% for pl in user_owned_playlists %}
                        {% if pl.playlist_id != playlist.playlist_id %}
                            <option value="{{ pl.playlist_id }}" class="text-dark">{{ pl.name }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
          </div>

      </div>

      <div class="d-flex justify-content-start mt-2">
          <!--
          <div class="btn-group">
              <a href="{% url 'all_playlists' 'all' %}" target="_blank" class="btn btn-sm btn-success" id="select-all-btn">Search for Playlists <i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
          </div>
          -->
          {% if playlist.is_user_owned %}
          <div class="btn-group me-2">
            <button type="button" class="btn btn-info" id="select-all-btn">Move!</button>
          </div>
          {% endif %}
          <div class="btn-group">
            <button type="button" class="btn btn-info" id="select-all-btn">Copy!</button>
          </div>
      </div>

    </div>
    </div>
    </div>
    <div id="row4" style="background-color: #0f5132">
          <div class="collapse border-danger" id="deleteItemsCollapse">
              <div class="card card-body bg-dark text-white-50">

                  <div id="delete-videos-confirm-box">
                  <h5>Are you sure you want to delete these 40 items from your YouTube playlist? This cannot be undone.</h5>
                </div>
                  <div class="d-flex justify-content-start">
                      <div class="btn-group ms-2">
                        <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirmed' %}" hx-include="[id='video-checkboxes']" type="button" class="btn btn-danger" id="select-all-btn">Yes!</button>
                      </div>
                      <div class="btn-group ms-2">
                        <button type="button" class="btn btn-secondary" id="select-all-btn">Nvm</button>
                      </div>
                      <div class="btn-group ms-2">
                        <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-include="[id='video-checkboxes']" hx-target="#delete-videos-confirm-box" type="button" class="btn btn-primary">
                            <i class="fas fa-sync"></i>
                        </button>
                    </div>
                  </div>

              </div>
            </div>
        </div>



    <div class="table-responsive" id="videos-div">
        <br>
        {% if videos %}
        <div class="list-group" id="video-checkboxes">
          {% for video in videos|slice:"0:50" %}

            <li {% if forloop.last and videos.count > 50 %}hx-get="{% url 'load_more_videos' playlist.playlist_id order_by|default:"all" page|default:"1" %}"
    hx-trigger="revealed"
    hx-swap="afterend" hx-indicator="#load-more-videos-spinner" {% endif %} class="list-group-item d-flex justify-content-between align-items-center bg-transparent" style="background-color: #40B3A2">

        {% if video.is_unavailable_on_yt and not video.was_deleted_on_yt %}

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ video.playlist_item_id }}" name="video-id">
                </div>
                  <div class="ms-4" style="max-width: 115px; max-height: 100px;">
                      <img src="https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg" class="img-fluid" alt="">
                  </div>
                    <div class="ms-4">
                        <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.video_id }}&list={{ video.playlist.playlist_id }}" target="_blank">
                            {{ video.video_position }}. {{ video.name }}
                        </a>
                        <br><br>
                    </div>
            </div>
          {% else %}

            <div class="d-flex justify-content-between align-items-center" >
                <div>
                    <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ video.playlist_item_id }}" name="video-id">
                </div>
                  <div class="ms-4" style="max-width: 115px; max-height: 100px;">


                      <img src="{% if video.thumbnail_url %}{{ video.thumbnail_url }}{% else %}https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg{% endif %}" class="img-fluid" alt="">
                   </div>
                    <div class="ms-4">

                        {% if video.is_unavailable_on_yt and video.was_deleted_on_yt %}
                            {{ video.video_position }}.
                            <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.video_id }}&list={{ video.playlist.playlist_id }}" target="_blank">
                                {{ video.name|truncatewords:"16" }}
                            </a>
                            <br>
                            <span class="badge bg-dark">VIDEO UNAVAILABLE</span>
                            {% if video.video_details_modified %}<span class="badge bg-danger">WENT PRIVATE/DELETED {{ video.updated_at|naturaltime|upper }}</span>{% endif %}
                            <br><br>
                        {% else %}
                            {{ video.video_position }}.
                            <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.video_id }}&list={{ video.playlist.playlist_id }}" target="_blank">
                                {{ video.name|truncatewords:"16" }}
                            </a> by {{ video.channel_name }} <br>
                            <span class="badge bg-secondary">{{ video.duration }}</span>
                            {% if video.has_cc %}<span class="badge bg-secondary">CC</span>{% endif %}
                            {% if video.published_at %}<span class="badge bg-secondary">{{ video.published_at }}</span>{% endif %}
                          {% if video.view_count %}<span class="badge bg-info">{{ video.view_count|intword|intcomma }} views</span>{% endif %}

                            {% if video.is_duplicate %}<span class="badge bg-primary">duplicate</span>{% endif %}
                            {% if video.video_details_modified %}<span class="badge bg-danger">{% if video.was_deleted_on_yt %}WENT PRIVATE/DELETED{% else %}ADDED{% endif %} {{ video.created_at|naturaltime|upper }}</span>{% endif %}<br>
                            <br>
                        {% endif %}


                    </div>
            </div>
            <div class="ms-5">
                {% if video.is_unavailable_on_yt and video.was_deleted_on_yt %}
                <button class="btn btn-sm  btn-warning mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasForVideoNotes" aria-controls="offcanvasBottom" hx-get="{% url 'video_notes' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-notes">Notes</button>
                <button class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist.playlist_id video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
                    <div id="video-{{ forloop.counter }}-fav">
                        {% if video.is_favorite %}
                            <i class="fas fa-heart"></i>
                        {% else %}
                            <i class="far fa-heart"></i>
                        {% endif %}
                    </div>
                </button>
                {% else %}

                <a class="btn btn-sm btn-info mb-1" type="button" href="https://www.youtube.com/watch?v={{ video.video_id }}" class="btn btn-info me-1" target="_blank"><i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
                <input class="form-control me-1 visually-hidden" id="video-{{ video.video_id }}" value="https://www.youtube.com/watch?v={{ video.video_id }}">
                <button class="copy-btn btn btn-sm  btn-success mb-1" data-clipboard-target="#video-{{ video.video_id }}">
                    <i class="far fa-copy" aria-hidden="true"></i>
                </button>
                <button class="btn btn-sm  btn-primary mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasBottom" hx-get="{% url 'video_details' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-details"><i class="fas fa-info"></i></button>
                <button class="btn btn-sm  btn-warning mb-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasForVideoNotes" aria-controls="offcanvasBottom" hx-get="{% url 'video_notes' playlist.playlist_id video.video_id %}" hx-trigger="click" hx-target="#video-notes">Notes</button>
                <button class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist.playlist_id video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
                    <div id="video-{{ forloop.counter }}-fav">
                        {% if video.is_favorite %}
                            <i class="fas fa-heart" style="color: #fafa06"></i>
                        {% else %}
                            <i class="far fa-heart"></i>
                        {% endif %}
                    </div>
                </button>
                {% if playlist.marked_as == "watching" %}
                <button class="btn btn-sm btn-light mb-1" type="button" hx-get="{% url 'mark_video_watched' playlist.playlist_id video.video_id %}" hx-target="#video-{{ forloop.counter }}-watched">
                    <div id="video-{{ forloop.counter }}-watched">
                        {% if video.is_marked_as_watched %}
                            <i class="fas fa-check-circle"></i>
                        {% else %}
                            <i class="far fa-check-circle"></i>
                        {% endif %}
                    </div>
                </button>
                {% endif %}
                {% endif %}
            </div>
          {% endif %}

            </li>

        {% endfor %}

        </div>
        {% else %}
                  <div class="card bg-dark text-white mb-3">
            <div class="card-body">
                <div class="d-flex justify-content-center align-content-center">
                    Playlist is empty ;-;
                </div>
                <div class="d-flex justify-content-center align-content-center">
                    Consider moving/copying videos from other playlists into this playlist by copying and using this playlist's ID.
                </div>

            </div>
            </div>

        {% endif %}

    </div>
    {% endif %}
    <div class="d-flex justify-content-center">
        <img id="load-more-videos-spinner" class="htmx-indicator mt-4" src="{% static 'svg-loaders/spinning-circles.svg' %}" width="40" height="40">
    </div>



    </div>


    <!--
      <script src="{% static 'youtube-audio-player/iframe-api.js' %}"></script>
  <script src="{% static 'youtube-audio-player/yt.min.js' %}"></script>
        -->
{% endblock %}