view_video.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  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_video">
  7. {% if playlist.has_playlist_changed %}
  8. {% else %}
  9. <div class="alert alert-dark alert-dismissible fade show" role="alert" id="user-label-alert" style="display:none;">
  10. <form method="post" action="{% url 'add_video_user_label' video.video_id %}" class="d-flex justify-content-center">
  11. {% csrf_token %}
  12. <span class="mt-2 me-1">Enter an optional label to identify this video with:</span>
  13. <input class="form-control w-25 me-2" type="text" placeholder="Enter here" name="user_label" value="{{ video.user_label }}" aria-label="user label">
  14. <button type="submit" class="btn btn-primary">Save</button>
  15. </form>
  16. <button type="button" class="btn-close mt-2 me-2" onclick='document.getElementById("user-label-alert").style.display = "none";' aria-label="Close"></button>
  17. </div>
  18. <div class="card text-white bg-dark" style="max-width: 100%;">
  19. <div class="row g-0">
  20. {% if not video.is_unavailable_on_yt and not video.was_deleted_on_yt %}
  21. <div class="col-md-4 p-3">
  22. <img class="img-fluid rounded-3" src="{{ video.thumbnail_url }}" style="max-width:100%; height: auto; object-fit: cover;">
  23. <span class="d-flex justify-content-center">
  24. <a type="submit" onclick="window.open('{{ video.thumbnail_url }}')" class="btn btn-primary mt-3"><i class="fas fa-image fa-lg"></i></a>
  25. <a href="https://www.youtube.com/watch?v={{ video.video_id }}" class="btn btn-info ms-2 mt-3" target="_blank" id="share_link" style=""><i class="fas fa-external-link-alt" aria-hidden="true"></i></a>
  26. <input class="form-control me-1 visually-hidden" id="video-{{ video.video_id }}" value="https://www.youtube.com/watch?v={{ video.video_id }}">
  27. <button class="copy-btn btn btn-success ms-2 mt-3" data-clipboard-target="#video-{{ video.video_id }}">
  28. <i class="far fa-copy" aria-hidden="true"></i>
  29. </button>
  30. <button class="btn btn-dark mt-3 ms-2" type="button" hx-get="{% url 'mark_video_favorite' video.video_id %}" hx-target="#video-fav">
  31. <div id="video-fav">
  32. {% if video.is_favorite %}
  33. <i class="fas fa-heart" style="color: #fafa06"></i>
  34. {% else %}
  35. <i class="far fa-heart"></i>
  36. {% endif %}
  37. </div>
  38. </button>
  39. <button title="Mark or unmark video as plan to watch!" class="btn btn-warning mt-3 ms-2" type="button" hx-get="{% url 'mark_video_planned_to_watch' video.video_id %}" hx-target="#video-{{ forloop.counter }}-planned">
  40. <div id="video-{{ forloop.counter }}-planned">
  41. {% if video.is_planned_to_watch %}
  42. <i class="fas fa-clock" style="color: #000000"></i>
  43. {% else %}
  44. <i class="far fa-clock"></i>
  45. {% endif %}
  46. </div>
  47. </button>
  48. </span>
  49. </div>
  50. {% endif %}
  51. <div class="col{% if not video.is_unavailable_on_yt and not video.was_deleted_on_yt %}-md-8{% endif %}">
  52. <div class="card-body">
  53. <div class="row d-flex justify-content-between">
  54. <h2 class="card-title text-white col-10">
  55. <a href="https://www.youtube.com/watch?v={{ video.video_id }}" target="_blank" style="color: white; text-decoration: none">{{ video.name }}</a>
  56. <button class="btn btn-light btn-sm ms-2" onclick='document.getElementById("user-label-alert").style.display = "block";'>
  57. <i class="fas fa-pencil-alt" aria-hidden="true"></i>
  58. </button>
  59. {% if video.is_unavailable_on_yt or video.was_deleted_on_yt %}
  60. <button class="btn btn-dark" type="button" hx-get="{% url 'mark_video_favorite' video.video_id %}" hx-target="#video-fav">
  61. <div id="video-fav">
  62. {% if video.is_favorite %}
  63. <i class="fas fa-heart" style="color: #fafa06"></i>
  64. {% else %}
  65. <i class="far fa-heart"></i>
  66. {% endif %}
  67. </div>
  68. </button>
  69. <button title="Mark or unmark video as plan to watch!" class="btn btn-warning" type="button" hx-get="{% url 'mark_video_planned_to_watch' video.video_id %}" hx-target="#video-{{ forloop.counter }}-planned">
  70. <div id="video-{{ forloop.counter }}-planned">
  71. {% if video.is_planned_to_watch %}
  72. <i class="fas fa-clock" style="color: #000000"></i>
  73. {% else %}
  74. <i class="far fa-clock"></i>
  75. {% endif %}
  76. </div>
  77. </button>
  78. {% endif %}
  79. <br><small class="h4">{% if video.user_label %}a.k.a <span style="border-bottom: 3px #ffffff dashed;"> {{ video.user_label }}</span>{% endif %}</small>
  80. </h2>
  81. </div>
  82. {% if not video.is_unavailable_on_yt and not video.was_deleted_on_yt %}
  83. <h6>by <a href="{% url 'search' %}?mode=videos&channel={{ video.channel_name }}" style="text-decoration: none; color: white"><span style="border-bottom: 3px #e35959 dashed;">{{ video.channel_name }}</span></a></h6>
  84. <p class="card-text">
  85. {% if video.description %}
  86. <h5 class="overflow-auto" style="max-height: 350px;">
  87. {{ video.description|linebreaksbr|urlize }}
  88. </h5>
  89. {% else %}
  90. <h5>No description</h5>
  91. {% endif %}
  92. </p>
  93. {% endif %}
  94. <h6 class="h5 text-uppercase overflow-auto text-black-50">
  95. {% if not video.is_unavailable_on_yt and not video.was_deleted_on_yt %}
  96. <a style="text-decoration: none" data-bs-toggle="collapse" href="#{{ video.video_id }}DurationCollapse" role="button" aria-expanded="false" aria-controls="{{ video.video_id }}DurationCollapse">
  97. <span class="badge bg-success mb-1">{{ video.duration }}</span>
  98. </a>
  99. <div class="collapse" id="{{ video.video_id }}DurationCollapse">
  100. <div class="card card-body bg-dark text-white text-capitalize border border-3 mt-2 mb-2 border-light">
  101. <div hx-get="{% url 'video_completion_times' video.video_id %}"
  102. hx-trigger="revealed"
  103. hx-swap="outerHTML">
  104. </div>
  105. </div>
  106. </div>
  107. {% endif %}
  108. <small>
  109. {% if not video.is_unavailable_on_yt and not video.was_deleted_on_yt %}
  110. {% if video.has_cc %}<span class="badge bg-danger mb-1">CC</span>{% endif %}
  111. {% if video.published_at %}<span class="badge bg-secondary mb-1">Video uploaded on {{ video.published_at }}</span>{% endif %}
  112. <span class="badge bg-primary text-white mb-1"><i class="fas fa-eye"></i> {% if video.view_count == -1 %}HIDDEN{% else %}{{ video.view_count|intcomma }}{% endif %}</span>
  113. <span class="badge bg-warning text-black-50 mb-1"><i class="fas fa-thumbs-up" {% if video.liked %}style="color: dodgerblue"{% endif %}></i> {% if video.like_count == -1 %}HIDDEN{% else %}{{ video.like_count|intcomma }}{% endif %}</span>
  114. <span class="badge bg-warning text-black-50 mb-1"><i class="fas fa-thumbs-down"></i> {% if video.dislike_count == -1 %}HIDDEN{% else %}{{ video.dislike_count|intcomma }}{% endif %}</span>
  115. <span class="badge bg-info text-black-50 mb-1"><i class="fas fa-comments"></i> {% if video.comment_count == -1 %}HIDDEN{% else %}{{ video.comment_count|intcomma }}{% endif %} </span>
  116. {% endif %}
  117. {% if video.is_unavailable_on_yt or video.was_deleted_on_yt %}<span class="badge bg-danger text-light mb-1">VIDEO WENT UNAVAILABLE ON YT</span>{% endif %}
  118. <span class="badge bg-light text-black-50 mb-1"><a href="#found-in" style="text-decoration: none; color: grey"> Found in {{ video.playlists.all.count }} playlist{% if video.playlists.all.count > 1 or video.playlists.all.count == 0 %}s{% endif %}</a></span>
  119. {% if video.is_marked_as_watched %}
  120. <span class="badge bg-dark text-white" >
  121. <i class="fas fa-flag-checkered me-1"></i> marked watched
  122. </span>
  123. {% endif %}
  124. </small>
  125. </h6>
  126. <p class="card-text text-white-50"><small>Last updated {{ video.video_details_modified_at|naturalday }}</small> &bullet; <small>{{ video.num_of_accesses }} views </small></p> </div>
  127. </div>
  128. </div>
  129. </div>
  130. <br>
  131. {% endif %}
  132. </div>
  133. <div class="row">
  134. <div class="col-6">
  135. <iframe id="ytplayer" width="100%" height="100%" src="//www.youtube.com/embed/{{ video.video_id }}?enablejsapi=1" frameborder="0" style="border: solid 5px #37474F" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  136. </div>
  137. <div class="col-6">
  138. <div class="row">
  139. <div class="col-6">
  140. <h4>Your notes for this video
  141. </h4>
  142. </div>
  143. <div class="col d-flex justify-content-end pt-2">
  144. <span id="notes-save-status" class="text-success">
  145. </span>
  146. </div>
  147. </div>
  148. <div >
  149. <textarea name="video-notes-text-area"
  150. hx-post="{% url 'video_notes' video.video_id %}"
  151. hx-trigger="keyup changed delay:0.7s"
  152. hx-target="#notes-save-status"
  153. class="form-control"
  154. placeholder="Enter here. Automatically saved after every 1s of typing!"
  155. rows="13">{{ video.user_notes }}</textarea>
  156. <div>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. <br>
  162. {% if video.playlists.all.count != 0 %}
  163. <div class="">
  164. <h3><span style="border-bottom: 3px #497ce2 dashed;">Video found in the following playlist{% if video.playlists.all.count > 1 %}s{% endif %}</span><i class="fas fa-binoculars ms-2" style="color: #4669d2"></i></h3>
  165. <div id="found-in" class="row row-cols-1 row-cols-md-4 g-4 text-dark mt-0" data-masonry='{"percentPosition": true }'>
  166. {% include 'intercooler/playlists.html' with playlists=video.playlists.all watching=False bg_color="#357779" show_controls=True %}
  167. </div>
  168. </div>
  169. {% endif %}
  170. <script type="text/javascript">
  171. // from https://developers.google.com/youtube/iframe_api_reference#Examples
  172. var tag = document.createElement('script');
  173. tag.id = 'iframe-demo';
  174. tag.src = 'https://www.youtube.com/iframe_api';
  175. var firstScriptTag = document.getElementsByTagName('script')[0];
  176. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  177. var player;
  178. function onYouTubeIframeAPIReady() {
  179. player = new YT.Player('ytplayer', {
  180. events: {
  181. 'onReady': onPlayerReady,
  182. 'onStateChange': onPlayerStateChange
  183. }
  184. });
  185. }
  186. function onPlayerReady(event) {
  187. document.getElementById('ytplayer').style.borderColor = '#FF6D00';
  188. }
  189. function changeBorderColor(playerStatus) {
  190. var color;
  191. if (playerStatus === -1) {
  192. color = "#37474F"; // unstarted = gray
  193. } else if (playerStatus === 0) {
  194. color = "#FFFF00"; // ended = yellow
  195. } else if (playerStatus === 1) {
  196. color = "#33691E"; // playing = green
  197. } else if (playerStatus === 2) {
  198. color = "#DD2C00"; // paused = red
  199. // console.log(player.playerInfo.currentTime + " secs elapsed!");
  200. } else if (playerStatus === 3) {
  201. color = "#AA00FF"; // buffering = purple
  202. } else if (playerStatus === 5) {
  203. color = "#FF6DOO"; // video cued = orange
  204. }
  205. if (color) {
  206. document.getElementById('ytplayer').style.borderColor = color;
  207. }
  208. }
  209. function onPlayerStateChange(event) {
  210. changeBorderColor(event.data);
  211. // can use the below info to create a stream room
  212. // player.playerInfo.currentTime returns player elapsed time
  213. // console.log(player)
  214. }
  215. </script>
  216. {% endblock %}