templates/components/player.html.twig line 1

Open in your IDE?
  1. <div {{ attributes.defaults(stimulus_controller('player')) }}
  2.     id="player" class="player-container">
  3.     <div class="container d-flex">
  4.         {% if this.sound %}
  5.             <div class="player">
  6.                 {% if this.sound.player.name == 'spotify' %}
  7.                     <div class="player-sound-image">
  8.                         <img
  9.                             class="img-fluid"
  10.                             src="{{ vich_uploader_asset(this.sound, 'imageFile')|imagine_filter('sound_cover') }}"
  11.                             alt="image cover of {{ this.sound.title }}">
  12.                     </div>
  13.                 {% endif %}
  14.                 {% if this.sound.player.name == 'youtube' %}
  15.                     <div class="player-sound-video"
  16.                          data-live-id="{{ this.sound.id }}"
  17.                          data-file="{{ this.sound.file }}"
  18.                         {{ stimulus_target('player', 'video') }}>
  19.                         <div {{ stimulus_target('player', 'videoPlayer') }}></div>
  20.                     </div>
  21.                 {% endif %}
  22.                     <div class="player-sound">
  23.                         <div class="player-sound-details">
  24.                             <h2 class="player-sound-details-artist">{{ this.sound.artist.name }}</h2>
  25.                             <p class="player-sound-details-title">{{ this.sound.title }}</p>
  26.                         </div>
  27.                         <div class="player-sound-commands">
  28.                             <button class="player-btn"
  29.                                 {{ stimulus_action('player', 'togglePlay') }}
  30.                                 {{ stimulus_target('player', 'playPauseButton') }} >
  31.                                 <i class="fas fa-play-circle"></i>
  32.                             </button>
  33.                             <button class="player-btn {{ this.isFirst() ? 'opacity-25' }}"
  34.                                 data-action="live#action"
  35.                                 data-action-name="prevTrack"
  36.                                 {{ this.isFirst() ? 'disabled="disabled"' }}
  37.                                 >
  38.                                 <i class="fas fa-backward-step"></i>
  39.                             </button>
  40.                             <button class="player-btn {{ this.isLast() ? 'opacity-25' }}"
  41.                                 data-action="live#action"
  42.                                 data-action-name="nextTrack"
  43.                                 {{ this.isLast() ? 'disabled="disabled"' }}
  44.                                 >
  45.                                 <i class="fas fa-forward-step"></i>
  46.                             </button>
  47.                             {% if app.user %}
  48.                                 {{ component('bookmark', {
  49.                                     sound: this.sound,
  50.                                     'data-live-id': this.sound.id
  51.                                 }) }}
  52.                             {% endif %}
  53. {#                            @todo add to bookmark & manage playlist #}
  54. {#                            <button class="player-btn">#}
  55. {#                                <i class="far fa-list-music"></i>#}
  56. {#                            </button>#}
  57.                         </div>
  58.                     </div>
  59.             </div>
  60.             <div class="player-instrument">
  61.                     {% include 'instrument/_instrument-picture.html.twig' with {instrument: this.sound.instrument} %}
  62.                 <div class="player-instrument-details">
  63.                     <h2 class="player-instrument-details-title">{{ this.sound.instrument.name }} <small>- {{ this.sound.instrument.company.name }}</small></h2>
  64.                     <p class="player-instrument-details-summary">{{ this.sound.instrument.summary }}</p>
  65.                     <a href="{{ path('app_instrument_show', {'slug': this.sound.instrument.slug}) }}"
  66.                        data-turbo-frame="body"
  67.                        class="btn btn-primary btn-sm mt-auto">{{ 'Afficher'|trans }}</a>
  68.                 </div>
  69.             </div>
  70.         {% endif %}
  71.         <div class="ms-2">
  72.             <button
  73.                 {{ stimulus_action('player', 'collapse') }}
  74.                 {{ stimulus_target('player', 'collapseButton') }}
  75.                 class="btn btn-primary btn-sm">
  76.                 <i class="fas fa-caret-down"></i>
  77.             </button>
  78.             <button
  79.                 {{ stimulus_action('player', 'expand') }}
  80.                 {{ stimulus_target('player', 'expandButton') }}
  81.                 class="btn btn-primary btn-sm">
  82.                 <i class="fas fa-caret-up"></i>
  83.             </button>
  84.         </div>
  85.     </div>
  86. </div>