all_playlists.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. {% extends 'base.html' %}
  2. {% block content %}
  3. <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3">
  4. <h1 class="h2"><span style="border-bottom: 3px #e24949 dashed;">{{ playlist_type_display|title }}</span> <span class="badge bg-primary rounded-pill">{{ playlists.count }}</span></h1>
  5. {% if playlists %}
  6. <div class="btn-toolbar mb-2 mb-md-0">
  7. <!--
  8. <div class="btn-group me-2">
  9. <button type="button" class="btn btn-outline-info">Grid</button>
  10. <button type="button" class="btn btn-outline-info">List</button>
  11. </div>
  12. -->
  13. <div class="btn-group">
  14. <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  15. Sort By
  16. </button>
  17. <ul class="dropdown-menu">
  18. <li class="dropdown-item"><a hx-get="{% url 'order_playlists_by' playlist_type 'playlist-duration-in-seconds' %}" hx-trigger="click" hx-target="#search-results">Duration</a></li>
  19. <li class="dropdown-item"><a hx-get="{% url 'order_playlists_by' playlist_type 'video-count' %}" hx-trigger="click" hx-target="#search-results"># Videos</a></li>
  20. <li class="dropdown-item"><a hx-get="{% url 'order_playlists_by' playlist_type 'recently-accessed' %}" hx-trigger="click" hx-target="#search-results">Recently Accessed</a></li>
  21. </ul>
  22. </div>
  23. </div>
  24. {% endif %}
  25. </div>
  26. {% if playlists %}
  27. <input class="form-control border border-secondary" type="text"
  28. name="search" placeholder="Begin to search playlists..."
  29. hx-post="{% url 'search_playlists' playlist_type %}"
  30. hx-trigger="keyup changed delay:700ms"
  31. hx-target="#search-results"
  32. hx-indicator=".htmx-indicator"
  33. aria-describedby="searchHelp">
  34. <div id="searchHelp" class="form-text">For a more extensive playlist search, click the search icon in the nav bar.</div>
  35. <br>
  36. <div id="search-results" class="row row-cols-1 row-cols-md-4 g-4">
  37. {% include 'intercooler/playlists.html' with show_controls=True %}
  38. </div>
  39. {% else %}
  40. <div class="card bg-dark text-white mb-3">
  41. <div class="card-body">
  42. <div class="d-flex justify-content-center h3">
  43. Nothing here!
  44. </div>
  45. <div class="d-flex justify-content-center h5">
  46. {% if playlist_type == "watching" %}
  47. You can mark a playlist as watching by heading over to the playlist and marking it from the dropdown.
  48. {% elif playlist_type == "all" %}
  49. There's no playlists in your UnTube right now.
  50. {% elif playlist_type == "imported" %}
  51. To import public playlists into your UnTube collection you can head over to <a href="{% url 'manage_playlists' %}" class="btn btn-sm btn-primary ms-2">Manage</a>
  52. {% elif playlist_type == "plan-to-watch" %}
  53. You can mark a playlist as plan to watch by heading over to the playlist and marking it from the dropdown.
  54. {% elif playlist_type == "favorites" %}
  55. You can mark a playlist as favorite by heading over to the playlist page and pressing the star icon.
  56. {% elif playlist_type == "user-owned" %}
  57. {% if user.profile.imported_yt_playlists %}
  58. Looks like you have no playlists on YouTube.
  59. {% else %}
  60. You can always head over to your <a href="{% url 'profile' %}" class="btn btn-sm btn-primary ms-2 me-2">Profile</a> to import all of your public/private YouTube playlists.
  61. {% endif %}
  62. {% else %}
  63. {{ playlist_type }}
  64. {% endif %}
  65. </div>
  66. </div>
  67. </div>
  68. {% endif %}
  69. <br>
  70. {% endblock %}