Initial commit

1 files changed, 738 insertions, 0 deletions

diff --git a/watch/index.php b/watch/index.php
new file mode 100644
index 0000000..f175d1c
--- /dev/null
+++ b/watch/index.php
@@ -0,0 +1,738 @@
+<?php
+
+if (!isset($_GET['v'])) {
+    header("Location: /");
+    die();
+}
+
+if (strpos($_GET['v'], ".") !== false || strpos($_GET['v'], "/") !== false) {
+    header("Location: /");
+    die();
+}
+
+if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata/" . $_GET['v'] . ".json")) {
+    $film = $_GET['v'];
+    $data = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/data/films/metadata/" . $_GET['v'] . ".json"), true);
+} else {
+    header("Location: /");
+    die();
+}
+
+if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . '@4K.' . $data["file"])) {
+    $supporting4k = true;
+}
+
+$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');
+
+    if (in_array($afile, $times["@items"]) && ($date - $times[$afile]["date"] < 108000)) {
+        return $times[$afile]["duration"];
+    } else {
+        include_once($_SERVER['DOCUMENT_ROOT'] . "/includes/getid3/getid3.php");
+        $getID3 = new getID3;
+        $id3 = $getID3->analyze($file);
+
+        if (isset($id3["playtime_string"])) {
+            $str = $id3["playtime_string"];
+            $str2 = (int)round($id3["playtime_seconds"]);
+        } else {
+            $str = "-:--";
+            $str2 = 0;
+        }
+
+        $times[$afile] = [
+            "duration" => $str,
+            "seconds" => $str2,
+            "date" => $date
+        ];
+        array_push($times["@items"], $afile);
+
+        return $str;
+    }
+}
+
+$_TITLE = $data["title"]; require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/header.php"; ?>
+
+    <a href="/" id="logo" style="color: black;text-decoration:none !important;"><div class="container" style="margin-top: 10px;width:max-content;text-align:center;display:grid;grid-template-columns:48px 1fr;">
+            <img src="https://familine.minteck.org/icns/familine-movies.svg" style="vertical-align: middle;" width="48px">
+            <span style="vertical-align: middle;margin-left:10px;display: flex;align-items: center;justify-content: center;">
+        <span style="font-size:24px;">Familine Movies</span>
+
+    </span>
+        </div></a>
+
+<div class="modal fade" id="4k_oobe">
+    <div class="modal-dialog modal-md modal-dialog-centered">
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <h4 class="modal-title">Ce contenu est disponible en 4K</h4>
+            </div>
+
+            <div class="modal-body">
+                <h1 style="text-align:center;">
+                    <span class="badge badge-danger">4K</span>
+                </h1>
+                <p>Depuis Familine Movies 8.0, vous pouvez désormais visionner certains des films les plus récents en 4K. Mais avant toute chose, notez que la qualité d'image reste la même et seule la finesse et le niveau de détail est amélioré.</p>
+                <p>Si votre connexion Internet et la puissance de votre machine le permettent, nous essayerons de lire ce contenu en 4K tant que possible.</p>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" class="btn btn-success" onclick="localStorage.setItem('4k_oobe', '1');" data-dismiss="modal">Compris</button>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+<?php if (isset($data['trigger']) && $data['trigger']): ?>
+    <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>
+
+                    <?php if (isset($data['tw_flashing']) && $data['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>
+                    <?php endif; ?>
+
+                    <?php if (isset($data['tw_suicide']) && $data['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>
+                    <?php endif; ?>
+
+                    <?php if (isset($data['tw_violence']) && $data['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>
+                    <?php endif; ?>
+
+                    <?php if (isset($data['tw_sex']) && $data['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>
+                    <?php endif; ?>
+                </div>
+
+                <div class="modal-footer">
+                    <a href="/" class="btn btn-danger">Quitter</a>
+                    <button type="button" class="btn btn-success" data-dismiss="modal">Regarder quand même</button>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <script>$("#triggerWarning").modal();</script>
+<?php endif; ?>
+
+<script>
+
+    if (localStorage.getItem("4k_oobe") !== "1" && <?= $supporting4k ? "true" : "false" ?>) {
+        $("#4k_oobe").modal();
+    }
+
+</script>
+
+<hr id="/player" style="margin-top:10px;margin-bottom:30px;">
+<div class="container" id="main-container" style="display:grid;grid-template-columns: 1fr 1fr;grid-column-gap: 20px;">
+    <span id="video-box">
+    <video
+            id="video"
+            preload="auto"
+            style="width: 50vw;border-radius:5px;background:black;"
+            controls
+            controlslist="nodownload"
+    >
+        <?php
+
+        $source = $_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . '.' . $data["file"];
+        $id = bin2hex(random_bytes(96));
+        $dest = $_SERVER['DOCUMENT_ROOT'] . "/cdn/video/" . $id . "." . $data["file"];
+        symlink($source, $dest);
+
+        if ($supporting4k) {
+            $source4k = $_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . '@4K.' . $data["file"];
+            $dest4k = $_SERVER['DOCUMENT_ROOT'] . "/cdn/video/" . $id . "+4k." . $data["file"];
+            symlink($source4k, $dest4k);
+        }
+
+        ?>
+        <source src="<?= $supporting4k ? "/cdn/video/" . $id . "+4k." . $data["file"] : "/cdn/video/" . $id . "." . $data["file"] ?>" type="<?= mime_content_type($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . "." . $data["file"]) ?>" />
+    </video>
+    <?php if ($supporting4k): ?>
+    <video
+            id="video-fhd"
+            preload="auto"
+            style="width: 50vw;border-radius:5px;background:black;display:none;"
+            controls
+            controlslist="nodownload"
+            poster="/cdn/image/?i=<?= $_GET['v'] ?>"
+    >
+        <source src="<?= "/cdn/video/" . $id . "." . $data["file"] ?>" type="<?= mime_content_type($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $film . "." . $data["file"]) ?>" />
+    </video>
+
+    <script>
+        keepHd = 0;
+
+        setInterval(() => {
+            if (loading && document.getElementById('video').style.display !== "none") {
+                // Step 1: Restart playing in HD
+                document.getElementById('video').pause();
+                document.getElementById('video-fhd').currentTime = document.getElementById('video').currentTime;
+                document.getElementById('video-fhd').play();
+
+                // Step 2: Show the corresponding video element
+                document.getElementById('video').style.display = "none";
+                document.getElementById('video-fhd').style.display = "";
+
+                // Step 3: Change the indicator
+                document.getElementById('4k_badge').outerHTML = "";
+                document.getElementById('hdwarn').style.display = "";
+            }
+        }, 10000)
+    </script>
+    <?php endif; ?>
+
+    <span id="video-controls">
+        <span id="play" onclick="playpause();" style="padding: 4px;position: relative;top: 2px;height: 32px;
+width: 32px;left: 16px;border-radius: 999px;background: transparent;cursor:pointer;display:none;" title="Lire [k]">
+            <img src="" id="play-logo" style="filter:invert(1);width:24px;height:24px;position:relative;top:-2px;pointer-events:none;">
+        </span>
+        <span id="rewind" onclick="rwsec();" style="padding: 4px;position: relative;top: 2px;height: 32px;
+width: 32px;left: 16px;border-radius: 999px;background: transparent;cursor:pointer;display:none;" title="Reculer de 10 secondes [p]">
+            <img src="" id="rewind-logo" style="filter:invert(1);width:24px;height:24px;position:relative;top:-2px;pointer-events:none;">
+        </span>
+        <span id="video-bar" style="width:45vw;height:5px;display:none;background:rgba(255,255,255,.5);position:absolute;top:0;left:0;">
+            <span id="video-bar-inner" style="height: 5px;width: 0%;display: none;position: relative;background: white;top: -13px;transition: width 200ms;"></span>
+            <span id="video-bar-buffer" style="height: 5px; width: 0%; display: none; position: absolute; background: rgba(255, 255, 255, 0.3) none repeat scroll 0% 0%; top: 0px; left: 0px;transition: width 200ms;"></span>
+        </span>
+        <span id="info" style="color: white;position: relative;left: 24px;display:none;"><span id="info-elapsed"><span id="elapsed" style="font-family: monospace;">0:00:00</span>/<span id="total" style="font-family: monospace;">0:00:00</span> &nbsp; </span>Il reste <span id="remaining">moins d'une minute</span></span>
+        <span id="forward" onclick="fwsec();" style="float:right;padding: 4px;position: relative;top: 2px;height: 32px;
+width: 32px;left: -48px;border-radius: 999px;background: transparent;cursor:pointer;display:none;" title="Avancer de 10 secondes [n]">
+            <img src="" id="forward-logo" style="filter:invert(1);width:24px;height:24px;position:relative;top:-2px;pointer-events:none;">
+        </span>
+        <span onclick="fullscreen();" id="full" style="float:right;padding: 4px;position: relative;top: 2px;height: 32px;
+width: 32px;right: -16px;border-radius: 999px;background: transparent;cursor:pointer;display:none;" title="Passer en plein écran [f]">
+            <img src="" id="full-logo" style="filter:invert(1);width:24px;height:24px;position:relative;top:-2px;pointer-events:none;"/>
+        </span>
+        </span>
+    </span>
+
+        <div>
+            <script>
+
+                origtitle = document.title;
+
+                function getbuffer() {
+                    if (navigator.userAgent.includes("Chrome/")) { // Once more, this FUCKING DOESN'T WORK ON FUCKING CHROME! FUCK YOU GOOGLE
+                        return document.getElementById('video').duration;
+                    } else {
+                        try {
+                            return document.getElementById('video').buffered.end(0);
+                        } catch (e) {
+                            return 0;
+                        }
+                    }
+                }
+
+            </script>
+            <br>
+            <p>Le film se terminera à <span id="enddate" style="font-family:monospace;">--:--</span>, c'est-à-dire dans <span id="endtime">moins d'une minute</span></p>
+            <p>
+                <details>
+                    <summary>Informations techniques</summary>
+
+                    <div style="font-family:monospace;">
+                        <div style="display:grid;grid-template-columns: 1fr 1fr;">
+                            <span>buffer:</span>
+                            <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>player:</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>outOfRange:</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>playerSeek:</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>
+                        </div>
+                    </div>
+
+                    <script>
+                        if (document.getElementById('video').style.display !== "none") {
+                            videoElement = document.getElementById('video');
+                        } else {
+                            videoElement = document.getElementById('video-fhd');
+                        }
+
+                        setInterval(() => {
+                            document.getElementById("data-toreceive").innerText = (videoElement.duration - videoElement.buffered.end(0)).toString(16).replace(".", "ff");
+                        }, 50)
+
+                        document.getElementById('video').addEventListener('progress', () => {
+                            document.getElementById("seeking-indicator").style.background = "black";
+                            setTimeout(() => {
+                                document.getElementById("seeking-indicator").style.background = "green";
+                            }, 100)
+                        })
+
+                        document.getElementById('video').addEventListener('timeupdate', () => {
+                            document.getElementById("time-indicator").style.background = "black";
+                            setTimeout(() => {
+                                document.getElementById("time-indicator").style.background = "orange";
+                            }, 100)
+                        })
+
+                        document.getElementById('video').addEventListener('waiting', () => {
+                            document.getElementById("health-indicator").style.background = "black";
+                            setTimeout(() => {
+                                document.getElementById("health-indicator").style.background = "cyan";
+                            }, 100)
+                        })
+
+                        document.getElementById('video').addEventListener('seeking', () => {
+                            document.getElementById("seek-indicator").style.background = "black";
+                            setTimeout(() => {
+                                document.getElementById("seek-indicator").style.background = "darkred";
+                            }, 100)
+                        })
+
+                        document.getElementById('video').addEventListener('seeked', () => {
+                            document.getElementById("seek-indicator").style.background = "black";
+                            setTimeout(() => {
+                                document.getElementById("seek-indicator").style.background = "darkred";
+                            }, 100)
+                        })
+
+                        try {
+                            document.getElementById('video-fhd').addEventListener('seeked', () => {
+                                document.getElementById("seek-indicator").style.background = "black";
+                                setTimeout(() => {
+                                    document.getElementById("seek-indicator").style.background = "darkred";
+                                }, 100)
+                            })
+
+                            document.getElementById('video-fhd').addEventListener('seeking', () => {
+                                document.getElementById("seek-indicator").style.background = "black";
+                                setTimeout(() => {
+                                    document.getElementById("seek-indicator").style.background = "darkred";
+                                }, 100)
+                            })
+
+                            document.getElementById('video-fhd').addEventListener('waiting', () => {
+                                document.getElementById("health-indicator").style.background = "black";
+                                setTimeout(() => {
+                                    document.getElementById("health-indicator").style.background = "cyan";
+                                }, 100)
+                            })
+
+                            document.getElementById('video-fhd').addEventListener('progress', () => {
+                                document.getElementById("seeking-indicator").style.background = "black";
+                                setTimeout(() => {
+                                    document.getElementById("seeking-indicator").style.background = "green";
+                                }, 100)
+                            })
+
+                            document.getElementById('video-fhd').addEventListener('timeupdate', () => {
+                                document.getElementById("time-indicator").style.background = "black";
+                                setTimeout(() => {
+                                    document.getElementById("time-indicator").style.background = "orange";
+                                }, 100)
+                            })
+                        } catch (e) {
+                            console.error(e);
+                        }
+                    </script>
+                </details>
+            </p>
+            <?php if (isset($data['trigger']) && $data['trigger']): ?>
+            <p class="text-primary">Ce contenu est restreint car :
+                <ul>
+                    <?php if (isset($data['tw_flashing']) && $data['tw_flashing']): ?><li class="text-primary">il contient des scènes avec des changements de lumière brutaux</li><?php endif; ?>
+                    <?php if (isset($data['tw_suicide']) && $data['tw_suicide']): ?><li class="text-primary">il contient des scènes affichant des pratiques de suicide — <a target="_blank" href="https://www.infosuicide.org/urgences-aide-ressources/lignes-decoute/">Lignes d'écoute</a></li><?php endif; ?>
+                    <?php if (isset($data['tw_violence']) && $data['tw_violence']): ?><li class="text-primary">il contient des scènes physiquement ou mentalement violentes</li><?php endif; ?>
+                    <?php if (isset($data['tw_sex']) && $data['tw_sex']): ?><li class="text-primary">il contient des scènes sexuellement explicites</li><?php endif; ?>
+                </ul>
+            </p>
+            <?php endif; ?>
+            <p id="hdwarn" class="text-warning" style="display:none;">Les performances de votre appareil ou de votre réseau ne vous permettent pas de regarder ce contenu en 4K. Par conséquent, la résolution a été définie sur HD.</p>
+        </div>
+    </div>
+
+    <div class="container" id="video-info">
+        <h1><?= $data["title"] ?> <?php if ($supporting4k): ?><span class="badge badge-danger" id="4k_badge">4K</span><?php endif; ?></h1>
+        <p><i><?= substr($data["date"], 0, 4) ?> · <?= $data["team"] ?></i></p>
+        <p><?= $data["desc"] ?></p>
+
+        <h2>À regarder ensuite</h2>
+        <?php
+
+        $watchnext = false;
+
+        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'];
+        });
+
+        ?>
+
+        <div class="row" style="flex-direction: row-reverse;">
+            <?php $nb = 0;foreach ($films as $index => $cfilm): ?>
+            <?php if ($cfilm["date"] > $data["date"] && $nb < 4): ?>
+            <?php $nb++;$watchnext = true; ?>
+                <div onclick="location.href=`/watch/?v=<?= $cfilm["id"] ?>`;" class="col-sm-3 film-card" style="padding-top:15px;padding-bottom:15px;">
+                    <div class="card">
+                        <img class="card-img-top" src="/cdn/image/?i=<?= $cfilm["id"] ?>" alt="Card image">
+                        <div class="card-body">
+                    <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $cfilm['id'] . '@4K.' . $cfilm["file"]) ? '<span class="badge badge-danger">4K</span>' : '' ?>
+                                <span class="badge badge-secondary">
+                    <?php
+
+                    echo(id3time($_SERVER['DOCUMENT_ROOT'] . "/data/films/video/" . $cfilm["id"] . "." . $cfilm["file"]));
+
+                    ?></span> <?= isset($cfilm["soon"]) && $cfilm["soon"] ? '<span class="badge badge-warning badge-pill">Prochainement !</span>' : '' ?> <?= isset($cfilm["partner"]) && $cfilm["partner"] ? '<span class="badge badge-info">Suggestion</span>' : '' ?> <?php
+
+                            if (isset($cfilm['trigger']) && $cfilm['trigger']) {
+                                echo('<span class="badge badge-primary">TW: ');
+                                if (isset($cfilm["tw_flashing"]) && $cfilm["tw_flashing"]) {
+                                    echo("F");
+                                }
+                                if (isset($cfilm["tw_suicide"]) && $cfilm["tw_suicide"]) {
+                                    echo("S");
+                                }
+                                if (isset($cfilm["tw_violence"]) && $cfilm["tw_violence"]) {
+                                    echo("V");
+                                }
+                                if (isset($cfilm["tw_sex"]) && $cfilm["tw_sex"]) {
+                                    echo("X");
+                                }
+                                echo("</span>");
+                            }
+
+                            ?><br>
+                            <h4 class="card-title" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $cfilm["title"] ?></h4>
+                            <p class="card-text">
+                                <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= $cfilm["team"] ?></span>
+                                <span style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><?= substr($cfilm["date"], 0, 4) ?></span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            <?php endif;endforeach; ?>
+        </div>
+    </div>
+    <?php if (!$watchnext): ?>
+    <p style="text-align:center;"><i>Il s'agit du film le plus récent ajouté sur Familine Movies, vous pourriez peut-être trouver votre bonheur dans les films plus anciens.</i></p>
+    <?php endif; ?>
+</div>
+
+<style>
+
+    @keyframes load {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    #play:hover, #full:hover, #forward:hover, #forward:hover, #rewind:hover, #rewind:hover {
+        background: rgba(0, 0, 0, .25) !important;
+    }
+
+    #play:active, #play:focus, #full:active, #full:focus, #forward:active, #forward:focus, #rewind:active, #rewind:focus {
+        background: rgba(0, 0, 0, .5) !important;
+    }
+
+    @media (max-width: 1185px) {
+        #info-elapsed {
+            display: none;
+        }
+    }
+
+    @media (max-width: 985px) {
+        #main-container {
+            grid-template-columns: 1fr !important;
+        }
+    }
+
+    @media (max-width: 870px) {
+        #info-elapsed {
+            display: none;
+        }
+
+        #video {
+            width: calc(100vw - 32px) !important;
+        }
+
+        #video-controls, #video-bar {
+            width: calc(95vw - 32px) !important;
+        }
+    }
+
+    .list-group-item.active {
+        z-index: unset !important;
+    }
+
+    * {
+        transition: all 200ms;
+    }
+
+</style>
+<script>
+    function nfullscreen() {
+        document.getElementById('video').style.position = "fixed";
+        document.getElementById('video').style.top = "0";
+        document.getElementById('video').style.left = "0";
+        document.getElementById('video').style.right = "0";
+        document.getElementById('video').style.bottom = "0";
+        document.getElementById('video').style.width = "100vw";
+        document.getElementById('video').style.height = "100vh";
+        document.getElementById('video').style.borderRadius = "0";
+        document.getElementById('video').style.zIndex = "1";
+        document.getElementById('video-controls').style.top = "";
+        document.getElementById('video-controls').style.bottom = "24px";
+        document.getElementById('video-controls').style.position = "fixed";
+        document.getElementById('video-controls').style.zIndex = "2";
+        document.getElementById('video-controls').style.left = "16px";
+        document.getElementById('video-controls').style.right = "16px";
+        document.getElementById('video-controls').style.width = "auto";
+        document.getElementById('video-bar').style.width = "100%";
+        document.getElementById('video-bar-inner').style.top = "-14px";
+        document.body.style.overflow = "hidden";
+        document.getElementById('full-logo').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAABmUlEQVRoge2ZwU7CMByHPznsMYAHMR4AfTK9mJAYTRQOvJqEYDhPOSCKwcNGKLVb/6Pruph+SZOxdeX7Ubb9CxCJRCIRD/SBKbAEdsA+UNvlDhOgJ5W/AT4CShe1d2Bkk++3VF4N0S0LMFU6vwIDILGl9kgCDIG54vVSdsJS6TjwbVeBIUevRVlH9YIN+cnrJJxe2IWo37cQdIAnYA3casdEbiEDdICZ8v6pdrzVAXT5PTDW+rQmwBjYAPf5a5P8LN9f2a2JANt8/C1yebFbEwF0WYm82K3pAFJ5sVuoADZ5sVvIGdgAd65uTQT4ojjEuqqbbdp88AB8G/Z/Ao+ug7uUuno7azEidGskgNpEi5E2BziEKF2M1B3AlcqLEQvB7kLixYiFYAHEixELRrcLQ6eiYy7UMa5xjBDPgVqJAULz7wL8KNtt+1nlgOr4J8BK2b70plOdK2X7razjhOO9dk5Wv9QxE+c+XxLgmtOn+XPZCT2ymsVnTeTSUgT11KilIVKyskREl2yqFoT/g2ORu7hUspFIJBIx8wsdZ+pqNUu1SwAAAABJRU5ErkJggg==";
+        document.getElementById('full').title = "Quitter le plein écran [f]";
+    }
+
+    function ofullscreen() {
+        document.getElementById('video').style.position = "";
+        document.getElementById('video').style.top = "";
+        document.getElementById('video').style.left = "";
+        document.getElementById('video').style.right = "";
+        document.getElementById('video').style.bottom = "";
+        document.getElementById('video').style.width = "50vw";
+        document.getElementById('video').style.height = "";
+        document.getElementById('video').style.borderRadius = "5px";
+        document.getElementById('video').style.zIndex = "";
+        document.getElementById('video-controls').style.top = "-55px";
+        document.getElementById('video-controls').style.bottom = "";
+        document.getElementById('video-controls').style.position = "relative";
+        document.getElementById('video-controls').style.zIndex = "";
+        document.getElementById('video-controls').style.left = "2.5vw";
+        document.getElementById('video-controls').style.right = "";
+        document.getElementById('video-controls').style.width = "45vw";
+        document.getElementById('video-bar').style.width = "45vw";
+        document.getElementById('video-bar-inner').style.top = "-13px";
+        document.body.style.overflow = "";
+        document.getElementById('full-logo').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAABmklEQVRoge2Zy04CMRSGP2YxjwE8iHEB6JthjBuNC4GFryaZYFijJqIGg4tCpgzTTjuXtjH9kpOUTGfm/+ntHIBIJBKJdMAQWAArYAfsPcXuoGEODEzFXwPvHkWr4g2YVIkfBipeNtHXGVhInV+AEZBWue6QFBgDS0nXTHfDSuo46lqdBWNyXZmuo7xgfX7zRVJOF7YSeb654AbYcj7Xf4C7OtpcGugBH6gX7LeJtqRzmWr2wCPwpbheawq7nkIgRmJG+ShYa3NtQCc+eAMJ8Fx4Z/GztTZXBlTiE/JdaVtHmwsDOvEAU8TuNK2jzYWBB9TidQRj4BN78RCQgVvE3n+P3TlkbaBp1CpGQjIgh1ExErKBowltMdK2gaZYFyMVeFvExsVIBd4MGBcjFZRq65V0Ul1rQhvPLX2Gz3qgFaIB3/w7A79SO7SfVY7IGs8MrKX2RWdy7LmU2q+6jnPyvXaJyF/aGIm650sKXHF6mj/pbhggcpYuc6ImscEgn5oEamKDSEuM6COGKsP/HxzZQUuTTDYSiUQi5fwBrCfpVgBqGgwAAAAASUVORK5CYII=";
+        document.getElementById('full').title = "Passer en plein écran [f]";
+    }
+
+    setInterval(() => {
+        if (document.getElementById('video').paused) {
+            document.getElementById('play').title = "Lire [k]";
+            document.getElementById('play-logo').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAB+UlEQVRoge3ZP8hNcRzH8ZfnkeihFEViwUYYbAapZ7DZlIVFWJQsTzYTshmtBguLQcmT2AwySBnkLuTPoBSip8cTw/HrHud3/517z73n/nTe9VvuuX1/n8/p+/2e3x8aGhr6MYNTeIQWnuAc1tQpalBmcQe/O4wWjmNVbeoG4KLO4vPjKQ7VJbAfr7SFXsFOXMBnsZG72F2PzO4sawucy/2+Edfx078mlnADmyYrszt5cZ3YgZtYKfz3Gy5j7QQ09qSfgcBBPBan1VuckXWyWhjUQGAeL8VGnuHwOAT2o6wBWC1765/ERhaxt2KNPRnGQGC9rA5+FOIsy+pmS0UaezKKgcB2meBfhXih0NeNqLEnVRgI7MF9cVq9k6XcbAVzRFRpIDCPF2Ijz3GkwnkwHgNkbfUkPoqNLGJfVRONy0BgDgv4WphrBbewddQJxm0gsE3nQv+Oa9gwbOBJGQjsx0NxWrVwYJiAkzYQOCr+on/A5rKB6jJA1lZP40tOw6WyQeo0EDiW03Cv+LC2VeKkmLYUWigbZJqK+L0EirhbG33z91lpmg9ZH5JdSiS9mEt2OZ3shibZLWWym/qkj1WSPdhK9mhx6g93l7RFJXm8ns/nq9glsQuO82KhxTHVV0wzuK2z8CQu+cgEnsADvJZ1m7MSuWZtaPjf+QNI1Ut1JfKs2wAAAABJRU5ErkJggg==";
+        } else {
+            document.getElementById('play').title = "Mettre en pause [k]";
+            document.getElementById('play-logo').src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAA4ElEQVRoge2ZQQrCMBREn4KlHldBl2LPZk+hIh6kogsrBJNGu4ijMg8CLZ3O50FX/WCM+WvmQAMcgQ64Pp2uf7bts+reaEibKB86LVALeyOaEUMeZyPsjTgGBStglsjMgHWQ2wt7I8Jvs8rkqiDXfbp3kim4vpmTZqcvCr4eC6ixgBoLqLGAGguosYAaC6ixgBoLqLGAGguosYAaC6jJCVyC61c/YVPvfKQ3J3AOrhcDwypgGdyfMn2leyO2lFlElOqNGLsK2lFmxfRub5Kau/2B4WXcoc+MGVKq1xjza9wAQoOr3r+rg7MAAAAASUVORK5CYII=";
+        }
+        perc = (document.getElementById('video').currentTime / document.getElementById('video').duration)*100;
+        document.getElementById('video-bar-inner').style.width = perc + "%";
+
+        perc2 = (getbuffer() / document.getElementById('video').duration)*100;
+        document.getElementById('video-bar-buffer').style.width = perc2 + "%";
+    }, 50)
+
+    function playpause() {
+        if (document.getElementById('video').paused) {
+            document.getElementById('video').play();
+        } else {
+            document.getElementById('video').pause();
+        }
+    }
+
+    function rwsec() {
+        if (document.getElementById('video').currentTime < 10) {
+            document.getElementById('video').currentTime = 0;
+        } else {
+            document.getElementById('video').currentTime = document.getElementById('video').currentTime - 10;
+        }
+    }
+
+    function fwsec() {
+        if ((document.getElementById('video').duration - document.getElementById('video').currentTime) < 10) {
+            document.getElementById('video').currentTime = document.getElementById('video').duration;
+        } else {
+            document.getElementById('video').currentTime = document.getElementById('video').currentTime + 10;
+        }
+    }
+
+    msec = 10000;
+
+    function move() {
+        msec = 0;
+    }
+
+    const dynamicFavicon = (favicon) => {
+        document.getElementById('website-icon').href = favicon;
+    };
+
+    setInterval(() => {
+        if (document.hidden) {
+            document.title = document.getElementById('elapsed').innerText.trim() + " — " + "<?= $data["title"] ?>";
+            if (document.getElementById('video').paused) {
+                dynamicFavicon("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAAq0lEQVRoge3RsQnDMBhE4SdjyBJOnV08iNZIkSk8SWZJbbchdQjYqVQGSWB0DtxX/5x4CMzMlELp4en2GANMwPDjZNlW4vt6ubfYSbqSI4DMowBD6Jha7STFAZlHk3PDHaAu4JAcoOYANQeoOUDNAWoOUHOAWl96+Hm+dnlwr53k73/AAWoOUHOAmgPUHKDmADUHqNUELAU3c8MdoCpgi5nhOYQ1ttsxMzuCL/g9Jfbk6XlGAAAAAElFTkSuQmCC");
+            } else {
+                dynamicFavicon("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAACxklEQVRoge2ZT0gUURzHv7/ZTWdCyUsQQYfqYF7s0q6LQXWJCLp46BREELpF1CGETIr2j0RdWrfooNHBa0FdPBhB6aUgg0oQdzaqQ3gKMwga1p03vw4ZqOjwxpk3M8V+jsPvfd/3y5c3vNkFGjRo8E9DsoNGoXKQiR4yaIfGeGG1GKdweZel0pwMmuwgkzYGoJ3A25i4R/9lmc356lGF3qSQbkAvmrzOYwZhbIvm9P8c7FgI0Jc00g1sAIFxpi60ql6o9gXiyLMBSTZoYK3cJCdEtjbYUfVjygt+G1gDHyGhvTeKlSvIvUwGq70+AQcAABgMumUkdr7dWjBTCvRXoSIAAICB/Q7hlVGolJGbbVG1j7IAyySZ6JKeSM405+eOqdhAdYC/7CZNm9CL1UctNz9uD1I4rADL8ElbsKkXqn1gln4DuhHwa9QLPMVAtnZ9n+lHJeQGVkKHCfROL5o55GabNqsSYQAAgAHghpFIThtDZnozAlEHAAAw0MmM1/qQOYLblVYva2MRYBkNjD59ieaMIbNHdlGEh9gdAsZBOGdda593m4tTA6tg4AQzf27Om8fd5mIb4A/URBpG3Cakb4z1hUX/fhQQ8wawROS4fijFNwDxuCBnj13qnnAbC+WjwyPzILooSpmnMsNxasABMCqa7A5R6pIyD8SkAQZmEuT01kvdb7yujboBi8B5p601tRnzQKQN0JRgLYtyytd1OvwAhEUAA6KUfgCQ7+tJuAEIj4W9dAH3Dn0LSjKcAIQv5NB5e7jrWdDSqg+xTYS7omZ12uXgzQMKG2DgQ4K13vpwelrVHoCaBixmHnDarAP1slrzQPANTAqNsriTCe3H3aACfAfhqihlRgPSk8ZvAAYwJurUj/tdkfzB4SEAfQJ474oHX4lx1i5nngfuygPSh5gccZoYFYB+gPBEkNMetfkGDRr8B/wG23XeW8Y34ZMAAAAASUVORK5CYII=");
+            }
+        } else {
+            document.title = origtitle;
+            dynamicFavicon("https://familine.minteck.org/icns/familine-movies.svg");
+        }
+    }, 200)
+
+    function secondsTimeSpanToHMS(s) {
+        var h = Math.floor(s/3600); //Get whole hours
+        s -= h*3600;
+        var m = Math.floor(s/60); //Get remaining minutes
+        s -= m*60;
+        return h+":"+(m < 10 ? '0'+m : m)+":"+(s < 10 ? '0'+s : s); //zero padding on minutes and seconds
+    }
+
+    setInterval(() => {
+        msec++;
+        if (msec >= 100) {
+            $("#video-controls").fadeOut(1000);
+            document.getElementById('video-controls').style.cursor = "none";
+        } else {
+            $("#video-controls").fadeIn(200);
+            document.getElementById('video-controls').style.cursor = "default";
+        }
+
+        document.getElementById('total').innerText = secondsTimeSpanToHMS(Math.floor(document.getElementById('video').duration));
+        document.getElementById('elapsed').innerText = secondsTimeSpanToHMS(Math.floor(document.getElementById('video').currentTime));
+        remaining = document.getElementById('video').duration - document.getElementById('video').currentTime;
+        remainingm = Math.ceil(remaining/60);
+        if (remaining < 45) {
+            document.getElementById('remaining').innerText = "moins d'une minute";
+            document.getElementById('endtime').innerText = "moins d'une minute";
+        } else {
+            if (remainingm > 1) {
+                if (remainingm > 3550) {
+                    remainingh = Math.ceil(remainingm/60);
+                    if (remainingh > 1) {
+                        document.getElementById('remaining').innerText = remainingh + " heures";
+                        document.getElementById('endtime').innerText = remainingh + " heures";
+                    } else {
+                        document.getElementById('remaining').innerText = remainingh + " heure";
+                        document.getElementById('endtime').innerText = remainingh + " heure";
+                    }
+                } else {
+                    document.getElementById('remaining').innerText = remainingm + " minutes";
+                    document.getElementById('endtime').innerText = remainingm + " minutes";
+                }
+            } else {
+                document.getElementById('remaining').innerText = remainingm + " minute";
+                document.getElementById('endtime').innerText = remainingm + " minute";
+            }
+        }
+        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)
+
+    document.getElementById('video').onmousemove = move;
+    document.getElementById('video-controls').onmousemove = move;
+
+    function fullscreen() {
+        var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
+            (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
+            (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
+            (document.msFullscreenElement && document.msFullscreenElement !== null);
+
+        if (isInFullScreen) {
+            document.exitFullscreen();
+        } else {
+            document.body.requestFullscreen();
+        }
+    }
+
+    setInterval(() => {
+        var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
+            (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
+            (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
+            (document.msFullscreenElement && document.msFullscreenElement !== null);
+
+        if (isInFullScreen) {
+            nfullscreen();
+        } else {
+            ofullscreen();
+        }
+    }, 200)
+
+    <?php if ($supporting4k): ?>
+    oldt = 0;
+    loading = false;
+    
+    setInterval(() => {
+        if (document.getElementById('video').style.display !== "none") {
+            videoElement = document.getElementById('video');
+        } else {
+            videoElement = document.getElementById('video-fhd');
+        }
+
+        if (!videoElement.paused) {
+            if ((videoElement.currentTime > 0) && (videoElement.currentTime === oldt)) {
+                loading = true;
+            } else {
+                loading = false;
+            }
+        } else {
+            loading = false;
+        }
+        oldt = videoElement.currentTime;
+    }, 500)
+    <?php endif; ?>
+</script>
+<script>$("#video-controls").hide();$("#video-controls").fadeOut(0);</script>
+
+<?php file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/data/durations.json", json_encode($times, JSON_PRETTY_PRINT)); require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/footer.php"; ?>