<commit_before><html>
<head>
  <title>INFINITE TRAILER</title>
  <style>
    video {
      display: table;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      margin: auto;
    }
    #trailer {
      z-index: 1;
    }
    #trailer-b {
      z-index: 0;
    }
  </style>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body style="background-color: black;">
  <video id="trailer" width="100%" onended="nextVideo()"></video>
<script>

var videoPlayer = document.getElementById('trailer');

var videos = null;
var timeOut = null;
var fadeOutTimeMs = 300;
var fadeInTimeMs = 200;

videoPlayer.addEventListener('loadedmetadata', function() {
  var durationMs = Math.round(videoPlayer.duration * 1000);
  timeOut = setTimeout(function() {
    $(videoPlayer).animate({volume: 0}, fadeOutTimeMs);
  }, durationMs - fadeOutTimeMs);
});

function getRandomVideoSrc() {
  var randomIndex = Math.floor(Math.random() * videos.length);
  return videos[randomIndex];
}

function nextVideo() {
  videoPlayer.src = getRandomVideoSrc();
  videoPlayer.controls = false;
  videoPlayer.volume = 0;
  if (timeOut != null) {
    clearTimeout(timeOut);
  }
  $(videoPlayer).animate({volume: 1}, fadeInTimeMs);
  videoPlayer.play();
}

var req = new XMLHttpRequest();
req.overrideMimeType('application/json');
req.open('GET', 'listings.json', true);
req.onreadystatechange = function(request, url) {
  if (req.readyState == 4) {
    if (req.status == 200) {
      videos = JSON.parse(req.responseText).videos;
      nextVideo();
    }
  }
};
req.send(null);

</script>
</body>
</html>
<commit_msg>Timer and infor on the page<commit_after><html>
<head>
  <title>INFINITE TRAILER</title>
  <style>
    video {
      display: table;
      top: 10%;
      bottom: 10%;
      left: 0;
      right: 0;
      width: 100%;
      height: 90%;
      position: absolute;
      margin: auto;
    }
    #trailer {
      z-index: 1;
    }
    #credits {
      position: absolute;
      z-index: 3;
      color: purple;
      font-size: 12px;
      bottom: 0;
      text-align: center;
      left: 0;
      right: 0;
    }
    #title {
      position: absolute;
      z-index: 3;
      top: 0;
      left: 0;
      right: 0;
      color: #fff;
      opacity: 0.5;
      text-align: center;
      padding-top: 10px;
    }
    #title > * {
      padding: 0px;
      margin: 0px;
    }
    #title h1 {
      font-size: 20px;
    }
    #title p {
      font-size: 12px;
    }
    .timer,
    .timer a {
      color: #fff;
      opacity: 0.5;
    }
  </style>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body style="background-color: black;">
  <div id="title">
    <h1>Infinite Trailer</h1>
    <p>Fade to black cuts looping randomly and forever. Auto-generated from film trailers.</p>
  </div>
  <video id="trailer" width="100%" onended="nextVideo()"></video>
  <div id="credits">
    <p id="timer" class="timer">
    </p>
    <p class="timer">
      Seconds watched <a id="timer-link" href="">Tweet this</a>
    </p>
    <p>
      Created by <a href="https://twitter.com/Mariosgohan2"><NAME></a>,
      <a href="https://twitter.com/lloydhenning"><NAME></a> and
      <a href="https://twitter.com/suttonpeter"><NAME></a> for
      <a href="AND HACK#1 – Film Data: For Our Viewing Pleasure">AND film data hack</a>.
      <a href="https://github.com/mariosgohan/infinite-trailer">Source code</a>
    </p>
  </div>

<script>

var timer = $('#timer');
startTime = new Date();
timerLink = $('#timer-link');
setInterval(function () {
  var time = (new Date() - startTime) / 1000;
  timer.text(time);
  timerLink.attr('href', 'http://twitter.com/home?status="I watched an infinite trailer for ' + time + ' seconds http://infinite-trailer.fds.im"');
}, 100);

var videoPlayer = document.getElementById('trailer');

var videos = null;
var timeOut = null;
var fadeOutTimeMs = 300;
var fadeInTimeMs = 200;

videoPlayer.addEventListener('loadedmetadata', function() {
  var durationMs = Math.round(videoPlayer.duration * 1000);
  timeOut = setTimeout(function() {
    $(videoPlayer).animate({volume: 0}, fadeOutTimeMs);
  }, durationMs - fadeOutTimeMs);
});

function getRandomVideoSrc() {
  var randomIndex = Math.floor(Math.random() * videos.length);
  return videos[randomIndex];
}

function nextVideo() {
  videoPlayer.src = getRandomVideoSrc();
  videoPlayer.controls = false;
  videoPlayer.volume = 0;
  if (timeOut != null) {
    clearTimeout(timeOut);
  }
  $(videoPlayer).animate({volume: 1}, fadeInTimeMs);
  videoPlayer.play();
}

var req = new XMLHttpRequest();
req.overrideMimeType('application/json');
req.open('GET', 'listings.json', true);
req.onreadystatechange = function(request, url) {
  if (req.readyState == 4) {
    if (req.status == 200) {
      videos = JSON.parse(req.responseText).videos;
      nextVideo();
    }
  }
};
req.send(null);

</script>
</body>
</html>

{'fraction_non_alphanumeric': 0.1681717840658238, 'fraction_numerical': 0.02087096126831226, 'mean_word_length': 3.0454545454545454, 'pattern_counts': {'":': 0, '<': 64, '<?xml version=': 0, '>': 65, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2919727', 'n_tokens_mistral': 1821, 'n_tokens_neox': 1706, 'n_words': 382}