Merge pull request 'Improvements for display' (#1) from lisswoma/mastowall:for-pi2 into for-pi2

Reviewed-on: #1

config.json

@@ -1,6 +1,12 @@
 {
-  "navbarBrandText": "Netzbegrünung Mastowall",
+  "navbarBrandText": "Netzbegrünung Mastowall - gruene.social",
   "defaultServerUrl": "https://gruene.social",
   "navbarColor": "#008939",
+  "duration": 10,
+  "refreshDuration": 30,
+  "maxAge": 604800,
+  "extraCards": [
+    "<img src='sharepic.jpg' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
+  ],
   "includeReplies": true
 }

script.js

@@ -1,12 +1,6 @@
 // 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(/[\]]/, '\\]');
@@ -23,23 +17,44 @@ const secondsAgo = date => Math.floor((new Date() - date) / 1000);
 const timeAgo = function(seconds) {
     // An array of intervals for years, months, days, hours, and minutes.
     const intervals = [
-        { limit: 31536000, text: 'Jahren' },
+        { limit: 31536000, singular: 'Jahre', plural: 'Jahren' },
-        { limit: 2592000, text: 'Monaten' },
+        { limit: 2592000, singular: 'Monat', plural: 'Monaten' },
-        { limit: 86400, text: 'Tagen' },
+        { limit: 86400, singular: 'Tag', plural: 'Tagen' },
-        { limit: 3600, text: 'Stunden' },
+        { limit: 3600, singular: 'Stunde', plural: 'Stunden' },
-        { limit: 60, text: 'Minuten' }
+        { limit: 60, singular: 'Minute', plural: 'Minuten' }
     ];
 
     // Loop through the intervals to find which one is the best fit.
     for (let interval of intervals) {
         if (seconds >= interval.limit) {
-            return "Vor " + Math.floor(seconds / interval.limit) + ` ${interval.text}`;
+            let amount = Math.floor(seconds / interval.limit);
+            let text;
+            if (amount !== 1) {
+                text = interval.plural;
+            } else {
+                text = interval.singular;
+            }
+            return `Vor ${amount} ${text}`;
         }
     }
-    return "Vor " + Math.floor(seconds) + " Sekunden";
+    let text = "Sekunde";
+    let amount = Math.floor(seconds);
+    if (amount !== 1) {
+        text += "n";
+    }
+    return `Vor ${amount} ${text}`;
 };
 
 let includeReplies;
+// max post age in seconds
+let maxAge;
+// below times are in milliseconds
+// duration for slide animations
+let duration;
+// refresh rate
+let refresh;
+// extra cards text
+let extraCards;
 
 // fetchConfig fetches the configuration from the config.json file
 const fetchConfig = async function() {
@@ -48,12 +63,22 @@ const fetchConfig = async function() {
         $('#navbar-brand').text(config.navbarBrandText);
         $('.navbar').css('background-color', config.navbarColor);
         includeReplies = config.includeReplies;
+        maxAge = config.maxAge;
+        duration = config.duration * 1000;
+        refresh = config.refreshDuration * 1000;
+        extraCards = config.extraCards;
         return config.defaultServerUrl;
     } catch (error) {
         console.log("Error loading config.json:", error);
-        $('#navbar-brand').text("Netzbegrünung Mastowall");
+        $('#navbar-brand').text("Netzbegrünung Mastowall - gruene.social");
         $('.navbar').css('background-color', "#008939");
         includeReplies = true;
+        maxAge = 60 * 60 * 24 * 7;
+        duration = 10000;
+        refresh = 30000;
+        extraCards = [
+            "<div><img src='sharepic.jpg' style='max-width: 100%;max-height: 100%'></div>"
+        ];
         return "https://gruene.social";
     }
 }
@@ -88,7 +113,7 @@ const displayPost = function(post) {
             <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>
+                    <p class="m-0">${DOMPurify.sanitize(post.account.display_name)}  <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></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>
@@ -104,11 +129,22 @@ const displayPost = function(post) {
     return 1;
 };
 
+const processPosts = function(posts) {
+    posts = posts.filter((post) => {
+        return secondsAgo(new Date(post.created_at)) < maxAge && post.content.indexOf("nitter.") === -1
+    });
+
+    return posts;
+};
+
 // updateWall displays all posts
 const updateWall = function(posts) {
     if (!posts || posts.length === 0) return;
 
+    posts = processPosts(posts);
+
     posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+
     let ret = 0
     posts.forEach(post => ret += displayPost(post));
     $('.masonry-grid').masonry('layout');
@@ -120,6 +156,8 @@ const updateWall = function(posts) {
 const updateCarousel = function(slides, posts) {
     if (!posts || posts.length === 0) return;
 
+    posts = processPosts(posts);
+
     posts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
 
     // remove slides in carousel
@@ -141,7 +179,7 @@ const updateCarousel = function(slides, posts) {
             <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>
+                    <p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
                 </div>
                 <hr>
                 <div class="row align-items-center vertical-align-center">
@@ -160,6 +198,15 @@ const updateCarousel = function(slides, posts) {
         `;
         newHTML += '</div>';
     }
+    for( let i = 0; i < extraCards.length; i++ ) {
+        newHTML += `<div class="carousel-item" data-mdb-interval="${duration * 2}" data-mdb-pause="false">
+        <div className="card-big">
+            <div class="d-flex align-items-center mb-4">
+                ${extraCards[i]}
+            </div>
+        </div>
+        </div>`;
+    }
     newHTML += '</div>'
     document.getElementById("myCarousel").innerHTML = newHTML;
 };
@@ -264,7 +311,8 @@ $(document).ready(async function() {
     const popover = $('#popover');
 
     if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') {
-        const allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
+        let allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
+
         updateWall(allPosts.flat());
         setTimeout(function() {
             $('.masonry-grid').masonry('layout');

styles.css

@@ -66,7 +66,7 @@
 
 /* Custom navbar styles */
 .navbar {
-  height: 50px;  /* reduce the height of the navbar */
+  min-height: 50px;  /* reduce the height of the navbar */
   background-color: rgb(0, 137, 57);
   margin-bottom: 10px !important;
   top: -10px !important;
@@ -76,13 +76,13 @@
 .navbar-brand {
   color: rgba(255, 255, 255, 0.8) !important;  /* change the text color */
   margin: 0 auto;  /* center the brand name */
-  font-size: 0.9em;
+  font-size: 1.8em;
 }
 
 .navbar-info {
   color: rgba(255, 255, 255, 0.8) !important;  /* change the text color */
   margin: 0 auto;  /* center the brand name */
-  font-size: 1.2em;
+  font-size: 2.4em;
   display: block !important;
 }
 
@@ -139,6 +139,11 @@ body {
     padding-top:0.3em
 }
 
+.user-name {
+    font-weight: normal;
+    opacity: 0.7;
+}
+
 .container {
   max-width: 2000px !important;
   }
@@ -181,6 +186,10 @@ body {
     margin-bottom: 20px !important;
 }
 
+.card-text ~ p {
+    font-size: 1.4em;
+}
+
 .card-img-bottom {
     max-width: 600px;
     max-height: 500px;
@@ -196,6 +205,19 @@ body {
 
 .text-muted {
     color:#6c757d !important;
-    font-size: 0.6em;
+    font-size: 1.2em;
     text-align: right;
 }
+
+.footer {
+    font-size: 2em;
+}
+
+.footer .text-muted {
+    color: rgba(255, 255, 255, 0.8) !important;
+    font-size: 0.8em;
+}
+
+.footer a {
+    color: rgba(255, 255, 255, 0.8) !important;
+}