Sidebar style update / Misc updates

app/client/src/components/nav/DiskSpaceIndicator.js

@@ -30,14 +30,13 @@ const DiskSpaceIndicator = ({ open, visible }) => {
       <Box
         sx={{
           width: 222,
-          m: 1,
-          height: 40,
+          mx: 1,
+          px: 2,
+          py: 1.5,
           border: '1px solid rgba(194, 224, 255, 0.18)',
           borderRadius: '8px',
           display: 'flex',
           alignItems: 'center',
-          pl: 2,
-          pr: 2,
           color: '#EBEBEB',
           fontWeight: 600,
           fontSize: 13,
@@ -70,7 +69,7 @@ const DiskSpaceIndicator = ({ open, visible }) => {
         <Box
           sx={{
             width: 42,
-            m: 1,
+            mx: 1,
             height: 40,
             border: '1px solid rgba(194, 224, 255, 0.18)',
             borderRadius: '8px',
@@ -102,7 +101,7 @@ const DiskSpaceIndicator = ({ open, visible }) => {
       <Box
         sx={{
           width: open ? 222 : 42,
-          m: 1,
+          mx: 1,
           height: 40,
           border: '1px solid rgba(194, 224, 255, 0.18)',
           borderRadius: '8px',

app/client/src/components/nav/TranscodingStatus.js

@@ -1,135 +1,172 @@
 import * as React from 'react'
-import Box from '@mui/material/Box'
-import Divider from '@mui/material/Divider'
+import { Grid, Box, IconButton } from '@mui/material'
 import Typography from '@mui/material/Typography'
 import Tooltip from '@mui/material/Tooltip'
 import { ConfigService } from '../../services'
+import SyncIcon from '@mui/icons-material/Sync'
 
 const TranscodingStatus = ({ open }) => {
   const [status, setStatus] = React.useState(null)
-  const [isPolling, setIsPolling] = React.useState(false)
   const [stoppedMessage, setStoppedMessage] = React.useState(null)
+  const intervalRef = React.useRef(null)
+  const isRunningRef = React.useRef(false)
 
   React.useEffect(() => {
-    const checkInitial = async () => {
-      try {
-        const res = await ConfigService.getTranscodingStatus()
-        if (res.data.is_running) {
-          setStatus(res.data)
-          setIsPolling(true)
-        }
-      } catch (e) {}
-    }
-    checkInitial()
-  }, [])
-
-  React.useEffect(() => {
-    const handleStart = () => {
-      setStoppedMessage(null)
-      setIsPolling(true)
-    }
     const handleCancel = () => {
-      setIsPolling(false)
       setStatus(null)
       setStoppedMessage('Transcoding stopped')
       setTimeout(() => setStoppedMessage(null), 3000)
     }
-    window.addEventListener('transcodingStarted', handleStart)
     window.addEventListener('transcodingCancelled', handleCancel)
     return () => {
-      window.removeEventListener('transcodingStarted', handleStart)
       window.removeEventListener('transcodingCancelled', handleCancel)
     }
   }, [])
 
   React.useEffect(() => {
-    if (!isPolling) return
-
     const checkStatus = async () => {
       try {
         const res = await ConfigService.getTranscodingStatus()
         if (res.data.is_running) {
           setStatus(res.data)
+          if (!isRunningRef.current) {
+            isRunningRef.current = true
+            clearInterval(intervalRef.current)
+            intervalRef.current = setInterval(checkStatus, 3000)
+          }
         } else {
           setStatus(null)
-          setIsPolling(false)
+          if (isRunningRef.current) {
+            isRunningRef.current = false
+            clearInterval(intervalRef.current)
+            intervalRef.current = setInterval(checkStatus, 15000)
+          }
         }
-      } catch (e) {}
+      } catch (e) { }
     }
 
-    checkStatus()
-    const interval = setInterval(checkStatus, 3000)
-    return () => clearInterval(interval)
-  }, [isPolling])
+    const init = async () => {
+      await checkStatus()
+      if (!intervalRef.current) {
+        intervalRef.current = setInterval(checkStatus, 15000)
+      }
+    }
+    init()
 
-  if (!status && !stoppedMessage) return null
+    return () => {
+      clearInterval(intervalRef.current)
+      intervalRef.current = null
+    }
+  }, [])
 
-  if (stoppedMessage) {
-    return (
-      <>
-        <Box sx={{ pl: 2, pr: 2, pb: 1 }}>
-          <Typography
-            sx={{
-              fontFamily: 'monospace',
-              fontWeight: 600,
-              fontSize: open ? 15 : 12,
-              color: '#999',
-            }}
-          >
-            {stoppedMessage}
-          </Typography>
-        </Box>
-        <Divider />
-      </>
-    )
-  }
+  if (!status && !stoppedMessage) return null
 
-  if (open) {
+  if (stoppedMessage && open) {
     return (
       <>
         <Box
           sx={{
-            pl: 2,
-            pr: 2,
-            pb: 1,
+            width: 222,
+            m: 1,
+            px: 2,
+            py: 1.5,
+            border: '1px solid rgba(194, 224, 255, 0.18)',
+            borderRadius: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            color: '#EBEBEB',
+            fontWeight: 600,
+            fontSize: 13,
+            backgroundColor: 'transparent',
+            ':hover': {
+              backgroundColor: 'rgba(194, 224, 255, 0.08)',
+            },
           }}
         >
-          <Typography
-            sx={{
-              fontFamily: 'monospace',
-              fontWeight: 600,
-              fontSize: 15,
-              color: '#EBEBEB',
-            }}
-          >
-            {status.total === 0 ? (
-              'Preparing transcode...'
-            ) : (
-              <>
-                Transcoding{' '}
-                <Box component="span" sx={{ color: '#FF9800' }}>
-                  {status.current}/{status.total}
-                </Box>
-              </>
-            )}
-          </Typography>
-          {status.current_video && (
-            <Tooltip title={status.current_video} arrow placement="right">
+          <Grid container alignItems="center">
+            <Grid item>
               <Typography
                 sx={{
                   fontFamily: 'monospace',
+                  fontWeight: 600,
                   fontSize: 12,
-                  color: '#999',
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
+                  color: '#EBEBEB',
                 }}
               >
-                {status.current_video}
+                {stoppedMessage}
               </Typography>
-            </Tooltip>
-          )}
+            </Grid>
+          </Grid>
         </Box>
-        <Divider />
+      </>
+    )
+  }
+
+  if (open) {
+    return (
+      <>
+        <Tooltip title={status.current_video || 'Not transcoding'} arrow placement="right">
+          <Box
+            sx={{
+              width: 222,
+              m: 1,
+              px: 2,
+              py: 1.5,
+              border: '1px solid rgba(194, 224, 255, 0.18)',
+              borderRadius: '8px',
+              display: 'flex',
+              alignItems: 'center',
+              color: '#EBEBEB',
+              fontWeight: 600,
+              fontSize: 13,
+              backgroundColor: 'transparent',
+              ':hover': {
+                backgroundColor: 'rgba(194, 224, 255, 0.08)',
+              },
+            }}
+          >
+            <Grid container alignItems="center">
+              <Grid item sx={{
+                overflow: 'hidden'
+              }}>
+                <Typography
+                  sx={{
+                    fontFamily: 'monospace',
+                    fontWeight: 600,
+                    fontSize: 12,
+                    color: '#EBEBEB',
+                  }}
+                >
+                  {status.total === 0 ? (
+                    'Preparing transcode...'
+                  ) : (
+                    <>
+                      Transcoding:{' '}
+                      <Box component="span" sx={{ color: '#2684FF' }}>
+                        {status.current}/{status.total}
+                      </Box>
+                    </>
+                  )}
+                </Typography>
+                {status.current_video && (
+
+                  <Typography
+                    sx={{
+                      fontFamily: 'monospace',
+                      fontSize: 10,
+                      color: '#999',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {status.current_video}
+                  </Typography>
+                )}
+              </Grid>
+            </Grid>
+          </Box>
+        </Tooltip >
       </>
     )
   }
@@ -143,24 +180,40 @@ const TranscodingStatus = ({ open }) => {
       <Tooltip title={tooltipText} arrow placement="right">
         <Box
           sx={{
-            pl: 2,
-            pr: 2,
-            pb: 1,
+            width: 42,
+            m: 1,
+            height: 40,
+            border: '1px solid rgba(194, 224, 255, 0.18)',
+            borderRadius: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            ':hover': {
+              backgroundColor: 'rgba(194, 224, 255, 0.08)',
+            },
           }}
         >
           <Typography
             sx={{
               fontFamily: 'monospace',
               fontWeight: 600,
-              fontSize: 12,
-              color: '#FF9800',
+              fontSize: 15,
+              color: '#EBEBEB',
             }}
           >
-            {status.total === 0 ? '...' : `${status.current}/${status.total}`}
+            <IconButton sx={{ p: 0.5, pointerEvents: 'all' }}>
+              <SyncIcon sx={{
+                color: '#EBEBEB',
+                animation: 'spin 1.5s linear infinite',
+                '@keyframes spin': {
+                  '0%': { transform: 'rotate(360deg)' },
+                  '100%': { transform: 'rotate(0deg)' },
+                },
+              }} />
+            </IconButton>
           </Typography>
         </Box>
       </Tooltip>
-      <Divider />
     </>
   )
 }

app/client/src/views/Settings.js

@@ -188,8 +188,8 @@ const Settings = ({ authenticated }) => {
     }
   }
 
-  const checkForWarnings  = async () =>{
-      let warnings = await WarningService.getAdminWarnings()
+  const checkForWarnings = async () => {
+    let warnings = await WarningService.getAdminWarnings()
 
     if (Object.keys(warnings.data).length === 0)
       return;
@@ -540,7 +540,7 @@ const Settings = ({ authenticated }) => {
                       size="small"
                     />
                     <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center' }}>
-                      Transcoding is disabled. Set ENABLE_TRANSCODING=true in your docker container to enable.
+                      Set ENABLE_TRANSCODING=true in your docker container to enable.
                     </Typography>
                   </Box>
                 ) : (

app/server/fireshare/api.py

@@ -571,10 +571,12 @@ def manual_scan_dates():
     try:
         videos = Video.query.filter(Video.recorded_at.is_(None)).all()
         dates_extracted = 0
+        paths = current_app.config['PATHS']
+        videos_path = paths["video"]
 
         for video in videos:
-            filename = Path(video.path).stem
-            recorded_at = util.extract_date_from_filename(filename)
+            video_file_path = videos_path / video.path
+            recorded_at = util.extract_date_from_file(video_file_path)
             if recorded_at:
                 video.recorded_at = recorded_at
                 dates_extracted += 1

app/server/fireshare/cli.py

@@ -239,7 +239,7 @@ def scan_videos(root):
             else:
                 created_at = datetime.fromtimestamp(os.path.getctime(f"{videos_path}/{path}"))
                 updated_at = datetime.fromtimestamp(os.path.getmtime(f"{videos_path}/{path}"))
-                recorded_at = util.extract_date_from_filename(vf.name)
+                recorded_at = util.extract_date_from_file(vf)
                 v = Video(video_id=video_id, extension=vf.suffix, path=path, available=True, created_at=created_at, updated_at=updated_at, recorded_at=recorded_at)
                 logger.info(f"Adding new Video {video_id} at {str(path)} (created {created_at.isoformat()}, updated {updated_at.isoformat()}, recorded {recorded_at.isoformat() if recorded_at else 'N/A'})")
                 new_videos.append(v)
@@ -361,7 +361,7 @@ def scan_video(ctx, path):
             else:
                 created_at = datetime.fromtimestamp(os.path.getctime(f"{videos_path}/{path}"))
                 updated_at = datetime.fromtimestamp(os.path.getmtime(f"{videos_path}/{path}"))
-                recorded_at = util.extract_date_from_filename(video_file.name)
+                recorded_at = util.extract_date_from_file(video_file)
                 v = Video(video_id=video_id, extension=video_file.suffix, path=path, available=True, created_at=created_at, updated_at=updated_at, recorded_at=recorded_at)
                 logger.info(f"Adding new Video {video_id} at {str(path)} (created {created_at.isoformat()}, updated {updated_at.isoformat()}, recorded {recorded_at.isoformat() if recorded_at else 'N/A'})")
                 db.session.add(v)