Do not display posts with content warning

Reviewed-on: #8
Reviewed-by: Norbert Tretkowski <norbert@tretkowski.de>

README.md

@@ -1,9 +1,10 @@
 # Mastowall 1.1
 
+Forked from [https://github.com/rstockm/mastowall](https://github.com/rstockm/mastowall)
+
 Mastowall is a social wall application that displays posts from the [Mastodon](https://joinmastodon.org/) social network based on specified hashtags. It was written entirely by [ChatGPT4](https://openai.com/product/gpt-4), guided only by text prompts.
 
-<img width="1348" alt="image" src="https://github.com/rstockm/mastowall/assets/3195116/7060536e-4847-4e38-801e-3c0312b8b194">
+<img width="1348" alt="image" src="https://git.verdigado.com/NB-Public/mastowall/raw/branch/main/screenshot.jpg">
-
 
 Try it live: [Mastowall for BDK23](https://tretkowski.de/mastowall/?hashtags=bdk23,netzbegruenung&server=https://gruene.social)
 
@@ -37,6 +38,8 @@ JSON config file:
 
 - **Including Replies:** By default, replies are excluded from the wall. However, this behavior can be changed by setting includeReplies to true in the `config.json` file.
 
+- **Configurable Overlay:** By default only the MastoWall is shown. For use with large displays eg during trade shows, conferences, booths, you can enable the Carousel with enlarged display of the 10 most recent posts. Just add `nbstand=1` to the argument in the URL.
+
 ## Technology Stack
 
 Mastowall is built using the following technologies:
@@ -63,7 +66,7 @@ Mastowall is built using the following technologies:
 
 ## Sharing via URL
 
-Mastowall supports URL parameters to easily share specific hashtag configurations and the Mastodon server. Simply append the desired hashtags and the server URL to the URL following this format: `?hashtags=hashtag1,hashtag2,hashtag3&server=serverUrl`
+Mastowall supports URL parameters to easily share specific hashtag configurations and the Mastodon server. Simply append the desired hashtags and the server URL to the URL following this format: `?hashtags=hashtag1,hashtag2,hashtag3&server=serverUrl&nbstand=0`
 
 Enjoy using Mastowall!
 

config.json

@@ -6,7 +6,10 @@
   "refreshDuration": 30,
   "maxAge": 604800,
   "extraCards": [
-    "<img src='sharepic.jpg' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
+    "<img src='sharepics/Slide1.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>",
+    "<img src='sharepics/Slide2.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>",
+    "<img src='sharepics/Slide3.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>",
+    "<img src='sharepics/Slide4.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
   ],
   "includeReplies": true
 }

index.html

@@ -38,11 +38,11 @@
                     </div>
                     <div class="form-group">
                         <label for="hashtag2">Hashtag 2:</label>
-                        <input type="text" class="form-control" id="hashtag2" placeholder="Enter a hashtag" value="bdk23">
+                        <input type="text" class="form-control" id="hashtag2" placeholder="Enter a hashtag" value="bdk24">
                     </div>
                     <div class="form-group">
                         <label for="hashtag3">Hashtag 3:</label>
-                        <input type="text" class="form-control" id="hashtag3" placeholder="Enter a hashtag">
+                        <input type="text" class="form-control" id="hashtag3" placeholder="Enter a hashtag" value="wasjetztzählt">
                     </div>
                     <div class="form-group">
                         <label for="serverUrl">Server:</label>

script.js

@@ -55,6 +55,8 @@ let duration;
 let refresh;
 // extra cards text
 let extraCards;
+// toggle Carousel
+let withCarousel=false;
 
 // fetchConfig fetches the configuration from the config.json file
 const fetchConfig = async function() {
@@ -77,7 +79,10 @@ const fetchConfig = async function() {
         duration = 10000;
         refresh = 30000;
         extraCards = [
-            "<div><img src='sharepic.jpg' style='max-width: 100%;max-height: 100%'></div>"
+            "<img src='sharepics/Slide1.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>",
+            "<img src='sharepics/Slide2.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>",
+            "<img src='sharepics/Slide3.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>",
+            "<img src='sharepics/Slide4.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
         ];
         return "https://gruene.social";
     }
@@ -104,6 +109,14 @@ const updateTimesOnPage = function() {
     });
 };
 
+// replace certain emojies in some text with images
+const replaceEmojies = (text, emojis) => {
+    emojis.forEach(emoji => {
+        text = text.replaceAll(`:${emoji.shortcode}:`, `<img class="emoji" src="${emoji.static_url}">`);
+    });
+    return text;
+};
+
 // displayPost creates and displays a post
 const displayPost = function(post) {
     if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return 0;
@@ -115,10 +128,14 @@ 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)}  <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
+                    <p class="m-0">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)}  <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">` : ''}
+                ${post.media_attachments[0] ?
-                <p class="card-text">${DOMPurify.sanitize(post.content)}</p>
+                    (post.media_attachments[0].url.endsWith('.mp4') ?
+                        `<video src="${post.media_attachments[0].url}" controls autoplay muted loop></video>` :
+                        `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">`) :
+                    ''}
+                <p class="card-text">${replaceEmojies(DOMPurify.sanitize(post.content), post.emojis)}</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 class="time" href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
             </div>
