Develop

.gitignore

@@ -1,4 +1,5 @@
 .vscode/
+.claude/
 
 # db
 db.sqlite

README.md

@@ -41,6 +41,8 @@
 - Mobile Device Support
 - Uploads (optional, can be restricted)
 - Video view counting
+- Video Cropping
+- Video Tags for improved search and categorization
 - Open Graph metadata for rich link previews
 - RSS feed for new public videos
 - LDAP support

app/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fireshare",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.9.0",
@@ -14,6 +14,7 @@
     "framer-motion": "^12.34.3",
     "lodash": "^4.17.21",
     "react": "^18.1.0",
+    "react-color": "^2.19.3",
     "react-copy-to-clipboard": "^5.1.0",
     "react-day-picker": "^9.14.0",
     "react-device-detect": "^2.2.2",
@@ -24,7 +25,8 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.3.2",
-    "typeface-roboto": "^1.1.13"
+    "typeface-roboto": "^1.1.13",
+    "wavesurfer.js": "^7.12.4"
   },
   "proxy": "http://localhost:3001",
   "scripts": {

app/client/src/App.js

@@ -10,11 +10,14 @@ import Settings from './views/Settings'
 import Feed from './views/Feed'
 import Games from './views/Games'
 import GameVideos from './views/GameVideos'
+import Tags from './views/Tags'
+import TagVideos from './views/TagVideos'
 import darkTheme from './common/darkTheme'
 import { ConfigService } from './services'
 import { getSetting, setSetting } from './common/utils'
 import AuthWrapper from './components/utils/AuthWrapper'
 import Navbar20 from './components/nav/Navbar20'
+import GlobalDragDropOverlay from './components/utils/GlobalDragDropOverlay'
 
 const muitheme = createTheme(darkTheme)
 
@@ -34,12 +37,13 @@ export default function App() {
     <Router>
       <ThemeProvider theme={muitheme}>
         <CssBaseline />
+        <GlobalDragDropOverlay>
         <Routes>
           <Route
             path="/"
             element={
               <AuthWrapper redirect={'/feed'}>
-                <Navbar20 page="/" collapsed={!drawerOpen} searchable styleToggle cardSlider>
+                <Navbar20 page="/" collapsed={!drawerOpen} searchable styleToggle cardSlider searchPlaceholder="Search title, game, or #tag...">
                   <Dashboard />
                 </Navbar20>
               </AuthWrapper>
@@ -49,7 +53,7 @@ export default function App() {
             path="/feed"
             element={
               <AuthWrapper>
-                <Navbar20 page="/feed" collapsed={!drawerOpen} searchable styleToggle cardSlider>
+                <Navbar20 page="/feed" collapsed={!drawerOpen} searchable styleToggle cardSlider searchPlaceholder="Search title, game, or #tag...">
                   <Feed />
                 </Navbar20>
               </AuthWrapper>
@@ -95,6 +99,26 @@ export default function App() {
               </AuthWrapper>
             }
           />
+          <Route
+            path="/tags"
+            element={
+              <AuthWrapper>
+                <Navbar20 page="/tags" collapsed={!drawerOpen} searchable searchPlaceholder="Search tags...">
+                  <Tags />
+                </Navbar20>
+              </AuthWrapper>
+            }
+          />
+          <Route
+            path="/tags/:tagId"
+            element={
+              <AuthWrapper>
+                <Navbar20 page="/tags" collapsed={!drawerOpen} styleToggle cardSlider searchable mainPadding={0}>
+                  <TagVideos />
+                </Navbar20>
+              </AuthWrapper>
+            }
+          />
           <Route
             path="/w/:id"
             element={
@@ -114,6 +138,7 @@ export default function App() {
             }
           />
         </Routes>
+        </GlobalDragDropOverlay>
       </ThemeProvider>
     </Router>
   )

app/client/src/common/utils.js

@@ -144,13 +144,23 @@ export const getVideoUrl = (videoId, quality, extension) => {
  */
 export const getVideoSources = (videoId, videoInfo, extension) => {
   const sources = []
+  const URL = getUrl()
+  const SERVED_BY = getServedBy()
 
   const has480p = videoInfo?.has_480p
   const has720p = videoInfo?.has_720p
   const has1080p = videoInfo?.has_1080p
+  const hasCrop = videoInfo?.has_crop
+
+  // When a cropped version exists, point "Source" at the cropped file instead of the original
+  const sourceUrl = hasCrop
+    ? (SERVED_BY === 'nginx'
+        ? `${URL}/_content/derived/${videoId}/${videoId}-cropped.mp4`
+        : `${URL}/api/video?id=${videoId}&quality=cropped`)
+    : getVideoUrl(videoId, 'original', extension)
 
   sources.push({
-    src: getVideoUrl(videoId, 'original', extension),
+    src: sourceUrl,
     type: 'video/mp4',
     label: 'Source',
     selected: true,