Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added read aloud #144

Merged
merged 2 commits into from
Jun 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions newsaggregator/core/urls.py
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
from django.urls import path
from core import views
# from .views import base_view
from .views import fetch_article_content

from .views import news_list

app_name='core'
Expand All @@ -25,5 +27,6 @@

path('top-rated/', views.top_rated_articles, name='top_rated_articles'),

path('fetch_article_content/', fetch_article_content, name='fetch_article_content'),

]
17 changes: 17 additions & 0 deletions newsaggregator/core/views.py
Original file line number Diff line number Diff line change
Expand Up @@ -241,3 +241,20 @@ def top_rated_articles(request):
page = request



import requests
from django.http import JsonResponse

def fetch_article_content(request):
url = request.GET.get('url')
if not url:
return JsonResponse({'error': 'URL parameter is missing'}, status=400)

try:
response = requests.get(url)
response.raise_for_status()
content = response.text
except requests.RequestException as e:
return JsonResponse({'error': str(e)}, status=500)

return JsonResponse({'content': content})
Binary file modified newsaggregator/db.sqlite3
Binary file not shown.
60 changes: 60 additions & 0 deletions newsaggregator/static/assets/js/speech.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
let synth = window.speechSynthesis;
let currentUtterance = null;

function startReadAloud(url) {
if (synth.speaking) {
synth.cancel();
}

console.log("Fetching article from URllL:", url);

fetch(`/fetch_article_content/?url=${encodeURIComponent(url)}`)
.then(response => {
console.log("Response status:", response.status);
if (!response.ok) {
throw new Error("Network response was not ok " + response.statusText);
}
return response.json();
})
.then(data => {
if (data.error) {
throw new Error(data.error);
}
console.log("Fetched data successfully");
const parser = new DOMParser();
const doc = parser.parseFromString(data.content, 'text/html');
const articleElement = doc.querySelector('.sc-77igqf-0.fnnahv'); // Updated selector to match your article content
if (!articleElement) {
throw new Error("Article content not found");
}
const articleContent = articleElement.innerText;

console.log("Article content extracted:", articleContent);
currentUtterance = new SpeechSynthesisUtterance(articleContent);
synth.speak(currentUtterance);
})
.catch(error => {
console.error('Error fetching article content:', error);
});
}

function pauseReadAloud(button) {
console.log("eeee")
if (synth.speaking && !synth.paused) {
synth.pause();
button.innerText = "Resume";
} else if (synth.paused) {
synth.resume();
button.innerText = "Pause";
}
}

function stopReadAloud() {
if (synth.speaking) {
synth.cancel();
const pauseButton = document.getElementById('pause-resume-btn');
if (pauseButton) {
pauseButton.innerText = "Pause";
}
}
}
83 changes: 40 additions & 43 deletions newsaggregator/templates/components/news.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,26 +26,32 @@
<div class="card-footer">
<div class="d-flex justify-content-between flex-wrap" style="align-items: center;">

<div class="rating-container">
<div class="rate" id="rate-{{ record.id }}">
<input type="radio" id="star5-{{ record.id }}" name="rate-{{ record.id }}" value="5" onclick="setRating('{{ record.id }}', 5)" {% if record.user_rating == 5 %}checked{% endif %} />
<label for="star5-{{ record.id }}"></label>
<input type="radio" id="star4-{{ record.id }}" name="rate-{{ record.id }}" value="4" onclick="setRating('{{ record.id }}', 4)" {% if record.user_rating == 4 %}checked{% endif %} />
<label for="star4-{{ record.id }}"></label>
<input type="radio" id="star3-{{ record.id }}" name="rate-{{ record.id }}" value="3" onclick="setRating('{{ record.id }}', 3)" {% if record.user_rating == 3 %}checked{% endif %} />
<label for="star3-{{ record.id }}"></label>
<input type="radio" id="star2-{{ record.id }}" name="rate-{{ record.id }}" value="2" onclick="setRating('{{ record.id }}', 2)" {% if record.user_rating == 2 %}checked{% endif %} />
<label for="star2-{{ record.id }}"></label>
<input type="radio" id="star1-{{ record.id }}" name="rate-{{ record.id }}" value="1" onclick="setRating('{{ record.id }}', 1)" {% if record.user_rating == 1 %}checked{% endif %} />
<label for="star1-{{ record.id }}"></label>
</div>
<div class="average-rating" id="average-rating-{{ record.id }}">
{% if record.average_rating %}
({{ record.average_rating }})
{% endif %}
</div>
<button class="submit-btn" onclick="submitRating('{{ record.id }}')">Submit</button>
<div class="rating-container">
<div class="rate" id="rate-{{ record.id }}">
<input type="radio" id="star5-{{ record.id }}" name="rate-{{ record.id }}" value="5" onclick="setRating('{{ record.id }}', 5)" {% if record.user_rating == 5 %}checked{% endif %} />
<label for="star5-{{ record.id }}"></label>
<input type="radio" id="star4-{{ record.id }}" name="rate-{{ record.id }}" value="4" onclick="setRating('{{ record.id }}', 4)" {% if record.user_rating == 4 %}checked{% endif %} />
<label for="star4-{{ record.id }}"></label>
<input type="radio" id="star3-{{ record.id }}" name="rate-{{ record.id }}" value="3" onclick="setRating('{{ record.id }}', 3)" {% if record.user_rating == 3 %}checked{% endif %} />
<label for="star3-{{ record.id }}"></label>
<input type="radio" id="star2-{{ record.id }}" name="rate-{{ record.id }}" value="2" onclick="setRating('{{ record.id }}', 2)" {% if record.user_rating == 2 %}checked{% endif %} />
<label for="star2-{{ record.id }}"></label>
<input type="radio" id="star1-{{ record.id }}" name="rate-{{ record.id }}" value="1" onclick="setRating('{{ record.id }}', 1)" {% if record.user_rating == 1 %}checked{% endif %} />
<label for="star1-{{ record.id }}"></label>
</div>
<div class="average-rating" id="average-rating-{{ record.id }}">
{% if record.average_rating %}
({{ record.average_rating }})
{% endif %}
</div>
<button class="submit-btn" onclick="submitRating('{{ record.id }}')">Submit</button>
</div>

