implemented playlist completion times and open random video from playlist

apps/main/templates/view_playlist.html

@@ -96,7 +96,19 @@
                                 <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>
-                                <span class="badge bg-light text-black-50">{{ playlist.playlist_duration }} </span>
+                                <a data-bs-toggle="collapse" href="#vidDurationCollapse" role="button" aria-expanded="false" aria-controls="vidDurationCollapse">
+                                        <span class="badge bg-light text-black-50">{{ playlist.playlist_duration }}</span>
+                                    </a>
+                                <div class="collapse" id="vidDurationCollapse">
+                                    <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"
+                                hx-swap="outerHTML">
+
+                                        </div>
+                                    </div>
+                                </div>
+
                                 <span class="badge bg-light text-black-50">{% if playlist.is_private_on_yt %}PRIVATE{% else %}PUBLIC{% endif %}</span>
                                 {% if playlist.is_yt_mix %}<span class="badge bg-light text-black-50">YT MIX</span>{% endif %}
 
@@ -255,6 +267,14 @@
                                 </a>
                             </div>
 
+                            {% if playlist.video_count != 0 %}
+                            <div class="btn-group me-2 mb-2">
+                                <a href="{% url 'playlist_open_random_video' playlist.playlist_id %}" class="btn btn-danger">
+                                    Open a Random Video
+                                </a>
+                            </div>
+                            {% endif %}
+
                             <div class="btn-group me-2 mb-2">
 
                                 <button class="btn btn-warning" type="button" hx-get="{% url 'mark_playlist_as' playlist.playlist_id 'favorite' %}" hx-target="#playlist-fav">

apps/main/templates/view_video.html

@@ -82,7 +82,9 @@
 
     <div class="row">
         <div class="col-6">
-         <iframe width="100%" height="100%" src="//www.youtube.com/embed/{{ video.video_id }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+            <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>
+
         </div>
         <div class="col-6">
             <div class="row">
@@ -101,7 +103,7 @@
             <div >
                 <textarea name="video-notes-text-area"
                           hx-post="{% url 'video_notes' video.video_id %}"
-                          hx-trigger="keyup changed delay:2s"
+                          hx-trigger="keyup changed delay:1.5s"
                           hx-target="#notes-save-status"
                           class="form-control"
                           id="video-notes-text-area"
@@ -152,63 +154,59 @@
                     </div>
                 </div>
 
-                <!--
-        <div class="col">
-            <div class="card">
-                <a style="background-color: #7e89c2;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
-                    <div class="card-body">
-                <h5 class="card-title">
-                   {{ playlist.name }}
-                    {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
-                    {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
-                </h5>
-                <p class="card-text">
-                    <span class="badge bg-{% if playlist.get_watch_time_left == "0secs." %}success{% else %}primary{% endif %} text-white">{{ playlist.get_watched_videos_count }}/{{ playlist.get_watchable_videos_count }} viewed</span>
-
-                    {% if playlist.get_watch_time_left != "0secs." %}<span class="badge bg-dark text-white">{{ playlist.get_watch_time_left }} left</span>{% endif %}
-                </p>
-                    {% if playlist.tags.all %}
-                <small>
-                <i class="fas fa-tags fa-sm" style="color: yellow"></i>
-                    {% for tag in playlist.tags.all %}
-                        <span class="badge rounded-pill bg-primary mb-lg-1">
-                            {{ tag.name }}
-                        </span>
-                    {% endfor %}
-                </small>
-                    {% endif %}
-                </div>
-                </a>
-            </div>
-        </div> -->
-                <!--
-            {% if forloop.counter == 3 %}
-                {% if watching.count|add:"-3" != 0 %}
-                <div class="col">
-                    <div class="card">
-                        <a style="background-color: #7e89c2;" href="{% url 'all_playlists' 'watching' %}" class="list-group-item list-group-item-action" aria-current="true">
-                            <div class="card-body">
-
-                                <p class="card-text">
-                                    <h3>+ {{ watching.count|add:"-3" }} more</h3>
-                                </p>
-                             </div>
-                        </a>
-                    </div>
-                </div>
-                {% endif %}
-            {% endif %}
-            -->
             {% endfor %}
         </div>
     </div>
 
-    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
 
-    <!-- Initialize Quill editor -->
-    <script>
-      var quill = new Quill('#editor', {
-        theme: 'snow'
-      });
+
+    <script type="text/javascript">
+        // from https://developers.google.com/youtube/iframe_api_reference#Examples
+      var tag = document.createElement('script');
+      tag.id = 'iframe-demo';
+      tag.src = 'https://www.youtube.com/iframe_api';
+      var firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+      var player;
+      function onYouTubeIframeAPIReady() {
+        player = new YT.Player('ytplayer', {
+            events: {
+              'onReady': onPlayerReady,
+              'onStateChange': onPlayerStateChange
+            }
+        });
+      }
+      function onPlayerReady(event) {
+        document.getElementById('ytplayer').style.borderColor = '#FF6D00';
+      }
+      function changeBorderColor(playerStatus) {
+        var color;
+        if (playerStatus === -1) {
+          color = "#37474F"; // unstarted = gray
+        } else if (playerStatus === 0) {
+          color = "#FFFF00"; // ended = yellow
+        } else if (playerStatus === 1) {
+          color = "#33691E"; // playing = green
+        } else if (playerStatus === 2) {
+          color = "#DD2C00"; // paused = red
+            // console.log(player.playerInfo.currentTime + " secs elapsed!");
+        } else if (playerStatus === 3) {
+          color = "#AA00FF"; // buffering = purple
+        } else if (playerStatus === 5) {
+          color = "#FF6DOO"; // video cued = orange
+        }
+        if (color) {
+          document.getElementById('ytplayer').style.borderColor = color;
+        }
+      }
+      function onPlayerStateChange(event) {
+        changeBorderColor(event.data);
+
+        // can use the below info to create a stream room
+        // player.playerInfo.currentTime returns player elapsed time
+        // console.log(player)
+      }
     </script>
+
 {% endblock %}

apps/main/urls.py

@@ -42,6 +42,9 @@ urlpatterns = [
     path("playlist/<slug:playlist_id>/delete-playlist", views.delete_playlist, name="delete_playlist"),
     path("playlist/<slug:playlist_id>/reset-watched", views.reset_watched, name="reset_watched"),
     path("playlist/<slug:playlist_id>/move-copy-videos/<str:action>", views.playlist_move_copy_videos, name="playlist_move_copy_videos"),
+    path("playlist/<slug:playlist_id>/open-random-video", views.playlist_open_random_video, name="playlist_open_random_video"),
+    path("playlist/<slug:playlist_id>/get-playlist-completion-times", views.playlist_completion_times,
+         name="playlist_completion_times"),
 
     ### STUFF RELATED TO PLAYLISTS IN BULK
     path("search/playlists/<slug:playlist_type>", views.search_playlists, name="search_playlists"),

apps/main/views.py

@@ -1225,3 +1225,24 @@ def playlist_move_copy_videos(request, playlist_id, action):
             return HttpResponse("Error copying!")
 
     return HttpResponse(success_message)
+
+@login_required
+def playlist_open_random_video(request, playlist_id):
+    playlist = request.user.playlists.get(playlist_id=playlist_id)
+    videos = playlist.videos.all()
+
+    random_video = random.choice(videos)
+
+    return redirect(f'/video/{random_video.video_id}')
+
+@login_required
+def playlist_completion_times(request, playlist_id):
+    playlist_duration = request.user.playlists.get(playlist_id=playlist_id).playlist_duration_in_seconds
+
+    return HttpResponse(f"""
+        <h5 class="text-warning">Playlist completion times:</h5>
+        <h6>At 1.25x speed: {getHumanizedTimeString(playlist_duration/1.25)}</h6>
+        <h6>At 1.5x speed: {getHumanizedTimeString(playlist_duration/1.5)}</h6>
+        <h6>At 1.75x speed: {getHumanizedTimeString(playlist_duration/1.75)}</h6>
+        <h6>At 2x speed: {getHumanizedTimeString(playlist_duration/2)}</h6>
+    """)

apps/users/templates/intercooler/user_playlist_updates.html

@@ -32,7 +32,7 @@
                 {% endfor %}
             </ul>
         {% endif %}
-            <button class="btn btn-success" {% if deleted_playlist_names and playlists %}hx-get="{% url 'user_playlists_updates' 'init-update' %}" hx-trigger="click" hx-target="#user-pl-updates"{% else %}type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"{% endif %}>
+            <button class="btn btn-success" {% if playlists %}hx-get="{% url 'user_playlists_updates' 'init-update' %}" hx-trigger="click" hx-target="#user-pl-updates"{% else %}type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"{% endif %}>
                 {% if deleted_playlist_names and not playlists %}
                     OK
                 {% else %}