Merge pull request 'for-pi2' (#2) from for-pi2 into main

Reviewed-on: #2
2023-11-24 07:54:18 +01:00 · 2023-11-24 07:54:18 +01:00 · 98d8c3b994
commit 98d8c3b994
parent 73163da9ec bcaa5a5edd
9 changed files with 11525 additions and 29 deletions
--- a/README_SSB.md
+++ b/README_SSB.md
@ -0,0 +1,16 @@
+## Additions made by SSB for BDK23
+
+# added carousel for posts
+
+## Important
+
+install color emojis:
+sudo apt-get install fonts-noto-color-emoji
+
+install xdotool to move the mouse to bottom right (does not work with Bookworm/Wayland)
+sudo apt-get install xdotool -y
+
+run in kiosk mode:
+chromium-browser --kiosk index.html
+
+or use the remote URL instead of index.html
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
--- a/config.json
+++ b/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
 }
--- a/index.html
+++ b/index.html
@ -4,10 +4,20 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Netzbegrünung Mastowall</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <link rel="apple-touch-icon" href="mastowall-favicon.png">
    <link rel="icon" href="mastowall-favicon.png" type="image/x-icon">
+
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.3/purify.min.js"></script>
+    <script src="script.js"></script>
+
 </head>
 <body>
    <nav class="navbar navbar-light">
@ -50,6 +60,11 @@
        <div class="row masonry-grid" id="wall"></div>
    </div>

+    <div id="popover" class="popover">
+        <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">
      <div class="container">
          <a href="https://netzbegruenung.de/" target="_blank">Netzbegrünung</a>
@ -57,10 +72,5 @@
      </div>
    </footer>

-    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
-    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.3/purify.min.js"></script>
-    <script src="script.js"></script>
 </body>
 </html>
--- a/masonry.pkgd.min.js
+++ b/masonry.pkgd.min.js
--- a/mastowall.desktop
+++ b/mastowall.desktop
@ -0,0 +1,6 @@
+[Desktop Entry]
+Type=Application
+Name=MastoWall Autostart
+Comment=Starten der MastoWall zur BDK23
+NoDisplay=false
+Exec=sh -c 'cd /home/ssb/Documents/mastowall && xdotool mousemove 1920 1080 && sleep 5 && chromium-browser --kiosk index.html'
--- a/script.js
+++ b/script.js
@ -6,6 +6,7 @@ function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
+    console.log(results)
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
 }

@ -16,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: 2592000, text: 'Monaten' },
-        { limit: 86400, text: 'Tagen' },
-        { limit: 3600, text: 'Stunden' },
-        { limit: 60, text: 'Minuten' }
+        { limit: 31536000, singular: 'Jahre', plural: 'Jahren' },
+        { limit: 2592000, singular: 'Monat', plural: 'Monaten' },
+        { limit: 86400, singular: 'Tag', plural: 'Tagen' },
+        { limit: 3600, singular: 'Stunde', plural: 'Stunden' },
+        { 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() {
@ -41,9 +63,23 @@ 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.error("Error loading config.json:", error);
+        console.log("Error loading config.json:", error);
+        $('#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";
    }
 }

@ -68,7 +104,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);

@ -77,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>
@ -90,16 +126,104 @@ const displayPost = function(post) {
    let $card = $(cardHTML);
    $('#wall').prepend($card);
    $('.masonry-grid').masonry('prepended', $card);
+    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));
-    posts.forEach(post => displayPost(post));
+
+    let ret = 0
+    posts.forEach(post => ret += displayPost(post));
+    $('.masonry-grid').masonry('layout');
+    return ret;
 };

