implemented video completion times

apps/main/templates/intercooler/videos.html

@@ -51,7 +51,17 @@
                             <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
                                 {{ playlist_item.video.name|truncatewords:"16" }}
                             </a> by {{ playlist_item.video.channel_name }} <br>
-                            <span class="badge bg-secondary">{{ playlist_item.video.duration }}</span>
+                            <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">
+                                    <span class="badge bg-secondary">{{ playlist_item.video.duration }}</span>
+                                </a>
+                            <div class="collapse" id="{{ playlist_item.playlist_item_id }}DurationCollapse">
+                                <div class="card card-body bg-dark text-white text-capitalize border border-3 mt-2 mb-2 border-light">
+                                    <div id="{{ playlist_item.playlist_item_id }}-completion-times">
+
+                                    </div>
+                                </div>
+                            </div>
+
                             {% if playlist_item.video.has_cc %}<span class="badge bg-secondary">CC</span>{% endif %}
                             {% if playlist_item.video.published_at %}<span class="badge bg-secondary">{{ playlist_item.video.published_at }}</span>{% endif %}
                             <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>

apps/main/templates/view_playlist.html

@@ -96,10 +96,10 @@
                                 <span class="badge bg-light text-black-50">{% if playlist.is_user_owned %}OWNED{% else %}IMPORTED{% endif %}</span>
 
                                 <span class="badge bg-light text-black-50">{{ playlist.video_count }} VIDEOS</span>
-                                <a data-bs-toggle="collapse" href="#vidDurationCollapse" role="button" aria-expanded="false" aria-controls="vidDurationCollapse">
+                                <a data-bs-toggle="collapse" href="#playlistDurationCollapse" role="button" aria-expanded="false" aria-controls="playlistDurationCollapse">
                                         <span class="badge bg-light text-black-50">{{ playlist.playlist_duration }}</span>
                                     </a>
-                                <div class="collapse" id="vidDurationCollapse">
+                                <div class="collapse" id="playlistDurationCollapse">
                                     <div class="card card-body bg-transparent text-white text-capitalize border border-3 mt-2 mb-2 border-light">
                                         <div hx-get="{% url 'playlist_completion_times' playlist.playlist_id %}"
                                 hx-trigger="revealed"
@@ -526,7 +526,16 @@
                                                 <a class="link-dark" href="{% url 'video' playlist_item.video.video_id %}">
                                                     {{ playlist_item.video.name|truncatewords:"16" }}
                                                 </a> by {{ playlist_item.video.channel_name }} <br>
-                                                <span class="badge bg-secondary">{{ playlist_item.video.duration }}</span>
+                                                <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">
+                                                        <span class="badge bg-secondary">{{ playlist_item.video.duration }}</span>
+                                                    </a>
+                                                <div class="collapse" id="{{ playlist_item.playlist_item_id }}DurationCollapse">
+                                                    <div class="card card-body bg-dark text-white text-capitalize border border-3 mt-2 mb-2 border-light">
+                                                        <div id="{{ playlist_item.playlist_item_id }}-completion-times">
+
+                                                        </div>
+                                                    </div>
+                                                </div>
                                                 {% if playlist_item.video.has_cc %}<span class="badge bg-danger">CC</span>{% endif %}
                                                 {% if playlist_item.video.published_at %}<span class="badge bg-secondary">added to playlist on {{ playlist_item.published_at }}</span>{% endif %}
                                                 <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>
@@ -607,8 +616,10 @@
 
             </div>
         {% endif %}
-        <div class="d-flex justify-content-center">
-            <img id="load-more-videos-spinner" class="htmx-indicator mt-4" src="{% static 'svg-loaders/spinning-circles.svg' %}" width="40" height="40">
+        <div id="load-more-videos-spinner" class="d-flex htmx-indicator justify-content-center align-items-center">
+            <div class="spinner-border mt-3" role="status">
+            </div>
+            <span class="mt-3 ms-2">Loading more videos...</span>
         </div>
         {% endif %}
     </div>

apps/main/templates/view_video.html

@@ -5,7 +5,6 @@
 
 {% block content %}
     <script src="{% static 'htmx/extensions/class-tools.js' %}" type="application/javascript"></script>
-    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
 
     <div id="view_video">
         {% if playlist.has_playlist_changed %}
@@ -55,7 +54,18 @@
 
 
                             <h6 class="h5 text-uppercase overflow-auto text-black-50">
-                                <span class="badge bg-success mb-1">{{ video.duration }}</span>
+                                <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">
+                                    <span class="badge bg-success mb-1">{{ video.duration }}</span>
+                                </a>
+                                <div class="collapse" id="{{ video.video_id }}DurationCollapse">
+                                    <div class="card card-body bg-dark text-white text-capitalize border border-3 mt-2 mb-2 border-light">
+                                        <div hx-get="{% url 'video_completion_times' video.video_id %}"
+                                hx-trigger="revealed"
+                                hx-swap="outerHTML">
+
+                                        </div>
+                                    </div>
+                                </div>
                                 {% if video.has_cc %}<span class="badge bg-danger mb-1">CC</span>{% endif %}
                                 {% if video.published_at %}<span class="badge bg-secondary mb-1">Video uploaded on {{ video.published_at }}</span>{% endif %}
                                 <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>

apps/main/urls.py

@@ -10,6 +10,8 @@ urlpatterns = [
     ### STUFF RELATED TO INDIVIDUAL VIDEOS
     path("video/<slug:video_id>", views.view_video, name='video'),
     path("video/<slug:video_id>/notes", views.video_notes, name='video_notes'),
+    path("video/<slug:video_id>/get-video-completion-times", views.video_completion_times,
+         name="video_completion_times"),
 
     ### STUFF RELATED TO WHOLE SITE
     path("search", views.search, name="search"),

apps/main/views.py

@@ -1246,3 +1246,16 @@ def playlist_completion_times(request, playlist_id):
         <h6>At 1.75x speed: {getHumanizedTimeString(playlist_duration/1.75)}</h6>
         <h6>At 2x speed: {getHumanizedTimeString(playlist_duration/2)}</h6>
     """)
+
+@login_required
+def video_completion_times(request, video_id):
+    video_duration = request.user.videos.get(video_id=video_id).duration_in_seconds
+
+    return HttpResponse(f"""
+        <h5 class="text-warning">Video completion times:</h5>
+        <h6>At 1.25x speed: {getHumanizedTimeString(video_duration/1.25)}</h6>
+        <h6>At 1.5x speed: {getHumanizedTimeString(video_duration/1.5)}</h6>
+        <h6>At 1.75x speed: {getHumanizedTimeString(video_duration/1.75)}</h6>
+        <h6>At 2x speed: {getHumanizedTimeString(video_duration/2)}</h6>
+    """)
+