CSE-Media/core/page/video.cut.php

<?php
$data = fichier::getByHash($_GET["cut"]);
if (empty($data["md5"])) {
  header("Location: /");
  exit();
}
?>

<nav aria-label="breadcrumb" class="ariane">
  <ol class="breadcrumb" style="border-radius: 0 0 5px 5px; padding:5px 10px;">
    <li class="breadcrumb-item"><a href="/">Toutes les vidéos</a></li>
    <li class="breadcrumb-item active"><a href="/edit/<?php echo $data["hash"] ?>"><?php echo $data["title"] ?></a></li>
    <li class="breadcrumb-item active" aria-current="page">Découper la vidéo</li>
  </ol>
</nav>

<div class='container' style="position: relative;" onsubmit="return confirmCut()">
  <!-- Lecteur vidéo -->
  <video id="videoStream" style="width:100%; margin-bottom: 20px;" controls>
    <source src="https://<?php echo DOMAIN_MEDIAS . "/video/" . $data["hash"] ?>" type='video/mp4'>
    Votre navigateur ne supporte pas la balise vidéo.
  </video>

  <!-- Formulaire -->
  <form id="cutForm" method="POST">
    <input type="hidden" name="from" value="video.cut">
    <input type="hidden" name="id" value="<?php echo $data["id"] ?>">
    <input type="hidden" name="md5" value="<?php echo $data["md5"] ?>">
    <input type="hidden" name="hash" value="<?php echo $data["hash"] ?>">

    <!-- Champ Heure de début -->
    <div class="form-group">
      <label for="startTime">Heure de début (format HH:MM:SS) :</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <button type="button" class='btn btn-secondary' onclick="setStartTime()">Cliquez ici pour définir le début de la vidéo</button>
        </div>
        <input class='form-control' type="text" id="startTime" name="startTime" value="00:00:00" required>
      </div>
    </div>

    <!-- Champ Heure de fin -->
    <div class="form-group">
      <label for="endTime">Heure de fin (format HH:MM:SS) :</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <button type="button" class='btn btn-secondary' onclick="setEndTime()">Cliquez ici pour définir la fin de la vidéo</button>
        </div>
        <input class='form-control' type="text" id="endTime" name="endTime" value="<?php echo core::formatDuration($data["duration"], ":") ?>" required>
      </div>
    </div>

    <!-- Bouton soumettre -->
    <button type="submit" class='btn btn-primary btn-lg'>Découper la Vidéo</button>
  </form>
</div>

<script>
  // Fonction pour convertir le temps en format HH:MM:SS
  function formatTime(seconds) {
    const h = Math.floor(seconds / 3600).toString().padStart(2, '0');
    const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
    const s = Math.floor(seconds % 60).toString().padStart(2, '0');
    return `${h}:${m}:${s}`;
  }

  // Fonction pour définir l'heure de début
  function setStartTime() {
    const video = document.getElementById('videoStream');
    const startTimeField = document.getElementById('startTime');
    startTimeField.value = formatTime(video.currentTime);
  }

  // Fonction pour définir l'heure de fin (avec une seconde ajoutée)
  function setEndTime() {
    const video = document.getElementById('videoStream');
    const endTimeField = document.getElementById('endTime');

    // Ajouter une seconde à la position actuelle
    const endTimeWithExtraSecond = video.currentTime;

    // Mettre à jour le champ avec le temps ajusté
    endTimeField.value = formatTime(endTimeWithExtraSecond);
  }

  // Fonction pour afficher une confirmation avant la soumission du formulaire
  function confirmCut() {
    const startTime = document.getElementById('startTime').value;
    const endTime = document.getElementById('endTime').value;

    if(startTime === "00:00:00" && endTime === "<?php echo core::formatDuration($data["duration"], ":") ?>"){
      window.location.href = "/edit/<?php echo $data["hash"] ?>";
      return false;
    }

    // Message de confirmation personnalisé
    const message = `Vous êtes sur le point de découper la vidéo car ce sera définitif.\n\nElle commencera à ${startTime} et se terminera à ${endTime}.\n\nVoulez-vous continuer ?`;

    // Afficher la boîte de dialogue de confirmation
    return confirm(message);
  }
</script>