From a4891e24bb15a2bfee88baf26c51fd769b54d290 Mon Sep 17 00:00:00 2001
From: Stefan Schmidt-Bilkenroth <ssb@mac.com>
Date: Fri, 10 Nov 2023 19:42:57 +0100
Subject: [PATCH] some more work

---
 index.html |  25 +-----------
 script.js  | 110 ++++++++++++++++++++++++-----------------------------
 styles.css |  38 ++++++++++++++++++
 3 files changed, 88 insertions(+), 85 deletions(-)

diff --git a/index.html b/index.html
index 7d687a4..88b522b 100644
--- a/index.html
+++ b/index.html
@@ -61,31 +61,8 @@
     </div>
 
     <div id="popover" class="popover">
-
-        <div id="myCarousel" class="carousel slide" data-mdb-ride="carousel" data-mdb-interval="1000" data-mdb-pause="false">
-          <!-- Indicators -->
-          <ul class="carousel-indicators">
-            <li data-target="#myCarousel" class="active"></li>
-            <li data-target="#myCarousel" ></li>
-            <li data-target="#myCarousel" ></li>
-          </ul>
-
-          <!-- The slideshow -->
-          <div class="carousel-inner">
-            <div class="carousel-item active">
-              <img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100"
-                alt="Wild Landscape" />
-            </div>
-            <div class="carousel-item">
-              <img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
-            </div>
-            <div class="carousel-item">
-              <img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100"
-                alt="Exotic Fruits" />
-            </div>
-          </div>
+        <div id="myCarousel" class="carousel slide" data-mdb-ride="carousel" data-mdb-pause="false">
         </div>
-
     </div>
 
     <footer class="footer text-center py-4 mt-5">
diff --git a/script.js b/script.js
index 6e89d85..617a79f 100644
--- a/script.js
+++ b/script.js
@@ -1,6 +1,12 @@
 // The existingPosts array is used to track already displayed posts
 let existingPosts = [];
 
