Skip to content

Commit

Permalink
created index_dev.html for testing video text funcionality
Browse files Browse the repository at this point in the history
  • Loading branch information
lbologna committed Aug 14, 2024
1 parent 9495999 commit 3b9d6be
Show file tree
Hide file tree
Showing 2 changed files with 320 additions and 7 deletions.
315 changes: 315 additions & 0 deletions index_dev.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,315 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>SNS YT comments</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"></script>
</head>

<body id="banner" onload="execute()">



<!-- video text modal -->
<div class="modal fade" id="text-modal" tabindex="-1" aria-labelledby="txtModalLabel" aria-hidden="true" >
<div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-6" id="txtModalLabel"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="text-modal-body"></div>
<!-- Footer with buttons -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>

</div>
</div>
</div>
</div>
</div>




<!-- Tab content -->
<div id="exTab1" class="">
<div id="" class="sticky-top container" style="margin-top:2px">
<ul class=" nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist"
style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
<li class="nav-item" role="presentation">
<button href="#1a" class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button"
role="tab" aria-selected="true">SnS</button>
</li>
<li class="nav-item" role="presentation">
<button href="#2a" class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab"
aria-selected="false">Siate Curiosi</button>
</li>
<li class="nav-item" role="presentation">
<button href="#3a" class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab"
aria-selected="false">PG Eng</button>
</li>
</ul>
<div class="container mt-2 mb-2 bg-white">
<div class="row">
<button class=" btn btn-sm btn-outline-success col-1 border-2 rounded-pill" onclick='window.scrollTo(0, 0)'><i
class='bi bi-arrow-up'></i></button>
<button id="updateBtn" onclick="execute()" class="btn btn-sm btn-outline-success col-10 border-2 rounded-pill"
type="button" class="container rounded-4 btn">
Aggiorna
</button>
<button class=" btn btn-sm btn-outline-success col-1 border-2 rounded-pill" onclick='window.scrollTo(0, document.body.scrollHeight)'><i
class='bi bi-arrow-down'></i></button>
</div>
</div>
</div>
<div id="tab-container" class=" container ">
<div class="row tab-content clearfix">
<div class="tab-pane active" id="1a">
</div>
<div class="tab-pane" id="2a">
</div>
<div class="tab-pane" id="3a">
</div>
</div>
</div>

</div>
</div>
</body>

<script>
if (window.location.href.includes("https://lbologna.github.io")) {
mainurl = "https://lucaleonardobologna.it"
} else if (window.location.href.includes("http://127.0.0.1:")) {
mainurl = "http://127.0.0.1:5000";
}
let singleVideoTextUrl = mainurl + "/snssingletranscript/";
let snsVideoInfo;
let snsVideoJson;

// show video text when present, through modal
async function showText() {
let text = await fetch(singleVideoTextUrl + "?key=" + this.id.substring(4))
let textJson = await text.json();
snsVideoInfo = await fetch(mainurl + "/getsnsjson/");
snsVideoJson = await snsVideoInfo.json();
$("#text-modal-body")[0].innerHTML = textJson["txt"];
let videoEl = snsVideoJson[this.id.substring(4)];
let videoPubTime = videoEl["videoPublishedAt"].substring(0,10);
$("#txtModalLabel")[0].innerHTML = "Video: " + videoEl["title"] + " - (" + videoPubTime + ")";

$("#text-modal").modal("show");
}



// Make sure the client is loaded before calling this method.
async function execute() {
document.getElementById("1a").innerHTML = '<br><br><div class="text-center"><div class="spinner-border" role="status"></div></div> '
document.getElementById("2a").innerHTML = '<br><br><div class="text-center"><div class="spinner-border" role="status"></div></div> '
document.getElementById("3a").innerHTML = '<br><br><div class="text-center"><div class="spinner-border" role="status"></div></div> '


fetchResSNS = await fetch(mainurl + "/snscommentsfull/");
jsonDataSNS = await fetchResSNS.json();
populate(jsonDataSNS, "1a");

const fetchResSC = await fetch(mainurl + "/sccommentsfull/");
const jsonDataSC = await fetchResSC.json();
populate(jsonDataSC, "2a");

const fetchResPGENG = await fetch(mainurl + "/pgengcommentsfull/");
const jsonDataPGENG = await fetchResPGENG.json();
populate(jsonDataPGENG, "3a");
}


function populate(res, divId) {
let mainSnSdiv = document.getElementById(divId);
mainSnSdiv.innerHTML = "";
mainSnSdiv.scrollTop = 0;

// Handle the results here (response.result has the parsed body).
res["items"].forEach(element => {
/* container div */
let cdiv = document.createElement("div");
cdiv.classList.add("container", "border");
cdiv.setAttribute("style", "padding-top:4px; padding-bottom:4px")

/* author-time row" */
let authorTimeRow = document.createElement("div");
authorTimeRow.classList.add("row");
/* author div */
let authorDiv = document.createElement("div");
authorDiv.classList.add("col-8", "text-wrap", "text-break")
authorDiv.setAttribute("style", "font-size:14px")
let author = element["snippet"]["topLevelComment"]["snippet"]["authorDisplayName"];
let authorImage = element["snippet"]["topLevelComment"]["snippet"]["authorProfileImageUrl"];

authorDiv.innerHTML = "<img width=22px src='" + authorImage + "''> <strong>" + author + "</strong>";
/* time div */
let timeDiv = document.createElement("div");
timeDiv.classList.add("col-4")
timeDiv.setAttribute("style", "font-size:13px")
let creationDateString = element["snippet"]["topLevelComment"]["snippet"]["updatedAt"];
let currentTime = new Date();
let creationDate = new Date(creationDateString);
let timeToDisplay = timeText(currentTime, creationDate);
timeDiv.innerHTML = timeToDisplay;
/* */
authorTimeRow.appendChild(authorDiv)
authorTimeRow.appendChild(timeDiv)
cdiv.appendChild(authorTimeRow)

/* comment row */
let commentRow = document.createElement("div");
commentRow.classList.add("row");
commentRow.setAttribute("style", "margin-top:8px; margin-bottom:12px;")
let commentDiv = document.createElement("div");
commentDiv.classList.add("col-12", "text-wrap", "text-break");
let comment = element["snippet"]["topLevelComment"]["snippet"]["textOriginal"];
commentDiv.innerHTML = comment + "<br>";
commentRow.appendChild(commentDiv)
cdiv.appendChild(commentRow)

/* footer row */
let footerRow = document.createElement("div");
footerRow.classList.add("row");
footerRow.setAttribute("style", "font-size:13px; background-color: #f1f1f1; padding-bottom:7px; padding-top:7px")
let footerDiv = document.createElement("div");
footerDiv.classList.add("col-12", "text-wrap", "text-break");
let videoID = element["snippet"]["topLevelComment"]["snippet"]["videoId"];
let videoTitle = element["videoTitle"]
let videoPublishedAt = new Date(element["videoPublishedAt"])
let timeVideoPublished = timeText(currentTime, videoPublishedAt);
let linkToAppPre = "intent://m.youtube.com/watch?v=";
let linkToAppPost = "&feature=mweb_c3_open_app&itc_campaign=mweb_c3_open_app&redirect_app_store_ios=1&app=desktop#Intent;package=com.google.android.youtube;scheme=vnd.youtube;launchFlags=268435456;end"
let linkToApp = linkToAppPre + videoID + linkToAppPost;
let replies = element["snippet"]["totalReplyCount"];

let videoDetailsDiv = document.createElement("div");
videoDetailsDiv.classList.add("col-12")
let answersDiv = document.createElement("div");
answersDiv.classList.add("col-3")
answersDiv.setAttribute("style", "margin-top: var(--bs-gutter-y)");
let appDiv = document.createElement("div");
appDiv.classList.add("col-3")
let urlDiv = document.createElement("div");
urlDiv.classList.add("col-3")

//let arrowDiv = document.createElement("div");
//arrowDiv.classList.add("col-2")

videoDetailsDiv.innerHTML = "<strong>" + videoTitle + "</strong>" + " - " + timeVideoPublished;
answersDiv.innerHTML = "<div class='mt-1'><strong>Risposte: " + replies + "</strong></div>";

appDiv.innerHTML = "<a href='" + linkToApp + "'><button class='btn btn-sm'><i class='bi bi-youtube'></i> App</button></a>"
urlDiv.innerHTML = "<a href='https://www.youtube.com/watch?v=" + videoID + "' target=_blank><button class='btn btn-sm'><i class='bi bi-youtube'></i> Url</button></a>";
//arrowDiv.innerHTML = "<a href='#banner'><i class='bi bi-arrow-up'></i><a>"

footerRow.appendChild(videoDetailsDiv)
footerRow.appendChild(answersDiv)
footerRow.appendChild(appDiv)
footerRow.appendChild(urlDiv)

// in sns panel
if (divId == "1a") {
let buttonDiv = document.createElement("button");
buttonDiv.classList.add("col-3", "btn", "btn-sm", "btn-link");
buttonDiv.setAttribute("id", "txt_" + videoID);
buttonDiv.addEventListener("click", showText);

buttonDiv.innerHTML = '<i class="bi bi-file-text"></i>txt';
footerRow.appendChild(buttonDiv);
}

cdiv.appendChild(footerRow)

let titleContentDiv = document.createElement("div");
titleContentDiv.classList.add("col-12");

cdiv.scrollTop = 0;
mainSnSdiv.appendChild(cdiv);
});
}


