< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta http-equiv = "cache-control" content = "no-cache" / >
< title > RedditVideoMakerBot< / title >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous" >
< link href = "https://getbootstrap.com/docs/5.2/dist/css/bootstrap.min.css" rel = "stylesheet" >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css" >
< style >
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
#tooltip {
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
}
< / style >
< / head >
< body >
< header >
< div class = "navbar navbar-dark bg-dark shadow-sm" >
< div class = "container" >
< a href = "#" class = "navbar-brand d-flex align-items-center" >
< svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" fill = "none" stroke = "currentColor" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" aria-hidden = "true" class = "me-2" viewBox = "0 0 24 24" > < path d = "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" / > < circle cx = "12" cy = "13" r = "4" / > < / svg >
< strong > RedditVideoMakerBot< / strong >
< / a >
< / div >
< / div >
< / header >
< main >
< div class = "album py-2 bg-light" >
< div class = "container" >
< div class = "row mt-2" >
< div class = "col-12 col-md-3 mb-3" >
< input type = "text" class = "form-control" placeholder = "Search videos" aria-label = "Search videos" onkeyup = "searchFilter()" >
< / div >
< / div >
< div class = "grid row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" id = "videos" >
< / div >
< / div >
< / div >
< / main >
< footer class = "text-muted py-5" >
< div class = "container" >
< p class = "float-end mb-1" >
< a href = "#" > Back to top< / a >
< / p >
< p class = "mb-1" > < a href = "https://getbootstrap.com/docs/5.2/examples/album/" target = "_blank" > Album< / a > Example Theme by © Bootstrap. < a href = "https://github.com/elebumm/RedditVideoMakerBot/blob/master/README.md#developers-and-maintainers" target = "_blank" > Developers and Maintainers< / a > < / p >
< p class = "mb-0" > If your data is not refreshing, try to hard reload(Ctrl + F5) and visit your local < a href = "../video_creation/data/videos.json" target = "_blank" > videos.json< / a > file.< / p >
< / div >
< / footer >
< script src = "https://code.jquery.com/jquery-3.1.1.js" integrity = "sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin = "anonymous" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js" > < / script >
< script src = "https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js" > < / script >
< script >
const intervals = [
{ label: 'year', seconds: 31536000 },
{ label: 'month', seconds: 2592000 },
{ label: 'day', seconds: 86400 },
{ label: 'hour', seconds: 3600 },
{ label: 'minute', seconds: 60 },
{ label: 'second', seconds: 1 }
];
function timeSince(date) {
const seconds = Math.floor((Date.now() / 1000 - date));
const interval = intervals.find(i => i.seconds < seconds ) ;
const count = Math.floor(seconds / interval.seconds);
return `${count} ${interval.label}${count !== 1 ? 's' : ''} ago`;
}
$(document).ready(function () {
$.getJSON("../video_creation/data/videos.json",
function (data) {
data.sort((b, a) => a['time'] - b['time'])
var video = '';
$.each(data, function (key, value) {
video += '< div class = "col" > ';
video += '< div class = "card shadow-sm" > ';
//keeping original themed image card for future thumbnail usage video += '< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Thumbnail" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" / > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" > r/'+value.subreddit+'< / text > < / svg > ';
video += '< div class = "card-body" > ';
video += '< p class = "card-text" > r/'+value.subreddit+' • '+checkTitle(value.reddit_title, value.filename)+'< / p > ';
video += '< div class = "d-flex justify-content-between align-items-center" > ';
video += '< div class = "btn-group" > ';
video += '< a href = "https://www.reddit.com/r/'+value.subreddit+'/comments/'+value.id+'/" class = "btn btn-sm btn-outline-secondary" target = "_blank" > View< / a > ';
video += '< a href = "http://localhost:4000/results/'+value.subreddit+'/'+value.filename+'" class = "btn btn-sm btn-outline-secondary" download > Download< / a > ';
video += '< / div > ';
video += '< div class = "btn-group" > ';
video += '< button type = "button" data-toggle = "tooltip" id = "copy" data-original-title = "Copy to clipboard" class = "btn btn-sm btn-outline-secondary" data-clipboard-text = "'+getCopyData(value.subreddit, value.reddit_title, value.filename, value.background_credit)+'" > < i class = "bi bi-card-text" > < / i > < / button > ';
video += '< button type = "button" data-toggle = "tooltip" id = "copy" data-original-title = "Copy to clipboard" class = "btn btn-sm btn-outline-secondary" data-clipboard-text = "'+checkTitle(value.reddit_title, value.filename)+' #Shorts #reddit" > < i class = "bi bi-youtube" > < / i > < / button > ';
video += '< button type = "button" data-toggle = "tooltip" id = "copy" data-original-title = "Copy to clipboard" class = "btn btn-sm btn-outline-secondary" data-clipboard-text = "'+checkTitle(value.reddit_title, value.filename)+' #reddit" > < i class = "bi bi-instagram" > < / i > < / button > ';
video += '< / div > ';
video += '< small class = "text-muted" > '+timeSince(value.time)+'< / small > ';
video += '< / div > ';
video += '< / div > ';
video += '< / div > ';
video += '< / div > ';
});
$('#videos').append(video);
});
});
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').on('click', function(){
$(this).tooltip('hide');
});
});
$('#copy').tooltip({
trigger: 'click',
placement: 'bottom'
});
function setTooltip(btn, message) {
$(btn).tooltip('hide')
.attr('data-original-title', message)
.tooltip('show');
}
function hoverTooltip(btn, message) {
$(btn).tooltip('hide')
.attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip(btn) {
setTimeout(function() {
$(btn).tooltip('hide');
}, 1000);
}
function disposeTooltip(btn) {
setTimeout(function() {
$(btn).tooltip('dispose');
}, 1500);
}
var clipboard = new ClipboardJS('#copy');
clipboard.on('success', function(e) {
e.clearSelection();
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
setTooltip(e.trigger, 'Copied!');
hideTooltip(e.trigger);
disposeTooltip(e.trigger);
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
setTooltip(e.trigger, fallbackMessage(e.action));
hideTooltip(e.trigger);
});
function getCopyData(subreddit, reddit_title, filename, background_credit){
if (subreddit == undefined) {
subredditCopy = "";
} else {
subredditCopy = "r/" + subreddit + "\n\n";
}
const file = filename.slice(0, -4);
if (reddit_title == file) {
titleCopy = reddit_title;
} else {
titleCopy = file;
}
var copyData = "";
copyData += subredditCopy;
copyData += titleCopy;
copyData += "\n\nBackground credit: " + background_credit;
return copyData;
}
function getLink(subreddit, id, reddit_title) {
if (subreddit == undefined) {
return reddit_title;
} else {
return "< a target = '_blank' href = 'https://www.reddit.com/r/" + subreddit + "/comments/" + id + "/' > "+ reddit_title +"< / a > ";
}
}
function checkTitle(reddit_title, filename) {
const file = filename.slice(0, -4);
if (reddit_title == file) {
return reddit_title;
} else {
return file;
}
}
var searchFilter = () => {
const input = document.querySelector(".form-control");
const cards = document.getElementsByClassName("col");
console.log(cards[1])
let filter = input.value
for (let i = 0; i < cards.length ; i + + ) {
let title = cards[i].querySelector(".card-text");
if (title.innerText.toLowerCase().indexOf(filter.toLowerCase()) > -1) {
cards[i].classList.remove("d-none")
} else {
cards[i].classList.add("d-none")
}
}
}
< / script >
< / body >
< / html >
