Merge pull request #144 from rashiranjan22/issue#121

added read aloud
SiddharthBahuguna · Jun 10, 2024 · fa50c56 · fa50c56
2 parents 1212cc5 + b2304e3
commit fa50c56
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 45 deletions.
diff --git a/newsaggregator/core/urls.py b/newsaggregator/core/urls.py
@@ -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'
@@ -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'),
 
 ]
diff --git a/newsaggregator/core/views.py b/newsaggregator/core/views.py
@@ -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})
diff --git a/newsaggregator/db.sqlite3 b/newsaggregator/db.sqlite3
diff --git a/newsaggregator/static/assets/js/speech.js b/newsaggregator/static/assets/js/speech.js
@@ -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";
+        }
+    }
+}
diff --git a/newsaggregator/templates/components/news.html b/newsaggregator/templates/components/news.html
@@ -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>
 
 
 
@@ -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>

diff --git a/newsaggregator/templates/core/bookmarks.html b/newsaggregator/templates/core/bookmarks.html
@@ -1,4 +1,4 @@
-{% extends 'core/base.html' %}
+{% extends 'partials/base.html' %}
 {% load static %}
 
 {% block index %}

diff --git a/newsaggregator/templates/core/index.html b/newsaggregator/templates/core/index.html
@@ -1,5 +1,5 @@
 <!-- Extend the base template -->
-{% extends 'core/base.html' %}
+{% extends 'partials/base.html' %}
 
 <!-- Load the static files -->
 {% load static %}

diff --git a/newsaggregator/templates/partials/base.html b/newsaggregator/templates/partials/base.html
@@ -109,6 +109,7 @@
         }
     </script>
     <script src="{% static 'assets/js/preloader.js' %}"></script>
+    <script src="{% static 'assets/js/speech.js' %}"></script>
 </body>