antidiestro · March 18, 2020 22:49 · antidiestro · Mar 18, 2020
diff --git a/videochecker.html b/videochecker.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
    <style type="text/css">
      html,
      body {
        width: 100vw;
        height: 100vh;
        background-color: #000;
        margin: 0;
        overflow: hidden;
      }

      .player {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100vw;
        height: calc(100vh + 600px);
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="player" class="player"></div>
    <script src="https://www.youtube.com/iframe_api"></script>
    <script type="text/javascript">
      function stripParameters(str) {
        // Split parameters or split folder separator
        if (str.indexOf('?') > -1) {
          return str.split('?')[0];
        } else if (str.indexOf('/') > -1) {
          return str.split('/')[0];
        }
        return str;
      }

      function youtube(str) {
        // shortcode
        var shortcode = /youtube:\/\/|https?:\/\/youtu\.be\/|http:\/\/y2u\.be\//g;

        if (shortcode.test(str)) {
          var shortcodeid = str.split(shortcode)[1];
          return stripParameters(shortcodeid);
        }

        // /v/ or /vi/
        var inlinev = /\/v\/|\/vi\//g;

        if (inlinev.test(str)) {
          var inlineid = str.split(inlinev)[1];
          return stripParameters(inlineid);
        }

        // v= or vi=
        var parameterv = /v=|vi=/g;

        if (parameterv.test(str)) {
          var arr = str.split(parameterv);
          return arr[1].split('&')[0];
        }

        // v= or vi=
        var parameterwebp = /\/an_webp\//g;

        if (parameterwebp.test(str)) {
          var webp = str.split(parameterwebp)[1];
          return stripParameters(webp);
        }

        // embed
        var embedreg = /\/embed\//g;

        if (embedreg.test(str)) {
          var embedid = str.split(embedreg)[1];
          return stripParameters(embedid);
        }

        // ignore /user/username pattern
        var usernamereg = /\/user\/([a-zA-Z0-9]*)$/g;

        if (usernamereg.test(str)) {
          return undefined;
        }

        // user
        var userreg = /\/user\/(?!.*videos)/g;

        if (userreg.test(str)) {
          var elements = str.split('/');
          return stripParameters(elements.pop());
        }

        // attribution_link
        var attrreg = /\/attribution_link\?.*v%3D([^%&]*)(%26|&|$)/;

        if (attrreg.test(str)) {
          return str.match(attrreg)[1];
        }
      }

      let player;

      let videos = [];
      const withErrors = [];

      let currentVideo = null;

      const STATUS_CODES = {
        [-1]: 'unstarted',
        0: 'ended',
        1: 'playing',
        2: 'paused',
        3: 'buffering',
        5: 'cued',
      };

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onError': onError,
          },
          playerVars: {
            autoplay: 1,
            playsinline: 1,
            controls: 0,
            modestbranding: 1,
            rel: 0,
            showinfo: 0,
          },
        });
      }

      function onPlayerReady() {
        // Aquí cargar el JSON con los items de la DB
        fetch('videos.json')
          .then((response) => response.json())
          .then((data) => {
            // Acá mapeo los videos a sus respectivos IDs de YouTube pero puedes hacer otro objeto distinto con el PK tambien
            videos = data.map(entry => youtube(entry.fields.url));
            checkNextVideo();
          });
      }

      function checkNextVideo() {
        // Mientras queden videos, guardo el actual en currentVideo y lo cargo en el player
        if (videos.length > 0) {
          currentVideo = videos.shift();
          // Aquí algunos videos arrojaban undefined como resultado de intentar parsear la URL (linea 144), no revisé bien por qué, me los salto
          if (currentVideo && typeof currentVideo !== 'undefined') {
            player.loadVideoById(currentVideo);
          } else {
            checkNextVideo();
          }
        } else {
          console.log('Estos son los videos con errores:');
          console.log(withErrors);
          // withErrors es el resultado final
        }
      }

      function onPlayerStateChange(event) {
        if (event.data === 1) {
          console.log(`${currentVideo} ✅`);
          checkNextVideo();
        }
      }

      function onError(event) {
        console.log(`${currentVideo} ❌`);
          // Cuando un video tiene error, lo pusheo a withErrors y paso al siguiente video
        withErrors.push(currentVideo);
        checkNextVideo();
      }
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
	<style type="text/css">
	html,
	body {
	width: 100vw;
	height: 100vh;
	background-color: #000;
	margin: 0;
	overflow: hidden;
	}

	.player {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100vw;
	height: calc(100vh + 600px);
	transform: translate(-50%, -50%);
	}
	</style>
	</head>
	<body>
	<div id="player" class="player"></div>
	<script src="https://www.youtube.com/iframe_api"></script>
	<script type="text/javascript">
	function stripParameters(str) {
	// Split parameters or split folder separator
	if (str.indexOf('?') > -1) {
	return str.split('?')[0];
	} else if (str.indexOf('/') > -1) {
	return str.split('/')[0];
	}
	return str;
	}

	function youtube(str) {
	// shortcode
	var shortcode = /youtube:\/\/\|https?:\/\/youtu\.be\/\|http:\/\/y2u\.be\//g;

	if (shortcode.test(str)) {
	var shortcodeid = str.split(shortcode)[1];
	return stripParameters(shortcodeid);
	}

	// /v/ or /vi/
	var inlinev = /\/v\/\|\/vi\//g;

	if (inlinev.test(str)) {
	var inlineid = str.split(inlinev)[1];
	return stripParameters(inlineid);
	}

	// v= or vi=
	var parameterv = /v=\|vi=/g;

	if (parameterv.test(str)) {
	var arr = str.split(parameterv);
	return arr[1].split('&')[0];
	}

	// v= or vi=
	var parameterwebp = /\/an_webp\//g;

	if (parameterwebp.test(str)) {
	var webp = str.split(parameterwebp)[1];
	return stripParameters(webp);
	}

	// embed
	var embedreg = /\/embed\//g;

	if (embedreg.test(str)) {
	var embedid = str.split(embedreg)[1];
	return stripParameters(embedid);
	}

	// ignore /user/username pattern
	var usernamereg = /\/user\/([a-zA-Z0-9]*)$/g;

	if (usernamereg.test(str)) {
	return undefined;
	}

	// user
	var userreg = /\/user\/(?!.*videos)/g;

	if (userreg.test(str)) {
	var elements = str.split('/');
	return stripParameters(elements.pop());
	}

	// attribution_link
	var attrreg = /\/attribution_link\?.v%3D([^%&])(%26\|&\|$)/;

	if (attrreg.test(str)) {
	return str.match(attrreg)[1];
	}
	}

	let player;

	let videos = [];
	const withErrors = [];

	let currentVideo = null;

	const STATUS_CODES = {
	[-1]: 'unstarted',
	0: 'ended',
	1: 'playing',
	2: 'paused',
	3: 'buffering',
	5: 'cued',
	};

	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange,
	'onError': onError,
	},
	playerVars: {
	autoplay: 1,
	playsinline: 1,
	controls: 0,
	modestbranding: 1,
	rel: 0,
	showinfo: 0,
	},
	});
	}

	function onPlayerReady() {
	// Aquí cargar el JSON con los items de la DB
	fetch('videos.json')
	.then((response) => response.json())
	.then((data) => {
	// Acá mapeo los videos a sus respectivos IDs de YouTube pero puedes hacer otro objeto distinto con el PK tambien
	videos = data.map(entry => youtube(entry.fields.url));
	checkNextVideo();
	});
	}

	function checkNextVideo() {
	// Mientras queden videos, guardo el actual en currentVideo y lo cargo en el player
	if (videos.length > 0) {
	currentVideo = videos.shift();
	// Aquí algunos videos arrojaban undefined como resultado de intentar parsear la URL (linea 144), no revisé bien por qué, me los salto
	if (currentVideo && typeof currentVideo !== 'undefined') {
	player.loadVideoById(currentVideo);
	} else {
	checkNextVideo();
	}
	} else {
	console.log('Estos son los videos con errores:');
	console.log(withErrors);
	// withErrors es el resultado final
	}
	}

	function onPlayerStateChange(event) {
	if (event.data === 1) {
	console.log(`${currentVideo} ✅`);
	checkNextVideo();
	}
	}

	function onError(event) {
	console.log(`${currentVideo} ❌`);
	// Cuando un video tiene error, lo pusheo a withErrors y paso al siguiente video
	withErrors.push(currentVideo);
	checkNextVideo();
	}
	</script>
	</body>
	</html>