templates/vitrine/loader/streamit-swiper.html.twig line 1

  1. <style>
  2. .iq-card:hover .block-social-info {
  3.     opacity: 1;
  4.   }
  6.   .iq-card .block-social-info{
  7.     left: auto;
  8.   }
  9. </style>
  10. <script type="text/javascript">
  11.     const UBStreamitSwiper = function(){
  12.         var program;
  13.         const container = "#content-streamit", content = (d)=>{
  14.             if(d.length == 0){
  15.                 $.urban.load.clearContent(container);
  16.                 return "";
  17.             }
  19.             var streamits = "";
  21.             const startTitle = `{{"Commence"|trans }}`, endTitle = `{{"Jusqu'au"|trans }}`;
  22.             
  23.             d.forEach(el => {
  24.                 const type = el.type ? 'm' : 'e';
  26.                 const web_movie_detail = ("{{path('web_movie_detail', {'_1_':'_2_'})}}").replace('_1_',type).replace('_2_',el.media.id);
  28.                 streamits += `<li class="swiper-slide">
  29.                     <div class="iq-card card-hover">
  30.                         <div class="block-images position-relative w-100">
  31.                             <div class="img-box w-100">
  32.                             <a href="javascript:void(0);" class="position-absolute top-0 bottom-0 start-0 end-0 row px-2 pb-5">
  33.                                 <span class="col-12 mt-2"><small class="badge bg-`+el.status.label+`">`+el.status.name+`</small></span>
  34.                             </a>
  35.                             <img src="{{asset('`+el.media.cover+`', 'covers')}}" alt="movie-card" class="img-fluid object-cover w-100 d-block border-0">
  36.                             </div>
  37.                             <div class="card-description with-transition">
  38.                                 <div class="cart-content">
  39.                                     <div class="content-left w-100">
  40.                                         <h5 class="iq-title text-capitalize mb-0">
  41.                                             <a href="`+web_movie_detail+`">`+el.media.serie+`</a>
  42.                                         </h5>
  43.                                         <small>`+composeEpisodeName(el.media.nseason, el.media.nepisode)+` `+el.media.episode+`</small>
  44.                                         <!--div class="movie-time d-flex align-items-center my-2">
  45.                                             <span class="movie-time-text font-normal">`+minutesToHours(el.duration)+`</span>
  46.                                         </div-->
  47.                                         <div class="small text-end w-100">`+(el.status.code == program.code ? startTitle : endTitle)+`</div>
  48.                                         <div class="small text-end text-primary fw-bold w-100">`+(el.status.code == program.code ? viewTime(el.startAt) : viewTime(el.endAt))+`</div>
  49.                                     </div>
  50.                                     {# <div class="watchlist">
  51.                                     <a class="watch-list-not" href="playlist.html">
  52.                                         <svg width="10" height="10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-10">
  53.                                         <path d="M12 4V20M20 12H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
  54.                                         </svg>
  55.                                         <span class="watchlist-label"> Watchlist </span>
  56.                                     </a>
  57.                                     </div> #}
  58.                                 </div>
  59.                             </div>
  60.                             <div class="block-social-info align-items-center">
  61.                                 <!--ul class="p-0 m-0 d-flex gap-2 music-play-lists">
  62.                                     <li class="share position-relative d-flex align-items-center text-center mb-0">
  63.                                     <span class="w-100 h-100 d-inline-block bg-transparent">
  64.                                         <i class="fas fa-share-alt"></i>
  65.                                     </span>
  66.                                     <div class="share-wrapper">
  67.                                         <div class="share-boxs d-inline-block">
  68.                                         <svg width="15" height="40" class="share-shape" viewBox="0 0 15 40" fill="none" xmlns="http://www.w3.org/2000/svg">
  69.                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M14.8842 40C6.82983 37.2868 1 29.3582 1 20C1 10.6418 6.82983 2.71323 14.8842 0H0V40H14.8842Z" fill="#191919"></path>
  70.                                         </svg>
  71.                                         <div class=" overflow-hidden">
  72.                                             <a href="" target="_blank">
  73.                                             <i class="fab fa-facebook-f"></i>
  74.                                             </a>
  75.                                             <a href="" target="_blank">
  76.                                             <i class="fab fa-twitter"></i>
  77.                                             </a>
  78.                                             <a href="#">
  79.                                             <i class="fas fa-link"></i>
  80.                                             </a>
  81.                                         </div>
  82.                                         </div>
  83.                                     </div>
  84.                                     </li>
  85.                                     <li class="share position-relative d-flex align-items-center text-center mb-0">
  86.                                     <span class="w-100 h-100 d-inline-block bg-transparent">
  87.                                         <i class="fa-regular fa-heart"></i>
  88.                                     </span>
  89.                                     <div class="share-wrapper">
  90.                                         <div class="share-boxs d-inline-block">
  91.                                         <svg width="15" height="40" class="share-shape" viewBox="0 0 15 40" fill="none" xmlns="http://www.w3.org/2000/svg">
  92.                                             <path fill-rule="evenodd" clip-rule="evenodd" d="M14.8842 40C6.82983 37.2868 1 29.3582 1 20C1 10.6418 6.82983 2.71323 14.8842 0H0V40H14.8842Z" fill="#191919"></path>
  93.                                         </svg>
  94.                                         <div class=" overflow-hidden">
  95.                                             <span>+51</span>
  96.                                         </div>
  97.                                         </div>
  98.                                     </div>
  99.                                     </li>
  100.                                 </ul-->
  101.                                 <div class="iq-button">
  102.                                     <a href="`+web_movie_detail+`" class="btn text-uppercase position-relative rounded-circle">
  103.                                     <i class="fa-solid fa-play ms-0"></i>
  104.                                     </a>
  105.                                 </div>
  106.                             </div>
  107.                         </div>
  108.                     </div>
  109.                 </li>`;
  110.             });
  112.             return `<div class="container-fluid">
  113.                 <div class="overflow-hidden">
  114.                 <div class="d-flex align-items-center justify-content-between px-md-3 px-1 my-4">
  115.                 <h5 class="main-title text-capitalize mb-0">{{"Films et séries en diffusion"|trans}}</h5>
  116.                 <a href="{{path('web_live')}}" class="text-primary iq-view-all text-decoration-none flex-none">{{"Voir plus"|trans}}</a>
  117.                 </div>
  118.                 <div class="card-style-slider">
  119.                     <div class="position-relative swiper swiper-card" data-slide="5" data-laptop="5" data-tab="4" data-mobile="2" data-mobile-sm="1" data-autoplay="false" data-loop="true" data-navigation="true" data-pagination="true">
  120.                     <ul class="p-0 swiper-wrapper m-0  list-inline">
  121.                     `+streamits+`
  122.                     </ul>
  123.                     <div class="swiper-button swiper-button-next"></div>
  124.                     <div class="swiper-button swiper-button-prev"></div>
  125.                     </div>
  126.                 </div>
  127.                 </div>
  128.             </div>`;
  129.         }
  131.         return {
  132.             init: ()=>{
  133.                 $.urban.load.ajax(container, "{{path('app_broadcast_index')}}", (r)=>{
  134.                     program = r.program;
  135.                     
  136.                     return content(r.data);
  137.                 }, {start:0, length:10, order:[{column:'startAt',dir:'1'}]});
  138.             }
  139.         }
  140.     }();
  142.     UBStreamitSwiper.init();
  143. </script>