{"id":59988,"date":"2025-05-22T13:47:03","date_gmt":"2025-05-22T13:47:03","guid":{"rendered":"https:\/\/riff.is\/?page_id=59988"},"modified":"2025-08-25T13:59:19","modified_gmt":"2025-08-25T13:59:19","slug":"film-details","status":"publish","type":"page","link":"https:\/\/riff.is\/en\/film-details\/","title":{"rendered":"film-details"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"59988\" class=\"elementor elementor-59988\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-94f2248 elementor-section-full_width elementor-section-height-min-height elementor-section-height-default elementor-section-items-middle\" data-id=\"94f2248\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-81bfd60\" data-id=\"81bfd60\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fadef7f elementor-widget elementor-widget-html\" data-id=\"fadef7f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n  body {\r\n    margin: 0;\r\n    color: #333;\r\n  }\r\n\r\n  \/* -------------------------------- *\/\r\n  \/* -- HEADER IMG -- *\/\r\n  \/* -------------------------------- *\/\r\n  .film-header {\r\n    width: 100%;\r\n    height: auto;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .film-header-image {\r\n    width: 100%;\r\n    max-height: 90vh;\r\n    object-fit: cover;\r\n    display: block;\r\n  }\r\n\r\n  \/* -------------------------------- *\/\r\n  \/* -- TITLE -- *\/\r\n  \/* -------------------------------- *\/\r\n  .film-title-container {\r\n    padding: 40px;\r\n    background-color: #f8f8f8;\r\n    text-align: center;\r\n    position: relative;\r\n  }\r\n\r\n  .film-original-title {\r\n    font-size: 3em;\r\n    margin: 0;\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n  }\r\n\r\n  .film-english-title {\r\n    width: auto;\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    transform: translateY(-111%);\r\n    font-size: 3em;\r\n    opacity: 0;\r\n    transition: all 0.3s ease;\r\n    text-align: center;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .film-title-container:hover .film-original-title {\r\n    opacity: 0;\r\n  }\r\n\r\n  .film-title-container:hover .film-english-title {\r\n    opacity: 1;\r\n  }\r\n\r\n  \/* -------------------------------- *\/\r\n  \/* -- SMALL TEXT UNDER THE TITLE -- *\/\r\n  \/* -------------------------------- *\/\r\n  .film-meta {\r\n    font-style: italic;\r\n    margin: 10px 0;\r\n    text-align: center;\r\n    opacity: 0.7;\r\n  }\r\n\r\n  .content-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 40px 20px;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  \/* -------------------------------- *\/\r\n  \/* -- SYNOPSIS -- *\/\r\n  \/* -------------------------------- *\/\r\n  .synopsis {\r\n    flex: 1;\r\n    width: 40%;\r\n    padding-right: 40px;\r\n    line-height: 1.6;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  \/* -------------------------------- *\/\r\n  \/* -- TABLE -- *\/\r\n  \/* -------------------------------- *\/\r\n  .film-info-table {\r\n    width: 300px;\r\n    border-collapse: collapse;\r\n    margin-top: 60px;\r\n  }\r\n  \r\n  .film-info-table tr:hover {\r\n    background-color: #d6d6d6;\r\n  }\r\n\r\n  .film-info-table td {\r\n    padding: 10px;\r\n  }\r\n\r\n  .film-info-table td:first-child {\r\n    font-weight: bold;\r\n    width: 40%;\r\n  }\r\n\r\n  \/* -------------------------------- *\/\r\n  \/* -- DIRECTOR -- *\/\r\n  \/* -------------------------------- *\/\r\n  .director-title{\r\n    width: 100%;\r\n  } \r\n\r\n  .director-section {\r\n    margin-top: -40px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    width: 35%;\r\n  }\r\n\r\n  .director-image {\r\n    width: auto;\r\n    height: 350px !important;\r\n    object-fit: cover;\r\n  }\r\n\r\n  .director-name {\r\n    font-size: 1.2em;\r\n  }\r\n\r\n  \/* -------------------------------- *\/\r\n  \/* -- POSTER -- *\/\r\n  \/* -------------------------------- *\/\r\n  .poster-section {\r\n    width: 50%;\r\n    text-align: right;\r\n  }\r\n\r\n  .film-poster {\r\n    max-height: 600px !important;\r\n    width: auto;\r\n    object-fit: contain;\r\n  }\r\n\r\n  \/* -------------------------------- *\/\r\n  \/* -- RELATED FILMS -- *\/\r\n  \/* -------------------------------- *\/\r\n  .related-films {\r\n    width: 100%;\r\n    margin-top: 60px;\r\n  }\r\n\r\n  .related-title {\r\n    font-size: 1.8em;\r\n    border-bottom: 2px solid #333;\r\n    padding-bottom: 10px;\r\n    margin-bottom: 30px;\r\n  }\r\n\r\n  .related-films-list {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 20px;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  .related-film {\r\n    width: calc(33.333% - 20px);\r\n    min-width: 300px;\r\n    cursor: pointer;\r\n    transition: transform 0.3s ease;\r\n  }\r\n\r\n  .related-film:hover {\r\n    transform: translateY(-5px);\r\n  }\r\n\r\n  .related-film-image {\r\n    width: 100%;\r\n    height: 200px !important;\r\n    object-fit: cover;\r\n    background-color: #eee;\r\n  }\r\n\r\n  .related-film-title {\r\n    font-weight: bold;\r\n    margin: 10px 0 5px;\r\n  }\r\n\r\n  .related-film-length {\r\n    color: #666;\r\n    font-size: 0.9em;\r\n  }\r\n\r\n  \/* -------------------------------- *\/\r\n  \/* -- MEDIA QUERIES -- *\/\r\n  \/* -------------------------------- *\/\r\n  @media (max-width: 1024px) {\r\n    .content-container {\r\n      flex-direction: column;\r\n      padding: 20px;\r\n    }\r\n    \r\n    .synopsis, .poster-section, .director-section {\r\n      width: 100%;\r\n      padding-right: 0;\r\n    }\r\n    \r\n    .synopsis {\r\n      order: 1;\r\n    }\r\n    \r\n    .poster-section {\r\n      order: 2;\r\n      text-align: center;\r\n      margin-top: 30px;\r\n    }\r\n    \r\n    .film-info-table {\r\n      width: 100%;\r\n      margin-top: 30px;\r\n    }\r\n\r\n    .film-header-image {\r\n      height: 45vh;\r\n    }\r\n    \r\n    .director-section {\r\n      margin-top: 0;\r\n      order: 3;\r\n    }\r\n    \r\n    .director-image {\r\n      height: 300px !important;\r\n    }\r\n    \r\n    .film-poster {\r\n      max-height: 500px !important;\r\n    }\r\n    \r\n    .related-film {\r\n      width: calc(50% - 20px);\r\n    }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .film-original-title, .film-english-title {\r\n      font-size: 2.2em;\r\n    }\r\n    \r\n    .film-title-container {\r\n      padding: 20px;\r\n    }\r\n    \r\n    .film-header-image {\r\n      height: 45vh;\r\n    }\r\n    \r\n    .director-image {\r\n      height: 250px !important;\r\n    }\r\n    \r\n    .film-poster {\r\n      max-height: 400px !important;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .film-original-title, .film-english-title {\r\n      font-size: 1.8em;\r\n    }\r\n    \r\n    .related-film {\r\n      width: 100%;\r\n    }\r\n    \r\n    .director-image {\r\n      height: 200px !important;\r\n    }\r\n    \r\n    .film-poster {\r\n      max-height: 350px !important;\r\n    }\r\n    \r\n    .film-header-image {\r\n      height: 20vh;\r\n    }\r\n    \r\n    .related-film-image {\r\n      height: 150px !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n  <div class=\"film-header\">\r\n    <img decoding=\"async\" id=\"film-header-image\" class=\"film-header-image\" src=\"\" alt=\"\" title=\"\">\r\n  <\/div>\r\n  \r\n  <div class=\"film-title-container\">\r\n    <h1 id=\"film-original-title\" class=\"film-original-title\"><\/h1>\r\n    <h1 id=\"film-english-title\" class=\"film-english-title\"><\/h1>\r\n    <p id=\"film-meta\" class=\"film-meta\"><\/p>\r\n  <\/div>\r\n  \r\n  <div class=\"content-container\">\r\n    <div class=\"synopsis\">\r\n      <h3>Synopsis<\/h3>\r\n      <p id=\"film-synopsis\"><\/p>\r\n        \r\n      <table class=\"film-info-table\">\r\n      <tr>\r\n        <td>Premiere Type<\/td>\r\n        <td id=\"film-premiere-type\"><\/td>\r\n      <\/tr>\r\n      <tr>\r\n        <td>Length<\/td>\r\n        <td id=\"film-length\"><\/td>\r\n      <\/tr>\r\n      <tr>\r\n        <td>Runtime<\/td>\r\n        <td id=\"film-runtime\"><\/td>\r\n      <\/tr>\r\n      <tr>\r\n        <td>Language<\/td>\r\n        <td id=\"film-language\"><\/td>\r\n      <\/tr>\r\n      <tr>\r\n        <td>Director<\/td>\r\n        <td id=\"film-director-full\"><\/td>\r\n      <\/tr>\r\n      <tr>\r\n        <td>English Title<\/td>\r\n        <td id=\"film-english-title-table\"><\/td>\r\n      <\/tr>\r\n    <\/table>\r\n    \r\n    <!-- -- EVENTIVE BUY BUTTON -- -->\r\n    \r\n    <div class=\"eventive-button\" data-pass-bucket=\"6824afc518e0debedf6b03ff\" data-buy-label=\"Buy now\" data-quantity=\"1\" data-discount=\"\"><\/div>\r\n    <\/div>  \r\n\r\n    <div class=\"poster-section\">\r\n      <img decoding=\"async\" id=\"film-poster\" class=\"film-poster\" src=\"\" alt=\"Film Poster\" title=\"\">\r\n    <\/div>  \r\n  <\/div>\r\n  \r\n\r\n  <div class=\"content-container\">\r\n    <h3>Director<\/h3>\r\n  <\/div>\r\n  <div class=\"content-container\">\r\n    <div class=\"director-section\">\r\n      <img decoding=\"async\" id=\"director-image\" class=\"director-image\" src=\"\" alt=\"Director\" title=\"\">\r\n      <div>\r\n        <h3 class=\"director-name\" id=\"director-name\"><\/h3>\r\n      <\/div>\r\n  <\/div>  \r\n  <\/div>\r\n\r\n  \r\n  <div class=\"content-container\">\r\n    <div class=\"related-films\">\r\n      <h3 class=\"related-title\">More like this<\/h3>\r\n      <div class=\"related-films-list\" id=\"related-films-list\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n  \r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', async function() {\r\n      const filmId = sessionStorage.getItem('selectedFilmId');\r\n      \r\n      if (!filmId) {\r\n        window.location.href = 'https:\/\/riff.is\/riff';\r\n        return;\r\n      }\r\n      \r\n      try {\r\n        \/\/ Obtain film data\r\n        const currentFilm = await fetchFilmDetail(filmId);\r\n        \r\n        if (currentFilm) {\r\n          displayFilmDetail(currentFilm);\r\n          \r\n          \/\/ Obtain related Films\r\n          const relatedFilms = await fetchRelatedFilms(\r\n            currentFilm.fields[\"LengthTypeEnglish\"], \r\n            filmId\r\n          );\r\n          displayRelatedFilms(relatedFilms);\r\n        }\r\n      } catch (error) {\r\n        console.error(\"Error:\", error);\r\n        window.location.href = 'https:\/\/riff.is\/riff';\r\n      }\r\n    });\r\n  \r\n    async function fetchFilmDetail(filmId) {\r\n      const API_KEY = 'pat2BqG2l2Jq84KJX.50159c618f8d88dac658686f5d3741c2fbfd98486274b36bae0a2af1c4e930c8';\r\n      const BASE_ID = 'apptPiZHiN0trhiJC';\r\n      const TABLE_NAME = 'Sheet1';\r\n      const url = `https:\/\/api.airtable.com\/v0\/${BASE_ID}\/${TABLE_NAME}\/${filmId}`;\r\n      \r\n      const response = await fetch(url, {\r\n        headers: { Authorization: `Bearer ${API_KEY}` }\r\n      });\r\n      \r\n      if (!response.ok) {\r\n        throw new Error(`HTTP error! status: ${response.status}`);\r\n      }\r\n      \r\n      return await response.json();\r\n    }\r\n    \r\n    async function fetchRelatedFilms(lengthType, excludeId) {\r\n      const API_KEY = 'pat2BqG2l2Jq84KJX.50159c618f8d88dac658686f5d3741c2fbfd98486274b36bae0a2af1c4e930c8';\r\n      const BASE_ID = 'apptPiZHiN0trhiJC';\r\n      const TABLE_NAME = 'Sheet1';\r\n      const url = `https:\/\/api.airtable.com\/v0\/${BASE_ID}\/${TABLE_NAME}?filterByFormula=AND({LengthTypeEnglish}='${encodeURIComponent(lengthType)}', RECORD_ID()!='${excludeId}')`;\r\n      \r\n      const response = await fetch(url, {\r\n        headers: { Authorization: `Bearer ${API_KEY}` }\r\n      });\r\n      \r\n      if (!response.ok) {\r\n        throw new Error(`HTTP error! status: ${response.status}`);\r\n      }\r\n      \r\n      const data = await response.json();\r\n      return data.records.sort(() => 0.5 - Math.random()).slice(0, 3);\r\n    }\r\n  \r\n    function displayFilmDetail(filmData) {\r\n      const fields = filmData.fields;\r\n      \r\n      \/\/ Header and img\r\n      safeSetAttribute('film-header-image', 'src', fields[\"Material-Stillhi-res(1)>URL\/Directpathtofile\"]);\r\n      safeSetTextContent('film-original-title', fields[\"Originaltitle\"]);\r\n      safeSetTextContent('film-english-title', fields[\"Englishtitle\"]);\r\n      \r\n      \/\/ Director Meta Info\r\n      const country = fields[\"Country(1)>Country\"] || 'unknown country';\r\n      const directorFirstName = fields[\"Director(text)(1)>First name\"] || '';\r\n      const directorLastName = fields[\"Director(text)(1)>Last name\"] || '';\r\n      safeSetTextContent('film-meta', `A film from ${country} directed by ${directorFirstName} ${directorLastName}`);\r\n      \r\n      \/\/ Synopsis\r\n      safeSetTextContent('film-synopsis', fields[\"Longsynopsis\"]);\r\n      \r\n      \/\/ Information Table\r\n      safeSetTextContent('film-premiere-type', fields[\"PremieretypeEnglish\"]);\r\n      safeSetTextContent('film-length', fields[\"LengthTypeEnglish\"]);\r\n      safeSetTextContent('film-runtime', fields[\"Runtime(hh:mm:ss)\"]);\r\n      safeSetTextContent('film-language', fields[\"Language(1)>Language\"]);\r\n      safeSetTextContent('film-director-full', fields[\"Director(text)(1)>Full name\"]);\r\n      safeSetTextContent('film-english-title-table', fields[\"Englishtitle\"]);\r\n      \r\n      \/\/ Director\r\n      safeSetAttribute('director-image', 'src', fields[\"Material-Director'sportraithi-res(1)>URL\/Directpathtofile\"]);\r\n      safeSetTextContent('director-name', `${directorFirstName} ${directorLastName}`);\r\n      \r\n      \/\/ Poster\r\n      safeSetAttribute('film-poster', 'src', fields[\"MaterialPosterhi-res(1)>URL\/Directpathtofile\"]);\r\n      \r\n      \/\/Title\r\n      document.title = `${fields[\"Originaltitle\"] || 'Film'} - Riff`;\r\n    }\r\n    \r\n    function displayRelatedFilms(films) {\r\n      const container = document.getElementById('related-films-list');\r\n      if (!container) return;\r\n      \r\n      container.innerHTML = films.length === 0 \r\n        ? '<p>No related films found<\/p>'\r\n        : films.map(film => `\r\n            <div class=\"related-film\" onclick=\"sessionStorage.setItem('selectedFilmId', '${film.id}'); window.location.href='https:\/\/riff.is\/riff\/film-detail'\">\r\n              <img decoding=\"async\" class=\"related-film-image\" src=\"${film.fields[\"Material-Stillhi-res(1)>URL\/Directpathtofile\"] || ''}\" alt=\"${film.fields[\"Englishtitle\"] || ''}\">\r\n              <h4 class=\"related-film-title\">${film.fields[\"Englishtitle\"] || 'Title not available'}<\/h4>\r\n              <p class=\"related-film-length\">${film.fields[\"LengthTypeEnglish\"] || ''}<\/p>\r\n            <\/div>\r\n          `).join('');\r\n    }\r\n    \r\n    function safeSetTextContent(elementId, text) {\r\n      const element = document.getElementById(elementId);\r\n      if (element) element.textContent = text || 'N\/A';\r\n    }\r\n    \r\n    function safeSetAttribute(elementId, attribute, value) {\r\n      const element = document.getElementById(elementId);\r\n      if (element && value) element[attribute] = value;\r\n    }\r\n  <\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Synopsis Premiere Type Length Runtime Language Director English Title Director More like this<\/p>","protected":false},"author":940,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-59988","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/riff.is\/en\/wp-json\/wp\/v2\/pages\/59988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/riff.is\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/riff.is\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/riff.is\/en\/wp-json\/wp\/v2\/users\/940"}],"replies":[{"embeddable":true,"href":"https:\/\/riff.is\/en\/wp-json\/wp\/v2\/comments?post=59988"}],"version-history":[{"count":383,"href":"https:\/\/riff.is\/en\/wp-json\/wp\/v2\/pages\/59988\/revisions"}],"predecessor-version":[{"id":63588,"href":"https:\/\/riff.is\/en\/wp-json\/wp\/v2\/pages\/59988\/revisions\/63588"}],"wp:attachment":[{"href":"https:\/\/riff.is\/en\/wp-json\/wp\/v2\/media?parent=59988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}