+
+// updateCarousel
+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
+    slides.innerHTML = "";
+    var newHTML = ` <!-- No Indicators -->`
+    newHTML += `<!-- the slides -->
+                <div class="carousel-inner">
+                `
+    for( let i = 0; i < posts.length; i++ ) {
+        let post = posts[i];
+        /*console.log( post.content )*/
+        if ( i == 0 ) {
+            newHTML += `<div class="carousel-item active" data-mdb-interval="${duration}" data-mdb-pause="false">`;
+        }
+        else {
+            newHTML += `<div class="carousel-item" data-mdb-interval="${duration}" data-mdb-pause="false">`;
+        }
+        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>
+                </div>
+                <hr>
+                <div class="row align-items-center vertical-align-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-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>` : ''}
+                </div>
+                <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>
+                        ${post.favourites_count ? `, <b>${post.favourites_count}</b> mal favorisiert` : '' }
+                        ${post.replies_count ? `, <b>${post.replies_count}</b> mal kommentiert` : '' }
+                        ${post.reblogs_count ? `, <b>${post.reblogs_count}</b> mal geteilt` : '' }
+                    </small>
+                </p>
+            </div>
+        `;
+        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;
+};
+
+const showCarousel = function() {
+    // show popover
+    document.getElementById('popover').style.opacity = '1';
+    // 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) {
  return `${hashtagsArray.map(hashtag => `#${hashtag}`).join(' ')}`;
@ -122,6 +246,9 @@ const handleHashtagDisplayClick = function(serverUrl) {
    $('#zero-state').removeClass('d-none');

    const currentHashtags = getUrlParameter('hashtags').split(',');
+    if ( currentHashtags = null ) {
+        currentHasttags = "netzbegruenung,bdk23".split(',')
+    }

    for (let i = 0; i < currentHashtags.length; i++) {
        $(`#hashtag${i+1}`).val(currentHashtags[i]);
@ -167,9 +294,12 @@ $(document).ready(async function() {

    setInterval(function() {
        $('.masonry-grid').masonry('layout');
-    }, 10000);
+    }, refresh);
    
-    const hashtags = getUrlParameter('hashtags');
+    let hashtags = getUrlParameter('hashtags');
+    if ( hashtags == '' ) {
+        hashtags = "netzbegruenung,bdk23";
+    }
    const hashtagsArray = hashtags ? hashtags.split(',') : [];
    const serverUrl = getUrlParameter('server') || defaultServerUrl;

@ -177,15 +307,32 @@ $(document).ready(async function() {
        handleHashtagDisplayClick(serverUrl);
    });

+    const slides = $('#myCarousel');
+    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');
+            }, 2000);
+
+        updateCarousel(slides, allPosts.flat());
+        
+        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()
+                updateCarousel(slides, newPosts.flat());
+                setTimeout(async function() { showCarousel(); }, duration)
+            }
+        }, refresh);
    } else {
        $('#zero-state').removeClass('d-none');
+        $('#popover').removeClass('popover');
        $('#app-content').addClass('d-none');
    }

@ -196,6 +343,7 @@ $(document).ready(async function() {
        handleHashtagFormSubmit(e, hashtagsArray);
    });

+
    updateTimesOnPage();
    setInterval(updateTimesOnPage, 60000);
 });
--- a/sharepic.jpg
+++ b/sharepic.jpg
--- a/styles.css
+++ b/styles.css
@ -1,8 +1,12 @@
+@charset "utf-8";
+
 /* Add some custom CSS for the cards */
 .card {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
+  background-color: rgb(240,255,240);
+
 }

 /* Position the avatar and username in the top left of the card */
@ -62,8 +66,8 @@

 /* Custom navbar styles */
 .navbar {
-  height: 50px;  /* reduce the height of the navbar */
-  background-color: rgb(227, 6, 19);
+  min-height: 50px;  /* reduce the height of the navbar */
+  background-color: rgb(0, 137, 57);
  margin-bottom: 10px !important;
  top: -10px !important;
  padding-top: 14px !important;
@ -72,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;
 }

@ -124,12 +128,28 @@ body {
  height: 50px;
 }

+.avatar-img-big {
+  width: 100px;
+  height: 100px;
+}
+
+.avatar-name {
+    font-size:2em;
+    font-weight:600;
+    padding-top:0.3em
+}
+
+.user-name {
+    font-weight: normal;
+    opacity: 0.7;
+}
+
 .container {
  max-width: 2000px !important;
  }

 .footer {
-    background-color: rgb(200, 200, 200);
+    background-color: rgb(0, 137, 57);
    color: #f2f2f2;
    position: fixed;
    left: 0;
@ -139,3 +159,65 @@ body {
    padding-bottom: 2px !important; /* reduce padding-bottom to half */
    font-size: 0.9em;
 }
+
+.popover {
+    position: fixed;
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80%;
+    max-height: 80%;
+    max-width: 80%;
+    background-color: rgba(255, 255, 255, .95);
+    background-clip: padding-box;
+    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-text ~ p {
+    font-size: 1.4em;
+}
+
+.card-img-bottom {
+    max-width: 600px;
+    max-height: 500px;
+    width: auto;
+    text-align: center;
+    aspect-ratio: auto !important;
+    border-top-left-radius: calc(.25rem - 1px);
+    border-top-right-radius:calc(.25rem - 1px);
+    margin-top: 0px !important;
+    margin-bottom: 10px !important;
+    align-items: center;
+}
+
+.text-muted {
+    color:#6c757d !important;
+    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;
+}