|
|
|
@ -1,6 +1,6 @@
@@ -1,6 +1,6 @@
|
|
|
|
|
import { useRecoilState, useRecoilValue } from 'recoil'; |
|
|
|
|
import { Layout, Tabs, Spin } from 'antd'; |
|
|
|
|
import { FC, useEffect, useState } from 'react'; |
|
|
|
|
import { FC, MutableRefObject, useEffect, useRef, useState } from 'react'; |
|
|
|
|
import cn from 'classnames'; |
|
|
|
|
import dynamic from 'next/dynamic'; |
|
|
|
|
import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage'; |
|
|
|
@ -84,6 +84,27 @@ const DesktopContent = ({ name, streamTitle, summary, tags, socialHandles, extra
@@ -84,6 +84,27 @@ const DesktopContent = ({ name, streamTitle, summary, tags, socialHandles, extra
|
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function useHeight(ref: MutableRefObject<HTMLDivElement>) { |
|
|
|
|
const [contentH, setContentH] = useState(0); |
|
|
|
|
const handleResize = () => { |
|
|
|
|
if (!ref.current) return; |
|
|
|
|
const fromTop = ref.current.getBoundingClientRect().top; |
|
|
|
|
const { innerHeight } = window; |
|
|
|
|
setContentH(innerHeight - fromTop); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
handleResize(); |
|
|
|
|
window.addEventListener('resize', handleResize); |
|
|
|
|
|
|
|
|
|
return () => { |
|
|
|
|
window.removeEventListener('resize', handleResize); |
|
|
|
|
}; |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
return contentH; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const MobileContent = ({ |
|
|
|
|
name, |
|
|
|
|
streamTitle, |
|
|
|
@ -98,6 +119,9 @@ const MobileContent = ({
@@ -98,6 +119,9 @@ const MobileContent = ({
|
|
|
|
|
if (!currentUser) { |
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const mobileContentRef = useRef<HTMLDivElement>(); |
|
|
|
|
|
|
|
|
|
const { id, displayName } = currentUser; |
|
|
|
|
|
|
|
|
|
const chatContent = showChat && ( |
|
|
|
@ -106,7 +130,6 @@ const MobileContent = ({
@@ -106,7 +130,6 @@ const MobileContent = ({
|
|
|
|
|
usernameToHighlight={displayName} |
|
|
|
|
chatUserId={id} |
|
|
|
|
isModerator={false} |
|
|
|
|
height="40vh" |
|
|
|
|
/> |
|
|
|
|
); |
|
|
|
|
|
|
|
|
@ -131,8 +154,10 @@ const MobileContent = ({
@@ -131,8 +154,10 @@ const MobileContent = ({
|
|
|
|
|
{ label: 'Followers', key: '3', children: followersTabContent }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const height = `${useHeight(mobileContentRef)}px`; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className={cn(styles.lowerSectionMobile)}> |
|
|
|
|
<div className={cn(styles.lowerSectionMobile)} ref={mobileContentRef} style={{ height }}> |
|
|
|
|
<Tabs defaultActiveKey="0" items={items} /> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|