From 3f6f0f1742118bdeae3792d16c0976d1cdfbb3c9 Mon Sep 17 00:00:00 2001 From: Macintyre Sunde Date: Mon, 16 Oct 2023 15:39:57 -0400 Subject: [PATCH 1/6] ci: added show titles instead of episode titles --- src/components/App/SideBar/YouTube/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx index 530c7c0dd..94bfc8d96 100644 --- a/src/components/App/SideBar/YouTube/index.tsx +++ b/src/components/App/SideBar/YouTube/index.tsx @@ -1,15 +1,15 @@ import { useEffect, useRef, useState } from 'react' import ReactPlayer from 'react-player' import styled from 'styled-components' +import { Booster } from '~/components/Booster' +import { Divider } from '~/components/common/Divider' import { Flex } from '~/components/common/Flex' import { useDataStore } from '~/stores/useDataStore' import { formatDescription } from '~/utils/formatDescription' import { videoTimetoSeconds } from '~/utils/videoTimetoSeconds' +import { BoostAmt } from '../../Helper/BoostAmt' import { Episode } from '../Relevance/Episode' import { Transcript } from '../Transcript' -import { BoostAmt } from '../../Helper/BoostAmt' -import { Booster } from '~/components/Booster' -import { Divider } from '~/components/common/Divider' export const YouTube = () => { const selectedNode = useDataStore((s) => s.selectedNode) @@ -24,7 +24,7 @@ export const YouTube = () => { boost, type, id, - episode_title: episodeTitle, + show_title: showTitle, ref_id: refId, } = selectedNode || {} @@ -56,7 +56,7 @@ export const YouTube = () => { imageUrl={imageUrl || 'video_default.svg'} isSelectedView onClick={() => null} - title={episodeTitle} + title={showTitle} type={type} /> From 2fc15262922152df054e6f4c59eac2fafb9156ca Mon Sep 17 00:00:00 2001 From: Macintyre Sunde Date: Tue, 17 Oct 2023 11:25:48 -0400 Subject: [PATCH 2/6] ci: reworked sidebar, audioclip description --- .../App/SideBar/AudioClip/index.tsx | 14 +++- .../App/SideBar/Description/index.tsx | 67 +++++++++++++++++++ .../App/SideBar/Relevance/Episode/index.tsx | 14 ++-- .../App/SideBar/Relevance/index.tsx | 6 +- .../App/SideBar/Transcript/index.tsx | 10 +-- src/components/App/SideBar/YouTube/index.tsx | 51 +++++++++----- 6 files changed, 124 insertions(+), 38 deletions(-) create mode 100644 src/components/App/SideBar/Description/index.tsx diff --git a/src/components/App/SideBar/AudioClip/index.tsx b/src/components/App/SideBar/AudioClip/index.tsx index a87fe45c1..8a905e81c 100644 --- a/src/components/App/SideBar/AudioClip/index.tsx +++ b/src/components/App/SideBar/AudioClip/index.tsx @@ -42,7 +42,15 @@ const _AudioClip = () => { const isPlay = usePlayerStore((s) => s.isPlaying) const setIsPlaying = usePlayerStore((s) => s.setIsPlaying) - const { image_url: imageUrl, description, date, boost, type, id, episode_title: episodeTitle } = selectedNode || {} + const { + image_url: imageUrl, + show_title: showTitle, + date, + boost, + type, + id, + episode_title: episodeTitle, + } = selectedNode || {} useEffect( () => () => { @@ -87,12 +95,12 @@ const _AudioClip = () => { null} - title={episodeTitle} + showTitle={formatDescription(showTitle)} type={type} /> {/* */} diff --git a/src/components/App/SideBar/Description/index.tsx b/src/components/App/SideBar/Description/index.tsx new file mode 100644 index 000000000..e46d64e15 --- /dev/null +++ b/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) => ( + +
+ {stateless && ( + +
+ +
+
Description
+ + )} +
+ {node?.description ? `"${node?.description}"` : '...'} + +) + +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; +` diff --git a/src/components/App/SideBar/Relevance/Episode/index.tsx b/src/components/App/SideBar/Relevance/Episode/index.tsx index ec138030a..05b3908e9 100644 --- a/src/components/App/SideBar/Relevance/Episode/index.tsx +++ b/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 = ({ - {description} + {episodeTitle} {Boolean(date) && {moment.unix(date).format('ll')}} - {Boolean(title) && {title}} + {Boolean(showTitle) && {showTitle}} {!isSelectedView && boostCount > 0 && ( @@ -108,7 +108,7 @@ export const Episode = ({ )} {['person', 'guest'].includes(type as string) && ( - + )} {type === 'tweet' && ( { {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} diff --git a/src/components/App/SideBar/Transcript/index.tsx b/src/components/App/SideBar/Transcript/index.tsx index 32795b8b3..4e91163a9 100644 --- a/src/components/App/SideBar/Transcript/index.tsx +++ b/src/components/App/SideBar/Transcript/index.tsx @@ -68,19 +68,11 @@ export const Transcript = ({ stateless, node }: TranscriptProps) => { )} - - {node?.text ? `"${node?.text}"` : '...'} - + {node?.text ? `"${node?.text}"` : '...'} ) } -const ScrollWrapper = styled(Flex)(() => ({ - overflow: 'auto', - flex: 1, - width: '100%', -})) - const Heading = styled(Flex).attrs({ direction: 'row', align: 'center', diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx index 94bfc8d96..a0a99034f 100644 --- a/src/components/App/SideBar/YouTube/index.tsx +++ b/src/components/App/SideBar/YouTube/index.tsx @@ -8,23 +8,31 @@ 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(null) + const scrollTargetRef = useRef(null) + + // useEffect(() => { + // if (scrollTargetRef.current) { + // scrollTargetRef.current.scrollTo({ top: 0 }) + // } + // }, []) const { link, timestamp, image_url: imageUrl, - description, date, boost, type, id, show_title: showTitle, + episode_title: episodeTitle, ref_id: refId, } = selectedNode || {} @@ -35,6 +43,12 @@ export const YouTube = () => { if (playerRef.current) { playerRef.current?.seekTo(secs) } + + if (scrollTargetRef.current) { + scrollTargetRef.current.scrollTo({ top: 0, behavior: 'auto' }) + + console.log('helloyt') + } }, [playerRef, secs]) if (!selectedNode) { @@ -51,23 +65,29 @@ export const YouTube = () => { null} - title={showTitle} + showTitle={showTitle} type={type} /> - - - - - - - - +
+ + + + + + + + + + + + +
) } @@ -88,11 +108,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 +124,6 @@ const StyledEpisode = styled(Episode)` ` const StyledDivider = styled(Divider)` - margin-bottom: 10px; - margin: auto 0px 10px 0px; + margin: auto 0px 1px 0px; opacity: 75%; ` From 5d01b6de55cbfa06fb85830b1baec69b77d57652 Mon Sep 17 00:00:00 2001 From: Macintyre Sunde Date: Tue, 17 Oct 2023 11:26:36 -0400 Subject: [PATCH 3/6] ci: clean up comments --- src/components/App/SideBar/YouTube/index.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx index a0a99034f..ee93614b1 100644 --- a/src/components/App/SideBar/YouTube/index.tsx +++ b/src/components/App/SideBar/YouTube/index.tsx @@ -17,12 +17,6 @@ export const YouTube = () => { const playerRef = useRef(null) const scrollTargetRef = useRef(null) - // useEffect(() => { - // if (scrollTargetRef.current) { - // scrollTargetRef.current.scrollTo({ top: 0 }) - // } - // }, []) - const { link, timestamp, From 45a8c2ea8bca9d5f741d9af410fa417ee6acf50e Mon Sep 17 00:00:00 2001 From: Macintyre Sunde Date: Tue, 17 Oct 2023 11:28:43 -0400 Subject: [PATCH 4/6] ci: cleanup logs --- src/components/App/SideBar/YouTube/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx index ee93614b1..edbd72dd6 100644 --- a/src/components/App/SideBar/YouTube/index.tsx +++ b/src/components/App/SideBar/YouTube/index.tsx @@ -40,8 +40,6 @@ export const YouTube = () => { if (scrollTargetRef.current) { scrollTargetRef.current.scrollTo({ top: 0, behavior: 'auto' }) - - console.log('helloyt') } }, [playerRef, secs]) From 1d1737b60c240eddc9e70db0e1c84b6c64575301 Mon Sep 17 00:00:00 2001 From: Macintyre Sunde Date: Tue, 17 Oct 2023 12:30:28 -0400 Subject: [PATCH 5/6] ci: add description and scroll to audioclip sidebar --- .../App/SideBar/AudioClip/index.tsx | 47 ++++++++++++++++--- 1 file changed, 41 insertions(+), 6 deletions(-) diff --git a/src/components/App/SideBar/AudioClip/index.tsx b/src/components/App/SideBar/AudioClip/index.tsx index 8a905e81c..de088f16b 100644 --- a/src/components/App/SideBar/AudioClip/index.tsx +++ b/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 1px 0px; + opacity: 75%; ` const StyledEpisode = styled(Episode)` @@ -41,6 +46,7 @@ const _AudioClip = () => { const isMobile = useIsMatchBreakpoint('sm', 'down') const isPlay = usePlayerStore((s) => s.isPlaying) const setIsPlaying = usePlayerStore((s) => s.setIsPlaying) + const scrollTargetRef = useRef(null) const { image_url: imageUrl, @@ -49,12 +55,19 @@ const _AudioClip = () => { boost, type, id, + ref_id: refId, episode_title: episodeTitle, } = selectedNode || {} + const [boostAmount, setBoostAmount] = useState(boost || 0) + useEffect( () => () => { setIsPlaying(false) + + if (scrollTargetRef.current) { + scrollTargetRef.current.scrollTo({ top: 0, behavior: 'auto' }) + } }, [setIsPlaying], ) @@ -104,11 +117,33 @@ const _AudioClip = () => { type={type} /> {/* */} - - - + +
+ + + + + + + + + + + + +
) } 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; +` From 3fb199648ebdd3caf037cd813ffc3fe2e322e8a4 Mon Sep 17 00:00:00 2001 From: Macintyre Sunde Date: Tue, 17 Oct 2023 12:35:37 -0400 Subject: [PATCH 6/6] ci: fix styled div --- src/components/App/SideBar/AudioClip/index.tsx | 2 +- src/components/App/SideBar/YouTube/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/App/SideBar/AudioClip/index.tsx b/src/components/App/SideBar/AudioClip/index.tsx index de088f16b..cd0d40dfe 100644 --- a/src/components/App/SideBar/AudioClip/index.tsx +++ b/src/components/App/SideBar/AudioClip/index.tsx @@ -28,7 +28,7 @@ const PlayerWrapper = styled(Flex)` ` const StyledDivider = styled(Divider)` - margin: auto 0px 1px 0px; + margin: auto 0px 2px 0px; opacity: 75%; ` diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx index edbd72dd6..14df0cda8 100644 --- a/src/components/App/SideBar/YouTube/index.tsx +++ b/src/components/App/SideBar/YouTube/index.tsx @@ -116,6 +116,6 @@ const StyledEpisode = styled(Episode)` ` const StyledDivider = styled(Divider)` - margin: auto 0px 1px 0px; + margin: auto 0px 2px 0px; opacity: 75%; `