<div class="read-aloud-controls" style="display: flex; justify-content: space-between; width: 100%;">
<button class="btn btn-primary" onclick="startReadAloud('{{ record.url }}', '{{ record.title }}')">Start</button>
<button id="pause-resume-btn" class="btn btn-warning" onclick="pauseReadAloud(this)">Pause</button>
<button class="btn btn-danger" onclick="stopReadAloud()">Stop</button>
</div>



Expand All @@ -56,38 +62,29 @@
justify-content: center;
}
</style>

<div class="">
<button class="btn btn-secondary" onclick="copyToClipboard('{{ record.url }}')"
aria-label="Copy URL">
Copy
</button>
</div>
<div class="">
<div class="btns" role="group">
<!-- <a href="https://www.instagram.com/share?url={{ record.url }}" target="_blank"
class="social-icon fa fa-instagram" aria-label="Share on Instagram"></a> -->
<a class="btn btn-secondary social-icon fa fa-instagram" aria-label="Share on Instagram" onclick="shareOnInstagram('{{ record.url }}')"></a>
<a href="https://api.whatsapp.com/send?text=Check%20out%20this%20link:%20{{ record.url }}"
target="_blank" class="social-icon fa fa-whatsapp"
aria-label="Share on WhatsApp"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ record.url }}" target="_blank"
class="social-icon fa fa-facebook" aria-label="Share on Facebook"></a>
<a style="display: flex;align-items: center;justify-content: center;border: 2px solid var(--foreground-tertiary);padding: 0;min-width: 30px!important;width: 30px;height: 30px;" class="btn bookmark-btn" data-id="{{ record.id }}" data-bookmarked="{% if record.id in user_bookmarked_headline_ids %}true{% else %}false{% endif %}" aria-label="Bookmark">
<div style="display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;">
<button class="btn btn-secondary" onclick="copyToClipboard('{{ record.url }}')" aria-label="Copy URL">
Copy
</button>
<a style="display: flex; align-items: center; justify-content: center; border: 2px solid var(--foreground-tertiary); padding: 0; min-width: 30px!important; width: 30px; height: 30px;" class="btn bookmark-btn" data-id="{{ record.id }}" data-bookmarked="{% if record.id in user_bookmarked_headline_ids %}true{% else %}false{% endif %}" aria-label="Bookmark">
{% if record.id in user_bookmarked_headline_ids %}
<i class="social-icon fa solid fa-bookmark"></i>
{% else %}
<i class="social-icon fa fa-bookmark"></i>
{% endif %}
</a>
</div>
</div>

<div class="">
<button class="btn btn-danger" data-toggle="modal" data-target="#reportModal"
aria-label="Report">
Report
</button>
<button class="btn btn-danger" data-toggle="modal" data-target="#reportModal" aria-label="Report">
Report
</button>
<a class="social-icon fa fa-instagram" style="font-size: 24px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 0.7px solid var(--foreground-tertiary);" aria-label="Share on Instagram" onclick="shareOnInstagram('{{ record.url }}')"></a>
<a href="https://api.whatsapp.com/send?text=Check%20out%20this%20link:%20{{ record.url }}" target="_blank" class="social-icon fa fa-whatsapp" style="font-size: 24px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 0.7px solid var(--foreground-tertiary);" aria-label="Share on WhatsApp"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ record.url }}" target="_blank" class="social-icon fa fa-facebook" style="font-size: 24px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 0.7px solid var(--foreground-tertiary);" aria-label="Share on Facebook"></a>

</div>
</div>

</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion newsaggregator/templates/core/bookmarks.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends 'core/base.html' %}
{% extends 'partials/base.html' %}
{% load static %}

{% block index %}
Expand Down
2 changes: 1 addition & 1 deletion newsaggregator/templates/core/index.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- Extend the base template -->
{% extends 'core/base.html' %}
{% extends 'partials/base.html' %}

<!-- Load the static files -->
{% load static %}
Expand Down
1 change: 1 addition & 0 deletions newsaggregator/templates/partials/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@
}
</script>
<script src="{% static 'assets/js/preloader.js' %}"></script>
<script src="{% static 'assets/js/speech.js' %}"></script>
</body>


Expand Down
Loading