/* ------------ */


function timeText(currentTime, creationDate) {
// To calculate the time difference of two dates
var DifferenceInTime = currentTime.getTime() - creationDate.getTime();

// To calculate the no. of days between two dates
let diffDays = DifferenceInTime / (1000 * 3600 * 24);
let diffHours = diffDays * 24;
let diffMinutes = diffHours * 60;
let diffYears = diffDays / 365;
let diffMonths = diffDays / 30;
let timeToDisplay = "";
if (diffYears > 1) {
let displayTime = Math.floor(diffYears);
if (displayTime == 1)
text = " anno fa"
else
text = " anni fa"
timeToDisplay = displayTime + text
}
else if (diffMonths > 1) {
let displayTime = Math.floor(diffMonths);
if (displayTime == 1)
text = " mese fa"
else
text = " mesi fa"
timeToDisplay = displayTime + text
}
else if (diffDays > 1) {
let displayTime = Math.floor(diffDays);
if (displayTime == 1)
text = " giorno fa"
else
text = " giorni fa"
timeToDisplay = displayTime + text;
} else if (diffHours > 1) {
let displayTime = Math.floor(diffHours);
if (displayTime == 1)
text = " ora fa"
else
text = " ore fa"
timeToDisplay = displayTime + text;
} else {
let displayTime = Math.ceil(diffMinutes);
if (displayTime == 1)
text = " min fa"
else
text = " min fa"
timeToDisplay = displayTime + text;
}
timeToDisplay = timeToDisplay;
return timeToDisplay;
}
</script>


<script> document.querySelectorAll('.nav-link').forEach(linkItem => {
linkItem.addEventListener('click', _ => {
window.scrollTo(0, 0)
})
})</script>

</html>
12 changes: 5 additions & 7 deletions snstranscripts.html
Original file line number Diff line number Diff line change
Expand Up @@ -176,20 +176,18 @@ <h1 class="modal-title fs-5" id="pwdModalLabel">Inserisci la password necessaria
</div>
</div>



<!-- create main div for button row -->
<div id="main-div" class="sticky-top m-2">
<div class="container sticky-top main-div bg-white">
<div class="row justify-content-md-center">
<button class="top-btns btn btn-sm btn-outline-dark rounded-pill col-2" onclick='window.location.reload();'><i
<button class="btn btn-sm btn-outline-dark rounded-pill col-2" onclick='window.location.reload();'><i
class='bi bi-arrow-repeat'></i></button>
<button id="openAllBtn" class="top-btns btn btn-sm btn-outline-success rounded-pill col-4 ">Apri tutti</button>
<button id="closeAllBtn" class="top-btns btn btn-sm btn-outline-success rounded-pill col-4">Chiudi
<button id="openAllBtn" class="btn btn-sm btn-outline-success rounded-pill col-4 ">Apri tutti</button>
<button id="closeAllBtn" class="btn btn-sm btn-outline-success rounded-pill col-4">Chiudi
tutti</button>
<button class="top-btns btn btn-sm btn-outline-dark rounded-pill col-1" onclick='window.scrollTo(0, 0)'><i
<button class="btn btn-sm btn-outline-dark rounded-pill col-1" onclick='window.scrollTo(0, 0)'><i
class='bi bi-arrow-up'></i></button>
<button class="top-btns btn btn-sm btn-outline-dark rounded-pill col-1"
<button class="btn btn-sm btn-outline-dark rounded-pill col-1"
onclick='window.scrollTo(0, document.body.scrollHeight)'><i class='bi bi-arrow-down '></i></button>
</div>
<div class="input-group mt-2">
Expand Down

0 comments on commit 3b9d6be

Please sign in to comment.