Video players

by Jérôme Sengel

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="section1" class="sections">
  <div class="slide" split-mobile>
    <div class="split">
    </div>
    <div class="split">
      <div class="player"></div>
    </div>
  </div>
  <div class="slide" split-mobile>
    <div class="split">
      <div class="player"></div>
    </div>
    <div class="split">
      <div class="player"></div>
    </div>
  </div>
  <div class="slide">
    <div class="player"></div>
    <div class="player"></div>
  </div>
</div>

JavaScript

let sections = $(".sections");
console.log("Sections: " + sections.length);

videos = [];
videosMobile = [];

// On itère sur toutes les sections (communes à desktop et mobile)
for (var i = 0; i < sections.length; i++) {
  videos.push([]);
  videosMobile.push([]);

  // On récupère tous les slides DESKTOP
  let slides = $(sections[i]).find(".slide");
  console.log("Desktop slides for section " + i + " : " + slides.length);

  // On itère sur tous les slides DESKTOP
  for (var j = 0; j < slides.length; j++) {
    // On push qu'on a un nouveau slide DESKTOP  dans la section "i"
    videos[i].push([]);

    // On vérifie si le slide doit être découpé en mobile
    if ($(slides[j])[0].hasAttribute("split-mobile")) {

      // Si oui On cherche les "sous-slides" mobile
      let splits = $(slides[j]).find(".split");

      // On itère sur les splits
      for (var z = 0; z < splits.length; z++) {
        // Pour chaque split on crée un slide
        videosMobile[i].push([]);

        // On récupère les players de ce split (= slide mobile)
        let players = $(splits[z]).find(".player");

        // Petit log si le split sur lequel on itère n'a pas de players :)
        if (players.length == 0) {
          console.log("[Section " + i + "] No video in mobile slide n°" + z + " (videos for the desktop slide n°" + j + " at this point: " + videos[i][j].length + ")");
        }

        // Pour chaque player du split on boucle
        for (var k = 0; k < players.length; k++) {
          let video = "[Section " + i + "] Video n°" + k + " in mobile slide n°" + z + " (Video n°" + videos[i][j].length + " in desktop slide n°" + j + ")"
          console.log(video);
          
          // Pour la vidéo DESKTOP on se contente de pusher dans le slide "j" (donc le "for" global tout en haut quelque soit le "split")
          videos[i][j].push(video);
          // Pour la vidéo MOBILE on push dans length moins 1 car le numéro de split correspond pas au nombre de slides :) 
        ...