+// below times are in milliseconds
+// duration for slide animations
+let duration = 5000;
+// refresh rate
+let refresh = 30000;
+
 // getUrlParameter helps to fetch URL parameters
 function getUrlParameter(name) {
     name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
@@ -68,7 +74,7 @@ const updateTimesOnPage = function() {
 
 // displayPost creates and displays a post
 const displayPost = function(post) {
-    if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return;
+    if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return 0;
 
     existingPosts.push(post.id);
 
@@ -90,6 +96,7 @@ const displayPost = function(post) {
     let $card = $(cardHTML);
     $('#wall').prepend($card);
     $('.masonry-grid').masonry('prepended', $card);
+    return 1;
 };
 
 // updateWall displays all posts
@@ -97,33 +104,10 @@ const updateWall = function(posts) {
     if (!posts || posts.length === 0) return;
 
     posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
-    posts.forEach(post => displayPost(post));
-};
-
-
-// displayPost creates and displays a post
-const displayCarousel = function(post) {
-    if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return;
-
-    existingPosts.push(post.id);
-
-    let cardHTML = `
-        <div class="col-sm-3">
-            <div class="card m-2 p-2">
-                <div class="d-flex align-items-center mb-2">
-                    <img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
-                    <p class="m-0">${DOMPurify.sanitize(post.account.display_name)}</p>
-                </div>
-                ${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''}
-                <p class="card-text">${DOMPurify.sanitize(post.content)}</p>
-                ${post.spoiler_text ? `<p class="card-text text-muted spoiler">${DOMPurify.sanitize(post.spoiler_text)}</p>` : ''}
-                <p class="card-text text-right"><small class="text-muted"><a href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
-            </div>
-        </div>
-    `;
-
-    let $card = $(cardHTML);
-    $('#myCarousel').prepend($card);
+    let ret = 0
+    posts.forEach(post => ret += displayPost(post));
+    $('.masonry-grid').masonry('layout');
+    return ret;
 };
 
 
@@ -131,50 +115,36 @@ const displayCarousel = function(post) {
 const updateCarousel = function(slides, posts) {
     if (!posts || posts.length === 0) return;
 
-    posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+    posts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
     
     // remove slides in carousel
     slides.innerHTML = "";
-    console.log( slides )
-    
-
-    newHTML = ` <!-- No Indicators -->`
-/*
-          <ul class="carousel-indicators">
-          `
-    for( let i = 0; i < posts.length; i++ ) {
-        if ( i == 0)
-            newHTML += `<li data-target="#myCarousel" class="active"></li>`;
-        else
-            newHTML += `<li data-target="#myCarousel"></li>`;
-    }
-    newHTML += `</ul>`
-*/
+    var newHTML = ` <!-- No Indicators -->`
     newHTML += `<!-- the slides -->
                 <div class="carousel-inner">
                 `
     for( let i = 0; i < posts.length; i++ ) {
         let post = posts[i];
         if ( i == 0 ) {
-            newHTML += '<div class="carousel-item active">';
+            newHTML += `<div class="carousel-item active" data-mdb-interval="${duration}" >`;
         }
         else {
-            newHTML += '<div class="carousel-item">';
+            newHTML += `<div class="carousel-item" data-mdb-interval="${duration}" >`;
         }
         newHTML += `
-               <div class="card m-2 p-2">
-                <div class="d-flex align-items-center mb-2">
-                    <img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
-                    <p class="m-0">${DOMPurify.sanitize(post.account.display_name)}</p>
+            <div class="card-big">
+                <div class="d-flex align-items-center mb-4">
+                    <img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4">
+                    <p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)}</p>
                 </div>
-                <div class="row">
-                ${post.media_attachments[0] ? `<div class="col-md-6"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>` : `<div class="col-md-12"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>`}
-                ${post.media_attachments[0] ? `<div class="col-mr-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom"> </div>` : ''}
+                <hr>
+                <div class="row align-items-center">
+                    ${post.media_attachments[0] ? `<div class="col-md-6"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>` : `<div class="col-md-12"><p class="card-text">${DOMPurify.sanitize(post.content)}</p></div>`}
+                    ${post.media_attachments[0] ? `<div class="col-mr-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom"> </div>` : ''}
                 </div>
-
-                ${post.spoiler_text ? `<p class="card-text text-muted spoiler">${DOMPurify.sanitize(post.spoiler_text)}</p>` : ''}
+                <hr>
                 <p class="card-text text-right"><small class="text-muted"><a href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
-                </div>
+            </div>
         `;
         newHTML += '</div>';
     }
@@ -182,6 +152,18 @@ const updateCarousel = function(slides, posts) {
     document.getElementById("myCarousel").innerHTML = newHTML;
 };
 
+const showCarousel = function() {
+    // show popover
+    document.getElementById('popover').style.opacity = '0.95';
+    // Activate Carousel
+    $('#myCarousel').carousel("cycle");
+}
+
+const hideCarousel = function() {
+    // show popover
+    document.getElementById('popover').style.opacity = '0';
+    // Activate Carousel
+}
 
 // hashtagsString returns a single string based on the given array of hashtags
 const hashtagsString = function(hashtagsArray) {
@@ -261,19 +243,25 @@ $(document).ready(async function() {
     });
 
     const slides = $('#myCarousel');
-
+    const popover = $('#popover');
 
     if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') {
         const allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
         updateWall(allPosts.flat());
         const allSlides = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
         updateCarousel(slides, allSlides.flat());
-        // Activate Carousel
-        slides.carousel("cycle");
+        
+        setTimeout(async function() { showCarousel(); }, duration)
         setInterval(async function() {
             const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
-            updateWall(newPosts.flat());
-        }, 10000);
+            let updated = updateWall(newPosts.flat());
+            if ( updated > 0 ) {
+                hideCarousel()
+                const newSlides = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
+                updateCarousel(slides, newSlides.flat());
+                setTimeout(async function() { showCarousel(); }, duration)
+            }
+        }, refresh);
     } else {
         $('#zero-state').removeClass('d-none');
         $('#app-content').addClass('d-none');
diff --git a/styles.css b/styles.css
index 89eb4bc..48107ef 100644
--- a/styles.css
+++ b/styles.css
@@ -126,6 +126,17 @@ body {
   height: 50px;
 }
 
+.avatar-img-big {
+  width: 100px;
+  height: 100px;
+}
+
+.avatar-name {
+    font-size:2em;
+    font-weight:600;
+    padding-top:0.3em
+}
+
 .container {
   max-width: 2000px !important;
   }
@@ -155,4 +166,31 @@ body {
     border: 0px solid rgba(0, 137, 57, .5);
     box-shadow:0 .5rem 1rem rgba(0, 0, 0, .30); !important
     border-radius:.8rem;
+    opacity: 0;
+    transition: opacity 0.5s linear;
 }
+
+.card-big {
+    font-size: 1.8em;
+    font-weight: 400;
+    margin-top: 20px !important;
+    margin-left: 40px !important;
+    margin-right: 40px !important;
+    margin-bottom: 20px !important;
+}
+
+.card-img-bottom {
+    max-width: 600px;
+    max-height: 500px;
+    border-top-left-radius: calc(.25rem - 1px);
+    border-top-right-radius:calc(.25rem - 1px);
+    margin-top: 0px !important;
+    margin-bottom: 10px !important;
+}
+
+.text-muted {
+    color:#6c757d !important;
+    font-size: 0.6em;
+    text-align: right;
+}
+