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

struct AudioPlayer: HtmlProducer {

    let playlistText: String

    let playingText: String

    let items: [PlaylistItem]

    private var top: String {
        """
        <div class='top'>
            <div>&nbsp;</div>
            <div class='top-center'>\(playingText)</div>
            <div class='show-playlist'>\(Icon.AudioPlayer.Playlist.usageString)</div>
        </div>
        """
    }

    private var center: String {
        """
        <div class='center'>
            <img data-amplitude-song-info='cover_art_url' class='main-album-art'/>
            <div class='song-meta-data'>
                <span data-amplitude-song-info='name' class='song-name'></span>
                <span data-amplitude-song-info='artist' class='song-artist'></span>
            </div>
            <div class='time-progress'>
                <div id='progress-container'>
                    <input type='range' class='amplitude-song-slider'/>
                    <progress id='song-played-progress' class='amplitude-song-played-progress'></progress>
                    <progress id='song-buffered-progress' class='amplitude-buffered-progress' value='0'></progress>
                </div>
                <div class='time-container'>
                    <span class='current-time'>
                        <span class='amplitude-current-hours'></span>:<span class='amplitude-current-minutes'></span>:<span class='amplitude-current-seconds'></span>
                    </span>
                    <span class='duration'>
                        <span class='amplitude-duration-hours'></span>:<span class='amplitude-duration-minutes'></span>:<span class='amplitude-duration-seconds'></span>
                    </span>
                </div>
            </div>
        </div>
        """
    }

    private var controls: String {
        """
        <div id="audio-player-controls">
            <svg id="previous" class="amplitude-prev"><\(Icon.AudioPlayer.Previous.usageContent)</svg>
            <div class="amplitude-play-pause" id="play-pause">
                <svg class="play-icon">\(Icon.AudioPlayer.Play.usageContent)</svg>
                <svg class="pause-icon">\(Icon.AudioPlayer.Pause.usageContent)</svg>
            </div>
            <svg id="next" class="amplitude-next">\(Icon.AudioPlayer.Next.usageContent)</svg>
        </div>
        """
    }

    private var playlistStart: String {
        """
        <div id="playlist-container">
            <div class="top">
                <div class="queue">\(playlistText)</div>
                <div class="close-playlist">\(Icon.AudioPlayer.Close.usageString)</div>
            </div>
            <div class="playlist">
        """
    }

    private var playlistEnd: String {
        """
            </div>
        
            <div class="white-player-playlist-controls">
                <img data-amplitude-song-info="cover_art_url" class="playlist-album-art"/>
                <div class="playlist-controls">
                    <div class="playlist-meta-data">
                        <span data-amplitude-song-info="name" class="song-name"></span>
                        <span data-amplitude-song-info="artist" class="song-artist"></span>
                    </div>
                    <div class="playlist-control-wrapper">
                        <svg class="amplitude-prev" id="playlist-previous">\(Icon.AudioPlayer.Previous.usageContent)</svg>
                        <div class="amplitude-play-pause" id="playlist-play-pause">
                            <svg class="play-icon">\(Icon.AudioPlayer.Play.usageContent)</svg>
                            <svg class="pause-icon">\(Icon.AudioPlayer.Pause.usageContent)</svg>
                        </div>
                        <svg class="amplitude-next" id="playlist-next">\(Icon.AudioPlayer.Next.usageContent)</svg>
                    </div>
                </div>
            </div>
        </div>
        """
    }

    func populate(_ result: inout String) {
        result += "<div class='audio-player'>"
        result += top
        result += center
        result += controls
        result += playlistStart
        for item in items {
            result += item.content
        }
        result += playlistEnd
        result += "</div>"
    }

    struct PlaylistItem {

        let index: Int

        let image: String

        let name: String

        let album: String

        let track: Int

        let artist: String

        var content: String {
            """
            <div class="playlist-song amplitude-song-container amplitude-play-pause amplitude-paused" data-amplitude-song-index="\(index)">
                <img src="\(image)">
                <div class="playlist-song-meta">
                    <span class="playlist-song-name">\(name)</span>
                    <span class="playlist-song-artist">\(album) &bull; \(artist)</span>
                </div>
            </div>
            """
        }
    }

}