var/cache/dev/twig/24/24c09048b7deffa5006d405c0f93434e.php line 48

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\SandboxExtension;
  7. use Twig\Markup;
  8. use Twig\Sandbox\SecurityError;
  9. use Twig\Sandbox\SecurityNotAllowedTagError;
  10. use Twig\Sandbox\SecurityNotAllowedFilterError;
  11. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  12. use Twig\Source;
  13. use Twig\Template;
  15. /* movie/recommendations.html.twig */
  16. class __TwigTemplate_81bd8fe55cc37dc63af6bcce50267dc7 extends Template
  17. {
  18.     private $source;
  19.     private $macros = [];
  21.     public function __construct(Environment $env)
  22.     {
  23.         parent::__construct($env);
  25.         $this->source = $this->getSourceContext();
  27.         $this->blocks = [
  28.             'recommendation' => [$this, 'block_recommendation'],
  29.         ];
  30.     }
  32.     protected function doGetParent(array $context)
  33.     {
  34.         // line 1
  35.         return "layouts/layout.html.twig";
  36.     }
  38.     protected function doDisplay(array $context, array $blocks = [])
  39.     {
  40.         $macros = $this->macros;
  41.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  42.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "movie/recommendations.html.twig"));
  44.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  45.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "movie/recommendations.html.twig"));
  47.         $this->parent = $this->loadTemplate("layouts/layout.html.twig", "movie/recommendations.html.twig", 1);
  48.         $this->parent->display($context, array_merge($this->blocks, $blocks));
  49.         
  50.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  52.         
  53.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  55.     }
  57.     // line 2
  58.     public function block_recommendation($context, array $blocks = [])
  59.     {
  60.         $macros = $this->macros;
  61.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  62.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "recommendation"));
  64.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  65.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "recommendation"));
  67.         // line 3
  68.         echo "    <style>
  69.         body, html {
  70.             margin: 0;
  71.             padding: 0;
  72.             font-family: 'Arial', sans-serif;
  73.             background-color: #141414;
  74.             color: white;
  75.             height: 100%; /* Full height */
  76.             overflow: auto; /* Hide overflow */
  77.         }
  78.         .deluxe-header {
  79.             background-color: #000;
  80.             padding: 20px;
  81.             color: white;
  82.             text-align: center;
  83.             font-size: 24px;
  84.             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  85.         }
  86.         .deluxe-hero {
  87.             position: relative;
  88.             width: 100%;
  89.             height: 66vh; /* Adjusted height */
  90.             overflow: hidden; /* Hide overflow */
  91.         }
  92.         .deluxe-hero iframe {
  93.             position: absolute;
  94.             top: -160px; /* Adjust top to cut off borders */
  95.             left: 0;
  96.             width: 120%;
  97.             height: calc(100% + 260px); /* Increase height to cut off borders */
  98.             border: none; /* Remove any border */
  99.         }
  100.         .deluxe-overlay {
  101.             position: absolute;
  102.             bottom: 0%; /* Align with the bottom of the video */
  103.             right: 0.0%;
  104.             width: 30%; /* Adjust width as needed */
  105.             height: 20vh; /* Adjust height to match video bottom */
  106.             background: rgba(0, 0, 0, 0.93);
  107.             color: white;
  108.             padding: 20px;
  109.             display: flex;
  110.             align-items: right;
  111.             justify-content: right;
  112.             clip-path: polygon(100% 100%, 0 100%, 100% 0); /* Triangle cut */
  113.             animation: slideInRight 3s ease-out forwards; /* Animation */
  114.             z-index: 1000; /* High z-index to ensure visibility on top */
  115.         }
  117.         .deluxe-overlay-link
  118.         {
  119.             margin-top:100px;
  120.             color: white; /* Ensures the link is white */
  121.             text-decoration: none; /* Removes underline from the link */
  122.             font-size: 22px; /* Adjust size as needed */
  123.             font-weight: bold; /* Makes the text bold */
  124.             display: block; /* Ensures the link fills the container for better clickability */
  125.             text-align: right; /* Centers the text within the link */
  127.         }
  129.         .deluxe-link {
  130.             color: white; /* Ensures the link is white */
  131.             text-decoration: none; /* Removes underline from the link */
  132.             font-size: 18px; /* Adjust size as needed */
  133.             font-weight: bold; /* Makes the text bold */
  134.             display: block; /* Ensures the link fills the container for better clickability */
  135.             text-align: center; /* Centers the text within the link */
  136.         }
  138.         .deluxe-overlay-left {
  139.             position: absolute;
  140.             bottom: 0%; /* Align with the bottom of the video */
  141.             left: 0.0%;
  142.             width: 25%; /* Adjust width as needed */
  143.             height: 100%; /* Adjust height to match video bottom */
  144.             color: white;
  145.             padding: 20px;
  146.             display: flex;
  147.             align-items: right;
  148.             justify-content: right;
  149.             animation: slideIn 3s ease-out forwards; /* Animation */
  150.             z-index: 1000; /* High z-index to ensure visibility on top */
  151.             background: rgb(0,0,0,1);
  152.             color: white; /* Ensures the link is white */
  153.             text-decoration: none; /* Removes underline from the link */
  154.             font-size: 18px; /* Adjust size as needed */
  155.             font-weight: bold; /* Makes the text bold */
  156.             display: block; /* Ensures the link fills the container for better clickability */
  157.             text-align: center; /* Centers the text within the link */
  158.         }
  160.         @keyframes slideIn {
  161.             from {
  162.                 transform: translateX(-400%);
  163.             }
  164.             to {
  165.                 transform: translateX(0%);
  166.             }
  167.         }
  169.          @keyframes slideInRight {
  170.             from {
  171.                 transform: translateX(400%);
  172.             }
  173.             to {
  174.                 transform: translateX(0%);
  175.             }
  176.         }
  177.         .deluxe-content {
  178.             padding: 20px;
  179.             text-align: center;
  180.         }
  181.         .deluxe-movie-grid {
  182.             width: 100%;
  183.             padding: 20px;
  184.             background: rgba(0, 0, 0, 0.7);
  185.             display: flex;
  186.             flex-wrap: wrap;
  187.             justify-content: space-around;
  188.             margin-bottom: 20px;
  189.         }
  191.         .deluxe-movie-left {
  192.             width: 250px;
  193.             margin: 15px 2px;
  194.             box-sizing: border-box;
  195.             transition: transform 0.3s ease;
  196.             cursor: pointer;
  197.             z-index: 10000;
  198.         }
  200.         .deluxe-movie-left img {
  201.             margin-left: 40px;
  202.             width: 150%;
  203.             height: auto;
  204.             display: block;
  205.         }
  207.         .deluxe-movie {
  208.             width: 11.0%;
  209.             margin: 15px 2px;
  210.             box-sizing: border-box;
  211.             transition: transform 0.3s ease;
  212.             cursor: pointer;
  213.         }
  214.         .deluxe-movie:hover {
  215.             transform: scale(1.1);
  216.         }
  217.         .deluxe-movie img {
  218.             width: 100%;
  219.             height: auto;
  220.             display: flex;
  221.             content-align: center;
  222.         }
  223.         .deluxe-movie-info {
  224.             text-align: center;
  225.             background: rgba(0, 0, 0, 0.8);
  226.             padding: 10px;
  227.             text-overflow: ellipsis;
  228.             overflow: hidden;
  229.             white-space: nowrap;
  230.         }
  231.         .deluxe-link {
  232.             text-decoration: none;
  233.             color: inherit;
  234.         }
  236.         .deluxe-link-left {
  237.             text-decoration: none;
  238.             color: inherit;
  239.         }
  240.     </style>
  241. <body>
  242. ";
  243.         // line 177
  244.         $context["skippedFirst"] = false;
  245.         // line 178
  246.         echo "    <!-- <div class=\"deluxe-header\">Deluxe Movie Showcase</div> -->
  247.    <div class=\"deluxe-hero\" id=\"deluxe-hero\">
  248.    ";
  249.         // line 180
  250.         if ((twig_get_attribute($this->env, $this->source, ($context["movies"] ?? null), "current", [], "any", true, true, false, 180) && twig_get_attribute($this->env, $this->source, (isset($context["movies"]) || array_key_exists("movies", $context) ? $context["movies"] : (function () { throw new RuntimeError('Variable "movies" does not exist.', 180, $this->source); })()), "current", [], "any", false, false, false, 180))) {
  251.             // line 181
  252.             echo "     <a class=\"deluxe-overlay-link\" href=\"/movie-detail/";
  253.             echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, (isset($context["movies"]) || array_key_exists("movies", $context) ? $context["movies"] : (function () { throw new RuntimeError('Variable "movies" does not exist.', 181, $this->source); })()), "current", [], "any", false, false, false, 181), "id", [], "any", false, false, false, 181), "html", null, true);
  254.             echo "\"> <div class=\"deluxe-overlay\" id=\"deluxe-overlay\">  ";
  255.             echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, (isset($context["movies"]) || array_key_exists("movies", $context) ? $context["movies"] : (function () { throw new RuntimeError('Variable "movies" does not exist.', 181, $this->source); })()), "current", [], "any", false, false, false, 181), "title", [], "any", false, false, false, 181), "html", null, true);
  256.             echo " <p style=\"font-size: 12px;\">More Details</p></a></div>
  257.          <div class=\"deluxe-overlay-left\"> 
  258.          <div class=\"deluxe-movie-left\">
  259.                 <a class=\"deluxe-link-left\" href=\"/movie-detail/";
  260.             // line 184
  261.             echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, (isset($context["movies"]) || array_key_exists("movies", $context) ? $context["movies"] : (function () { throw new RuntimeError('Variable "movies" does not exist.', 184, $this->source); })()), "current", [], "any", false, false, false, 184), "id", [], "any", false, false, false, 184), "html", null, true);
  262.             echo "\">
  263.                     <img src=\"";
  264.             // line 185
  265.             echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, (isset($context["movies"]) || array_key_exists("movies", $context) ? $context["movies"] : (function () { throw new RuntimeError('Variable "movies" does not exist.', 185, $this->source); })()), "current", [], "any", false, false, false, 185), "getImageURL", [], "method", false, false, false, 185), "getUrl", [], "method", false, false, false, 185), "html", null, true);
  266.             echo "\" alt=\"";
  267.             echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, (isset($context["movies"]) || array_key_exists("movies", $context) ? $context["movies"] : (function () { throw new RuntimeError('Variable "movies" does not exist.', 185, $this->source); })()), "current", [], "any", false, false, false, 185), "title", [], "any", false, false, false, 185), "html", null, true);
  268.             echo "\">
  269.                 </a>
  270.             </div></div>
  271.     <!-- YouTube video will be loaded here -->
  272.     <div id=\"youtube-player\"></div>
  273. </div>
  274.      ";
  275.         }
  276.         // line 192
  277.         echo "    <div class=\"deluxe-content\">
  278.         <h1>Recommendations</h1>
  279.         <p>Explore our curated collection of films.</p>
  280.     </div>
  281.     <div class=\"deluxe-movie-grid\">
  282.         <!-- Dynamic content will be inserted here via PHP Twig -->
  283.         ";
  284.         // line 198
  285.         $context['_parent'] = $context;
  286.         $context['_seq'] = twig_ensure_traversable((isset($context["movies"]) || array_key_exists("movies", $context) ? $context["movies"] : (function () { throw new RuntimeError('Variable "movies" does not exist.', 198, $this->source); })()));
  287.         foreach ($context['_seq'] as $context["_key"] => $context["movie"]) {
  288.             // line 199
  289.             echo "            ";
  290.             if ((isset($context["skippedFirst"]) || array_key_exists("skippedFirst", $context) ? $context["skippedFirst"] : (function () { throw new RuntimeError('Variable "skippedFirst" does not exist.', 199, $this->source); })())) {
  291.                 // line 200
  292.                 echo "            <div class=\"deluxe-movie\">
  293.                 <a class=\"deluxe-link\" href=\"/movie-detail/";
  294.                 // line 201
  295.                 echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["movie"], "id", [], "any", false, false, false, 201), "html", null, true);
  296.                 echo "\">
  297.                     <img src=\"";
  298.                 // line 202
  299.                 echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, twig_get_attribute($this->env, $this->source, $context["movie"], "getImageURL", [], "method", false, false, false, 202), "getUrl", [], "method", false, false, false, 202), "html", null, true);
  300.                 echo "\" alt=\"";
  301.                 echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["movie"], "title", [], "any", false, false, false, 202), "html", null, true);
  302.                 echo "\">
  303.                     <div class=\"deluxe-movie-info\">";
  304.                 // line 203
  305.                 echo twig_escape_filter($this->env, twig_get_attribute($this->env, $this->source, $context["movie"], "title", [], "any", false, false, false, 203), "html", null, true);
  306.                 echo "</div>
  307.                 </a>
  308.             </div>
  309.             ";
  310.             }
  311.             // line 207
  312.             echo "            ";
  313.             $context["skippedFirst"] = true;
  314.             // line 208
  315.             echo "            
  316.         ";
  317.         }
  318.         $_parent = $context['_parent'];
  319.         unset($context['_seq'], $context['_iterated'], $context['_key'], $context['movie'], $context['_parent'], $context['loop']);
  320.         $context = array_intersect_key($context, $_parent) + $_parent;
  321.         // line 210
  322.         echo "    </div>
  324.     <!-- Load the YouTube IFrame Player API -->
  325.     <script src=\"https://www.youtube.com/iframe_api\"></script>
  326.     <script>
  327.         function onDeluxePlayerReady(event) {
  328.             console.log(\"Player ready\");
  329.             event.target.unMute();
  330.             event.target.setVolume(20);
  331.             event.target.playVideo();
  332.             setTimeout(function() {
  333.                 var overlay = document.getElementById('deluxe-overlay');
  334.                 if (overlay) {
  335.                     overlay.style.display = 'block';
  336.                     console.log(\"Overlay added\");
  337.                 } else {
  338.                     console.error('Overlay element not found');
  339.                 }
  340.             }, 10000); // Show overlay after 10 seconds
  341.         }
  343.         function onDeluxePlayerStateChange(event) {
  344.             if (event.data === YT.PlayerState.ENDED) {
  345.                 deluxePlayer.playVideo();
  346.             }
  347.         }
  348.     </script>
  349.     <script src=\"https://www.youtube.com/iframe_api\"></script>
  350. <script>
  351.     var deluxePlayer;
  353.     function onYouTubeIframeAPIReady() {
  354.         var firstMovieName = document.getElementById('deluxe-overlay').innerHTML; // Replace this with dynamic data if available
  355.         console.log(firstMovieName);
  356.         searchYouTube(firstMovieName + \" trailer Movie TV Series\", function(videoId) {
  357.             deluxePlayer = new YT.Player('youtube-player', {
  358.                 videoId: videoId,
  359.                 playerVars: {
  360.                     autoplay: 1,
  361.                     controls: 0,
  362.                     modestbranding: 1,
  363.                     rel: 0,
  364.                     showinfo: 0,
  365.                 },
  366.                 events:
  367.                 {
  368.                     'onReady': onDeluxePlayerReady
  369.                 }
  370.             });
  371.         });
  372.     }
  374.    function searchYouTube(query, callback) {
  375.     var apiKey = 'AIzaSyABUXy24BFAgNuEjKHVLE1D7YfEti0pB5Y'; // Replace with your actual YouTube API Key
  376.     var url = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=1&q=\${encodeURIComponent(query)}&key=\${apiKey}`;
  378.     fetch(url)
  379.         .then(response => {
  380.             if (!response.ok) {
  381.                 throw new Error('Network response was not ok');
  382.             }
  383.             return response.json();
  384.         })
  385.         .then(data => {
  386.             if (data.items && data.items.length > 0) {
  387.                 var videoId = data.items[0].id.videoId;
  388.                 callback(videoId);
  389.             } else {
  390.                 console.error('No videos found');
  391.             }
  392.         })
  393.         .catch(error => console.error('Error fetching YouTube videos:', error));
  394. }
  395. </script>
  396. ";
  397.         
  398.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  400.         
  401.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  403.     }
  405.     public function getTemplateName()
  406.     {
  407.         return "movie/recommendations.html.twig";
  408.     }
  410.     public function isTraitable()
  411.     {
  412.         return false;
  413.     }
  415.     public function getDebugInfo()
  416.     {
  417.         return array (  322 => 210,  315 => 208,  312 => 207,  305 => 203,  299 => 202,  295 => 201,  292 => 200,  289 => 199,  285 => 198,  277 => 192,  265 => 185,  261 => 184,  252 => 181,  250 => 180,  246 => 178,  244 => 177,  68 => 3,  58 => 2,  35 => 1,);
  418.     }
  420.     public function getSourceContext()
  421.     {
  422.         return new Source("{% extends 'layouts/layout.html.twig' %}
  423. {% block recommendation %}
  424.     <style>
  425.         body, html {
  426.             margin: 0;
  427.             padding: 0;
  428.             font-family: 'Arial', sans-serif;
  429.             background-color: #141414;
  430.             color: white;
  431.             height: 100%; /* Full height */
  432.             overflow: auto; /* Hide overflow */
  433.         }
  434.         .deluxe-header {
  435.             background-color: #000;
  436.             padding: 20px;
  437.             color: white;
  438.             text-align: center;
  439.             font-size: 24px;
  440.             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  441.         }
  442.         .deluxe-hero {
  443.             position: relative;
  444.             width: 100%;
  445.             height: 66vh; /* Adjusted height */
  446.             overflow: hidden; /* Hide overflow */
  447.         }
  448.         .deluxe-hero iframe {
  449.             position: absolute;
  450.             top: -160px; /* Adjust top to cut off borders */
  451.             left: 0;
  452.             width: 120%;
  453.             height: calc(100% + 260px); /* Increase height to cut off borders */
  454.             border: none; /* Remove any border */
  455.         }
  456.         .deluxe-overlay {
  457.             position: absolute;
  458.             bottom: 0%; /* Align with the bottom of the video */
  459.             right: 0.0%;
  460.             width: 30%; /* Adjust width as needed */
  461.             height: 20vh; /* Adjust height to match video bottom */
  462.             background: rgba(0, 0, 0, 0.93);
  463.             color: white;
  464.             padding: 20px;
  465.             display: flex;
  466.             align-items: right;
  467.             justify-content: right;
  468.             clip-path: polygon(100% 100%, 0 100%, 100% 0); /* Triangle cut */
  469.             animation: slideInRight 3s ease-out forwards; /* Animation */
  470.             z-index: 1000; /* High z-index to ensure visibility on top */
  471.         }
  473.         .deluxe-overlay-link
  474.         {
  475.             margin-top:100px;
  476.             color: white; /* Ensures the link is white */
  477.             text-decoration: none; /* Removes underline from the link */
  478.             font-size: 22px; /* Adjust size as needed */
  479.             font-weight: bold; /* Makes the text bold */
  480.             display: block; /* Ensures the link fills the container for better clickability */
  481.             text-align: right; /* Centers the text within the link */
  483.         }
  485.         .deluxe-link {
  486.             color: white; /* Ensures the link is white */
  487.             text-decoration: none; /* Removes underline from the link */
  488.             font-size: 18px; /* Adjust size as needed */
  489.             font-weight: bold; /* Makes the text bold */
  490.             display: block; /* Ensures the link fills the container for better clickability */
  491.             text-align: center; /* Centers the text within the link */
  492.         }
  494.         .deluxe-overlay-left {
  495.             position: absolute;
  496.             bottom: 0%; /* Align with the bottom of the video */
  497.             left: 0.0%;
  498.             width: 25%; /* Adjust width as needed */
  499.             height: 100%; /* Adjust height to match video bottom */
  500.             color: white;
  501.             padding: 20px;
  502.             display: flex;
  503.             align-items: right;
  504.             justify-content: right;
  505.             animation: slideIn 3s ease-out forwards; /* Animation */
  506.             z-index: 1000; /* High z-index to ensure visibility on top */
  507.             background: rgb(0,0,0,1);
  508.             color: white; /* Ensures the link is white */
  509.             text-decoration: none; /* Removes underline from the link */
  510.             font-size: 18px; /* Adjust size as needed */
  511.             font-weight: bold; /* Makes the text bold */
  512.             display: block; /* Ensures the link fills the container for better clickability */
  513.             text-align: center; /* Centers the text within the link */
  514.         }
  516.         @keyframes slideIn {
  517.             from {
  518.                 transform: translateX(-400%);
  519.             }
  520.             to {
  521.                 transform: translateX(0%);
  522.             }
  523.         }
  525.          @keyframes slideInRight {
  526.             from {
  527.                 transform: translateX(400%);
  528.             }
  529.             to {
  530.                 transform: translateX(0%);
  531.             }
  532.         }
  533.         .deluxe-content {
  534.             padding: 20px;
  535.             text-align: center;
  536.         }
  537.         .deluxe-movie-grid {
  538.             width: 100%;
  539.             padding: 20px;
  540.             background: rgba(0, 0, 0, 0.7);
  541.             display: flex;
  542.             flex-wrap: wrap;
  543.             justify-content: space-around;
  544.             margin-bottom: 20px;
  545.         }
  547.         .deluxe-movie-left {
  548.             width: 250px;
  549.             margin: 15px 2px;
  550.             box-sizing: border-box;
  551.             transition: transform 0.3s ease;
  552.             cursor: pointer;
  553.             z-index: 10000;
  554.         }
  556.         .deluxe-movie-left img {
  557.             margin-left: 40px;
  558.             width: 150%;
  559.             height: auto;
  560.             display: block;
  561.         }
  563.         .deluxe-movie {
  564.             width: 11.0%;
  565.             margin: 15px 2px;
  566.             box-sizing: border-box;
  567.             transition: transform 0.3s ease;
  568.             cursor: pointer;
  569.         }
  570.         .deluxe-movie:hover {
  571.             transform: scale(1.1);
  572.         }
  573.         .deluxe-movie img {
  574.             width: 100%;
  575.             height: auto;
  576.             display: flex;
  577.             content-align: center;
  578.         }
  579.         .deluxe-movie-info {
  580.             text-align: center;
  581.             background: rgba(0, 0, 0, 0.8);
  582.             padding: 10px;
  583.             text-overflow: ellipsis;
  584.             overflow: hidden;
  585.             white-space: nowrap;
  586.         }
  587.         .deluxe-link {
  588.             text-decoration: none;
  589.             color: inherit;
  590.         }
  592.         .deluxe-link-left {
  593.             text-decoration: none;
  594.             color: inherit;
  595.         }
  596.     </style>
  597. <body>
  598. {% set skippedFirst = false %}
  599.     <!-- <div class=\"deluxe-header\">Deluxe Movie Showcase</div> -->
  600.    <div class=\"deluxe-hero\" id=\"deluxe-hero\">
  601.    {% if movies.current is defined and movies.current %}
  602.      <a class=\"deluxe-overlay-link\" href=\"/movie-detail/{{ movies.current.id }}\"> <div class=\"deluxe-overlay\" id=\"deluxe-overlay\">  {{ movies.current.title }} <p style=\"font-size: 12px;\">More Details</p></a></div>
  603.          <div class=\"deluxe-overlay-left\"> 
  604.          <div class=\"deluxe-movie-left\">
  605.                 <a class=\"deluxe-link-left\" href=\"/movie-detail/{{ movies.current.id }}\">
  606.                     <img src=\"{{ movies.current.getImageURL().getUrl() }}\" alt=\"{{ movies.current.title }}\">
  607.                 </a>
  608.             </div></div>
  609.     <!-- YouTube video will be loaded here -->
  610.     <div id=\"youtube-player\"></div>
  611. </div>
  612.      {% endif %}
  613.     <div class=\"deluxe-content\">
  614.         <h1>Recommendations</h1>
  615.         <p>Explore our curated collection of films.</p>
  616.     </div>
  617.     <div class=\"deluxe-movie-grid\">
  618.         <!-- Dynamic content will be inserted here via PHP Twig -->
  619.         {% for movie in movies %}
  620.             {% if (skippedFirst) %}
  621.             <div class=\"deluxe-movie\">
  622.                 <a class=\"deluxe-link\" href=\"/movie-detail/{{ movie.id }}\">
  623.                     <img src=\"{{ movie.getImageURL().getUrl() }}\" alt=\"{{ movie.title }}\">
  624.                     <div class=\"deluxe-movie-info\">{{ movie.title }}</div>
  625.                 </a>
  626.             </div>
  627.             {% endif %}
  628.             {% set skippedFirst = true %}
  629.             
  630.         {% endfor %}
  631.     </div>
  633.     <!-- Load the YouTube IFrame Player API -->
  634.     <script src=\"https://www.youtube.com/iframe_api\"></script>
  635.     <script>
  636.         function onDeluxePlayerReady(event) {
  637.             console.log(\"Player ready\");
  638.             event.target.unMute();
  639.             event.target.setVolume(20);
  640.             event.target.playVideo();
  641.             setTimeout(function() {
  642.                 var overlay = document.getElementById('deluxe-overlay');
  643.                 if (overlay) {
  644.                     overlay.style.display = 'block';
  645.                     console.log(\"Overlay added\");
  646.                 } else {
  647.                     console.error('Overlay element not found');
  648.                 }
  649.             }, 10000); // Show overlay after 10 seconds
  650.         }
  652.         function onDeluxePlayerStateChange(event) {
  653.             if (event.data === YT.PlayerState.ENDED) {
  654.                 deluxePlayer.playVideo();
  655.             }
  656.         }
  657.     </script>
  658.     <script src=\"https://www.youtube.com/iframe_api\"></script>
  659. <script>
  660.     var deluxePlayer;
  662.     function onYouTubeIframeAPIReady() {
  663.         var firstMovieName = document.getElementById('deluxe-overlay').innerHTML; // Replace this with dynamic data if available
  664.         console.log(firstMovieName);
  665.         searchYouTube(firstMovieName + \" trailer Movie TV Series\", function(videoId) {
  666.             deluxePlayer = new YT.Player('youtube-player', {
  667.                 videoId: videoId,
  668.                 playerVars: {
  669.                     autoplay: 1,
  670.                     controls: 0,
  671.                     modestbranding: 1,
  672.                     rel: 0,
  673.                     showinfo: 0,
  674.                 },
  675.                 events:
  676.                 {
  677.                     'onReady': onDeluxePlayerReady
  678.                 }
  679.             });
  680.         });
  681.     }
  683.    function searchYouTube(query, callback) {
  684.     var apiKey = 'AIzaSyABUXy24BFAgNuEjKHVLE1D7YfEti0pB5Y'; // Replace with your actual YouTube API Key
  685.     var url = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=1&q=\${encodeURIComponent(query)}&key=\${apiKey}`;
  687.     fetch(url)
  688.         .then(response => {
  689.             if (!response.ok) {
  690.                 throw new Error('Network response was not ok');
  691.             }
  692.             return response.json();
  693.         })
  694.         .then(data => {
  695.             if (data.items && data.items.length > 0) {
  696.                 var videoId = data.items[0].id.videoId;
  697.                 callback(videoId);
  698.             } else {
  699.                 console.error('No videos found');
  700.             }
  701.         })
  702.         .catch(error => console.error('Error fetching YouTube videos:', error));
  703. }
  704. </script>
  705. {%  endblock %}", "movie/recommendations.html.twig", "/var/www/pimcore/MovieCollection/templates/movie/recommendations.html.twig");
  706.     }
  707. }