From 3b552010b394de4061ee69ce8a1410d4a5aab468 Mon Sep 17 00:00:00 2001 From: sktbrd Date: Fri, 30 Aug 2024 12:27:48 -0300 Subject: [PATCH 01/27] changed min-width and clean console.logs --- src/fidgets/ui/Links.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/fidgets/ui/Links.tsx b/src/fidgets/ui/Links.tsx index 4310b900..8d9dfc36 100644 --- a/src/fidgets/ui/Links.tsx +++ b/src/fidgets/ui/Links.tsx @@ -66,7 +66,7 @@ export const linkConfig: FidgetProperties = { }, { fieldName: "viewMode", - default: "grid", + default: "list", required: false, inputSelector: SwitchButton, group: "style", @@ -129,9 +129,9 @@ export const linkConfig: FidgetProperties = { }, ], size: { - minHeight: 1, + minHeight: 2, maxHeight: 36, - minWidth: 4, + minWidth: 2, maxWidth: 36, }, }; @@ -141,12 +141,7 @@ export const Links: React.FC> = ({ }) => { const links = Array.isArray(settings.links) ? settings.links : []; const isGridView = settings.viewMode === "grid"; - useEffect(() => { - console.log("Links fidget settings:", settings.links); - }, [settings.links]); - useEffect(() => { - console.log("Links fidget settings:", settings.links); - }, [settings.links]); + return (
Date: Fri, 30 Aug 2024 12:28:12 -0300 Subject: [PATCH 02/27] clean unused import --- src/fidgets/ui/Links.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/fidgets/ui/Links.tsx b/src/fidgets/ui/Links.tsx index 8d9dfc36..1ddee40f 100644 --- a/src/fidgets/ui/Links.tsx +++ b/src/fidgets/ui/Links.tsx @@ -4,7 +4,6 @@ import CSSInput from "@/common/components/molecules/CSSInput"; import ColorSelector from "@/common/components/molecules/ColorSelector"; import FontSelector from "@/common/components/molecules/FontSelector"; import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets"; -import { defaultStyleFields } from "../helpers"; import { FidgetSettingsStyle } from "@/common/fidgets"; import { CardHeader, From f216c19330c485b6e9286bcb23fb9bac034bde41 Mon Sep 17 00:00:00 2001 From: sktbrd Date: Fri, 30 Aug 2024 12:50:48 -0300 Subject: [PATCH 03/27] Links description Colors, replace avatar url --- .../components/molecules/LinksInput.tsx | 6 ++--- src/fidgets/ui/Links.tsx | 23 ++++++++++++++----- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/common/components/molecules/LinksInput.tsx b/src/common/components/molecules/LinksInput.tsx index c2a69a27..72889495 100644 --- a/src/common/components/molecules/LinksInput.tsx +++ b/src/common/components/molecules/LinksInput.tsx @@ -94,12 +94,12 @@ const LinksInput = forwardRef( const newLink = { text: "New Link", url: "https://", - avatar: "/images/chainEmoji.png", + avatar: "https://www.nounspace.com/images/chainEmoji.png", description: "Description", }; onChange?.([...value, newLink]); - setVisibleFields([...visibleFields, true]); // Automatically expand new link + setVisibleFields([...visibleFields, true]); }; const removeLink = (index: number) => { @@ -133,7 +133,7 @@ const LinksInput = forwardRef( value={link.url} onChange={(e: any) => { handleLinkChange(index, { ...link, url: e.target.value }); - showAdditionalFields(index); // Show fields when URL is updated + showAdditionalFields(index); }} /> diff --git a/src/fidgets/ui/Links.tsx b/src/fidgets/ui/Links.tsx index 1ddee40f..1a94533d 100644 --- a/src/fidgets/ui/Links.tsx +++ b/src/fidgets/ui/Links.tsx @@ -36,6 +36,8 @@ export type LinkFidgetSettings = { itemBackground: string; viewMode: ViewMode; description?: string; + DescriptionColor: string; + HeaderColor: string; } & FidgetSettingsStyle; export const linkConfig: FidgetProperties = { @@ -55,7 +57,7 @@ export const linkConfig: FidgetProperties = { { text: "Nouns", url: "https://nouns.wtf", - avatar: "/images/nouns.svg", + avatar: "https://nouns.wtf/static/media/noggles.7644bfd0.svg", description: "Funds ideas", }, ], @@ -78,7 +80,14 @@ export const linkConfig: FidgetProperties = { group: "style", }, { - fieldName: "fontColor", + fieldName: "HeaderColor", + default: "black", + required: false, + inputSelector: ColorSelector, + group: "style", + }, + { + fieldName: "DescriptionColor", default: "black", required: false, inputSelector: ColorSelector, @@ -153,6 +162,7 @@ export const Links: React.FC> = ({ overflow: "auto", scrollbarWidth: "none", padding: "0.5rem", + borderRadius: "1rem", }} > {settings?.title && ( @@ -161,7 +171,7 @@ export const Links: React.FC> = ({ className="text-2xl font-bold" style={{ fontFamily: settings.headingsFontFamily, - color: settings.fontColor, + color: settings.HeaderColor, }} > {settings.title} @@ -223,12 +233,12 @@ export const Links: React.FC> = ({ className="items-start text-base font-normal text-black dark:text-white flex-grow" style={{ fontFamily: settings.fontFamily, - color: settings.fontColor, + color: settings.HeaderColor, textAlign: "left", wordWrap: "break-word", overflow: "hidden", textOverflow: "ellipsis", - maxHeight: "3rem", // Adjust this value to limit the height of the text + maxHeight: "3rem", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", @@ -242,11 +252,12 @@ export const Links: React.FC> = ({ {link.description && (

{link.description} From e87db7f963c5f799806e1d9e9a3aae395500521a Mon Sep 17 00:00:00 2001 From: sktbrd Date: Fri, 30 Aug 2024 13:12:25 -0300 Subject: [PATCH 04/27] Links input handling focus --- src/common/components/molecules/LinksInput.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/common/components/molecules/LinksInput.tsx b/src/common/components/molecules/LinksInput.tsx index 72889495..b0cdfb69 100644 --- a/src/common/components/molecules/LinksInput.tsx +++ b/src/common/components/molecules/LinksInput.tsx @@ -135,6 +135,7 @@ const LinksInput = forwardRef( handleLinkChange(index, { ...link, url: e.target.value }); showAdditionalFields(index); }} + onFocus={() => showAdditionalFields(index)} />

Date: Sun, 1 Sep 2024 13:47:19 -0500 Subject: [PATCH 05/27] should fix initial feed settings (#391) --- src/fidgets/farcaster/Feed.tsx | 2 +- src/pages/homebase/index.tsx | 4 ++-- supabase/migrations/20240821215436_spaceOrderings.sql | 2 -- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/fidgets/farcaster/Feed.tsx b/src/fidgets/farcaster/Feed.tsx index 66b6d37d..b901e66b 100644 --- a/src/fidgets/farcaster/Feed.tsx +++ b/src/fidgets/farcaster/Feed.tsx @@ -109,7 +109,7 @@ const feedProperties: FidgetProperties = { displayName: "Username", inputSelector: TextInput, required: false, - disabledIf: (settings) => settings.selectPlatform.name === "Farcaster", + disabledIf: (settings) => settings.selectPlatform.name === "farcaster", default: "thenounspace", }, { diff --git a/src/pages/homebase/index.tsx b/src/pages/homebase/index.tsx index 958c1841..4e9d4031 100644 --- a/src/pages/homebase/index.tsx +++ b/src/pages/homebase/index.tsx @@ -65,8 +65,8 @@ const Homebase: NextPageWithLayout = () => { args.feed = ( Date: Sun, 1 Sep 2024 13:50:55 -0500 Subject: [PATCH 06/27] Feed fix (#392) --- src/fidgets/farcaster/Feed.tsx | 4 ++-- src/pages/homebase/index.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/fidgets/farcaster/Feed.tsx b/src/fidgets/farcaster/Feed.tsx index b901e66b..3658d051 100644 --- a/src/fidgets/farcaster/Feed.tsx +++ b/src/fidgets/farcaster/Feed.tsx @@ -93,7 +93,7 @@ const feedProperties: FidgetProperties = { displayName: "Select App", inputSelector: PlatformSelector, required: false, - default: { name: "farcaster", icon: "/images/farcaster.jpeg" }, + default: { name: "Farcaster", icon: "/images/farcaster.jpeg" }, }, { fieldName: "feedType", @@ -206,7 +206,7 @@ export const FEED_TYPES = [ const Feed: React.FC> = ({ settings }) => { const { - selectPlatform = { name: "farcaster", icon: "/images/farcaster.jpeg" }, + selectPlatform = { name: "Farcaster", icon: "/images/farcaster.jpeg" }, Xhandle, style, } = settings; diff --git a/src/pages/homebase/index.tsx b/src/pages/homebase/index.tsx index 4e9d4031..232610b4 100644 --- a/src/pages/homebase/index.tsx +++ b/src/pages/homebase/index.tsx @@ -68,7 +68,7 @@ const Homebase: NextPageWithLayout = () => { feedType: FeedType.Following, users: "", filterType: FilterType.Users, - selectPlatform: { name: "farcaster", icon: "/images/farcaster.jpeg" }, + selectPlatform: { name: "Farcaster", icon: "/images/farcaster.jpeg" }, Xhandle: "", style: "", }} From 56b7d3c2c58ce991fa30203750c2e6dbe28d6012 Mon Sep 17 00:00:00 2001 From: Vlad 2 <116202536+sktbrd@users.noreply.github.com> Date: Tue, 3 Sep 2024 18:41:36 -0300 Subject: [PATCH 07/27] =?UTF-8?q?link=20=E2=8C=90=E2=97=A8-=E2=97=A8=20log?= =?UTF-8?q?o=20to=20@wtfisnouns=20space=20(#395)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Willy Ogorzaly --- src/common/components/molecules/BrandHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/components/molecules/BrandHeader.tsx b/src/common/components/molecules/BrandHeader.tsx index 260bc12c..828c32d5 100644 --- a/src/common/components/molecules/BrandHeader.tsx +++ b/src/common/components/molecules/BrandHeader.tsx @@ -18,7 +18,7 @@ const BrandHeader = () => { From 1ed504a9906ed3f20b74ad07c905a7aa9c1345ff Mon Sep 17 00:00:00 2001 From: Vlad 2 <116202536+sktbrd@users.noreply.github.com> Date: Wed, 4 Sep 2024 16:59:24 -0300 Subject: [PATCH 08/27] the whole link card is clicable now (#379) --- src/fidgets/ui/Links.tsx | 103 +++++++++++++++++++++------------------ 1 file changed, 56 insertions(+), 47 deletions(-) diff --git a/src/fidgets/ui/Links.tsx b/src/fidgets/ui/Links.tsx index 1a94533d..0e949c31 100644 --- a/src/fidgets/ui/Links.tsx +++ b/src/fidgets/ui/Links.tsx @@ -182,53 +182,62 @@ export const Links: React.FC> = ({

{links.length > 0 && links.map((link, index) => ( - - {link.avatar ? ( - - - - {link.text} - - - ) : ( - - - - {link.text} - - - )} + + {link.avatar ? ( + + + + {link.text} + + + ) : ( + + + + {link.text} + + + )} - + + ))}
From 123a019765dc2251746bc694faf5bb975070574b Mon Sep 17 00:00:00 2001 From: Gleb Surinov Date: Thu, 5 Sep 2024 02:00:08 +0600 Subject: [PATCH 09/27] fix: Hydration error for space loading (#369) --- src/common/components/templates/SpaceLoading.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/common/components/templates/SpaceLoading.tsx b/src/common/components/templates/SpaceLoading.tsx index 992fbc97..dd49d653 100644 --- a/src/common/components/templates/SpaceLoading.tsx +++ b/src/common/components/templates/SpaceLoading.tsx @@ -1,15 +1,17 @@ -import React, { ReactNode, useMemo } from "react"; +import React, { ReactNode, useState, useEffect } from "react"; import { isUndefined } from "lodash"; import useWindowSize from "@/common/lib/hooks/useWindowSize"; export default function SpaceLoading({ profile }: { profile?: ReactNode }) { + const [rowHeight, setRowHeight] = useState(70); + const { height } = useWindowSize(); const maxRows = 12; const cols = 12; const margin = [16, 16]; const containerPadding = [16, 16]; - const { height } = useWindowSize(); - const rowHeight = useMemo( - () => + + useEffect(() => { + setRowHeight( height ? Math.round( // The 64 magic number here is the height of the tabs bar above the grid @@ -17,8 +19,9 @@ export default function SpaceLoading({ profile }: { profile?: ReactNode }) { maxRows, ) : 70, - [height], - ); + ), + [height]; + }); return ( <> From 8b077b97f219f330f6c3d8dcf82a8ba08dcbed5e Mon Sep 17 00:00:00 2001 From: Gustavo Kuhl Date: Wed, 4 Sep 2024 17:53:03 -0300 Subject: [PATCH 10/27] feat: add table fidget file --- src/fidgets/index.ts | 2 + src/fidgets/ui/Table.tsx | 143 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 145 insertions(+) create mode 100644 src/fidgets/ui/Table.tsx diff --git a/src/fidgets/index.ts b/src/fidgets/index.ts index bb5c83c0..95cdc088 100644 --- a/src/fidgets/index.ts +++ b/src/fidgets/index.ts @@ -12,6 +12,7 @@ import Feed from "./farcaster/Feed"; import CreateCast from "./farcaster/CreateCast"; import Links from "./ui/Links"; import snapShot from "./snapshot/SnapShot"; +import Table from "./ui/Table"; export const CompleteFidgets = { // @@ -33,6 +34,7 @@ export const CompleteFidgets = { links: Links, // zora: zoraEmbed, -> 500 server error -Frame ancestors block SnapShot: snapShot, + Table: Table, }; export const LayoutFidgets = { diff --git a/src/fidgets/ui/Table.tsx b/src/fidgets/ui/Table.tsx new file mode 100644 index 00000000..b798e470 --- /dev/null +++ b/src/fidgets/ui/Table.tsx @@ -0,0 +1,143 @@ +import React from "react"; +import TextInput from "@/common/components/molecules/TextInput"; +import CSSInput from "@/common/components/molecules/CSSInput"; +import ColorSelector from "@/common/components/molecules/ColorSelector"; +import FontSelector from "@/common/components/molecules/FontSelector"; +import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets"; +import ReactMarkdown from "react-markdown"; +import rehypeRaw from "rehype-raw"; +import remarkGfm from "remark-gfm"; +import { defaultStyleFields } from "../helpers"; +import { FidgetSettingsStyle } from "@/common/fidgets"; +import { + CardHeader, + CardContent, + CardTitle, + CardDescription, +} from "@/common/components/atoms/card"; +import { MarkdownRenderers } from "@/common/lib/utils/markdownRenderers"; + +export type TableFidgetSettings = { + title?: string; + table: string; +} & FidgetSettingsStyle; + +export const tableConfig: FidgetProperties = { + fidgetName: "Table", + icon: 0x1f4c4, + fields: [ + { + fieldName: "title", + default: "Table Fidget", + required: false, + inputSelector: TextInput, + group: "settings", + }, + { + fieldName: "table", + default: "Jot down your ideas and grow them.", + required: true, + inputSelector: CSSInput, + group: "settings", + }, + { + fieldName: "fontFamily", + default: "var(--user-theme-font)", + required: false, + inputSelector: FontSelector, + group: "style", + }, + { + fieldName: "fontColor", + default: "var(--user-theme-font-color)", + required: false, + inputSelector: ColorSelector, + group: "style", + }, + { + fieldName: "headingsFontFamily", + default: "var(--user-theme-headings-font)", + required: false, + inputSelector: FontSelector, + group: "style", + }, + { + fieldName: "headingsFontColor", + default: "var(--user-theme-headings-font-color)", + required: false, + inputSelector: ColorSelector, + group: "style", + }, + ...defaultStyleFields, + { + fieldName: "css", + default: "", + required: false, + inputSelector: CSSInput, + group: "code", + }, + ], + size: { + minHeight: 2, + maxHeight: 36, + minWidth: 3, + maxWidth: 36, + }, +}; + +export const Table: React.FC> = ({ + settings, +}) => { + return ( + + ); +}; + +export default { + fidget: Table, + properties: tableConfig, +} as FidgetModule>; From 9ba49616ed113ebee5cad179129a52aeb8b7c6d1 Mon Sep 17 00:00:00 2001 From: Gustavo Kuhl Date: Wed, 4 Sep 2024 18:59:23 -0300 Subject: [PATCH 11/27] feat: add csv parser and table display --- package.json | 1 + src/fidgets/ui/Table.tsx | 110 ++++++++++++++++++++++++++++++++------- yarn.lock | 36 +++---------- 3 files changed, 101 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index 028206c7..a97d5545 100644 --- a/package.json +++ b/package.json @@ -119,6 +119,7 @@ "neverthrow": "^6.2.2", "next": "14.1", "next-themes": "^0.3.0", + "papaparse": "^5.4.1", "pino-pretty": "^11.2.0", "prop-types": "^15.8.1", "radix-colors-for-tailwind": "^2.0.0", diff --git a/src/fidgets/ui/Table.tsx b/src/fidgets/ui/Table.tsx index b798e470..4c25bf7b 100644 --- a/src/fidgets/ui/Table.tsx +++ b/src/fidgets/ui/Table.tsx @@ -1,14 +1,13 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import TextInput from "@/common/components/molecules/TextInput"; import CSSInput from "@/common/components/molecules/CSSInput"; import ColorSelector from "@/common/components/molecules/ColorSelector"; import FontSelector from "@/common/components/molecules/FontSelector"; import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets"; import ReactMarkdown from "react-markdown"; -import rehypeRaw from "rehype-raw"; -import remarkGfm from "remark-gfm"; import { defaultStyleFields } from "../helpers"; import { FidgetSettingsStyle } from "@/common/fidgets"; +import Papa from "papaparse"; import { CardHeader, CardContent, @@ -16,6 +15,7 @@ import { CardDescription, } from "@/common/components/atoms/card"; import { MarkdownRenderers } from "@/common/lib/utils/markdownRenderers"; +import BorderSelector from "@/common/components/molecules/BorderSelector"; export type TableFidgetSettings = { title?: string; @@ -35,7 +35,18 @@ export const tableConfig: FidgetProperties = { }, { fieldName: "table", - default: "Jot down your ideas and grow them.", + default: `"Game Number", "Game Length" +1, 30 +2, 29 +3, 31 +4, 16 +5, 24 +6, 29 +7, 28 +8, 117 +9, 42 +10, 23 +`, required: true, inputSelector: CSSInput, group: "settings", @@ -68,6 +79,27 @@ export const tableConfig: FidgetProperties = { inputSelector: ColorSelector, group: "style", }, + { + fieldName: "tableBackground", + default: "var(--user-theme-fidget-background)", + required: false, + inputSelector: ColorSelector, + group: "style", + }, + { + fieldName: "tableBorderWidth", + default: "1", + required: false, + inputSelector: BorderSelector, + group: "style", + }, + { + fieldName: "tableBorderColor", + default: "var(--user-theme-fidget-border-color)", + required: false, + inputSelector: ColorSelector, + group: "style", + }, ...defaultStyleFields, { fieldName: "css", @@ -88,6 +120,24 @@ export const tableConfig: FidgetProperties = { export const Table: React.FC> = ({ settings, }) => { + const [tableData, setTableData] = useState([]); + + const parseCSV = (data) => { + Papa.parse(data, { + header: true, + skipEmptyLines: true, + complete: function (results) { + setTableData(results.data); + }, + }); + }; + + useEffect(() => { + parseCSV(settings.table); + }, [settings.table]); + + const headers = tableData.length > 0 ? Object.keys(tableData[0]) : []; + return (
> = ({ height: "100%", borderWidth: settings.fidgetBorderWidth, borderColor: settings.fidgetBorderColor, - // Not visible because of the outer div having overflow: hidden boxShadow: settings.fidgetShadow, - overflow: "auto", + overflow: "scroll", scrollbarWidth: "none", }} > @@ -116,21 +165,46 @@ export const Table: React.FC> = ({ )} {settings?.table && ( - - - {settings.table} - - + + + {headers.map((header, index) => ( + + {header} + + ))} + + + + {tableData.map((row, rowIndex) => ( + + {headers.map((header, index) => ( + + {row[header]} + + ))} + + ))} + + )}
diff --git a/yarn.lock b/yarn.lock index 05a6ecef..b4785116 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12670,6 +12670,11 @@ pako@^0.2.5: resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75" integrity sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA== +papaparse@^5.4.1: + version "5.4.1" + resolved "https://registry.yarnpkg.com/papaparse/-/papaparse-5.4.1.tgz#f45c0f871853578bd3a30f92d96fdcfb6ebea127" + integrity sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw== + parent-module@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2" @@ -14660,16 +14665,7 @@ string-argv@~0.3.2: resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6" integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -14778,14 +14774,7 @@ stringify-object@^3.2.1: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -16145,7 +16134,7 @@ word-wrap@^1.2.5: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -16163,15 +16152,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 4d13b6920c079d09c8f8facbf96c9b2c406236ba Mon Sep 17 00:00:00 2001 From: Gustavo Kuhl Date: Wed, 4 Sep 2024 20:34:25 -0300 Subject: [PATCH 12/27] feat: add copy button --- src/fidgets/ui/Table.tsx | 131 ++++++++++++++++++++++++--------------- 1 file changed, 82 insertions(+), 49 deletions(-) diff --git a/src/fidgets/ui/Table.tsx b/src/fidgets/ui/Table.tsx index 4c25bf7b..3597c7a8 100644 --- a/src/fidgets/ui/Table.tsx +++ b/src/fidgets/ui/Table.tsx @@ -16,10 +16,12 @@ import { } from "@/common/components/atoms/card"; import { MarkdownRenderers } from "@/common/lib/utils/markdownRenderers"; import BorderSelector from "@/common/components/molecules/BorderSelector"; +import { CheckIcon, CopyIcon } from "@radix-ui/react-icons"; export type TableFidgetSettings = { title?: string; table: string; + tableBorderColor: string; } & FidgetSettingsStyle; export const tableConfig: FidgetProperties = { @@ -79,20 +81,6 @@ export const tableConfig: FidgetProperties = { inputSelector: ColorSelector, group: "style", }, - { - fieldName: "tableBackground", - default: "var(--user-theme-fidget-background)", - required: false, - inputSelector: ColorSelector, - group: "style", - }, - { - fieldName: "tableBorderWidth", - default: "1", - required: false, - inputSelector: BorderSelector, - group: "style", - }, { fieldName: "tableBorderColor", default: "var(--user-theme-fidget-border-color)", @@ -121,6 +109,7 @@ export const Table: React.FC> = ({ settings, }) => { const [tableData, setTableData] = useState([]); + const [copiedIndex, setCopiedIndex] = useState(null); const parseCSV = (data) => { Papa.parse(data, { @@ -138,6 +127,12 @@ export const Table: React.FC> = ({ const headers = tableData.length > 0 ? Object.keys(tableData[0]) : []; + const handleCopy = (content, index) => { + navigator.clipboard.writeText(content); + setCopiedIndex(index); + setTimeout(() => setCopiedIndex(null), 3000); + }; + return (
> = ({ borderWidth: settings.fidgetBorderWidth, borderColor: settings.fidgetBorderColor, boxShadow: settings.fidgetShadow, - overflow: "scroll", + overflow: "auto", scrollbarWidth: "none", + color: settings.fontColor, + fontFamily: settings.fontFamily, + display: "flex", + flexDirection: "column", + textOverflow: "ellipsis", }} > {settings?.title && ( @@ -164,48 +164,81 @@ export const Table: React.FC> = ({ )} {settings?.table && ( - - - - +
+ + + {headers.map((header, index) => ( + + ))} + + + + {tableData.map((row, rowIndex) => ( + {headers.map((header, index) => ( - - ))} - - - - {tableData.map((row, rowIndex) => ( - - {headers.map((header, index) => ( - - ))} - - ))} - -
+ {header} +
- {header} -
{row[header]} +
- + {copiedIndex === rowIndex ? ( + + ) : ( + + )} + + + ))} + + ))} + + )}
); From 46ca3c0d9bb78075f11a85df4bc7c35c412f6fb3 Mon Sep 17 00:00:00 2001 From: Gustavo Kuhl Date: Thu, 5 Sep 2024 22:30:37 -0300 Subject: [PATCH 13/27] feat: add url selector --- .../components/molecules/CsvSelector.tsx | 64 +++++++++++++++++++ src/fidgets/ui/Table.tsx | 26 +++++++- 2 files changed, 87 insertions(+), 3 deletions(-) create mode 100644 src/common/components/molecules/CsvSelector.tsx diff --git a/src/common/components/molecules/CsvSelector.tsx b/src/common/components/molecules/CsvSelector.tsx new file mode 100644 index 00000000..0eb334ea --- /dev/null +++ b/src/common/components/molecules/CsvSelector.tsx @@ -0,0 +1,64 @@ +import React from "react"; +import { + Select, + SelectValue, + SelectTrigger, + SelectContent, + SelectItem, +} from "@/common/components/atoms/select"; + +export interface CSVSelectorOption { + name: string; +} + +export interface CSVSelectorProps { + onChange: (selectedApp: CSVSelectorOption) => void; + value: CSVSelectorOption | null; + className?: string; +} + +export const CSVSelector: React.FC = ({ + onChange, + value = { name: "Text" }, + className, +}) => { + const settings: CSVSelectorOption[] = [ + { + name: "Text", + }, + { + name: "External URL", + }, + ]; + + return ( +
+ +
+ ); +}; diff --git a/src/fidgets/ui/Table.tsx b/src/fidgets/ui/Table.tsx index 3597c7a8..6dacf537 100644 --- a/src/fidgets/ui/Table.tsx +++ b/src/fidgets/ui/Table.tsx @@ -14,17 +14,20 @@ import { CardTitle, CardDescription, } from "@/common/components/atoms/card"; -import { MarkdownRenderers } from "@/common/lib/utils/markdownRenderers"; -import BorderSelector from "@/common/components/molecules/BorderSelector"; import { CheckIcon, CopyIcon } from "@radix-ui/react-icons"; +import { + CSVSelector, + CSVSelectorOption, +} from "@/common/components/molecules/CsvSelector"; export type TableFidgetSettings = { title?: string; table: string; tableBorderColor: string; + selectInput: CSVSelectorOption; } & FidgetSettingsStyle; -export const tableConfig: FidgetProperties = { +export const tableConfig: FidgetProperties = { fidgetName: "Table", icon: 0x1f4c4, fields: [ @@ -35,6 +38,14 @@ export const tableConfig: FidgetProperties = { inputSelector: TextInput, group: "settings", }, + { + fieldName: "selectInput", + displayName: "Select Input", + inputSelector: CSVSelector, + required: false, + default: { name: "Text" }, + group: "settings", + }, { fieldName: "table", default: `"Game Number", "Game Length" @@ -52,6 +63,15 @@ export const tableConfig: FidgetProperties = { required: true, inputSelector: CSSInput, group: "settings", + disabledIf: (settings) => settings?.selectInput?.name === "External URL", + }, + { + fieldName: "URL", + default: ``, + required: true, + inputSelector: TextInput, + group: "settings", + disabledIf: (settings) => settings?.selectInput?.name === "Text", }, { fieldName: "fontFamily", From e466fe755147415c967c12d6bc03ca32bdbb7888 Mon Sep 17 00:00:00 2001 From: Gustavo Kuhl Date: Thu, 5 Sep 2024 22:31:20 -0300 Subject: [PATCH 14/27] refactor: organize imports --- src/fidgets/ui/Table.tsx | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/fidgets/ui/Table.tsx b/src/fidgets/ui/Table.tsx index 6dacf537..1c62c475 100644 --- a/src/fidgets/ui/Table.tsx +++ b/src/fidgets/ui/Table.tsx @@ -1,24 +1,22 @@ -import React, { useEffect, useState } from "react"; -import TextInput from "@/common/components/molecules/TextInput"; +import { CardHeader, CardTitle } from "@/common/components/atoms/card"; import CSSInput from "@/common/components/molecules/CSSInput"; import ColorSelector from "@/common/components/molecules/ColorSelector"; -import FontSelector from "@/common/components/molecules/FontSelector"; -import { FidgetArgs, FidgetProperties, FidgetModule } from "@/common/fidgets"; -import ReactMarkdown from "react-markdown"; -import { defaultStyleFields } from "../helpers"; -import { FidgetSettingsStyle } from "@/common/fidgets"; -import Papa from "papaparse"; -import { - CardHeader, - CardContent, - CardTitle, - CardDescription, -} from "@/common/components/atoms/card"; -import { CheckIcon, CopyIcon } from "@radix-ui/react-icons"; import { CSVSelector, CSVSelectorOption, } from "@/common/components/molecules/CsvSelector"; +import FontSelector from "@/common/components/molecules/FontSelector"; +import TextInput from "@/common/components/molecules/TextInput"; +import { + FidgetArgs, + FidgetModule, + FidgetProperties, + FidgetSettingsStyle, +} from "@/common/fidgets"; +import { CheckIcon, CopyIcon } from "@radix-ui/react-icons"; +import Papa from "papaparse"; +import React, { useEffect, useState } from "react"; +import { defaultStyleFields } from "../helpers"; export type TableFidgetSettings = { title?: string; From e0f457c92c70298da6eb25a0b62602d3007167cc Mon Sep 17 00:00:00 2001 From: Willy Ogorzaly Date: Fri, 6 Sep 2024 13:54:46 -0500 Subject: [PATCH 15/27] Revert commit 56b7d3c MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit no longer planning to link ⌐◨-◨ to the wtfisnouns page. instead, will link to the homepage (that users can currently only see when not logged in) and add a link to the wtfisnouns page from there --- src/common/components/molecules/BrandHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/components/molecules/BrandHeader.tsx b/src/common/components/molecules/BrandHeader.tsx index 828c32d5..260bc12c 100644 --- a/src/common/components/molecules/BrandHeader.tsx +++ b/src/common/components/molecules/BrandHeader.tsx @@ -18,7 +18,7 @@ const BrandHeader = () => { From bd234c49dc84aff6fc094d6b4937c461631869b2 Mon Sep 17 00:00:00 2001 From: r4to Date: Fri, 6 Sep 2024 16:01:19 -0300 Subject: [PATCH 16/27] wip: Solves cast modal channel selector bug (#394) --- src/common/components/molecules/Modal.tsx | 4 +- .../components/organisms/Navigation.tsx | 4 +- .../farcaster/components/CreateCast.tsx | 37 +++++++++++++----- src/fidgets/farcaster/utils.ts | 29 ++++++++++++++ .../api/farcaster/neynar/active-channels.ts | 38 +++++++++++++++++++ .../api/farcaster/neynar/search-channels.ts | 38 +++++++++++++++++++ 6 files changed, 137 insertions(+), 13 deletions(-) create mode 100644 src/pages/api/farcaster/neynar/active-channels.ts create mode 100644 src/pages/api/farcaster/neynar/search-channels.ts diff --git a/src/common/components/molecules/Modal.tsx b/src/common/components/molecules/Modal.tsx index 38a5393e..d3d7d2dd 100644 --- a/src/common/components/molecules/Modal.tsx +++ b/src/common/components/molecules/Modal.tsx @@ -23,11 +23,11 @@ const Modal = ({ title, description, children, - focusMode, + focusMode = true, showClose = true, overlay = true, }: ModalProps) => ( - + {overlay && open && ( diff --git a/src/common/components/organisms/Navigation.tsx b/src/common/components/organisms/Navigation.tsx index 33ce0475..ab474683 100644 --- a/src/common/components/organisms/Navigation.tsx +++ b/src/common/components/organisms/Navigation.tsx @@ -163,10 +163,10 @@ const Navigation: React.FC = ({ isEditable, enterEditMode }) => { - + setShowCastModal(false)} />
diff --git a/src/fidgets/farcaster/components/CreateCast.tsx b/src/fidgets/farcaster/components/CreateCast.tsx index d74d0997..98041fff 100644 --- a/src/fidgets/farcaster/components/CreateCast.tsx +++ b/src/fidgets/farcaster/components/CreateCast.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { useEditor, EditorContent } from "@mod-protocol/react-editor"; import { EmbedsEditor } from "@mod-protocol/react-ui-shadcn/dist/lib/embeds"; import { @@ -34,21 +34,20 @@ import { PhotoIcon } from "@heroicons/react/20/solid"; import { FarcasterEmbed, isFarcasterUrlEmbed } from "@mod-protocol/farcaster"; import { CastType, Signer } from "@farcaster/core"; import { useFarcasterSigner } from ".."; -import { submitCast } from "../utils"; +import { + fetchChannelsByName, + fetchChannelsForUser, + submitCast, +} from "../utils"; import { bytesToHex } from "@noble/ciphers/utils"; const API_URL = process.env.NEXT_PUBLIC_MOD_PROTOCOL_API_URL!; const getMentions = getFarcasterMentions(API_URL); + const debouncedGetMentions = debounce(getMentions, 200, { leading: true, trailing: false, }); -const getChannels = getFarcasterChannels(API_URL); -const debouncedGetChannels = debounce(getChannels, 200, { - leading: true, - trailing: false, -}); - const getUrlMetadata = fetchUrlMetadata(API_URL); const getMentionFids = getMentionFidsByUsernames(API_URL); @@ -82,6 +81,7 @@ export type DraftType = { type CreateCastProps = { initialDraft?: Partial; + afterSubmit?: () => void; }; export type ModProtocolCastAddBody = Exclude< @@ -117,7 +117,10 @@ async function publishPost(draft: DraftType, fid: number, signer: Signer) { } } -const CreateCast: React.FC = ({ initialDraft }) => { +const CreateCast: React.FC = ({ + initialDraft, + afterSubmit = () => {}, +}) => { const [currentMod, setCurrentMod] = useState(null); const [initialEmbeds, setInitialEmbeds] = useState(); const [draft, setDraft] = useState({ @@ -131,10 +134,26 @@ const CreateCast: React.FC = ({ initialDraft }) => { const { signer, isLoadingSigner, fid } = useFarcasterSigner("create-cast"); + const debouncedGetChannels = useCallback( + debounce( + async (query: string) => { + if (query && query !== "") { + return await fetchChannelsByName(query); + } else { + return await fetchChannelsForUser(fid); + } + }, + 200, + { leading: true, trailing: false }, + ), + [fid], + ); + const onSubmitPost = async (): Promise => { if ((!draft?.text && !draft?.embeds?.length) || isUndefined(signer)) return false; await publishPost(draft, fid, signer); + afterSubmit(); return true; }; diff --git a/src/fidgets/farcaster/utils.ts b/src/fidgets/farcaster/utils.ts index 118005c5..7bae5bc9 100644 --- a/src/fidgets/farcaster/utils.ts +++ b/src/fidgets/farcaster/utils.ts @@ -28,6 +28,7 @@ import { mnemonicToAccount } from "viem/accounts"; import { optimismChaninClient } from "@/constants/optimismChainClient"; import axiosBackend from "@/common/data/api/backend"; import { ModProtocolCastAddBody } from "./components/CreateCast"; +import { type Channel } from "@mod-protocol/farcaster"; export const WARPCAST_RECOVERY_PROXY: `0x${string}` = "0x00000000FcB080a4D6c39a9354dA9EB9bC104cd7"; @@ -404,3 +405,31 @@ export const getSignatureForUsernameProof = async ( }); return signature; }; + +export async function fetchChannelsForUser( + fid: number, + limit: number = 20, +): Promise { + try { + const channelsResponse = await axiosBackend.get( + `/api/farcaster/neynar/active-channels/?limit=${limit}&fid=${fid}`, + ); + return channelsResponse.data.channels as Channel[]; + } catch (e) { + return [] as Channel[]; + } +} + +export async function fetchChannelsByName( + query: string, + limit: number = 20, +): Promise { + try { + const channelsResponse = await axiosBackend.get( + `/api/farcaster/neynar/search-channels?limit=${limit}&q=${query}`, + ); + return channelsResponse.data.channels as Channel[]; + } catch (e) { + return [] as Channel[]; + } +} diff --git a/src/pages/api/farcaster/neynar/active-channels.ts b/src/pages/api/farcaster/neynar/active-channels.ts new file mode 100644 index 00000000..a99f6a8c --- /dev/null +++ b/src/pages/api/farcaster/neynar/active-channels.ts @@ -0,0 +1,38 @@ +import requestHandler from "@/common/data/api/requestHandler"; +import axios, { AxiosRequestConfig, isAxiosError } from "axios"; +import Error from "next/error"; +import { NextApiRequest, NextApiResponse } from "next/types"; + +async function loadUserChannels(req: NextApiRequest, res: NextApiResponse) { + try { + const options: AxiosRequestConfig = { + method: "GET", + url: `https://api.neynar.com/v2/farcaster/channel/user`, + headers: { + accept: "application/json", + api_key: process.env.NEYNAR_API_KEY!, + }, + params: req.query, + }; + + const { data } = await axios.request(options); + + if (data.status && data.status !== 200) { + return res.status(data.status).json(data); + } + + res.status(200).json(data); + } catch (e) { + if (isAxiosError(e)) { + res + .status(e.response!.data.status || 500) + .json(e.response!.data || "An unknown error occurred"); + } else { + res.status(500).json("An unknown error occurred"); + } + } +} + +export default requestHandler({ + get: loadUserChannels, +}); diff --git a/src/pages/api/farcaster/neynar/search-channels.ts b/src/pages/api/farcaster/neynar/search-channels.ts new file mode 100644 index 00000000..c3b191f6 --- /dev/null +++ b/src/pages/api/farcaster/neynar/search-channels.ts @@ -0,0 +1,38 @@ +import requestHandler from "@/common/data/api/requestHandler"; +import axios, { AxiosRequestConfig, isAxiosError } from "axios"; +import Error from "next/error"; +import { NextApiRequest, NextApiResponse } from "next/types"; + +async function searchChannels(req: NextApiRequest, res: NextApiResponse) { + try { + const options: AxiosRequestConfig = { + method: "GET", + url: `https://api.neynar.com/v2/farcaster/channel/search`, + headers: { + accept: "application/json", + api_key: process.env.NEYNAR_API_KEY!, + }, + params: req.query, + }; + + const { data } = await axios.request(options); + + if (data.status && data.status !== 200) { + return res.status(data.status).json(data); + } + + res.status(200).json(data); + } catch (e) { + if (isAxiosError(e)) { + res + .status(e.response!.data.status || 500) + .json(e.response!.data || "An unknown error occurred"); + } else { + res.status(500).json("An unknown error occurred"); + } + } +} + +export default requestHandler({ + get: searchChannels, +}); From a1e4e061ee237a97edf6839bfc545c4486d708a7 Mon Sep 17 00:00:00 2001 From: r4to Date: Fri, 6 Sep 2024 16:13:08 -0300 Subject: [PATCH 17/27] style: update metadata image preview style (#365) --- src/common/lib/utils/generateUserMetadataHtml.tsx | 5 ++--- src/pages/api/metadata/spaces.tsx | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/common/lib/utils/generateUserMetadataHtml.tsx b/src/common/lib/utils/generateUserMetadataHtml.tsx index 3e742a01..9a6aafb2 100644 --- a/src/common/lib/utils/generateUserMetadataHtml.tsx +++ b/src/common/lib/utils/generateUserMetadataHtml.tsx @@ -31,7 +31,6 @@ export const generateUserMetadataHtml = (userMetadata?: UserMetadata) => { - {bio && ( <> @@ -41,9 +40,9 @@ export const generateUserMetadataHtml = (userMetadata?: UserMetadata) => { )} {pfpUrl && ( <> - - + + )} diff --git a/src/pages/api/metadata/spaces.tsx b/src/pages/api/metadata/spaces.tsx index 153b3a63..9d5a8a8f 100644 --- a/src/pages/api/metadata/spaces.tsx +++ b/src/pages/api/metadata/spaces.tsx @@ -53,8 +53,8 @@ const ProfileCard = ({ userMetadata }: { userMetadata: UserMetadata }) => { >

Date: Mon, 9 Sep 2024 12:56:52 -0300 Subject: [PATCH 18/27] fix tabbar background and add tab button index (#403) --- src/common/components/organisms/TabBar.tsx | 2 +- src/common/components/templates/Space.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/common/components/organisms/TabBar.tsx b/src/common/components/organisms/TabBar.tsx index 088327ba..983bdac2 100644 --- a/src/common/components/organisms/TabBar.tsx +++ b/src/common/components/organisms/TabBar.tsx @@ -352,7 +352,7 @@ const TabBar = memo(function TabBar({ {inEditMode ? ( -

+
- {isNil(profile) && ( )} +
From 3071ec880003399f5d8da3f39a3cde9268a295e8 Mon Sep 17 00:00:00 2001 From: Vlad 2 <116202536+sktbrd@users.noreply.github.com> Date: Mon, 9 Sep 2024 12:57:27 -0300 Subject: [PATCH 19/27] video fidget and iframe fidget improvements (#402) --- src/common/fidgets/FidgetWrapper.tsx | 1 - src/fidgets/helpers.tsx | 13 +++ src/fidgets/index.ts | 3 +- src/fidgets/ui/IFrame.tsx | 9 +- src/fidgets/ui/Video.tsx | 121 +++++++++++++++++++++++++++ 5 files changed, 140 insertions(+), 7 deletions(-) create mode 100644 src/fidgets/ui/Video.tsx diff --git a/src/common/fidgets/FidgetWrapper.tsx b/src/common/fidgets/FidgetWrapper.tsx index 1da7842f..971749c1 100644 --- a/src/common/fidgets/FidgetWrapper.tsx +++ b/src/common/fidgets/FidgetWrapper.tsx @@ -70,7 +70,6 @@ export function FidgetWrapper({ homebaseConfig: state.homebase.homebaseConfig, })); - console.log(homebaseConfig); function onClickEdit() { setSelectedFidgetID(bundle.id); setCurrentFidgetSettings( diff --git a/src/fidgets/helpers.tsx b/src/fidgets/helpers.tsx index ea2dcb1d..c5dafa5d 100644 --- a/src/fidgets/helpers.tsx +++ b/src/fidgets/helpers.tsx @@ -34,3 +34,16 @@ export const defaultStyleFields: FidgetFieldConfig[] = [ group: "style", }, ]; + +export const transformUrl = (url: string) => { + if (url && url.match(/youtube\.com\/watch\?v=/)) { + return url.replace("watch?v=", "embed/"); + } + if (url && url.match(/vimeo\.com\/\d+/)) { + return url.replace("vimeo.com", "player.vimeo.com/video"); + } + if (url && url.match(/odysee\.com\/@/)) { + return url.replace("odysee.com", "odysee.com/$/embed"); + } + return url; +}; diff --git a/src/fidgets/index.ts b/src/fidgets/index.ts index bb5c83c0..03ed83e2 100644 --- a/src/fidgets/index.ts +++ b/src/fidgets/index.ts @@ -12,7 +12,7 @@ import Feed from "./farcaster/Feed"; import CreateCast from "./farcaster/CreateCast"; import Links from "./ui/Links"; import snapShot from "./snapshot/SnapShot"; - +import VideoFidget from "./ui/Video"; export const CompleteFidgets = { // example: @@ -33,6 +33,7 @@ export const CompleteFidgets = { links: Links, // zora: zoraEmbed, -> 500 server error -Frame ancestors block SnapShot: snapShot, + Video: VideoFidget, }; export const LayoutFidgets = { diff --git a/src/fidgets/ui/IFrame.tsx b/src/fidgets/ui/IFrame.tsx index 734721c2..e641e8a5 100644 --- a/src/fidgets/ui/IFrame.tsx +++ b/src/fidgets/ui/IFrame.tsx @@ -9,9 +9,8 @@ import { import { isValidUrl } from "@/common/lib/utils/url"; import useSafeUrl from "@/common/lib/hooks/useSafeUrl"; import { defaultStyleFields } from "@/fidgets/helpers"; -import WidthSlider from "@/common/components/molecules/ScaleSliderSelector"; import IFrameWidthSlider from "@/common/components/molecules/IframeScaleSlider"; - +import { transformUrl } from "@/fidgets/helpers"; export type IFrameFidgetSettings = { url: string; size: number; @@ -69,7 +68,7 @@ const IFrame: React.FC> = ({ }) => { const isValid = isValidUrl(url); const sanitizedUrl = useSafeUrl(url, DISALLOW_URL_PATTERNS); - + const transformedUrl = transformUrl(sanitizedUrl || ""); if (!url) { return ; } @@ -78,7 +77,7 @@ const IFrame: React.FC> = ({ return ; } - if (!sanitizedUrl) { + if (!transformedUrl) { return ( > = ({ return (