@@ -133,7 +150,7 @@ const displayPost = function(post) {
 
 const processPosts = function(posts) {
     posts = posts.filter((post) => {
-        return secondsAgo(new Date(post.created_at)) < maxAge && post.content.indexOf("nitter.") === -1
+        return secondsAgo(new Date(post.created_at)) < maxAge && post.content.indexOf("nitter.") === -1 && post.spoiler_text === ""
     });
 
     return posts;
@@ -185,17 +202,22 @@ const updateCarousel = function(slides, posts) {
         else {
             newHTML += `<div class="carousel-item" data-interval="${duration}" data-pause="false">`;
         }
-        const postContent = DOMPurify.sanitize(post.content);
+        const postContent = replaceEmojies(DOMPurify.sanitize(post.content), post.emojis);
         newHTML += `
             <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)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
+                    <p class="avatar-name">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
                 </div>
                 <hr>
                 <div class="row align-items-center vertical-align-center">
-                    <div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 800 ? `style="font-size: 0.9em;"`: ``}>${postContent}</div></div>
+                    <div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 700 ? `style="font-size: ${strip(postContent).length > 1000 ? `0.5`:`0.9`}em;"`: ``}>${postContent}</div></div>
-                    ${post.media_attachments[0] ? `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>` : ''}
+                    ${post.media_attachments[0] ?
+                        (post.media_attachments[0].url.endsWith('.mp4') ?
+                            `<div class="col-md-6"><video src="${post.media_attachments[0].url}" controls autoplay muted loop class="card-img-bottom" align="center"></video></div>` :
+                            `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>`) :
+                        ''}
+
                 </div>
                 <hr>
                 <p class="card-text text-right">
@@ -210,7 +232,7 @@ 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">
+        newHTML += `<div class="carousel-item" data-interval="${duration * 2}" data-pause="false">
         <div className="card-big">
             <div class="d-flex align-items-center mb-4">
                 ${extraCards[i]}
@@ -225,6 +247,7 @@ const updateCarousel = function(slides, posts) {
 const showCarousel = function() {
     // show popover
     document.getElementById('popover').style.opacity = '1';
+    document.getElementById('popover').style.display = 'block';
     // Activate Carousel
     $('#myCarousel').carousel("cycle");
 }
@@ -235,8 +258,8 @@ const strip = function(html) {
 }
 
 const hideCarousel = function() {
-    // show popover
+    // hide popover
-    document.getElementById('popover').style.opacity = '0';
+    document.getElementById('popover').style.display = 'none';
     // Activate Carousel
 }
 
@@ -263,7 +286,7 @@ const handleHashtagDisplayClick = function(serverUrl) {
 
     const currentHashtags = getUrlParameter('hashtags').split(',');
     if ( currentHashtags = null ) {
-        currentHasttags = "netzbegruenung,bdk23".split(',')
+        currentHasttags = "netzbegruenung,bdk24,wasjetztzählt".split(',')
     }
 
     for (let i = 0; i < currentHashtags.length; i++) {
@@ -314,11 +337,16 @@ $(document).ready(async function() {
     
     let hashtags = getUrlParameter('hashtags');
     if ( hashtags == '' ) {
-        hashtags = "netzbegruenung,bdk23";
+        hashtags = "netzbegruenung,bdk24,wasjetztzählt";
     }
     const hashtagsArray = hashtags ? hashtags.split(',') : [];
     const serverUrl = getUrlParameter('server') || defaultServerUrl;
 
+    const enableCarousel = getUrlParameter('nbstand' );
+    if ( enableCarousel == '1' )
+        withCarousel = true;
+    console.log("show carousel: "+withCarousel);
+
     $('#hashtag-display').on('click', function() {
         handleHashtagDisplayClick(serverUrl);
     });
@@ -334,16 +362,16 @@ $(document).ready(async function() {
             $('.masonry-grid').masonry('layout');
             }, 2000);
 
-        updateCarousel(slides, allPosts.flat());
+        if ( withCarousel) {
-        
+            updateCarousel(slides, allPosts.flat());
-        setTimeout(async function() { showCarousel(); }, duration)
+            setTimeout(async function() { showCarousel(); }, duration);
+        }
+        else setTimeout(async function() { hideCarousel(); }, duration);
         setInterval(async function() {
             const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
             let updated = updateWall(newPosts.flat());
-            if ( updated > 0 ) {
+            if ( withCarousel && updated > 0 ) {
-                hideCarousel()
                 updateCarousel(slides, newPosts.flat());
-                setTimeout(async function() { showCarousel(); }, duration)
             }
         }, refresh);
     } else {

styles.css

@@ -51,9 +51,9 @@
 }
 
 .carousel .card-text {
-    font-size: 1.4em;
+    font-size: 1.6em;
     overflow: hidden;
-    max-height: 60vh;
+    max-height: 50vh;
 }
 
 .card {
@@ -208,7 +208,7 @@ body {
 
 .text-muted {
     color:#6c757d !important;
-    font-size: 1.2em;
+    font-size: 1em;
     text-align: right;
 }
 
@@ -223,4 +223,8 @@ body {
 
 .footer a {
     color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.emoji {
+    height: 1em;
 }