view_playlist.html 45 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739
  1. {% extends 'base.html' %}
  2. {% load humanize %}
  3. {% load static %}
  4. {% block content %}
  5. <div id="view_playlist">
  6. {% if playlist.has_playlist_changed %}
  7. <div hx-get="{% url 'update_playlist' playlist.playlist_id 'auto' %}" hx-trigger="load" hx-swap="outerHTML">
  8. <div class="d-flex justify-content-center mt-4 mb-3" id="loading-sign">
  9. <img src="{% static 'svg-loaders/circles.svg' %}" width="40" height="40" style="color: black">
  10. <h5 class="mt-2 ms-2">Updating playlist '{{ playlist.name }}', please wait!</h5>
  11. </div>
  12. </div>
  13. {% else %}
  14. <div class="sticky-top mb-3" style="top: 0.5rem;">
  15. {% if not playlist.is_yt_mix %}
  16. <div hx-get="{% url 'update_playlist' playlist.playlist_id 'checkforupdates' %}" hx-trigger="load" hx-swap="outerHTML" id="checkforupdates">
  17. </div>
  18. {% endif %}
  19. {% if playlist.marked_as == "watching" %}
  20. <div id="playlist-watch-message">
  21. {% include 'intercooler/playlist_watch_message.html' %}
  22. </div>
  23. {% endif %}
  24. </div>
  25. <div class="card text-white" style="max-width: 100%; background-color: #1A4464;">
  26. <div class="row g-0">
  27. <div class="col-md-4 p-3">
  28. <img class="img-fluid rounded-3" src="{{ playlist.thumbnail_url }}" style="max-width:100%; height: auto; object-fit: cover;">
  29. </div>
  30. <div class="col-md-8">
  31. <div class="card-body">
  32. <div class="d-flex justify-content-between">
  33. <h2 class="card-title text-white">
  34. <a href="https://www.youtube.com/playlist?list={{ playlist.playlist_id }}" target="_blank" style="color: white; text-decoration: none">{{ playlist.name }}</a>
  35. <br><small class="h4">{% if playlist.user_label %}a.k.a <span style="border-bottom: 3px #ffffff dashed;"> {{ playlist.user_label }}</span>{% endif %}</small>
  36. </h2>
  37. <h4>
  38. <span id="notice-div">
  39. {% if playlist.marked_as != "none" %}
  40. <span class="badge bg-success text-white" >
  41. {% if playlist.marked_as == "watching" %}
  42. <i class="fas fa-fire-alt me-1"></i>
  43. {% elif playlist.marked_as == "plan-to-watch"%}
  44. <i class="fas fa-flag me-1"></i>
  45. {% endif %}
  46. {{ playlist.marked_as }}
  47. </span>
  48. {% endif %}
  49. </span>
  50. <span id="">
  51. <span class="badge bg-dark">
  52. <i class="fas fa-map-pin"></i>
  53. </span>
  54. </span>
  55. </h4>
  56. </div>
  57. <h6>by {{ playlist.channel_name }}</h6>
  58. <p class="card-text">
  59. {% if playlist.description %}
  60. <h5 class="overflow-auto" {% if playlist.description|length > 750 %} style="height: 150px;"{% endif %}>
  61. {{ playlist.description|linebreaksbr|urlize }}
  62. </h5>
  63. {% else %}
  64. <h5>No description</h5>
  65. {% endif %}
  66. </p>
  67. <h6 class="h6 text-uppercase overflow-auto">
  68. <span class="badge bg-light text-black-50">{% if playlist.is_user_owned %}OWNED{% else %}IMPORTED{% endif %}</span>
  69. <span class="badge bg-light text-black-50">{{ playlist.video_count }} VIDEOS</span>
  70. <span class="badge bg-light text-black-50">{{ playlist.playlist_duration }} </span>
  71. <span class="badge bg-light text-black-50">{% if playlist.is_private_on_yt %}PRIVATE{% else %}PUBLIC{% endif %}</span>
  72. {% if playlist.is_yt_mix %}<span class="badge bg-light text-black-50">YT MIX</span>{% endif %}
  73. {% if playlist.has_unavailable_videos %}
  74. <span class="badge bg-light text-black-50">
  75. {% if playlist.get_watchable_videos_count == 0 %}
  76. ALL
  77. {% else %}
  78. {{ playlist.get_unavailable_videos_count }}
  79. {% endif %}
  80. VIDEOS ARE UNAVAILABLE
  81. </span>
  82. {% endif %}
  83. {% if playlist.has_duplicate_videos %}
  84. <span class="badge bg-light text-black-50">DUPLICATE VIDEOS</span>
  85. {% endif %}
  86. <a data-bs-toggle="collapse" href="#channelVidsChartCollapse" role="button" aria-expanded="false" aria-controls="channelVidsChartCollapse">
  87. <span class="badge bg-light text-black-50">{{ playlist.get_channels_list.0 }} channels</span>
  88. </a>
  89. <div class="collapse" id="channelVidsChartCollapse">
  90. <div class="card card-body bg-transparent text-white border border-3 mt-2 border-light">
  91. <canvas id="channel-videos-chart" data-url="{% url 'channel_videos_distribution' playlist.playlist_id %}"></canvas>
  92. </div>
  93. </div>
  94. </h6>
  95. <h6 class="h6 pt-1">
  96. Tags:
  97. <span class="text-uppercase" >
  98. <span id="playlist-tags">
  99. {% for tag in playlist_tags %}
  100. <span id="tag-{{ tag.name|slugify }}" class="mb-2">
  101. <span class="badge rounded-pill bg-info mb-lg-2">
  102. <a href="{% url 'tagged_playlists' tag.name %}" style="text-decoration: none; color: #114f7f">{{ tag.name }} </a>
  103. <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>
  104. </span>
  105. </span>
  106. {% endfor %}
  107. </span>
  108. <a data-bs-toggle="collapse" href="#addTagsCollapse" role="button" aria-expanded="false" aria-controls="addTagsCollapse">
  109. <span class="badge rounded-pill bg-warning mb-lg-2"><i class="fas fa-plus"></i></span>
  110. </a>
  111. </span>
  112. <div class="collapse" id="addTagsCollapse">
  113. <div class="card card-body bg-dark text-white border border-4 mt-1 border-warning">
  114. <h5>Add a tag to this playlist</h5>
  115. {% if unused_tags %}
  116. <div class="d-flex justify-content-start mt-2">
  117. <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">
  118. <option selected>Pick from existing unused tags</option>
  119. <span id="unused-playlist-tags">
  120. {% for tag in unused_tags %}
  121. <option value="{{ tag.name }}">{{ tag.name }}</option>
  122. {% endfor %}
  123. </span>
  124. </select>
  125. <div class="btn-group ms-2">
  126. <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>
  127. </div>
  128. </div>
  129. <div class="d-flex justify-content-start mt-3 mb-2">
  130. - OR -
  131. </div>
  132. {% endif %}
  133. <div class="d-flex justify-content-start mt-2">
  134. <input class="form-control w-50 bg-dark text-white border border-secondary" placeholder="Enter a new tag name here" name="createTagField">
  135. <div class="btn-group ms-2">
  136. <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>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. </h6>
  142. <p class="card-text"><small class="text-white-50">Last updated {{ playlist.updated_at|naturalday }}</small></p>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. <br>
  148. <div id="row1">
  149. <div class="d-flex bd-highlight mb-1">
  150. <div class="me-auto bd-highlight">
  151. <div class="btn-toolbar mb-2 mb-md-0">
  152. <!--
  153. <div class="btn-group me-2">
  154. <button type="button" class="btn {% if playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">Grid</button>
  155. <button type="button" class="btn {% if not playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">List</button>
  156. </div>
  157. -->
  158. <div class="btn-group me-2 mb-2">
  159. <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  160. Mark As
  161. </button>
  162. <ul class="dropdown-menu">
  163. <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>
  164. <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>
  165. <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>
  166. </ul>
  167. </div>
  168. {% if playlist_items.count != 0 %}
  169. <div class="btn-group me-2 mb-2">
  170. <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  171. Sort By
  172. </button>
  173. <ul class="dropdown-menu">
  174. <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>
  175. <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>
  176. <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>
  177. <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>
  178. <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>
  179. <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>
  180. <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>
  181. <li><hr class="dropdown-divider"></li>
  182. <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>
  183. <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>
  184. </ul>
  185. </div>
  186. <div class="btn-group me-2 mb-2">
  187. {% with channels=playlist.get_channels_list %}
  188. <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  189. {{ channels.0 }} Channels
  190. </button>
  191. <ul class="dropdown-menu">
  192. {% for channel in channels.1 %}
  193. <li><button class="dropdown-item" hx-get="" hx-trigger="click" hx-target="#videos-div">{{ channel }}</button></li>
  194. {% endfor %}
  195. </ul>
  196. {% endwith %}
  197. </div>
  198. {% endif %}
  199. </div>
  200. </div>
  201. <div class="bd-highlight">
  202. <div class="btn-toolbar mb-2 mb-md-0 overflow-auto">
  203. <div class="btn-group me-2 mb-2">
  204. <a hx-get="{% url 'update_playlist' playlist.playlist_id 'manual' %}" hx-target="#view_playlist" class="btn btn-secondary">
  205. <i class="fas fa-sync"></i>
  206. </a>
  207. </div>
  208. <div class="btn-group me-2 mb-2">
  209. <button class="btn btn-warning" type="button" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'favorite' %}" hx-target="#playlist-fav">
  210. <div id="playlist-fav">
  211. {% if playlist.is_favorite %}
  212. <i class="fas fa-star"></i>
  213. {% else %}
  214. <i class="far fa-star"></i>
  215. {% endif %}
  216. </div>
  217. </button>
  218. </div>
  219. <div class="btn-group me-2 mb-2">
  220. <a href="{% url 'view_playlist_settings' playlist.playlist_id %}" class="btn btn-primary">
  221. <i class="fas fa-cog"></i>
  222. </a>
  223. </div>
  224. {% if playlist_items.count != 0 %}
  225. <div class="btn-group me-2 mb-2">
  226. <button type="button" class="btn btn-light" onclick="row1_hide()">Manage</button>
  227. </div>
  228. {% endif %}
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. <div id="row2" style="display: none">
  234. <div class="d-flex bd-highlight mb-1">
  235. <div class="me-auto bd-highlight">
  236. <div class="btn-toolbar mb-2 mb-md-0">
  237. <div id="select-all-btn">
  238. <div class="btn-group me-2 mb-2">
  239. <button type="button" class="btn btn-info" id="select-all-btn">Select All</button>
  240. </div>
  241. </div>
  242. <div id="deselect-all-btn" style="display: none">
  243. <div class="btn-group me-2 mb-2">
  244. <button type="button" class="btn btn-info" id="select-all-btn">De-select All</button>
  245. </div>
  246. </div>
  247. <div class="btn-group me-2 mb-2">
  248. <!-- <button type="submit" form="my-form" class="btn btn-outline-success" data-bs-toggle="dropdown" aria-expanded="false">
  249. Move
  250. </button> -->
  251. <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">
  252. {% if playlist.is_user_owned %}Move/{% endif %}Copy Videos
  253. </button>
  254. </div>
  255. <!--
  256. <div class="btn-group me-2">
  257. <button type="button" class="btn btn-outline-warning" data-bs-toggle="dropdown" aria-expanded="false">
  258. Mark/Unmark Favorite
  259. </button>
  260. </div>
  261. -->
  262. {% if playlist.is_user_owned %}
  263. <div class="btn-group me-2 mb-2">
  264. <button class="btn btn-danger" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
  265. Delete Videos
  266. </button>
  267. </div>
  268. {% endif %}
  269. </div>
  270. </div>
  271. <div class="bd-highlight">
  272. <div class="btn-toolbar mb-2 mb-md-0">
  273. <div class="btn-group me-2 mb-2">
  274. <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
  275. <i class="fa fa-history"></i> History
  276. </button>
  277. </div>
  278. <div class="btn-group me-2 mb-2">
  279. <button type="button" class="btn btn-light" onclick="row1_show()" id="manageBtn">Manage</button>
  280. </div>
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. <div id="row3" style="background-color: #0f5132">
  286. <div class="collapse border-danger" id="moveItemsToCollapse">
  287. <div class="card card-body bg-dark text-white">
  288. <h5>{% if playlist.is_user_owned %}Move or {% endif %}Copy videos to another playlist!</h5>
  289. <div class="d-flex justify-content-start">
  290. <div class="col-md-8 text-dark">
  291. <select class="visually-hidden" onchange="triggerSubmit()"
  292. id="choices-multiple-remove-button" name="playlist-tags" placeholder="Select Playlists" multiple>
  293. {% for pl in user_owned_playlists %}
  294. {% if pl.playlist_id != playlist.playlist_id %}
  295. <option value="{{ pl.playlist_id }}" class="text-dark">{{ pl.name }}</option>
  296. {% endif %}
  297. {% endfor %}
  298. </select>
  299. </div>
  300. </div>
  301. <div class="d-flex justify-content-start mt-2">
  302. <!--
  303. <div class="btn-group">
  304. <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>
  305. </div>
  306. -->
  307. {% if playlist.is_user_owned %}
  308. <div class="btn-group me-2">
  309. <button type="button" class="btn btn-info" id="select-all-btn">Move!</button>
  310. </div>
  311. {% endif %}
  312. <div class="btn-group">
  313. <button type="button" class="btn btn-info" id="select-all-btn">Copy!</button>
  314. </div>
  315. </div>
  316. </div>
  317. </div>
  318. </div>
  319. <div id="row4" style="background-color: #0f5132">
  320. <div class="collapse border-danger" id="deleteItemsCollapse">
  321. <div class="card card-body bg-dark text-white-50">
  322. <div id="delete-videos-confirm-box">
  323. {% if not playlist.confirm_before_deleting %}
  324. <h5>Note: You have set confirm before deleting to False. Buttons below will take effect immediately when clicked.</h5>
  325. <hr>
  326. {% endif %}
  327. </div>
  328. <div class="d-flex justify-content-start">
  329. <div class="btn-group me-2">
  330. <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-include="[id='video-checkboxes']" hx-vals='{"confirm before deleting": "{{ playlist.confirm_before_deleting }}"}' hx-target="#delete-videos-confirm-box" type="button" class="btn btn-primary">
  331. Delete Selected
  332. </button>
  333. </div>
  334. {% if playlist.has_unavailable_videos %}
  335. <div class="btn-group me-2">
  336. <button hx-post="#" hx-include="[id='video-checkboxes']" type="button" class="btn btn-info">
  337. Delete {{ playlist.get_unavailable_videos_count }} Unavailable Videos
  338. </button>
  339. </div>
  340. {% endif %}
  341. {% if playlist.has_duplicate_videos %}
  342. <div class="btn-group me-2">
  343. <button hx-post="#" hx-include="[id='video-checkboxes']" type="button" class="btn btn-warning">
  344. Delete Duplicate Videos
  345. </button>
  346. </div>
  347. {% endif %}
  348. <div class="btn-group me-2">
  349. <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-danger">
  350. Empty this Playlist
  351. </button>
  352. </div>
  353. </div>
  354. </div>
  355. </div>
  356. </div>
  357. <div class="table-responsive" id="videos-div">
  358. <br>
  359. {% if playlist_items %}
  360. <div class="list-group" id="video-checkboxes">
  361. {% for playlist_item in playlist_items|slice:"0:50" %}
  362. <li id="{{ playlist_item.playlist_item_id }}" onclick="selectVideo(this);" {% if forloop.last and playlist_items.count > 50 %}hx-get="{% url 'load_more_videos' playlist.playlist_id order_by|default:"all" page|default:"1" %}"
  363. hx-trigger="revealed"
  364. hx-swap="afterend" hx-indicator="#load-more-videos-spinner" {% endif %} class="list-group-item d-flex justify-content-between align-items-center bg-transparent videos" style="background-color: #40B3A2">
  365. {% if playlist_item.video.is_unavailable_on_yt and not playlist_item.video.was_deleted_on_yt %}
  366. <div class="d-flex justify-content-between align-items-center">
  367. <div>
  368. <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ playlist_item.playlist_item_id }}" id="video-{{ playlist_item.playlist_item_id }}" name="video-id">
  369. </div>
  370. <div class="ms-4" style="max-width: 115px; max-height: 100px;">
  371. <img src="https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg" class="img-fluid" alt="">
  372. </div>
  373. <div class="ms-4">
  374. <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
  375. {{ playlist_item.video_position|add:"1" }}. {{ playlist_item.video.name }}
  376. </a>
  377. <br><br>
  378. </div>
  379. </div>
  380. {% else %}
  381. <div class="d-flex justify-content-between align-items-center" >
  382. <div>
  383. <input class="video-checkboxes" style="display: none" type="checkbox" value="{{ playlist_item.playlist_item_id }}" id="video-{{ playlist_item.playlist_item_id }}" name="video-id">
  384. </div>
  385. <div class="ms-4" style="max-width: 115px; max-height: 100px;">
  386. <img src="{% if playlist_item.video.thumbnail_url %}{{ playlist_item.video.thumbnail_url }}{% else %}https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg{% endif %}" class="img-fluid" alt="">
  387. </div>
  388. <div class="ms-4">
  389. {% if playlist_item.video.is_unavailable_on_yt or playlist_item.video.was_deleted_on_yt %}
  390. {{ playlist_item.video_position|add:"1" }}.
  391. <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
  392. {{ playlist_item.video.name|truncatewords:"16" }}
  393. </a>
  394. <br>
  395. <span class="badge bg-dark">VIDEO UNAVAILABLE</span>
  396. {% if playlist_item.video.video_details_modified %}<span class="badge bg-danger">WENT PRIVATE/DELETED {{ playlist_item.video.updated_at|naturaltime|upper }}</span>{% endif %}
  397. <br><br>
  398. {% else %}
  399. {{ playlist_item.video_position|add:"1" }}.
  400. <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
  401. {{ playlist_item.video.name|truncatewords:"16" }}
  402. </a> by {{ playlist_item.video.channel_name }} <br>
  403. <span class="badge bg-secondary">{{ playlist_item.video.duration }}</span>
  404. {% if playlist_item.video.has_cc %}<span class="badge bg-secondary">CC</span>{% endif %}
  405. {% if playlist_item.video.published_at %}<span class="badge bg-secondary">added to playlist on {{ playlist_item.published_at }}</span>{% endif %}
  406. <span class="badge bg-info"><i class="fas fa-eye"></i> {% if playlist_item.video.view_count == -1 %}HIDDEN{% else %}{{ playlist_item.video.view_count|intword|intcomma }}{% endif %}</span>
  407. {% if playlist_item.is_duplicate %}<span class="badge bg-primary">duplicate</span>{% endif %}
  408. {% if playlist_item.video.playlists.count|add:"-1" != 0 %}<span class="badge bg-dark"><a href="{% url 'video' playlist_item.video.video_id %}#found-in" style="text-decoration: none; color: white">found in {{ playlist_item.video.playlists.count|add:"-1" }} other playlists</a></span>{% endif %}
  409. {% if playlist_item.video.video_details_modified %}<span class="badge bg-danger">{% if playlist_item.video.was_deleted_on_yt %}WENT PRIVATE/DELETED{% else %}ADDED{% endif %} {{ playlist_item.video.created_at|naturaltime|upper }}</span>{% endif %}<br>
  410. <br>
  411. {% endif %}
  412. </div>
  413. </div>
  414. <div class="ms-5">
  415. {% if playlist_item.video.is_unavailable_on_yt or playlist_item.video.was_deleted_on_yt %}
  416. <a class="btn btn-sm btn-primary mb-1" href="{% url 'video' playlist_item.video.video_id %}"><i class="fas fa-info"></i></a>
  417. <button class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist.playlist_id playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
  418. <div id="video-{{ forloop.counter }}-fav">
  419. {% if playlist_item.video.is_favorite %}
  420. <i class="fas fa-heart" style="color: #fafa06"></i>
  421. {% else %}
  422. <i class="far fa-heart"></i>
  423. {% endif %}
  424. </div>
  425. </button>
  426. {% else %}
  427. <a class="btn btn-sm btn-info mb-1" type="button" href="https://www.youtube.com/watch?v={{ playlist_item.video.video_id }}&list={{ playlist.playlist_id }}" class="btn btn-info me-1" target="_blank"><i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
  428. <input class="form-control me-1 visually-hidden" id="video-{{ playlist_item.video.video_id }}" value="https://www.youtube.com/watch?v={{ playlist_item.video.video_id }}">
  429. <button class="copy-btn btn btn-sm btn-success mb-1" data-clipboard-target="#video-{{ playlist_item.video.video_id }}">
  430. <i class="far fa-copy" aria-hidden="true"></i>
  431. </button>
  432. <a class="btn btn-sm btn-primary mb-1" href="{% url 'video' playlist_item.video.video_id %}"><i class="fas fa-info"></i></a>
  433. <button class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist.playlist_id playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
  434. <div id="video-{{ forloop.counter }}-fav">
  435. {% if playlist_item.video.is_favorite %}
  436. <i class="fas fa-heart" style="color: #fafa06"></i>
  437. {% else %}
  438. <i class="far fa-heart"></i>
  439. {% endif %}
  440. </div>
  441. </button>
  442. {% if playlist.marked_as == "watching" and not playlist_item.is_duplicate %}
  443. <button class="btn btn-sm btn-light mb-1" type="button" hx-get="{% url 'mark_video_watched' playlist.playlist_id playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-watched">
  444. <div id="video-{{ forloop.counter }}-watched">
  445. {% if playlist_item.video.is_marked_as_watched %}
  446. <i class="fas fa-check-circle"></i>
  447. {% else %}
  448. <i class="far fa-check-circle"></i>
  449. {% endif %}
  450. </div>
  451. </button>
  452. {% endif %}
  453. {% endif %}
  454. </div>
  455. {% endif %}
  456. </li>
  457. {% endfor %}
  458. </div>
  459. {% else %}
  460. <div class="card bg-dark text-white mb-3">
  461. <div class="card-body">
  462. <div class="d-flex justify-content-center align-content-center">
  463. Playlist is empty ;-;
  464. </div>
  465. <div class="d-flex justify-content-center align-content-center">
  466. Consider moving/copying videos from other playlists into this playlist by copying and using this playlist's ID.
  467. </div>
  468. </div>
  469. </div>
  470. {% endif %}
  471. </div>
  472. {% endif %}
  473. <div class="d-flex justify-content-center">
  474. <img id="load-more-videos-spinner" class="htmx-indicator mt-4" src="{% static 'svg-loaders/spinning-circles.svg' %}" width="40" height="40">
  475. </div>
  476. </div>
  477. <button class="scrollToTopBtn sticky-top">
  478. <i class="fa fa-angle-double-up fa-lg"></i></button>
  479. <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  480. <script type="application/javascript">
  481. $(function () {
  482. var $populationChart = $("#channel-videos-chart");
  483. $.ajax({
  484. url: $populationChart.data("url"),
  485. success: function (data) {
  486. var ctx = $populationChart[0].getContext("2d");
  487. var coloR = [];
  488. var dynamicColors = function() { // generate random color
  489. var r = Math.floor(Math.random() * 255);
  490. var g = Math.floor(Math.random() * 255);
  491. var b = Math.floor(Math.random() * 255);
  492. return "rgb(" + r + "," + g + "," + b + ")";
  493. };
  494. for (var i in data.labels) {
  495. if (data.labels)
  496. coloR.push(dynamicColors());
  497. }
  498. new Chart(ctx, {
  499. type: 'pie',
  500. data: {
  501. labels: data.labels,
  502. datasets: [{
  503. label: 'Videos',
  504. backgroundColor: coloR,
  505. data: data.data
  506. }]
  507. },
  508. options: {
  509. responsive: true,
  510. legend: {
  511. position: 'right',
  512. display: false
  513. },
  514. title: {
  515. display: true,
  516. text: 'Video Count Distribution per Channel',
  517. fontSize: 20,
  518. fontColor: '#fff',
  519. },
  520. }
  521. });
  522. }
  523. });
  524. });
  525. // when a video list item is clicked on, it gets checked and its bg turns red
  526. function selectVideo(video) {
  527. if ($('#row2').is(':visible')) {
  528. var videoCB = document.getElementById("video-" + video.id);
  529. if (videoCB.checked) {
  530. video.classList.remove("bg-danger");
  531. video.classList.add("bg-transparent");
  532. videoCB.checked = false;
  533. } else {
  534. video.classList.remove("bg-transparent");
  535. video.classList.add("bg-danger");
  536. videoCB.checked = true;
  537. }
  538. }
  539. }
  540. var moveCopyBtn = document.getElementById('move-copy-vids-btn');
  541. var moveCopyCollapse = document.getElementById('moveItemsToCollapse');
  542. var bsMoveCopyCollapse = new bootstrap.Collapse(moveCopyCollapse, {
  543. toggle: false
  544. });
  545. var deleteBtn = document.getElementById('delete-vids-btn');
  546. var deleteCollapse = document.getElementById('deleteItemsCollapse');
  547. var bsDeleteCollapse = new bootstrap.Collapse(deleteCollapse, {
  548. toggle: false
  549. });
  550. document.getElementById('manageBtn').addEventListener('click', function () { document.getElementById("delete-videos-confirm-box").innerHTML = "";
  551. document.getElementById("delete-videos-confirm-box").innerHTML = "";
  552. bsMoveCopyCollapse.hide();
  553. bsDeleteCollapse.hide();
  554. });
  555. moveCopyCollapse.addEventListener('show.bs.collapse', function () {
  556. bsDeleteCollapse.hide();
  557. });
  558. deleteCollapse.addEventListener('show.bs.collapse', function () {
  559. bsMoveCopyCollapse.hide();
  560. });
  561. <!-- end -->
  562. document.getElementById('select-all-btn').onclick = function() {
  563. document.getElementById('select-all-btn').style.display = "none";
  564. document.getElementById('deselect-all-btn').style.display = "block";
  565. var checkboxes = document.getElementsByClassName('video-checkboxes');
  566. for (var checkbox of checkboxes) {
  567. checkbox.checked = true;
  568. }
  569. var listItems = document.getElementsByClassName('videos'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
  570. for(var i=0, len=listItems.length; i<len; i++)
  571. {
  572. if(listItems[i].classList.contains("bg-transparent")){
  573. listItems[i].classList.remove("bg-transparent");
  574. listItems[i].classList.add("bg-danger");
  575. }
  576. }
  577. }
  578. document.getElementById('deselect-all-btn').onclick = function() {
  579. document.getElementById('deselect-all-btn').style.display = "none";
  580. document.getElementById('select-all-btn').style.display = "block";
  581. var checkboxes = document.getElementsByClassName('video-checkboxes');
  582. for (var checkbox of checkboxes) {
  583. checkbox.checked = false;
  584. }
  585. var listItems = document.getElementsByClassName('videos'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
  586. for(var i=0, len=listItems.length; i<len; i++)
  587. {
  588. if(listItems[i].classList.contains("bg-danger")){
  589. listItems[i].classList.remove("bg-danger");
  590. listItems[i].classList.add("bg-transparent");
  591. }
  592. }
  593. }
  594. function row1_hide() {
  595. document.getElementById("row1").style.display = "none";
  596. var checkboxes = document.getElementsByClassName('video-checkboxes'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
  597. for(var i=0, len=checkboxes.length; i<len; i++)
  598. {
  599. //checkboxes[i].style.display = "block";
  600. checkboxes[i].checked = false;
  601. }
  602. document.getElementById("row2").style.display = "block";
  603. }
  604. function row1_show() {
  605. document.getElementById("row1").style.display = "block";
  606. var checkboxes = document.getElementsByClassName('video-checkboxes'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
  607. for(var i=0, len=checkboxes.length; i<len; i++)
  608. {
  609. checkboxes[i].style.display = "none";
  610. checkboxes[i].checked = false;
  611. }
  612. document.getElementById("row2").style.display = "none";
  613. var listItems = document.getElementsByClassName('videos'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
  614. for(var i=0, len=listItems.length; i<len; i++)
  615. {
  616. if(listItems[i].classList.contains("bg-danger")){
  617. listItems[i].classList.remove("bg-danger");
  618. listItems[i].classList.add("bg-transparent");
  619. }
  620. }
  621. }
  622. function select_all_checkboxes(source) {
  623. checkboxes = document.getElementsByClassName('big-checkbox');
  624. for(var i=0, n=checkboxes.length;i<n;i++) {
  625. checkboxes[i].checked = source.checked;
  626. }
  627. }
  628. </script>
  629. <!--
  630. <script src="{% static 'youtube-audio-player/iframe-api.js' %}"></script>
  631. <script src="{% static 'youtube-audio-player/yt.min.js' %}"></script>
  632. -->
  633. {% endblock %}