Merge pull request #2502 from stakwork/feature/mindset-v3-layout

feat: layout polishing, removed rerenders, added index kyes

src/components/Universe/Graph/Cubes/Text/index.tsx

@@ -77,7 +77,7 @@ export const TextNode = memo(({ node, hide, ignoreDistance }: Props) => {
 
   const { texture } = useTexture(node.properties?.image_url || '')
 
-  const { normalizedSchemasByType } = useSchemaStore((s) => s)
+  const { normalizedSchemasByType, getNodeKeysByType } = useSchemaStore((s) => s)
 
   useFrame(({ camera, clock }) => {
     const { selectedNode, hoveredNode, activeEdge } = useGraphStore.getState()
@@ -148,7 +148,10 @@ export const TextNode = memo(({ node, hide, ignoreDistance }: Props) => {
 
   const Icon = primaryIcon ? Icons[primaryIcon] : null
   const iconName = Icon ? primaryIcon : 'NodesIcon'
-  const sanitizedNodeName = removeEmojis(String(node?.properties?.name || ''))
+  const keyProperty = getNodeKeysByType(node.node_type) || ''
+
+  const sanitizedNodeName =
+    keyProperty && node?.properties ? removeEmojis(String(node?.properties[keyProperty] || '')) : ''
 
   const uniforms = {
     u_texture: { value: texture },

src/components/mindset/components/Header/index.tsx

@@ -22,6 +22,7 @@ const Head = styled(Flex).attrs({
   justify: 'flex-start',
 })`
   height: 64px;
+  box-sizing: border-box;
   padding: 20px 23px;
   gap: 0px;
   z-index: 50;

src/components/mindset/components/LandingPage/index.tsx

@@ -8,11 +8,11 @@ import { getNodes, getSchemaAll } from '~/network/fetchSourcesData'
 import { useDataStore } from '~/stores/useDataStore'
 import { useMindsetStore } from '~/stores/useMindsetStore'
 import { useSchemaStore } from '~/stores/useSchemaStore'
-import { SubmitErrRes } from '~/types'
+import { FetchDataResponse, Node, SubmitErrRes } from '~/types'
 import { colors } from '~/utils/colors'
 import { ChevronRight } from '../Icon/ChevronRight'
-import { isValidMediaUrl } from './utils'
 import { VideoCard } from '../VideoCard'
+import { isValidMediaUrl } from './utils'
 
 export type FormData = {
   input: string
@@ -22,26 +22,6 @@ export type FormData = {
   latitude: string
 }
 
-interface EpisodeProperties {
-  date: number
-  episode_title: string
-  image_url: string
-  media_url: string
-  pubkey: string
-  source_link: string
-  status: string
-}
-
-interface Node {
-  node_type: string
-  properties?: EpisodeProperties
-}
-
-export interface ApiResponse {
-  edges: never[]
-  nodes: Node[]
-}
-
 const handleSubmitForm = async (data: FieldValues): Promise<SubmitErrRes> => {
   const endPoint = 'add_node'
 
@@ -65,22 +45,18 @@ export const LandingPage = () => {
   const [inputValue, setInputValue] = useState('')
   const [error, setError] = useState(false)
   const [requestError, setRequestError] = useState<string>('')
-  const [episodes, setEpisodes] = useState<EpisodeProperties[]>([])
+  const [episodes, setEpisodes] = useState<Node[]>([])
   const { setRunningProjectId } = useDataStore((s) => s)
   const { setSelectedEpisodeId, setSelectedEpisodeLink } = useMindsetStore((s) => s)
   const { setSchemas } = useSchemaStore((s) => s)
 
-  const filterAndSortEpisodes = (data: ApiResponse): EpisodeProperties[] =>
-    data.nodes
-      .filter((node) => node.node_type.toLowerCase() === 'episode' && node.properties?.date)
-      .map((node) => node.properties!)
-      .sort((a, b) => b.date - a.date)
-      .slice(0, 3)
+  const filterAndSortEpisodes = (data: FetchDataResponse): Node[] =>
+    data.nodes.filter((node) => node.node_type.toLowerCase() === 'episode' && node.properties?.date).slice(0, 3)
 
   useEffect(() => {
     const fetchSchemaData = async () => {
       try {
-        const res: ApiResponse = await getNodes()
+        const res: FetchDataResponse = await getNodes()
 
         const topEpisodes = filterAndSortEpisodes(res)
 
@@ -161,11 +137,11 @@ export const LandingPage = () => {
       <SeedQuestionsWrapper>
         {episodes.map((episode) => (
           <VideoCard
-            key={episode?.episode_title}
-            imageUrl={(episode?.image_url as string) || ''}
-            onClick={() => handleSubmit(episode?.source_link)}
-            subtitle="Subtitle for episode seed"
-            title={(episode?.episode_title as string) || ''}
+            key={episode?.ref_id}
+            imageUrl={episode?.properties?.image_url || ''}
+            onClick={() => handleSubmit(episode?.properties?.source_link)}
+            subtitle=""
+            title={episode?.properties?.episode_title || ''}
           />
         ))}
       </SeedQuestionsWrapper>

src/components/mindset/components/MediaPlayer/index.tsx

@@ -89,13 +89,13 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
     setIsPlaying(!isPlaying)
   }
 
-  const handlePlay = () => {
+  const handlePlay = useCallback(() => {
     setIsPlaying(true)
-  }
+  }, [setIsPlaying])
 
-  const handlePause = () => {
+  const handlePause = useCallback(() => {
     setIsPlaying(false)
-  }
+  }, [setIsPlaying])
 
   const handleError = () => {
     setHasError(true)
@@ -123,8 +123,6 @@ const MediaPlayerComponent = ({ mediaUrl }: Props) => {
       } else {
         setActiveEdge(null)
       }
-
-      // find playing link and set it to state
     }
   }
 

src/components/mindset/components/PlayerContols/Controls/index.tsx

@@ -0,0 +1,104 @@
+import { IconButton } from '@mui/material'
+import { memo } from 'react'
+import styled from 'styled-components'
+import PauseIcon from '~/components/Icons/PauseIcon'
+import PlayIcon from '~/components/Icons/PlayIcon'
+import { Flex } from '~/components/common/Flex'
+import { usePlayerStore } from '~/stores/usePlayerStore'
+import { colors } from '~/utils/colors'
+
+export const Controls = memo(() => {
+  const { isPlaying, playerRef } = usePlayerStore((s) => s)
+
+  const handleRewind = () => {
+    if (playerRef) {
+      const newTime = playerRef.getCurrentTime() - 15
+
+      playerRef.seekTo(newTime, 'seconds')
+    }
+  }
+
+  const handleFastForward = () => {
+    if (playerRef) {
+      const newTime = playerRef.getCurrentTime() + 15
+
+      playerRef.seekTo(newTime, 'seconds')
+    }
+  }
+
+  const togglePlay = () => {
+    if (playerRef) {
+      if (isPlaying) {
+        playerRef.getInternalPlayer().pauseVideo()
+
+        return
+      }
+
+      playerRef.getInternalPlayer().playVideo()
+    }
+  }
+
+  return (
+    <Wrapper>
+      <RewindIconWrapper onClick={handleRewind}>
+        <img alt="" src="RewindIcon.svg" />
+      </RewindIconWrapper>
+      <Action data-testid="play-pause-button" onClick={togglePlay} size="small">
+        {isPlaying ? <PauseIcon data-testid="pause-icon" /> : <PlayIcon data-testid="play-icon" />}
+      </Action>
+      <ForwardIconWrapper onClick={handleFastForward}>
+        <img alt="" src="ForwardIcon.svg" />
+      </ForwardIconWrapper>
+    </Wrapper>
+  )
+})
+
+Controls.displayName = 'Controls'
+
+const Wrapper = styled(Flex).attrs({
+  direction: 'row',
+  align: 'center',
+  justify: 'flex-start',
+})`
+  width: 142px;
+  height: 54px;
+  background: ${colors.BG1};
+  border-radius: 40px;
+  margin-right: 54px;
+  color: ${colors.white};
+  font-size: 20px;
+  padding: 12px;
+  justify-content: space-between;
+  box-sizing: border-box;
+`
+
+const Action = styled(IconButton)`
+  && {
+    font-size: 36px;
+    padding: 2px;
+    overflow: hidden;
+  }
+`
+
+const RewindIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1px 0 0 1px;
+  cursor: pointer;
+  img {
+    width: 20px;
+    height: auto;
+  }
+`
+
+const ForwardIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  img {
+    width: 24px;
+    height: auto;
+  }
+`

src/components/mindset/components/PlayerContols/ProgressBar/Markers/index.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react'
+import { NodeExtended } from '~/types'
+import { Marker } from './Marker'
+
+type Props = {
+  markers: NodeExtended[]
+  duration: number
+}
+
+export const Markers = memo(({ markers, duration }: Props) => (
+  <>
+    {markers.map((node) => {
+      const position = ((node?.start || 0) / duration) * 100
+      const type = node?.node_type || ''
+      const img = node?.properties?.image_url || ''
+
+      return <Marker key={node.ref_id} img={img} left={position} type={type} />
+    })}
+  </>
+))
+
+Markers.displayName = 'Markers'

src/components/mindset/components/PlayerContols/ProgressBar/index.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
 import { NodeExtended } from '~/types'
 import { colors } from '~/utils'
-import { Marker } from '../../Marker'
+import { Markers } from './Markers'
 
 type Props = {
   duration: number
@@ -18,13 +18,7 @@ export const ProgressBar = ({ duration, markers, handleProgressChange, playingTI
   return (
     <ProgressWrapper>
       <ProgressSlider max={duration} onChange={handleProgressChange} value={playingTIme} width={width} />
-      {markers.map((node) => {
-        const position = ((node?.start || 0) / duration) * 100
-        const type = node?.node_type || ''
-        const img = node?.properties?.image_url || ''
-
-        return <Marker key={node.ref_id} img={img} left={position} type={type} />
-      })}
+      <Markers duration={duration} markers={markers} />
     </ProgressWrapper>
   )
 }