From ed531165841a1de9200782b00b99b174bf2289cd Mon Sep 17 00:00:00 2001
From: Minteck <contact@minteck.org>
Date: Thu, 23 Dec 2021 19:41:25 +0100
Subject: Commit

---
 .gitignore                                |    2 +-
 .idea/deployment.xml                      |   32 +-
 .idea/jsLibraryMappings.xml               |   10 +-
 .idea/sshConfigs.xml                      |    8 +
 .idea/vcs.xml                             |   10 +-
 .idea/webServers.xml                      |   14 +
 README.md                                 |   16 +-
 dark.css                                  |   20 +
 fonts/Nunito-Italic-VariableFont_wght.ttf |  Bin 0 -> 279936 bytes
 fonts/Nunito-VariableFont_wght.ttf        |  Bin 0 -> 275436 bytes
 includes/header.php                       |   29 -
 tv/index.php                              | 1442 ++++++++++++++---------------
 tv/intermission.php                       |   44 +-
 tv/watch.php                              |   52 +-
 14 files changed, 844 insertions(+), 835 deletions(-)
 create mode 100644 .idea/sshConfigs.xml
 create mode 100644 .idea/webServers.xml
 create mode 100644 fonts/Nunito-Italic-VariableFont_wght.ttf
 create mode 100644 fonts/Nunito-VariableFont_wght.ttf

diff --git a/.gitignore b/.gitignore
index a49982d..0b1e287 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
-data/films
+data/films
 data/durations.json
\ No newline at end of file
diff --git a/.idea/deployment.xml b/.idea/deployment.xml
index 0a1f045..076c030 100644
--- a/.idea/deployment.xml
+++ b/.idea/deployment.xml
@@ -1,19 +1,15 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PublishConfigData" autoUpload="Always" serverName="Familine" preserveTimestamps="false" remoteFilesAllowedToDisappearOnAutoupload="false">
-    <serverData>
-      <paths name="Familine">
-        <serverdata>
-          <mappings>
-            <mapping deploy="/mnt/faminema" local="$PROJECT_DIR$" web="/" />
-          </mappings>
-          <excludedPaths>
-            <excludedPath path="/mnt/faminema/data/intermissions" />
-            <excludedPath path="/mnt/faminema/data/films/video" />
-          </excludedPaths>
-        </serverdata>
-      </paths>
-    </serverData>
-    <option name="myAutoUpload" value="ALWAYS" />
-  </component>
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PublishConfigData" autoUpload="Always" serverName="Familine" preserveTimestamps="false" remoteFilesAllowedToDisappearOnAutoupload="false">
+    <serverData>
+      <paths name="Familine">
+        <serverdata>
+          <mappings>
+            <mapping deploy="/mnt/faminema" local="$PROJECT_DIR$" web="/" />
+          </mappings>
+        </serverdata>
+      </paths>
+    </serverData>
+    <option name="myAutoUpload" value="ALWAYS" />
+  </component>
 </project>
\ No newline at end of file
diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
index 1bec673..8ab19fa 100644
--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
@@ -1,6 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <file url="PROJECT" libraries="{video-js}" />
-  </component>
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="PROJECT" libraries="{video-js}" />
+  </component>
 </project>
\ No newline at end of file
diff --git a/.idea/sshConfigs.xml b/.idea/sshConfigs.xml
new file mode 100644
index 0000000..9ed49e4
--- /dev/null
+++ b/.idea/sshConfigs.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="SshConfigs">
+    <configs>
+      <sshConfig authType="OPEN_SSH" host="minteck.org" id="83f2fac7-8fa4-4f59-96c1-0e52318a58a8" port="22465" nameFormat="DESCRIPTIVE" username="root" useOpenSSHConfig="true" />
+    </configs>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index 94a25f7..9661ac7 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -1,6 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
 </project>
\ No newline at end of file
diff --git a/.idea/webServers.xml b/.idea/webServers.xml
new file mode 100644
index 0000000..62c0573
--- /dev/null
+++ b/.idea/webServers.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="WebServers">
+    <option name="servers">
+      <webServer id="5f2e4af7-7eba-41d1-a53d-564149c63afb" name="Familine">
+        <fileTransfer accessType="SFTP" host="minteck.org" port="22465" sshConfigId="83f2fac7-8fa4-4f59-96c1-0e52318a58a8" sshConfig="root@minteck.org:22465 agent" authAgent="true">
+          <advancedOptions>
+            <advancedOptions dataProtectionLevel="Private" keepAliveTimeout="0" passiveMode="true" shareSSLContext="true" />
+          </advancedOptions>
+        </fileTransfer>
+      </webServer>
+    </option>
+  </component>
+</project>
\ No newline at end of file
diff --git a/README.md b/README.md
index 67deeb8..7c9dadb 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,9 @@
-# Familine Movies
-
-* Chemin d'installation attendu : `/mnt/faminema`
-
-## Installation
-1. Copiez les fichiers dans le dossier `/mnt/faminema`
-2. Renommez `data/films.demo` en `data/films`
-3. Configurez votre serveur Web pour pointer le sous-domaine `cinema.` vers Familine Movies
+# Familine Movies
+
+* Chemin d'installation attendu : `/mnt/faminema`
+
+## Installation
+1. Copiez les fichiers dans le dossier `/mnt/faminema`
+2. Renommez `data/films.demo` en `data/films`
+3. Configurez votre serveur Web pour pointer le sous-domaine `cinema.` vers Familine Movies
 4. C'est prêt !
