[WIP] Video Card UI Overhaul

app/client/src/App.js

@@ -8,6 +8,7 @@ import Dashboard from './views/Dashboard'
 import NotFound from './views/NotFound'
 import Settings from './views/Settings'
 import Feed from './views/Feed'
+import FeedTesting from './views/FeedTesting'
 import Games from './views/Games'
 import GameVideos from './views/GameVideos'
 import darkTheme from './common/darkTheme'
@@ -95,6 +96,16 @@ export default function App() {
               </AuthWrapper>
             }
           />
+          <Route
+            path="/testing"
+            element={
+              <AuthWrapper redirect={'/feed'}>
+                <Navbar20 page="/testing" collapsed={!drawerOpen} searchable styleToggle cardSlider>
+                  <FeedTesting />
+                </Navbar20>
+              </AuthWrapper>
+            }
+          />
           <Route
             path="/w/:id"
             element={

app/client/src/components/admin/BetaVideoCards.js

@@ -0,0 +1,176 @@
+import React, { useCallback } from 'react'
+import { Box, Button, Grid, Paper, Typography } from '@mui/material'
+import SnackbarAlert from '../alert/SnackbarAlert'
+import VideoModal from '../modal/VideoModal'
+import SensorsIcon from '@mui/icons-material/Sensors'
+import { VideoService } from '../../services'
+import UploadCard from './UploadCard'
+import CompactBetaVideoCard from './CompactBetaVideoCard'
+
+const BetaVideoCards = ({
+  videos,
+  loadingIcon = null,
+  feedView = false,
+  showUploadCard = false,
+  fetchVideos,
+  authenticated,
+  size,
+}) => {
+  const [vids, setVideos] = React.useState(videos)
+  const [alert, setAlert] = React.useState({ open: false })
+  const [videoModal, setVideoModal] = React.useState({
+    open: false,
+  })
+
+  const previousVideosRef = React.useRef()
+  const previousVideos = previousVideosRef.current
+  if (videos !== previousVideos && videos !== vids) {
+    setVideos(videos)
+  }
+  React.useEffect(() => {
+    previousVideosRef.current = videos
+  })
+
+  const openVideo = (id) => {
+    setVideoModal({
+      open: true,
+      id,
+    })
+  }
+
+  const onModalClose = () => {
+    setVideoModal({ open: false })
+  }
+
+  const memoizedHandleAlert = useCallback((alert) => {
+    setAlert(alert)
+  }, [])
+
+  const handleScan = () => {
+    VideoService.scan().catch((err) =>
+      setAlert({
+        open: true,
+        type: 'error',
+        message: err.response?.data || 'Unknown Error',
+      }),
+    )
+    setAlert({
+      open: true,
+      type: 'info',
+      message: 'Scan initiated. This could take a few minutes.',
+    })
+  }
+
+  const handleUpdate = (update) => {
+    const { id, ...rest } = update
+    setVideos((vs) => vs.map((v) => (v.video_id === id ? { ...v, info: { ...v.info, ...rest } } : v)))
+  }
+
+  const handleDelete = (id) => {
+    setVideos((vs) => vs.filter((v) => v.video_id !== id))
+  }
+
+  const EMPTY_STATE = () => (
+    <Paper variant="outlined" sx={{ overflow: 'hidden' }}>
+      <Grid
+        sx={{ p: 2, height: 200 }}
+        container
+        item
+        spacing={2}
+        direction="column"
+        justifyContent="center"
+        alignItems="center"
+      >
+        {!loadingIcon && (
+          <>
+            <Grid item>
+              <Typography
+                variant="h4"
+                align="center"
+                color="primary"
+                sx={{
+                  fontFamily: 'monospace',
+                  fontWeight: 500,
+                  letterSpacing: '.2rem',
+                  textDecoration: 'none',
+                }}
+              >
+                NO VIDEOS FOUND
+              </Typography>
+            </Grid>
+
+            {!feedView && (
+              <Grid item>
+                <Button variant="contained" size="large" startIcon={<SensorsIcon />} onClick={handleScan}>
+                  Scan Library
+                </Button>
+              </Grid>
+            )}
+          </>
+        )}
+        {loadingIcon}
+      </Grid>
+      {!loadingIcon && (
+        <Grid container justifyContent="center">
+          <UploadCard
+            authenticated={authenticated}
+            feedView={feedView}
+            cardWidth={250}
+            handleAlert={memoizedHandleAlert}
+            publicUpload={feedView}
+          />
+        </Grid>
+      )}
+    </Paper>
+  )
+
+  return (
+    <Box>
+      <VideoModal
+        open={videoModal.open}
+        onClose={onModalClose}
+        videoId={videoModal.id}
+        feedView={feedView}
+        authenticated={authenticated}
+        updateCallback={handleUpdate}
+      />
+      <SnackbarAlert
+        severity={alert.type}
+        open={alert.open}
+        onClose={alert.onClose}
+        setOpen={(open) => setAlert({ ...alert, open })}
+      >
+        {alert.message}
+      </SnackbarAlert>
+
+      {(!vids || vids.length === 0) && EMPTY_STATE()}
+      {vids && vids.length !== 0 && (
+        <Grid container justifyContent="flex-start" spacing={3}>
+          {showUploadCard && (
+            <Grid item>
+              <UploadCard
+                authenticated={authenticated}
+                feedView={feedView}
+                cardWidth={size}
+                handleAlert={memoizedHandleAlert}
+                fetchVideos={fetchVideos}
+                publicUpload={feedView}
+              />
+            </Grid>
+          )}
+          {vids.map((v) => (
+            <Grid item key={v.path + v.video_id}>
+              <CompactBetaVideoCard
+                video={v}
+                openVideoHandler={openVideo}
+                cardWidth={size}
+              />
+            </Grid>
+          ))}
+        </Grid>
+      )}
+    </Box>
+  )
+}
+
+export default BetaVideoCards