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

  1. <script type="text/javascript">
  2.     const UBMovies = function(){
  3.         const container = "#content-movies", title_movie = (k, d, i)=>{
  4.             // const active = k==0?'show active':'';
  5.             return `<div class="swiper-slide swiper-bg">
  6.                 <div class="block-images position-relative ">
  7.                     <div class="img-box">
  8.                         <img src="`+("{{asset('_1_', 'covers')}}").replace("_1_", d.cover)+`" class="img-fluid" alt="`+d.title+`" loading="lazy">                      
  9.                         <div class="block-description ps-3">
  10.                             <h6 class="iq-title fw-500 mb-0">`+d.title+`</h6>
  11.                             <span class="fs-12">`+minutesToHours(d.duration)+`</span>
  12.                         </div>
  13.                     </div>
  14.                 </div>
  15.             </div>`;
  16.         }, genres_movies = (k, d, i)=>{
  17.             return `<li class="position-relative text-capitalize font-size-14 letter-spacing-1">
  18.                 <a href="`+("{{path('web_view_all_movie', {'g':'_1_'})}}").replace('_1_',d.id)+`" class="text-decoration-none">`+d.text+`</a>
  19.             </li>`;
  20.         }, body_movie = (k, d)=>{
  21.             var gens = "";
  23.             $.each(d.genre, function(key, val){
  24.                 gens += genres_movies(key, val, d.id);
  25.             });
  27.             return `<div class="swiper-slide p-0">
  28.                 <div class="slider--image block-images">
  29.                     <img src="`+("{{asset('_1_', 'covers')}}").replace("_1_", d.cover)+`" loading="lazy" alt="`+d.title+`" />
  30.                 </div>
  31.                 <div class="description">
  32.                     <div class="row align-items-center h-100">
  33.                     <div class="col-lg-6 col-md-12">
  34.                         <div class="slider-content">
  35.                         <div class="d-flex align-items-center RightAnimate mb-3">
  36.                             <ul class="p-0 mb-0 list-inline d-flex flex-wrap align-items-center movie-tag">
  37.                             `+gens+`
  38.                             </ul>
  39.                         </div>
  40.                         <h1 class="texture-text big-font letter-spacing-1 line-count-1 text-capitalize RightAnimate-two"> `+d.title+` </h1>
  41.                         <p class="line-count-3 RightAnimate-two">`+d.description+`</p>
  42.                         <div class="d-flex flex-wrap align-items-center gap-3 RightAnimate-three">
  43.                             <div class="slider-ratting d-flex align-items-center">
  44.                             <ul class="ratting-start p-0 m-0 list-inline text-warning d-flex align-items-center justify-content-left">
  45.                                 <li>
  46.                                 <i class="fa fa-star" aria-hidden="true"></i>
  47.                                 </li>
  48.                             </ul>
  49.                             <span class="text-white ms-2 font-size-14 fw-500">`+d.rating+`</span>
  50.                             </div>
  51.                             <span class="font-size-14 fw-500">`+minutesToHours(d.duration)+`</span>
  52.                         </div>
  53.                         </div>
  54.                         <div class="RightAnimate-four">
  55.                         <div class="iq-button">
  56.                             <a href="`+("{{path('web_movie_detail', {'m':'_1_'})}}").replace("_1_",d.id)+`" class="btn text-uppercase position-relative">
  57.                                 <span class="button-text">{{"Regarder"|trans}}</span>
  58.                                 <i class="fa-solid fa-play"></i>
  59.                             </a>
  60.                         </div>
  61.                         </div>
  62.                     </div>
  63.                     </div>
  64.                 </div>
  65.             </div>`;
  66.         }, movies = (d)=>{
  67.             if(d.length == 0){
  68.                 $.urban.load.clearContent(container);
  69.                 return "";
  70.             }
  72.             var titles = "", tabs = "";
  74.             $.each(d, function(key, val){
  75.                 titles += title_movie(key, val, d.id);
  76.                 tabs += body_movie(key, val, d.id);
  77.             });
  79.             return `<div class="position-relative slider-bg d-flex justify-content-end">
  80.                 <div class="position-relative my-auto">
  81.                 <div class="horizontal_thumb_slider" data-swiper="slider-thumbs-ott">
  82.                     <div class="banner-thumb-slider-nav">
  83.                     <div class="swiper-container " data-swiper="slider-thumbs-inner-ott">
  84.                         <div class="swiper-wrapper">
  85.                         `+titles+`
  86.                         </div>
  87.                     </div>
  88.                     <div class="slider-prev swiper-button">
  89.                         <i class="iconly-Arrow-Left-2 icli"></i>
  90.                     </div>
  91.                     <div class="slider-next swiper-button">
  92.                         <i class="iconly-Arrow-Right-2 icli"></i>
  93.                     </div>
  94.                     </div>
  95.                 </div>
  96.                 </div>
  97.                 <div class="slider-images" data-swiper="slider-images-ott">
  98.                 <div class="swiper-container" data-swiper="slider-images-inner-ott">
  99.                     <div class="swiper-wrapper m-0">
  100.                     `+tabs+`
  101.                     </div>
  102.                 </div>
  103.                 </div>
  104.             </div>`;
  105.         };     
  107.         return {
  108.             init: ()=>{
  109.                 $.urban.load.ajax(container, "{{path('app_get_list_movie')}}", (r)=>{
  110.                     return movies(r.aaData);
  111.                 }, {start:0, length:5, order:[{column:'rating',dir:'-1'}]});
  112.             }
  113.         }
  114.     }(),
  115.     UBTopTen = function(){
  116.         const container = "#content-topten", body_topten = (k, d)=>{
  117.             const url = d.type ? ("{{path('web_movie_detail', {'m':'_1_'})}}").replace("_1_",d.id) : ("{{path('web_series_detail', {'s':'_1_'})}}").replace("_1_",d.id);
  118.             
  119.             return `<li class="swiper-slide" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="`+d.title+`" title="`+d.title+`">
  120.                 <div class="iq-top-ten-block">
  121.                     <div class="block-image position-relative">
  122.                         <div class="img-box">
  123.                             <a class="overly-images" href="`+url+`">
  124.                                 <img src="`+("{{asset('_1_', 'covers')}}").replace("_1_",d.cover)+`" alt="`+d.title+`" class="img-fluid object-cover topimg">
  125.                             </a>
  126.                             <span class="top-ten-numbers texture-text">`+(k+1)+`</span>
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.             </li>`;
  131.         }, topten = (d)=>{
  132.             if(d.length == 0){
  133.                 $.urban.load.clearContent(container);
  134.                 return "";
  135.             }
  137.             var tabs = "";
  139.             $.each(d, function(key, val){
  140.                 tabs += body_topten(key, val, d.id);
  141.             });
  143.             return `<div class="container-fluid  pt-4">
  144.                 <section class="overflow-hidden">
  145.                     <div class="d-flex align-items-center justify-content-between px-md-3 px-1 mb-4">
  146.                         <h5 class="main-title text-capitalize mb-0">{{'Les dix meilleurs films à voir'|trans}}</h5>
  147.                         {# <a href="?order=rate" class="text-primary iq-view-all text-decoration-none flex-none"></a> #}
  148.                     </div>
  149.                     <div class="position-relative swiper swiper-card iq-top-ten-block-slider" data-slide="6" data-laptop="6" data-tab="3" data-mobile="2" data-mobile-sm="2" data-autoplay="false" data-loop="false" data-navigation="true" data-pagination="true">
  150.                         <ul class="p-0 swiper-wrapper mb-5 list-inline">
  151.                         `+tabs+`
  152.                         </ul>
  153.                         <div class="swiper-button swiper-button-next"></div>
  154.                         <div class="swiper-button swiper-button-prev"></div>
  155.                     </div>
  156.                 </section>
  157.             </div>`;
  158.         };
  160.        return {
  161.             init: ()=>{
  162.                 $.urban.load.ajax(container, "{{path('app_get_list_movie')}}", (r)=>{
  163.                     return topten(r.aaData);
  164.                 }, {notype:true, start:0, length:10, order:[{column:'rating',dir:'-1'}]});
  165.             }
  166.         } 
  167.     }(),
  168.     UBSeries = function(){
  169.         const container = "#content-series", title_season = (k, d, i)=>{
  170.             const active = k==0?'show active':'';
  171.             return `<li class="nav-item" role="presentation">
  172.             <button class="nav-link `+active+`" data-bs-toggle="pill" data-bs-target="#pills-`+i+`-`+d.id+`" type="button" role="tab" aria-selected="false">`+("{{'Saison _1_'|trans}}").replace("_1_", d.number)+`</button>
  173.             </li>`;
  174.         }, episode_season = (k, d)=>{
  175.             return `<li class="d-flex align-items-center gap-3">
  176.             <div class="image-box flex-shrink-0">
  177.             <img src="`+("{{asset('_1_', 'covers')}}").replace("_1_",d.cover)+`" alt="image-icon" class="img-fluid rounded">
  178.             </div>
  179.             <div class="image-details">
  180.                 <a href="`+("{{path('web_movie_detail', {'e':'_1_'})}}").replace('_1_', d.id)+`">
  181.                     <h6 class="mb-1 text-capitalize"><span class="text-primary">E`+d.number+`</span> - `+d.name+`</h6>
  182.                 </a>
  183.             <small>`+d.duration+` minutes</small>
  184.             </div>
  185.         </li>`;
  186.         }, episodes_season = (d)=>{
  187.             var episodes = "";
  189.             $.each(d, function(key, val){
  190.                 episodes += episode_season(key, val);
  191.             });
  193.             return episodes;
  194.         }, panel_season = (k, d, i)=>{
  195.             const active = k==0?'show active':'';
  196.             return `<div class="tab-pane fade `+active+`" id="pills-`+i+`-`+d.id+`" role="tabpanel" tabindex="0">
  197.             <ul class="list-inline m-0 p-0">
  198.             `+episodes_season(d.episodes)+`
  199.             </ul>
  200.         </div>`;
  201.         }, seasons_serie = (d)=>{
  202.             var titles = "", tabs = "";
  204.             $.each(d, function(key, val){
  205.                 titles += title_season(key, val, d.id);
  206.                 tabs += panel_season(key, val, d.id);
  207.             });
  209.             return `<div class="tab-bottom-bordered border-0">
  210.                     <ul class="nav nav-tabs nav-pills mb-3 overflow-x-scroll"  role="tablist">
  211.                     `+titles+`
  212.                 </ul>
  213.             </div>
  214.             <div class="tab-content iq-tab-fade-up">
  215.             `+tabs+`
  216.             </div>`;
  217.         }, one = (k, d)=>{
  218.             return `<li class="swiper-slide tab-slider-banner p-0">
  219.                 <div class="tab-slider-banner-images">
  220.                     <img src="`+("{{asset('_1_', 'covers')}}").replace("_1_", d.cover)+`" alt="tab-slider-background">
  221.                 </div>
  222.                 <div class="block-images position-relative w-100">
  223.                     <div class="container-fluid">
  224.                     <div class="row align-items-center min-vh-100 h-100 my-4">
  225.                         <div class="col-md-5 col-lg-5 col-xxl-5">
  226.                             <div class="tab-left-details">
  227.                                 <div class="d-flex align-items-center gap-3 mb-4">
  228.                                 
  229.                                 </div>
  230.                                 <h1 class="mb-2 fw-500 text-capitalize texture-text">`+d.name+`</h1>
  231.                                 <p class="mb-0 font-size-14 line-count-2">`+d.description+`</p>
  232.                                 <ul class="d-flex align-items-center list-inline gap-2 movie-tag p-0 mt-3 mb-40">
  233.                                     <li class="font-size-18">`+d.release+`</li>
  234.                                     <li class="font-size-18">`+("{{'_1_ saison(s)'|trans}}").replace("_1_", d.seasons.length)+`</li>
  235.                                 </ul>
  236.                                 <div class="iq-button">
  237.                                     <a href="`+("{{path('web_series_detail', {'s':'_1_'})}}").replace('_1_', d.id)+`" class="btn text-uppercase position-relative">
  238.                                         <span class="button-text">{{"Voir plus"|trans}}</span>
  239.                                         <i class="fa-solid fa-play"></i>
  240.                                     </a>
  241.                                 </div>
  242.                             </div>
  243.                         </div>
  244.                         <div class="col-md-1 col-lg-2 col-xxl-3">
  245.                         </div>
  246.                         <div class="col-md-6 col-lg-5 col-xxl-4 mt-5 mt-md-0">
  247.                             <div class="tab-block">
  248.                                 `+seasons_serie(d.seasons)+`
  249.                             </div>
  250.                         </div>
  251.                     </div>
  252.                     </div>
  253.                 </div>
  254.             </li>`;
  255.         }, list = (d)=>{
  256.             var series = ``;
  258.             $.each(d, function(key, val){
  259.                 series += one(key, val);
  260.             });
  262.             return series;
  263.         }, series = (d)=>{
  264.             if(d.length == 0){
  265.                 $.urban.load.clearContent(container);
  266.                 return "";
  267.             }
  269.             return `<div class="position-relative swiper swiper-card" data-slide="1" data-laptop="1" data-tab="1" data-mobile="1" data-mobile-sm="1" data-autoplay="true" data-loop="false" data-navigation="true" data-pagination="true" data-effect="fade">
  270.                 <ul class="p-0 swiper-wrapper m-0 list-inline">
  271.                     `+list(d)+`
  272.                 </ul>
  273.                 <div class="joint-arrows">
  274.                     <div class="swiper-button swiper-button-next"></div>
  275.                     <div class="swiper-button swiper-button-prev"></div>
  276.                 </div>
  277.             </div>`;
  278.         };
  280.         return {
  281.             init: ()=>{
  282.                 $.urban.load.ajax(container, "{{path('app_series_index')}}", (r)=>{
  283.                     return series(r.data);
  284.                 }, {start:0, length:5, order:[{column:'rating',dir:'-1'}]});
  285.             }
  286.         }
  287.     }();
  289.     UBMovies.init();
  290.     UBTopTen.init();
  291.     UBSeries.init();
  292. </script>