video_cards.html 4.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. {% load humanize %}
  2. {% for video in videos %}
  3. <div class="col">
  4. <div class="card overflow-auto" style="max-width: 540px; background-color: #1A4464;">
  5. <div class="row g-0">
  6. {% if not video.is_unavailable_on_yt and not video.was_deleted_on_yt %}
  7. <div class="col-md-4">
  8. <a href="{% url 'video' video.video_id %}" style="text-decoration: none; color: white">
  9. <img src="{{ video.thumbnail_url }}" class="img-fluid" style="width: 100%; height: 15vw; object-fit: cover;">
  10. </a>
  11. </div>
  12. {% endif %}
  13. <div class="col-md-8">
  14. <div class="card-body">
  15. <h5 class="card-title"><a href="{% url 'video' video.video_id %}" style="text-decoration: none; color: white">
  16. {% if video.user_label %}
  17. <span style="border-bottom: 3px #eeeaea dashed;">{{ video.user_label }}</span>
  18. {% else %}
  19. {{ video.name|truncatewords:"15" }}
  20. {% endif %}
  21. </a>
  22. </h5>
  23. {% if not video.is_unavailable_on_yt and not video.was_deleted_on_yt %}
  24. <h5 class="card-text">
  25. <small>
  26. <span class="badge bg-dark text-white-50">{{ video.duration }}</span>
  27. {% if video.is_unavailable_on_yt %}<span class="badge bg-light text-dark">Private</span>{% endif %}
  28. {% if video.has_cc %}<span class="badge bg-danger text-dark">CC</span>{% endif %}
  29. <span class="badge bg-info text-black-50"><i class="fas fa-eye"></i> {% if video.view_count == -1 %}HIDDEN{% else %}{{ video.view_count|intword|intcomma }}{% endif %}</span>
  30. <span class="badge bg-warning text-black-50"><i class="fas fa-thumbs-up"></i> {% if video.like_count == -1 %}HIDDEN{% else %}{{ video.like_count|intword|intcomma }}{% endif %}</span>
  31. </small>
  32. </h5>
  33. {% endif %}
  34. <span class="card-text d-flex justify-content-start">
  35. <a href="https://www.youtube.com/watch?v={{ video.video_id }}" class="btn btn-info me-1" target="_blank" id="share_link" style=""><i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
  36. <input class="form-control me-1 visually-hidden" id="video-{{ video.video_id }}" value="https://www.youtube.com/watch?v={{ video.video_id }}">
  37. <button class="copy-btn btn btn-success me-1" data-clipboard-target="#video-{{ video.video_id }}">
  38. <i class="far fa-copy" aria-hidden="true"></i>
  39. </button>
  40. <button class="btn btn-dark me-1" type="button" hx-get="{% url 'mark_video_favorite' video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
  41. <div id="video-{{ forloop.counter }}-fav">
  42. {% if video.is_favorite %}
  43. <i class="fas fa-heart" style="color: #fafa06"></i>
  44. {% else %}
  45. <i class="far fa-heart"></i>
  46. {% endif %}
  47. </div>
  48. </button>
  49. <button title="Mark or unmark video as plan to watch!" class="btn btn-warning" type="button" hx-get="{% url 'mark_video_planned_to_watch' video.video_id %}" hx-target="#video-{{ forloop.counter }}-planned">
  50. <div id="video-{{ forloop.counter }}-planned">
  51. {% if video.is_planned_to_watch %}
  52. <i class="fas fa-clock" style="color: #000000"></i>
  53. {% else %}
  54. <i class="far fa-clock"></i>
  55. {% endif %}
  56. </div>
  57. </button>
  58. </span>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. {% endfor %}