templates/station/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ 'NAVBAR.titre' | trans }} - {{ station.name }}{% endblock %}
  5. {% block description %}{{ 'NAVBAR.metaDescription' | trans({'%station%': station.name}) }}{% endblock %}
  7.  {% block stylesheets %}
  8.      <style>
  10.          .slider {
  11.              -webkit-appearance: none;
  12.              width: 100%;
  13.              height: 25px;
  14.              background: #d3d3d3;
  15.              outline: none;
  16.              opacity: 0.7;
  17.              -webkit-transition: .2s;
  18.              transition: opacity .2s;
  19.          }
  21.          .slider:hover {
  22.              opacity: 1;
  23.          }
  25.          .slider::-webkit-slider-thumb {
  26.              -webkit-appearance: none;
  27.              appearance: none;
  28.              width: 25px;
  29.              height: 25px;
  30.              background: #4CAF50;
  31.              cursor: pointer;
  32.          }
  34.          .slider::-moz-range-thumb {
  35.              width: 25px;
  36.              height: 25px;
  37.              background: #4CAF50;
  38.              cursor: pointer;
  39.          }
  40.      </style>
  41.  {% endblock %}
  43. {% block body %}
  44.     <div class="container-fluid content-margen-top">
  45.         <div class="row">
  46.             <div class="col-md-9">
  47.                 <div class="to-flex-no"><!---->
  48.                     <div class="station-details">
  49.                         <div class="col-md-12">
  50.                             <div class="card gradient-card">
  51.                                 <div class="card-image micro-radio">
  52.                                     <div>
  53.                                         <div class="text-white d-flex h-100 mask">
  54.                                             <div class="first-content align-self-center p-3">
  55.                                                 <img class="image" src="{{ asset('uploads/logo/' ~ station.image) }}"
  56.                                                      alt="{{ 'NAVBAR.altImageStation' | trans({'%station%': station.name}) }}"
  57.                                                      title="{{ 'NAVBAR.altImageStation' | trans({'%station%': station.name}) }}"
  58.                                                      loading="lazy">
  59.                                             </div>
  60.                                             <div class="first-content align-self-center p-3">
  61.                                                 <h3 class="card-title">Station : {{ station.name }}</h3>
  62.                                                 <p class="lead mb-0">Frequence : {{ station.frequence }}</p>
  63.                                                 <p class="lead mb-0"><a href="{{ station.url }}">Site Web</a></p>
  64.                                             </div>
  65.                                         </div>
  66.                                     </div>
  67.                                 </div>
  68.                             </div>
  69.                         </div>
  70.                     </div>
  71.                     <ul class="list-stations"><!---->
  72.                         {% for station in stations %}
  73.                             <li>
  74.                                 <div class="view overlay" tabindex="0">
  75.                                     <img class="image" src="{{ asset('uploads/logo/' ~ station.image) }}"
  76.                                          alt="{{ 'NAVBAR.altImageStation' | trans({'%station%': station.name}) }}"
  77.                                          title="{{ 'NAVBAR.altImageStation' | trans({'%station%': station.name}) }}"
  78.                                          loading="lazy">
  79.                                     <a href="{{ path('station_ecouter', {slug : station.slug}) }}"
  80.                                        class="mask flex-center waves-effect waves-light rgba-black-light station-overlay-radius">
  81.                                         <div class="flex-center">
  82.                                             <span class="white-text">{{ station.name }}</span>
  83.                                         </div>
  84.                                     </a>
  85.                                 </div>
  86.                             </li>
  87.                         {% else %}
  88.                             no records found
  89.                         {% endfor %}
  90.                     </ul>
  91.                 </div>
  92.             </div>
  94.             <div class="col-md-3">
  95.                 <div class="card">
  96.                     <div class="card-header">
  97.                         {{ station.pays.continent.name }}
  98.                     </div>
  99.                     <div class="card-body">
  100.                         {% for country in station.pays.continent.countries %}
  101.                             <a href="{{ path('station_pays_show', { slug : country.slug}) }}"
  102.                                title="Radio Live {{ country.name }}">
  103.                                 <i class="{{ country.name | lower }} flag"></i>
  104.                             </a>
  105.                         {% endfor %}
  106.                         <a href="{{ path('station_liste_pays') }}" class="btn btn-sm btn-outline-primary waves-effect">{{ 'NAVBAR.otherCountries' | trans }}</a>
  107.                     </div>
  108.                 </div>
  109.                 </br>
  110.                 {% include 'publicite.html.twig' %}
  111.             </div>
  112.         </div>
  113.     </div>
  116.     <audio id="audioplayer" autoplay="" src="{{ station.media }}">
  117.         Your browser does not support the
  118.         <code>audio</code> element.
  119.     </audio>
  121.     <nav class="navbar fixed-bottom navbar-light white no-padding padding-left">
  122.         <div class="align">
  123.             <a href="#" title="Play video" class="play"></a>
  124.             <div class="player-station-name font-weight-bold">{{ station.name }}</div>
  125.             <div class="stream-img d-none d-sm-block">
  126.                 <img src="{{ asset('assets/equalizer.gif') }}">
  127.             </div>
  128.             <div class="volume-container text-white align">
  129.                 <input id="myRange" max="1" min="0" step="0.1" type="range">
  130.                 <a id="volumeBtn" class="btn-floating btn-lg btn-primary btn-sm btn-rounded">
  131.                     <i id="volumeBtnClass" class="fas fa-volume-up"></i>
  132.                 </a>
  133.             </div>
  134.         </div>
  135.     </nav>
  136. {% endblock %}
  138. {% block javascripts %}
  139.     <script src="{{ asset('assets/js/audioplayer.js') }}"></script>
  140.     <script>
  141.     </script>
  142. {% endblock %}