views/components/AudioPlayer: Add audio player component

2 files changed, 70 insertions, 206 deletions

diff --git a/views/components/AudioPlayer.php b/views/components/AudioPlayer.php
new file mode 100644
index 0000000..d3ba487
--- /dev/null
+++ b/views/components/AudioPlayer.php
@@ -0,0 +1,51 @@
+    <div class="sm2-bar-ui bg-white compact shadow-md mb-4 border">
+
+        <div class="bd sm2-main-controls">
+
+            <div class="sm2-inline-element sm2-button-element">
+                <div class="sm2-button-bd">
+                    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
+                </div>
+            </div>
+
+            <div class="sm2-inline-element sm2-inline-status">
+
+                <div class="sm2-progress">
+                    <div class="sm2-row">
+                        <div class="sm2-inline-time">0:00</div>
+                        <div class="sm2-progress-bd">
+                            <div class="sm2-progress-track">
+                                <div class="sm2-progress-bar"></div>
+                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
+                            </div>
+                        </div>
+                        <div class="sm2-inline-duration">0:00</div>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="sm2-inline-element sm2-button-element sm2-volume">
+                <div class="sm2-button-bd">
+                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
+                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
+                </div>
+            </div>
+
+            <a href="audio/prologue.mp3" class="sm2-inline-element sm2-button-element" download>
+                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/icons/feathericons/download.svg') ?>
+            </a>
+
+        </div>
+
+        <div class="bd sm2-playlist-drawer sm2-element">
+
+            <div class="sm2-playlist-wrapper">
+                <ul class="sm2-playlist-bd">
+                <li class="selected"><a href="/audio/<?php echo $audio; ?>.mp3">Prologue</a></li>
+                </ul>
+            </div>
+
+        </div>
+
+    </div>
diff --git a/views/index.view.php b/views/index.view.php
index 3ac2d0b..130247f 100644
--- a/views/index.view.php
+++ b/views/index.view.php
@@ -19,63 +19,16 @@
         </audio>
     </noscript>
 
-    <div class="sm2-bar-ui bg-white compact shadow-md mb-4 border">
-
-        <div class="bd sm2-main-controls">
-
-            <div class="sm2-inline-element sm2-button-element">
-                <div class="sm2-button-bd">
-                    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
-                </div>
-            </div>
-
-            <div class="sm2-inline-element sm2-inline-status">
-
-                <div class="sm2-progress">
-                    <div class="sm2-row">
-                        <div class="sm2-inline-time">0:00</div>
-                        <div class="sm2-progress-bd">
-                            <div class="sm2-progress-track">
-                                <div class="sm2-progress-bar"></div>
-                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
-                            </div>
-                        </div>
-                        <div class="sm2-inline-duration">0:00</div>
-                    </div>
-                </div>
-
-            </div>
-
-            <div class="sm2-inline-element sm2-button-element sm2-volume">
-                <div class="sm2-button-bd">
-                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
-                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
-                </div>
-            </div>
-
-            <a href="audio/prologue.mp3" class="sm2-inline-element sm2-button-element" download>
-                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/icons/feathericons/download.svg') ?>
-            </a>
-
-        </div>
-
-        <div class="bd sm2-playlist-drawer sm2-element">
-
-            <div class="sm2-playlist-wrapper">
-                <ul class="sm2-playlist-bd">
-                    <li class="selected"><a href="/audio/prologue.mp3">Prologue</a></li>
-                </ul>
-            </div>
-
-        </div>
-
-    </div>
 
+<?php
+$audio = 'prologue';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
 
 
     <h1 class="text-xl text-gray-800 mb-2 font-bold">Narrative</h1>
 
-    <p class="text-gray-800 mb-3 leading-normal">
+    <p class="text-gray-darkest mb-3 leading-normal">
         Spoken or written accounts of connected events.
     </p>
 
@@ -86,63 +39,16 @@
         </audio>
     </noscript>
 
-    <div class="sm2-bar-ui bg-white compact shadow-md mb-4 border">
-
-        <div class="bd sm2-main-controls">
-
-            <div class="sm2-inline-element sm2-button-element">
-                <div class="sm2-button-bd">
-                    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
-                </div>
-            </div>
-
-            <div class="sm2-inline-element sm2-inline-status">
-
-                <div class="sm2-progress">
-                    <div class="sm2-row">
-                        <div class="sm2-inline-time">0:00</div>
-                        <div class="sm2-progress-bd">
-                            <div class="sm2-progress-track">
-                                <div class="sm2-progress-bar"></div>
-                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
-                            </div>
-                        </div>
-                        <div class="sm2-inline-duration">0:00</div>
-                    </div>
-                </div>
-
-            </div>
-
-            <div class="sm2-inline-element sm2-button-element sm2-volume">
-                <div class="sm2-button-bd">
-                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
-                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
-                </div>
-            </div>
-
-            <a href="audio/narrative.mp3" class="sm2-inline-element sm2-button-element" download>
-                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/icons/feathericons/download.svg') ?>
-            </a>
-
-        </div>
-
-        <div class="bd sm2-playlist-drawer sm2-element">
-
-            <div class="sm2-playlist-wrapper">
-                <ul class="sm2-playlist-bd">
-                    <li class="selected"><a href="/audio/narrative.mp3">Narrative</a></li>
-                </ul>
-            </div>
-
-        </div>
-
-    </div>
 
