From 2aabd8ed1a75be0d4079d23d0bf6702883ff4959 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Fri, 5 Jun 2020 17:55:19 +0200
Subject: StillImage: Make it work properly in both firefox and chrome.

---
 src/components/still-image/still-image.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/components/still-image/still-image.vue')

diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 4137bd59..08af26f6 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -23,12 +23,21 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+.contain-fit {
+  .still-image {
+    img {
+      height: 100%;
+    }
+  }
+}
+
 .still-image {
   position: relative;
   line-height: 0;
   overflow: hidden;
   width: 100%;
   height: 100%;
+  display: flex;
 
   &:hover canvas {
     display: none;
@@ -36,8 +45,8 @@
 
   img {
     width: 100%;
-    height: 100%;
     object-fit: contain;
+    align-self: center;
   }
 
   &.animated {
-- 
cgit v1.2.3-70-g09d2


From 2b6a6fe7ea31e4e5b77d5ad0ff580f9e29df1849 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 11 Jun 2020 13:44:32 +0300
Subject: make object-fit cover work like it should

---
 src/components/still-image/still-image.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

(limited to 'src/components/still-image/still-image.vue')

diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 08af26f6..f2ddeb7b 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -23,13 +23,6 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-.contain-fit {
-  .still-image {
-    img {
-      height: 100%;
-    }
-  }
-}
 
 .still-image {
   position: relative;
@@ -38,6 +31,7 @@
   width: 100%;
   height: 100%;
   display: flex;
+  align-items: center;
 
   &:hover canvas {
     display: none;
@@ -45,8 +39,8 @@
 
   img {
     width: 100%;
+    min-height: 100%;
     object-fit: contain;
-    align-self: center;
   }
 
   &.animated {
-- 
cgit v1.2.3-70-g09d2


From 2c6ec37e6a796d2d7be7be58ac0e3c6c8bbd6a18 Mon Sep 17 00:00:00 2001
From: William Pitcock <nenolod@dereferenced.org>
Date: Mon, 18 Feb 2019 05:03:26 +0000
Subject: media description support

---
 src/components/attachment/attachment.vue             | 2 +-
 src/components/media_modal/media_modal.vue           | 2 ++
 src/components/post_status_form/post_status_form.js  | 3 +++
 src/components/post_status_form/post_status_form.vue | 6 ++++++
 src/components/still-image/still-image.js            | 3 ++-
 src/components/still-image/still-image.vue           | 2 ++
 src/i18n/en.json                                     | 1 +
 src/services/api/api.service.js                      | 4 +++-
 src/services/status_poster/status_poster.service.js  | 5 +++--
 9 files changed, 23 insertions(+), 5 deletions(-)

(limited to 'src/components/still-image/still-image.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index a7e217c1..98f772c0 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -51,7 +51,6 @@
       :class="{'hidden': hidden && preloadImage }"
       :href="attachment.url"
       target="_blank"
-      :title="attachment.description"
       @click="openModal"
     >
       <StillImage
@@ -59,6 +58,7 @@
         :mimetype="attachment.mimetype"
         :src="attachment.large_thumb_url || attachment.url"
         :image-load-handler="onImageLoad"
+        :alt="attachment.description"
       />
     </a>
 
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 80d2a8b9..d52f00a5 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -8,6 +8,8 @@
       v-if="type === 'image'"
       class="modal-image"
       :src="currentMedia.url"
+      :alt="currentMedia.description"
+      :title="currentMedia.description"
       @touchstart.stop="mediaTouchStart"
       @touchmove.stop="mediaTouchMove"
       @click="hide"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 9027566f..df2999f2 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -78,6 +78,7 @@ const PostStatusForm = {
         nsfw: false,
         files: [],
         poll: {},
+        mediaDescriptions: {},
         visibility: scope,
         contentType
       },
@@ -190,6 +191,7 @@ const PostStatusForm = {
         visibility: newStatus.visibility,
         sensitive: newStatus.nsfw,
         media: newStatus.files,
+        mediaDescriptions: newStatus.mediaDescriptions || {},
         store: this.$store,
         inReplyToStatusId: this.replyTo,
         contentType: newStatus.contentType,
@@ -200,6 +202,7 @@ const PostStatusForm = {
             status: '',
             spoilerText: '',
             files: [],
+            mediaDescriptions: {},
             visibility: newStatus.visibility,
             contentType: newStatus.contentType,
             poll: {}
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index e3d8d087..551df948 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -266,6 +266,7 @@
               :href="file.url"
             >{{ file.url }}</a>
           </div>
+          <input type="text" :placeholder="$t('post_status.media_description')" v-model="newStatus.mediaDescriptions[file.id]"></input>
         </div>
       </div>
       <div
@@ -399,6 +400,11 @@
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
+
+    input {
+      min-width: 300px;
+      flex: 1;
+    }
   }
 
   .status-input-wrapper {
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index e48fef47..ab40bbd7 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -4,7 +4,8 @@ const StillImage = {
     'referrerpolicy',
     'mimetype',
     'imageLoadError',
-    'imageLoadHandler'
+    'imageLoadHandler',
+    'alt'
   ],
   data () {
     return {
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index f2ddeb7b..9130ec98 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -10,6 +10,8 @@
     <!-- NOTE: key is required to force to re-render img tag when src is changed -->
     <img
       ref="src"
+      :alt="alt"
+      :title="alt"
       :key="src"
       :src="src"
       :referrerpolicy="referrerpolicy"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2840904f..a0b70572 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -174,6 +174,7 @@
     "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
     "account_not_locked_warning_link": "locked",
     "attachments_sensitive": "Mark attachments as sensitive",
+    "media_description": "Media description",
     "content_type": {
       "text/plain": "Plain text",
       "text/html": "HTML",
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index dfffc291..cb205e3f 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -617,7 +617,8 @@ const postStatus = ({
   poll,
   mediaIds = [],
   inReplyToStatusId,
-  contentType
+  contentType,
+  mediaDescriptions
 }) => {
   const form = new FormData()
   const pollOptions = poll.options || []
@@ -644,6 +645,7 @@ const postStatus = ({
       form.append('poll[options][]', option)
     })
   }
+  form.append('descriptions', JSON.stringify(mediaDescriptions))
   if (inReplyToStatusId) {
     form.append('in_reply_to_id', inReplyToStatusId)
   }
diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
index 9e904d3a..090ff673 100644
--- a/src/services/status_poster/status_poster.service.js
+++ b/src/services/status_poster/status_poster.service.js
@@ -1,7 +1,7 @@
 import { map } from 'lodash'
 import apiService from '../api/api.service.js'
 
-const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
+const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, media = [], inReplyToStatusId = undefined, contentType = 'text/plain', mediaDescriptions = {} }) => {
   const mediaIds = map(media, 'id')
 
   return apiService.postStatus({
@@ -13,7 +13,8 @@ const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, m
     mediaIds,
     inReplyToStatusId,
     contentType,
-    poll })
+    poll,
+    mediaDescriptions })
     .then((data) => {
       if (!data.error) {
         store.dispatch('addNewStatuses', {
-- 
cgit v1.2.3-70-g09d2


From 03aa1f315406a238eb1cea6b9cc64abf1567b978 Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Sun, 28 Jun 2020 02:31:57 -0400
Subject: fix vue style warnings

---
 src/components/post_status_form/post_status_form.vue | 6 +++++-
 src/components/still-image/still-image.vue           | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/components/still-image/still-image.vue')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 6eefc853..49291455 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -266,7 +266,11 @@
               :href="file.url"
             >{{ file.url }}</a>
           </div>
-          <input type="text" :placeholder="$t('post_status.media_description')" v-model="newStatus.mediaDescriptions[file.id]">
+          <input
+            v-model="newStatus.mediaDescriptions[file.id]"
+            type="text"
+            :placeholder="$t('post_status.media_description')"
+          >
         </div>
       </div>
       <div
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 9130ec98..2ebf33ba 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -10,9 +10,9 @@
     <!-- NOTE: key is required to force to re-render img tag when src is changed -->
     <img
       ref="src"
+      :key="src"
       :alt="alt"
       :title="alt"
-      :key="src"
       :src="src"
       :referrerpolicy="referrerpolicy"
       @load="onLoad"
-- 
cgit v1.2.3-70-g09d2


From 7870b3f7ec4ee2f7e900f62204f00f18c6bbdb6e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 28 Jul 2020 01:54:40 +0300
Subject: neater way to do hover thing with still image

---
 src/components/status/status.scss          | 13 ++-------
 src/components/still-image/still-image.vue | 47 +++++++++++++++---------------
 2 files changed, 27 insertions(+), 33 deletions(-)

(limited to 'src/components/still-image/still-image.vue')

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 85e433c4..8797211e 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -10,16 +10,9 @@ $status-margin: 0.75em;
   border-left: 4px $fallback--cRed;
   border-left: 4px var(--cRed, $fallback--cRed);
 
-  // TODO find a way to do this in a cleaner way without JS
-  // stylelint-disable rscss/class-format
-  &:hover .avatar.animated {
-    canvas {
-      display: none;
-    }
-
-    img {
-      visibility: visible;
-    }
+  &:hover .avatar {
+    --still-image-img: visible;
+    --still-image-canvas: hidden;
   }
 
   &.-focused {
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 2ebf33ba..6fa055de 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -35,8 +35,16 @@
   display: flex;
   align-items: center;
 
-  &:hover canvas {
-    display: none;
+  canvas {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    visibility: var(--still-image-canvas, visible);
   }
 
   img {
@@ -46,15 +54,6 @@
   }
 
   &.animated {
-    &:hover::before,
-    img {
-      visibility: hidden;
-    }
-
-    &:hover img {
-      visibility: visible
-    }
-
     &::before {
       content: 'gif';
       position: absolute;
@@ -62,25 +61,27 @@
       font-size: 10px;
       top: 5px;
       left: 5px;
-      background: rgba(127,127,127,.5);
-      color: #FFF;
+      background: rgba(127, 127, 127, 0.5);
+      color: #fff;
       display: block;
       padding: 2px 4px;
       border-radius: $fallback--tooltipRadius;
       border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       z-index: 2;
     }
-  }
 
-  canvas {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+    &:hover canvas {
+      display: none;
+    }
+
+    &:hover::before,
+    img {
+      visibility: var(--still-image-img, hidden);
+    }
+
+    &:hover img {
+      visibility: visible;
+    }
   }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 815f230ac7ace5a1507afae91bafa57589a77522 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 18 Aug 2020 23:57:42 +0300
Subject: fixed some issues related to user avatar

---
 src/components/attachment/attachment.vue          |  8 ++++++--
 src/components/chat_list_item/chat_list_item.scss |  2 +-
 src/components/chat_title/chat_title.vue          |  2 +-
 src/components/status/status.scss                 |  2 +-
 src/components/still-image/still-image.vue        |  3 +--
 src/components/user_avatar/user_avatar.vue        |  6 ++++--
 src/components/user_card/user_card.vue            | 10 +++-------
 7 files changed, 17 insertions(+), 16 deletions(-)

(limited to 'src/components/still-image/still-image.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index be7377e9..63e0ceba 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -60,6 +60,7 @@
       @click="openModal"
     >
       <StillImage
+        class="image"
         :referrerpolicy="referrerpolicy"
         :mimetype="attachment.mimetype"
         :src="attachment.large_thumb_url || attachment.url"
@@ -281,8 +282,11 @@
   }
 
   .image-attachment {
-    width: 100%;
-    height: 100%;
+    &,
+    & .image {
+      width: 100%;
+      height: 100%;
+    }
 
     &.hidden {
       display: none;
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 10ba45f2..9e97b28e 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -72,7 +72,7 @@
     }
   }
 
-  .avatar.still-image {
+  .Avatar {
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index c375b10b..b16ed39d 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -51,7 +51,7 @@
     }
   }
 
-  .still-image.avatar {
+  .Avatar {
     width: 23px;
     height: 23px;
     margin-right: 0.5em;
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 7fbab3b8..4973e4ba 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -6,7 +6,7 @@ $status-margin: 0.75em;
 .Status {
   min-width: 0;
 
-  &:hover .avatar {
+  &:hover {
     --still-image-img: visible;
     --still-image-canvas: hidden;
   }
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 6fa055de..ad82210d 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -30,8 +30,6 @@
   position: relative;
   line-height: 0;
   overflow: hidden;
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
 
@@ -68,6 +66,7 @@
       border-radius: $fallback--tooltipRadius;
       border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
       z-index: 2;
+      visibility: var(--still-image-label-visibility, visible);
     }
 
     &:hover canvas {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 3545b801..e4e4127c 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -1,6 +1,6 @@
 <template>
   <StillImage
-    class="avatar"
+    class="Avatar"
     :alt="user.screen_name"
     :title="user.screen_name"
     :src="imgSrc(user.profile_image_url_original)"
@@ -13,7 +13,9 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.avatar.still-image {
+.Avatar {
+  --still-image-label-visibility: hidden;
+
   width: 48px;
   height: 48px;
   box-shadow: var(--avatarStatusShadow);
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 75db5db1..07fce79a 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -364,13 +364,9 @@
     }
   }
 
-  &:hover .animated.avatar {
-    canvas {
-      display: none;
-    }
-    img {
-      visibility: visible;
-    }
+  &:hover .avatar {
+    --still-image-img: visible;
+    --still-image-canvas: hidden;
   }
 
   &-avatar-link {
-- 
cgit v1.2.3-70-g09d2