From 9c660ad95d557c5d6ed5579e6bd86585d9367837 Mon Sep 17 00:00:00 2001 From: Charles Nwankwo <39612820+Xavier-Charles@users.noreply.github.com> Date: Thu, 15 Feb 2024 18:12:27 +0100 Subject: [PATCH] chore: Superfeed Podcasts & Video (#239) --- .../src/api/services/superfeed/types.ts | 2 +- packages/frontend/src/api/types/superfeed.ts | 2 + .../frontend/src/assets/icons/spinners.svg | 17 ++ .../src/mobile-components/Superfeed.tsx | 23 +- .../src/mobile-components/feed}/BlogCard.tsx | 5 +- .../src/mobile-components/feed}/EventCard.tsx | 9 +- .../src/mobile-components/feed}/FeedCard.tsx | 24 +- .../mobile-components/feed}/FeedElements.tsx | 5 +- .../feed}/FeedItem.module.scss | 0 .../src/mobile-components/feed}/ImageCard.tsx | 7 +- .../src/mobile-components/feed}/LineChart.tsx | 2 +- .../src/mobile-components/feed}/NewsCard.tsx | 5 +- .../mobile-components/feed/PodcastCard.tsx | 280 ++++++++++++++++++ .../src/mobile-components/feed}/PriceCard.tsx | 7 +- .../mobile-components/feed}/SocialCard.tsx | 7 +- .../src/mobile-components/feed}/VideoCard.tsx | 52 +++- .../src/mobile-components/feed/types.ts | 32 ++ .../notifications/Notifications.tsx | 6 +- .../mobile-containers/SuperfeedContainer.tsx | 19 +- packages/ui-kit/index.ts | 7 +- .../superfeed/PodcastCard.tsx | 153 ---------- .../src/mobile-components/superfeed/types.ts | 135 --------- 22 files changed, 455 insertions(+), 344 deletions(-) create mode 100644 packages/frontend/src/assets/icons/spinners.svg rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/BlogCard.tsx (97%) rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/EventCard.tsx (96%) rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/FeedCard.tsx (70%) rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/FeedElements.tsx (96%) rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/FeedItem.module.scss (100%) rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/ImageCard.tsx (96%) rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/LineChart.tsx (99%) rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/NewsCard.tsx (97%) create mode 100644 packages/frontend/src/mobile-components/feed/PodcastCard.tsx rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/PriceCard.tsx (96%) rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/SocialCard.tsx (96%) rename packages/{ui-kit/src/mobile-components/superfeed => frontend/src/mobile-components/feed}/VideoCard.tsx (75%) create mode 100644 packages/frontend/src/mobile-components/feed/types.ts delete mode 100644 packages/ui-kit/src/mobile-components/superfeed/PodcastCard.tsx delete mode 100644 packages/ui-kit/src/mobile-components/superfeed/types.ts diff --git a/packages/frontend/src/api/services/superfeed/types.ts b/packages/frontend/src/api/services/superfeed/types.ts index 09b02078..c3dfeacf 100644 --- a/packages/frontend/src/api/services/superfeed/types.ts +++ b/packages/frontend/src/api/services/superfeed/types.ts @@ -12,7 +12,7 @@ export type TRemoteSuperfeedItem = { image: string; short_description: string; file_url: string | null; - duration: number | null; + duration: string | null; starts_at: string | null; ends_at: string | null; source: { diff --git a/packages/frontend/src/api/types/superfeed.ts b/packages/frontend/src/api/types/superfeed.ts index d9f881d7..853f3313 100644 --- a/packages/frontend/src/api/types/superfeed.ts +++ b/packages/frontend/src/api/types/superfeed.ts @@ -52,4 +52,6 @@ export type TSuperfeedItem = Omit & { tags: { name: string; slug: string }[]; likes: number; comments: number; + fileUrl: string | null; + duration: string | null; }; diff --git a/packages/frontend/src/assets/icons/spinners.svg b/packages/frontend/src/assets/icons/spinners.svg new file mode 100644 index 00000000..3c13922c --- /dev/null +++ b/packages/frontend/src/assets/icons/spinners.svg @@ -0,0 +1,17 @@ + \ No newline at end of file diff --git a/packages/frontend/src/mobile-components/Superfeed.tsx b/packages/frontend/src/mobile-components/Superfeed.tsx index 354ab6eb..c270c040 100644 --- a/packages/frontend/src/mobile-components/Superfeed.tsx +++ b/packages/frontend/src/mobile-components/Superfeed.tsx @@ -1,16 +1,22 @@ import { useRef, FC, FormEvent, useCallback } from "react"; -import { twMerge, FeedCard, ModuleLoader, ScrollBar } from "@alphaday/ui-kit"; +import { twMerge, ModuleLoader, ScrollBar } from "@alphaday/ui-kit"; +import { AudioPlayerProvider } from "react-use-audio-player"; import { useOnScreen } from "src/api/hooks"; import { TSuperfeedItem } from "src/api/types"; import { shouldFetchMoreItems } from "src/api/utils/itemUtils"; import { ReactComponent as SettingsSVG } from "src/assets/icons/settings.svg"; import { ReactComponent as Settings2SVG } from "src/assets/icons/settings3.svg"; +import { FeedCard } from "./feed/FeedCard"; interface ISuperfeedModule { isLoading: boolean; feed: TSuperfeedItem[] | undefined; handlePaginate: (type: "next" | "previous") => void; toggleShowFeedFilters: () => void; + selectedPodcast: TSuperfeedItem | null; + setSelectedPodcast: React.Dispatch< + React.SetStateAction + >; } const FiltersButton: FC<{ toggleShowFeedFilters: () => void }> = ({ @@ -56,6 +62,8 @@ const SuperfeedModule: FC = ({ feed, handlePaginate, toggleShowFeedFilters, + selectedPodcast, + setSelectedPodcast, }) => { const handleScrollEvent = useCallback( ({ currentTarget }: FormEvent) => { @@ -72,9 +80,16 @@ const SuperfeedModule: FC = ({ return ( - {feed.map((item) => ( - - ))} + + {feed.map((item) => ( + + ))} + ); }; diff --git a/packages/ui-kit/src/mobile-components/superfeed/BlogCard.tsx b/packages/frontend/src/mobile-components/feed/BlogCard.tsx similarity index 97% rename from packages/ui-kit/src/mobile-components/superfeed/BlogCard.tsx rename to packages/frontend/src/mobile-components/feed/BlogCard.tsx index f052500f..52a4e04b 100644 --- a/packages/ui-kit/src/mobile-components/superfeed/BlogCard.tsx +++ b/packages/frontend/src/mobile-components/feed/BlogCard.tsx @@ -1,4 +1,5 @@ import { FC } from "react"; +import { TSuperfeedItem } from "src/api/types"; import { computeDuration } from "src/utils/dateUtils"; import { ActionButtons, @@ -9,10 +10,10 @@ import { FeedSourceInfo, TagButtons, } from "./FeedElements"; -import { IFeedItem, feedItemIconMap } from "./types"; +import { feedItemIconMap } from "./types"; export const BlogCard: FC<{ - item: IFeedItem; + item: TSuperfeedItem; }> = ({ item }) => { const { title, diff --git a/packages/ui-kit/src/mobile-components/superfeed/EventCard.tsx b/packages/frontend/src/mobile-components/feed/EventCard.tsx similarity index 96% rename from packages/ui-kit/src/mobile-components/superfeed/EventCard.tsx rename to packages/frontend/src/mobile-components/feed/EventCard.tsx index 11e34d19..8d5c5b30 100644 --- a/packages/ui-kit/src/mobile-components/superfeed/EventCard.tsx +++ b/packages/frontend/src/mobile-components/feed/EventCard.tsx @@ -1,8 +1,9 @@ import { FC } from "react"; +import { twMerge } from "@alphaday/ui-kit"; import moment from "moment"; +import { TSuperfeedItem } from "src/api/types"; +import { TagButton } from "src/mobile-components/button/buttons"; import { imgOnError } from "src/utils/errorHandling"; -import { twMerge } from "tailwind-merge"; -import { TagButton } from "../button/buttons"; import { ActionButtons, CardTitle, @@ -12,7 +13,7 @@ import { FeedItemDisclosurePanel, TagButtons, } from "./FeedElements"; -import { IFeedItem, feedItemIconMap } from "./types"; +import { feedItemIconMap } from "./types"; const eventDateFormatter = (date: string) => { const d = new Date(); // or whatever date you have @@ -35,7 +36,7 @@ const eventDateFormatter = (date: string) => { ); }; -export const EventCard: FC<{ item: IFeedItem }> = ({ item }) => { +export const EventCard: FC<{ item: TSuperfeedItem }> = ({ item }) => { const { title, tags, diff --git a/packages/ui-kit/src/mobile-components/superfeed/FeedCard.tsx b/packages/frontend/src/mobile-components/feed/FeedCard.tsx similarity index 70% rename from packages/ui-kit/src/mobile-components/superfeed/FeedCard.tsx rename to packages/frontend/src/mobile-components/feed/FeedCard.tsx index 9f9a3971..1bfe0f69 100644 --- a/packages/ui-kit/src/mobile-components/superfeed/FeedCard.tsx +++ b/packages/frontend/src/mobile-components/feed/FeedCard.tsx @@ -1,4 +1,5 @@ import { FC } from "react"; +import { EFeedItemType, TSuperfeedItem } from "src/api/types"; import { BlogCard } from "./BlogCard"; import { EventCard } from "./EventCard"; import { ImageCard } from "./ImageCard"; @@ -6,12 +7,21 @@ import { NewsCard } from "./NewsCard"; import { PodcastCard } from "./PodcastCard"; import { PriceCard } from "./PriceCard"; import { SocialCard } from "./SocialCard"; -import { EFeedItemType, IFeedItem } from "./types"; import { VideoCard } from "./VideoCard"; -// TODO move to frontend package +interface IFeedCard { + item: TSuperfeedItem; + selectedPodcast: TSuperfeedItem | null; + setSelectedPodcast: React.Dispatch< + React.SetStateAction + >; +} -export const FeedCard: FC<{ item: IFeedItem }> = ({ item }) => { +export const FeedCard: FC = ({ + item, + selectedPodcast, + setSelectedPodcast, +}) => { switch (item.type) { case EFeedItemType.NEWS: return ; @@ -24,7 +34,13 @@ export const FeedCard: FC<{ item: IFeedItem }> = ({ item }) => { case EFeedItemType.VIDEO: return ; case EFeedItemType.PODCAST: - return ; + return ( + + ); case EFeedItemType.EVENT: return ; case EFeedItemType.MEME: diff --git a/packages/ui-kit/src/mobile-components/superfeed/FeedElements.tsx b/packages/frontend/src/mobile-components/feed/FeedElements.tsx similarity index 96% rename from packages/ui-kit/src/mobile-components/superfeed/FeedElements.tsx rename to packages/frontend/src/mobile-components/feed/FeedElements.tsx index 3dcd6b95..7a260c94 100644 --- a/packages/ui-kit/src/mobile-components/superfeed/FeedElements.tsx +++ b/packages/frontend/src/mobile-components/feed/FeedElements.tsx @@ -1,12 +1,11 @@ import { FC, ReactNode } from "react"; -import { Disclosure, Transition } from "@headlessui/react"; +import { Disclosure, Transition, twMerge } from "@alphaday/ui-kit"; import { ReactComponent as CommentSVG } from "src/assets/svg/comment.svg"; import { ReactComponent as LikeSVG } from "src/assets/svg/like.svg"; import { ReactComponent as LikedSVG } from "src/assets/svg/liked.svg"; import { ReactComponent as ShareSVG } from "src/assets/svg/share.svg"; +import { ActionButton, TagButton } from "src/mobile-components/button/buttons"; import { imgOnError } from "src/utils/errorHandling"; -import { twMerge } from "tailwind-merge"; -import { ActionButton, TagButton } from "../button/buttons"; export const ActionButtons: FC<{ onLike: () => void; diff --git a/packages/ui-kit/src/mobile-components/superfeed/FeedItem.module.scss b/packages/frontend/src/mobile-components/feed/FeedItem.module.scss similarity index 100% rename from packages/ui-kit/src/mobile-components/superfeed/FeedItem.module.scss rename to packages/frontend/src/mobile-components/feed/FeedItem.module.scss diff --git a/packages/ui-kit/src/mobile-components/superfeed/ImageCard.tsx b/packages/frontend/src/mobile-components/feed/ImageCard.tsx similarity index 96% rename from packages/ui-kit/src/mobile-components/superfeed/ImageCard.tsx rename to packages/frontend/src/mobile-components/feed/ImageCard.tsx index e521e9d7..3748e967 100644 --- a/packages/ui-kit/src/mobile-components/superfeed/ImageCard.tsx +++ b/packages/frontend/src/mobile-components/feed/ImageCard.tsx @@ -1,6 +1,7 @@ import { FC } from "react"; +import { twMerge } from "@alphaday/ui-kit"; +import { TSuperfeedItem } from "src/api/types"; import { imgOnError } from "src/utils/errorHandling"; -import { twMerge } from "tailwind-merge"; import { ActionButtons, CardTitle, @@ -10,9 +11,9 @@ import { FeedItemDisclosurePanel, TagButtons, } from "./FeedElements"; -import { IFeedItem, feedItemIconMap } from "./types"; +import { feedItemIconMap } from "./types"; -export const ImageCard: FC<{ item: IFeedItem }> = ({ item }) => { +export const ImageCard: FC<{ item: TSuperfeedItem }> = ({ item }) => { const { title, tags, diff --git a/packages/ui-kit/src/mobile-components/superfeed/LineChart.tsx b/packages/frontend/src/mobile-components/feed/LineChart.tsx similarity index 99% rename from packages/ui-kit/src/mobile-components/superfeed/LineChart.tsx rename to packages/frontend/src/mobile-components/feed/LineChart.tsx index d5b350cc..9a0d3b23 100644 --- a/packages/ui-kit/src/mobile-components/superfeed/LineChart.tsx +++ b/packages/frontend/src/mobile-components/feed/LineChart.tsx @@ -1,10 +1,10 @@ import { FC, memo } from "react"; +import { twMerge } from "@alphaday/ui-kit"; import moment from "moment"; import { ApexAreaChart } from "src/components/charts/apexchart"; import { Spinner } from "src/components/spinner/Spinner"; import { darkColors } from "src/globalStyles/colors"; import { renderToString } from "src/utils/textUtils"; -import { twMerge } from "tailwind-merge"; type IProps = { data: number[][]; diff --git a/packages/ui-kit/src/mobile-components/superfeed/NewsCard.tsx b/packages/frontend/src/mobile-components/feed/NewsCard.tsx similarity index 97% rename from packages/ui-kit/src/mobile-components/superfeed/NewsCard.tsx rename to packages/frontend/src/mobile-components/feed/NewsCard.tsx index d781b74e..b0cd5a6e 100644 --- a/packages/ui-kit/src/mobile-components/superfeed/NewsCard.tsx +++ b/packages/frontend/src/mobile-components/feed/NewsCard.tsx @@ -1,4 +1,5 @@ import { FC } from "react"; +import { TSuperfeedItem } from "src/api/types"; import { computeDuration } from "src/utils/dateUtils"; import { ActionButtons, @@ -11,9 +12,9 @@ import { FeedSourceInfo, TagButtons, } from "./FeedElements"; -import { IFeedItem, feedItemIconMap } from "./types"; +import { feedItemIconMap } from "./types"; -export const NewsCard: FC<{ item: IFeedItem }> = ({ item }) => { +export const NewsCard: FC<{ item: TSuperfeedItem }> = ({ item }) => { const { title, tags, diff --git a/packages/frontend/src/mobile-components/feed/PodcastCard.tsx b/packages/frontend/src/mobile-components/feed/PodcastCard.tsx new file mode 100644 index 00000000..172e5b32 --- /dev/null +++ b/packages/frontend/src/mobile-components/feed/PodcastCard.tsx @@ -0,0 +1,280 @@ +import { FC } from "react"; +import { twMerge } from "@alphaday/ui-kit"; +import { useAudioPlayer, useAudioPosition } from "react-use-audio-player"; +import { TSuperfeedItem } from "src/api/types"; +import { ReactComponent as SpinnerSVG } from "src/assets/icons/spinners.svg"; +import { ReactComponent as PauseSVG } from "src/assets/svg/pause2.svg"; +import { ReactComponent as PlaySVG } from "src/assets/svg/play-audio.svg"; +import { ReactComponent as SkipBackwardSVG } from "src/assets/svg/skip-backward.svg"; +import { ReactComponent as SkipForwardSVG } from "src/assets/svg/skip-forward.svg"; +import { computeDuration } from "src/utils/dateUtils"; +import { imgOnError } from "src/utils/errorHandling"; +import { + ActionButtons, + CardTitle, + FeedItemDisclosure, + FeedItemDisclosureButton, + FeedItemDisclosureButtonImage, + FeedItemDisclosurePanel, + FeedSourceInfo, + TagButtons, +} from "./FeedElements"; +import { feedItemIconMap } from "./types"; + +interface IPodcastCard { + item: TSuperfeedItem; + selectedPodcast: TSuperfeedItem | null; + setSelectedPodcast: React.Dispatch< + React.SetStateAction + >; +} + +const PlayPauseButton: FC<{ + isPlaying: boolean; + className?: string; +}> = ({ isPlaying, className }) => { + return isPlaying ? ( + + ) : ( + + ); +}; + +const parseProgressTime = (count: number) => + `${Math.floor(count / 60).toLocaleString("en-US", { + minimumIntegerDigits: 2, + useGrouping: false, + })}:${Math.floor(count % 60).toLocaleString("en-US", { + minimumIntegerDigits: 2, + useGrouping: false, + })}`; + +export const PodcastCard: FC = ({ + item, + selectedPodcast, + setSelectedPodcast, +}) => { + const { + title, + tags, + likes, + comments, + sourceName, + sourceIcon, + date, + url, + image, + type, + shortDescription, + duration, + } = item; + + const { + duration: currentDuration, + percentComplete, + position, + seek, + } = useAudioPosition(); + const { + togglePlayPause, + ready: isAudioReady, + loading: isAudioLoading, + playing: isAudioPlaying, + } = useAudioPlayer({ + src: selectedPodcast?.fileUrl, + format: "mp3", + autoplay: true, + html5: true, + }); + + const setPosition = (count: number) => { + seek(position + count); + }; + + const isSelected = selectedPodcast?.id === item.id; + + const isReady = isAudioReady && isSelected; + const isLoading = isAudioLoading && isSelected; + const isPlaying = isAudioPlaying && isSelected; + + const handlePlay = (e: React.MouseEvent, open: boolean) => { + if (!open || (open && !isReady)) e.stopPropagation(); + setSelectedPodcast(item); + togglePlayPause(); + }; + + const onLike = () => {}; + const isLiked = false; + + return ( + + {({ open }) => ( + <> + +
+
+
+
+ +
+

+ {computeDuration(date)} + + • + {" "} + {" "} +

+
+
+ + {isReady && open ? undefined : ( +
handlePlay(e, open)} + role="button" + tabIndex={0} + > + {isLoading && selectedPodcast ? ( + + ) : ( + + )} + + {duration} + +
+ )} +
+ +
+
+ +
+
+
+ {!open && ( +
+
+ {}} + /> +
+
+ +
+
+ )} +
+ + + {isReady && ( +
+ setPosition(15)} + className="w-6 h-6 text-primaryVariant100 hover:text-primary" + /> +
+
+
+
+ setPosition(-15)} + className="w-6 h-6 text-primaryVariant100 hover:text-primary" + /> + + {parseProgressTime(position)} /{" "} + {parseProgressTime(currentDuration)} + + + + +
+ )} +

