[pitivi-web] Play the pronounciation directly from the homepage

[Alexandru Băluț <alexbalut src gnome org>]

commit 6ab388a4ca3370303ff8d0f7cb2a249a0eae03b9
Author: Alexandru Băluț <alexandru balut gmail com>
Date:   Thu Jul 1 22:51:28 2021 +0200

    Play the pronounciation directly from the homepage

 layouts/index.html                        | 27 ++++++++++++++++++-
 static/css/pitivi.css                     | 14 +++++++---
 static/i/audio-volume-medium-symbolic.svg | 43 -------------------------------
 3 files changed, 36 insertions(+), 48 deletions(-)
---
diff --git a/layouts/index.html b/layouts/index.html
index 3f1ebc2..bc6b117 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,6 +1,31 @@
 {{ define "main" }}
 <section class="centered-introduction">
-    <p>Pitivi <a href="/i/pitivi%20pronounciation.ogg" title="[pronounciation]"><img 
src="/i/audio-volume-medium-symbolic.svg" alt="pronounciation" style="width:16px; height:16px; border:0px;" 
/></a> is a Free video editor with a beautiful and intuitive user interface, a clean codebase and a fantastic 
community. <a href="/contribute/">Join us!</a></p>
+    <p><a href="" title="[pronounciation]" class="hidden" onclick="return play();">Pitivi <i id="audio_icon" 
class="fas fa-volume-up"></i></a> is a Free video editor with a beautiful and intuitive user interface, a 
clean codebase and a fantastic community. <a href="/contribute/">Join us!</a></p>
+    <audio id="audio" src="/i/pitivi%20pronounciation.ogg"></audio>
+    <script>
+        function play() {
+            let audio = document.getElementById("audio");
+            if (audio.paused) {
+                audio.play();
+            } else {
+                audio.pause();
+            }
+            return false;
+        }
+
+        function update() {
+            let button = document.getElementById("audio_icon");
+            if (audio.paused) {
+                button.className = "fas fa-volume-up";
+            } else {
+                button.className = "fas fa-pause";
+            }
+        }
+
+        const audio = document.getElementById("audio");
+        audio.addEventListener("pause", update);
+        audio.addEventListener("play", update);
+    </script>
 </section>
 
 <section id="frontpage_splash" class="auto-column-half">
diff --git a/static/css/pitivi.css b/static/css/pitivi.css
index e81a3bc..134a388 100644
--- a/static/css/pitivi.css
+++ b/static/css/pitivi.css
@@ -70,10 +70,6 @@ section {
     margin: 0em 1em;
 }
 
-section#frontpage_splash h1 {
-    font-family: 'Source Sans Pro', sans-serif;
-}
-
 section.centered-introduction {
     max-width: 665px;
     margin-left: auto;
@@ -200,3 +196,13 @@ code {
 .article-meta > li.article-meta-tag > a > i {
     margin-right: 0.2em;
 }
+
+/* Home page */
+section#frontpage_splash h1 {
+    font-family: 'Source Sans Pro', sans-serif;
+}
+
+#audio_icon {
+    width: 1.5em;
+    color: lightgrey;
+}
\ No newline at end of file