<!-- components/music/music.wxml -->
<wxs src="./kPlayer.wxs" module="Fn"></wxs>
<view class="box {{info.name !== '' ? 'have-name' : ''}}" style="{{style}}" bind:touchstart="touchstart" bind:touchmove="touchmove" bind:touchend="touchend">
    <view class="name-box" wx:if="{{info.name !== ''}}">
        {{info.name}}
        <span class="author-line" wx:if="{{info.author !== ''}}">-</span>
        <span wx:if="{{info.author !== ''}}">{{info.author}}</span>
    </view>
    <view class="status-box">
        <view class="play-box {{status ? 'show-play' : 'hide-play'}}" wx:if="{{!loadFlag}}">
            <span class="play"></span>
        </view>
        <span class="pause-box {{!status ? 'pause-show' : 'hide-pause'}}" wx:if="{{!loadFlag}}">
            <span class="pause-one"></span>
            <span class="pause-two"></span>
        </span>
        <view class="loader" wx:if="{{loadFlag}}">
            <view class="my-after" style="background:{{info.color}}"></view>
        </view>
    </view>
    <view class="name-box"></view>
    <view class="soundbyte-box">
        <view class="soundbyte-box-two">
            <view class="top">
                <block wx:for="{{soundbyteArr}}" wx:key="index">
                    <view class="soundbyte {{item.type}} {{item.stop}}" style="width: {{item.width}}rpx"></view>
                </block>
            </view>
            <view class="bottom">
                <block wx:for="{{soundbyteArr}}" wx:key="index">
                    <view class="soundbyte {{item.type}} {{item.stop}}" style="width: {{item.width}}rpx"></view>
                </block>
            </view>
        </view>
    </view>
    <view wx:if="{{!info.progressDisable}}" class="progress" style="width: calc(100% - {{info.border*2}}rpx); left: {{info.border}}rpx">
        <view class="current-progress" style="background-color: {{info.color}}; width:{{percentage}}">
            <view class="point" style="background-color: {{info.color}};"></view>
        </view>
    </view>
</view>
<view class="time-dialog {{timeDialogFlag ? 'time-dialog-show' : 'time-dialog-hide'}}">
    {{Fn.s_to_hs(moveToTime)}}
    <span class="comminute"></span>
    {{Fn.s_to_hs(duration)}}
</view>