Creators Staking

package.json

@@ -92,8 +92,8 @@
     "@subsocial/api": "0.8.10",
     "@subsocial/definitions": "0.8.10",
     "@subsocial/elasticsearch": "0.8.10",
-    "@subsocial/grill-widget": "^0.0.12",
-    "@subsocial/resource-discussions": "^0.0.3",
+    "@subsocial/grill-widget": "^0.0.13",
+    "@subsocial/resource-discussions": "^0.0.4",
     "@subsocial/utils": "0.8.10",
     "@tiptap/extension-highlight": "^2.0.0-beta.33",
     "@tiptap/extension-image": "^2.0.0-beta.27",
@@ -107,6 +107,7 @@
     "@tiptap/pm": "^2.0.3",
     "@tiptap/react": "^v2.0.0-beta.217",
     "@tiptap/starter-kit": "^2.0.0-beta.184",
+    "@types/lodash.shuffle": "^4.2.9",
     "adblock-detect-react": "^1.0.5",
     "ant-design-pro": "^2.3.2",
     "antd": "4.12.3",
@@ -128,6 +129,7 @@
     "lodash.isempty": "^4.4.0",
     "lodash.memoize": "^4.1.2",
     "lodash.partition": "^4.6.0",
+    "lodash.shuffle": "^4.2.0",
     "lodash.truncate": "^4.4.2",
     "next": "11.1.4",
     "next-themes": "^0.0.14",
@@ -154,6 +156,7 @@
     "react-tooltip": "^4.2.19",
     "sanitize-html": "^2.10.0",
     "sass": "^1.26.10",
+    "sort-keys-recursive": "^2.1.10",
     "store": "^2.0.12",
     "strip-markdown": "^4.0.0",
     "url-loader": "^4.1.1",

src/components/chat/ChatFloatingModal.module.sass

@@ -110,3 +110,55 @@
       opacity: 0
       transform: translateY(100%)
 
+
+.Position--right
+  .ChatContainer
+    align-items: flex-end
+
+    .ChatContent
+      max-width: 570px
+      width: 100%
+      position: relative
+      height: 100vh
+      height: 100dvh
+
+      .ChatControl
+        padding: 0
+        position: absolute
+        left: -40px
+        top: 12px
+        transform: rotate(-90deg)
+
+    &.ChatContainerHidden
+      .ChatContent
+        transform: translateX(100%)
+
+.Position--bottom
+  .ChatContainer
+    &.ChatContainerHidden
+      .ChatContent
+        transform: translateY(100%)
+
+@media ( max-width: $max_mobile_width )
+  .Position--right
+    .ChatContainer
+      align-items: center
+
+      .ChatContent
+        max-width: none
+        width: 100%
+        position: relative
+        height: 90vh
+        height: 90dvh
+
+        .ChatControl
+          padding: $space-tiny
+          top: 0
+          left: 0
+          position: relative
+          transform: rotate(0deg)
+
+      &.ChatContainerHidden
+        .ChatContent
+          transform: translateY(100%)
+

src/components/chat/ChatFloatingModal.tsx

@@ -1,22 +1,21 @@
 import { Button } from 'antd'
 import clsx from 'clsx'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { HiChevronDown } from 'react-icons/hi2'
 import { useSendEvent } from 'src/providers/AnalyticContext'
 import { useChatOpenState } from 'src/rtk/app/hooks'
 import { useAppSelector } from 'src/rtk/app/store'
 import { ChatEntity } from 'src/rtk/features/chat/chatSlice'
 import { disablePageScroll, enablePageScroll } from 'src/utils/window'
-import { useResponsiveSize } from '../responsive'
 import styles from './ChatFloatingModal.module.sass'
 import ChatIframe from './ChatIframe'
 
 export default function ChatFloatingModal() {
-  const { isLargeDesktop } = useResponsiveSize()
   const sendEvent = useSendEvent()
   const [isOpen, setIsOpen] = useChatOpenState()
   const entity = useAppSelector(state => state.chat.entity)
+  const withFloatingButton = useAppSelector(state => state.chat.withFloatingButton)
 
   const [unreadCount, setUnreadCount] = useState(0)
 
@@ -29,27 +28,26 @@ export default function ChatFloatingModal() {
     }
   }, [entity])
 
-  const hasOpened = useRef(false)
+  useEffect(() => {
+    if (isOpen) disablePageScroll()
+    else enablePageScroll()
+
+    if (entity && isOpen) {
+      setUnreadCount(0)
+      saveUnreadCount(entity, 0)
+    }
+  }, [isOpen])
+
   const toggleChat = () => {
     let event
     if (isOpen) {
       event = 'close_grill_iframe'
     } else {
       event = 'open_grill_iframe'
-      setUnreadCount(0)
-      if (entity) saveUnreadCount(entity, 0)
     }
     sendEvent(event)
 
-    if (!isOpen) disablePageScroll()
-    else enablePageScroll()
-
     setIsOpen(!isOpen)
-    hasOpened.current = true
-  }
-
-  if (isLargeDesktop) {
-    return null
   }
 
   const onUnreadCountChange = (count: number) => {
@@ -64,29 +62,32 @@ export default function ChatFloatingModal() {
   return (
     <>
       {createPortal(
-        <div className={clsx(styles.ChatContainer, !isOpen && styles.ChatContainerHidden)}>
-          <div className={clsx(styles.ChatOverlay)} onClick={() => setIsOpen(false)} />
-          <div className={clsx(styles.ChatContent)}>
-            <div className={clsx(styles.ChatControl)}>
-              <Button onClick={toggleChat}>
-                <HiChevronDown />
-              </Button>
+        <div className={clsx(styles['Position--right'])}>
+          <div className={clsx(styles.ChatContainer, !isOpen && styles.ChatContainerHidden)}>
+            <div className={clsx(styles.ChatOverlay)} onClick={() => setIsOpen(false)} />
+            <div className={clsx(styles.ChatContent)}>
+              <div className={clsx(styles.ChatControl)}>
+                <Button onClick={toggleChat}>
+                  <HiChevronDown />
+                </Button>
+              </div>
+              <ChatIframe onUnreadCountChange={onUnreadCountChange} className={styles.ChatIframe} />
             </div>
-            <ChatIframe onUnreadCountChange={onUnreadCountChange} className={styles.ChatIframe} />
           </div>
         </div>,
         document.body,
       )}
-      {createPortal(
-        <div className={styles.ChatFloatingWrapper}>
-          <Button className={styles.ChatFloatingButton} onClick={toggleChat}>
-            <img src='/images/grillchat.svg' alt='GrillChat' />
-            <span>Comments</span>
-          </Button>
-          {!!unreadCount && <span className={styles.ChatUnreadCount}>{unreadCount}</span>}
-        </div>,
-        document.body,
-      )}
+      {withFloatingButton &&
+        createPortal(
+          <div className={styles.ChatFloatingWrapper}>
+            <Button className={styles.ChatFloatingButton} onClick={toggleChat}>
+              <img src='/images/grillchat.svg' alt='GrillChat' />
+              <span>Comments</span>
+            </Button>
+            {!!unreadCount && <span className={styles.ChatUnreadCount}>{unreadCount}</span>}
+          </div>,
+          document.body,
+        )}
     </>
   )
 }

src/components/chat/ChatIframe.module.sass

@@ -0,0 +1,6 @@
+.ChatIframe
+  transition: opacity 150ms ease-out
+  opacity: 1
+
+  &.ChatIframeLoading
+    opacity: 0