Add single file audio player, introduce blocks

CHDataManagement/Page Elements/ContentElements/AudioPlayer/SingleFilePlayer.swift

@@ -0,0 +1,45 @@
+
+struct SingleFilePlayer: HtmlProducer {
+
+    func populate(_ result: inout String) {
+        result += "<div class='song-container'>"
+        result += "<div class='song-player'>"
+        result += "<div class='song-cover-container amplitude-play-pause amplitude-paused'>"
+        result += "<div class='song-player-button'>"
+        result += "<svg class='play-icon'><use href='#\(AudioPlayerPlayIcon.name)'></use></svg>"
+        result += "<svg class='pause-icon'><use href='#\(AudioPlayerPauseIcon.name)'></use></svg>"
+        result += "</div>"
+        result += "<img data-amplitude-song-info='cover_art_url' class='article-thumbnail-image' width='78' height='78'></img>"
+        result += "</div>"
+        result += "<div class='song-info'>"
+        result += "<div class='song-timeline'>"
+        result += "<span class='amplitude-current-time song-current-time'></span>"
+        result += "<span class='amplitude-duration-time song-duration-time'></span>"
+        result += "</div>"
+        result += "<div class='song-progress'>"
+        result += "<input type='range' class='amplitude-song-slider song-slider'>"
+        result += "<progress id='song-played-progress' class=' amplitude-song-played-progress song-progress-bar'></progress>"
+        result += "</div>"
+        result += "<span data-amplitude-song-info='name'></span>"
+        result += "<span data-amplitude-song-info='album' style='font-weight: 500;'></span>"
+        result += "</div></div></div>"
+    }
+
+    static func footer(name: String, artist: String, album: String, url: String, cover: String) -> String {
+        """
+        <script>
+        window.onload = () => {
+            Amplitude.init({
+                "songs": [{
+                    "name": "\(name)",
+                    "artist": "\(artist)",
+                    "album": "\(album)",
+                    "url": "\(url)",
+                    "cover_art_url": "\(cover)"
+                }]
+            });
+        };
+        </script>
+        """
+    }
+}