fix rendering issues in carousel

net/server/internal/transcodeUtil.go

@@ -144,7 +144,7 @@ func UpdateAsset(asset *store.Asset, status string, crc uint32, size int64) (err
     if res := tx.Model(store.Asset{}).Where("id = ?", asset.ID).Updates(asset).Error; res != nil {
       return res
     }
-    if res := tx.Preload("Account").Preload("TopicSlot").Preload("Channel.ChannelSlot").First(&topic, asset.Topic.ID).Error; res != nil {
+    if res := tx.Preload("Account").Preload("TopicSlot").Preload("Channel.Groups").Preload("Channel.Cards").Preload("Channel.ChannelSlot").First(&topic, asset.Topic.ID).Error; res != nil {
       return res;
     }
     if res := tx.Model(&topic).Update("detail_revision", topic.Account.ChannelRevision + 1).Error; res != nil {

net/web/src/Carousel/Carousel.jsx

@@ -8,6 +8,7 @@ import test from '../test.png';
 
 export function Carousel({ items, itemRenderer, itemRemove }) {
   const [slots, setSlots] = useState([]);
+  const [carouselRef, setCarouselRef] = useState(false);
   const [itemIndex, setItemIndex] = useState(0);
   const [scrollLeft, setScrollLeft] = useState('hidden');
   const [scrollRight, setScrollRight] = useState('hidden');
@@ -17,10 +18,14 @@ export function Carousel({ items, itemRenderer, itemRemove }) {
   let itemWidth = useRef(new Map());
 
   useEffect(() => {
-    setScroll();
+    setScroll('smooth');
     setArrows();
   }, [itemIndex, items]);
 
+  useEffect(() => {
+    setScroll('auto');
+  }, [carouselRef]);
+
   const updateItemIndex = (val) => {
     setItemIndex((i) => {
       if (i + val < 0) {
@@ -42,13 +47,13 @@ export function Carousel({ items, itemRenderer, itemRemove }) {
     }
   }
 
-  const setScroll = () => {
+  const setScroll = (behavior) => {
-    let pos = 0;
+    let pos = FUDGE;
     for (let i = 0; i < itemIndex; i++) {
-      pos += itemWidth.current.get(i) + 32 + FUDGE;
+      pos += itemWidth.current.get(i) + 32;
     }
     if (carousel.current) {
-      carousel.current.scrollTo({ top: 0, left: pos, behavior: 'smooth' });
+      carousel.current.scrollTo({ top: 0, left: pos, behavior });
     }
   }
 
@@ -67,6 +72,13 @@ export function Carousel({ items, itemRenderer, itemRemove }) {
     }
   }
 
+  const RemoveItem = ({ index }) => {
+    if (itemRemove) {
+      return <div class="delitem" onClick={() => itemRemove(index)}><CloseOutlined /></div>
+    }
+    return <></>
+  }
+
   useEffect(() => {
     let assets = [];
     for (let i = 0; i < items.length; i++) {
@@ -77,7 +89,7 @@ export function Carousel({ items, itemRenderer, itemRemove }) {
             return (
               <div class="item noselect">
                 <div class="asset">{ itemRenderer(items[i]) }</div>
-                <div class="delitem" onClick={() => itemRemove(i)}><CloseOutlined /></div>
+                <RemoveItem index={i} />
               </div>
             );
           }}
@@ -101,10 +113,17 @@ export function Carousel({ items, itemRenderer, itemRemove }) {
     setArrows();
   }, [items]);
 
+  const onRefSet = (r) => {
+    if (r != null) {
+      carousel.current = r;
+      setCarouselRef(true);
+    }
+  }
+
   if (slots.length != 0) {
     return (
       <CarouselWrapper>
-        <div class="carousel" ref={carousel}>
+        <div class="carousel" ref={onRefSet}>
           {slots}
         </div>
         <div class="arrows">

net/web/src/Carousel/Carousel.styled.js

@@ -10,8 +10,8 @@ export const CarouselWrapper = styled.div`
   .carousel {
     display: flex;
     flex-direction: row;
+    padding-left: 16px;
     width: 100%;
-    padding-left: 32px;
     overflow: hidden;
 
     /* hide scrollbar for IE, Edge and Firefox */
@@ -26,7 +26,6 @@ export const CarouselWrapper = styled.div`
   .arrows {
     height: 100%;
     display: flex;
-    padding-left: 16px;
     flex-direction: column;
     position: absolute;
   }

net/web/src/User/Conversation/AddTopic/AddTopic.jsx

@@ -84,7 +84,9 @@ export function AddTopic() {
   return (
     <AddTopicWrapper>
       <div class="container noselect">
+        <div class="carousel">
           <Carousel items={state.assets} itemRenderer={renderItem} itemRemove={removeItem} />
+        </div>
         <div class="input">
           <Input.TextArea placeholder="Message" autoSize={{ minRows: 2, maxRows: 6 }} onKeyPress={onKey}
             onChange={(e) => actions.setMessageText(e.target.value)} value={state.messageText} />

net/web/src/User/Conversation/AddTopic/AddTopic.styled.js

@@ -19,6 +19,10 @@ export const AddTopicWrapper = styled.div`
     width: 100%;
   }
 
+  .carousel {
+    padding-left: 16px;
+  }
+
   .buttons {
     padding-left: 16px;
     padding-right: 16px;