Merge pull request #440 from ShaneIsrael/develop

Develop

Author: ShaneIsrael

.env.dev

@@ -7,5 +7,6 @@ export SECRET_KEY=dev-test-key
 export DATA_DIRECTORY=$(pwd)/dev_root/dev_data/
 export VIDEO_DIRECTORY=$(pwd)/dev_root/dev_videos/
 export PROCESSED_DIRECTORY=$(pwd)/dev_root/dev_processed/
+export STEAMGRIDDB_API_KEY=""
 export ADMIN_PASSWORD=admin
 export ADMIN_USERNAME=admin

app/client/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "fireshare",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.0",
@@ -48,4 +48,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

app/client/package.json

@@ -79,7 +79,7 @@ export default function App() {
             path="/games"
             element={
               <AuthWrapper>
-                <Navbar20 page="/games" collapsed={!drawerOpen} searchable>
+                <Navbar20 page="/games" collapsed={!drawerOpen} searchable searchPlaceholder="Search games...">
                   <Games />
                 </Navbar20>
               </AuthWrapper>

app/client/src/App.js

@@ -116,7 +116,7 @@ export const getVideoUrl = (videoId, quality, extension) => {
   const URL = getUrl()
   const SERVED_BY = getServedBy()
 
-  if (quality === '720p' || quality === '1080p') {
+  if (quality === '480p' || quality === '720p' || quality === '1080p') {
     if (SERVED_BY === 'nginx') {
       return `${URL}/_content/derived/${videoId}/${videoId}-${quality}.mp4`
     }
@@ -141,20 +141,27 @@ export const getVideoUrl = (videoId, quality, extension) => {
  */
 export const getVideoSources = (videoId, videoInfo, extension) => {
   const sources = []
-  
+
+  const has480p = videoInfo?.has_480p
   const has720p = videoInfo?.has_720p
   const has1080p = videoInfo?.has_1080p
-  
-  // Add 720p
+
+  if (has480p) {
+    sources.push({
+      src: getVideoUrl(videoId, '480p', extension),
+      type: 'video/mp4',
+      label: '480p',
+    })
+  }
+
   if (has720p) {
     sources.push({
       src: getVideoUrl(videoId, '720p', extension),
       type: 'video/mp4',
       label: '720p',
     })
   }
-  
-  // Add 1080p
+
   if (has1080p) {
     sources.push({
       src: getVideoUrl(videoId, '1080p', extension),
@@ -163,12 +170,11 @@ export const getVideoSources = (videoId, videoInfo, extension) => {
     })
   }
 
-  // Add original quality - always selected by default
   sources.push({
     src: getVideoUrl(videoId, 'original', extension),
     type: 'video/mp4',
     label: 'Original',
-    selected: true, // Always default to original quality
+    selected: true,
   })
 
   return sources

app/client/src/common/utils.js

@@ -11,13 +11,11 @@ const Input = styled('input')({
 
 const numberFormat = new Intl.NumberFormat('en-US')
 
-const UploadCard = ({ authenticated, feedView = false, publicUpload = false, fetchVideos, cardWidth, handleAlert, reserveDateSpace = false }) => {
-  const cardHeight = cardWidth / 1.77 + 32
+const UploadCard = ({ authenticated, handleAlert, mini}) => {
   const [selectedFile, setSelectedFile] = React.useState()
   const [isSelected, setIsSelected] = React.useState(false)
   const [progress, setProgress] = React.useState(0)
   const [uploadRate, setUploadRate] = React.useState()
-  const app_config = getSetting('app_config')
   const uiConfig = getSetting('ui_config')
 
   const changeHandler = (event) => {
@@ -69,19 +67,19 @@ const UploadCard = ({ authenticated, feedView = false, publicUpload = false, fet
       const formData = new FormData()
       formData.append('file', selectedFile)
       try {
-        if (publicUpload) {
-          await VideoService.publicUpload(formData, uploadProgress)
-        }
-        if (!publicUpload && authenticated) {
+        if (authenticated) {
           await VideoService.upload(formData, uploadProgress)
+        } else {
+          await VideoService.publicUpload(formData, uploadProgress)
         }
         handleAlert({
           type: 'success',
           message: 'Your upload will be available in a few seconds.',
           autohideDuration: 3500,
           open: true,
-          onClose: () => fetchVideos(),
+          // onClose: () => fetchVideos(),
         })
+        setTimeout(() => window.dispatchEvent(new Event('transcodingStarted')), 5000)
       } catch (err) {
         handleAlert({
           type: 'error',
@@ -119,20 +117,18 @@ const UploadCard = ({ authenticated, feedView = false, publicUpload = false, fet
           formData.append('lastModified', selectedFile.lastModified.toString());
           formData.append('fileType', selectedFile.type);
 
-          if (publicUpload) {
-            await VideoService.publicUploadChunked(formData, uploadProgressChunked, selectedFile.size, start);
-          } else if (!publicUpload && authenticated) {
-            await VideoService.uploadChunked(formData, uploadProgressChunked, selectedFile.size, start);
-          }
+          authenticated ? await VideoService.uploadChunked(formData, uploadProgressChunked, selectedFile.size, start) 
+            : await VideoService.publicUploadChunked(formData, uploadProgressChunked, selectedFile.size, start)
         }
 
         handleAlert({
           type: 'success',
           message: 'Your upload will be available in a few seconds.',
           autohideDuration: 3500,
           open: true,
-          onClose: () => fetchVideos(),
+          // onClose: () => fetchVideos(),
         });
+        setTimeout(() => window.dispatchEvent(new Event('transcodingStarted')), 5000)
       } catch (err) {
         handleAlert({
           type: 'error',
@@ -155,21 +151,18 @@ const UploadCard = ({ authenticated, feedView = false, publicUpload = false, fet
     // eslint-disable-next-line
   }, [selectedFile])
 
-  if (feedView && !uiConfig?.allow_public_upload) return null
-  if (!feedView && !uiConfig?.show_admin_upload) return null
+  if (!authenticated && !uiConfig?.allow_public_upload) return null
+  if (authenticated && !uiConfig?.show_admin_upload) return null
 
   return (
-    <Grid item sx={{ ml: 0.75, mr: 0.75, mb: 3 }}>
-      {reserveDateSpace && (
-        <Box sx={{ height: 20, mb: 1 }} />
-      )}
+    <Grid item sx={{ mx: 1, mt: 2 }}>
       <label htmlFor="icon-button-file">
         {/* Add onDrop and onDragOver handlers */}
         <Paper
           sx={{
             position: 'relative',
-            width: cardWidth,
-            height: cardHeight,
+            width: '100%',
+            height: '50px',
             cursor: 'pointer',
             background: 'rgba(0,0,0,0)',
             overflow: 'hidden',
@@ -178,8 +171,8 @@ const UploadCard = ({ authenticated, feedView = false, publicUpload = false, fet
           onDrop={dropHandler}
           onDragOver={dragOverHandler}
         >
-          <Box sx={{ display: 'flex', p: 2, height: '100%' }} justifyContent="center" alignItems="center">
-            <Stack sx={{ zIndex: 0, width: '100%' }} alignItems="center">
+          <Box sx={{ display: 'flex', p: 1, height: '100%' }} justifyContent="center" alignItems="center">
+            <Stack sx={{ zIndex: 0, width: '100%' }} alignItems="center" justifyContent="center">
               {!isSelected && (
                 <Input
                   id="icon-button-file"
@@ -189,20 +182,27 @@ const UploadCard = ({ authenticated, feedView = false, publicUpload = false, fet
                   onChange={changeHandler}
                 />
               )}
-              <CloudUploadIcon sx={{ fontSize: 75 }} />
+              {progress === 0 && !mini && <CloudUploadIcon sx={{ fontSize: 32 }} />}
+              {progress === 0 && mini && progress === 0 && <CloudUploadIcon sx={{ fontSize: 20 }} />}
               {progress !== 0 && progress !== 1 && (
                 <>
-                  <Typography component="div" variant="overline" align="center" sx={{ fontWeight: 600, fontSize: 16 }}>
-                    Uploading... {(100 * progress).toFixed(0)}%
-                  </Typography>
-                  <Typography variant="overline" align="center" sx={{ fontWeight: 600, fontSize: 12 }}>
-                    {numberFormat.format(uploadRate.loaded.toFixed(0))} /{' '}
-                    {numberFormat.format(uploadRate.total.toFixed(0))} MB's
-                  </Typography>
+                  {!mini ?
+                    <> 
+                      <Typography component="div" variant="overline" align="center" sx={{ fontWeight: 600, fontSize: 12 }}>
+                        Uploading... {(100 * progress).toFixed(0)}%
+                      </Typography>
+                      <Typography variant="overline" align="center" sx={{ fontWeight: 600, fontSize: 12 }}>
+                        {numberFormat.format(uploadRate.loaded.toFixed(0))} /{' '}
+                        {numberFormat.format(uploadRate.total.toFixed(0))} MB's
+                      </Typography>
+                    </> : <Typography component="div" variant="overline" align="center" justifyItems="center" sx={{ fontWeight: 600, fontSize: 12 }}>
+                        {(100 * progress).toFixed(0)}%
+                    </Typography>
+                  }
                 </>
               )}
-              {progress === 1 && (
-                <Typography component="div" variant="overline" align="center" sx={{ fontWeight: 600, fontSize: 16 }}>
+              {progress === 1 && !mini && (
+                <Typography component="div" variant="overline" align="center" sx={{ fontWeight: 600, fontSize: 12 }}>
                   Processing...
                   <Typography
                     component="span"
@@ -215,15 +215,20 @@ const UploadCard = ({ authenticated, feedView = false, publicUpload = false, fet
                   </Typography>
                 </Typography>
               )}
+              {progress === 1 && mini && (
+                <Typography component="div" variant="overline" align="center" justifyItems="center" sx={{ fontWeight: 600, fontSize: 12 }}>
+                  100%
+                </Typography>
+              )}
             </Stack>
           </Box>
           <Box
             sx={{
               position: 'absolute',
               bottom: 0,
               zIndex: -1,
-              height: cardHeight,
-              width: cardWidth * progress,
+              height: mini ? `${progress * 100}%` : '100%',
+              width: mini ? '100%' : `${progress * 100}%`,
               backgroundImage: 'linear-gradient(90deg, #BC00E6DF, #FF3729D9)',
               borderRadius: '10px',
             }}

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

@@ -5,7 +5,6 @@ import VisibilityCard from './VisibilityCard'
 import VideoModal from '../modal/VideoModal'
 import SensorsIcon from '@mui/icons-material/Sensors'
 import { VideoService } from '../../services'
-import UploadCard from './UploadCard'
 import { formatDate } from '../../common/utils'
 
 const getDateKey = (video) => {
@@ -18,8 +17,6 @@ const VideoCards = ({
   videos,
   loadingIcon = null,
   feedView = false,
-  showUploadCard = false,
-  fetchVideos,
   authenticated,
   size,
   editMode = false,
@@ -121,17 +118,6 @@ const VideoCards = ({
         )}
         {loadingIcon}
       </Grid>
-      {!loadingIcon && (
-        <Grid container justifyContent="center">
-          <UploadCard
-            authenticated={authenticated}
-            feedView={feedView}
-            cardWidth={250}
-            handleAlert={memoizedHandleAlert}
-            publicUpload={feedView}
-          />
-        </Grid>
-      )}
     </Paper>
   )
 
@@ -157,25 +143,13 @@ const VideoCards = ({
       {(!vids || vids.length === 0) && EMPTY_STATE()}
       {vids && vids.length !== 0 && (
         <Grid container justifyContent="flex-start">
-          {showUploadCard && (
-            <UploadCard
-              authenticated={authenticated}
-              feedView={feedView}
-              cardWidth={size}
-              handleAlert={memoizedHandleAlert}
-              fetchVideos={fetchVideos}
-              publicUpload={feedView}
-              reserveDateSpace={showDateHeaders}
-            />
-          )}
           {(() => {
             // Pre-compute counts per date
             const dateCounts = {}
             vids.forEach((video) => {
               const key = getDateKey(video)
               dateCounts[key] = (dateCounts[key] || 0) + 1
             })
-            const firstDateKey = vids.length > 0 ? getDateKey(vids[0]) : null
 
             return vids.map((v, index) => {
               const currentDateKey = getDateKey(v)
@@ -185,15 +159,13 @@ const VideoCards = ({
               const isLastOfDate = currentDateKey !== nextDateKey
               const formattedDate = currentDateKey !== 'unknown' ? formatDate(currentDateKey) : 'Unknown Date'
               const hasManyclips = dateCounts[currentDateKey] >= 6
-              // When upload card is shown, first date group uses inline labels to flow with it
-              const isFirstDateGroup = showUploadCard && currentDateKey === firstDateKey
               // Insert flex break after a large date group ends to keep it isolated
               // (applies even to first date group - it flows with upload card but still needs isolation from next date)
               const needsBreakAfter = showDateHeaders && isLastOfDate && hasManyclips && nextDateKey !== null
 
               return (
                 <React.Fragment key={v.path + v.video_id}>
-                  {isNewDate && hasManyclips && !isFirstDateGroup && (
+                  {isNewDate && hasManyclips && (
                     <Box
                       sx={{
                         width: '100%',
@@ -219,8 +191,8 @@ const VideoCards = ({
                     editMode={editMode}
                     isSelected={selectedVideos.has(v.video_id)}
                     onSelect={onVideoSelect}
-                    dateLabel={isNewDate && (!hasManyclips || isFirstDateGroup) ? formattedDate : null}
-                    reserveDateSpace={showDateHeaders && (!hasManyclips || isFirstDateGroup)}
+                    dateLabel={isNewDate && !hasManyclips ? formattedDate : null}
+                    reserveDateSpace={showDateHeaders && !hasManyclips}
                   />
                   {needsBreakAfter && (
                     <Box sx={{ flexBasis: '100%', height: 0 }} />