GifPicker

src/components/SchemaForm/components/Gif/GifPicker.tsx

@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from 'react'
+import Dialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import TextField from '@mui/material/TextField'
+import { Button, DialogActions, useTheme } from '@mui/material'
+import { Search } from '@mui/icons-material'
+
+interface Gif {
+  name: string
+  url: string
+}
+
+interface GifPickerProps {
+  onChange: (_url: string) => void
+}
+
+const GifPicker: React.FC<GifPickerProps> = ({ onChange }: any) => {
+  const theme = useTheme()
+  const [gifs, setGifs] = useState<Gif[]>([])
+  const [filter, setFilter] = useState('')
+  const [open, setOpen] = useState(false)
+  const [selectedGif, setSelectedGif] = useState<string | null>(null)
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const baseUrl = 'https://assets.ledfx.app/gifs/'
+  useEffect(() => {
+    if (open)
+      fetch(baseUrl)
+        .then((response) => response.text())
+        .then((data) => {
+          const parser = new DOMParser()
+          const doc = parser.parseFromString(data, 'text/html')
+          const links = doc.querySelectorAll('pre a')
+          const files = Array.from(links)
+            .filter((link) => link.textContent?.endsWith('.gif'))
+            .map((link: any) => ({
+              name: link.textContent?.replace('.gif', ''),
+              url: baseUrl + link.href.split('/').pop()
+            }))
+          setGifs(files)
+        })
+    // setGifs([
+    //   {
+    //     name: 'bruces1',
+    //     url: 'https://assets.ledfx.app/gifs/bruces1.gif'
+    //   },
+    //   {
+    //     name: 'cat-space',
+    //     url: 'https://assets.ledfx.app/gifs/cat-space.gif'
+    //   },
+    //   {
+    //     name: 'catfixed',
+    //     url: 'https://assets.ledfx.app/gifs/catfixed.gif'
+    //   },
+    //   {
+    //     name: 'dancing',
+    //     url: 'https://assets.ledfx.app/gifs/dancing.gif'
+    //   },
+    //   {
+    //     name: 'phoebe',
+    //     url: 'https://assets.ledfx.app/gifs/phoebe.gif'
+    //   },
+    //   {
+    //     name: 'snoopy',
+    //     url: 'https://assets.ledfx.app/gifs/snoopy.gif'
+    //   },
+    //   {
+    //     name: 'sponge',
+    //     url: 'https://assets.ledfx.app/gifs/sponge.gif'
+    //   },
+    //   {
+    //     name: 'zilla1',
+    //     url: 'https://assets.ledfx.app/gifs/zilla1.gif'
+    //   }
+    // ])
+  }, [open])
+
+  return (
+    <>
+      <Button onClick={handleClickOpen} sx={{ alignSelf: 'flex-start' }}>
+        <Search />
+      </Button>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>GIF Picker</DialogTitle>
+        <DialogContent>
+          <TextField
+            fullWidth
+            sx={{ marginBottom: '20px', minWidth: '522px' }}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="Filter GIFs..."
+          />
+          {gifs
+            .filter((gif) => gif.name.includes(filter))
+            .map((gif, i) => (
+              // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+              <img
+                key={gif.name}
+                src={gif.url}
+                alt={gif.name}
+                style={{
+                  height: '100px',
+                  marginRight: '10px',
+                  border: '2px solid',
+                  cursor: 'pointer',
+                  borderColor:
+                    selectedGif === gif.url
+                      ? theme.palette.primary.main
+                      : 'transparent'
+                }}
+                tabIndex={i + 1}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleClose()
+                  }
+                }}
+                onClick={() => {
+                  if (selectedGif !== gif.url) {
+                    setSelectedGif(gif.url)
+                  } else {
+                    setSelectedGif(null)
+                  }
+                  onChange(gif.url)
+                  //   handleClose()
+                }}
+              />
+            ))}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>OK</Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+
+export default GifPicker

src/components/SchemaForm/components/String/BladeSelect.tsx

@@ -12,6 +12,8 @@ import BladeIcon from '../../../Icons/BladeIcon/BladeIcon'
 import BladeFrame from '../BladeFrame'
 import { BladeSelectDefaultProps, BladeSelectProps } from './BladeSelect.props'
 import { Ledfx } from '../../../../api/ledfx'
+import GifPicker from '../Gif/GifPicker'
+// import GifFrameSelector from '../Gif/GifFrameSelector'
 
 /**
  * ## String
@@ -42,6 +44,7 @@ const BladeSelect = ({
           (schema.enum && schema.enum[0])
       : ''
   )
+  console.log(schema, model)
   return (
     <BladeFrame
       title={schema.title}
@@ -179,6 +182,25 @@ const BladeSelect = ({
             }}
             style={textStyle as any}
           />
+          {schema.id === 'gif at' && (
+            <GifPicker
+              onChange={(gif: string) => {
+                onChange(model_id, gif)
+                inputRef.current.value = gif
+              }}
+            />
+          )}
+          {/* {schema.id === 'beat frames' &&
+            model['gif at'] &&
+            model['gif at'] !== '' && (
+              <GifFrameSelector
+                url={model['gif at']}
+                onChange={(gif: string) => {
+                  onChange(model_id, gif)
+                  inputRef.current.value = gif
+                }}
+              />
+            )} */}
           {model_id === 'auth_token' && type === 'nanoleaf' && (
             <Tooltip
               title={