Fixed account navigation bugs + added better account no images uploaded handling

src/routes/_actions/accounts.js

@@ -7,6 +7,9 @@ async function _updateAccount (accountId, instanceName, accessToken) {
   const localPromise = database.getAccount(instanceName, accountId)
   const remotePromise = getAccount(instanceName, accessToken, accountId).then(account => {
     /* no await */ database.setAccount(instanceName, account)
+    if (process.browser) {
+      window.fediloveData.currentAccount = account;
+    }
     return account
   })
 

src/routes/_api/timelines.js

@@ -98,6 +98,10 @@ export async function getTimeline (instanceName, accessToken, timeline, maxId, s
 
   if (timeline === 'federated') {
     items = window.fediloveFunctions.filterItemsForFedilove(items);
+  } else if (timeline.startsWith('account/') && params.tagged === 'fediloveimg') {
+    if (items.length === 0) {
+      window.fediloveData.currentAccountIsEmpty = true;
+    }
   }
 
   return { items, headers }

src/scss/themes/ozark.scss

@@ -346,6 +346,22 @@ div.main-content.account {
     max-width: 100em;
     margin: auto;
 
+    div.no-images-account {
+      height: 100vh;
+      display: flex;
+
+      img.fixed-size-img {
+        max-width: 100vw;
+        max-height: 100vh;
+        object-fit: contain !important;
+        margin: auto;
+      }
+    }
+
+    div.virtual-list-item {
+      opacity: 1 !important;
+    }
+
     article.status-article {
       cursor: initial !important;
       background: none !important;
@@ -398,6 +414,7 @@ div.main-content.meet {
   div.virtual-list-item {
     max-width: 100em;
     margin: auto;
+    opacity: 1 !important;
 
     article.status-article {
       background-repeat: no-repeat !important;
@@ -432,6 +449,8 @@ div.main-content.meet {
 
       div.status-content {
         position: absolute;
+        max-height: 30%;
+        overflow: auto;
         padding: 2em;
         bottom: 8%;
         color: #fff;

static/fedilove-no-react.js

@@ -81,7 +81,8 @@ var fediloveUI = {
         }, false);
     },
     meetAccountImageDirection: function(direction) {
-        if (fediloveUI.meetAccountImageLocked) return;
+        if (!window.location.pathname.startsWith('/accounts') ||
+            fediloveUI.meetAccountImageLocked) return;
         fediloveUI.meetAccountImageLocked = true;
 
         var dontMove = false;
@@ -229,6 +230,8 @@ var fediloveData = {
     chatAvatarCache: undefined,
     meetAccountCurrentImg: 0,
     meetAccountImageLocked: false,
+    currentAccount: null,
+    currentAccountIsEmpty: false,
     gotEmojifyTextFunction: false,
     composeTxtKeypressEvent: false
 };
@@ -298,7 +301,6 @@ var fediloveEvents = {
 
 
 // this is our URL-based customizations made by JavaScript
-var intervalChatCssChange = null;
 function fedilove_customization() {
     if (document.querySelector('#main-nav > div#dummy-nav') != null) {
         document.querySelector('#main-nav > div#dummy-nav').remove();
@@ -312,6 +314,7 @@ function fedilove_customization() {
     document.querySelector('#chat-compose-global').style = 'visibility: collapse';
     document.querySelector('#chat-party-hide').style = 'display: none !important';
     document.querySelector('nav#main-nav > ul.main-nav-ul').style = '';
+    fediloveData.currentAccountIsEmpty = false;
 
     $('nav#main-nav li.main-nav-li svg').each(function() {
         $(this).removeClass('active');
@@ -380,11 +383,13 @@ function fedilove_customization() {
         // this function changes the css class on articles (messages)
         //  that match the given account_id
         var makeMessageUIModifications = function(account_id) {
-            if (intervalChatCssChange !== null) return;
             var theint = 150;
-            setInterval(function()
+            const _this = setInterval(function()
             {
-                intervalChatCssChange = this;
+                if (!window.location.pathname.startsWith('/statuses/')) {
+                    clearInterval(_this);
+                    return;
+                }
 
                 // paint MY messages as mine
                 $('div.main-content.chat article.status-article').each(function(i) {
@@ -448,8 +453,6 @@ function fedilove_customization() {
         document.querySelector('#meet-navigation > #profile-nav').style = '';
         $('#meet-navigation > #anim-swipe').html('');
 
-        // TO-DO: disable click events on every article
-
         // prev and next navigation
         const cloneBackSvg = function(selector) {
             $(selector).html('');
@@ -464,6 +467,40 @@ function fedilove_customization() {
                 fediloveUI.meetAccountImageDirection('prev');
             else fediloveUI.meetAccountImageDirection('next');
         });
+
+        // clone the first element and include the account header image
+        var countmax = 0;
+        const _applyImageTo = function(selector) {
+            setTimeout(function()
+            {   // set image of first item to the account header (100ms after cloning the object)
+                if (window.fediloveData.currentAccount != null) {
+                    if ($(selector)[0] !== undefined)
+                        $(selector)[0].src = window.fediloveData.currentAccount.header;
+                }
+            }, 300);
+        };
+        const _this = setInterval(function() {
+            // max interval time: 10 seconds
+            if (countmax > 50 || $('div.virtual-list > div.virtual-list-item').length > 0) {
+                if ($('div.virtual-list > div.virtual-list-item').length > 0) {
+                    // clone the first element, insert it at the next position
+                    const _e = $('div.virtual-list > div.virtual-list-item:last').clone();
+                    $(_e).insertAfter('div.virtual-list > div.virtual-list-item:last');
+                    _applyImageTo('div.virtual-list > div.virtual-list-item:last div.status-media img');
+                }
+
+                clearInterval(_this);
+            } else if (fediloveData.currentAccountIsEmpty && window.fediloveData.currentAccount != null) {
+                $('div.virtual-list').html('<div class="no-images-account"><img class="fixed-size-img"/></div>');
+                _applyImageTo('div.virtual-list > div.no-images-account > img.fixed-size-img');
+                $('#meet-navigation > #profile-nav > #next')[0].style = 'display: none !important';
+
+                clearInterval(_this);
+            } else if (!window.location.pathname.startsWith('/accounts')) {
+                clearInterval(_this);
+            }
+            countmax++;
+        }, 200);
     }
     else if (window.location.pathname == '/federated')
     {