@using Dpz.Core.Infrastructure
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using Microsoft.Extensions.Configuration
@model ICollection<VmMusic>
@inject IConfiguration Configuration
@* <link rel="stylesheet" href="/css/music.css" asp-append-version="true"> *@
<div class="blog-container">
    <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
        <a href="/" title="网站首页" data-pjax>网站首页</a>
        <a><cite></cite>曲库</a>
    </blockquote>
    @* @if (User.Identity?.IsAuthenticated == true && User.GetIdentity().Permissions?.HasFlag(Permissions.System) == true) *@
    @* { *@
    @*     <div class="article-detail-info"> *@
    @*         <span> *@
    @*             <a asp-controller="Music" asp-action="ViewCookie" data-pjax>查看cookie</a> *@
    @*         </span> *@
    @*     </div> *@
    @* } *@
    <div id="blue-playlist-container">
        <!-- Amplitude Player -->
        <div id="amplitude-player">

            <!-- Left Side Player -->
            <div id="amplitude-left">
                <img data-amplitude-song-info="cover_art_url" alt="cover" src="@(Configuration["CDNBaseAddress"])/images/music.png" class="album-art" id="album-art" />
                <div class="amplitude-visualization" id="large-visualization">

                </div>
                <div id="player-left-bottom">
                    <div id="time-container">
                        <span class="current-time">
                            <span class="amplitude-current-minutes">00</span>:<span class="amplitude-current-seconds">00</span>
                        </span>
                        <div id="progress-container">
                            <div class="amplitude-wave-form">

                            </div>
                            <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>
                        <span class="duration">
                            <span class="amplitude-duration-minutes">00</span>:<span class="amplitude-duration-seconds">00</span>
                        </span>
                    </div>

                    <div id="control-container">
                        <div id="repeat-container">
                            <div class="amplitude-repeat" id="repeat"></div>
                            <div class="amplitude-shuffle amplitude-shuffle-off" id="shuffle"></div>
                        </div>

                        <div id="central-control-container">
                            <div id="central-controls">
                                <div class="amplitude-prev" id="previous"></div>
                                <div class="amplitude-play-pause" id="play-pause"></div>
                                <div class="amplitude-next" id="next"></div>
                            </div>
                        </div>

                        <div id="volume-container">
                            <div class="volume-controls">
                                <div class="amplitude-mute amplitude-not-muted"></div>
                                <input type="range" class="amplitude-volume-slider" max="100" value="50" min="0" step="1" />
                                <div class="ms-range-fix"></div>
                            </div>
                            <div class="amplitude-shuffle amplitude-shuffle-off" id="shuffle-right"></div>
                        </div>
                    </div>

                    <div id="meta-container">
                        <span data-amplitude-song-info="name" class="song-name"></span>

                        <div class="song-artist-album">
                            <span data-amplitude-song-info="artist"></span>
                            <span data-amplitude-song-info="album"></span>
                        </div>
                    </div>
                    <div class="meta-lyrics"></div>
                </div>
            </div>
            <!-- End Left Side Player -->
            <!-- Right Side Player -->
            <div id="amplitude-right">
                @foreach (var item in Model)
                {
                    <div data-url="@item.MusicUrl"
                         data-title="@item.Title"
                         data-artist="@item.Artist"
                         data-cover="@(item.CoverUrl ?? Configuration["upyun:Host"] + "/images/music.png")"
                         data-lrc="@item.LyricUrl"
                         data-group="@string.Join(',',item.Group)"
                         class="song amplitude-song-container amplitude-play-pause" data-amplitude-song-index="@Model.IndexOf(item)">
                        <div class="song-now-playing-icon-container">
                            <div class="play-button-container">

                            </div>
                            <img alt="audio" class="now-playing" src="@(Configuration["CDNBaseAddress"])/images/now-playing.svg" />
                        </div>
                        <div class="song-meta-data">
                            <span class="song-title">@item.Title</span>
                            <span class="song-artist">@item.Artist</span>
                        </div>
                        <span class="song-duration">
                            @item.Duration.ToString("mm\\:ss")
                            @*@($"{item.Duration.Minutes:00}:{item.Duration.Seconds:00}")*@
                        </span>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
<environment include="Development">
    <script>
        $(function() {        
            $.getScript("@Configuration["CustomScript"]/music.js");
        });    
    </script>
</environment>
<environment exclude="Development">
    <script>
        $(function() {        
            $.getScript("@Configuration["CustomScript"]/music.min.js");
        });    
    </script>
</environment>