|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>ToKnow.ai - Shazam Playlist to Youtube Playlist</title> |
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> |
|
<script src="https://www.youtube.com/iframe_api"></script> |
|
<style> |
|
.youtube-player, |
|
iframe { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.playlist tbody tr { |
|
cursor: pointer; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body class="bg-light"> |
|
<div class="container my-4"> |
|
<h1 class="text-center">Convert Your Shazam Playlist to YouTube Playlist</h1> |
|
<p class="text-center"> |
|
<em> |
|
<i> |
|
Read details or <b>Comment</b> at |
|
<a target="_blank" |
|
href="https://toknow.ai/posts/shazam-playlist-to-youtube-playlist/"><b>ToKnow.ai</b> blog |
|
post. |
|
</a> |
|
</i> |
|
</em> |
|
</p> |
|
<p class="text-center"> |
|
Download the CSV of your playlist from |
|
<a href="https://www.shazam.com/myshazam" target="_blank">https://www.shazam.com/myshazam</a>. |
|
</p> |
|
<p class="text-center">Upload your Shazam Playlist CSV file.</p> |
|
<div class="row mx-2 justify-content-center"> |
|
<div class="col-md-6"> |
|
<input type="file" class="form-control upload-form col-md-6" accept=".csv"> |
|
</div> |
|
</div> |
|
|
|
<div class="row mt-2 justify-content-center"> |
|
<div class="col-md-6 d-flex justify-content-around flex-wrap"> |
|
<a id="load-test-playlist" class="btn btn-warning btn-sm fst-italic"> |
|
click here to load test playlist |
|
</a> |
|
|
|
<img class="rounded" |
|
src="https://api.visitorbadge.io/api/visitors?path=https://toknow.ai/posts/shazam-playlist-to-youtube-playlist" /> |
|
</div> |
|
|
|
</div> |
|
|
|
<div class="row mt-3 justify-content-center"> |
|
<div class="col-md-8"> |
|
<div class="object-fit-contain border rounded ratio ratio-16x9"> |
|
<div class="youtube-player"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="row mt-5"> |
|
<div class="col-md-12 playlist table-responsive"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
const playlistTable = document.querySelector('.playlist'); |
|
const uploaForm = document.querySelector('.upload-form'); |
|
let songsPlaylist = [] |
|
let videoIndex = -1; |
|
let youtubePlayer; |
|
|
|
document.querySelector('#load-test-playlist').addEventListener('click', async e => { |
|
try { |
|
e.preventDefault(); |
|
|
|
const playlist = await(await fetch('/parse_csv_test')).json(); |
|
generateTable(playlist) |
|
} catch (error) { |
|
playlistTable.innerHTML = error; |
|
} |
|
}); |
|
|
|
uploaForm.addEventListener('input', e => { |
|
e.preventDefault(); |
|
if (e.target.files.length == 0) { |
|
return; |
|
} |
|
|
|
parseCsv(e.target.files[0], playlistTable); |
|
}); |
|
playlistTable.addEventListener('click', e => { |
|
e.preventDefault(); |
|
const row = event.target.closest('tr'); |
|
if (row) { |
|
const index = row.dataset.index ? Number(row.dataset.index) : undefined; |
|
onContinue(undefined, index); |
|
} |
|
}); |
|
function resetCurrentPlayingBackground() { |
|
playlistTable.querySelectorAll('tbody tr').forEach(row => { |
|
if (Number(row.dataset.index) == videoIndex) { |
|
row.classList.add('bg-warning'); |
|
} else { |
|
row.classList.remove('bg-warning'); |
|
} |
|
}) |
|
} |
|
function addErrorToCurrentIndex() { |
|
playlistTable.querySelectorAll('tbody tr').forEach(row => { |
|
if (Number(row.dataset.index) == videoIndex) { |
|
row.classList.add('bg-danger'); |
|
} |
|
}) |
|
} |
|
async function getVideoId(song) { |
|
const response = await fetch( |
|
'/video_id', |
|
{ |
|
headers: { 'Content-Type': 'application/json' }, |
|
method: 'POST', |
|
body: JSON.stringify({ title: song.Title, artist: song.Artist }) |
|
}); |
|
return await response.text() |
|
} |
|
async function nextVideo(callback, newIndex = undefined) { |
|
newIndex = newIndex >= 0 ? newIndex : (videoIndex + 1) |
|
videoIndex = newIndex < songsPlaylist.length ? newIndex : 0; |
|
let video_id = await getVideoId(songsPlaylist[videoIndex]); |
|
callback(video_id); |
|
resetCurrentPlayingBackground(); |
|
} |
|
function generateTable(playlist) { |
|
try { |
|
songsPlaylist = playlist |
|
const tableBody = songsPlaylist.map((i, index) => ` |
|
<tr data-index="${index}"> |
|
<th>${index + 1}</th> |
|
<th>${i.Title}</th> |
|
<th>${i.Artist}</th> |
|
</tr>` |
|
).join('') |
|
playlistTable.innerHTML = ` |
|
<table class="table table-striped table-hover table-bordered rounded"> |
|
<thead> |
|
<tr> |
|
<th>#</th> |
|
<th>Title</th> |
|
<th>Artist</th> |
|
</tr> |
|
</thead> |
|
<tbody>${tableBody}</tbody> |
|
</table>` |
|
|
|
tryToPlay(() => { |
|
videoIndex = -1; |
|
onContinue(); |
|
}, 100) |
|
} catch (error) { |
|
playlistTable.innerHTML = error; |
|
} |
|
} |
|
async function parseCsv(file, playlistTable) { |
|
try { |
|
const formData = new FormData(); |
|
formData.append('file', file); |
|
const playlist = await (await fetch('/parse_csv', { method: 'POST', body: formData })).json(); |
|
generateTable(playlist) |
|
} catch (error) { |
|
playlistTable.innerHTML = error; |
|
} |
|
} |
|
function initiatePlayer() { |
|
const youtubePlayerElement = document.querySelector('.youtube-player'); |
|
youtubePlayer = window.youtubePlayer = new YT.Player(youtubePlayerElement, { |
|
height: '100%', |
|
width: '100%', |
|
playerVars: { autoplay: 1 }, |
|
events: { |
|
'onReady': function (event) { |
|
event.target.playVideo() |
|
}, |
|
'onStateChange': function (event) { |
|
if (event.data === YT.PlayerState.ENDED) { |
|
onContinue(event?.target); |
|
} |
|
}, |
|
'onError': function (event) { |
|
addErrorToCurrentIndex(); |
|
onContinue(event?.target); |
|
} |
|
} |
|
}); |
|
} |
|
function onContinue(player = undefined, newIndex = undefined) { |
|
if (songsPlaylist.length > 0) { |
|
nextVideo((value) => { |
|
player = player || youtubePlayer |
|
player.loadVideoById(value); |
|
setTimeout(() => { |
|
player.playVideo(); |
|
|
|
setTimeout(() => { |
|
if (player.getPlayerState() != YT.PlayerState.PLAYING) { |
|
player.playVideo(); |
|
} |
|
}, 10); |
|
}, 10); |
|
}, newIndex); |
|
} |
|
} |
|
|
|
function tryToPlay(playCallback, timeout) { |
|
setTimeout(() => { |
|
if (YT.Player) { |
|
if (!youtubePlayer) { |
|
initiatePlayer(); |
|
tryToPlay?.(); |
|
} else if (songsPlaylist.length > 0) { |
|
playCallback(); |
|
} |
|
} |
|
}, timeout); |
|
} |
|
|
|
tryToPlay(null, 300); |
|
</script> |
|
</body> |
|
|
|
</html> |
