<commit_before><template>
  <div>
    <div id="sc-webplayer" class="card">
      <header class="card-header">
        <p class="card-header-title">
          SoundCloud Web Player
        </p>
      </header>
      <div class="card-content" v-if="content">
        <div class="media">
          <div class="media-left">
            <img :src="song.cover" alt="Image">
          </div>
          <div class="media-content">
            <p class="title is-4">{{song.title}}</p>
            <p class="subtitle is-6">{{song.artist}}</p>
            <p class="subtitle is-6">{{ song.created_at }}</p>
          </div>
        </div>
        <div class="content">
          <div class="columns" id="progressBarWrapper">
            <div class="column is-narrow has-text-centered">
              <span>{{ progressBarCurrentPosition }}</span>
            </div>
            <div class="column is-fullwidth" id="progressBar">
              <nouislider :config="progressSlider.config" :values="progressSlider.values"></nouislider>
            </div>
            <div class="column is-narrow has-text-centered">{{progressBarDuration}}</div>
          </div>
          <p v-html="prettyDescription"></p>
        </div>
      </div>
      <footer class="card-footer">
        <a class="card-footer-item" @click.prevent="changeSong">New Song</a>
        <a class="card-footer-item" v-show="running" @click.prevent="toggleSong"><i class="fa fa-pause"
                                                                                    aria-hidden="true"></i>
        </a>
        <a class="card-footer-item" v-show="!running" @click.prevent="toggleSong">
          <i v-if="!content" class="fa fa-spinner fa-pulse fa-fw is-primary"></i>
          <i v-if="content" class="fa fa-play" aria-hidden="true"></i>
        </a>
      </footer>
    </div>

    <!--Tip Section-->
    <section class="section">
      <article class="message is-info">
        <div class="message-body">
          <strong>Pro Tip!</strong>
          You can open this player and provide a song with a url query parameter.<br><br>
          Example: <br><a :href="baseUrl + '?url=https://soundcloud.com/jaidencollisbootlegs2/danceoff'">{{ baseUrl
          }}?url=https://soundcloud.com/jaidencollisbootlegs2/danceoff</a>
        </div>
      </article>
    </section>

    <!--SoundCloud iframe-->
    <iframe frameborder="0" id="sc-player"
            :src="songSrc"
            @load="iFramePreLoad"></iframe>

    <!--New Song Modal-->
    <div class="modal" :class="newSongModal ? 'is-active' : ''">
      <div class="modal-background" @click.prevent="newSongModal = false"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">New Song</p>
          <button class="delete" @click.prevent="newSongModal = false"></button>
        </header>
        <section class="modal-card-body">
          <div class="field has-addons">
            <p class="control is-expanded">
              <input class="input" type="text" placeholder="New SoundCloud Song" v-model="newUrl">
            </p>
            <p class="control">
              <a class="button is-primary" @click.prevent="playNewSong">
                <span class="icon">
                  <i class="fa fa-play" aria-hidden="true"></i>
                </span>
                <span>Play</span>
              </a>
            </p>
          </div><commit_msg>Fix Chrome playback issue<commit_after><template>
  <div>
    <div id="sc-webplayer" class="card">
      <header class="card-header">
        <p class="card-header-title">
          SoundCloud Web Player
        </p>
      </header>
      <div class="card-content" v-if="content">
        <div class="media">
          <div class="media-left">
            <img :src="song.cover" alt="Image">
          </div>
          <div class="media-content">
            <p class="title is-4">{{song.title}}</p>
            <p class="subtitle is-6">{{song.artist}}</p>
            <p class="subtitle is-6">{{ song.created_at }}</p>
          </div>
        </div>
        <div class="content">
          <div class="columns" id="progressBarWrapper">
            <div class="column is-narrow has-text-centered">
              <span>{{ progressBarCurrentPosition }}</span>
            </div>
            <div class="column is-fullwidth" id="progressBar">
              <nouislider :config="progressSlider.config" :values="progressSlider.values"></nouislider>
            </div>
            <div class="column is-narrow has-text-centered">{{progressBarDuration}}</div>
          </div>
          <p v-html="prettyDescription"></p>
        </div>
      </div>
      <footer class="card-footer">
        <a class="card-footer-item" @click.prevent="changeSong">New Song</a>
        <a class="card-footer-item" v-show="running" @click.prevent="toggleSong"><i class="fa fa-pause"
                                                                                    aria-hidden="true"></i>
        </a>
        <a class="card-footer-item" v-show="!running" @click.prevent="toggleSong">
          <i v-if="!content" class="fa fa-spinner fa-pulse fa-fw is-primary"></i>
          <i v-if="content" class="fa fa-play" aria-hidden="true"></i>
        </a>
      </footer>
    </div>

    <!--Tip Section-->
    <section class="section">
      <article class="message is-info">
        <div class="message-body">
          <strong>Pro Tip!</strong>
          You can open this player and provide a song with a url query parameter.<br><br>
          Example: <br><a :href="baseUrl + '?url=https://soundcloud.com/jaidencollisbootlegs2/danceoff'">{{ baseUrl
          }}?url=https://soundcloud.com/jaidencollisbootlegs2/danceoff</a>
        </div>
      </article>
    </section>

    <!--SoundCloud iframe-->
    <iframe frameborder="0" allow="autoplay" id="sc-player"
            :src="songSrc"
            @load="iFramePreLoad"></iframe>

    <!--New Song Modal-->
    <div class="modal" :class="newSongModal ? 'is-active' : ''">
      <div class="modal-background" @click.prevent="newSongModal = false"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">New Song</p>
          <button class="delete" @click.prevent="newSongModal = false"></button>
        </header>
        <section class="modal-card-body">
          <div class="field has-addons">
            <p class="control is-expanded">
              <input class="input" type="text" placeholder="New SoundCloud Song" v-model="newUrl">
            </p>
            <p class="control">
              <a class="button is-primary" @click.prevent="playNewSong">
                <span class="icon">
                  <i class="fa fa-play" aria-hidden="true"></i>
                </span>
                <span>Play</span>
              </a>
            </p>
          </div>
{'fraction_non_alphanumeric': 0.1746629946369039, 'fraction_numerical': 0.001739382519205682, 'mean_word_length': 2.0013049151805133, 'pattern_counts': {'":': 0, '<': 197, '<?xml version=': 0, '>': 197, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5697641', 'n_tokens_mistral': 2084, 'n_tokens_neox': 2022, 'n_words': 403}