severak/sotds.php

## sotds.php
<?php
// builds playlist page
$forUser = null; // or set null to build global playlist

// hacked by Severak

// source: https://stackoverflow.com/a/17799714
/**
 * Get Youtube video ID from URL
 *
 * @param string $url
 * @return mixed Youtube video ID or FALSE if not found
 */
function getYoutubeIdFromUrl($url) {
    $parts = parse_url($url);
	if (!in_array($parts['host'], ['youtu.be', 'youtube.com', 'www.youtube.com'])) {
		return false;
	}
    if(isset($parts['query'])){
        parse_str($parts['query'], $qs);
        if(isset($qs['v'])){
            return $qs['v'];
        }else if(isset($qs['vi'])){
            return $qs['vi'];
        }
    }
    if(isset($parts['path'])){
        $path = explode('/', trim($parts['path'], '/'));
        return $path[count($path)-1];
    }
    return false;
}

$videos = [];
$pdo = new PDO('sqlite:sotd.db', null, null, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);
if ($forUser) {
	$stmt = $pdo->prepare('SELECT * FROM sotd WHERE username=? ORDER BY created_at DESC LIMIT 100');
	$stmt->execute(['~severak']);
} else {
	$stmt = $pdo->prepare('SELECT * FROM sotd ORDER BY created_at DESC LIMIT 100');
	$stmt->execute([]);
}
foreach ($stmt as $row) {
	if ($id = getYoutubeIdFromUrl($row['link'])) {
		$videos[] = ['id'=>$id, 'dj'=>$row['username'], 'title'=>$row['display'] ];
	}
}

?>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title><?php echo ($forUser ? $forUser : 'town')?>'s radio</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="//tilde.town/~severak/flogiston-tui.css">
	</head>
  <body>
  <div class="flogiston-page">
	<div class="flogiston-article">
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->

	<h1><?php echo ($forUser ? $forUser : 'town')?>'s radio</h1>
	<p>now playing:<br><strong id="songName">?</strong><br>recommended by DJ <a id="djName" href="#">?</a></p>
	<div id="player"></div>
	<hr>
	<small>generated using <a href="https://gist.github.com/severak/9abf7080d4691d71639d879d6d82a265">this ugly script</a> by <a href="https://tilde.town/~severak">severak</a></small>
	</div>
	</div>

    <script>
	var playlist = <?php echo json_encode($videos); ?>;
	var details = {};
	var idList = [];
	playlist.forEach(function(vid){
		details[vid.id] = vid;
		idList.push(vid.id);
	});


      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
		videoId: idList.pop(),
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
		event.target.loadPlaylist({playlist: idList});
		event.target.playVideo();
      }

	function updateNowPlaying() {
		var vdata = player.getVideoData();
			document.getElementById('songName').textContent = vdata.title;
			var dj = details[vdata.video_id]['dj']
			document.getElementById('djName').textContent = dj;
			document.getElementById('djName').href = 'https://tilde.town/' + dj;
	}

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
     function onPlayerStateChange(event) {
		//if (event.data == 0 || event.data == 5) {
			updateNowPlaying();
		//}
      }
    </script>
  </body>
</html>
	<?php
	// builds playlist page
	$forUser = null; // or set null to build global playlist

	// hacked by Severak

	// source: https://stackoverflow.com/a/17799714
	/**
	* Get Youtube video ID from URL
	*
	* @param string $url
	* @return mixed Youtube video ID or FALSE if not found
	*/
	function getYoutubeIdFromUrl($url) {
	$parts = parse_url($url);
	if (!in_array($parts['host'], ['youtu.be', 'youtube.com', 'www.youtube.com'])) {
	return false;
	}
	if(isset($parts['query'])){
	parse_str($parts['query'], $qs);
	if(isset($qs['v'])){
	return $qs['v'];
	}else if(isset($qs['vi'])){
	return $qs['vi'];
	}
	}
	if(isset($parts['path'])){
	$path = explode('/', trim($parts['path'], '/'));
	return $path[count($path)-1];
	}
	return false;
	}

	$videos = [];
	$pdo = new PDO('sqlite:sotd.db', null, null, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);
	if ($forUser) {
	$stmt = $pdo->prepare('SELECT * FROM sotd WHERE username=? ORDER BY created_at DESC LIMIT 100');
	$stmt->execute(['~severak']);
	} else {
	$stmt = $pdo->prepare('SELECT * FROM sotd ORDER BY created_at DESC LIMIT 100');
	$stmt->execute([]);
	}
	foreach ($stmt as $row) {
	if ($id = getYoutubeIdFromUrl($row['link'])) {
	$videos[] = ['id'=>$id, 'dj'=>$row['username'], 'title'=>$row['display'] ];
	}
	}

	?>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title><?php echo ($forUser ? $forUser : 'town')?>'s radio</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="//tilde.town/~severak/flogiston-tui.css">
	</head>
	<body>
	<div class="flogiston-page">
	<div class="flogiston-article">
	<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->

	<h1><?php echo ($forUser ? $forUser : 'town')?>'s radio</h1>
	<p>now playing:<br><strong id="songName">?</strong><br>recommended by DJ <a id="djName" href="#">?</a></p>
	<div id="player"></div>
	<hr>
	<small>generated using <a href="https://gist.github.com/severak/9abf7080d4691d71639d879d6d82a265">this ugly script</a> by <a href="https://tilde.town/~severak">severak</a></small>
	</div>
	</div>

	<script>
	var playlist = <?php echo json_encode($videos); ?>;
	var details = {};
	var idList = [];
	playlist.forEach(function(vid){
	details[vid.id] = vid;
	idList.push(vid.id);
	});


	// 2. This code loads the IFrame Player API code asynchronously.
	var tag = document.createElement('script');

	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	// 3. This function creates an <iframe> (and YouTube player)
	// after the API code downloads.
	var player;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '360',
	width: '640',
	videoId: idList.pop(),
	events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange
	}
	});
	}

	// 4. The API will call this function when the video player is ready.
	function onPlayerReady(event) {
	event.target.loadPlaylist({playlist: idList});
	event.target.playVideo();
	}

	function updateNowPlaying() {
	var vdata = player.getVideoData();
	document.getElementById('songName').textContent = vdata.title;
	var dj = details[vdata.video_id]['dj']
	document.getElementById('djName').textContent = dj;
	document.getElementById('djName').href = 'https://tilde.town/' + dj;
	}

	// 5. The API calls this function when the player's state changes.
	// The function indicates that when playing a video (state=1),
	// the player should play for six seconds and then stop.
	function onPlayerStateChange(event) {
	//if (event.data == 0 \|\| event.data == 5) {
	updateNowPlaying();
	//}
	}
	</script>
	</body>
	</html>