Skip to content

Commit

Permalink
[#N/A] Styled For You Page. Added login and signup templates. Added h…
Browse files Browse the repository at this point in the history 
…as_liked variable to for you view
  • Loading branch information
@paulmckissock
paulmckissock committed Jul 29, 2024
1 parent eeb9b7a commit 575c075
Show file tree
Hide file tree
Showing 8 changed files with 271 additions and 45 deletions.
8 changes: 8 additions & 0 deletions audioapp/forms.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,11 @@ class CommentForm(forms.ModelForm):
class Meta:
model = Comment
fields = ["text"]
widgets = {
'text': forms.Textarea(attrs={
'rows': 5, # Number of rows
'cols': 30, # Number of columns
'class': 'w-full p-2 border border-gray-300 rounded', # Tailwind CSS classes
'placeholder': 'Write your comment here...',
}),
}
48 changes: 48 additions & 0 deletions audioapp/templates/audioapp/account/login.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
{% extends 'base.html' %}
{% load i18n %}
{% load allauth account %}
{% block head_title %}
{% trans "Sign In" %}
{% endblock head_title %}
{% block content %}
{% element h1 %}
{% trans "Sign In" %}
{% endelement %}
{% if not SOCIALACCOUNT_ONLY %}
{% setvar link %}
<a href="{{ signup_url }}">
{% endsetvar %}
{% setvar end_link %}
</a>
{% endsetvar %}
{% element p %}
{% blocktranslate %}If you have not created an account yet, then please {{ link }}sign up{{ end_link }} first.{% endblocktranslate %}
{% endelement %}
{% url 'account_login' as login_url %}
{% element form form=form method="post" action=login_url tags="entrance,login" %}
{% slot body %}
{% csrf_token %}
{% element fields form=form unlabeled=True %}
{% endelement %}
{{ redirect_field }}
{% endslot %}
{% slot actions %}
{% element button type="submit" tags="prominent,login" %}
{% trans "Sign In" %}
{% endelement %}
{% endslot %}
{% endelement %}
{% endif %}
{% if LOGIN_BY_CODE_ENABLED %}
{% element hr %}
{% endelement %}
{% element h2 %}
{% element button href=request_login_code_url tags="prominent,login,secondary" %}
{% trans "Mail me a sign-in code" %}
{% endelement %}
{% endelement %}
{% endif %}
{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
{% endblock content %}
38 changes: 38 additions & 0 deletions audioapp/templates/audioapp/account/signup.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{% extends 'base.html' %}
{% load allauth i18n %}
{% block head_title %}
{% trans "Signup" %}
{% endblock head_title %}
{% block content %}
{% element h1 %}
{% trans "Sign Up" %}
{% endelement %}
{% setvar link %}
<a href="{{ login_url }}">
{% endsetvar %}
{% setvar end_link %}
</a>
{% endsetvar %}
{% element p %}
{% blocktranslate %}Already have an account? Then please {{ link }}sign in{{ end_link }}.{% endblocktranslate %}
{% endelement %}
{% if not SOCIALACCOUNT_ONLY %}
{% url 'account_signup' as action_url %}
{% element form form=form method="post" action=action_url tags="entrance,signup" %}
{% slot body %}
{% csrf_token %}
{% element fields form=form unlabeled=True %}
{% endelement %}
{{ redirect_field }}
{% endslot %}
{% slot actions %}
{% element button tags="prominent,signup" type="submit" %}
{% trans "Sign Up" %}
{% endelement %}
{% endslot %}
{% endelement %}
{% endif %}
{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
{% endblock content %}
1 change: 1 addition & 0 deletions audioapp/templates/audioapp/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<html>
<head>
{% tailwind_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body class="bg-gray-100">
<header class="bg-white shadow">
Expand Down
98 changes: 65 additions & 33 deletions audioapp/templates/audioapp/for_you.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,52 @@
{% extends 'base.html' %}

{% block content %}
<h1>For You</h1>
{% if audio_file %}
<h2 id="audio-title">{{ audio_file.title }}</h2>
<p id="audio-description">{{ audio_file.description }}</p>
<p id="audio-like-count">{{ audio_file.like_count }} Likes</p>

<button id="like-button" data-audio-id="{{ audio_file.id }}" data-action="like">
Like
</button>

<p id="audio-username">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>
<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>
<h1 class="text-2xl font-bold text-center my-8">For You</h1>
<div class="flex items-center justify-between space-x-4">
<div class="flex items-center space-x-4">
<h2 id="audio-title" class="text-xl font-bold">{{ audio_file.title }}</h2>
<p id="audio-username" class="text-sm text-gray-600">By {{ audio_file.user.username }}</p>
</div>
<div class="flex items-center space-x-4 ml-auto">
<p id="audio-like-count">{{ audio_file.like_count }} Likes</p>
{% if has_liked %}
<button id="like-button" data-audio-id="{{ audio_file.id }}" data-action="like" class="text-red-500">
<i class="fas fa-heart"></i>
</button>
{% else %}
<button id="like-button" data-audio-id="{{ audio_file.id }}" data-action="like" class="text-black-500">
<i class="fas fa-heart"></i>
</button>
{% endif %}
<label>
<input type="checkbox" id="autoplay-checkbox" {% if autoplay %}checked{% endif %}> Autoplay
</label>
</div>
</div>

<p id="audio-description">{{ audio_file.description }}</p>
{% if audio_file %}
<div class="flex items-center space-x-4">
<button id="previous-button" class="control-button" {% if fyp_index <= 0 %}disabled{% endif %}>
<i class="fas fa-step-backward"></i>
</button>
<audio controls id="audio-player" autoplay class="flex-1">
<source id="audio-source" src="{{ audio_file.file.url }}" type="audio/mp4">
Your browser does not support the audio element.
</audio>
<button id="next-button" class="control-button" {% if reached_end %}disabled{% endif %}>
<i class="fas fa-step-forward"></i>
</button>
</div>
<h2 class="text-xl font-bold">Comments</h2>
<form id="comment-form" method="post" action="{% url 'for_you' %}">
{% csrf_token %}
{{ comment_form.as_p }}
<button type="submit" name="action" value="comment">Add Comment</button>
{% for field in comment_form %}
{{ field.errors }}
{{ field }}
{% endfor %}
<div></div>
<button type="submit" name="action" value="comment" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">Comment</button>
</form>
<ul id="comments-list">
{% for comment in comments %}
Expand All @@ -46,30 +67,41 @@ <h2 id="audio-title">{{ audio_file.title }}</h2>
}
xhr.onload = function () {
if (xhr.status === 200) {
// so the the player doesn't reload everytime an action is performed
if (action == "next" || action == "previous") {
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;
}
}
var data = JSON.parse(xhr.responseText);
document.getElementById('audio-title').textContent = data.title;
document.getElementById('audio-description').textContent = data.description;
document.getElementById('audio-like-count').textContent = data.like_count + ' Likes';
document.getElementById('audio-username').textContent = 'By ' + data.username;
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;

var likeButton = document.getElementById('like-button');
if (data.has_liked) {
likeButton.classList.remove('text-black-500');
likeButton.classList.add('text-red-500');
} else {
likeButton.classList.remove('text-red-500');
likeButton.classList.add('text-black-500');
}

var commentsList = document.getElementById('comments-list');
commentsList.innerHTML = '';
data.comments.forEach(function(comment) {
var li = document.createElement('li');
li.textContent = comment.user + ': ' + comment.text;
commentsList.appendChild(li);
});

}
};
xhr.send(formData);
Expand Down
3 changes: 0 additions & 3 deletions audioapp/templates/audioapp/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
{% extends 'base.html' %}
{% block content %}
<p>You are at the index</p>
<a href="{% url 'for_you'%}"> For You </a>
<a href="{% url 'upload_audio' %}">Upload Sound</a>
<ul>
{% for audio in audio_files %}
<li>
Expand Down
11 changes: 8 additions & 3 deletions audioapp/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,23 +130,27 @@ def handle_comment(request, audio_file):
comment.save()

def handle_like(request, audio_file):
if not Like.objects.filter(user=request.user, audio_file=audio_file).exists():
if not has_liked(request, audio_file):
like, created = Like.objects.get_or_create(
user=request.user, audio_file=audio_file
)
if created:
print("Like created:", like)
else:
Like.objects.filter(user=request.user, audio_file=audio_file).delete()

def has_liked(request, audio_file):
return Like.objects.filter(user=request.user, audio_file=audio_file).exists()

def fyp_xml_http_request(audio_file, reached_end, fyp_index):
def fyp_xml_http_request(audio_file, reached_end, fyp_index, request):
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,
"has_liked": has_liked(request, audio_file),
"username": audio_file.user.username,
"like_count": audio_file.like_set.count(),
"comments": [
Expand Down Expand Up @@ -177,7 +181,7 @@ def fyp_xml_http_request(audio_file, reached_end, fyp_index):
audio_file = get_object_or_404(AudioFile, id=fyp_order[fyp_index])

if request.headers.get("x-requested-with") == "XMLHttpRequest":
return fyp_xml_http_request(audio_file, reached_end, fyp_index)
return fyp_xml_http_request(audio_file, reached_end, fyp_index, request)

autoplay = request.session.get("autoplay", False)

Expand All @@ -191,6 +195,7 @@ def fyp_xml_http_request(audio_file, reached_end, fyp_index):
"autoplay": autoplay,
"comment_form": CommentForm(),
"comments": audio_file.comments.all(),
"has_liked": has_liked(request, audio_file),
},
)

Expand Down
Loading

0 comments on commit 575c075

Please sign in to comment.