templates/components/sound.html.twig line 1

Open in your IDE?
  1. <div {{ attributes }} data-live-component-id="{{ sound.id }}">
  2.     {% if isCard %}
  3.         <div class="card {{ this.playing ? 'active' }} h-100">
  4.             <div class="card-img-wrapper">
  5.                 <img src="{{ (sound_dir ~ '/' ~ sound.picture)|imagine_filter('sound_cover') }}"
  6.                      class="card-img-top shadow"
  7.                      alt="Couverture de l'album de {{ sound.artist.name }} - titre {{ sound.title }}">
  8.                 <div class="card-img-hover">
  9.                         <button class="player-btn">
  10.                     {% if this.playing %}
  11.                             <i class="fas fa-waveform-lines"></i>
  12.                     {%  else %}
  13.                             <i class="fas fa-play-circle"></i>
  14.                     {% endif %}
  15.                         </button>
  16.                     {% if app.user %}
  17.                         {{ component('bookmark', {
  18.                             sound: sound
  19.                         }) }}
  20.                     {% endif %}
  21.                 </div>
  22.             </div>
  23.             <div class="card-body">
  25.                 <div class="d-flex flex-column-reverse flex-sm-row justify-content-between ">
  26.                     <div>
  27.                         <h2 class="card-title fs-5 mb-0">{{ sound.artist.name }}</h2>
  28.                         <p class="mb-0">
  29.                             {{ sound.title }}
  30.                         </p>
  31.                     </div>
  33.                 </div>
  35.                 <a class="stretched-link"
  36.                    data-action="live#action"
  37.                    data-action-name="playSound"
  38.                    data-sound-file="{{ sound.file }}"
  39.                    aria-label="Écouter {{ sound.title }} de {{ sound.artist.name }}"
  40.                    href="#"></a>
  41.             </div>
  42.         </div>
  43.     {% else %}
  44.         <button
  45.             class="list-group-item list-group-item-action {{ this.isPlaying ? 'active' }} list-group-player"
  46.             data-action="live#action"
  47.             data-action-name="playSound"
  48.             data-sound-file="{{ sound.file }}">
  49.         <span class="list-group-player__index">
  50.             {{ index }}
  51.         </span>
  52.             <img class="img-fluid shadow-sm"
  53.                  src="{{ vich_uploader_asset(sound, 'imageFile')|imagine_filter('sound_cover_mini') }}" alt="">
  54.             {% if this.isPlaying %}
  55.                 <i class="fa-regular fa-circle-play"></i>
  56.             {% endif %}
  57.             <div class="list-group-player__details">
  58.                 <h3 class="list-group-player__artist">{{ sound.artist.name }}</h3>
  59.                 <p class="list-group-player__title">{{ sound.title }}</p>
  60.             </div>
  61.         </button>
  62.     {% endif %}
  63. </div>