Skip to content

Instantly share code, notes, and snippets.

@AvneeshSarwate
Last active July 8, 2021 00:40
Show Gist options
  • Save AvneeshSarwate/f49ecd1c4d1794654d3a006a55e73d9c to your computer and use it in GitHub Desktop.
Save AvneeshSarwate/f49ecd1c4d1794654d3a006a55e73d9c to your computer and use it in GitHub Desktop.
document.body.innerHTML = `
<div id="videoContainer"></div>
<div id="textEntryContainer">
<textarea id="urlInput" name="w3review" rows="4" cols="50">
paste from the google sheet here
</textarea>
<button id="playlistButton">click here to make playlist</button>
</div>
<div id="tableContainer">
<table>
</table>
</div>
`;
const videoContainer = document.getElementById('videoContainer');
const textEntryContainer = document.getElementById('textEntryContainer');
const tableContainer = document.getElementById('tableContainer');
const timestampTable = tableContainer.querySelector('table');
const urlInput = document.getElementById('urlInput');
const playlistButton = document.getElementById('playlistButton');
let lastClickedUrl;
function htmlToElement(html) {
var template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content.firstChild;
}
function urlToIframeString(url) {
const videoID = url.split("=")[1]
return `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoID}?autoplay=0" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
}
const elementsByUrl = {};
function addVideo(url, timeString) {
const iframe = htmlToElement(urlToIframeString(url));
iframe.style.display = 'none';
const timeComponents = timeString.split(':');
let numSec = 0;
if(timeComponents.length === 2) {
numSec = parseInt(timeComponents[0]) * 60 + parseInt(timeComponents[1]);
} else if(timeComponents.length === 3) {
numSec = parseInt(timeComponents[0]) * 60 + parseInt(timeComponents[1]) * 60 + parseInt(timeComponents[2]);
} else {
alert(`the timestamp ${timeString} for url ${url} is in the wrong format`);
}
let tableRow = addTableRow(url, iframe, numSec, timeString);
elementsByUrl[url] = {iframe, numSec, tableRow};
videoContainer.append(iframe);
}
function addTableRow(url, iframe, numSec, timeString) {
let rowHtml = `<tr><td>${url}</td><td>${timeString}</td></tr>`;
let rowElement = htmlToElement(rowHtml);
timestampTable.append(rowElement);
rowElement.onclick = () => {
if(lastClickedUrl) {
elementsByUrl[lastClickedUrl].iframe.querySelector('video').stop();
elementsByUrl[lastClickedUrl].iframe.style.display = 'none';
elementsByUrl[lastClickedUrl].tableRow.style.backgroundColor = 'white';
}
playingVideo = iframe.contentDocument.body.querySelector('video');
playingVideo.currentTime = numSec;
iframe.style.display = 'block';
playingVideo.play();
rowElement.style.backgroubdColor = 'yellow';
}
return rowElement;
}
playlistButton.onclick = () => {
let inputRows = urlInput.value.split("\n");
inputRows.forEach(rowString => {
let [url, timeString] = rowString.split(/\s+/);
addVideo(url, timeString);
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment