Skip to content

Instantly share code, notes, and snippets.

@samueleastdev

samueleastdev/index.html

Created August 22, 2021 17:42
Show Gist options
  • Save samueleastdev/ecbf67f3b52484b71a39176e70d48ce4 to your computer and use it in GitHub Desktop.
Save samueleastdev/ecbf67f3b52484b71a39176e70d48ce4 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/wosuxuj
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>
<style id="jsbin-css">
#timeline {
width: 1000px;
height: 50px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
#timeline li {
float: left;
display: block;
height: 50px;
border-left: 1px solid #eee;
}
</style>
</head>
<body>
<ul id="timeline"></ul>
<script id="jsbin-javascript">
console.log(moment().startOf('day').unix());
console.log(moment().endOf('day').unix());
var diff = (moment().endOf('day').unix() - moment().startOf('day').unix());
console.log(diff/100);
var start = 0;
var end = diff/100;
document.getElementById('timeline').style.width = end + 'px';
var times = [
{
"start": 1629586800,
"end": 1629589167,
"duration": 2367,
"media": {
"src": "https://www.youtube.com/watch?v=IljVmcDDrOg",
"type": "video/youtube"
}
},
{
"start": 1629589167,
"end": 1629617967,
"duration": 28800,
"media": {
"src": "Adverts"
}
},
{
"start": 1629617967,
"end": 1629618620,
"duration": 653,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/ElephantsDream.mp4",
"type": "video/mp4"
}
},
{
"start": 1629618620,
"end": 1629619273,
"duration": 653,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/ElephantsDream.mp4",
"type": "video/mp4"
}
},
{
"start": 1629619273,
"end": 1629620160,
"duration": 887,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/Sintel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629620160,
"end": 1629621047,
"duration": 887,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/Sintel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629621047,
"end": 1629621781,
"duration": 734,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/TearsOfSteel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629621781,
"end": 1629622515,
"duration": 734,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/TearsOfSteel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629622515,
"end": 1629623111,
"duration": 596,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/BigBuckBunny.mp4",
"type": "video/mp4"
}
},
{
"start": 1629623111,
"end": 1629651911,
"duration": 28800,
"media": {
"src": "Adverts"
}
},
{
"start": 1629651911,
"end": 1629652507,
"duration": 596,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/BigBuckBunny.mp4",
"type": "video/mp4"
}
},
{
"start": 1629652507,
"end": 1629681307,
"duration": 28800,
"media": {
"src": "Adverts"
}
}
];
var html = '';
times.forEach((x, i) => {
console.log((x.end - x.start)/100);
html += '<li style="background: ' + x.color + ';width: ' + (x.end - x.start)/100 + 'px;">' + x.media.src + '</li>';
});
document.getElementById('timeline').innerHTML = html;
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"><\/script>
</head>
<body>
<ul id="timeline"></ul>
</body>
</html> </script>
<script id="jsbin-source-css" type="text/css">#timeline {
width: 1000px;
height: 50px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
#timeline li {
float: left;
display: block;
height: 50px;
border-left: 1px solid #eee;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">console.log(moment().startOf('day').unix());
console.log(moment().endOf('day').unix());
var diff = (moment().endOf('day').unix() - moment().startOf('day').unix());
console.log(diff/100);
var start = 0;
var end = diff/100;
document.getElementById('timeline').style.width = end + 'px';
var times = [
{
"start": 1629586800,
"end": 1629589167,
"duration": 2367,
"media": {
"src": "https://www.youtube.com/watch?v=IljVmcDDrOg",
"type": "video/youtube"
}
},
{
"start": 1629589167,
"end": 1629617967,
"duration": 28800,
"media": {
"src": "Adverts"
}
},
{
"start": 1629617967,
"end": 1629618620,
"duration": 653,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/ElephantsDream.mp4",
"type": "video/mp4"
}
},
{
"start": 1629618620,
"end": 1629619273,
"duration": 653,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/ElephantsDream.mp4",
"type": "video/mp4"
}
},
{
"start": 1629619273,
"end": 1629620160,
"duration": 887,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/Sintel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629620160,
"end": 1629621047,
"duration": 887,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/Sintel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629621047,
"end": 1629621781,
"duration": 734,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/TearsOfSteel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629621781,
"end": 1629622515,
"duration": 734,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/TearsOfSteel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629622515,
"end": 1629623111,
"duration": 596,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/BigBuckBunny.mp4",
"type": "video/mp4"
}
},
{
"start": 1629623111,
"end": 1629651911,
"duration": 28800,
"media": {
"src": "Adverts"
}
},
{
"start": 1629651911,
"end": 1629652507,
"duration": 596,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/BigBuckBunny.mp4",
"type": "video/mp4"
}
},
{
"start": 1629652507,
"end": 1629681307,
"duration": 28800,
"media": {
"src": "Adverts"
}
}
];
var html = '';
times.forEach((x, i) => {
console.log((x.end - x.start)/100);
html += '<li style="background: ' + x.color + ';width: ' + (x.end - x.start)/100 + 'px;">' + x.media.src + '</li>';
});
document.getElementById('timeline').innerHTML = html;</script></body>
</html>
Raw
jsbin.wosuxuj.css
#timeline {
width: 1000px;
height: 50px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
#timeline li {
float: left;
display: block;
height: 50px;
border-left: 1px solid #eee;
}
Raw
jsbin.wosuxuj.js
console.log(moment().startOf('day').unix());
console.log(moment().endOf('day').unix());
var diff = (moment().endOf('day').unix() - moment().startOf('day').unix());
console.log(diff/100);
var start = 0;
var end = diff/100;
document.getElementById('timeline').style.width = end + 'px';
var times = [
{
"start": 1629586800,
"end": 1629589167,
"duration": 2367,
"media": {
"src": "https://www.youtube.com/watch?v=IljVmcDDrOg",
"type": "video/youtube"
}
},
{
"start": 1629589167,
"end": 1629617967,
"duration": 28800,
"media": {
"src": "Adverts"
}
},
{
"start": 1629617967,
"end": 1629618620,
"duration": 653,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/ElephantsDream.mp4",
"type": "video/mp4"
}
},
{
"start": 1629618620,
"end": 1629619273,
"duration": 653,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/ElephantsDream.mp4",
"type": "video/mp4"
}
},
{
"start": 1629619273,
"end": 1629620160,
"duration": 887,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/Sintel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629620160,
"end": 1629621047,
"duration": 887,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/Sintel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629621047,
"end": 1629621781,
"duration": 734,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/TearsOfSteel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629621781,
"end": 1629622515,
"duration": 734,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/TearsOfSteel.mp4",
"type": "video/mp4"
}
},
{
"start": 1629622515,
"end": 1629623111,
"duration": 596,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/BigBuckBunny.mp4",
"type": "video/mp4"
}
},
{
"start": 1629623111,
"end": 1629651911,
"duration": 28800,
"media": {
"src": "Adverts"
}
},
{
"start": 1629651911,
"end": 1629652507,
"duration": 596,
"media": {
"src": "https://s3b-assets-bucket.s3.amazonaws.com/test-videos/BigBuckBunny.mp4",
"type": "video/mp4"
}
},
{
"start": 1629652507,
"end": 1629681307,
"duration": 28800,
"media": {
"src": "Adverts"
}
}
];
var html = '';
times.forEach((x, i) => {
console.log((x.end - x.start)/100);
html += '<li style="background: ' + x.color + ';width: ' + (x.end - x.start)/100 + 'px;">' + x.media.src + '</li>';
});
document.getElementById('timeline').innerHTML = html;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment