layed down ui for watch feature

apps/main/templates/home.html

@@ -67,7 +67,7 @@
             {% if watching %}
                 <br>
                 <div class="border border-5 rounded-3 border-primary p-3">
-                    <h3><span style="border-bottom: 3px #ffffff dashed;">Continue Watching</span></h3>
+                    <h3><span style="border-bottom: 3px #ffffff dashed;">Continue Watching</span><i class="fas fa-fire-alt ms-2" style="color: #d24646"></i></h3>
            <div class="row row-cols-1 row-cols-md-4 g-4 text-dark mt-0">
                 {% for playlist in watching|slice:"0:3" %}
                 <div class="col">

apps/main/templates/view_playlist.html

@@ -17,10 +17,18 @@
             </div>
         </div>
     {% else %}
-    <div hx-get="{% url 'update_playlist' playlist.playlist_id 'checkforupdates' %}" hx-trigger="load" hx-swap="outerHTML" class="sticky-top" style="top: 0.5rem;" id="checkforupdates">
+    <div class="sticky-top mb-3" style="top: 0.5rem;">
+        <div hx-get="{% url 'update_playlist' playlist.playlist_id 'checkforupdates' %}" hx-trigger="load" hx-swap="outerHTML" id="checkforupdates">
 
+        </div>
+        {% if playlist.marked_as == "watching" %}
+        <div class="py-2 bg-light">
+          <div class="d-flex justify-content-center">
+              <span class="h3 text-muted">2/23 watched! <span style="border-bottom: 3px #e760f1 dashed;">2hr. 23min.</span> left to go! <i class="fas fa-glass-cheers" style="color: lightcoral"></i></span>
+          </div>
+        </div>
+        {% endif %}
     </div>
-
     <div class="list-group-item list-group-item-action active">
         <div class="d-flex w-100 justify-content-between">
             <span>
@@ -37,7 +45,14 @@
             <h4>
                 <span id="notice-div">
                     {% if playlist.marked_as != "none" %}
-                    <span class="badge bg-success text-white" >{{ playlist.marked_as|title }}</span>
+                    <span class="badge bg-success text-white" >
+                        {% if playlist.marked_as == "watching" %}
+                            <i class="fas fa-fire-alt me-2"></i>
+                        {% elif playlist.marked_as == "plan-to-watch"%}
+                            <i class="fas fa-flag me-2"></i>
+                        {% endif %}
+                        {{ playlist.marked_as }}
+                    </span>
                     {% endif %}
                 </span>
             </h4>
@@ -260,14 +275,14 @@
     </div>
     <div id="row3" style="background-color: #0f5132">
     <div class="collapse border-danger" id="moveItemsToCollapse">
-    <div class="card card-body bg-dark text-white-50">
+    <div class="card card-body bg-dark text-white">
 
       <h5>{% if playlist.is_user_owned %}Move or {% endif %}Copy videos to another playlist!</h5>
 
       <div class="d-flex justify-content-start">
 
 
-          <div class="col-md-6 text-dark">
+          <div class="col-md-7 text-dark">
                 <select class="visually-hidden" onchange="triggerSubmit()"
                      id="choices-multiple-remove-button" name="playlist-tags" placeholder="Select Playlists" multiple>
                     {% for pl in user_owned_playlists %}
@@ -459,6 +474,8 @@
         <img id="load-more-videos-spinner" class="htmx-indicator mt-4" src="{% static 'svg-loaders/spinning-circles.svg' %}" width="40" height="40">
     </div>
 
+
+
     </div>
 
 

apps/main/views.py

@@ -282,7 +282,12 @@ def mark_playlist_as(request, playlist_id, mark_as):
     if mark_as in ["watching", "on-hold", "plan-to-watch"]:
         playlist.marked_as = mark_as
         playlist.save()
-        marked_as_response = f'<span class="badge bg-success text-white" >{mark_as.replace("-", " ")}</span>'
+        icon = ""
+        if mark_as == "watching":
+            icon = '<i class="fas fa-fire-alt me-2"></i>'
+        elif mark_as == "plan-to-watch":
+            icon = '<i class="fas fa-flag me-2"></i>'
+        marked_as_response = f'<span class="badge bg-success text-white" >{icon}{mark_as}</span> <meta http-equiv="refresh" content="0" />'
     elif mark_as == "none":
         playlist.marked_as = mark_as
         playlist.save()
@@ -334,8 +339,8 @@ def delete_videos(request, playlist_id, command):
         # playlist.has_playlist_changed = True
         # playlist.save(update_fields=['has_playlist_changed'])
         return HttpResponse(f"""
-        <div hx-get="/playlist/{playlist_id}/update/checkforupdates" hx-trigger="load delay:4s" hx-target="#checkforupdates" class="sticky-top" style="top: 0.5rem;">
-Done! Playlist on UnTube will update in 3s...
+        <div hx-get="/playlist/{playlist_id}/update/checkforupdates" hx-trigger="load delay:1s" hx-target="#checkforupdates" class="sticky-top" style="top: 0.5rem;">
+            Done! Playlist on UnTube will update in soon...
         </div>
         """)
 
@@ -625,7 +630,6 @@ def update_playlist(request, playlist_id, type):
                 <div class="alert alert-success alert-dismissible fade show visually-hidden" role="alert">
                     No new updates!
                 </div>
-                <br>
                 </div>
                 """)
         elif result[0] == -1:  # playlist changed
@@ -646,7 +650,6 @@ def update_playlist(request, playlist_id, type):
             <div class="alert alert-success alert-dismissible fade show visually-hidden sticky-top" role="alert" style="top: 0.5em;">
                 No new updates!
             </div>
-            <br>
             </div>
             """)
 

templates/base.html

@@ -4,10 +4,10 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
+        <meta name="keywords" content="youtube, playlists, playlist panager, youtube playlists, untube, google">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="description" content="">
-        <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-        <meta name="generator" content="Hugo 0.83.1">
+        <meta name="description" content="UnTube is a simple Youtube playlist manager. Modify and keep track of your YouTube playlists with ease.">
+        <meta name="author" content="Mohammed Abu Bakar Khan">
         <title>UnTube</title>
 
         <style type="text/css">