\ No newline at end of file
diff --git a/dark.css b/dark.css
index 4ee8c92..854645a 100644
--- a/dark.css
+++ b/dark.css
@@ -1,3 +1,23 @@
+@font-face {
+    font-family: "Nunito";
+    src: url("/fonts/Nunito-VariableFont_wght.ttf");
+    font-weight: 125 950;
+    font-stretch: 75% 125%;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Nunito";
+    src: url("/fonts/Nunito-Italic-VariableFont_wght.ttf");
+    font-weight: 125 950;
+    font-stretch: 75% 125%;
+    font-style: italic;
+}
+
+* {
+    font-family: "Nunito", sans-serif !important;
+}
+
 @media (prefers-color-scheme: dark) {
     #navigation-bar {
         border-bottom: 1px solid #252525 !important;
diff --git a/fonts/Nunito-Italic-VariableFont_wght.ttf b/fonts/Nunito-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..97a40fa
Binary files /dev/null and b/fonts/Nunito-Italic-VariableFont_wght.ttf differ
diff --git a/fonts/Nunito-VariableFont_wght.ttf b/fonts/Nunito-VariableFont_wght.ttf
new file mode 100644
index 0000000..edc20b8
Binary files /dev/null and b/fonts/Nunito-VariableFont_wght.ttf differ
diff --git a/includes/header.php b/includes/header.php
index 5522bbf..fffd3ea 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -97,40 +97,11 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/plus.php";
     </div>
 </div>
 
-<div class="modal fade" id="welcome">
-    <div class="modal-dialog modal-lg modal-dialog-centered">
-        <div class="modal-content">
-
-            <div class="modal-header">
-                <h4 class="modal-title">Bienvenue sur Familine Movies <?= $_SYSVERSION ?></h4>
-            </div>
-
-            <div class="modal-body">
-                <h2>Vous arrivez pour la première fois ?</h2>
-                <p><b>Bienvenue !</b> Après avoir accepté les notes sur les droits d'auteurs, vous pourrez bénéficier d'un accès gratuit et simple à tout le contenu présent sur Familine Movies, films et séries, ça représente des centaines d'heures de contenu de qualité.</p>
-                <p>Familine Movies dispose de contenu produit par <?= $_CONFIG["Movies"]["current"] ?> ou ses prédécesseurs (par exemple <?= $_CONFIG["Movies"]["legacy"] ?>), mais aussi de contenu publié par d'autres personnes que Familine pense intéressants de vous relayer.</p>
-
-                <h2>Quoi de neuf dans la mise à jour <?= $_SYSVERSION ?></h2>
-                <p><?= str_replace("\n", "<br>", implode("\n", $_CONFIG["Movies"]["notes"])) ?></p>
-            </div>
-
-            <div class="modal-footer">
-                <button type="button" class="btn btn-success" onclick="localStorage.setItem('notes_<?= $_SYSVERSION ?>', '1');" data-dismiss="modal">Fermer</button>
-            </div>
-
-        </div>
-    </div>
-</div>
-
 <script>
     if (localStorage.getItem("copyright") !== "1") {
         $("#copyright").modal();
     }
 
-    if (localStorage.getItem("notes_<?= $_SYSVERSION ?>") !== "1") {
-        $("#welcome").modal();
-    }
-
     window.addEventListener('load', () => {
         setTimeout(() => {
             $("#loader").fadeOut(200);
diff --git a/tv/index.php b/tv/index.php
index ced36c2..0a0c2e4 100644
--- a/tv/index.php
+++ b/tv/index.php
@@ -1,721 +1,721 @@
-<?php $_TITLE = "Accueil"; require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/header.php"; ?>
-
-<script>
-    const FilmsData = {
-        <?php
-
-        $list = scandir($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata");
-        $films = [];
-
-        foreach ($list as $item) {
-            if ($item !== "." && $item !== "..") {
-                $films[substr($item, 0, -5)] = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata/" . $item), true);
-                $films[substr($item, 0, -5)]["id"] = substr($item, 0, -5);
-            }
-        }
-
-        usort($films, function ($a, $b) {
-            return $a['date'] <=> $b['date'];
-        });
-
-        $films = array_reverse($films);
-
-        ?>
-        <?php foreach ($films as $film): ?>
-        "<?= $film["id"] ?>": JSON.parse(atob(`<?= base64_encode(utf8_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata/" . $film["id"] . ".json"))) ?>`)),
-        <?php endforeach; ?>
-    }
-
-</script>
-
-<style>
-    #intermission-skipper {
-        backdrop-filter: blur(10px);
-    }
-
-    #video-item {
-        background: black;
-        width: 100%;
-        height: calc(100vh - 76px);
-        margin-top: 44px;
-    }
-
-    #intermission-item {
-        background: black;
-        width: 100%;
-        height: calc(100vh - 76px);
-        margin-top: 44px;
-    }
-
-    #selector {
-        background: #fff;
-        overflow: auto;
-        padding: 50px 8px 8px;
-    }
-
-    #page-title {
-        float: right;
-        margin-top: 5px;
-        margin-right: 10px;
-    }
-
-    #navigation-bar {
-        backdrop-filter: blur(10px);
-        border-bottom: 1px solid #bdbdbd;
-        padding: 4px 4px 7px 4px;
-        position: fixed;
-        top: 32px;
-        left: 0;
-        right: 0;
-        height: 44px;
-        z-index: 9;
-        background: rgba(255, 255, 255, 0.5);
-    }
-
-    #close-btn {
-        vertical-align: middle;
-        cursor: pointer;
-        margin-left: 2px;
-    }
-
-    #close-btn:hover {
-        opacity: .75;
-    }
-
-    #close-btn:active, #close-btn:focus {
-        opacity: .5;
-    }
-
-    #debug {
-        opacity: 0;
-        float: right;
-        margin-top: 7px;
-        margin-right: 15px;
-        transition: opacity 200ms;
-    }
-
-    #debug:hover {
-        opacity: .3;
-    }
-</style>
-
-<div id="navigation-bar">
-    <a href="/" id="logo" style="color: black;text-decoration:none !important;">
-            <img src="https://familine.minteck.org/icns/familine-movies.svg" width="36px" style="vertical-align: middle;">
-            <span style="vertical-align: middle;"><span><span style="font-size:20px;">Familine Movies<?= isset($_FamilineMoviesPlus) && $_FamilineMoviesPlus ? "+" : "" ?></span></span></span></a>
-
-    <span id="page-title">Accueil</span>
-    <span id="debug" style="display:none;">
-        <span style="border-radius:999px;transition:none !important;background:green;width:16px;height:16px;display:inline-block;text-align:right;" id="seeking-indicator"></span>
-        <span style="border-radius:999px;transition:none !important;background:orange;width:16px;height:16px;display:inline-block;text-align:right;" id="time-indicator"></span>
-        <span style="border-radius:999px;transition:none !important;background:cyan;width:16px;height:16px;display:inline-block;text-align:right;" id="health-indicator"></span>
-        <span style="border-radius:999px;transition:none !important;background:darkred;width:16px;height:16px;display:inline-block;text-align:right;" id="seek-indicator"></span>
-    </span>
-</div>
-
-<div class="modal fade" id="triggerWarning">
-    <div class="modal-dialog modal-lg modal-dialog-centered">
-        <div class="modal-content">
-
-            <div class="modal-header">
-                <h4 class="modal-title">Ce contenu n'est peut-être pas pour tout le monde</h4>
-            </div>
-
-            <div class="modal-body">
-                <p>Ce contenu a été marqué comme dangeureux pour certaines personnes par les administrateurs de Familine Movies. En le regardant, vous acceptez être en mesure de consulter ce contenu ; Familine Movies n'est <b>EN AUCUN CAS</b> responsable de toute bléssure physique ou morale à la suite de la consultation de ce contenu.</p>
-
-                <div id="tw_flashing">
-                    <h2>TW: F — Épilepsie photosensible</h2>
-                    <p>Ce contenu contient des scènes avec des changements de lumière brutaux qui pourraient déclencher des crises d'épilepsie chez certaines personnes.</p>
-                    <p>Si vous êtes épileptique, ou que vous ou un membre de votre famille proche a des antécédents de crises à la suite d'un contenu multimédia, il est conseillé de consulter un médecin avant de regarder ce contenu.</p>
-                    <p>Même si vous n'êtes pas épileptique, il est conseillé de regarder ce contenu dans une pièce suffisamment éclairée, à une grande distance de l'écran, et en adaptant la luminosité de l'écran à celle de la pièce.</p>
-                </div>
-
-                <div id="tw_suicide">
-                    <h2>TW: S — Scènes de suicide</h2>
-                    <p>Ce contenu contient des scènes affichant des pratiques de suicide.</p>
-                    <p>Familine Movies ne partage pas le mal des gens, <b>ce contenu <u>N'EST PAS</u> un appel à l'aide</b> ; nous sommes en communication constante avec l'auteur ou les auteurs du contenu et nous vous assurons qu'il(s) est/sont en bonne santé.</p>
-                    <p>Si vous êtes victime ou témoin de toute action ou parole relative au suicide, vous <b>devez</b> prendre contact avec un professionnel <a href="https://www.infosuicide.org/urgences-aide-ressources/lignes-decoute/" target="_blank">par le biais d'une des nombreuses lignes d'écoute disponibles</a>.</p>
-                </div>
-
-                <div id="tw_violence">
-                    <h2>TW: V — Actes physiquement ou mentalement violents</h2>
-                    <p>Ce contenu contient des scènes affichant des pratiques de violence physique ou verbale.</p>
-                    <p>Familine ne cautionne en aucun cas ces pratiques de violences, qui ont été effectuées uniquement dans le cadre de la réalisation du contenu, et ne saurai être responsable de violences réelles effectuées à la suite de contenu.</p>
-                    <p>Il est déconseillé aux jeunes enfants de moins de 13 ans de consulter ce contenu, en partie ou en totalité.</p>
-                </div>
-
-                <div id="tw_sex">
-                    <h2>TW: S — Contenu sexuellement explicité</h2>
-                    <p>Ce contenu contient des scènes affichant des pratiques pouvant être considérées comme sexuellement explicites.</p>
-                    <p>Vous ne devez regarder ce contenu que si vous en êtes totalement conscient et que vous souhaitez voir du contenu pouvant être sexuellement explicite..</p>
-                    <p>Les mineurs (personnes de moins de 18 ans) ne <b>sont pas</b> autorisés à consulter ce contenu, <u>même avec l'autorisation de leur responsable légal</u>.</p>
-                </div>
-            </div>
-
-            <div class="modal-footer">
-                <button onclick="home();" class="btn btn-danger" data-modal-close>Quitter</button>
-                <button onclick="watch(document.getElementById('trigger-dismiss-btn').getAttribute('data-fid'), true);" data-fid="" id="trigger-dismiss-btn" type="button" class="btn btn-success" data-dismiss="modal">Regarder quand même</button>
-            </div>
-
-        </div>
-    </div>
-</div>
-
-<style>
-    #intermission-bar {
-        height: 4px;
-        background: #1f1f1f;
-        position: fixed;
-        width: 100%;
-        z-index: 9;
-        top: 76px;
-    }
-
-    #intermission-bar-inner {
-        transition: width 200ms;
-        height: 4px;
-        background: #e0971c;
-    }
-
-    #intermission-skipper {
-        position: fixed;
-        background: #212121b0;
-        top: 80px;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 40;
-        padding: 10px;
-        cursor: not-allowed;
-    }
-
-    #intermission-skipper.valid {
-        cursor: pointer;
-    }
-</style>
-
-<div id="intermission-bar">
-    <div id="intermission-bar-inner" style="width:0;"></div>
-</div>
-
-<div id="intermission-skipper">
-    Patientez encore 15 secondes...
-</div>
-
-<div id="intermission-note" style="opacity:0;" class="alert alert-info container">
-    <strong>Achetez Familine Movies+</strong> pour regarder vos films sans publicité et soutenir le développement de Familine Movies. <a href="/plus" target="_blank">En savoir plus...</a>
-</div>
-
-<video id="video-item" style="display:none;" controls preload="auto" controlslist="nodownload">
-    <source src="about:blank">
-</video>
-
-<video id="intermission-item" preload="auto" controlslist="nodownload">
-    <source src="about:blank">
-</video>
-
-<div id="details" class="container" style="margin-top:50px;margin-bottom:64px;">
-    <h1 id="details-title">Les effets spéciaux, pour les nuls <span class="badge badge-danger" id="4k_badge">4K</span></h1>
-    <p><i><span id="details-date">2001</span> · <span id="details-producer">Michel Baie</span></i></p>
-    <p id="details-description">Comme d'habitude, Michel Baie met le paquet sur les effets spéciaux.</p>
-</div>
-
-<div id="selector" style="display:none;">
-    <br>
-    <div class="alert alert-warning container">
-        <?= implode("\n", $_CONFIG["Movies"]["schedule"]) ?>
-    </div>
-
-    <h1 style="text-align:center;margin-top: 50px;margin-bottom: 32px;">Qu'est-ce qu'on regarde ?</h1>
-    <div class="container">
-
-        <?php
-
-        $times = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/data/durations.json"), true);
-
-        function id3time($file) {
-            $fparts = explode("/", $file);
-            $afile = $fparts[count($fparts) - 1];
-
-            global $times;
-            $date = (int)date('U');
-
-            return $times[$afile]["duration"];
-        }
-
-        function cmp_by_date($a, $b) {
-            return $a["date"] <=> $b["date"];
-        }
-
-        $list = scandir($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata");
-        $films = [];
-
-        foreach ($list as $item) {
-            if ($item !== "." && $item !== "..") {
-                $films[substr($item, 0, -5)] = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata/" . $item), true);
-                $films[substr($item, 0, -5)]["id"] = substr($item, 0, -5);
-            }
-        }
-
-        usort($films, function ($a, $b) {
-            return $a['date'] <=> $b['date'];
-        });
-
-        $films = array_reverse($films);
-
-        $seconds = 0;
-        foreach ($times as $titem => $tdata) {
-            if ($titem !== "@items") {
-                $seconds = $seconds + $tdata["seconds"];
-            }
-        }
-
-        $secstr = $seconds . " secondes";
-        if ($seconds > 60) {
-            $secstr = round($seconds / 60) . " minutes";
-            if ($seconds > 3600) {
-                $secstr = round($seconds / 3600) . " heures";
-            }
-        }
-
-        ?>
-
-        <p><i id="counts" data-initial-value="<?= count($films) ?> vidéos, <?= $secstr ?> de contenu"><?= count($films) ?> vidéos, <?= $secstr ?> de contenu</i></p>
-
-        <div id="non-search">
-
-            <h2>Contenu disponible en 4K <span class="badge badge-secondary">Nouveau</span></h2>
-            <div class="row">
-                <?php foreach ($films as $index => $film): ?>
-                    <?php if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) && !$film["partner"]): ?>
-                        <div onclick="watch(`<?= $film["id"] ?>`);" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;" data-search-filter="<?= str_replace("\"", "&quot;", $film["title"]) . " " . str_replace("\"", "&quot;", $film["team"]) . " " . str_replace("\"", "&quot;", $film["desc"]) . " " . str_replace("\"", "&quot;", $film["date"]) ?>">
-                            <div class="card">
-                                <img class="card-img-top" src="/cdn/image/?i=<?= $film["id"] ?>" alt="Card image">
-                                <div class="card-body">
-                                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
-                                    <span class="badge badge-secondary">
-                    <?php
-
-                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film["id"] . "." . $film["file"]));
-
-                    ?></span> <?= isset($film["soon"]) && $film["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($film["partner"]) && $film["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
-
-                                    if (isset($film['trigger']) && $film['trigger']) {
-                                        echo('<span class="badge badge-primary">TW: ');
-                                        if (isset($film["tw_flashing"]) && $film["tw_flashing"]) {
-                                            echo("F");
-                                        }
-                                        if (isset($film["tw_suicide"]) && $film["tw_suicide"]) {
-                                            echo("S");
-                                        }
-                                        if (isset($film["tw_violence"]) && $film["tw_violence"]) {
-                                            echo("V");
-                                        }
-                                        if (isset($film["tw_sex"]) && $film["tw_sex"]) {
-                                            echo("X");
-                                        }
-                                        echo("</span>");
-                                    }
-
-                                    ?><br>
-                                    <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["title"] ?></h4>
-                                    <p class="card-text">
-                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["team"] ?></span>
-                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($film["date"], 0, 4) ?></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    <?php endif; ?>
-                <?php endforeach; ?>
-            </div>
-
-            <h2>Les aventures de <?= $_CONFIG["Movies"]["adventures"] ?></h2>
-            <div class="row">
-                <?php foreach ($films as $index => $film): ?>
-                    <?php if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) && (strpos($film["title"], "Les aventures de " . $_CONFIG["Movies"]["adventures"]) !== false || strpos($film["title"], "Vacances de " . $_CONFIG["Movies"]["adventures"]) !== false)): ?>
-                        <div onclick="watch(`<?= $film["id"] ?>`);" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;" data-search-filter="<?= str_replace("\"", "&quot;", $film["title"]) . " " . str_replace("\"", "&quot;", $film["team"]) . " " . str_replace("\"", "&quot;", $film["desc"]) . " " . str_replace("\"", "&quot;", $film["date"]) ?>">
-                            <div class="card">
-                                <img class="card-img-top" src="/cdn/image/?i=<?= $film["id"] ?>" alt="Card image">
-                                <div class="card-body">
-                                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
-                                    <span class="badge badge-secondary">
-                    <?php
-
-                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film["id"] . "." . $film["file"]));
-
-                    ?></span> <?= isset($film["soon"]) && $film["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($film["partner"]) && $film["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
-
-                                    if (isset($film['trigger']) && $film['trigger']) {
-                                        echo('<span class="badge badge-primary">TW: ');
-                                        if (isset($film["tw_flashing"]) && $film["tw_flashing"]) {
-                                            echo("F");
-                                        }
-                                        if (isset($film["tw_suicide"]) && $film["tw_suicide"]) {
-                                            echo("S");
-                                        }
-                                        if (isset($film["tw_violence"]) && $film["tw_violence"]) {
-                                            echo("V");
-                                        }
-                                        if (isset($film["tw_sex"]) && $film["tw_sex"]) {
-                                            echo("X");
-                                        }
-                                        echo("</span>");
-                                    }
-
-                                    ?><br>
-                                    <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["title"] ?></h4>
-                                    <p class="card-text">
-                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["team"] ?></span>
-                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($film["date"], 0, 4) ?></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    <?php endif; ?>
-                <?php endforeach; ?>
-            </div>
-
-            <h2>Musiques par YonKaGor</h2>
-            <div class="row">
-                <?php foreach ($films as $index => $film): ?>
-                    <?php if ($film["team"] === "YonKaGor" && $film["partner"]): ?>
-                        <div onclick="watch(`<?= $film["id"] ?>`);" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;" data-search-filter="<?= str_replace("\"", "&quot;", $film["title"]) . " " . str_replace("\"", "&quot;", $film["team"]) . " " . str_replace("\"", "&quot;", $film["desc"]) . " " . str_replace("\"", "&quot;", $film["date"]) ?>">
-                            <div class="card">
-                                <img class="card-img-top" src="/cdn/image/?i=<?= $film["id"] ?>" alt="Card image">
-                                <div class="card-body">
-                                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
-                                    <span class="badge badge-secondary">
-                    <?php
-
-                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film["id"] . "." . $film["file"]));
-
-                    ?></span> <?= isset($film["soon"]) && $film["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($film["partner"]) && $film["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
-
-                                    if (isset($film['trigger']) && $film['trigger']) {
-                                        echo('<span class="badge badge-primary">TW: ');
-                                        if (isset($film["tw_flashing"]) && $film["tw_flashing"]) {
-                                            echo("F");
-                                        }
-                                        if (isset($film["tw_suicide"]) && $film["tw_suicide"]) {
-                                            echo("S");
-                                        }
-                                        if (isset($film["tw_violence"]) && $film["tw_violence"]) {
-                                            echo("V");
-                                        }
-                                        if (isset($film["tw_sex"]) && $film["tw_sex"]) {
-                                            echo("X");
-                                        }
-                                        echo("</span>");
-                                    }
-
-                                    ?><br>
-                                    <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["title"] ?></h4>
-                                    <p class="card-text">
-                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["team"] ?></span>
-                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($film["date"], 0, 4) ?></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    <?php endif; ?>
-                <?php endforeach; ?>
-            </div>
-
-            <h2>L'ère <?= $_CONFIG["Movies"]["legacy"] ?> <small>(2011-2017)</small></h2>
-            <div class="row">
-                <?php foreach ($films as $index => $film): ?>
-                    <?php if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) && (int)$film["date"] < 201705 !== false && strpos($film["title"], "Les aventures de " . $_CONFIG["Movies"]["adventures"]) === false && $film["team"] !== "YonKaGor" && strpos($film["title"], "Vacances de " . $_CONFIG["Movies"]["adventures"]) === false): ?>
-                        <div onclick="watch(`<?= $film["id"] ?>`);" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;" data-search-filter="<?= str_replace("\"", "&quot;", $film["title"]) . " " . str_replace("\"", "&quot;", $film["team"]) . " " . str_replace("\"", "&quot;", $film["desc"]) . " " . str_replace("\"", "&quot;", $film["date"]) ?>">
-                            <div class="card">
-                                <img class="card-img-top" src="/cdn/image/?i=<?= $film["id"] ?>" alt="Card image">
-                                <div class="card-body">
-                                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
-                                    <span class="badge badge-secondary">
-                    <?php
-
-                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film["id"] . "." . $film["file"]));
-
-                    ?></span> <?= isset($film["soon"]) && $film["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($film["partner"]) && $film["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
-
-                                    if (isset($film['trigger']) && $film['trigger']) {
-                                        echo('<span class="badge badge-primary">TW: ');
-                                        if (isset($film["tw_flashing"]) && $film["tw_flashing"]) {
-                                            echo("F");
-                                        }
-                                        if (isset($film["tw_suicide"]) && $film["tw_suicide"]) {
-                                            echo("S");
-                                        }
-                                        if (isset($film["tw_violence"]) && $film["tw_violence"]) {
-                                            echo("V");
-                                        }
-                                        if (isset($film["tw_sex"]) && $film["tw_sex"]) {
-                                            echo("X");
-                                        }
-                                        echo("</span>");
-                                    }
-
-                                    ?><br>
-                                    <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["title"] ?></h4>
-                                    <p class="card-text">
-                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["team"] ?></span>
-                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($film["date"], 0, 4) ?></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    <?php endif; ?>
-                <?php endforeach; ?>
-            </div>
-
-            <h2>Tout <?= $_CONFIG["Movies"]["current"] ?> à un seul endroit</h2>
-            <div class="row">
-                <?php foreach ($films as $index => $film): ?>
-                    <?php if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) && (int)$film["date"] > 201705 !== false && strpos($film["title"], "Les aventures de " . $_CONFIG["Movies"]["adventures"]) === false && $film["team"] !== "YonKaGor" && strpos($film["title"], "Vacances de " . $_CONFIG["Movies"]["adventures"]) === false): ?>
-                        <div onclick="watch(`<?= $film["id"] ?>`);" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;" data-search-filter="<?= str_replace("\"", "&quot;", $film["title"]) . " " . str_replace("\"", "&quot;", $film["team"]) . " " . str_replace("\"", "&quot;", $film["desc"]) . " " . str_replace("\"", "&quot;", $film["date"]) ?>">
-                            <div class="card">
-                                <img class="card-img-top" src="/cdn/image/?i=<?= $film["id"] ?>" alt="Card image">
-                                <div class="card-body">
-                                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
-                                    <span class="badge badge-secondary">
-                    <?php
-
-                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film["id"] . "." . $film["file"]));
-
-                    ?></span> <?= isset($film["soon"]) && $film["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($film["partner"]) && $film["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
-
-                                    if (isset($film['trigger']) && $film['trigger']) {
-                                        echo('<span class="badge badge-primary">TW: ');
-                                        if (isset($film["tw_flashing"]) && $film["tw_flashing"]) {
-                                            echo("F");
-                                        }
-                                        if (isset($film["tw_suicide"]) && $film["tw_suicide"]) {
-                                            echo("S");
-                                        }
-                                        if (isset($film["tw_violence"]) && $film["tw_violence"]) {
-                                            echo("V");
-                                        }
-                                        if (isset($film["tw_sex"]) && $film["tw_sex"]) {
-                                            echo("X");
-                                        }
-                                        echo("</span>");
-                                    }
-
-                                    ?><br>
-                                    <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["title"] ?></h4>
-                                    <p class="card-text">
-                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["team"] ?></span>
-                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($film["date"], 0, 4) ?></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    <?php endif; ?>
-                <?php endforeach; ?>
-            </div>
-
-        </div>
-    </div>
-</div>
-
-<script>
-    setInterval(() => {
-        document.getElementById("intermission-skipper").onclick = document.getElementById('intermission-item').onended = () => {
-            if (document.getElementById("intermission-skipper").classList.contains("valid")) {
-                document.getElementById('intermission-item').pause();
-                document.getElementById('intermission-item').src = "about:blank";
-                document.getElementById('intermission-item').style.display = "none";
-                document.getElementById('video-item').style.display = "";
-                document.getElementById('intermission-bar').style.display = "none";
-                document.getElementById('intermission-skipper').style.display = "none";
-                document.getElementById('intermission-note').style.display = "none";
-                document.getElementById('video-item').src = "/tv/watch.php?i=" + selectedFilm;
-                document.getElementById('video-item').play();
-            }
-        }
-    }, 1000)
-</script>
-
-<script>
-    function selector(status) {
-        if (status) {
-            document.getElementById("selector").style.display = "";
-            document.body.style.overflow = "";
-        } else {
-            document.getElementById("selector").style.display = "none";
-            document.body.style.overflow = "";
-        }
-    }
-
-    selectedFilm = "";
-    function watch(fid, ignoreTrigger) {
-        document.getElementById('details').style.display = "";
-        selectedFilm = fid;
-
-        if (FilmsData[fid].trigger && !ignoreTrigger) {
-            document.getElementById("tw_flashing").style.display = "none";
-            document.getElementById("tw_suicide").style.display = "none";
-            document.getElementById("tw_violence").style.display = "none";
-            document.getElementById("tw_sex").style.display = "none";
-
-            if (FilmsData[fid]["tw_flashing"]) document.getElementById("tw_flashing").style.display = "";
-            if (FilmsData[fid]["tw_suicide"]) document.getElementById("tw_suicide").style.display = "";
-            if (FilmsData[fid]["tw_violence"]) document.getElementById("tw_violence").style.display = "";
-            if (FilmsData[fid]["tw_sex"]) document.getElementById("tw_sex").style.display = "";
-
-            document.getElementById("trigger-dismiss-btn").setAttribute("data-fid", fid);
-            $("#triggerWarning").modal();
-        } else {
-            document.getElementById("intermission-skipper").classList.remove("valid")
-            document.getElementById("intermission-bar-inner").style.width = "0";
-            document.getElementById('intermission-note').style.display = "";
-            document.getElementById("page-title").innerHTML = FilmsData[fid].title + ` <span class="badge badge-secondary">fin à  <span id="enddate">--:--</span></span> <img onclick="home();" alt="Quitter" title="Arrêter la vidéo" id="close-btn" src="/close.svg">`;
-            selector(false);
-            window.scrollTo(0, 0);
-            document.title = FilmsData[fid].title + " | Familine Movies<?= isset($_FamilineMoviesPlus) && $_FamilineMoviesPlus ? "+" : "" ?>";
-            document.getElementById('intermission-item').src = "/tv/intermission.php";
-            document.getElementById('intermission-item').play();
-            document.getElementById("debug").style.display = "";
-
-            document.getElementById('intermission-item').style.display = "";
-            document.getElementById('intermission-bar').style.display = "";
-            document.getElementById('intermission-skipper').style.display = "";
-            document.getElementById('video-item').style.display = "none";
-
-            document.getElementById("details-title").innerHTML = FilmsData[fid].title;
-            document.getElementById("details-producer").innerHTML = FilmsData[fid].team;
-            document.getElementById("details-description").innerHTML = FilmsData[fid].desc;
-            document.getElementById("details-date").innerHTML = FilmsData[fid].date.toString().substr(0, 4);
-
-            <?php if (isset($_FamilineMoviesPlus) && $_FamilineMoviesPlus): ?>
-            document.getElementById('intermission-item').pause();
-            document.getElementById('intermission-item').src = "about:blank";
-            document.getElementById('intermission-item').style.display = "none";
-            document.getElementById('video-item').style.display = "";
-            document.getElementById('intermission-bar').style.display = "none";
-            document.getElementById('intermission-skipper').style.display = "none";
-            document.getElementById('intermission-note').style.display = "none";
-            document.getElementById('video-item').src = "/tv/watch.php?i=" + selectedFilm;
-            document.getElementById('video-item').play();
-            <?php endif; ?>
-        }
-    }
-
-    function home() {
-        document.getElementById('video-item').pause();
-        document.getElementById('video-item').style.display = "none";
-        document.getElementById('intermission-item').pause();
-        document.getElementById('intermission-item').style.display = "none";
-        document.getElementById('intermission-skipper').style.display = "none";
-        document.getElementById('intermission-bar').style.display = "none";
-        document.getElementById('details').style.display = "none";
-        document.getElementById('body').style.overflow = "auto";
-        selector(true);
-        window.scrollTo(0, 0);
-        document.title = "Accueil | Familine Movies";
-        document.getElementById("debug").style.display = "none";
-        document.getElementById("page-title").innerHTML = "Accueil";
-        document.getElementById('video-item').src = "about:blank";
-        document.getElementById('intermission-item').src = "about:blank";
-    }
-
-    home();
-    selector(true);
-
-    document.getElementById('video-item').addEventListener('progress', () => {
-        document.getElementById("seeking-indicator").style.background = "black";
-        setTimeout(() => {
-            document.getElementById("seeking-indicator").style.background = "green";
-        }, 100)
-    })
-
-    document.getElementById('video-item').addEventListener('timeupdate', () => {
-        document.getElementById("time-indicator").style.background = "black";
-        setTimeout(() => {
-            document.getElementById("time-indicator").style.background = "orange";
-        }, 100)
-    })
-
-    document.getElementById('video-item').addEventListener('waiting', () => {
-        document.getElementById("health-indicator").style.background = "black";
-        setTimeout(() => {
-            document.getElementById("health-indicator").style.background = "cyan";
-        }, 100)
-    })
-
-    document.getElementById('video-item').addEventListener('seeking', () => {
-        document.getElementById("seek-indicator").style.background = "black";
-        setTimeout(() => {
-            document.getElementById("seek-indicator").style.background = "darkred";
-        }, 100)
-    })
-
-    document.getElementById('intermission-item').addEventListener('progress', () => {
-        document.getElementById("seeking-indicator").style.background = "black";
-        setTimeout(() => {
-            document.getElementById("seeking-indicator").style.background = "green";
-        }, 100)
-    })
-
-    document.getElementById('intermission-item').addEventListener('timeupdate', () => {
-        document.getElementById("time-indicator").style.background = "black";
-        setTimeout(() => {
-            document.getElementById("time-indicator").style.background = "orange";
-        }, 100)
-    })
-
-    document.getElementById('intermission-item').addEventListener('waiting', () => {
-        document.getElementById("health-indicator").style.background = "black";
-        setTimeout(() => {
-            document.getElementById("health-indicator").style.background = "cyan";
-        }, 100)
-    })
-
-    document.getElementById('intermission-item').addEventListener('seeking', () => {
-        document.getElementById("seek-indicator").style.background = "black";
-        setTimeout(() => {
-            document.getElementById("seek-indicator").style.background = "darkred";
-        }, 100)
-    })
-
-    setInterval(() => {
-        if (document.getElementById('video-item').paused) return;
-        document.getElementById('video-item').focus();
-
-        remaining = document.getElementById('video-item').duration - document.getElementById('video-item').currentTime;
-        remainingm = Math.ceil(remaining/60);
-
-        try {
-            arr = new Date(new Date().getTime() + (remainingm*(60*1000))).toString().split(" ")[4].split(":");
-            arr.pop();
-            corr = arr.join(":");
-            arr2 = new Date().toString().split(" ")[4].split(":");
-            arr2.pop();
-            corr2 = arr2.join(":");
-            if (corr !== corr2) {
-                document.getElementById('enddate').innerText = corr;
-            } else {
-                document.getElementById('enddate').innerText = "--:--";
-            }
-        } catch (e) {}
-    }, 50)
-
-    setInterval(() => {
-        document.getElementById("intermission-bar-inner").style.width = (100 * (document.getElementById("intermission-item").currentTime / document.getElementById("intermission-item").duration)) + "%";
-
-        if (document.getElementById("intermission-item").currentTime > 15) {
-            document.getElementById("intermission-skipper").innerText = "Cliquez ici pour ignorer l'annonce";
-            document.getElementById("intermission-skipper").classList.add("valid");
-        } else {
-            if (Math.ceil(15 - document.getElementById("intermission-item").currentTime) > 1) {
-                document.getElementById("intermission-skipper").innerText = "Patientez encore " + Math.ceil(15 - document.getElementById("intermission-item").currentTime) + " secondes...";
-            } else {
-                document.getElementById("intermission-skipper").innerText = "Patientez encore " + Math.ceil(15 - document.getElementById("intermission-item").currentTime) + " seconde...";
-            }
-        }
-    }, 50)
-</script>
-
-<?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/footer.php"; ?>
+<?php $_TITLE = "Accueil"; require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/header.php"; ?>
+
+<script>
+    const FilmsData = {
+        <?php
+
+        $list = scandir($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata");
+        $films = [];
+
+        foreach ($list as $item) {
+            if ($item !== "." && $item !== "..") {
+                $films[substr($item, 0, -5)] = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata/" . $item), true);
+                $films[substr($item, 0, -5)]["id"] = substr($item, 0, -5);
+            }
+        }
+
+        usort($films, function ($a, $b) {
+            return $a['date'] <=> $b['date'];
+        });
+
+        $films = array_reverse($films);
+
+        ?>
+        <?php foreach ($films as $film): ?>
+        "<?= $film["id"] ?>": JSON.parse(atob(`<?= base64_encode(utf8_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata/" . $film["id"] . ".json"))) ?>`)),
+        <?php endforeach; ?>
+    }
+
+</script>
+
+<style>
+    #intermission-skipper {
+        backdrop-filter: blur(10px);
+    }
+
+    #video-item {
+        background: black;
+        width: 100%;
+        height: calc(100vh - 76px);
+        margin-top: 44px;
+    }
+
+    #intermission-item {
+        background: black;
+        width: 100%;
+        height: calc(100vh - 76px);
+        margin-top: 44px;
+    }
+
+    #selector {
+        background: #fff;
+        overflow: auto;
+        padding: 50px 8px 8px;
+    }
+
+    #page-title {
+        float: right;
+        margin-top: 5px;
+        margin-right: 10px;
+    }
+
+    #navigation-bar {
+        backdrop-filter: blur(10px);
+        border-bottom: 1px solid #bdbdbd;
+        padding: 4px 4px 7px 4px;
+        position: fixed;
+        top: 32px;
+        left: 0;
+        right: 0;
+        height: 44px;
+        z-index: 9;
+        background: rgba(255, 255, 255, 0.5);
+    }
+
+    #close-btn {
+        vertical-align: middle;
+        cursor: pointer;
+        margin-left: 2px;
+    }
+
+    #close-btn:hover {
+        opacity: .75;
+    }
+
+    #close-btn:active, #close-btn:focus {
+        opacity: .5;
+    }
+
+    #debug {
+        opacity: 0;
+        float: right;
+        margin-top: 7px;
+        margin-right: 15px;
+        transition: opacity 200ms;
+    }
+
+    #debug:hover {
+        opacity: .3;
+    }
+</style>
+
+<div id="navigation-bar">
+    <a href="/" id="logo" style="color: black;text-decoration:none !important;">
+            <img src="https://familine.minteck.org/icns/familine-movies.svg" width="36px" style="vertical-align: middle;">
+            <span style="vertical-align: middle;"><span><span style="font-size:20px;">Familine Movies<?= isset($_FamilineMoviesPlus) && $_FamilineMoviesPlus ? "+" : "" ?></span></span></span></a>
+
+    <span id="page-title">Accueil</span>
+    <span id="debug" style="display:none;">
+        <span style="border-radius:999px;transition:none !important;background:green;width:16px;height:16px;display:inline-block;text-align:right;" id="seeking-indicator"></span>
+        <span style="border-radius:999px;transition:none !important;background:orange;width:16px;height:16px;display:inline-block;text-align:right;" id="time-indicator"></span>
+        <span style="border-radius:999px;transition:none !important;background:cyan;width:16px;height:16px;display:inline-block;text-align:right;" id="health-indicator"></span>
+        <span style="border-radius:999px;transition:none !important;background:darkred;width:16px;height:16px;display:inline-block;text-align:right;" id="seek-indicator"></span>
+    </span>
+</div>
+
+<div class="modal fade" id="triggerWarning">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <h4 class="modal-title">Ce contenu n'est peut-être pas pour tout le monde</h4>
+            </div>
+
+            <div class="modal-body">
+                <p>Ce contenu a été marqué comme dangeureux pour certaines personnes par les administrateurs de Familine Movies. En le regardant, vous acceptez être en mesure de consulter ce contenu ; Familine Movies n'est <b>EN AUCUN CAS</b> responsable de toute bléssure physique ou morale à la suite de la consultation de ce contenu.</p>
+
+                <div id="tw_flashing">
+                    <h2>TW: F — Épilepsie photosensible</h2>
+                    <p>Ce contenu contient des scènes avec des changements de lumière brutaux qui pourraient déclencher des crises d'épilepsie chez certaines personnes.</p>
+                    <p>Si vous êtes épileptique, ou que vous ou un membre de votre famille proche a des antécédents de crises à la suite d'un contenu multimédia, il est conseillé de consulter un médecin avant de regarder ce contenu.</p>
+                    <p>Même si vous n'êtes pas épileptique, il est conseillé de regarder ce contenu dans une pièce suffisamment éclairée, à une grande distance de l'écran, et en adaptant la luminosité de l'écran à celle de la pièce.</p>
+                </div>
+
+                <div id="tw_suicide">
+                    <h2>TW: S — Scènes de suicide</h2>
+                    <p>Ce contenu contient des scènes affichant des pratiques de suicide.</p>
+                    <p>Familine Movies ne partage pas le mal des gens, <b>ce contenu <u>N'EST PAS</u> un appel à l'aide</b> ; nous sommes en communication constante avec l'auteur ou les auteurs du contenu et nous vous assurons qu'il(s) est/sont en bonne santé.</p>
+                    <p>Si vous êtes victime ou témoin de toute action ou parole relative au suicide, vous <b>devez</b> prendre contact avec un professionnel <a href="https://www.infosuicide.org/urgences-aide-ressources/lignes-decoute/" target="_blank">par le biais d'une des nombreuses lignes d'écoute disponibles</a>.</p>
+                </div>
+
+                <div id="tw_violence">
+                    <h2>TW: V — Actes physiquement ou mentalement violents</h2>
+                    <p>Ce contenu contient des scènes affichant des pratiques de violence physique ou verbale.</p>
+                    <p>Familine ne cautionne en aucun cas ces pratiques de violences, qui ont été effectuées uniquement dans le cadre de la réalisation du contenu, et ne saurai être responsable de violences réelles effectuées à la suite de contenu.</p>
+                    <p>Il est déconseillé aux jeunes enfants de moins de 13 ans de consulter ce contenu, en partie ou en totalité.</p>
+                </div>
+
+                <div id="tw_sex">
+                    <h2>TW: S — Contenu sexuellement explicité</h2>
+                    <p>Ce contenu contient des scènes affichant des pratiques pouvant être considérées comme sexuellement explicites.</p>
+                    <p>Vous ne devez regarder ce contenu que si vous en êtes totalement conscient et que vous souhaitez voir du contenu pouvant être sexuellement explicite..</p>
+                    <p>Les mineurs (personnes de moins de 18 ans) ne <b>sont pas</b> autorisés à consulter ce contenu, <u>même avec l'autorisation de leur responsable légal</u>.</p>
+                </div>
+            </div>
+
+            <div class="modal-footer">
+                <button onclick="home();" class="btn btn-danger" data-modal-close>Quitter</button>
+                <button onclick="watch(document.getElementById('trigger-dismiss-btn').getAttribute('data-fid'), true);" data-fid="" id="trigger-dismiss-btn" type="button" class="btn btn-success" data-dismiss="modal">Regarder quand même</button>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<style>
+    #intermission-bar {
+        height: 4px;
+        background: #1f1f1f;
+        position: fixed;
+        width: 100%;
+        z-index: 9;
+        top: 76px;
+    }
+
+    #intermission-bar-inner {
+        transition: width 200ms;
+        height: 4px;
+        background: #e0971c;
+    }
+
+    #intermission-skipper {
+        position: fixed;
+        background: #212121b0;
+        top: 80px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 40;
+        padding: 10px;
+        cursor: not-allowed;
+    }
+
+    #intermission-skipper.valid {
+        cursor: pointer;
+    }
+</style>
+
+<div id="intermission-bar">
+    <div id="intermission-bar-inner" style="width:0;"></div>
+</div>
+
+<div id="intermission-skipper">
+    Patientez encore 15 secondes...
+</div>
+
+<div id="intermission-note" style="opacity:0;" class="alert alert-info container">
+    <strong>Achetez Familine Movies+</strong> pour regarder vos films sans publicité et soutenir le développement de Familine Movies. <a href="/plus" target="_blank">En savoir plus...</a>
+</div>
+
+<video id="video-item" style="display:none;" controls preload="auto" controlslist="nodownload">
+    <source src="about:blank">
+</video>
+
+<video id="intermission-item" preload="auto" controlslist="nodownload">
+    <source src="about:blank">
+</video>
+
+<div id="details" class="container" style="margin-top:50px;margin-bottom:64px;">
+    <h1 id="details-title">Les effets spéciaux, pour les nuls <span class="badge badge-danger" id="4k_badge">4K</span></h1>
+    <p><i><span id="details-date">2001</span> · <span id="details-producer">Michel Baie</span></i></p>
+    <p id="details-description">Comme d'habitude, Michel Baie met le paquet sur les effets spéciaux.</p>
+</div>
+
+<div id="selector" style="display:none;">
+    <br>
+    <div class="alert alert-warning container">
+        <?= implode("\n", $_CONFIG["Movies"]["schedule"]) ?>
+    </div>
+
+    <h1 style="text-align:center;margin-top: 50px;margin-bottom: 32px;">Qu'est-ce qu'on regarde ?</h1>
+    <div class="container">
+
+        <?php
+
+        $times = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/data/durations.json"), true);
+
+        function id3time($file) {
+            $fparts = explode("/", $file);
+            $afile = $fparts[count($fparts) - 1];
+
+            global $times;
+            $date = (int)date('U');
+
+            return $times[$afile]["duration"];
+        }
+
+        function cmp_by_date($a, $b) {
+            return $a["date"] <=> $b["date"];
+        }
+
+        $list = scandir($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata");
+        $films = [];
+
+        foreach ($list as $item) {
+            if ($item !== "." && $item !== "..") {
+                $films[substr($item, 0, -5)] = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata/" . $item), true);
+                $films[substr($item, 0, -5)]["id"] = substr($item, 0, -5);
+            }
+        }
+
+        usort($films, function ($a, $b) {
+            return $a['date'] <=> $b['date'];
+        });
+
+        $films = array_reverse($films);
+
+        $seconds = 0;
+        foreach ($times as $titem => $tdata) {
+            if ($titem !== "@items") {
+                $seconds = $seconds + $tdata["seconds"];
+            }
+        }
+
+        $secstr = $seconds . " secondes";
+        if ($seconds > 60) {
+            $secstr = round($seconds / 60) . " minutes";
+            if ($seconds > 3600) {
+                $secstr = round($seconds / 3600) . " heures";
+            }
+        }
+
+        ?>
+
+        <p><i id="counts" data-initial-value="<?= count($films) ?> vidéos, <?= $secstr ?> de contenu"><?= count($films) ?> vidéos, <?= $secstr ?> de contenu</i></p>
+
+        <div id="non-search">
+
+            <h2>Contenu disponible en 4K <span class="badge badge-secondary">Nouveau</span></h2>
+            <div class="row">
+                <?php foreach ($films as $index => $film): ?>
+                    <?php if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) && !$film["partner"]): ?>
+                        <div onclick="watch(`<?= $film["id"] ?>`);" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;" data-search-filter="<?= str_replace("\"", "&quot;", $film["title"]) . " " . str_replace("\"", "&quot;", $film["team"]) . " " . str_replace("\"", "&quot;", $film["desc"]) . " " . str_replace("\"", "&quot;", $film["date"]) ?>">
+                            <div class="card">
+                                <img class="card-img-top" src="/cdn/image/?i=<?= $film["id"] ?>" alt="Card image">
+                                <div class="card-body">
+                                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
+                                    <span class="badge badge-secondary">
+                    <?php
+
+                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film["id"] . "." . $film["file"]));
+
+                    ?></span> <?= isset($film["soon"]) && $film["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($film["partner"]) && $film["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
+
+                                    if (isset($film['trigger']) && $film['trigger']) {
+                                        echo('<span class="badge badge-primary">TW: ');
+                                        if (isset($film["tw_flashing"]) && $film["tw_flashing"]) {
+                                            echo("F");
+                                        }
+                                        if (isset($film["tw_suicide"]) && $film["tw_suicide"]) {
+                                            echo("S");
+                                        }
+                                        if (isset($film["tw_violence"]) && $film["tw_violence"]) {
+                                            echo("V");
+                                        }
+                                        if (isset($film["tw_sex"]) && $film["tw_sex"]) {
+                                            echo("X");
+                                        }
+                                        echo("</span>");
+                                    }
+
+                                    ?><br>
+                                    <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["title"] ?></h4>
+                                    <p class="card-text">
+                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["team"] ?></span>
+                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($film["date"], 0, 4) ?></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    <?php endif; ?>
+                <?php endforeach; ?>
+            </div>
+
+            <h2>Les aventures de <?= $_CONFIG["Movies"]["adventures"] ?></h2>
+            <div class="row">
+                <?php foreach ($films as $index => $film): ?>
+                    <?php if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) && (strpos($film["title"], "Les aventures de " . $_CONFIG["Movies"]["adventures"]) !== false || strpos($film["title"], "Vacances de " . $_CONFIG["Movies"]["adventures"]) !== false)): ?>
+                        <div onclick="watch(`<?= $film["id"] ?>`);" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;" data-search-filter="<?= str_replace("\"", "&quot;", $film["title"]) . " " . str_replace("\"", "&quot;", $film["team"]) . " " . str_replace("\"", "&quot;", $film["desc"]) . " " . str_replace("\"", "&quot;", $film["date"]) ?>">
+                            <div class="card">
+                                <img class="card-img-top" src="/cdn/image/?i=<?= $film["id"] ?>" alt="Card image">
+                                <div class="card-body">
+                                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
+                                    <span class="badge badge-secondary">
+                    <?php
+
+                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film["id"] . "." . $film["file"]));
+
+                    ?></span> <?= isset($film["soon"]) && $film["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($film["partner"]) && $film["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
+
+                                    if (isset($film['trigger']) && $film['trigger']) {
+                                        echo('<span class="badge badge-primary">TW: ');
+                                        if (isset($film["tw_flashing"]) && $film["tw_flashing"]) {
+                                            echo("F");
+                                        }
+                                        if (isset($film["tw_suicide"]) && $film["tw_suicide"]) {
+                                            echo("S");
+                                        }
+                                        if (isset($film["tw_violence"]) && $film["tw_violence"]) {
+                                            echo("V");
+                                        }
+                                        if (isset($film["tw_sex"]) && $film["tw_sex"]) {
+                                            echo("X");
+                                        }
+                                        echo("</span>");
+                                    }
+
+                                    ?><br>
+                                    <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["title"] ?></h4>
+                                    <p class="card-text">
+                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["team"] ?></span>
+                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($film["date"], 0, 4) ?></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    <?php endif; ?>
+                <?php endforeach; ?>
+            </div>
+
+            <h2>Musiques par YonKaGor</h2>
+            <div class="row">
+                <?php foreach ($films as $index => $film): ?>
+                    <?php if ($film["team"] === "YonKaGor" && $film["partner"]): ?>
+                        <div onclick="watch(`<?= $film["id"] ?>`);" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;" data-search-filter="<?= str_replace("\"", "&quot;", $film["title"]) . " " . str_replace("\"", "&quot;", $film["team"]) . " " . str_replace("\"", "&quot;", $film["desc"]) . " " . str_replace("\"", "&quot;", $film["date"]) ?>">
+                            <div class="card">
+                                <img class="card-img-top" src="/cdn/image/?i=<?= $film["id"] ?>" alt="Card image">
+                                <div class="card-body">
+                                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
+                                    <span class="badge badge-secondary">
+                    <?php
+
+                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film["id"] . "." . $film["file"]));
+
+                    ?></span> <?= isset($film["soon"]) && $film["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($film["partner"]) && $film["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
+
+                                    if (isset($film['trigger']) && $film['trigger']) {
+                                        echo('<span class="badge badge-primary">TW: ');
+                                        if (isset($film["tw_flashing"]) && $film["tw_flashing"]) {
+                                            echo("F");
+                                        }
+                                        if (isset($film["tw_suicide"]) && $film["tw_suicide"]) {
+                                            echo("S");
+                                        }
+                                        if (isset($film["tw_violence"]) && $film["tw_violence"]) {
+                                            echo("V");
+                                        }
+                                        if (isset($film["tw_sex"]) && $film["tw_sex"]) {
+                                            echo("X");
+                                        }
+                                        echo("</span>");
+                                    }
+
+                                    ?><br>
+                                    <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["title"] ?></h4>
+                                    <p class="card-text">
+                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["team"] ?></span>
+                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($film["date"], 0, 4) ?></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    <?php endif; ?>
+                <?php endforeach; ?>
+            </div>
+
+            <h2>L'ère <?= $_CONFIG["Movies"]["legacy"] ?> <small>(2011-2017)</small></h2>
+            <div class="row">
+                <?php foreach ($films as $index => $film): ?>
+                    <?php if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) && (int)$film["date"] < 201705 !== false && strpos($film["title"], "Les aventures de " . $_CONFIG["Movies"]["adventures"]) === false && $film["team"] !== "YonKaGor" && strpos($film["title"], "Vacances de " . $_CONFIG["Movies"]["adventures"]) === false): ?>
+                        <div onclick="watch(`<?= $film["id"] ?>`);" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;" data-search-filter="<?= str_replace("\"", "&quot;", $film["title"]) . " " . str_replace("\"", "&quot;", $film["team"]) . " " . str_replace("\"", "&quot;", $film["desc"]) . " " . str_replace("\"", "&quot;", $film["date"]) ?>">
+                            <div class="card">
+                                <img class="card-img-top" src="/cdn/image/?i=<?= $film["id"] ?>" alt="Card image">
+                                <div class="card-body">
+                                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
+                                    <span class="badge badge-secondary">
+                    <?php
+
+                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film["id"] . "." . $film["file"]));
+
+                    ?></span> <?= isset($film["soon"]) && $film["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($film["partner"]) && $film["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
+
+                                    if (isset($film['trigger']) && $film['trigger']) {
+                                        echo('<span class="badge badge-primary">TW: ');
+                                        if (isset($film["tw_flashing"]) && $film["tw_flashing"]) {
+                                            echo("F");
+                                        }
+                                        if (isset($film["tw_suicide"]) && $film["tw_suicide"]) {
+                                            echo("S");
+                                        }
+                                        if (isset($film["tw_violence"]) && $film["tw_violence"]) {
+                                            echo("V");
+                                        }
+                                        if (isset($film["tw_sex"]) && $film["tw_sex"]) {
+                                            echo("X");
+                                        }
+                                        echo("</span>");
+                                    }
+
+                                    ?><br>
+                                    <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["title"] ?></h4>
+                                    <p class="card-text">
+                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["team"] ?></span>
+                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($film["date"], 0, 4) ?></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    <?php endif; ?>
+                <?php endforeach; ?>
+            </div>
+
+            <h2>Tout <?= $_CONFIG["Movies"]["current"] ?> à un seul endroit</h2>
+            <div class="row">
+                <?php foreach ($films as $index => $film): ?>
+                    <?php if (!file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) && (int)$film["date"] > 201705 !== false && strpos($film["title"], "Les aventures de " . $_CONFIG["Movies"]["adventures"]) === false && $film["team"] !== "YonKaGor" && strpos($film["title"], "Vacances de " . $_CONFIG["Movies"]["adventures"]) === false): ?>
+                        <div onclick="watch(`<?= $film["id"] ?>`);" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;" data-search-filter="<?= str_replace("\"", "&quot;", $film["title"]) . " " . str_replace("\"", "&quot;", $film["team"]) . " " . str_replace("\"", "&quot;", $film["desc"]) . " " . str_replace("\"", "&quot;", $film["date"]) ?>">
+                            <div class="card">
+                                <img class="card-img-top" src="/cdn/image/?i=<?= $film["id"] ?>" alt="Card image">
+                                <div class="card-body">
+                                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film['id'] . '@4K.' . $film["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
+                                    <span class="badge badge-secondary">
+                    <?php
+
+                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film["id"] . "." . $film["file"]));
+
+                    ?></span> <?= isset($film["soon"]) && $film["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($film["partner"]) && $film["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
+
+                                    if (isset($film['trigger']) && $film['trigger']) {
+                                        echo('<span class="badge badge-primary">TW: ');
+                                        if (isset($film["tw_flashing"]) && $film["tw_flashing"]) {
+                                            echo("F");
+                                        }
+                                        if (isset($film["tw_suicide"]) && $film["tw_suicide"]) {
+                                            echo("S");
+                                        }
+                                        if (isset($film["tw_violence"]) && $film["tw_violence"]) {
+                                            echo("V");
+                                        }
+                                        if (isset($film["tw_sex"]) && $film["tw_sex"]) {
+                                            echo("X");
+                                        }
+                                        echo("</span>");
+                                    }
+
+                                    ?><br>
+                                    <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["title"] ?></h4>
+                                    <p class="card-text">
+                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $film["team"] ?></span>
+                                        <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($film["date"], 0, 4) ?></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    <?php endif; ?>
+                <?php endforeach; ?>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<script>
+    setInterval(() => {
+        document.getElementById("intermission-skipper").onclick = document.getElementById('intermission-item').onended = () => {
+            if (document.getElementById("intermission-skipper").classList.contains("valid")) {
+                document.getElementById('intermission-item').pause();
+                document.getElementById('intermission-item').src = "about:blank";
+                document.getElementById('intermission-item').style.display = "none";
+                document.getElementById('video-item').style.display = "";
+                document.getElementById('intermission-bar').style.display = "none";
+                document.getElementById('intermission-skipper').style.display = "none";
+                document.getElementById('intermission-note').style.display = "none";
+                document.getElementById('video-item').src = "/tv/watch.php?i=" + selectedFilm;
+                document.getElementById('video-item').play();
+            }
+        }
+    }, 1000)
+</script>
+
+<script>
+    function selector(status) {
+        if (status) {
+            document.getElementById("selector").style.display = "";
+            document.body.style.overflow = "";
+        } else {
+            document.getElementById("selector").style.display = "none";
+            document.body.style.overflow = "";
+        }
+    }
+
+    selectedFilm = "";
+    function watch(fid, ignoreTrigger) {
+        document.getElementById('details').style.display = "";
+        selectedFilm = fid;
+
+        if (FilmsData[fid].trigger && !ignoreTrigger) {
+            document.getElementById("tw_flashing").style.display = "none";
+            document.getElementById("tw_suicide").style.display = "none";
+            document.getElementById("tw_violence").style.display = "none";
+            document.getElementById("tw_sex").style.display = "none";
+
+            if (FilmsData[fid]["tw_flashing"]) document.getElementById("tw_flashing").style.display = "";
+            if (FilmsData[fid]["tw_suicide"]) document.getElementById("tw_suicide").style.display = "";
+            if (FilmsData[fid]["tw_violence"]) document.getElementById("tw_violence").style.display = "";
+            if (FilmsData[fid]["tw_sex"]) document.getElementById("tw_sex").style.display = "";
+
+            document.getElementById("trigger-dismiss-btn").setAttribute("data-fid", fid);
+            $("#triggerWarning").modal();
+        } else {
+            document.getElementById("intermission-skipper").classList.remove("valid")
+            document.getElementById("intermission-bar-inner").style.width = "0";
+            document.getElementById('intermission-note').style.display = "";
+            document.getElementById("page-title").innerHTML = FilmsData[fid].title + ` <span class="badge badge-secondary">fin à  <span id="enddate">--:--</span></span> <img onclick="home();" alt="Quitter" title="Arrêter la vidéo" id="close-btn" src="/close.svg">`;
+            selector(false);
+            window.scrollTo(0, 0);
+            document.title = FilmsData[fid].title + " | Familine Movies<?= isset($_FamilineMoviesPlus) && $_FamilineMoviesPlus ? "+" : "" ?>";
+            document.getElementById('intermission-item').src = "/tv/intermission.php";
+            document.getElementById('intermission-item').play();
+            document.getElementById("debug").style.display = "";
+
+            document.getElementById('intermission-item').style.display = "";
+            document.getElementById('intermission-bar').style.display = "";
+            document.getElementById('intermission-skipper').style.display = "";
+            document.getElementById('video-item').style.display = "none";
+
+            document.getElementById("details-title").innerHTML = FilmsData[fid].title;
+            document.getElementById("details-producer").innerHTML = FilmsData[fid].team;
+            document.getElementById("details-description").innerHTML = FilmsData[fid].desc;
+            document.getElementById("details-date").innerHTML = FilmsData[fid].date.toString().substr(0, 4);
+
+            <?php if (isset($_FamilineMoviesPlus) && $_FamilineMoviesPlus): ?>
+            document.getElementById('intermission-item').pause();
+            document.getElementById('intermission-item').src = "about:blank";
+            document.getElementById('intermission-item').style.display = "none";
+            document.getElementById('video-item').style.display = "";
+            document.getElementById('intermission-bar').style.display = "none";
+            document.getElementById('intermission-skipper').style.display = "none";
+            document.getElementById('intermission-note').style.display = "none";
+            document.getElementById('video-item').src = "/tv/watch.php?i=" + selectedFilm;
+            document.getElementById('video-item').play();
+            <?php endif; ?>
+        }
+    }
+
+    function home() {
+        document.getElementById('video-item').pause();
+        document.getElementById('video-item').style.display = "none";
+        document.getElementById('intermission-item').pause();
+        document.getElementById('intermission-item').style.display = "none";
+        document.getElementById('intermission-skipper').style.display = "none";
+        document.getElementById('intermission-bar').style.display = "none";
+        document.getElementById('details').style.display = "none";
+        document.getElementById('body').style.overflow = "auto";
+        selector(true);
+        window.scrollTo(0, 0);
+        document.title = "Accueil | Familine Movies";
+        document.getElementById("debug").style.display = "none";
+        document.getElementById("page-title").innerHTML = "Accueil";
+        document.getElementById('video-item').src = "about:blank";
+        document.getElementById('intermission-item').src = "about:blank";
+    }
+
+    home();
+    selector(true);
+
+    document.getElementById('video-item').addEventListener('progress', () => {
+        document.getElementById("seeking-indicator").style.background = "black";
+        setTimeout(() => {
+            document.getElementById("seeking-indicator").style.background = "green";
+        }, 100)
+    })
+
+    document.getElementById('video-item').addEventListener('timeupdate', () => {
+        document.getElementById("time-indicator").style.background = "black";
+        setTimeout(() => {
+            document.getElementById("time-indicator").style.background = "orange";
+        }, 100)
+    })
+
+    document.getElementById('video-item').addEventListener('waiting', () => {
+        document.getElementById("health-indicator").style.background = "black";
+        setTimeout(() => {
+            document.getElementById("health-indicator").style.background = "cyan";
+        }, 100)
+    })
+
+    document.getElementById('video-item').addEventListener('seeking', () => {
+        document.getElementById("seek-indicator").style.background = "black";
+        setTimeout(() => {
+            document.getElementById("seek-indicator").style.background = "darkred";
+        }, 100)
+    })
+
+    document.getElementById('intermission-item').addEventListener('progress', () => {
+        document.getElementById("seeking-indicator").style.background = "black";
+        setTimeout(() => {
+            document.getElementById("seeking-indicator").style.background = "green";
+        }, 100)
+    })
+
+    document.getElementById('intermission-item').addEventListener('timeupdate', () => {
+        document.getElementById("time-indicator").style.background = "black";
+        setTimeout(() => {
+            document.getElementById("time-indicator").style.background = "orange";
+        }, 100)
+    })
+
+    document.getElementById('intermission-item').addEventListener('waiting', () => {
+        document.getElementById("health-indicator").style.background = "black";
+        setTimeout(() => {
+            document.getElementById("health-indicator").style.background = "cyan";
+        }, 100)
+    })
+
+    document.getElementById('intermission-item').addEventListener('seeking', () => {
+        document.getElementById("seek-indicator").style.background = "black";
+        setTimeout(() => {
+            document.getElementById("seek-indicator").style.background = "darkred";
+        }, 100)
+    })
+
+    setInterval(() => {
+        if (document.getElementById('video-item').paused) return;
+        document.getElementById('video-item').focus();
+
+        remaining = document.getElementById('video-item').duration - document.getElementById('video-item').currentTime;
+        remainingm = Math.ceil(remaining/60);
+
+        try {
+            arr = new Date(new Date().getTime() + (remainingm*(60*1000))).toString().split(" ")[4].split(":");
+            arr.pop();
+            corr = arr.join(":");
+            arr2 = new Date().toString().split(" ")[4].split(":");
+            arr2.pop();
+            corr2 = arr2.join(":");
+            if (corr !== corr2) {
+                document.getElementById('enddate').innerText = corr;
+            } else {
+                document.getElementById('enddate').innerText = "--:--";
+            }
+        } catch (e) {}
+    }, 50)
+
+    setInterval(() => {
+        document.getElementById("intermission-bar-inner").style.width = (100 * (document.getElementById("intermission-item").currentTime / document.getElementById("intermission-item").duration)) + "%";
+
+        if (document.getElementById("intermission-item").currentTime > 15) {
+            document.getElementById("intermission-skipper").innerText = "Cliquez ici pour ignorer l'annonce";
+            document.getElementById("intermission-skipper").classList.add("valid");
+        } else {
+            if (Math.ceil(15 - document.getElementById("intermission-item").currentTime) > 1) {
+                document.getElementById("intermission-skipper").innerText = "Patientez encore " + Math.ceil(15 - document.getElementById("intermission-item").currentTime) + " secondes...";
+            } else {
+                document.getElementById("intermission-skipper").innerText = "Patientez encore " + Math.ceil(15 - document.getElementById("intermission-item").currentTime) + " seconde...";
+            }
+        }
+    }, 50)
+</script>
+
+<?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/footer.php"; ?>
diff --git a/tv/intermission.php b/tv/intermission.php
index e9b9e06..1d0ddb6 100644
--- a/tv/intermission.php
+++ b/tv/intermission.php
@@ -1,23 +1,23 @@
-<?php
-
-require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/session.php";
-
-$list = scandir($_SERVER['DOCUMENT_ROOT'] . "/data/intermissions");
-$plist = [];
-
-foreach ($list as $item) {
-    if ($item !== "." && $item !== "..") {
-        array_push($plist, $item);
-    }
-}
-
-shuffle($plist);
-$film = $plist[rand(0, count($plist) - 1)];
-$id = bin2hex(random_bytes(96));
-
-$source = $_SERVER['DOCUMENT_ROOT'] . "/data/intermissions/" . $film;
-$dest = $_SERVER['DOCUMENT_ROOT'] . "/cdn/video/" . $id . ".mp4";
-symlink($source, $dest);
-
-header("Location: /cdn/video/" . $id . ".mp4");
+<?php
+
+require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/session.php";
+
+$list = scandir($_SERVER['DOCUMENT_ROOT'] . "/data/intermissions");
+$plist = [];
+
+foreach ($list as $item) {
+    if ($item !== "." && $item !== "..") {
+        array_push($plist, $item);
+    }
+}
+
+shuffle($plist);
+$film = $plist[rand(0, count($plist) - 1)];
+$id = bin2hex(random_bytes(96));
+
+$source = $_SERVER['DOCUMENT_ROOT'] . "/data/intermissions/" . $film;
+$dest = $_SERVER['DOCUMENT_ROOT'] . "/cdn/video/" . $id . ".mp4";
+symlink($source, $dest);
+
+header("Location: /cdn/video/" . $id . ".mp4");
 exit;
\ No newline at end of file
diff --git a/tv/watch.php b/tv/watch.php
index def8da7..de831af 100644
--- a/tv/watch.php
+++ b/tv/watch.php
@@ -1,27 +1,27 @@
-<?php
-
-require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/session.php";
-
-if (!isset($_GET['i'])) {
-    die();
-}
-
-if (strpos($_GET['i'], ".") !== false || strpos($_GET['i'], "/") !== false) {
-    die();
-}
-
-$film = $_GET['i'];
-$id = bin2hex(random_bytes(96));
-
-if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . '@4K.mp4')) {
-    $source4k = $_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . '@4K.mp4';
-    $dest4k = $_SERVER['DOCUMENT_ROOT'] . "/cdn/video/" . $id . ".mp4";
-    symlink($source4k, $dest4k);
-} else {
-    $source = $_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . '.mp4';
-    $dest = $_SERVER['DOCUMENT_ROOT'] . "/cdn/video/" . $id . ".mp4";
-    symlink($source, $dest);
-}
-
-header("Location: /cdn/video/" . $id . ".mp4");
+<?php
+
+require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/session.php";
+
+if (!isset($_GET['i'])) {
+    die();
+}
+
+if (strpos($_GET['i'], ".") !== false || strpos($_GET['i'], "/") !== false) {
+    die();
+}
+
+$film = $_GET['i'];
+$id = bin2hex(random_bytes(96));
+
+if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . '@4K.mp4')) {
+    $source4k = $_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . '@4K.mp4';
+    $dest4k = $_SERVER['DOCUMENT_ROOT'] . "/cdn/video/" . $id . ".mp4";
+    symlink($source4k, $dest4k);
+} else {
+    $source = $_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . '.mp4';
+    $dest = $_SERVER['DOCUMENT_ROOT'] . "/cdn/video/" . $id . ".mp4";
+    symlink($source, $dest);
+}
+
+header("Location: /cdn/video/" . $id . ".mp4");
 exit;
\ No newline at end of file
-- 
cgit