Sidebar rework (#503)

* ci: added show titles instead of episode titles

* ci: reworked sidebar, audioclip description

* ci: clean up comments

* ci: cleanup logs

* ci: add description and scroll to audioclip sidebar

* ci: fix styled div

src/components/App/SideBar/AudioClip/index.tsx

@@ -1,12 +1,16 @@
-import { memo, useCallback, useEffect } from 'react'
+import { Divider } from '@mui/material'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 import { AudioPlayer } from '~/components/AudioPlayer'
+import { Booster } from '~/components/Booster'
 import { Avatar } from '~/components/common/Avatar'
 import { Flex } from '~/components/common/Flex'
 import { setIsTimestampLoaded, useSelectedNode } from '~/stores/useDataStore'
 import { usePlayerStore } from '~/stores/usePlayerStore'
 import { formatDescription } from '~/utils/formatDescription'
 import { useIsMatchBreakpoint } from '~/utils/useIsMatchBreakpoint'
+import { BoostAmt } from '../../Helper/BoostAmt'
+import { Description } from '../Description'
 import { Episode } from '../Relevance/Episode'
 import { Transcript } from '../Transcript'
 
@@ -23,8 +27,9 @@ const PlayerWrapper = styled(Flex)`
   padding: 30px 18px 0;
 `
 
-const TranscriptWrapper = styled(Flex)`
-  padding: 0 18px 18px;
+const StyledDivider = styled(Divider)`
+  margin: auto 0px 2px 0px;
+  opacity: 75%;
 `
 
 const StyledEpisode = styled(Episode)`
@@ -41,12 +46,28 @@ const _AudioClip = () => {
   const isMobile = useIsMatchBreakpoint('sm', 'down')
   const isPlay = usePlayerStore((s) => s.isPlaying)
   const setIsPlaying = usePlayerStore((s) => s.setIsPlaying)
+  const scrollTargetRef = useRef<HTMLDivElement | null>(null)
 
-  const { image_url: imageUrl, description, date, boost, type, id, episode_title: episodeTitle } = selectedNode || {}
+  const {
+    image_url: imageUrl,
+    show_title: showTitle,
+    date,
+    boost,
+    type,
+    id,
+    ref_id: refId,
+    episode_title: episodeTitle,
+  } = selectedNode || {}
+
+  const [boostAmount, setBoostAmount] = useState<number>(boost || 0)
 
   useEffect(
     () => () => {
       setIsPlaying(false)
+
+      if (scrollTargetRef.current) {
+        scrollTargetRef.current.scrollTo({ top: 0, behavior: 'auto' })
+      }
     },
     [setIsPlaying],
   )
@@ -87,20 +108,42 @@ const _AudioClip = () => {
       <StyledEpisode
         boostCount={boost || 0}
         date={date || 0}
-        description={formatDescription(description)}
+        episodeTitle={formatDescription(episodeTitle)}
         id={id}
         imageUrl={imageUrl || 'audio_default.svg'}
         isSelectedView
         onClick={() => null}
-        title={episodeTitle}
+        showTitle={formatDescription(showTitle)}
         type={type}
       />
       {/* </Flex> */}
-      <TranscriptWrapper grow={1} shrink={1}>
-        <Transcript node={selectedNode} stateless />
-      </TranscriptWrapper>
+      <StyledDivider />
+      <div ref={scrollTargetRef} style={{ overflow: 'auto', flex: 1, width: '100%' }}>
+        <BoostWrapper>
+          <BoostAmt amt={boostAmount} />
+          <Booster content={selectedNode} count={boostAmount} refId={refId} updateCount={setBoostAmount} />
+        </BoostWrapper>
+        <StyledDivider />
+        <TextWrapper>
+          <Description node={selectedNode} stateless />
+        </TextWrapper>
+        <StyledDivider />
+        <TextWrapper>
+          <Transcript node={selectedNode} stateless />
+        </TextWrapper>
+      </div>
     </Wrapper>
   )
 }
 
 export const AudioClip = memo(_AudioClip)
+
+const BoostWrapper = styled(Flex)`
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 18px 18px 18px;
+`
+
+const TextWrapper = styled(Flex)`
+  padding: 18px 18px 18px;
+`

src/components/App/SideBar/Description/index.tsx

@@ -0,0 +1,67 @@
+import styled from 'styled-components'
+import NotesIcon from '~/components/Icons/NotesIcon'
+import { Flex } from '~/components/common/Flex'
+import { NodeExtended } from '~/types'
+import { colors } from '~/utils/colors'
+
+type DescriptionProps = {
+  stateless?: boolean
+  node: NodeExtended | null
+}
+
+export const Description = ({ stateless, node }: DescriptionProps) => (
+  <Flex grow={1} shrink={1}>
+    <Header>
+      {stateless && (
+        <Heading>
+          <div className="icon">
+            <NotesIcon />
+          </div>
+          <div className="title">Description</div>
+        </Heading>
+      )}
+    </Header>
+    <Box>{node?.description ? `"${node?.description}"` : '...'}</Box>
+  </Flex>
+)
+
+const Heading = styled(Flex).attrs({
+  direction: 'row',
+  align: 'center',
+})`
+  .icon {
+    font-size: 16px;
+    color: ${colors.GRAY3};
+    margin-right: 7px;
+  }
+
+  .title {
+    color: ${colors.white};
+    font-family: Barlow;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+`
+
+const Header = styled(Flex).attrs({
+  direction: 'row',
+  align: 'center',
+  justify: 'space-between',
+})`
+  margin-bottom: 18px;
+`
+
+const Box = styled(Flex)`
+  color: ${colors.white};
+  text-overflow: ellipsis;
+  whitespace: nowrap;
+  font-family: Barlow;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+`

src/components/App/SideBar/Relevance/Episode/index.tsx

@@ -42,11 +42,11 @@ const EpisodeWrapper = styled(Flex).attrs({
 type Props = {
   boostCount: number
   date: number
-  description: string
+  episodeTitle: string
   isSelectedView?: boolean
   id?: string
   imageUrl: string
-  title?: string
+  showTitle?: string
   text?: string
   type?: string
   name?: string
@@ -60,11 +60,11 @@ type Props = {
 export const Episode = ({
   boostCount,
   date,
-  description,
+  episodeTitle,
   id,
   isSelectedView = false,
   imageUrl,
-  title,
+  showTitle,
   type,
   text,
   name,
@@ -94,10 +94,10 @@ export const Episode = ({
               </Flex>
             </Flex>
 
-            <Description data-testid="episode-description">{description}</Description>
+            <Description data-testid="episode-description">{episodeTitle}</Description>
             <Flex direction="row" justify="flex-start">
               {Boolean(date) && <Date>{moment.unix(date).format('ll')}</Date>}
-              {Boolean(title) && <Title>{title}</Title>}
+              {Boolean(showTitle) && <Title>{showTitle}</Title>}
               {!isSelectedView && boostCount > 0 && (
                 <Flex style={{ marginLeft: 'auto' }}>
                   <BoostAmt amt={boostCount} />
@@ -108,7 +108,7 @@ export const Episode = ({
         </Flex>
       )}
       {['person', 'guest'].includes(type as string) && (
-        <TypePerson imageUrl={imageUrl} name={name || ''} title={title || ''} />
+        <TypePerson imageUrl={imageUrl} name={name || ''} title={showTitle || ''} />
       )}
       {type === 'tweet' && (
         <TypeTweet

src/components/App/SideBar/Relevance/index.tsx

@@ -60,12 +60,12 @@ export const Relevance = ({ isSearchResult }: Props) => {
         {currentNodes.map((n, index) => {
           const {
             image_url: imageUrl,
-            description,
             date,
             boost,
             type,
             id,
             episode_title: episodeTitle,
+            show_title: showTitle,
             node_type: nodeType,
             text,
             name,
@@ -80,14 +80,14 @@ export const Relevance = ({ isSearchResult }: Props) => {
               key={index.toString()}
               boostCount={boost || 0}
               date={date || 0}
-              description={formatDescription(description)}
+              episodeTitle={formatDescription(episodeTitle)}
               id={id}
               imageUrl={imageUrl || 'audio_default.svg'}
               name={name || ''}
               onClick={() => handleNodeClick(n)}
               profilePicture={profilePicture}
+              showTitle={formatDescription(showTitle)}
               text={text || ''}
-              title={episodeTitle}
               twitterHandle={twitterHandle}
               type={type || nodeType}
               verified={verified}

src/components/App/SideBar/Transcript/index.tsx

@@ -68,19 +68,11 @@ export const Transcript = ({ stateless, node }: TranscriptProps) => {
           </CloseButton>
         )}
       </Header>
-      <ScrollWrapper>
-        <Box>{node?.text ? `"${node?.text}"` : '...'}</Box>
-      </ScrollWrapper>
+      <Box>{node?.text ? `"${node?.text}"` : '...'}</Box>
     </Flex>
   )
 }
 
-const ScrollWrapper = styled(Flex)(() => ({
-  overflow: 'auto',
-  flex: 1,
-  width: '100%',
-}))
-
 const Heading = styled(Flex).attrs({
   direction: 'row',
   align: 'center',

src/components/App/SideBar/YouTube/index.tsx

@@ -8,23 +8,25 @@ import { useDataStore } from '~/stores/useDataStore'
 import { formatDescription } from '~/utils/formatDescription'
 import { videoTimetoSeconds } from '~/utils/videoTimetoSeconds'
 import { BoostAmt } from '../../Helper/BoostAmt'
+import { Description } from '../Description'
 import { Episode } from '../Relevance/Episode'
 import { Transcript } from '../Transcript'
 
 export const YouTube = () => {
   const selectedNode = useDataStore((s) => s.selectedNode)
   const playerRef = useRef<ReactPlayer | null>(null)
+  const scrollTargetRef = useRef<HTMLDivElement | null>(null)
 
   const {
     link,
     timestamp,
     image_url: imageUrl,
-    description,
     date,
     boost,
     type,
     id,
     show_title: showTitle,
+    episode_title: episodeTitle,
     ref_id: refId,
   } = selectedNode || {}
 
@@ -35,6 +37,10 @@ export const YouTube = () => {
     if (playerRef.current) {
       playerRef.current?.seekTo(secs)
     }
+
+    if (scrollTargetRef.current) {
+      scrollTargetRef.current.scrollTo({ top: 0, behavior: 'auto' })
+    }
   }, [playerRef, secs])
 
   if (!selectedNode) {
@@ -51,23 +57,29 @@ export const YouTube = () => {
       <StyledEpisode
         boostCount={boostAmount || 0}
         date={date || 0}
-        description={formatDescription(description)}
+        episodeTitle={formatDescription(episodeTitle)}
         id={id}
         imageUrl={imageUrl || 'video_default.svg'}
         isSelectedView
         onClick={() => null}
-        title={showTitle}
+        showTitle={showTitle}
         type={type}
       />
       <StyledDivider />
-      <BoostWrapper>
-        <BoostAmt amt={boostAmount} />
-        <Booster content={selectedNode} count={boostAmount} refId={refId} updateCount={setBoostAmount} />
-      </BoostWrapper>
-      <StyledDivider />
-      <TranscriptWrapper grow={1} shrink={1}>
-        <Transcript node={selectedNode} stateless />
-      </TranscriptWrapper>
+      <div ref={scrollTargetRef} style={{ overflow: 'auto', flex: 1, width: '100%' }}>
+        <BoostWrapper>
+          <BoostAmt amt={boostAmount} />
+          <Booster content={selectedNode} count={boostAmount} refId={refId} updateCount={setBoostAmount} />
+        </BoostWrapper>
+        <StyledDivider />
+        <TextWrapper>
+          <Description node={selectedNode} stateless />
+        </TextWrapper>
+        <StyledDivider />
+        <TextWrapper>
+          <Transcript node={selectedNode} stateless />
+        </TextWrapper>
+      </div>
     </Wrapper>
   )
 }
@@ -88,11 +100,11 @@ const PlayerWrapper = styled(Flex)`
 const BoostWrapper = styled(Flex)`
   flex-direction: row;
   justify-content: space-between;
-  padding: 0 18px 18px;
+  padding: 18px 18px 18px;
 `
 
-const TranscriptWrapper = styled(Flex)`
-  padding: 0 18px 18px;
+const TextWrapper = styled(Flex)`
+  padding: 18px 18px 18px;
 `
 
 const StyledEpisode = styled(Episode)`
@@ -104,7 +116,6 @@ const StyledEpisode = styled(Episode)`
 `
 
 const StyledDivider = styled(Divider)`
-  margin-bottom: 10px;
-  margin: auto 0px 10px 0px;
+  margin: auto 0px 2px 0px;
   opacity: 75%;
 `