prevent flash when search/filter media (ZcashFoundation#180)

skyl · Aug 9, 2023 · ecd26dc · ecd26dc
1 parent f0d51dd
commit ecd26dc
Show file tree

Hide file tree

Showing 8 changed files with 286 additions and 269 deletions.
diff --git a/py/dj/apps/comments/management/commands/tweet_comments.py b/py/dj/apps/comments/management/commands/tweet_comments.py
@@ -111,7 +111,8 @@ def get_prompt(page_title, headline):
     painter = random.choice(painters)
     # Form the prompt using elements from the page title, comment headline, and the chosen painter's style
     prompt = f"""
-    '{page_title}, {headline}' by {painter}
+    An impressionistic painting with no words, characters or glyphs of any kind,
+    entitled "{page_title}, {headline}" by {painter}
     """
     return prompt
 

diff --git a/ts/react/free2z/package-lock.json b/ts/react/free2z/package-lock.json
diff --git a/ts/react/free2z/package.json b/ts/react/free2z/package.json
@@ -8,7 +8,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.3",
-    "@mui/material": "^5.14.3",
+    "@mui/material": "^5.14.4",
     "@mui/x-date-pickers": "^6.11.0",
     "@react-three/cannon": "^6.5.2",
     "@react-three/drei": "^9.80.1",
@@ -17,8 +17,8 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.39",
-    "@types/react": "^18.2.18",
+    "@types/node": "^16.18.40",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
     "@uiw/react-md-editor": "^3.23.5",
     "axios": "^0.26.1",
@@ -48,7 +48,7 @@
     "react-web-share": "^2.0.2",
     "redux": "^4.2.1",
     "rehype-mathjax": "^4.0.3",
-    "rehype-prism-plus": "^1.6.2",
+    "rehype-prism-plus": "^1.6.3",
     "rehype-raw": "^6.1.1",
     "remark-directive": "^2.0.1",
     "remark-gfm": "^3.0.1",

diff --git a/ts/react/free2z/src/components/FileImageListItem.tsx b/ts/react/free2z/src/components/FileImageListItem.tsx
@@ -51,14 +51,14 @@ export function FileItem(props: { file: FileMetadata }) {
             >
                 <ReactPlayer
                     style={{
-                        width: '100%',
-                        height: 'auto',
+                        // width: '100%',
+                        // height: 'auto',
                         // maxHeight: '100%',
                         margin: "0 auto",
                         // zIndex: 10000,
                         maxWidth: "150px",
                         // maxWidth: "100%",
-                        maxHeight: "150px",
+                        maxHeight: "130px",
                     }}
                     url={`${file.url}`}
                     controls={true}

diff --git a/ts/react/free2z/src/components/FileSelectorDialog.tsx b/ts/react/free2z/src/components/FileSelectorDialog.tsx
@@ -37,6 +37,7 @@ const FileSelectorDialog: React.FC<Props> = ({ open, onClose, onSelect }) => {
   const [search, setSearch] = useState('');
   const [mimeType, setMimeType] = useState('');
   const [mql, setMQL] = useState(window.matchMedia('(max-width: 600px)'))
+  const [initialFetchCompleted, setInitialFetchCompleted] = useState(false);
 
   const manuallySetPageRef = useRef(false);
 
@@ -62,6 +63,10 @@ const FileSelectorDialog: React.FC<Props> = ({ open, onClose, onSelect }) => {
     onSuccess: (newData: ApiResponse) => {
       setData(prev => [...prev, ...newData.results]);
       setHasMore(!!newData.next);
+      setInitialFetchCompleted(true)
+    },
+    onError: (err) => {
+      setInitialFetchCompleted(true)
     }
   });
 
@@ -89,6 +94,7 @@ const FileSelectorDialog: React.FC<Props> = ({ open, onClose, onSelect }) => {
           value={search}
           onChange={(e) => {
             manuallySetPageRef.current = true;
+            setInitialFetchCompleted(false)
             setPage(1);
             setSearch(e.target.value);
             setData([]);
@@ -103,6 +109,7 @@ const FileSelectorDialog: React.FC<Props> = ({ open, onClose, onSelect }) => {
             value={mimeType}
             onChange={(e) => {
               manuallySetPageRef.current = true;
+              setInitialFetchCompleted(false)
               setPage(1);
               setMimeType(e.target.value as string);  // TypeScript type assertion
               setData([]);
@@ -118,20 +125,23 @@ const FileSelectorDialog: React.FC<Props> = ({ open, onClose, onSelect }) => {
         </FormControl>
       </DialogTitle>
 
-      <DialogContent>
-        {data.length === 0 && (
+      <DialogContent
+        sx={{
+          minHeight: "60vh",
+        }}
+      >
+        {data.length === 0 && initialFetchCompleted && (
           <Typography>
-            No uploads!
-            Try <Link href="/profile/uploads">uploading</Link> some images.
+            No results!
+            You can <Link href="/profile/uploads">upload</Link> some files?
           </Typography>
         )}
         <ImageList
           cols={mql.matches ? 2 : 3}
-          gap={8}
+          gap={6}
           sx={{
-            minHeight: "80%",
+            overflowY: 'visible',
           }}
-        // variant="masonry"
         >
 
           {data.map((file) => (

diff --git a/ts/react/free2z/src/components/MyUploads.tsx b/ts/react/free2z/src/components/MyUploads.tsx
@@ -3,6 +3,7 @@ import ImageList from '@mui/material/ImageList';
 import FileImageListItem from "./FileImageListItem"
 import MyUploadsSearch from "./MyUploadsSearch";
 import { FeaturedImage } from "./PageRenderer";
+import { Typography } from "@mui/material";
 
 type MyUploadsProps = {
     loads: number,
@@ -14,6 +15,7 @@ export default function MyUploads(props: MyUploadsProps) {
     const { loads, setLoads } = props
     const [results, setResults] = useState([] as FeaturedImage[])
     const [mql, setMQL] = useState(window.matchMedia('(max-width: 600px)'))
+    const [searching, setSearching] = useState(true)
 
     useEffect(() => {
         window.addEventListener('resize', () => {
@@ -24,9 +26,13 @@ export default function MyUploads(props: MyUploadsProps) {
     return (
         <>
             <MyUploadsSearch
+                setSearching={setSearching}
                 loads={loads}
                 setResults={setResults}
             />
+            {results.length === 0 && !searching &&
+                <Typography variant="h6" sx={{ textAlign: "center" }}>No results</Typography>
+            }
             <ImageList
                 cols={mql.matches ? 2 : 3}
                 variant="masonry"

diff --git a/ts/react/free2z/src/components/MyUploadsSearch.tsx b/ts/react/free2z/src/components/MyUploadsSearch.tsx
@@ -10,10 +10,11 @@ type MyUploadsSearchProps = {
     loads?: number
     setResults: React.Dispatch<React.SetStateAction<FeaturedImage[]>>
     extraQuery?: string
+    setSearching: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 export default function MyUploadsSearch(props: MyUploadsSearchProps) {
-    const { loads, setResults, extraQuery } = props
+    const { loads, setResults, extraQuery, setSearching } = props
     const [prev, setPrev] = useState(null)
     const [next, setNext] = useState(null)
     const [page, setPage] = useState(1)
@@ -25,6 +26,7 @@ export default function MyUploadsSearch(props: MyUploadsSearchProps) {
     };
 
     useEffect(() => {
+        setSearching(true)
         setResults([] as FeaturedImage[])
         axios.get(
             `/api/myuploads/?page=${page}&search=${search}&${extraQuery}`
@@ -34,9 +36,11 @@ export default function MyUploadsSearch(props: MyUploadsSearchProps) {
             setCount(res.data.count)
             setPrev(res.data.previous)
             setNext(res.data.next)
+            setSearching(false)
+        }).catch((err) => {
+            console.error("Failed to search", err)
+            setSearching(false)
         })
-        // catch? ;/
-        // snack
     }, [loads, page, search])
 
     return (

diff --git a/ts/react/free2z/src/components/UploadOrSelect.tsx b/ts/react/free2z/src/components/UploadOrSelect.tsx
@@ -28,6 +28,7 @@ export default function UploadOrSelect(props: UploadOrSelectProps) {
     const [openDialog, setOpenDialog] = useState(false);
     const [prog, setProgress] = useState(0)
     const [mql, setMQL] = useState(window.matchMedia('(max-width: 600px)'))
+    const [searching, setSearching] = useState(true)
 
     const handleUpload = (
         event: ChangeEvent<HTMLInputElement>,
@@ -170,12 +171,13 @@ export default function UploadOrSelect(props: UploadOrSelectProps) {
             >
                 <DialogTitle>
                     <MyUploadsSearch
+                        setSearching={setSearching}
                         setResults={setResults}
                         extraQuery={"access=public&mime_type=image"}
                     />
                 </DialogTitle>
                 <DialogContent>
-                    {results.length === 0 && (
+                    {results.length === 0 && !searching && (
                         <Typography>
                             No uploads!
                             Try <Link href="/profile/uploads">uploading</Link> some images.