[#8] An auto play checkbox and JS that handles the box and next/previ…

…ous buttons.
vigetlabs · Jul 25, 2024 · ff1b54f · ff1b54f
1 parent 50fbd4d
commit ff1b54f
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 12 deletions.
diff --git a/audioapp/templates/audioapp/for_you.html b/audioapp/templates/audioapp/for_you.html
@@ -3,24 +3,69 @@
 {% block content %}
     <h1>For You</h1>
     {% if audio_file %}
-        <h2>{{ audio_file.title}}</h2>
-        <h3>{{fyp_index}}, {{reached_end }}</h3>
-        <p>{{ audio_file.description }}</p>
-        <audio controls id='audio-player' autoplay>
-            <source src="{{ audio_file.file.url }}" type="audio/mp4">
+        <h2 id="audio-title">{{ audio_file.title }}</h2>
+        <p id="audio-description">{{ audio_file.description }}</p>
+        <p>By {{ audio_file.user.username }}</p>
+        <audio controls id="audio-player" autoplay>
+            <source id="audio-source" src="{{ audio_file.file.url }}" type="audio/mp4">
             Your browser does not support the audio element.
         </audio>
-        <form method="get" action="{% url 'for_you' %}">
-            <button type="submit" name="action" value="previous" {% if fyp_index <= 0 %}disabled{% endif %}>Previous</button>
-            <button id="next-button" type="submit" name="action" value="next" {% if reached_end == True %}disabled{% endif %}>Next</button>
-        </form>
+        <button id="previous-button" {% if fyp_index <= 0 %}disabled{% endif %}>Previous</button>
+        <button id="next-button" {% if reached_end %}disabled{% endif %}>Next</button>
+        <label>
+            <input type="checkbox" id="autoplay-checkbox" {% if autoplay %}checked{% endif %}> Autoplay
+        </label>
     {% else %}
         <p>No audio files available.</p>
     {% endif %}
 
     <script>
+        function updateAudio(action) {
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', '{% url "for_you" %}?action=' + action, true);
+            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+            xhr.onload = function () {
+                if (xhr.status === 200) {
+                    var data = JSON.parse(xhr.responseText);
+                    document.getElementById('audio-title').textContent = data.title;
+                    document.getElementById('audio-description').textContent = data.description;
+                    document.getElementById('audio-source').src = data.audio_file_url;
+                    var audioPlayer = document.getElementById('audio-player');
+                    audioPlayer.load();
+                    if (document.getElementById('autoplay-checkbox').checked) {
+                        audioPlayer.play();
+                    }
+                    document.getElementById('previous-button').disabled = data.fyp_index <= 0;
+                    document.getElementById('next-button').disabled = data.reached_end;
+                    if (data.reached_end) {
+                        document.getElementById('autoplay-checkbox').checked = false;
+                    }
+                }
+            };
+            xhr.send();
+        }
+
+        document.getElementById('previous-button').addEventListener('click', function() {
+            updateAudio('previous');
+        });
+
+        document.getElementById('next-button').addEventListener('click', function() {
+            updateAudio('next');
+        });
+
         document.getElementById('audio-player').addEventListener('ended', function() {
-            document.getElementById('next-button').click();
+            if (document.getElementById('autoplay-checkbox').checked) {
+                updateAudio('next');
+            }
+        });
+
+        document.getElementById('autoplay-checkbox').addEventListener('change', function() {
+            var isChecked = this.checked;
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', '{% url "update_autoplay" %}?autoplay=' + isChecked, true);
+            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+            xhr.send();
         });
     </script>
 {% endblock %}
+
diff --git a/audioapp/urls.py b/audioapp/urls.py
@@ -7,6 +7,7 @@
     like_audio,
     unlike_audio,
     for_you,
+    update_autoplay,
 )
 
 
@@ -20,4 +21,5 @@
     path("audio/<int:pk>/like/", like_audio, name="like_audio"),
     path("audio/<int:pk>/unlike/", unlike_audio, name="unlike_audio"),
     path("for_you/", for_you, name="for_you"),
+    path("update_autoplay/", update_autoplay, name="update_autoplay"),
 ]
diff --git a/audioapp/views.py b/audioapp/views.py
@@ -1,4 +1,4 @@
-from django.http import HttpResponse
+from django.http import JsonResponse
 from django.shortcuts import render, redirect, get_object_or_404
 from django.urls import reverse
 from django.contrib.auth.decorators import login_required
@@ -126,8 +126,38 @@ def for_you(request):
 
     audio_file = get_object_or_404(AudioFile, id=fyp_history[fyp_index])
 
+    if request.headers.get("x-requested-with") == "XMLHttpRequest":
+        return JsonResponse(
+            {
+                "audio_file_url": audio_file.file.url,
+                "title": audio_file.title,
+                "description": audio_file.description,
+                "fyp_index": fyp_index,
+                "reached_end": reached_end,
+            }
+        )
+
+    autoplay = request.session.get("autoplay", False)
+
     return render(
         request,
         "for_you.html",
-        {"audio_file": audio_file, "fyp_index": fyp_index, "reached_end": reached_end},
+        {
+            "audio_file": audio_file,
+            "fyp_index": fyp_index,
+            "reached_end": reached_end,
+            "autoplay": autoplay,
+        },
     )
+
+
+@login_required
+def update_autoplay(request):
+    if (
+        request.headers.get("x-requested-with") == "XMLHttpRequest"
+        and "autoplay" in request.GET
+    ):
+        request.session["autoplay"] = request.GET.get("autoplay") == "true"
+        request.session.modified = True
+        return JsonResponse({"status": "success"})
+    return JsonResponse({"status": "fail"}, status=400)