From 78d9081f878afc3796b6e52560cfc7acdd7261ac Mon Sep 17 00:00:00 2001
From: dev sp <dev2@ns1.cicdhosting.com>
Date: Fri, 19 Jan 2024 07:57:07 +0000
Subject: [PATCH] add listening options

---
 src/pages/[id].astro               | 42 +++++++++++++++++++++---------
 src/pages/bn/[id].astro            | 41 +++++++++++++++++++++++++++--
 src/pages/bn/local/[id].astro      | 40 ++++++++++++++++++++++++++--
 src/pages/bn/national/[id].astro   | 40 ++++++++++++++++++++++++++--
 src/pages/bn/politics/[id].astro   | 40 ++++++++++++++++++++++++++--
 src/pages/bn/technology/[id].astro |  5 ++--
 src/pages/local/[id].astro         | 34 ++++++++++++++++++++++--
 src/pages/national/[id].astro      | 34 ++++++++++++++++++++++--
 src/pages/politics/[id].astro      | 34 ++++++++++++++++++++++--
 src/pages/technology/[id].astro    | 34 ++++++++++++++++++++++--
 10 files changed, 314 insertions(+), 30 deletions(-)

diff --git a/src/pages/[id].astro b/src/pages/[id].astro
index 15bd21d..c98f2c9 100644
--- a/src/pages/[id].astro
+++ b/src/pages/[id].astro
@@ -35,8 +35,8 @@ const items  = data.data[idx];
     <main>
         <section class="container mx-auto px-4 mt-16">
             <div class="flex flex-col justify-center">
-              <div class=""><button onclick="textSpeech();" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
-                <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+              <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+              <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
                 <h2 id="message2" class="text-xl py-2">{items.title}</h2>
                 <div class="flex flex-col place-items-center">
                   <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
@@ -51,21 +51,39 @@ const items  = data.data[idx];
                     <a href=`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}` onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
                   </div>
                 </div>
-                <p id="" class="text-justify text-red-700 mt-4" set:html={items.content}></p>
+                <p id="message3" class="text-justify text-red-700 mt-4" set:html={items.content}></p>
             </div>
         </section>
     </main>
 </Layout>
 <script is:inline>
