templates/movie/recommendations.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  2. {% block recommendation %}
  3.     <style>
  4.         body, html {
  5.             margin: 0;
  6.             padding: 0;
  7.             font-family: 'Arial', sans-serif;
  8.             background-color: #141414;
  9.             color: white;
  10.             height: 100%; /* Full height */
  11.             overflow: auto; /* Hide overflow */
  12.         }
  13.         .deluxe-header {
  14.             background-color: #000;
  15.             padding: 20px;
  16.             color: white;
  17.             text-align: center;
  18.             font-size: 24px;
  19.             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  20.         }
  21.         .deluxe-hero {
  22.             position: relative;
  23.             width: 100%;
  24.             height: 66vh; /* Adjusted height */
  25.             overflow: hidden; /* Hide overflow */
  26.         }
  27.         .deluxe-hero iframe {
  28.             position: absolute;
  29.             top: -160px; /* Adjust top to cut off borders */
  30.             left: 0;
  31.             width: 120%;
  32.             height: calc(100% + 260px); /* Increase height to cut off borders */
  33.             border: none; /* Remove any border */
  34.         }
  35.         .deluxe-overlay {
  36.             position: absolute;
  37.             bottom: 0%; /* Align with the bottom of the video */
  38.             right: 0.0%;
  39.             width: 30%; /* Adjust width as needed */
  40.             height: 20vh; /* Adjust height to match video bottom */
  41.             background: rgba(0, 0, 0, 0.93);
  42.             color: white;
  43.             padding: 20px;
  44.             display: flex;
  45.             align-items: right;
  46.             justify-content: right;
  47.             clip-path: polygon(100% 100%, 0 100%, 100% 0); /* Triangle cut */
  48.             animation: slideInRight 3s ease-out forwards; /* Animation */
  49.             z-index: 1000; /* High z-index to ensure visibility on top */
  50.         }
  52.         .deluxe-overlay-link
  53.         {
  54.             margin-top:100px;
  55.             color: white; /* Ensures the link is white */
  56.             text-decoration: none; /* Removes underline from the link */
  57.             font-size: 22px; /* Adjust size as needed */
  58.             font-weight: bold; /* Makes the text bold */
  59.             display: block; /* Ensures the link fills the container for better clickability */
  60.             text-align: right; /* Centers the text within the link */
  62.         }
  64.         .deluxe-link {
  65.             color: white; /* Ensures the link is white */
  66.             text-decoration: none; /* Removes underline from the link */
  67.             font-size: 18px; /* Adjust size as needed */
  68.             font-weight: bold; /* Makes the text bold */
  69.             display: block; /* Ensures the link fills the container for better clickability */
  70.             text-align: center; /* Centers the text within the link */
  71.         }
  73.         .deluxe-overlay-left {
  74.             position: absolute;
  75.             bottom: 0%; /* Align with the bottom of the video */
  76.             left: 0.0%;
  77.             width: 25%; /* Adjust width as needed */
  78.             height: 100%; /* Adjust height to match video bottom */
  79.             color: white;
  80.             padding: 20px;
  81.             display: flex;
  82.             align-items: right;
  83.             justify-content: right;
  84.             animation: slideIn 3s ease-out forwards; /* Animation */
  85.             z-index: 1000; /* High z-index to ensure visibility on top */
  86.             background: rgb(0,0,0,1);
  87.             color: white; /* Ensures the link is white */
  88.             text-decoration: none; /* Removes underline from the link */
  89.             font-size: 18px; /* Adjust size as needed */
  90.             font-weight: bold; /* Makes the text bold */
  91.             display: block; /* Ensures the link fills the container for better clickability */
  92.             text-align: center; /* Centers the text within the link */
  93.         }
  95.         @keyframes slideIn {
  96.             from {
  97.                 transform: translateX(-400%);
  98.             }
  99.             to {
  100.                 transform: translateX(0%);
  101.             }
  102.         }
  104.          @keyframes slideInRight {
  105.             from {
  106.                 transform: translateX(400%);
  107.             }
  108.             to {
  109.                 transform: translateX(0%);
  110.             }
  111.         }
  112.         .deluxe-content {
  113.             padding: 20px;
  114.             text-align: center;
  115.         }
  116.         .deluxe-movie-grid {
  117.             width: 100%;
  118.             padding: 20px;
  119.             background: rgba(0, 0, 0, 0.7);
  120.             display: flex;
  121.             flex-wrap: wrap;
  122.             justify-content: space-around;
  123.             margin-bottom: 20px;
  124.         }
  126.         .deluxe-movie-left {
  127.             width: 250px;
  128.             margin: 15px 2px;
  129.             box-sizing: border-box;
  130.             transition: transform 0.3s ease;
  131.             cursor: pointer;
  132.             z-index: 10000;
  133.         }
  135.         .deluxe-movie-left img {
  136.             margin-left: 40px;
  137.             width: 150%;
  138.             height: auto;
  139.             display: block;
  140.         }
  142.         .deluxe-movie {
  143.             width: 11.0%;
  144.             margin: 15px 2px;
  145.             box-sizing: border-box;
  146.             transition: transform 0.3s ease;
  147.             cursor: pointer;
  148.         }
  149.         .deluxe-movie:hover {
  150.             transform: scale(1.1);
  151.         }
  152.         .deluxe-movie img {
  153.             width: 100%;
  154.             height: auto;
  155.             display: flex;
  156.             content-align: center;
  157.         }
  158.         .deluxe-movie-info {
  159.             text-align: center;
  160.             background: rgba(0, 0, 0, 0.8);
  161.             padding: 10px;
  162.             text-overflow: ellipsis;
  163.             overflow: hidden;
  164.             white-space: nowrap;
  165.         }
  166.         .deluxe-link {
  167.             text-decoration: none;
  168.             color: inherit;
  169.         }
  171.         .deluxe-link-left {
  172.             text-decoration: none;
  173.             color: inherit;
  174.         }
  175.     </style>
  176. <body>
  177. {% set skippedFirst = false %}
  178.     <!-- <div class="deluxe-header">Deluxe Movie Showcase</div> -->
  179.    <div class="deluxe-hero" id="deluxe-hero">
  180.    {% if movies.current is defined and movies.current %}
  181.      <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>
  182.          <div class="deluxe-overlay-left"> 
  183.          <div class="deluxe-movie-left">
  184.                 <a class="deluxe-link-left" href="/movie-detail/{{ movies.current.id }}">
  185.                     <img src="{{ movies.current.getImageURL().getUrl() }}" alt="{{ movies.current.title }}">
  186.                 </a>
  187.             </div></div>
  188.     <!-- YouTube video will be loaded here -->
  189.     <div id="youtube-player"></div>
  190. </div>
  191.      {% endif %}
  192.     <div class="deluxe-content">
  193.         <h1>Recommendations</h1>
  194.         <p>Explore our curated collection of films.</p>
  195.     </div>
  196.     <div class="deluxe-movie-grid">
  197.         <!-- Dynamic content will be inserted here via PHP Twig -->
  198.         {% for movie in movies %}
  199.             {% if (skippedFirst) %}
  200.             <div class="deluxe-movie">
  201.                 <a class="deluxe-link" href="/movie-detail/{{ movie.id }}">
  202.                     <img src="{{ movie.getImageURL().getUrl() }}" alt="{{ movie.title }}">
  203.                     <div class="deluxe-movie-info">{{ movie.title }}</div>
  204.                 </a>
  205.             </div>
  206.             {% endif %}
  207.             {% set skippedFirst = true %}
  208.             
  209.         {% endfor %}
  210.     </div>
  212.     <!-- Load the YouTube IFrame Player API -->
  213.     <script src="https://www.youtube.com/iframe_api"></script>
  214.     <script>
  215.         function onDeluxePlayerReady(event) {
  216.             console.log("Player ready");
  217.             event.target.unMute();
  218.             event.target.setVolume(20);
  219.             event.target.playVideo();
  220.             setTimeout(function() {
  221.                 var overlay = document.getElementById('deluxe-overlay');
  222.                 if (overlay) {
  223.                     overlay.style.display = 'block';
  224.                     console.log("Overlay added");
  225.                 } else {
  226.                     console.error('Overlay element not found');
  227.                 }
  228.             }, 10000); // Show overlay after 10 seconds
  229.         }
  231.         function onDeluxePlayerStateChange(event) {
  232.             if (event.data === YT.PlayerState.ENDED) {
  233.                 deluxePlayer.playVideo();
  234.             }
  235.         }
  236.     </script>
  237.     <script src="https://www.youtube.com/iframe_api"></script>
  238. <script>
  239.     var deluxePlayer;
  241.     function onYouTubeIframeAPIReady() {
  242.         var firstMovieName = document.getElementById('deluxe-overlay').innerHTML; // Replace this with dynamic data if available
  243.         console.log(firstMovieName);
  244.         searchYouTube(firstMovieName + " trailer Movie TV Series", function(videoId) {
  245.             deluxePlayer = new YT.Player('youtube-player', {
  246.                 videoId: videoId,
  247.                 playerVars: {
  248.                     autoplay: 1,
  249.                     controls: 0,
  250.                     modestbranding: 1,
  251.                     rel: 0,
  252.                     showinfo: 0,
  253.                 },
  254.                 events:
  255.                 {
  256.                     'onReady': onDeluxePlayerReady
  257.                 }
  258.             });
  259.         });
  260.     }
  262.    function searchYouTube(query, callback) {
  263.     var apiKey = 'AIzaSyABUXy24BFAgNuEjKHVLE1D7YfEti0pB5Y'; // Replace with your actual YouTube API Key
  264.     var url = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=1&q=${encodeURIComponent(query)}&key=${apiKey}`;
  266.     fetch(url)
  267.         .then(response => {
  268.             if (!response.ok) {
  269.                 throw new Error('Network response was not ok');
  270.             }
  271.             return response.json();
  272.         })
  273.         .then(data => {
  274.             if (data.items && data.items.length > 0) {
  275.                 var videoId = data.items[0].id.videoId;
  276.                 callback(videoId);
  277.             } else {
  278.                 console.error('No videos found');
  279.             }
  280.         })
  281.         .catch(error => console.error('Error fetching YouTube videos:', error));
  282. }
  283. </script>
  284. {%  endblock %}