Implement episode switching

index.php

@@ -43,20 +43,31 @@
         <hr class="ms-2 me-2">
         <!-- Episodes -->
         <div>
-            <h3><?= $podcast->episodes[0]->title; ?></h3>
-            <div><?= $podcast->episodes[0]->pubDate; ?></div>
-            <div><?= $podcast->episodes[0]->desc ?></div>
-            <audio controls=true <?= $podcast->episodes[0]->audioData; ?>></audio>
+            <select class="form-select form-select-lg mb-3" name="" id="episode-selection" autocomplete="off">
+                <option value="0" selected><?= $podcast->episodes[0]->title; ?></option>
+                <?php foreach ($podcast->episodes as $key => $ep) {
+                    if ($key != 0) {
+                        echo "<option value={$key}>Episode {$key} - {$podcast->episodes[$key]->title}</option>";
+                    };
+                } ?>
+            </select>
+            <div class="dPubDate"><?= $podcast->episodes[0]->pubDate; ?></div>
+            <div class="dDesc"><?= $podcast->episodes[0]->desc ?></div>
+            <audio controls class="dAudio">
+                <source <?= $podcast->episodes[0]->audioData; ?>>
+            </audio>
         </div>
     </div>
     <script type="text/javascript" src="tools/script.js"></script>
-    <div>
+    <div class="epData" hidden>
         <?php foreach ($podcast->episodes as $key => $ep) {
-            echo "<div class=\"ep{$key}\" hidden>
-                <h3>{$ep->title}</h3>
-                <div>{$ep->pubDate}</div>
-                <div>{$ep->desc}</div>
-                <audio controls=true {$ep->audioData}></audio>
+            echo "<div class=\"ep{$key}\">
+                <div class=\"ep{$key}-title\">{$ep->title}</div>
+                <div class=\"ep{$key}-pubDate\">{$ep->pubDate}</div>
+                <div class=\"ep{$key}-desc\">{$ep->desc}</div>
+                <audio class=\"ep{$key}-audio\">
+                    <source {$ep->audioData}>
+                </audio>
             </div>";
         } ?>
     </div>

tools/script.js

@@ -1,9 +1,39 @@
 "use strict";
 
+function getPubDate(epNum) {
+    const epData = document.getElementsByClassName("ep"+epNum+"-pubDate")
+    return epData[0].innerHTML;
+}
+
+function getDesc(epNum) {
+    const epData = document.getElementsByClassName("ep"+epNum+"-desc")
+    return epData[0].innerHTML;
+}
+
+function getAudioSource(epNum) {
+    const epData = document.getElementsByClassName("ep"+epNum+"-audio")
+    return epData[0].innerHTML;
+}
+
 window.addEventListener("DOMContentLoaded", function () {
     console.log(
         "Hewo, c'est renarde 🦊, la créatrice de ce site.\nSi tu veux trouver le code source du site c'est par ici -> "
         + 'https://forgejo.la-taniere-solidaire.gay/Renarde/site-web-le-plus-beau-des-voyages'
     );
+
+    const epSelect = document.getElementById("episode-selection");
+    const dPubDate = document.getElementsByClassName("dPubDate");
+    const dDesc = document.getElementsByClassName("dDesc");
+    const dAudio = document.getElementsByClassName("dAudio");
+
+    epSelect.addEventListener('change',function() {
+        dPubDate[0].innerHTML = getPubDate(epSelect.value);
+        dDesc[0].innerHTML = getDesc(epSelect.value);
+        dAudio[0].innerHTML = getAudioSource(epSelect.value);
+        dAudio[0].load()
+
+    })
+
+    
 })