Merge pull request 'a fix for nsfw warnings display on webkit' (#488) from mkljczk/akkoma-fe:webkit-fix into develop

Reviewed-on: AkkomaGang/akkoma-fe#488

CHANGELOG.md

@@ -3,12 +3,28 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
-## Unreleased
+## Unreleased (3.18)
+### REMOVED
+- dropped obsolete and buggy dm timeline
+
 ### Added
+- UI for conversations API, replacing the DM timeline.
+  Here each thread (conversation) has it’s own timeline and read markers instead of mixing everything together.
+- Boosts now show when and with which visibility they were boosted
+- bookmarks are now accessible via the narrow/mobile UI
+
+### Fixed
+- fixed saving fallback cop yof settings to local browser storage
+- improve image animation detection further
+- fix status content parsing for mention and hashtag detection; this could lock the UI until reload
+- fix display of nsfw attachment overlays on webkit
+
+## Between 2022.09 (3.2.0) and 2025.12 (3.17.0)
+A whole lot of stuff, but we forgot to update the changelog besides the one entry below, oopsi
+
 - Implemented remote interaction with statuses
 
-
-## 2022.09 - 2022-09-10
+## 2022.09 (3.2.0) - 2022-09-10
 ### Added
 - Automatic post translations. Must be configured on the backend in order to work.
 - Post editing, including a log of previous edits.

src/components/attachment/attachment.scss

@@ -26,6 +26,12 @@
     }
   }
 
