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

  1. <script type="text/javascript">
  2.     const UBStreamitsPage = function(){
  3.         var program;
  4.         const container = "#content-streamit", header = (swipe)=>{
  5.             if(swipe == ""){
  6.                 $("#content-current").removeClass("dynamik");
  7.                 $("#content-current").addClass("text-center").html("{{'Aucune diffusion en cours'|trans}}");
  8.                 $("#content-streamit").addClass("section-padding-top");
  9.             }else{
  10.                 $("#content-current").html(`<div class="movie-banner">
  11.                     <div  class="swiper swiper-banner-container iq-rtl-direction" data-swiper="banner-detail-slider">
  12.                         <div class="swiper-wrapper">`+swipe+`</div>
  13.                         <div class="swiper-banner-button-next">
  14.                             <i class="iconly-Arrow-Right-2 icli arrow-icon"></i>
  15.                         </div>
  16.                         <div class="swiper-banner-button-prev">
  17.                             <i class="iconly-Arrow-Left-2 icli arrow-icon"></i>
  18.                         </div> 
  19.                     </div>
  20.                 </div>`);
  21.             }
  22.         }, content = (d)=>{
  23.             var streamits = "", streamit_current = "", current = 0;
  25.             const startTitle = `{{"Commence"|trans }}`, endTitle = `{{"Jusqu'au"|trans }}`;
  26.             
  27.             d.forEach(el => {
  28.                 const type = el.type ? 'm' : 'e';
  30.                 const web_movie_detail = ("{{path('web_movie_detail', {'_1_':'_2_'})}}").replace('_1_',type).replace('_2_',el.media.id);
  32.                 streamits += `<div class="col mb-4">
  33.                     <div class="iq-card card-hover">
  34.                         <div class="block-images position-relative w-100">
  35.                             <div class="img-box w-100">
  36.                                 <a href="javascript:void(0);" class="position-absolute top-0 bottom-0 start-0 end-0 row px-2 pb-5">
  37.                                     <span class="col-12 mt-2"><small class="badge bg-`+el.status.label+`">`+el.status.name+`</small></span>
  38.                                 </a>
  39.                                 <img src="{{asset('`+el.media.cover+`', 'covers')}}" alt="movie-card" class="img-fluid object-cover w-100 d-block border-0">
  40.                             </div>
  41.                             <div class="card-description with-transition">
  42.                                 <div class="cart-content">
  43.                                     <div class="content-left w-100">
  44.                                         <h5 class="iq-title text-capitalize mb-0">
  45.                                             <a href="`+web_movie_detail+`">`+el.media.serie+`</a>
  46.                                         </h5>
  47.                                         <small>`+composeEpisodeName(el.media.nseason, el.media.nepisode)+` `+el.media.episode+`</small>
  48.                                         <!--div class="movie-time d-flex align-items-center my-2">
  49.                                             <span class="movie-time-text font-normal">`+minutesToHours(el.duration)+`</span>
  50.                                         </div-->
  51.                                         <div class="small text-end w-100">`+(el.status.code == program.code ? startTitle : endTitle)+`</div>
  52.                                         <div class="small text-end text-primary fw-bold w-100">`+(el.status.code == program.code ? viewTime(el.startAt) : viewTime(el.endAt))+`</div>
  53.                                     </div>
  54.                                     {# <div class="watchlist">
  55.                                         <a class="watch-list-not" href="#">
  56.                                             <svg width="10" height="10" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-10">
  57.                                             <path d="M12 4V20M20 12H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
  58.                                             </svg>
  59.                                             <span class="watchlist-label">kklklk</span>
  60.                                         </a>
  61.                                     </div> #}
  62.                                 </div>
  63.                             </div>
  64.                             <div class="block-social-info align-items-center">
  65.                                 <!--ul class="p-0 m-0 d-flex gap-2 music-play-lists">
  66.                                     <li class="share position-relative d-flex align-items-center text-center mb-0">
  67.                                     <span class="w-100 h-100 d-inline-block bg-transparent">
  68.                                         <i class="fas fa-share-alt"></i>
  69.                                     </span>
  70.                                     <div class="share-wrapper">
  71.                                         <div class="share-boxs d-inline-block">
  72.                                         <svg width="15" height="40" class="share-shape" viewBox="0 0 15 40" fill="none" xmlns="http://www.w3.org/2000/svg">
  73.                                             <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>
  74.                                         </svg>
  75.                                         <div class=" overflow-hidden">
  76.                                             <a href="" target="_blank">
  77.                                             <i class="fab fa-facebook-f"></i>
  78.                                             </a>
  79.                                             <a href="" target="_blank">
  80.                                             <i class="fab fa-twitter"></i>
  81.                                             </a>
  82.                                             <a href="#">
  83.                                             <i class="fas fa-link"></i>
  84.                                             </a>
  85.                                         </div>
  86.                                         </div>
  87.                                     </div>
  88.                                     </li>
  89.                                     <li class="share position-relative d-flex align-items-center text-center mb-0">
  90.                                     <span class="w-100 h-100 d-inline-block bg-transparent">
  91.                                         <i class="fa-regular fa-heart"></i>
  92.                                     </span>
  93.                                     <div class="share-wrapper">
  94.                                         <div class="share-boxs d-inline-block">
  95.                                         <svg width="15" height="40" class="share-shape" viewBox="0 0 15 40" fill="none" xmlns="http://www.w3.org/2000/svg">
  96.                                             <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>
  97.                                         </svg>
  98.                                         <div class=" overflow-hidden">
  99.                                             <span>+51</span>
  100.                                         </div>
  101.                                         </div>
  102.                                     </div>
  103.                                     </li>
  104.                                 </ul-->
  105.                                 <div class="iq-button">
  106.                                     <a href="`+web_movie_detail+`" class="btn text-uppercase position-relative rounded-circle">
  107.                                     <i class="fa-solid fa-play ms-0"></i>
  108.                                     </a>
  109.                                 </div>
  110.                             </div>
  111.                         </div>
  112.                     </div>
  113.                 </div>`;
  115.                 if(el.current){
  116.                     current++;
  117.                     const title = el.media.nepisode ? `<h1 class="texture-text big-font line-count-1 text-uppercase RightAnimate-two" data-animation-in="fadeInLeft" data-delay-in="0.6">`+composeEpisodeName(el.media.nseason, el.media.nepisode)+` `+el.media.episode+`</h1>
  118.                     <h3 class="texture-text big-font line-count-1 text-uppercase RightAnimate-two" data-animation-in="fadeInLeft" data-delay-in="0.6">`+el.media.serie+`</h3>` : `<h1 class="texture-text big-font line-count-1 text-uppercase RightAnimate-two" data-animation-in="fadeInLeft" data-delay-in="0.6">`+el.media.serie+`</h1>`;
  120.                     streamit_current += `<div class="swiper-slide video-`+current+` p-0">
  121.                         <div class="movie-banner-image">
  122.                             <img src="{{asset('`+el.media.cover+`', 'covers')}}" alt="`+el.media.serie+`">
  123.                         </div>
  124.                         <div class="shows-content h-100">
  125.                             <div class="row align-items-center h-100">
  126.                             <div class="col-lg-7 col-md-12">
  127.                                 `+title+`
  128.                                 <div class="flex-wrap align-items-center fadeInLeft animated" data-animation-in="fadeInLeft"
  129.                                 style="opacity: 1;">
  130.                                 <div class="slider-ratting d-flex align-items-center gap-3">
  131.                                     <ul class="ratting-start p-0 m-0 list-inline text-primary d-flex align-items-center justify-content-left">
  132.                                     `+afficherEtoiles(el.rating)+`
  133.                                     </ul>
  134.                                 </div>
  135.                                 <div class="d-flex flex-wrap align-items-center gap-3 movie-banner-time">
  136.                                     <span class="font-size-6">
  137.                                     <i class="fa-solid fa-circle"></i>
  138.                                     </span>
  139.                                     <span class="trending-time font-normal">
  140.                                     `+minutesToHours(el.duration)+`
  141.                                     </span>
  142.                                     <span class="font-size-6">
  143.                                     <i class="fa-solid fa-circle"></i>
  144.                                     </span>
  145.                                     <span class="trending-year font-normal">
  146.                                     `+el.release+`
  147.                                     </span>
  148.                                 </div>
  149.                                 <p class="movie-banner-text line-count-3" data-animation-in="fadeInUp" data-delay-in="1.2">
  150.                                     `+el.description+`
  151.                                 </p>
  152.                                 </div>
  153.                                 <div class="iq-button" data-animation-in="fadeInUp" data-delay-in="1.2">
  154.                                 <a href="`+web_movie_detail+`" class="btn text-uppercase position-relative">
  155.                                     <span class="button-text">{{"Regarder"|trans}}</span>
  156.                                     <i class="fa-solid fa-play"></i>
  157.                                 </a>
  158.                                 </div>
  159.                             </div>
  160.                             <div class="col-lg-5 col-md-12 trailor-video iq-slider d-none d-lg-block position-relative">
  161.                                 <a data-fslightbox="html5-video" href="`+el.trailerUrl+`" class="video-open playbtn text-decoration-none" tabindex="0">
  162.                                 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
  163.                                     y="0px" width="80px" height="80px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
  164.                                     xml:space="preserve">
  165.                                     <polygon class="triangle" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"
  166.                                     stroke-miterlimit="10" points="73.5,62.5 148.5,105.8 73.5,149.1 "></polygon>
  167.                                     <circle class="circle" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"
  168.                                     stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"></circle>
  169.                                 </svg>
  170.                                 <span class="w-trailor text-uppercase">{{'Bande annonce'|trans}}</span>
  171.                                 </a>
  172.                             </div>
  173.                             </div>
  174.                         </div>
  175.                     </div>`;
  176.                 }
  177.             });
  179.             header(streamit_current);
  181.             return `<div class="container-fluid">       
  182.                 <div class="card-style-grid">
  183.                     <div class="row row-cols-xl-5 row-cols-md-4 row-cols-2">`+streamits+`</div>
  184.                 </div>
  185.             </div>`;
  186.         }
  188.         return {
  189.             init: ()=>{
  190.                 $.urban.load.ajax(container, "{{path('app_broadcast_index')}}", (r)=>{
  191.                     program = r.program;
  192.                     return content(r.data);
  193.                 }, {order:[{column:'startAt',dir:'1'}]});
  194.             }
  195.         }
  196.     }();
  198.     UBStreamitsPage.init();
  199. </script>