+ {shortDescription} +

+ + Read more + +
+ {}} /> +
+ +
+
+ + + )} + + ); +}; diff --git a/packages/ui-kit/src/mobile-components/superfeed/PriceCard.tsx b/packages/frontend/src/mobile-components/feed/PriceCard.tsx similarity index 96% rename from packages/ui-kit/src/mobile-components/superfeed/PriceCard.tsx rename to packages/frontend/src/mobile-components/feed/PriceCard.tsx index 5407bd42..afe637cf 100644 --- a/packages/ui-kit/src/mobile-components/superfeed/PriceCard.tsx +++ b/packages/frontend/src/mobile-components/feed/PriceCard.tsx @@ -1,5 +1,6 @@ import { FC } from "react"; -import { twMerge } from "tailwind-merge"; +import { twMerge } from "@alphaday/ui-kit"; +import { EFeedItemType, TSuperfeedItem } from "src/api/types"; import { ActionButtons, CardTitle, @@ -11,9 +12,9 @@ import { TagButtons, } from "./FeedElements"; // import LineChart from "./LineChart"; -import { EFeedItemType, IFeedItem, feedItemIconMap } from "./types"; +import { feedItemIconMap } from "./types"; -export const PriceCard: FC<{ item: IFeedItem }> = ({ item }) => { +export const PriceCard: FC<{ item: TSuperfeedItem }> = ({ item }) => { const isTVL = item.type === EFeedItemType.TVL; // const price = isTVL ? item.tvl : item.price; diff --git a/packages/ui-kit/src/mobile-components/superfeed/SocialCard.tsx b/packages/frontend/src/mobile-components/feed/SocialCard.tsx similarity index 96% rename from packages/ui-kit/src/mobile-components/superfeed/SocialCard.tsx rename to packages/frontend/src/mobile-components/feed/SocialCard.tsx index 73b9f59f..39c4c0db 100644 --- a/packages/ui-kit/src/mobile-components/superfeed/SocialCard.tsx +++ b/packages/frontend/src/mobile-components/feed/SocialCard.tsx @@ -1,7 +1,8 @@ import { FC } from "react"; +import { twMerge } from "@alphaday/ui-kit"; +import { TSuperfeedItem } from "src/api/types"; import { computeDuration } from "src/utils/dateUtils"; import { imgOnError } from "src/utils/errorHandling"; -import { twMerge } from "tailwind-merge"; import { ActionButtons, CardTitle, @@ -12,9 +13,9 @@ import { FeedSourceInfo, TagButtons, } from "./FeedElements"; -import { IFeedItem, feedItemIconMap } from "./types"; +import { feedItemIconMap } from "./types"; -export const SocialCard: FC<{ item: IFeedItem }> = ({ item }) => { +export const SocialCard: FC<{ item: TSuperfeedItem }> = ({ item }) => { const { title, tags, diff --git a/packages/ui-kit/src/mobile-components/superfeed/VideoCard.tsx b/packages/frontend/src/mobile-components/feed/VideoCard.tsx similarity index 75% rename from packages/ui-kit/src/mobile-components/superfeed/VideoCard.tsx rename to packages/frontend/src/mobile-components/feed/VideoCard.tsx index d39a8513..c119b7ed 100644 --- a/packages/ui-kit/src/mobile-components/superfeed/VideoCard.tsx +++ b/packages/frontend/src/mobile-components/feed/VideoCard.tsx @@ -1,4 +1,5 @@ -import { FC, MouseEventHandler } from "react"; +import { FC, MouseEventHandler, useEffect, useRef } from "react"; +import { TSuperfeedItem } from "src/api/types"; import { ReactComponent as PlaySVG } from "src/assets/svg/play-video.svg"; import { computeDuration } from "src/utils/dateUtils"; import { imgOnError } from "src/utils/errorHandling"; @@ -12,7 +13,7 @@ import { FeedSourceInfo, TagButtons, } from "./FeedElements"; -import { IFeedItem, feedItemIconMap } from "./types"; +import { feedItemIconMap } from "./types"; const VideoPlaceholder: FC<{ url: string | undefined; @@ -32,7 +33,7 @@ const VideoPlaceholder: FC<{
); -export const VideoCard: FC<{ item: IFeedItem }> = ({ item }) => { +export const VideoCard: FC<{ item: TSuperfeedItem }> = ({ item }) => { const { title, tags, @@ -50,6 +51,22 @@ export const VideoCard: FC<{ item: IFeedItem }> = ({ item }) => { const onLike = () => {}; const isLiked = false; + /** + * Before the iframe loads the browser displays a white page. + * For that reason we set its visibility to hidden until it loads + */ + const frameRef = useRef(null); + + useEffect(() => { + const timeout = setTimeout(() => { + // in case onLoad didn't fire, check visibility after some time + if (frameRef.current?.style?.visibility === "hidden") { + frameRef.current.style.visibility = "visible"; + } + }, 60 * 1000); + return () => clearTimeout(timeout); + }, []); + return ( {({ open }) => ( @@ -110,14 +127,27 @@ export const VideoCard: FC<{ item: IFeedItem }> = ({ item }) => {
- -

+

+