-  function textSpeech(){
-      let message1 = document.getElementById('message1').innerHTML;
-      console.log(message1);
-      let message2 = document.getElementById('message2').innerHTML;
-      // let message3 = document.getElementById('message3').innerHTML;
-      let allSpeechText = message1 + message2;
-      let speechText = new SpeechSynthesisUtterance(allSpeechText);
-      window.speechSynthesis.speak(speechText);
-  }
+   let isListening = false;
+    let speechSynthesisInstance = window.speechSynthesis;
+
+    function toggleSpeech() {
+        if (isListening) {
+            stopSpeech();
+        } else {
+            startSpeech();
+        }
+    }
+
+    function startSpeech() {
+        let message1 = document.getElementById('message1').innerText;
+        let message2 = document.getElementById('message2').innerText;
+        let allSpeechText = message1 + ' ' + message2;
+        let speechText = new SpeechSynthesisUtterance(allSpeechText);
+        speechSynthesisInstance.speak(speechText);
+
+        document.getElementById('listenButton').innerText = 'Stop';
+        isListening = true;
+    }
+
+    function stopSpeech() {
+        speechSynthesisInstance.cancel();
+        document.getElementById('listenButton').innerText = 'Listen';
+        isListening = false;
+    }
 </script>
 <style>
   section > div > p > p {
diff --git a/src/pages/bn/[id].astro b/src/pages/bn/[id].astro
index dfdcabb..a86960e 100644
--- a/src/pages/bn/[id].astro
+++ b/src/pages/bn/[id].astro
@@ -34,8 +34,9 @@ const items  = data.data[idx];
     <main>
       <section class="container mx-auto px-4 mt-16">
         <div class="flex flex-col justify-center">
-            <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+            <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+            <h2 id="message2" class="text-xl py-2">{items.title}</h2>
             <div class="flex flex-col place-items-center">
               <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
             </div>
@@ -53,6 +54,42 @@ const items  = data.data[idx];
       </section>
     </main>
 </LayoutBN>
+<script is:inline>
+  let isListening = false;
+  let speechSynthesisInstance = window.speechSynthesis;
+
+  function toggleSpeech() {
+    if (isListening) {
+      stopSpeech();
+    } else {
+      startSpeech();
+    }
+  }
+
+  function startSpeech() {
+    let message1 = document.getElementById('message1').innerText;
+    let message2 = document.getElementById('message2').innerText;
+    let allSpeechText = message1 + ' ' + message2;
+
+    let speechText = new SpeechSynthesisUtterance(allSpeechText);
+    speechText.lang = 'bn';  // Set language to Bengali
+
+    speechSynthesisInstance.speak(speechText);
+
+    document.getElementById('listenButton').innerText = 'Stop';
+    isListening = true;
+  }
+
+  function stopSpeech() {
+    speechSynthesisInstance.cancel();
+    document.getElementById('listenButton').innerText = 'Listen';
+    isListening = false;
+  }
+  // if(window.location.reload()){
+  //   isListening = false;
+  // }
+</script>
+
 <style>
   section > div > p > p {
     text-align: justify;
diff --git a/src/pages/bn/local/[id].astro b/src/pages/bn/local/[id].astro
index 99ead5c..6fbf703 100644
--- a/src/pages/bn/local/[id].astro
+++ b/src/pages/bn/local/[id].astro
@@ -34,8 +34,9 @@ const items  = data.data[idx];
     <main>
       <section class="container mx-auto px-4 mt-16">
         <div class="flex flex-col justify-center">
-            <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+            <h1 id="message1"  class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+            <h2 id="message2" class="text-xl py-2">{items.title}</h2>
             <div class="flex flex-col place-items-center">
               <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
             </div>
@@ -53,6 +54,41 @@ const items  = data.data[idx];
       </section>
     </main>
 </LayoutBN>
+<script is:inline>
+  let isListening = false;
+  let speechSynthesisInstance = window.speechSynthesis;
+
+  function toggleSpeech() {
+    if (isListening) {
+      stopSpeech();
+    } else {
+      startSpeech();
+    }
+  }
+
+  function startSpeech() {
+    let message1 = document.getElementById('message1').innerText;
+    let message2 = document.getElementById('message2').innerText;
+    let allSpeechText = message1 + ' ' + message2;
+
+    let speechText = new SpeechSynthesisUtterance(allSpeechText);
+    speechText.lang = 'bn';  // Set language to Bengali
+
+    speechSynthesisInstance.speak(speechText);
+
+    document.getElementById('listenButton').innerText = 'Stop';
+    isListening = true;
+  }
+
+  function stopSpeech() {
+    speechSynthesisInstance.cancel();
+    document.getElementById('listenButton').innerText = 'Listen';
+    isListening = false;
+  }
+  // if(window.location.reload()){
+  //   isListening = false;
+  // }
+</script>
 <style>
   section > div > p > p {
     text-align: justify;
diff --git a/src/pages/bn/national/[id].astro b/src/pages/bn/national/[id].astro
index 6b319c9..e588d7a 100644
--- a/src/pages/bn/national/[id].astro
+++ b/src/pages/bn/national/[id].astro
@@ -34,8 +34,9 @@ const items  = data.data[idx];
     <main>
       <section class="container mx-auto px-4 mt-16">
         <div class="flex flex-col justify-center">
-            <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+            <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+            <h2 id="message2" class="text-xl py-2">{items.title}</h2>
             <div class="flex flex-col place-items-center">
               <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
             </div>
@@ -53,6 +54,41 @@ const items  = data.data[idx];
       </section>
     </main>
 </LayoutBN>
+<script is:inline>
+  let isListening = false;
+  let speechSynthesisInstance = window.speechSynthesis;
+
+  function toggleSpeech() {
+    if (isListening) {
+      stopSpeech();
+    } else {
+      startSpeech();
+    }
+  }
+
+  function startSpeech() {
+    let message1 = document.getElementById('message1').innerText;
+    let message2 = document.getElementById('message2').innerText;
+    let allSpeechText = message1 + ' ' + message2;
+
+    let speechText = new SpeechSynthesisUtterance(allSpeechText);
+    speechText.lang = 'bn';  // Set language to Bengali
+
+    speechSynthesisInstance.speak(speechText);
+
+    document.getElementById('listenButton').innerText = 'Stop';
+    isListening = true;
+  }
+
+  function stopSpeech() {
+    speechSynthesisInstance.cancel();
+    document.getElementById('listenButton').innerText = 'Listen';
+    isListening = false;
+  }
+  // if(window.location.reload()){
+  //   isListening = false;
+  // }
+</script>
 <style>
   section > div > p > p {
     text-align: justify;
diff --git a/src/pages/bn/politics/[id].astro b/src/pages/bn/politics/[id].astro
index 13fb119..3422a4b 100644
--- a/src/pages/bn/politics/[id].astro
+++ b/src/pages/bn/politics/[id].astro
@@ -34,8 +34,9 @@ const items  = data.data[idx];
     <main>
       <section class="container mx-auto px-4 mt-16">
         <div class="flex flex-col justify-center">
-            <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+            <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+            <h2 id="message2" class="text-xl py-2">{items.title}</h2>
             <div class="flex flex-col place-items-center">
               <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
             </div>
@@ -53,6 +54,41 @@ const items  = data.data[idx];
       </section>
     </main>
 </LayoutBN>
+<script is:inline>
+  let isListening = false;
+  let speechSynthesisInstance = window.speechSynthesis;
+
+  function toggleSpeech() {
+    if (isListening) {
+      stopSpeech();
+    } else {
+      startSpeech();
+    }
+  }
+
+  function startSpeech() {
+    let message1 = document.getElementById('message1').innerText;
+    let message2 = document.getElementById('message2').innerText;
+    let allSpeechText = message1 + ' ' + message2;
+
+    let speechText = new SpeechSynthesisUtterance(allSpeechText);
+    speechText.lang = 'bn';  // Set language to Bengali
+
+    speechSynthesisInstance.speak(speechText);
+
+    document.getElementById('listenButton').innerText = 'Stop';
+    isListening = true;
+  }
+
+  function stopSpeech() {
+    speechSynthesisInstance.cancel();
+    document.getElementById('listenButton').innerText = 'Listen';
+    isListening = false;
+  }
+  // if(window.location.reload()){
+  //   isListening = false;
+  // }
+</script>
 <style>
   /* section > div > p > p {
     text-align: justify;
diff --git a/src/pages/bn/technology/[id].astro b/src/pages/bn/technology/[id].astro
index cc1f718..303b56e 100644
--- a/src/pages/bn/technology/[id].astro
+++ b/src/pages/bn/technology/[id].astro
@@ -34,8 +34,9 @@ const items  = data.data[idx];
     <main>
       <section class="container mx-auto px-4 mt-16">
         <div class="flex flex-col justify-center">
-            <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+            <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+            <h2 id="message2" class="text-xl py-2">{items.title}</h2>
             <div class="flex flex-col place-items-center">
               <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
             </div>
diff --git a/src/pages/local/[id].astro b/src/pages/local/[id].astro
index 077cf6c..f024ff3 100644
--- a/src/pages/local/[id].astro
+++ b/src/pages/local/[id].astro
@@ -34,8 +34,9 @@ const items  = data.data[idx];
     <main>
       <section class="container mx-auto px-4 mt-16">
         <div class="flex flex-col justify-center">
-            <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+            <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+            <h2 id="message2" class="text-xl py-2">{items.title}</h2>
             <div class="flex flex-col place-items-center">
               <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
             </div>
@@ -53,6 +54,35 @@ const items  = data.data[idx];
       </section>
     </main>
 </Layout>
+<script is:inline>
+  let isListening = false;
+   let speechSynthesisInstance = window.speechSynthesis;
+
+   function toggleSpeech() {
+       if (isListening) {
+           stopSpeech();
+       } else {
+           startSpeech();
+       }
+   }
+
+   function startSpeech() {
+       let message1 = document.getElementById('message1').innerText;
+       let message2 = document.getElementById('message2').innerText;
+       let allSpeechText = message1 + ' ' + message2;
+       let speechText = new SpeechSynthesisUtterance(allSpeechText);
+       speechSynthesisInstance.speak(speechText);
+
+       document.getElementById('listenButton').innerText = 'Stop';
+       isListening = true;
+   }
+
+   function stopSpeech() {
+       speechSynthesisInstance.cancel();
+       document.getElementById('listenButton').innerText = 'Listen';
+       isListening = false;
+   }
+</script>
 <style>
   section > div > p > p {
     text-align: justify;
diff --git a/src/pages/national/[id].astro b/src/pages/national/[id].astro
index c9c7742..9e4c930 100644
--- a/src/pages/national/[id].astro
+++ b/src/pages/national/[id].astro
@@ -35,8 +35,9 @@ const items  = data.data[idx];
     <main>
       <section class="container mx-auto px-4 mt-16">
         <div class="flex flex-col justify-center">
-            <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+            <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+            <h2 id="message2" class="text-xl py-2">{items.title}</h2>
             <div class="flex flex-col place-items-center">
               <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
             </div>
@@ -54,6 +55,35 @@ const items  = data.data[idx];
       </section>
     </main>
 </Layout>
+<script is:inline>
+  let isListening = false;
+   let speechSynthesisInstance = window.speechSynthesis;
+
+   function toggleSpeech() {
+       if (isListening) {
+           stopSpeech();
+       } else {
+           startSpeech();
+       }
+   }
+
+   function startSpeech() {
+       let message1 = document.getElementById('message1').innerText;
+       let message2 = document.getElementById('message2').innerText;
+       let allSpeechText = message1 + ' ' + message2;
+       let speechText = new SpeechSynthesisUtterance(allSpeechText);
+       speechSynthesisInstance.speak(speechText);
+
+       document.getElementById('listenButton').innerText = 'Stop';
+       isListening = true;
+   }
+
+   function stopSpeech() {
+       speechSynthesisInstance.cancel();
+       document.getElementById('listenButton').innerText = 'Listen';
+       isListening = false;
+   }
+</script>
 <style>
   section > div > p > p {
     text-align: justify;
diff --git a/src/pages/politics/[id].astro b/src/pages/politics/[id].astro
index 272d436..8af31bf 100644
--- a/src/pages/politics/[id].astro
+++ b/src/pages/politics/[id].astro
@@ -35,8 +35,9 @@ const items  = data.data[idx];
     <main>
       <section class="container mx-auto px-4 mt-16">
         <div class="flex flex-col justify-center">
-            <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+          <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+          <h2 id="message2" class="text-xl py-2">{items.title}</h2>
             <div class="flex flex-col place-items-center">
               <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
             </div>
@@ -54,6 +55,35 @@ const items  = data.data[idx];
       </section>
     </main>
 </Layout>
+<script is:inline>
+  let isListening = false;
+   let speechSynthesisInstance = window.speechSynthesis;
+
+   function toggleSpeech() {
+       if (isListening) {
+           stopSpeech();
+       } else {
+           startSpeech();
+       }
+   }
+
+   function startSpeech() {
+       let message1 = document.getElementById('message1').innerText;
+       let message2 = document.getElementById('message2').innerText;
+       let allSpeechText = message1 + ' ' + message2;
+       let speechText = new SpeechSynthesisUtterance(allSpeechText);
+       speechSynthesisInstance.speak(speechText);
+
+       document.getElementById('listenButton').innerText = 'Stop';
+       isListening = true;
+   }
+
+   function stopSpeech() {
+       speechSynthesisInstance.cancel();
+       document.getElementById('listenButton').innerText = 'Listen';
+       isListening = false;
+   }
+</script>
 <style>
   /* section > div > p > p {
     text-align: justify;
diff --git a/src/pages/technology/[id].astro b/src/pages/technology/[id].astro
index b278681..b445c32 100644
--- a/src/pages/technology/[id].astro
+++ b/src/pages/technology/[id].astro
@@ -34,8 +34,9 @@ const items  = data.data[idx];
     <main>
       <section class="container mx-auto px-4 mt-16">
         <div class="flex flex-col justify-center">
-            <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
-            <h2 class="text-xl py-2">{items.title}</h2>
+            <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
+            <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+            <h2 id="message2" class="text-xl py-2">{items.title}</h2>
             <div class="flex flex-col place-items-center">
               <img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
             </div>
@@ -53,6 +54,35 @@ const items  = data.data[idx];
       </section>
     </main>
 </Layout>
+<script is:inline>
+  let isListening = false;
+   let speechSynthesisInstance = window.speechSynthesis;
+
+   function toggleSpeech() {
+       if (isListening) {
+           stopSpeech();
+       } else {
+           startSpeech();
+       }
+   }
+
+   function startSpeech() {
+       let message1 = document.getElementById('message1').innerText;
+       let message2 = document.getElementById('message2').innerText;
+       let allSpeechText = message1 + ' ' + message2;
+       let speechText = new SpeechSynthesisUtterance(allSpeechText);
+       speechSynthesisInstance.speak(speechText);
+
+       document.getElementById('listenButton').innerText = 'Stop';
+       isListening = true;
+   }
+
+   function stopSpeech() {
+       speechSynthesisInstance.cancel();
+       document.getElementById('listenButton').innerText = 'Listen';
+       isListening = false;
+   }
+</script>
 <style>
   section > div > p > p {
     text-align: justify;