+<?php
+$audio = 'narrative';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
 
 
     <h1 class="text-xl text-gray-800 mb-2 font-bold">Dramatic</h1>
 
-    <p class="text-gray-800 mb-3 leading-normal">
+    <p class="text-gray-darkest mb-3 leading-normal">
         Sudden and striking narrative elements.
     </p>
 
@@ -153,64 +59,16 @@
         </audio>
     </noscript>
 
-    <div class="sm2-bar-ui bg-white compact shadow-md mb-4 border">
-
-        <div class="bd sm2-main-controls">
-
-            <div class="sm2-inline-element sm2-button-element">
-                <div class="sm2-button-bd">
-                    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
-                </div>
-            </div>
-
-            <div class="sm2-inline-element sm2-inline-status">
-
-                <div class="sm2-progress">
-                    <div class="sm2-row">
-                        <div class="sm2-inline-time">0:00</div>
-                        <div class="sm2-progress-bd">
-                            <div class="sm2-progress-track">
-                                <div class="sm2-progress-bar"></div>
-                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
-                            </div>
-                        </div>
-                        <div class="sm2-inline-duration">0:00</div>
-                    </div>
-                </div>
-
-            </div>
-
-            <div class="sm2-inline-element sm2-button-element sm2-volume">
-                <div class="sm2-button-bd">
-                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
-                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
-                </div>
-            </div>
-
-            <a href="audio/dramatic.mp3" class="sm2-inline-element sm2-button-element" download>
-                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/icons/feathericons/download.svg') ?>
-            </a>
-
-        </div>
-
-        <div class="bd sm2-playlist-drawer sm2-element">
-
-            <div class="sm2-playlist-wrapper">
-                <ul class="sm2-playlist-bd">
-                    <li class="selected"><a href="/audio/dramatic.mp3">Dramatic</a></li>
-                </ul>
-            </div>
-
-        </div>
-
-    </div>
-
 
+<?php
+$audio = 'dramatic';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
 
 
     <h1 class="text-xl text-gray-800 mb-2 font-bold">Commercial</h1>
 
-    <p class="text-gray-800 mb-3 leading-normal">
+    <p class="text-gray-darkest mb-3 leading-normal">
         Old school narrative commercial style.
     </p>
 
@@ -221,56 +79,11 @@
         </audio>
     </noscript>
 
-    <div class="sm2-bar-ui bg-white compact shadow-md border">
-
-        <div class="bd sm2-main-controls">
-
-            <div class="sm2-inline-element sm2-button-element">
-                <div class="sm2-button-bd">
-                    <a href="#play" class="sm2-inline-button sm2-icon-play-pause">Play / Pause</a>
-                </div>
-            </div>
-
-            <div class="sm2-inline-element sm2-inline-status">
-
-                <div class="sm2-progress">
-                    <div class="sm2-row">
-                        <div class="sm2-inline-time">0:00</div>
-                        <div class="sm2-progress-bd">
-                            <div class="sm2-progress-track">
-                                <div class="sm2-progress-bar"></div>
-                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
-                            </div>
-                        </div>
-                        <div class="sm2-inline-duration">0:00</div>
-                    </div>
-                </div>
-
-            </div>
-
-            <div class="sm2-inline-element sm2-button-element sm2-volume">
-                <div class="sm2-button-bd">
-                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
-                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
-                </div>
-            </div>
-
-            <a href="audio/commercial.mp3" class="sm2-inline-element sm2-button-element" download>
-                <?php echo file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/..' . '/public/icons/feathericons/download.svg') ?>
-            </a>
-
-        </div>
-
-        <div class="bd sm2-playlist-drawer sm2-element">
-
-            <div class="sm2-playlist-wrapper">
-                <ul class="sm2-playlist-bd">
-                    <li class="selected"><a href="/audio/commercial.mp3">Commercial</a></li>
-                </ul>
-            </div>
 
-        </div>
+<?php
+$audio = 'commercial';
+require __DIR__ . '/components/AudioPlayer.php';
+?>
 
-    </div>
 
 <?php require __DIR__ . '/partials/footer.php'; ?>