view_playlist.html 69 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062
  1. {% extends 'base.html' %}
  2. {% load humanize %}
  3. {% load static %}
  4. {% block content %}
  5. <script src="{% static 'htmx/extensions/class-tools.js' %}" type="application/javascript"></script>
  6. <div id="view_playlist">
  7. {% if not_imported_LL %}
  8. <div hx-get="/import/liked-videos-playlist" hx-trigger="load" hx-swap="outerHTML">
  9. <div class="alert alert-dismissible fade show" role="alert" style="background-color: cadetblue">
  10. <div class="d-flex justify-content-center flex-column mt-4 mb-3 ms-2" id="loading-sign" >
  11. <div class="d-flex justify-content-center">
  12. <img src="/static/svg-loaders/spinning-circles.svg" width="40" height="40">
  13. <h5 class="mt-2 ms-2 text-black">Importing your Liked Videos playlist into UnTube, do not refresh this page!
  14. </h5>
  15. </div>
  16. <div class="d-flex justify-content-center mt-1">
  17. <h6>(this might take a while if you have more than 700 liked videos!)</h6>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. {% else %}
  23. {% if playlist.has_playlist_changed %}
  24. <div hx-get="{% url 'update_playlist' playlist.playlist_id 'auto' %}" hx-trigger="load" hx-swap="outerHTML">
  25. <div class="d-flex justify-content-center mt-4 mb-3" id="loading-sign">
  26. <img src="{% static 'svg-loaders/circles.svg' %}" width="40" height="40" style="filter: invert(0%) sepia(18%) saturate(7468%) hue-rotate(241deg) brightness(84%) contrast(101%);">
  27. <h5 class="mt-2 ms-2">Refreshing playlist '{{ playlist.name }}', please wait!</h5>
  28. </div>
  29. </div>
  30. {% else %}
  31. <div class="sticky-top mb-3" style="top: 0.5rem;">
  32. {% if not playlist.is_yt_mix %}
  33. {% if playlist.auto_check_for_updates %}
  34. <div hx-get="{% url 'update_playlist' playlist.playlist_id 'checkforupdates' %}" hx-trigger="load" hx-swap="outerHTML" id="checkforupdates">
  35. <div class="alert alert-info alert-dismissible fade show" role="alert">
  36. Checking playlist for updates...
  37. </div>
  38. </div>
  39. {% endif %}
  40. {% endif %}
  41. {% if playlist.marked_as == "watching" %}
  42. <div id="playlist-watch-message">
  43. {% include 'intercooler/playlist_watch_message.html' %}
  44. </div>
  45. {% endif %}
  46. </div>
  47. <div class="alert alert-dark alert-dismissible fade show" role="alert" id="user-label-alert" style="display:none;">
  48. <form method="post" action="{% url 'add_playlist_user_label' playlist.playlist_id %}" class="d-flex justify-content-center">
  49. {% csrf_token %}
  50. <span class="mt-2 me-1">Enter an optional label to identify this playlist with:</span>
  51. <input class="form-control w-25 me-2" type="text" placeholder="Enter here" name="user_label" value="{{ playlist.user_label }}" aria-label="user label">
  52. <button type="submit" class="btn btn-primary">Save</button>
  53. </form>
  54. <button type="button" class="btn-close mt-2 me-2" onclick='document.getElementById("user-label-alert").style.display = "none";' aria-label="Close"></button>
  55. </div>
  56. <div class="card text-white" style="max-width: 100%; background-color: #1A4464;">
  57. <div class="row g-0">
  58. <div class="col-md-4 p-3">
  59. <img class="img-fluid rounded-3" src="{{ playlist.get_playlist_thumbnail_url }}" style="max-width:100%; height: auto; object-fit: cover;">
  60. </div>
  61. <div class="col-md-8">
  62. <div class="card-body">
  63. <div class="d-flex justify-content-between">
  64. <h2 class="card-title text-white">
  65. <a href="https://www.youtube.com/playlist?list={{ playlist.playlist_id }}" target="_blank" style="color: white; text-decoration: none">{{ playlist.name }}</a>
  66. <button class="btn btn-light btn-sm ms-2" onclick='document.getElementById("user-label-alert").style.display = "block";'>
  67. <i class="fas fa-pencil-alt" aria-hidden="true"></i>
  68. </button>
  69. <br><small class="h4">{% if playlist.user_label %}a.k.a <span style="border-bottom: 3px #ffffff dashed;"> {{ playlist.user_label }}</span>{% endif %}</small>
  70. </h2>
  71. <h4>
  72. <span id="notice-div">
  73. {% if playlist.marked_as != "none" %}
  74. <span class="badge bg-success text-white" >
  75. {% if playlist.marked_as == "watching" %}
  76. <i class="fas fa-fire-alt me-1"></i>
  77. {% elif playlist.marked_as == "plan-to-watch"%}
  78. <i class="fas fa-flag me-1"></i>
  79. {% endif %}
  80. {{ playlist.marked_as }}
  81. </span>
  82. {% endif %}
  83. </span>
  84. <span id="">
  85. <!--
  86. <span class="badge bg-dark">
  87. <i class="fas fa-map-pin"></i>
  88. </span>
  89. -->
  90. </span>
  91. </h4>
  92. </div>
  93. <h6>by <a href="{% url 'search' %}?mode=videos&channel={{ playlist.channel_name }}" style="text-decoration: none; color: white"><span style="border-bottom: 3px #e35959 dashed;">{{ playlist.channel_name }}</span></a></h6>
  94. <p class="card-text">
  95. {% if playlist.description %}
  96. <h5 class="overflow-auto" style="max-height: 350px;">
  97. {{ playlist.description|linebreaksbr|urlize }}
  98. </h5>
  99. {% else %}
  100. <h5>No description</h5>
  101. {% endif %}
  102. </p>
  103. <h6 class="h6 text-uppercase overflow-auto">
  104. <span class="badge bg-light text-black-50">{% if playlist.is_user_owned %}OWNED{% else %}IMPORTED{% endif %}</span>
  105. <span class="badge bg-light text-black-50">{{ playlist.video_count }} VIDEOS</span>
  106. <a data-bs-toggle="collapse" href="#playlistDurationCollapse" role="button" aria-expanded="false" aria-controls="playlistDurationCollapse">
  107. <span class="badge bg-light text-black-50">{{ playlist.playlist_duration }}</span>
  108. </a>
  109. <div class="collapse" id="playlistDurationCollapse">
  110. <div class="card card-body bg-transparent text-white text-capitalize border border-3 mt-2 mb-2 border-light">
  111. <div hx-get="{% url 'playlist_completion_times' playlist.playlist_id %}"
  112. hx-trigger="revealed"
  113. hx-swap="outerHTML">
  114. </div>
  115. </div>
  116. </div>
  117. <span class="badge bg-light text-black-50">{% if playlist.is_private_on_yt %}PRIVATE{% else %}PUBLIC{% endif %}</span>
  118. {% if playlist.is_yt_mix %}<span class="badge bg-light text-black-50">YT MIX</span>{% endif %}
  119. {% if playlist.has_unavailable_videos %}
  120. <span class="badge bg-light text-black-50">
  121. {% if playlist.get_watchable_videos_count == 0 %}
  122. ALL
  123. {% else %}
  124. {{ playlist.get_unavailable_videos_count }}
  125. {% endif %}
  126. VIDEOS ARE UNAVAILABLE
  127. </span>
  128. {% endif %}
  129. {% if playlist.has_duplicate_videos %}
  130. <span class="badge bg-light text-black-50">{{ playlist.get_duplicate_videos_count }} DUPLICATE VIDEOS</span>
  131. {% endif %}
  132. <a data-bs-toggle="collapse" href="#channelVidsChartCollapse" role="button" aria-expanded="false" aria-controls="channelVidsChartCollapse">
  133. <span class="badge bg-light text-black-50">{{ playlist.get_channels_list.0 }} channels</span>
  134. </a>
  135. <div class="collapse" id="channelVidsChartCollapse">
  136. <div class="card card-body bg-transparent text-white border border-3 mt-2 border-light">
  137. <canvas id="channel-videos-chart" data-url="{% url 'channel_videos_distribution' playlist.playlist_id %}"></canvas>
  138. </div>
  139. </div>
  140. </h6>
  141. <h6 class="h6 pt-1">
  142. Tags:
  143. <span class="text-uppercase" >
  144. <span id="playlist-tags">
  145. {% for tag in playlist_tags %}
  146. <span id="tag-{{ tag.name|slugify }}" class="mb-2">
  147. <span class="badge rounded-pill bg-info mb-lg-2">
  148. <a href="{% url 'tagged_playlists' tag.name %}" style="text-decoration: none; color: #114f7f">{{ tag.name }} </a>
  149. <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>
  150. </span>
  151. </span>
  152. {% endfor %}
  153. </span>
  154. <a data-bs-toggle="collapse" href="#addTagsCollapse" role="button" aria-expanded="false" aria-controls="addTagsCollapse">
  155. <span class="badge rounded-pill bg-warning mb-lg-2"><i class="fas fa-plus"></i></span>
  156. </a>
  157. </span>
  158. <div class="collapse" id="addTagsCollapse">
  159. <div class="card card-body bg-dark text-white border border-4 mt-1 border-warning">
  160. <h5>Add a tag to this playlist</h5>
  161. {% if unused_tags %}
  162. <div class="d-flex justify-content-start mt-2">
  163. <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">
  164. <option selected>Pick from existing unused tags</option>
  165. <span id="unused-playlist-tags">
  166. {% for tag in unused_tags %}
  167. <option value="{{ tag.name }}">{{ tag.name }}</option>
  168. {% endfor %}
  169. </span>
  170. </select>
  171. <div class="btn-group ms-2">
  172. <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>
  173. </div>
  174. </div>
  175. <div class="d-flex justify-content-start mt-3 mb-2">
  176. - OR -
  177. </div>
  178. {% endif %}
  179. <div class="d-flex justify-content-start mt-2">
  180. <input class="form-control w-50 bg-dark text-white border border-secondary" placeholder="Enter a new tag name here" name="createTagField">
  181. <div class="btn-group ms-2">
  182. <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>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </h6>
  188. <p class="card-text text-white-50"><small>Last updated {{ playlist.updated_at|naturalday }}</small> &bullet; <small>{{ playlist.num_of_accesses }} clicks </small></p>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. <br>
  194. <div id="row1">
  195. <div class="d-flex bd-highlight mb-1">
  196. <div class="me-auto bd-highlight">
  197. <div class="btn-toolbar mb-2 mb-md-0">
  198. <!--
  199. <div class="btn-group me-2">
  200. <button type="button" class="btn {% if playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">Grid</button>
  201. <button type="button" class="btn {% if not playlist.view_in_grid_mode %}btn-info {% else %}btn-outline-info{% endif %}">List</button>
  202. </div>
  203. -->
  204. <div class="btn-group me-2 mb-2">
  205. <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  206. Mark As
  207. </button>
  208. <ul class="dropdown-menu">
  209. <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>
  210. <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>
  211. <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>
  212. </ul>
  213. </div>
  214. {% if playlist_items.count != 0 %}
  215. <div class="btn-group me-2 mb-2">
  216. <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  217. Sort By
  218. </button>
  219. <ul class="dropdown-menu">
  220. <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>
  221. <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>
  222. <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>
  223. <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>
  224. <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>
  225. <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>
  226. <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>
  227. <li><hr class="dropdown-divider"></li>
  228. <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>
  229. <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>
  230. </ul>
  231. </div>
  232. <div class="btn-group me-2 mb-2">
  233. {% with channels=playlist.get_channels_list %}
  234. <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  235. {{ channels.0 }} Channels
  236. </button>
  237. <ul class="dropdown-menu">
  238. {% for channel in channels.1 %}
  239. <li><a class="dropdown-item" hx-get="{% url 'order_playlist_by' playlist.playlist_id 'channel' %}" hx-vals='{"channel-name": "{{ channel }}"}' hx-trigger="click" hx-target="#videos-div">{{ channel }}</a></li>
  240. {% endfor %}
  241. </ul>
  242. {% endwith %}
  243. </div>
  244. {% endif %}
  245. </div>
  246. </div>
  247. <div class="bd-highlight">
  248. <div class="btn-toolbar mb-2 mb-md-0 overflow-auto">
  249. <div class="btn-group me-2 mb-2">
  250. <a hx-get="{% url 'update_playlist' playlist.playlist_id 'manual' %}" hx-target="#view_playlist" class="btn btn-secondary">
  251. <i class="fas fa-sync"></i>
  252. </a>
  253. </div>
  254. {% if playlist.video_count > 1 %}
  255. <div class="btn-group me-2 mb-2">
  256. <a href="{% url 'playlist_open_random_video' playlist.playlist_id %}" class="btn btn-danger">
  257. Open a Random Video
  258. </a>
  259. </div>
  260. {% endif %}
  261. <div class="btn-group me-2 mb-2">
  262. <button class="btn btn-dark" type="button" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'favorite' %}" hx-target="#playlist-fav">
  263. <div id="playlist-fav">
  264. {% if playlist.is_favorite %}
  265. <i class="fas fa-star" style="color: #fafa06"></i>
  266. {% else %}
  267. <i class="far fa-star"></i>
  268. {% endif %}
  269. </div>
  270. </button>
  271. </div>
  272. <div class="btn-group me-2 mb-2">
  273. <a href="{% url 'view_playlist_settings' playlist.playlist_id %}" class="btn btn-primary">
  274. <i class="fas fa-cog"></i>
  275. </a>
  276. </div>
  277. {% if playlist_items.count != 0 %}
  278. <div class="btn-group me-2 mb-2">
  279. <button type="button" class="btn btn-light" onclick="row1_hide()">Manage</button>
  280. </div>
  281. {% endif %}
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. <div id="row2" style="display: none">
  287. <div class="d-flex bd-highlight mb-1">
  288. <div class="me-auto bd-highlight">
  289. <div class="btn-toolbar mb-2 mb-md-0">
  290. <div id="select-all-btn">
  291. <div class="btn-group me-2 mb-2">
  292. <button type="button" class="btn btn-info" id="select-all-btn">Select All</button>
  293. </div>
  294. </div>
  295. <div id="deselect-all-btn" style="display: none">
  296. <div class="btn-group me-2 mb-2">
  297. <button type="button" class="btn btn-info" id="select-all-btn">De-select All</button>
  298. </div>
  299. </div>
  300. <div class="btn-group me-2 mb-2">
  301. <!-- <button type="submit" form="my-form" class="btn btn-outline-success" data-bs-toggle="dropdown" aria-expanded="false">
  302. Move
  303. </button> -->
  304. <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">
  305. {% if playlist.is_user_owned %}Move/{% endif %}Copy Videos
  306. </button>
  307. </div>
  308. <!--
  309. <div class="btn-group me-2">
  310. <button type="button" class="btn btn-outline-warning" data-bs-toggle="dropdown" aria-expanded="false">
  311. Mark/Unmark Favorite
  312. </button>
  313. </div>
  314. -->
  315. {% if playlist.is_user_owned %}
  316. <div class="btn-group me-2 mb-2">
  317. <button class="btn btn-danger" data-bs-toggle="collapse" data-bs-target="#deleteItemsCollapse" aria-expanded="false" aria-controls="deleteItemsCollapse">
  318. Delete Videos
  319. </button>
  320. </div>
  321. {% endif %}
  322. </div>
  323. </div>
  324. <div class="bd-highlight">
  325. <div class="btn-toolbar mb-2 mb-md-0">
  326. <div class="btn-group me-2 mb-2">
  327. <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#addVideosCollapse" aria-expanded="false" aria-controls="addVideosCollapse">
  328. <i class="fa fa-plus"></i> Add New Videos
  329. </button>
  330. </div>
  331. <div class="btn-group me-2 mb-2">
  332. <button class="btn btn-dark" data-bs-toggle="collapse" data-bs-target="#createPlaylistCollapse" aria-expanded="false" aria-controls="createPlaylistCollapse">
  333. <i class="far fa-plus-square"></i> Create a New Playlist
  334. </button>
  335. </div>
  336. <div class="btn-group me-2 mb-2">
  337. <button type="button" class="btn btn-light" onclick="row1_show()" id="manageBtn">Manage</button>
  338. </div>
  339. </div>
  340. </div>
  341. </div>
  342. </div>
  343. <div id="row3" style="background-color: #0f5132">
  344. <div class="collapse border-danger" id="moveItemsToCollapse">
  345. <div class="card card-body bg-dark text-white">
  346. <h5>{% if playlist.is_user_owned %}Move or {% endif %}Copy videos to other playlist(s)! <span class="text-muted selected-videos-count">0 videos selected</span></h5>
  347. <div class="row d-flex justify-content-start">
  348. <div class="col-md-6 text-dark">
  349. <select class="visually-hidden"
  350. id="playlists-to-move-to" name="playlist-ids" placeholder="Select Playlists" multiple>
  351. {% for pl in user_owned_playlists %}
  352. {% if pl.playlist_id != playlist.playlist_id %}
  353. <option value="{{ pl.playlist_id }}" class="text-dark">{{ pl.name }}</option>
  354. {% endif %}
  355. {% endfor %}
  356. </select>
  357. </div>
  358. <div class="col-md d-flex justify-content-start">
  359. <div class="htmx-indicator d-flex align-items-center" id="move-copy-loader">
  360. <img src="{% static 'svg-loaders/grid.svg' %}" width="25" height="25" class="ms-2 mt-2">
  361. <span class="mt-2 ms-2">Loading, please wait... </span>
  362. </div>
  363. </div>
  364. </div>
  365. <div class="d-flex justify-content-start mt-2">
  366. {% if playlist.is_user_owned %}
  367. <div class="btn-group mt-1">
  368. <button hx-indicator="#move-copy-loader" hx-post="{% url 'playlist_move_copy_videos' playlist.playlist_id 'move' %}" hx-include="#playlists-to-move-to, #video-checkboxes" hx-target="#move-copy-videos-box" type="button" class="btn btn-primary">
  369. Move!
  370. </button>
  371. </div>
  372. {% endif %}
  373. <div class="btn-group ms-1 mt-1">
  374. <button hx-indicator="#move-copy-loader" hx-post="{% url 'playlist_move_copy_videos' playlist.playlist_id 'copy' %}" hx-include="#playlists-to-move-to, #video-checkboxes" hx-target="#move-copy-videos-box" type="button" class="btn btn-info">
  375. Copy!
  376. </button>
  377. </div>
  378. <div id="move-copy-videos-box" class="d-flex align-items-end ms-2">
  379. <span class="text-warning">Note: Move will delete the selected videos from this playlist. Copy won't.</span>
  380. </div>
  381. </div>
  382. </div>
  383. </div>
  384. </div>
  385. <div id="row4" style="background-color: #0f5132">
  386. <div class="collapse border-danger" id="deleteItemsCollapse">
  387. <div class="card card-body bg-dark text-white-50">
  388. <h5><span class="text-muted selected-videos-count">0 videos selected</span></h5>
  389. <div id="delete-videos-confirm-box">
  390. <h5>You can select videos by clicking any where on the video box. Selected videos will be highlighted red.</h5>
  391. {% if not user.profile.confirm_before_deleting %}
  392. <h5>
  393. <i class="fas fa-exclamation-triangle" style="color: yellow"></i>
  394. You have set confirm before deleting to False. Buttons below will take effect immediately when clicked.
  395. <i class="fas fa-exclamation-triangle" style="color: yellow"></i>
  396. </h5>
  397. <hr>
  398. {% else %}
  399. {% if playlist.has_unavailable_videos %}
  400. <h5><i class="fas fa-exclamation-triangle" style="color: yellow"></i> Clicking on delete unavailable videos button will take immediate effect. All videos labelled unavailable in this playlist will be deleted from your YouTube playlist.</h5>
  401. {% endif %}
  402. {% if playlist.has_duplicate_videos %}
  403. <h5><i class="fas fa-exclamation-triangle" style="color: yellow"></i> Clicking on delete duplicate videos button will take immediate effect. All videos labelled duplicate in this playlist will be deleted from your YouTube playlist.</h5>
  404. {% endif %}
  405. <hr>
  406. {% endif %}
  407. </div>
  408. <div class="d-flex justify-content-start">
  409. <div class="btn-group me-2">
  410. <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-include="[id='video-checkboxes']" hx-vals='{"confirm before deleting": "{{ user.profile.confirm_before_deleting }}"}' hx-target="#delete-videos-confirm-box" type="button" class="btn btn-primary">
  411. Delete Selected
  412. </button>
  413. </div>
  414. {% if playlist.has_unavailable_videos %}
  415. <div class="btn-group me-2">
  416. <button hx-post="{% url 'delete_specific_videos' playlist.playlist_id 'unavailable' %}" hx-target="#delete-videos-confirm-box" type="button" class="btn btn-info" hx-indicator="#delete-loader">
  417. Delete {{ playlist.get_unavailable_videos_count }} Unavailable Videos
  418. </button>
  419. </div>
  420. {% endif %}
  421. {% if playlist.has_duplicate_videos %}
  422. <div class="btn-group me-2">
  423. <button hx-post="{% url 'delete_specific_videos' playlist.playlist_id 'duplicate' %}" hx-target="#delete-videos-confirm-box" type="button" class="btn btn-warning" hx-indicator="#delete-loader">
  424. Delete {{ playlist.get_duplicate_videos_count }} Duplicate Videos
  425. </button>
  426. </div>
  427. {% endif %}
  428. <div class="btn-group me-2">
  429. <button hx-post="{% url 'delete_videos' playlist.playlist_id 'confirm' %}" hx-vals='{"all": "yes", "confirm before deleting": "{{ user.profile.confirm_before_deleting }}"}' hx-target="#delete-videos-confirm-box" type="button" class="btn btn-danger">
  430. Empty this Playlist
  431. </button>
  432. </div>
  433. <div class="htmx-indicator d-flex align-items-center" id="delete-loader">
  434. <img src="{% static 'svg-loaders/grid.svg' %}" width="25" height="25" class="ms-2 mt-2">
  435. <span class="mt-2 ms-2">Deleting, please wait... </span>
  436. </div>
  437. </div>
  438. </div>
  439. </div>
  440. </div>
  441. <div id="row5" style="background-color: #0f5132">
  442. <div class="collapse border-danger" id="addVideosCollapse">
  443. <div class="card card-body bg-dark text-white">
  444. <h5>Add new videos to this playlist</h5>
  445. <div class="row d-flex justify-content-start">
  446. <div class="col-md-8 text-dark">
  447. <textarea name="add-videos-textarea" class="form-control" id="add-videos-textarea" placeholder="Enter video links or video IDs line by line here"
  448. rows="5">{{ manage_playlists_import_textarea }}</textarea>
  449. <div class="form-text">
  450. Note: You can only add 25 videos at a time. Find videos by
  451. <a href="{% url 'search' %}?mode=videos&type=all" target="_blank" style="color: #398439; text-decoration: none">searching on UnTube <i class="fas fa-external-link-alt"></i> </a> or
  452. <a href="https://www.youtube.com/" target="_blank" style="color: #ec2d90; text-decoration: none">searching on YouTube <i class="fas fa-external-link-alt"></i> </a>
  453. </div>
  454. </div>
  455. </div>
  456. <div class="d-flex justify-content-start mt-2">
  457. <div class="btn-group ms-1 mt-1">
  458. <button hx-indicator="#add-videos-loader" hx-post="{% url 'playlist_add_new_videos' playlist.playlist_id %}" hx-include="#add-videos-textarea" hx-target="#add-videos-box" type="button" class="btn btn-primary">
  459. Add
  460. </button>
  461. </div>
  462. <div id="add-videos-box" class="d-flex align-items-end ms-2 text-warning">
  463. </div>
  464. <div class="htmx-indicator d-flex align-items-center" id="add-videos-loader">
  465. <img src="{% static 'svg-loaders/grid.svg' %}" width="25" height="25" class="ms-2 mt-2">
  466. <span class="mt-2 ms-2 text-warning">Adding videos, please wait... </span>
  467. </div>
  468. </div>
  469. </div>
  470. </div>
  471. </div>
  472. <div id="row6" style="background-color: #0f5132">
  473. <div class="collapse border-danger" id="createPlaylistCollapse">
  474. <div class="card card-body bg-dark text-white">
  475. <h5>Create a new playlist with the selected videos <span class="text-muted selected-videos-count">0 videos selected</span></h5>
  476. <div class="row d-flex justify-content-start">
  477. <div class="col-md-8 text-dark">
  478. <div id="create-playlist-from">
  479. <input type="text" name="playlist-name" class="form-control" placeholder="Enter new playlist name">
  480. <textarea name="playlist-description" class="form-control mt-2" placeholder="Enter playlist description here"
  481. rows="5">{{ manage_playlists_import_textarea }}</textarea>
  482. </div>
  483. </div>
  484. </div>
  485. <div class="d-flex justify-content-start mt-2">
  486. <div class="btn-group ms-1 mt-1">
  487. <button hx-indicator="#create-playlist-loader" hx-post="{% url 'playlist_create_new_playlist' playlist.playlist_id %}" hx-include="#create-playlist-from, #video-checkboxes" hx-target="#create-playlist-box" type="button" class="btn btn-primary">
  488. Create
  489. </button>
  490. </div>
  491. <div id="create-playlist-box" class="d-flex align-items-end ms-2 text-warning">
  492. </div>
  493. <div class="htmx-indicator d-flex align-items-center" id="create-playlist-loader">
  494. <img src="{% static 'svg-loaders/grid.svg' %}" width="25" height="25" class="ms-2 mt-2">
  495. <span class="mt-2 ms-2 text-warning">Creating playlist, please wait... </span>
  496. </div>
  497. </div>
  498. </div>
  499. </div>
  500. </div>
  501. <div class="table-responsive" id="videos-div">
  502. <br>
  503. {% if playlist_items %}
  504. <div class="list-group" id="video-checkboxes">
  505. {% for playlist_item in playlist_items|slice:"0:50" %}
  506. <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" %}"
  507. hx-trigger="revealed"
  508. 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">
  509. {% if playlist_item.video.is_unavailable_on_yt and not playlist_item.video.was_deleted_on_yt %}
  510. <div class="d-flex justify-content-between align-items-center">
  511. <div>
  512. <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">
  513. </div>
  514. <div class="ms-4" style="max-width: 115px; max-height: 100px;">
  515. <img src="https://i.ytimg.com/vi/9219YrnwDXE/maxresdefault.jpg" class="img-fluid" alt="">
  516. </div>
  517. <div class="ms-4">
  518. <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
  519. {{ playlist_item.video_position|add:"1" }}. {{ playlist_item.video.name }}
  520. </a>
  521. <br><br>
  522. </div>
  523. </div>
  524. {% else %}
  525. <div class="d-flex justify-content-between align-items-center" >
  526. <div>
  527. <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">
  528. </div>
  529. <div class="ms-4" style="max-width: 115px; max-height: 100px;">
  530. <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="">
  531. </div>
  532. <div class="ms-4">
  533. {% if playlist_item.video.is_unavailable_on_yt or playlist_item.video.was_deleted_on_yt %}
  534. {{ playlist_item.video_position|add:"1" }}.
  535. <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
  536. {{ playlist_item.video.name|truncatewords:"16" }}
  537. </a>
  538. <br>
  539. <span class="badge bg-dark">VIDEO UNAVAILABLE</span>
  540. {% if playlist_item.video.video_details_modified %}<span class="badge bg-danger">WENT PRIVATE/DELETED {{ playlist_item.video.updated_at|naturaltime|upper }}</span>{% endif %}
  541. <br><br>
  542. {% else %}
  543. {{ playlist_item.video_position|add:"1" }}.
  544. <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
  545. {{ playlist_item.video.name|truncatewords:"16" }}
  546. </a> by <a href="{% url 'search' %}?mode=videos&channel={{ playlist_item.video.channel_name }}" style="text-decoration: none; color: black"><span style="border-bottom: 3px #e35959 dashed;"> {{ playlist_item.video.channel_name }}</span></a><br>
  547. <a style="text-decoration: none" hx-get="{% url 'video_completion_times' playlist_item.video.video_id %}" hx-trigger="click once" hx-target="#{{ playlist_item.playlist_item_id }}-completion-times" data-bs-toggle="collapse" href="#{{ playlist_item.playlist_item_id }}DurationCollapse" role="button" aria-expanded="false" aria-controls="{{ playlist_item.playlist_item_id }}DurationCollapse">
  548. <span class="badge bg-secondary">{{ playlist_item.video.duration }}</span>
  549. </a>
  550. <div class="collapse" id="{{ playlist_item.playlist_item_id }}DurationCollapse">
  551. <div class="card card-body bg-dark text-white text-capitalize border border-3 mt-2 mb-2 border-light">
  552. <div id="{{ playlist_item.playlist_item_id }}-completion-times">
  553. </div>
  554. </div>
  555. </div>
  556. {% if playlist_item.video.has_cc %}<span class="badge bg-danger">CC</span>{% endif %}
  557. {% if playlist_item.video.published_at %}<span class="badge bg-secondary">added to playlist on {{ playlist_item.published_at }}</span>{% endif %}
  558. <span class="badge bg-info text-black-50"><i class="fas fa-eye"></i> {% if playlist_item.video.view_count == -1 %}HIDDEN{% else %}{{ playlist_item.video.view_count|intword|intcomma }}{% endif %}</span>
  559. <span class="badge bg-warning text-black-50"><i class="fas fa-thumbs-up"></i> {% if playlist_item.video.like_count == -1 %}HIDDEN{% else %}{{ playlist_item.video.like_count|intword|intcomma }}{% endif %}</span>
  560. {% if playlist_item.is_duplicate %}<span class="badge bg-primary">duplicate</span>{% endif %}
  561. {% if playlist_item.video.playlists.count|add:"-1" != 0 %}
  562. <span class="badge bg-dark">
  563. <a href="{% url 'video' playlist_item.video.video_id %}#found-in" style="text-decoration: none; color: white">
  564. found in {{ playlist_item.video.playlists.count|add:"-1" }} other playlist{% if playlist_item.video.playlists.count|add:"-1" > 1 %}s{% endif %}
  565. </a></span>
  566. {% endif %}
  567. {% 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.created_at|naturaltime }}</span>{% endif %}<br>
  568. <br>
  569. {% endif %}
  570. </div>
  571. </div>
  572. <div class="ms-5">
  573. {% if playlist_item.video.is_unavailable_on_yt or playlist_item.video.was_deleted_on_yt %}
  574. <a class="btn btn-sm btn-primary mb-1" href="{% url 'video' playlist_item.video.video_id %}"><i class="fas fa-info"></i></a>
  575. <button title="Mark or unmark video favorite!" class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
  576. <div id="video-{{ forloop.counter }}-fav">
  577. {% if playlist_item.video.is_favorite %}
  578. <i class="fas fa-heart" style="color: #fafa06"></i>
  579. {% else %}
  580. <i class="far fa-heart"></i>
  581. {% endif %}
  582. </div>
  583. </button>
  584. <button title="Mark or unmark video as plan to watch!" class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_planned_to_watch' playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-planned">
  585. <div id="video-{{ forloop.counter }}-planned">
  586. {% if playlist_item.video.is_planned_to_watch %}
  587. <i class="fas fa-clock" style="color: #000000"></i>
  588. {% else %}
  589. <i class="far fa-clock"></i>
  590. {% endif %}
  591. </div>
  592. </button>
  593. {% else %}
  594. <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>
  595. <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 }}">
  596. <button class="copy-btn btn btn-sm btn-success mb-1" data-clipboard-target="#video-{{ playlist_item.video.video_id }}">
  597. <i class="far fa-copy" aria-hidden="true"></i>
  598. </button>
  599. <a class="btn btn-sm btn-primary mb-1" href="{% url 'video' playlist_item.video.video_id %}"><i class="fas fa-info"></i></a>
  600. <button title="Mark or unmark video favorite!" class="btn btn-sm btn-dark mb-1" type="button" hx-get="{% url 'mark_video_favorite' playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-fav">
  601. <div id="video-{{ forloop.counter }}-fav">
  602. {% if playlist_item.video.is_favorite %}
  603. <i class="fas fa-heart" style="color: #fafa06"></i>
  604. {% else %}
  605. <i class="far fa-heart"></i>
  606. {% endif %}
  607. </div>
  608. </button>
  609. {% if not playlist_item.is_duplicate %}
  610. <button title="Mark or unmark video as plan to watch!" class="btn btn-sm btn-warning mb-1" type="button" hx-get="{% url 'mark_video_planned_to_watch' playlist_item.video.video_id %}" hx-target="#video-{{ forloop.counter }}-planned">
  611. <div id="video-{{ forloop.counter }}-planned">
  612. {% if playlist_item.video.is_planned_to_watch %}
  613. <i class="fas fa-clock" style="color: #000000"></i>
  614. {% else %}
  615. <i class="far fa-clock"></i>
  616. {% endif %}
  617. </div>
  618. </button>
  619. {% endif %}
  620. {% if playlist.marked_as == "watching" and not playlist_item.is_duplicate %}
  621. <button title="Mark or unmark video as watched!" 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">
  622. <div id="video-{{ forloop.counter }}-watched">
  623. {% if playlist_item.video.is_marked_as_watched %}
  624. <i class="fas fa-check-circle"></i>
  625. {% else %}
  626. <i class="far fa-check-circle"></i>
  627. {% endif %}
  628. </div>
  629. </button>
  630. {% endif %}
  631. {% endif %}
  632. </div>
  633. {% endif %}
  634. </li>
  635. {% endfor %}
  636. </div>
  637. {% else %}
  638. <div class="card bg-dark text-white">
  639. <div class="card-body">
  640. <div class="d-flex justify-content-center align-content-center mt-2">
  641. Playlist is empty ;-;
  642. </div>
  643. <div class="d-flex justify-content-center align-content-center">
  644. Consider moving/copying videos from other playlists into this playlist.
  645. </div>
  646. <div class="d-flex justify-content-center align-content-center">
  647. - OR -
  648. </div>
  649. <div class="d-flex justify-content-center align-content-center">
  650. Add new videos to this playlist
  651. </div>
  652. <div class="d-flex justify-content-center mt-2">
  653. <textarea name="add-videos-textarea" class="form-control w-50" id="add-videos-textarea" placeholder="Enter video links or video IDs line by line here"
  654. rows="5">{{ manage_playlists_import_textarea }}</textarea>
  655. </div>
  656. <div class="d-flex justify-content-center">
  657. <div class="form-text">
  658. Note: You can only add 25 videos at a time. Find videos by
  659. <a href="{% url 'search' %}?mode=videos&type=all" target="_blank" style="color: #398439; text-decoration: none">searching on UnTube <i class="fas fa-external-link-alt"></i> </a> or
  660. <a href="https://www.youtube.com/" target="_blank" style="color: #ec2d90; text-decoration: none">searching on YouTube <i class="fas fa-external-link-alt"></i> </a>
  661. </div>
  662. </div>
  663. <div class="d-flex justify-content-center mt-2">
  664. <div class="btn-group ms-1 mt-1">
  665. <button hx-indicator="#add-videos-loader" hx-post="{% url 'playlist_add_new_videos' playlist.playlist_id %}" hx-include="#add-videos-textarea" hx-target="#add-videos-box" type="button" class="btn btn-primary">
  666. Add
  667. </button>
  668. </div>
  669. </div>
  670. <div class="d-flex justify-content-center mt-2">
  671. <div id="add-videos-box" class="d-flex align-items-end ms-2 text-warning">
  672. </div>
  673. <div class="htmx-indicator d-flex align-items-center" id="add-videos-loader">
  674. <img src="{% static 'svg-loaders/grid.svg' %}" width="25" height="25" class="ms-2 mt-2">
  675. <span class="mt-2 ms-2 text-warning">Adding videos, please wait... </span>
  676. </div>
  677. </div>
  678. </div>
  679. </div>
  680. {% endif %}
  681. </div>
  682. <div id="load-more-videos-spinner" class="d-flex htmx-indicator justify-content-center align-items-center">
  683. <div class="spinner-border mt-3" role="status">
  684. </div>
  685. <span class="mt-3 ms-2">Loading more videos...</span>
  686. </div>
  687. {% endif %}
  688. {% endif %}
  689. </div>
  690. <button class="scrollToTopBtn sticky-top">
  691. <i class="fa fa-angle-double-up fa-lg"></i></button>
  692. <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  693. <script type="application/javascript">
  694. $(document).ready(function(){
  695. // multiple choices select search box
  696. var multipleCancelButton = new Choices('#playlists-to-move-to', {
  697. removeItemButton: true,
  698. });
  699. });
  700. $(function () {
  701. var $populationChart = $("#channel-videos-chart");
  702. $.ajax({
  703. url: $populationChart.data("url"),
  704. success: function (data) {
  705. var ctx = $populationChart[0].getContext("2d");
  706. var coloR = [];
  707. var dynamicColors = function() { // generate random color
  708. var r = Math.floor(Math.random() * 255);
  709. var g = Math.floor(Math.random() * 255);
  710. var b = Math.floor(Math.random() * 255);
  711. return "rgb(" + r + "," + g + "," + b + ")";
  712. };
  713. for (var i in data.labels) {
  714. if (data.labels)
  715. coloR.push(dynamicColors());
  716. }
  717. new Chart(ctx, {
  718. type: 'pie',
  719. data: {
  720. labels: data.labels,
  721. datasets: [{
  722. label: 'Videos',
  723. backgroundColor: coloR,
  724. data: data.data
  725. }]
  726. },
  727. options: {
  728. responsive: true,
  729. legend: {
  730. position: 'right',
  731. display: false
  732. },
  733. title: {
  734. display: true,
  735. text: 'Video Count Distribution per Channel',
  736. fontSize: 20,
  737. fontColor: '#fff',
  738. },
  739. }
  740. });
  741. }
  742. });
  743. });
  744. // when a video list item is clicked on, it gets checked and its bg turns red
  745. function selectVideo(video) {
  746. if ($('#row2').is(':visible')) {
  747. var videoCB = document.getElementById("video-" + video.id);
  748. if (videoCB.checked) {
  749. video.classList.remove("bg-danger");
  750. video.classList.add("bg-transparent");
  751. videoCB.checked = false;
  752. } else {
  753. video.classList.remove("bg-transparent");
  754. video.classList.add("bg-danger");
  755. videoCB.checked = true;
  756. }
  757. }
  758. displaySelectedVideosCount();
  759. }
  760. var moveCopyCollapse = document.getElementById('moveItemsToCollapse');
  761. var bsMoveCopyCollapse = new bootstrap.Collapse(moveCopyCollapse, {
  762. toggle: false
  763. });
  764. var deleteCollapse = document.getElementById('deleteItemsCollapse');
  765. var bsDeleteCollapse = new bootstrap.Collapse(deleteCollapse, {
  766. toggle: false
  767. });
  768. var addVideosCollapse = document.getElementById('addVideosCollapse');
  769. var bsAddVideosCollapse = new bootstrap.Collapse(addVideosCollapse, {
  770. toggle: false
  771. });
  772. var createPlaylistCollapse = document.getElementById('createPlaylistCollapse');
  773. var bsCreatePlaylistCollapse = new bootstrap.Collapse(createPlaylistCollapse, {
  774. toggle: false
  775. });
  776. function displaySelectedVideosCount() {
  777. var count = 0;
  778. var checkboxes = document.getElementsByClassName('video-checkboxes');
  779. for (var checkbox of checkboxes) {
  780. if (checkbox.checked) {
  781. count ++;
  782. }
  783. }
  784. var displayBoxes = document.getElementsByClassName('selected-videos-count');
  785. for (var displayBox of displayBoxes) {
  786. displayBox.innerHTML = count + " videos selected"
  787. }
  788. }
  789. document.getElementById('manageBtn').addEventListener('click', function () { document.getElementById("delete-videos-confirm-box").innerHTML = "";
  790. document.getElementById("delete-videos-confirm-box").innerHTML = `
  791. <h5>You can select videos by clicking any where on the video box. Selected videos will be highlighted red.</h5>
  792. {% if not user.profile.confirm_before_deleting %}
  793. <h5>
  794. <i class="fas fa-exclamation-triangle" style="color: yellow"></i>
  795. Note: You have set confirm before deleting to False. Buttons below will take effect immediately when clicked.
  796. <i class="fas fa-exclamation-triangle" style="color: yellow"></i>
  797. </h5>
  798. <hr>
  799. {% else %}
  800. {% if playlist.has_unavailable_videos %}
  801. <h5><i class="fas fa-exclamation-triangle" style="color: yellow"></i> Clicking on delete unavailable videos button will take immediate effect. All videos labelled unavailable in this playlist will be deleted from your YouTube playlist.</h5>
  802. {% endif %}
  803. {% if playlist.has_duplicate_videos %}
  804. <h5>Note: Clicking on delete duplicate videos button will take immediate effect. All videos labelled duplicate in this playlist will be deleted from your YouTube playlist.</h5>
  805. {% endif %}
  806. <hr>
  807. {% endif %}
  808. `;
  809. bsMoveCopyCollapse.hide();
  810. bsDeleteCollapse.hide();
  811. bsAddVideosCollapse.hide();
  812. bsCreatePlaylistCollapse.hide();
  813. var displayBoxes = document.getElementsByClassName('selected-videos-count');
  814. for (var displayBox of displayBoxes) {
  815. displayBox.innerHTML = "0 videos selected"
  816. }
  817. });
  818. moveCopyCollapse.addEventListener('show.bs.collapse', function () {
  819. bsDeleteCollapse.hide();
  820. bsAddVideosCollapse.hide();
  821. bsCreatePlaylistCollapse.hide();
  822. });
  823. deleteCollapse.addEventListener('show.bs.collapse', function () {
  824. bsMoveCopyCollapse.hide();
  825. bsAddVideosCollapse.hide();
  826. bsCreatePlaylistCollapse.hide();
  827. });
  828. addVideosCollapse.addEventListener('show.bs.collapse', function () {
  829. bsMoveCopyCollapse.hide();
  830. bsDeleteCollapse.hide();
  831. bsCreatePlaylistCollapse.hide();
  832. });
  833. createPlaylistCollapse.addEventListener('show.bs.collapse', function () {
  834. bsMoveCopyCollapse.hide();
  835. bsDeleteCollapse.hide();
  836. bsAddVideosCollapse.hide();
  837. });
  838. <!-- end -->
  839. document.getElementById('select-all-btn').onclick = function() {
  840. document.getElementById('select-all-btn').style.display = "none";
  841. document.getElementById('deselect-all-btn').style.display = "block";
  842. var checkboxes = document.getElementsByClassName('video-checkboxes');
  843. for (var checkbox of checkboxes) {
  844. checkbox.checked = true;
  845. }
  846. 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.
  847. for(var i=0, len=listItems.length; i<len; i++)
  848. {
  849. if(listItems[i].classList.contains("bg-transparent")){
  850. listItems[i].classList.remove("bg-transparent");
  851. listItems[i].classList.add("bg-danger");
  852. }
  853. }
  854. displaySelectedVideosCount();
  855. }
  856. document.getElementById('deselect-all-btn').onclick = function() {
  857. document.getElementById('deselect-all-btn').style.display = "none";
  858. document.getElementById('select-all-btn').style.display = "block";
  859. var checkboxes = document.getElementsByClassName('video-checkboxes');
  860. for (var checkbox of checkboxes) {
  861. checkbox.checked = false;
  862. }
  863. 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.
  864. for(var i=0, len=listItems.length; i<len; i++)
  865. {
  866. if(listItems[i].classList.contains("bg-danger")){
  867. listItems[i].classList.remove("bg-danger");
  868. listItems[i].classList.add("bg-transparent");
  869. }
  870. }
  871. displaySelectedVideosCount();
  872. }
  873. function row1_hide() {
  874. document.getElementById("row1").style.display = "none";
  875. 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.
  876. for(var i=0, len=checkboxes.length; i<len; i++)
  877. {
  878. //checkboxes[i].style.display = "block";
  879. checkboxes[i].checked = false;
  880. }
  881. document.getElementById("row2").style.display = "block";
  882. }
  883. function row1_show() {
  884. document.getElementById("row1").style.display = "block";
  885. 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.
  886. for(var i=0, len=checkboxes.length; i<len; i++)
  887. {
  888. checkboxes[i].style.display = "none";
  889. checkboxes[i].checked = false;
  890. }
  891. document.getElementById("row2").style.display = "none";
  892. 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.
  893. for(var i=0, len=listItems.length; i<len; i++)
  894. {
  895. if(listItems[i].classList.contains("bg-danger")){
  896. listItems[i].classList.remove("bg-danger");
  897. listItems[i].classList.add("bg-transparent");
  898. }
  899. }
  900. }
  901. function select_all_checkboxes(source) {
  902. checkboxes = document.getElementsByClassName('big-checkbox');
  903. for(var i=0, n=checkboxes.length;i<n;i++) {
  904. checkboxes[i].checked = source.checked;
  905. }
  906. }
  907. </script>
  908. <!--
  909. <script src="{% static 'youtube-audio-player/iframe-api.js' %}"></script>
  910. <script src="{% static 'youtube-audio-player/yt.min.js' %}"></script>
  911. -->
  912. {% endblock %}