Develop

README.md

@@ -87,13 +87,13 @@ The goal of Fireshare is to provide a very simple and easy way for you to share
 
 ![list-view]
 
-<h2 align="center">Foldered Sorting</h2>
-<p align="center">Fireshare will use the top most directory that your videos are in as an easy and simple way for you to organize your videos into categories of your choosing.</p>
-
-![folders]
+<h2 align="center">NEW! Automatic Organizing by Games</h2>
+<p align="center">Organize your video clips by games so you know exactly where they are. Fireshare can automatically scan and organize your video clips by games, and organize them with beautiful and relevant cover art.</p>
+<img width="3784" height="1798" alt="Gamestab" src="https://github.com/user-attachments/assets/8d43a29a-3e86-46ff-a598-96331a4cd2f2" />
 
 <h2 align="center">Uploading</h2>
 <p align="center">Allow your community or the public the ability to upload videos. Of course, this feature can be disabled or limited to only administrator access</p>
+![Uploading Gamestab.png…]()
 
 ![uploading]
 
@@ -138,15 +138,6 @@ Connect Fireshare to a central user directory and keep user access organised.
 - [Python](https://www.python.org/)
 - [Material UI](https://mui.com/)
 
-<!--- CHANGE LOG --->
-
-# Changelog
-
-## v1.2.13
-```
-  Added a catch for finding corrupt or malformed files when initiating a scan
-```
-
 <!-- GETTING STARTED -->
 
 # Installation

app/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fireshare",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.0",

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

@@ -10,6 +10,7 @@ import VideoService from '../../services/VideoService'
 import _ from 'lodash'
 import UpdateDetailsModal from '../modal/UpdateDetailsModal'
 import LightTooltip from '../misc/LightTooltip'
+import GameDetectionCard from '../game/GameDetectionCard'
 
 const URL = getUrl()
 const PURL = getPublicWatchUrl()
@@ -36,6 +37,8 @@ const CompactVideoCard = ({
   const [privateView, setPrivateView] = React.useState(video.info?.private)
 
   const [detailsModalOpen, setDetailsModalOpen] = React.useState(false)
+  const [gameSuggestion, setGameSuggestion] = React.useState(null)
+  const [showSuggestion, setShowSuggestion] = React.useState(true)
 
   const previousVideoRef = React.useRef()
   const previousVideo = previousVideoRef.current
@@ -51,6 +54,25 @@ const CompactVideoCard = ({
     previousVideoRef.current = video
   })
 
+  React.useEffect(() => {
+    // Fetch game suggestion when component mounts
+    VideoService.getGameSuggestion(video.video_id)
+      .then((response) => {
+        if (response.data) {
+          setGameSuggestion(response.data)
+          setShowSuggestion(true)
+        }
+      })
+      .catch(() => {
+        // No suggestion or error - that's fine
+      })
+  }, [video.video_id])
+
+  const handleSuggestionComplete = () => {
+    setShowSuggestion(false)
+    setGameSuggestion(null)
+  }
+
   const debouncedMouseEnter = React.useRef(
     _.debounce(() => {
       setHover(true)
@@ -164,9 +186,8 @@ const CompactVideoCard = ({
           variant="contained"
           size="small"
           sx={{
-            width: '100%',
+            width: cardWidth,
             background: '#0b132b',
-
             borderRadius: '6px',
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0,
@@ -239,6 +260,7 @@ const CompactVideoCard = ({
         </ButtonGroup>
         <Box
           sx={{
+            width: cardWidth,
             lineHeight: 0,
             bgcolor: 'rgba(0,0,0,0)',
             p: 0,
@@ -304,8 +326,8 @@ const CompactVideoCard = ({
                 width: cardWidth,
                 minHeight: previewVideoHeight,
                 border: '1px solid #3399FFAE',
-                borderBottomRightRadius: '6px',
-                borderBottomLeftRadius: '6px',
+                borderBottomRightRadius: (authenticated && gameSuggestion && showSuggestion && !editMode) ? 0 : '6px',
+                borderBottomLeftRadius: (authenticated && gameSuggestion && showSuggestion && !editMode) ? 0 : '6px',
                 borderTop: 'none',
                 background: 'repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px)',
                 overflow: 'hidden'
@@ -326,8 +348,8 @@ const CompactVideoCard = ({
                   WebkitAnimationDuration: '1.5s',
                   WebkitAnimationFillMode: 'both',
                   border: '1px solid #3399FFAE',
-                  borderBottomRightRadius: '6px',
-                  borderBottomLeftRadius: '6px',
+                  borderBottomRightRadius: (authenticated && gameSuggestion && showSuggestion && !editMode) ? 0 : '6px',
+                  borderBottomLeftRadius: (authenticated && gameSuggestion && showSuggestion && !editMode) ? 0 : '6px',
                   borderTop: 'none',
                   overflow: 'hidden'
                 }}
@@ -398,6 +420,16 @@ const CompactVideoCard = ({
             </Box>
           </div>
         </Box>
+
+        {/* Game Detection Suggestion Card */}
+        {authenticated && gameSuggestion && showSuggestion && !editMode && (
+          <GameDetectionCard
+            videoId={video.video_id}
+            suggestion={gameSuggestion}
+            onComplete={handleSuggestionComplete}
+            cardWidth={cardWidth}
+          />
+        )}
       </Box>
     </>
   )

app/client/src/components/game/GameDetectionCard.js

@@ -0,0 +1,181 @@
+import React, { useState } from 'react'
+import { Box, IconButton, Typography, Fade } from '@mui/material'
+import CheckIcon from '@mui/icons-material/Check'
+import CloseIcon from '@mui/icons-material/Close'
+import SportsEsportsIcon from '@mui/icons-material/SportsEsports'
+import VideoService from '../../services/VideoService'
+import GameService from '../../services/GameService'
+
+/**
+ * GameDetectionCard - Shows automatic game detection suggestions
+ * Appears below video thumbnails when a game is detected from the filename
+ */
+export default function GameDetectionCard({ videoId, suggestion, onComplete, cardWidth }) {
+  const [loading, setLoading] = useState(false)
+  const [status, setStatus] = useState('pending') // 'pending', 'accepted', 'rejected'
+
+  const handleAccept = async (e) => {
+    e.stopPropagation() // Prevent triggering video card click
+    setLoading(true)
+
+    try {
+      let gameId = suggestion.game_id
+
+      // If game doesn't exist in our DB (came from SteamGridDB), create it first
+      if (!gameId && suggestion.steamgriddb_id) {
+        // Reuse the same logic as GameSearch.js
+        const assets = (await GameService.getGameAssets(suggestion.steamgriddb_id)).data
+        const gameData = {
+          steamgriddb_id: suggestion.steamgriddb_id,
+          name: suggestion.game_name,
+          hero_url: assets.hero_url,
+          logo_url: assets.logo_url,
+          icon_url: assets.icon_url,
+        }
+        const createdGame = (await GameService.createGame(gameData)).data
+        gameId = createdGame.id
+      }
+
+      // Link video to game using existing service
+      await GameService.linkVideoToGame(videoId, gameId)
+
+      // Remove the suggestion from cache
+      await VideoService.rejectGameSuggestion(videoId)
+
+      setStatus('accepted')
+      // Auto-hide after showing success
+      setTimeout(() => {
+        onComplete?.()
+      }, 2000)
+    } catch (err) {
+      console.error('Failed to accept game suggestion:', err)
+      setLoading(false)
+    }
+  }
+
+  const handleReject = async (e) => {
+    e.stopPropagation() // Prevent triggering video card click
+    setLoading(true)
+
+    try {
+      await VideoService.rejectGameSuggestion(videoId)
+      setStatus('rejected')
+      // Hide immediately
+      setTimeout(() => {
+        onComplete?.()
+      }, 300)
+    } catch (err) {
+      console.error('Failed to reject game suggestion:', err)
+      setLoading(false)
+    }
+  }
+
+  if (status === 'accepted') {
+    return (
+      <Fade in timeout={500}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 1,
+            p: 1,
+            width: cardWidth,
+            background: 'rgba(76, 175, 80, 0.2)',
+            borderLeft: '1px solid rgba(76, 175, 80, 0.8)',
+            borderRight: '1px solid rgba(76, 175, 80, 0.8)',
+            borderBottom: '1px solid rgba(76, 175, 80, 0.8)',
+            borderBottomLeftRadius: '6px',
+            borderBottomRightRadius: '6px',
+            lineHeight: 0,
+          }}
+        >
+          <CheckIcon sx={{ color: '#4caf50', fontSize: 20 }} />
+          <Typography variant="body2" sx={{ color: '#4caf50', fontWeight: 600 }}>
+            Linked to {suggestion.game_name}
+          </Typography>
+        </Box>
+      </Fade>
+    )
+  }
+
+  if (status === 'rejected') {
+    return null
+  }
+
+  return (
+    <Fade in timeout={500}>
+      <Box
+        onClick={(e) => e.stopPropagation()} // Prevent triggering video card click
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          p: 1,
+          width: cardWidth,
+          background: '#101c3c',
+          borderLeft: '1px solid #3399FFAE',
+          borderRight: '1px solid #3399FFAE',
+          borderBottom: '1px solid #3399FFAE',
+          borderBottomLeftRadius: '6px',
+          borderBottomRightRadius: '6px',
+          lineHeight: 0,
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flex: 1, minWidth: 0 }}>
+          <SportsEsportsIcon sx={{ color: '#3399FF', fontSize: 20, flexShrink: 0 }} />
+          <Typography
+            variant="body2"
+            sx={{
+              color: 'rgba(255, 255, 255, 0.95)',
+              fontSize: '0.875rem',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            Detected: <strong>{suggestion.game_name}</strong>
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', gap: 0.5, flexShrink: 0 }}>
+          <IconButton
+            size="small"
+            onClick={handleAccept}
+            disabled={loading}
+            sx={{
+              color: '#4caf50',
+              bgcolor: 'rgba(76, 175, 80, 0.1)',
+              '&:hover': {
+                bgcolor: 'rgba(76, 175, 80, 0.2)',
+                transform: 'scale(1.1)',
+              },
+              transition: 'all 0.2s',
+              width: 28,
+              height: 28,
+            }}
+          >
+            <CheckIcon fontSize="small" />
+          </IconButton>
+          <IconButton
+            size="small"
+            onClick={handleReject}
+            disabled={loading}
+            sx={{
+              color: '#f44336',
+              bgcolor: 'rgba(244, 67, 54, 0.1)',
+              '&:hover': {
+                bgcolor: 'rgba(244, 67, 54, 0.2)',
+                transform: 'scale(1.1)',
+              },
+              transition: 'all 0.2s',
+              width: 28,
+              height: 28,
+            }}
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      </Box>
+    </Fade>
+  )
+}

app/client/src/components/modal/VideoModal.js

@@ -94,6 +94,11 @@ const VideoModal = ({ open, onClose, videoId, feedView, authenticated, updateCal
       }
     }
     if (videoId) {
+      // Reset video state before loading new video to prevent showing old data
+      setVideo(null)
+      setTitle('')
+      setDescription('')
+      setSelectedGame(null)
       fetch()
     }
   }, [videoId])
@@ -272,12 +277,13 @@ const VideoModal = ({ open, onClose, videoId, feedView, authenticated, updateCal
               <Box
                 sx={{
                   width: '100%',
-                  maxWidth: 'calc((100vh - 40px - 200px) * 16 / 9)',
+                  maxWidth: 'min(calc((100vh - 40px - 200px) * 16 / 9), calc(100vw - 40px))',
                   display: 'flex',
                   flexDirection: 'column',
                 }}
               >
                 <VideoJSPlayer
+                  key={vid.video_id}
                   sources={getVideoSources(vid.video_id, vid?.info, vid.extension)}
                   poster={getPosterUrl()}
                   autoplay={autoplay}