sudara/alonetone

<div class="player">
  <div class="play_button_container" data-big-play-target="play" data-action="click->big-play#togglePlay">
    <div class='play_button play-control'>
      <%= link_to media_url(@asset), class: 'stitches_play', data: { 'single-playback-target': 'play' } do %>
      <svg data-big-play-target="playButton" class="largePlaySVG" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <clipPath id="dottyMask">
              <path class="dottyMask" d="M300,545C164.69,545,55,435.31,55,300S164.69,55,300,55,545,164.69,545,300,435.31,545,300,545Z" fill="red" stroke="#000" stroke-miterlimit="10" stroke-width="0"/>
          </clipPath>
        </defs>
        <circle class="outline" cx="300" cy="300" r="245" fill="none" stroke="#999" stroke-miterlimit="10" stroke-width="15.68"/>
        <g clip-path="url(#dottyMask)" >
          <circle visibility="hidden" class="dotty" cx="300" cy="300" r="245" fill="none" stroke="#000" stroke-miterlimit="10" stroke-linecap="butt" stroke-width="64" stroke-dasharray="68.99 187.58"/>
        </g>
        <path class="icon new" d="M223.608 429.472 223.4 176.944C223.399 176.936 223.399 176.927 223.399 176.919 223.399 176.638 223.63 176.407 223.911 176.407 224.014 176.407 224.115 176.438 224.2 176.496L324.624 234.4 442.968 302.6C443.127 302.689 443.226 302.858 443.226 303.04 443.226 303.222 443.127 303.391 442.968 303.48L224.368 429.912C224.29 429.958 224.202 429.982 224.112 429.982 223.835 429.982 223.608 429.754 223.608 429.478 223.608 429.476 223.608 429.474 223.608 429.472Z" style="fill-rule:nonzero;"/>
        <circle visibility="hidden" class="centerCircle" cx="300" cy="300" r="123"/>
        <g class="pauseContainer" visibility="hidden">
            <g class="pauseLoopGroup" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="64">
              <line x1="245" y1="146" x2="245" y2="450" />
              <line x1="355" y1="146" x2="355" y2="450" />
            </g>
        </g>
        <g class="pauseGroup" visibility="hidden" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="64">
          <line x1="245" y1="156" x2="245" y2="430" />
          <line x1="355" y1="156" x2="355" y2="430" />
        </g>
      </svg>
      <% end %>
    </div>
  </div>

  <div class="waveform" data-big-play-target='waveform' data-action='mousemove->big-play#skim click->big-play#seek'>
    <div class="seekbar" data-big-play-target="seekBar"></div>
     <%= render partial: 'assets/waveform' %>
  </div>

  <div class="progress_container">
    <div class="progress_container_inner" data-big-play-target="progressContainerInner">
      <div class="line_progress">
      </div>
      <div class="time_progress">
        <span class="index" data-big-play-target="time">0:00</span>
      </div>
    </div>
  </div>



  <div class="time_total">
    <%= @asset.length %>
  </div>

</div>