UX: Fix chat separator alignment (#20669)

Also: work around 1px svg shift in scroll-to-bottom button

app/assets/javascripts/discourse/app/components/composer-editor.js

@@ -937,6 +937,8 @@ export default Component.extend(
         // Short upload urls need resolution
         resolveAllShortUrls(ajax, this.siteSettings, preview);
 
+        this._generateVideoThumbnail();
+
         preview.addEventListener("click", this._handleImageScaleButtonClick);
         this._registerImageAltTextButtonClick(preview);
 

app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js

@@ -325,11 +325,6 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
 
         cacheShortUploadUrl(upload.short_url, upload);
 
-        // video/mp4, video/webm, video/quicktime, etc.
-        if (file.type.split("/")[0] === "video") {
-          this._generateVideoThumbnail(file, upload.url);
-        }
-
         if (this.useUploadPlaceholders) {
           this.appEvents.trigger(
             `${this.composerEventPrefix}:replace-text`,

app/assets/javascripts/discourse/app/mixins/composer-video-thumbnail-uppy.js

@@ -17,12 +17,30 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
   useUploadPlaceholders: true,
 
   @bind
-  _generateVideoThumbnail(videoFile, uploadUrl) {
-    let video = document.createElement("video");
-    video.src = URL.createObjectURL(videoFile.data);
+  _generateVideoThumbnail() {
+    if (!this.siteSettings.enable_diffhtml_preview) {
+      return;
+    }
 
-    let videoSha1 = uploadUrl
-      .substring(uploadUrl.lastIndexOf("/") + 1)
+    let videos = document.getElementsByClassName("video-container");
+    if (!videos) {
+      return;
+    }
+
+    // Only generate a topic thumbnail for the first video
+    let video_container = videos[0];
+    if (!video_container) {
+      return;
+    }
+
+    let video = video_container.querySelector("video:first-of-type");
+    if (!video) {
+      return;
+    }
+
+    let video_src = video.getElementsByTagName("source")[0].src;
+    let video_sha1 = video_src
+      .substring(video_src.lastIndexOf("/") + 1)
       .split(".")[0];
 
     // Wait for the video element to load, otherwise the canvas will be empty
@@ -40,10 +58,10 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
       // upload video thumbnail
       canvas.toBlob((blob) => {
         this._uppyInstance = new Uppy({
-          id: "video-thumbnail",
+          id: `screenshot-placeholder`,
           meta: {
             upload_type: `thumbnail`,
-            videoSha1,
+            video_sha1,
           },
           autoProceed: true,
         });
@@ -81,7 +99,7 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
         try {
           this._uppyInstance.addFile({
             source: `${this.id} thumbnail`,
-            name: `${videoSha1}`,
+            name: video_sha1,
             type: blob.type,
             data: blob,
           });

plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js

@@ -613,6 +613,7 @@ export default class ChatLivePane extends Component {
       const message = ChatMessage.create(this.args.channel, data.chat_message);
       this.args.channel.addMessages([message]);
       this.scrollToLatestMessage();
+      this.updateLastReadMessage();
     } else {
       // If we are almost at the bottom, we append the message and notice the user
       const message = ChatMessage.create(this.args.channel, data.chat_message);
@@ -895,16 +896,19 @@ export default class ChatLivePane extends Component {
   @action
   editLastMessageRequested() {
     const lastUserMessage = this.args.channel.messages.findLast(
-      (message) =>
-        message.user.id === this.currentUser.id &&
-        !message.staged &&
-        !message.error
+      (message) => message.user.id === this.currentUser.id
     );
 
-    if (lastUserMessage) {
-      this.editingMessage = lastUserMessage;
-      this._focusComposer();
+    if (!lastUserMessage) {
+      return;
     }
+
+    if (lastUserMessage.staged || lastUserMessage.error) {
+      return;
+    }
+
+    this.editingMessage = lastUserMessage;
+    this._focusComposer();
   }
 
   @action

plugins/chat/assets/stylesheets/common/base-common.scss

@@ -384,6 +384,7 @@ $float-height: 530px;
 
       .d-icon {
         color: var(--secondary);
+        margin-left: 1px; // "fixes" the 1px svg shift
       }
     }
 

plugins/chat/assets/stylesheets/common/chat-message-separator.scss

@@ -56,7 +56,9 @@
     }
 
     .chat-message-separator__text-container {
-      padding-top: 7px;
+      align-items: center;
+      display: flex;
+      height: 40px;
       position: sticky;
       top: -1px;
 
@@ -98,11 +100,7 @@
 
       .chat-message-separator__line {
         border-top: 1px solid var(--secondary-high);
-        left: 0;
         margin: 0 0 -1px;
-        position: relative;
-        right: 0;
-        top: -1px;
       }
     }
   }

plugins/chat/spec/system/shortcuts/chat_composer_spec.rb

@@ -70,5 +70,19 @@ RSpec.describe "Shortcuts | chat composer", type: :system, js: true do
 
       expect(page.find(".chat-composer-message-details")).to have_content(message_1.message)
     end
+
+    context "when last message is not editable" do
+      after { page.driver.browser.network_conditions = { offline: false } }
+
+      it "does not edit a message" do
+        chat.visit_channel(channel_1)
+        page.driver.browser.network_conditions = { offline: true }
+        channel_page.send_message("Hello world")
+
+        find(".chat-composer-input").send_keys(:arrow_up)
+
+        expect(page).to have_no_css(".chat-composer-message-details")
+      end
+    end
   end
 end