+  &.-nsfw-placeholder {
+    .attachment-wrapper {
+      align-content: unset;
+    }
+  }
+
   .description-container {
     flex: 0 1 0;
     display: flex;

src/components/dm_conv_card/dm_conv_card.vue

@@ -6,8 +6,9 @@
       <div class="heading">
         <div class="title-bar">
           <div class="title-bar-left">
-            <div class="unread"
+            <div
               v-if="conversation.unread"
+              class="unread"
             >
               <span
                 class="badge badge-notification"
@@ -29,7 +30,7 @@
               </button>
               &nbsp;
             </div>
-            <h4>{{ $t('dm_conv.default_name', {id: this.conversation.id}) }}</h4>
+            <h4>{{ $t('dm_conv.default_name', {id: conversation.id}) }}</h4>
           </div>
           <div class="title-bar-right">
             <button
@@ -48,17 +49,21 @@
       <div class="members">
         <UserAvatar
           v-for="user in membersTruncated.users"
+          :key="user.id"
           :user="user"
           :compact="compact"
         />
-        <div v-if="membersTruncated.truncated" class="ellipsis">
+        <div
+          v-if="membersTruncated.truncated"
+          class="ellipsis"
+        >
           ...
         </div>
       </div>
     </router-link>
     <div
-      class="last-message"
       v-if="showLastStatus"
+      class="last-message"
     >
       <div class="last-message-title">
         {{ $t('dm_conv.last_message_title') }}:
@@ -76,7 +81,7 @@
       <button
         class="btn button-default"
         :title="$t('dm_conv.recipients_edit_mode_button_tooltip')"
-        @click.once="$router.push({ name: 'dm-conversation-recipients', params: { id: this.conversation.id }})"
+        @click.once="$router.push({ name: 'dm-conversation-recipients', params: { id: conversation.id }})"
       >
         {{ $t('dm_conv.recipients_edit_mode_button') }}
       </button>
@@ -90,7 +95,7 @@
         @accepted="doDeleteConversation"
         @cancelled="hideDeleteConfirmModal"
       >
-        {{ $t('dm_conv.delete_confirm', { identifier: this.conversation.id }) }}
+        {{ $t('dm_conv.delete_confirm', { identifier: conversation.id }) }}
       </confirm-modal>
     </teleport>
   </div>

src/components/dm_conv_timeline/dm_conv_timeline.vue

@@ -6,15 +6,15 @@
     timeline-name="dmConv"
   >
     <template
-      v-slot:extraHeading
+      #extraHeading
     >
       <DMConvCard
         v-if="conversation"
         :conversation="conversation"
         :compact="false"
-        :showFullControls="true"
-        :showLastStatus="false"
-        :linkToTimeline="false"
+        :show-full-controls="true"
+        :show-last-status="false"
+        :link-to-timeline="false"
         @deleted="forceLeave"
       />
     </template>

src/components/emoji_grid/emoji_grid.vue

@@ -37,7 +37,7 @@
           <StillImage
             v-else
             :src="item.emoji.imageUrl"
-            noStopGifs="true"
+            no-stop-gifs="true"
           />
         </span>
       </template>

src/components/emoji_input/emoji_input.vue

@@ -51,7 +51,7 @@
             <StillImage
               v-if="suggestion.img"
               :src="suggestion.img"
-              noStopGifs="true"
+              no-stop-gifs="true"
             />
             <span v-else>{{ suggestion.replacement }}</span>
           </span>

src/components/emoji_picker/emoji_picker.vue

@@ -21,7 +21,7 @@
           <StillImage
             v-else
             :src="group.first.imageUrl"
-            noStopGifs="true"
+            no-stop-gifs="true"
           />
         </span>
         <span

src/components/media_modal/media_modal.vue

@@ -31,7 +31,7 @@
           :alt="currentMedia.description"
           :title="currentMedia.description"
           :image-load-handler="onImageLoaded"
-          noStopGifs="true"
+          no-stop-gifs="true"
         />
       </PinchZoom>
     </SwipeClick>

src/components/post_status_form/post_status_form.vue

@@ -195,8 +195,8 @@
           :class="{ 'visibility-tray-edit': isEdit }"
         >
           <scope-selector
-            ref="scopeselector"
             v-if="!disableVisibilitySelector"
+            ref="scopeselector"
             :user-default="userDefaultScope"
             :original-scope="copyMessageScope"
             :initial-scope="newStatus.visibility"
@@ -204,10 +204,11 @@
           />
 
           <div
-            class="format-selector-container">
+            class="format-selector-container"
+          >
             <div
               class="format-selector"
-              >
+            >
               <Select
                 id="post-language"
                 v-model="newStatus.language"

src/components/quote_button/quote_button.js

@@ -7,8 +7,16 @@ const QuoteButton = {
   name: 'QuoteButton',
   props: ['status', 'quoting', 'visibility'],
   computed: {
-    loggedIn () {
-      return !!this.$store.state.users.currentUser
+    showButton () {
+      const currentUserId = this.$store.state.users.currentUser?.id
+
+      if (!currentUserId)
+        return false
+
+      if (['public', 'unlisted', 'local'].includes(this.visibility))
+        return true
+
+      return (this.visibility === 'private' && currentUserId == this.status.user.id)
     }
   }
 }

src/components/quote_button/quote_button.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="(visibility === 'public' || visibility === 'unlisted') && loggedIn"
+    v-if="showButton"
     class="QuoteButton"
   >
     <button

src/components/side_drawer/side_drawer.js

@@ -9,6 +9,7 @@ import {
   faHome,
   faComments,
   faBolt,
+  faBookmark,
   faUserPlus,
   faBullhorn,
   faSearch,
@@ -25,6 +26,7 @@ library.add(
   faHome,
   faComments,
   faBolt,
+  faBookmark,
   faUserPlus,
   faBullhorn,
   faSearch,

src/components/side_drawer/side_drawer.vue

@@ -85,6 +85,18 @@
             /> {{ $t("nav.lists") }}
           </router-link>
         </li>
+        <li
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <router-link :to="{ name: 'bookmarks' }">
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bookmark"
+            /> {{ $t("nav.bookmarks") }}
+          </router-link>
+        </li>
       </ul>
       <ul v-if="currentUser">
         <li @click="toggleDrawer">

src/components/status/status.vue

@@ -99,19 +99,21 @@
             <router-link
               v-else
               :to="retweeterProfileLink"
-            >{{ retweeter }}</router-link>
+            >
+              {{ retweeter }}
+            </router-link>
           </div>
           {{ ' ' }}
 
           <div
             class="repeat-tooltip"
           >
-             <FAIcon
-               icon="retweet"
-               class="repeat-icon"
-               :title="$t('tool_tip.repeat')"
-             />
-             {{ $t('timeline.repeated') }}
+            <FAIcon
+              icon="retweet"
+              class="repeat-icon"
+              :title="$t('tool_tip.repeat')"
+            />
+            {{ $t('timeline.repeated') }}
           </div>
 
           <span

src/components/timeline/timeline.vue

@@ -56,7 +56,7 @@
       v-if="$slots.extraHeading"
       class="timeline-extra-heading"
     >
-      <slot name="extraHeading"></slot>
+      <slot name="extraHeading" />
     </div>
     <div :class="classes.body">
       <div

src/components/user_card/user_card.vue

@@ -11,7 +11,7 @@
     <div class="panel-heading -flexible-height">
       <div
         class="user-info"
-        :class="{ '-compact': this.compactUserInfo }"
+        :class="{ '-compact': compactUserInfo }"
       >
         <div class="container">
           <a
@@ -54,7 +54,10 @@
             >
               @{{ user.screen_name_ui }}
             </router-link>
-            <span class="user-roles" v-if="!hideBio && (user.deactivated || !!visibleRole || user.bot)">
+            <span
+              v-if="!hideBio && (user.deactivated || !!visibleRole || user.bot)"
+              class="user-roles"
+            >
               <span
                 v-if="user.deactivated"
                 class="alert user-role"
@@ -74,7 +77,10 @@
                 {{ $t('user_card.bot') }}
               </span>
             </span>
-            <span class="user-locked" v-if="user.locked">
+            <span
+              v-if="user.locked"
+              class="user-locked"
+            >
               <FAIcon
                 class="lock-icon"
                 icon="lock"
@@ -114,44 +120,44 @@
           </div>
           <div class="user-buttons">
             <button
-                v-if="!isOtherUser && user.is_local"
-                class="button-unstyled edit-profile-button"
-                @click.stop="openProfileTab"
-              >
-                <FAIcon
-                  fixed-width
-                  class="icon"
-                  icon="edit"
-                  :title="$t('user_card.edit_profile')"
-                />
-              </button>
-              <a
-                v-if="isOtherUser && !user.is_local"
-                :href="user.statusnet_profile_url"
-                target="_blank"
-                class="button-unstyled external-link-button"
-              >
-                <FAIcon
-                  class="icon"
-                  icon="external-link-alt"
-                />
-              </a>
-              <a
-                v-if="isOtherUser"
-                :href="user.statusnet_profile_url + '.rss'"
-                target="_blank"
-                class="button-unstyled external-link-button"
-              >
-                <FAIcon
-                  class="icon"
-                  icon="rss"
-                />
-              </a>
-              <AccountActions
-                v-if="isOtherUser && loggedIn"
-                :user="user"
-                :relationship="relationship"
+              v-if="!isOtherUser && user.is_local"
+              class="button-unstyled edit-profile-button"
+              @click.stop="openProfileTab"
+            >
+              <FAIcon
+                fixed-width
+                class="icon"
+                icon="edit"
+                :title="$t('user_card.edit_profile')"
               />
+            </button>
+            <a
+              v-if="isOtherUser && !user.is_local"
+              :href="user.statusnet_profile_url"
+              target="_blank"
+              class="button-unstyled external-link-button"
+            >
+              <FAIcon
+                class="icon"
+                icon="external-link-alt"
+              />
+            </a>
+            <a
+              v-if="isOtherUser"
+              :href="user.statusnet_profile_url + '.rss'"
+              target="_blank"
+              class="button-unstyled external-link-button"
+            >
+              <FAIcon
+                class="icon"
+                icon="rss"
+              />
+            </a>
+            <AccountActions
+              v-if="isOtherUser && loggedIn"
+              :user="user"
+              :relationship="relationship"
+            />
           </div>
         </div>
         <div class="user-meta">
@@ -303,7 +309,7 @@
         :html="user.description_html"
         :emoji="user.emoji"
         :handle-links="true"
-        :style='{"text-align": this.$store.getters.mergedConfig.centerAlignBio ? "center" : "start"}'
+        :style='{"text-align": $store.getters.mergedConfig.centerAlignBio ? "center" : "start"}'
       />
     </div>
     <teleport to="#modal">

src/modules/polls.js

@@ -1,5 +1,7 @@
 import { merge } from 'lodash'
 
+const POLL_UPDATE_FREQUENCY = 150_000;
+
 const polls = {
   state: {
     // Contains key = id, value = number of trackers for this poll
@@ -12,6 +14,9 @@ const polls = {
       // Make expired-state change trigger re-renders properly
       poll.expired = Date.now() > Date.parse(poll.expires_at)
       if (existingPoll) {
+        if (poll.expired) {
+          state.trackedPolls[poll.id] = 0
+        }
         state.pollsObject[poll.id] = merge(existingPoll, poll)
       } else {
         state.pollsObject[poll.id] = poll
@@ -44,13 +49,16 @@ const polls = {
           if (rootState.polls.trackedPolls[pollId]) {
             dispatch('updateTrackedPoll', pollId)
           }
-        }, 30 * 1000)
+        }, POLL_UPDATE_FREQUENCY)
         commit('mergeOrAddPoll', poll)
       })
     },
     trackPoll ({ rootState, commit, dispatch }, pollId) {
+      if (rootState.polls.pollsObject[pollId]?.expired)
+        return;
+
       if (!rootState.polls.trackedPolls[pollId]) {
-        setTimeout(() => dispatch('updateTrackedPoll', pollId), 30 * 1000)
+        setTimeout(() => dispatch('updateTrackedPoll', pollId), POLL_UPDATE_FREQUENCY)
       }
       commit('trackPoll', pollId)
     },

src/services/html_converter/utility.service.js

@@ -22,7 +22,7 @@ export const getAttrs = tag => {
     .replace(new RegExp('^' + getTagName(tag)), '')
     .replace(/\/?$/, '')
     .trim()
-  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi))
+  const attrs = Array.from(innertag.matchAll(/([a-z]+[a-z0-9-]*)(?:=((?:"(?:\\.|[^"\\])*")|(?:'(?:\\.|[^'\\])*')))?/gi))
     .map(([trash, key, value]) => [key, value])
     .map(([k, v]) => {
       if (!v) return [k, true]