chore: Superfeed Podcasts & Video (#239)

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: {

packages/frontend/src/api/types/superfeed.ts

@@ -52,4 +52,6 @@ export type TSuperfeedItem = Omit<TBaseItem, "bookmarked"> & {
     tags: { name: string; slug: string }[];
     likes: number;
     comments: number;
+    fileUrl: string | null;
+    duration: string | null;
 };

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<TSuperfeedItem | null>
+    >;
 }
 
 const FiltersButton: FC<{ toggleShowFeedFilters: () => void }> = ({
@@ -56,6 +62,8 @@ const SuperfeedModule: FC<ISuperfeedModule> = ({
     feed,
     handlePaginate,
     toggleShowFeedFilters,
+    selectedPodcast,
+    setSelectedPodcast,
 }) => {
     const handleScrollEvent = useCallback(
         ({ currentTarget }: FormEvent<HTMLElement>) => {
@@ -72,9 +80,16 @@ const SuperfeedModule: FC<ISuperfeedModule> = ({
     return (
         <ScrollBar onScroll={handleScrollEvent} className="w-full px-5 pt-4">
             <FiltersButton toggleShowFeedFilters={toggleShowFeedFilters} />
-            {feed.map((item) => (
-                <FeedCard key={item.id} item={item} />
-            ))}
+            <AudioPlayerProvider>
+                {feed.map((item) => (
+                    <FeedCard
+                        key={item.id}
+                        item={item}
+                        selectedPodcast={selectedPodcast}
+                        setSelectedPodcast={setSelectedPodcast}
+                    />
+                ))}
+            </AudioPlayerProvider>
         </ScrollBar>
     );
 };

packages/ui-kit/src/mobile-components/superfeed/BlogCard.tsx → 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,

packages/ui-kit/src/mobile-components/superfeed/EventCard.tsx → 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,

packages/ui-kit/src/mobile-components/superfeed/FeedCard.tsx → packages/frontend/src/mobile-components/feed/FeedCard.tsx

@@ -1,17 +1,27 @@
 import { FC } from "react";
+import { EFeedItemType, TSuperfeedItem } from "src/api/types";
 import { BlogCard } from "./BlogCard";
 import { EventCard } from "./EventCard";
 import { ImageCard } from "./ImageCard";
 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<TSuperfeedItem | null>
+    >;
+}
 
-export const FeedCard: FC<{ item: IFeedItem }> = ({ item }) => {
+export const FeedCard: FC<IFeedCard> = ({
+    item,
+    selectedPodcast,
+    setSelectedPodcast,
+}) => {
     switch (item.type) {
         case EFeedItemType.NEWS:
             return <NewsCard item={item} />;
@@ -24,7 +34,13 @@ export const FeedCard: FC<{ item: IFeedItem }> = ({ item }) => {
         case EFeedItemType.VIDEO:
             return <VideoCard item={item} />;
         case EFeedItemType.PODCAST:
-            return <PodcastCard item={item} />;
+            return (
+                <PodcastCard
+                    item={item}
+                    selectedPodcast={selectedPodcast}
+                    setSelectedPodcast={setSelectedPodcast}
+                />
+            );
         case EFeedItemType.EVENT:
             return <EventCard item={item} />;
         case EFeedItemType.MEME:

packages/ui-kit/src/mobile-components/superfeed/FeedElements.tsx → 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;

packages/ui-kit/src/mobile-components/superfeed/ImageCard.tsx → 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,

packages/ui-kit/src/mobile-components/superfeed/LineChart.tsx → 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[][];

packages/ui-kit/src/mobile-components/superfeed/NewsCard.tsx → 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,