temp.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <div class="list-group-item list-group-item-action active">
  2. <div class="d-flex w-100 justify-content-between">
  3. <span>
  4. <h2 class="mb-1">{{ playlist.name }}
  5. <small>
  6. <input class="form-control me-1 visually-hidden" id="pl-{{ playlist.playlist_id }}" value="{{ playlist.playlist_id }}">
  7. <button class="copy-btn btn btn-light mb-1" data-clipboard-target="#pl-{{ playlist.playlist_id }}">
  8. <i class="far fa-copy" aria-hidden="true"></i>
  9. </button>
  10. </small> </h2>
  11. <h6>by {{ playlist.channel_name }}</h6>
  12. </span>
  13. <h4>
  14. <span id="notice-div">
  15. {% if playlist.marked_as != "none" %}
  16. <span class="badge bg-success text-white" >{{ playlist.marked_as|title }}</span>
  17. {% endif %}
  18. </span>
  19. </h4>
  20. </div>
  21. <p class="mb-1">
  22. {% if playlist.description %}
  23. <h5>{{ playlist.description }}</h5>
  24. {% else %}
  25. <h5>No description</h5>
  26. {% endif %}
  27. </p>
  28. <small>
  29. <span class="badge bg-dark rounded-pill">{{ playlist.video_count }} videos</span>
  30. <span class="badge bg-dark rounded-pill">{{ playlist.playlist_duration }} </span>
  31. {% if playlist.is_private_on_yt %}<span class="badge bg-dark rounded-pill">private</span>{% endif %}
  32. {% if playlist.has_unavailable_videos %}
  33. <span class="badge bg-dark rounded-pill">some videos are unavailable</span>
  34. {% endif %}
  35. {% if playlist.has_duplicate_videos %}
  36. <span class="badge bg-dark rounded-pill">duplicate videos</span>
  37. {% endif %}
  38. </small>
  39. </div>
  40. <br>
  41. <div id="row1">
  42. <div class="d-flex bd-highlight mb-1">
  43. <div class="me-auto bd-highlight">
  44. <div class="btn-toolbar mb-2 mb-md-0">
  45. <div class="btn-group me-2">
  46. <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  47. Sort By
  48. </button>
  49. <ul class="dropdown-menu">
  50. <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>
  51. <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>
  52. <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>
  53. <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>
  54. <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>
  55. <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>
  56. <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>
  57. <li><hr class="dropdown-divider"></li>
  58. <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>
  59. </ul>
  60. </div>
  61. <div class="btn-group me-2">
  62. <button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  63. Mark As
  64. </button>
  65. <ul class="dropdown-menu">
  66. <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>
  67. <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>
  68. <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>
  69. </ul>
  70. </div>
  71. </div>
  72. </div>
  73. <div class="bd-highlight">
  74. <div class="btn-toolbar mb-2 mb-md-0">
  75. <div class="btn-group me-2">
  76. <a hx-get="{% url 'update_playlist' playlist.playlist_id 'manual' %}" hx-target="#view_playlist" class="btn btn-secondary">
  77. <i class="fas fa-sync"></i>
  78. </a>
  79. </div>
  80. <div class="btn-group me-2">
  81. <button type="button" class="btn btn-danger">
  82. <i class="fas fa-dumpster-fire"></i>
  83. </button>
  84. </div>
  85. <div class="btn-group me-2">
  86. <button type="button" class="btn btn-primary">
  87. <i class="fas fa-edit"></i>
  88. </button>
  89. </div>
  90. <div class="btn-group me-2">
  91. <button class="btn btn-warning" type="button" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'favorite' %}" hx-target="#playlist-fav">
  92. <div id="playlist-fav">
  93. {% if playlist.is_favorite %}
  94. <i class="fas fa-star"></i>
  95. {% else %}
  96. <i class="far fa-star"></i>
  97. {% endif %}
  98. </div>
  99. </button>
  100. </div>
  101. <div class="btn-group me-2">
  102. <button type="button" class="btn btn-outline-light" onclick="row1_hide()">Manage</button>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. <div id="row2" style="display: none">
  109. <div class="d-flex bd-highlight mb-1">
  110. <div class="me-auto bd-highlight">
  111. <div class="btn-toolbar mb-2 mb-md-0">
  112. <div id="select-all-btn">
  113. <div class="btn-group me-2">
  114. <button type="button" class="btn btn-outline-info" id="select-all-btn">Select All</button>
  115. </div>
  116. </div>
  117. <div id="deselect-all-btn" style="display: none">
  118. <div class="btn-group me-2">
  119. <button type="button" class="btn btn-outline-info" id="select-all-btn">De-select All</button>
  120. </div>
  121. </div>
  122. <div class="btn-group me-2">
  123. <!-- <button type="submit" form="my-form" class="btn btn-outline-success" data-bs-toggle="dropdown" aria-expanded="false">
  124. Move
  125. </button> -->
  126. <button class="btn btn-outline-success" id="move-copy-vids-btn" type="button" data-bs-toggle="collapse" data-bs-target="#moveItemsToCollapse" aria-expanded="false" aria-controls="moveItemsToCollapse">
  127. Move/Copy Videos
  128. </button>
  129. </div>
  130. <!--
  131. <div class="btn-group me-2">
  132. <button type="button" class="btn btn-outline-warning" data-bs-toggle="dropdown" aria-expanded="false">
  133. Mark/Unmark Favorite
  134. </button>
  135. </div>
  136. -->
  137. <div class="btn-group me-2">
  138. <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-outline-danger" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
  139. Delete Selected
  140. </button>
  141. </div>
  142. </div>
  143. </div>
  144. <div class="bd-highlight">
  145. <div class="btn-toolbar mb-2 mb-md-0">
  146. <div class="btn-group me-2">
  147. <button type="button" class="btn btn-light" onclick="row1_show()">Manage</button>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. <div id="row3" style="background-color: #0f5132">
  154. <div class="collapse border-danger" id="moveItemsToCollapse">
  155. <div class="card card-body bg-dark text-white-50">
  156. <h5>Move or Copy videos to another playlist!</h5>
  157. <div class="d-flex justify-content-start">
  158. <input class="form-control w-50 bg-dark text-white border border-secondary" placeholder="Enter playlist ID here">
  159. <div class="btn-group ms-2">
  160. <button type="button" class="btn btn-info" id="select-all-btn">Move!</button>
  161. </div>
  162. <div class="btn-group ms-2">
  163. <button type="button" class="btn btn-info" id="select-all-btn">Copy!</button>
  164. </div>
  165. </div>
  166. <div class="d-flex justify-content-start mt-3">
  167. <div class="btn-group">
  168. <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>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. <div id="row4" style="background-color: #0f5132">
  175. <div class="collapse border-danger" id="deleteItemsCollapse">
  176. <div class="card card-body bg-dark text-white-50">
  177. <div id="delete-videos-confirm-box">
  178. <h5>Are you sure you want to delete these 40 items from your YouTube playlist? This cannot be undone.</h5>
  179. </div>
  180. <div class="d-flex justify-content-start">
  181. <div class="btn-group ms-2">
  182. <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>
  183. </div>
  184. <div class="btn-group ms-2">
  185. <button type="button" class="btn btn-secondary" id="select-all-btn">Nvm</button>
  186. </div>
  187. <div class="btn-group ms-2">
  188. <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">
  189. <i class="fas fa-sync"></i>
  190. </button>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. <br>
  197. <div class="table-responsive" id="videos-div">
  198. <div class="list-group" id="video-checkboxes">
  199. {% for video in videos %}
  200. <li class="list-group-item d-flex justify-content-between align-items-center" style="background-color: #40B3A2">
  201. {% if video.is_unavailable_on_yt %}
  202. <div class="d-flex justify-content-between align-items-center">
  203. <div>
  204. <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ video.playlist_item_id }}" name="video-id">
  205. </div>
  206. <div class="ms-4" style="max-width: 115px; max-height: 100px;">
  207. <img src="https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg" class="img-fluid" alt="">
  208. </div>
  209. <div class="ms-4">
  210. <a class="link-dark" href="https://www.youtube.com/watch?v={{ video.video_id }}&list={{ video.playlist.playlist_id }}" target="_blank">
  211. {{ video.video_position }}. {{ video.name }}
  212. </a>
  213. <br><br>
  214. </div>
  215. </div>
  216. {% else %}
  217. <div class="d-flex justify-content-between align-items-center" >
  218. <div>
  219. <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ video.playlist_item_id }}" name="video-id">
  220. </div>
  221. <div class="ms-4" style="max-width: 115px; max-height: 100px;">
  222. <img src="{% if video.thumbnail_url %}{{ video.thumbnail_url }}{% else %}https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg{% endif %}" class="img-fluid" alt="">
  223. </div>
  224. <div class="ms-4">
  225. <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|truncatewords:"7" }}</a> <br>
  226. <span class="badge bg-secondary">{{ video.duration }}</span>
  227. {% if video.has_cc %}<span class="badge bg-secondary">CC</span>{% endif %}
  228. {% if video.published_at %}<span class="badge bg-secondary">{{ video.published_at }}</span>{% endif %}
  229. {% if video.view_count %}<span class="badge bg-info">{{ video.view_count|intword|intcomma }} views</span>{% endif %}
  230. {% if video.is_duplicate %}<span class="badge bg-primary">duplicate</span>{% endif %}
  231. {% if video.video_details_modified %}<span class="badge bg-danger">UPDATED - {% if video.was_deleted_on_yt %}WENT PRIVATE/DELETED{% else %}NEWLY ADDED{% endif %}</span>{% endif %}<br>
  232. </div>
  233. </div>
  234. <div class="ms-5">
  235. <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>
  236. <input class="form-control me-1 visually-hidden" id="video-{{ video.video_id }}" value="https://www.youtube.com/watch?v={{ video.video_id }}">
  237. <button class="copy-btn btn btn-sm btn-success mb-1" data-clipboard-target="#video-{{ video.video_id }}">
  238. <i class="far fa-copy" aria-hidden="true"></i>
  239. </button>
  240. <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>
  241. <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>
  242. <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">
  243. <div id="video-{{ forloop.counter }}-fav">
  244. {% if video.is_favorite %}
  245. <i class="fas fa-heart"></i>
  246. {% else %}
  247. <i class="far fa-heart"></i>
  248. {% endif %}
  249. </div>
  250. </button>
  251. {% if playlist.marked_as == "watching" %}
  252. <button class="btn btn-sm btn-light mb-1" type="button">
  253. <i class="far fa-check-circle"></i>
  254. </button>
  255. {% endif %}
  256. </div>
  257. {% endif %}
  258. </li>
  259. {% endfor %}
  260. </div>
  261. </div>
  262. </div>