+
+ )}
+
+
+
+ Auth expired —{' '}
+
+ Update credentials in Settings
+
+
+
+
+
{moreNavItems.map((item) => {
const Icon = item.icon
- const isActive =
- item.to === '/'
- ? location.pathname === '/'
- : location.pathname.startsWith(item.to)
+ const isActive = location.pathname.startsWith(item.to)
return (
)
})}
+
)}
@@ -221,6 +381,22 @@ export default function App() {
/* Icon Components */
+function AdminIcon({ className }) {
+ return (
+
+ )
+}
+
+function LogoutIcon({ className }) {
+ return (
+
+ )
+}
+
function FeedIcon({ className }) {
return (
)
}
+
+function HomeIcon({ className }) {
+ return (
+
+ )
+}
+
+function VideoNavIcon({ className }) {
+ return (
+
+ )
+}
diff --git a/client/src/AuthContext.jsx b/client/src/AuthContext.jsx
new file mode 100644
index 0000000..69758ad
--- /dev/null
+++ b/client/src/AuthContext.jsx
@@ -0,0 +1,71 @@
+import { createContext, useContext, useState, useEffect, useCallback } from 'react'
+import { appAuthStatus, appAuthMe } from './api'
+
+const AuthContext = createContext(null)
+
+export function AuthProvider({ children }) {
+ const [appUser, setAppUser] = useState(null)
+ const [setupRequired, setSetupRequired] = useState(false)
+ const [loading, setLoading] = useState(true)
+
+ useEffect(() => {
+ appAuthStatus().then((data) => {
+ if (data.error) {
+ setLoading(false)
+ return
+ }
+ if (data.setupRequired) {
+ setSetupRequired(true)
+ setLoading(false)
+ return
+ }
+ // Not setup mode — fetch current user
+ appAuthMe().then((meData) => {
+ if (meData.error) {
+ setLoading(false)
+ return
+ }
+ if (meData.setupRequired) {
+ setSetupRequired(true)
+ } else if (meData.user) {
+ setAppUser(meData.user)
+ }
+ setLoading(false)
+ })
+ })
+ }, [])
+
+ const login = useCallback((userData) => {
+ setAppUser(userData)
+ setSetupRequired(false)
+ }, [])
+
+ const logout = useCallback(() => {
+ setAppUser(null)
+ }, [])
+
+ const hasRoute = useCallback((routeKey) => {
+ if (!appUser) return false
+ if (appUser.role === 'admin') return true
+ return appUser.routes?.includes(routeKey) || false
+ }, [appUser])
+
+ const hasFolder = useCallback((folderName) => {
+ if (!appUser) return false
+ if (appUser.role === 'admin') return true
+ if (appUser.folders === null) return true // null = all access
+ return appUser.folders?.includes(folderName) || false
+ }, [appUser])
+
+ return (
+
+
+
+ )
+ }
+
+ return (
+
+ {isVideo ? (
+
+ )
+}
diff --git a/client/src/components/GridWall.jsx b/client/src/components/GridWall.jsx
new file mode 100644
index 0000000..af3791e
--- /dev/null
+++ b/client/src/components/GridWall.jsx
@@ -0,0 +1,238 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import GridCell from './GridCell'
+
+function useFullscreen(ref) {
+ const [isFullscreen, setIsFullscreen] = useState(false)
+
+ useEffect(() => {
+ const onChange = () => setIsFullscreen(!!document.fullscreenElement)
+ document.addEventListener('fullscreenchange', onChange)
+ document.addEventListener('webkitfullscreenchange', onChange)
+ return () => {
+ document.removeEventListener('fullscreenchange', onChange)
+ document.removeEventListener('webkitfullscreenchange', onChange)
+ }
+ }, [])
+
+ const toggle = useCallback(() => {
+ if (!ref.current) return
+ if (document.fullscreenElement) {
+ document.exitFullscreen?.() || document.webkitExitFullscreen?.()
+ } else {
+ ref.current.requestFullscreen?.() || ref.current.webkitRequestFullscreen?.()
+ }
+ }, [ref])
+
+ return { isFullscreen, toggle }
+}
+
+const GRID_LAYOUTS = [
+ { label: '1\u00d71', cols: 1, rows: 1 },
+ { label: '2\u00d71', cols: 2, rows: 1 },
+ { label: '2\u00d72', cols: 2, rows: 2 },
+ { label: '3\u00d72', cols: 3, rows: 2 },
+ { label: '3\u00d73', cols: 3, rows: 3 },
+]
+
+const BATCH_SIZE = 200
+
+export default function GridWall({ layout, fetchItems, hlsEnabled, onClose }) {
+ const cellCount = layout.cols * layout.rows
+ const [queues, setQueues] = useState(() => Array.from({ length: cellCount }, () => []))
+ const [paused, setPaused] = useState(false)
+ const usedIdsRef = useRef(new Set())
+ const fetchingRef = useRef(false)
+ const containerRef = useRef(null)
+ const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(containerRef)
+
+ // Deal items round-robin into cell queues, avoiding duplicates
+ const dealItems = useCallback((items) => {
+ const fresh = items.filter(item => {
+ const key = item.folder ? `${item.folder}/${item.filename}` : `vid-${item.id}`
+ if (usedIdsRef.current.has(key)) return false
+ usedIdsRef.current.add(key)
+ return true
+ })
+
+ if (fresh.length === 0) return
+
+ setQueues(prev => {
+ const next = prev.map(q => [...q])
+ fresh.forEach((item, i) => {
+ next[i % cellCount].push(item)
+ })
+ return next
+ })
+ }, [cellCount])
+
+ // Fetch a batch and deal into queues
+ const fetchAndDeal = useCallback(async () => {
+ if (fetchingRef.current) return
+ fetchingRef.current = true
+ try {
+ const items = await fetchItems(BATCH_SIZE)
+ dealItems(items)
+ } catch (err) {
+ console.error('[GridWall] fetch error:', err)
+ } finally {
+ fetchingRef.current = false
+ }
+ }, [fetchItems, dealItems])
+
+ // Initial load
+ useEffect(() => {
+ fetchAndDeal()
+ }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+ // Keyboard controls
+ useEffect(() => {
+ const handleKey = (e) => {
+ if (e.key === 'Escape' && !document.fullscreenElement) onClose()
+ if (e.key === ' ') {
+ e.preventDefault()
+ setPaused(p => !p)
+ }
+ if (e.key === 'f' || e.key === 'F') toggleFullscreen()
+ }
+ window.addEventListener('keydown', handleKey)
+ return () => window.removeEventListener('keydown', handleKey)
+ }, [onClose, toggleFullscreen])
+
+ return (
+
+ {/* Layer 0 */}
+ 
+ {/* Layer 1 */}
+ 
+
+ )}
+
+ {/* Controls */}
+
+ {isVideo && (
+ <>
+ {/* Mute/Unmute */}
+
+ {/* Seek 25/50/75% */}
+ {[25, 50, 75].map(pct => (
+
+ ))}
+
+ )}
+
+
+
+ {/* Label */}
+
+ {getItemLabel(current)}
+
+
+ {/* Video indicator */}
+ {isVideo && (
+
+
+
+ )}
+
+ {/* Top bar */}
+
+ )
+}
+
+// Picker popover component
+export function GridWallPicker({ onSelect, onClose }) {
+ const ref = useRef(null)
+
+ useEffect(() => {
+ const handleClick = (e) => {
+ if (ref.current && !ref.current.contains(e.target)) onClose()
+ }
+ document.addEventListener('mousedown', handleClick)
+ return () => document.removeEventListener('mousedown', handleClick)
+ }, [onClose])
+
+ return (
+
+
+
+ {/* Grid */}
+
+ {layout.label} Grid
+
+
+ {/* Play/Pause */}
+
+ {/* Fullscreen */}
+
+ {/* Close */}
+
+
+
+ {queues.map((queue, i) => (
+
+
+ {/* Paused indicator */}
+ {paused && (
+
+ Paused · Space to resume
+
+ )}
+
+ {GRID_LAYOUTS.map(layout => (
+
+ ))}
+
+ )
+}
+
+function GridIcon({ cols, rows }) {
+ const size = 16
+ const gap = 1
+ const cellW = (size - gap * (cols - 1)) / cols
+ const cellH = (size - gap * (rows - 1)) / rows
+
+ return (
+
+ )
+}
diff --git a/client/src/components/HlsVideo.jsx b/client/src/components/HlsVideo.jsx
index 9524a1a..be52a24 100644
--- a/client/src/components/HlsVideo.jsx
+++ b/client/src/components/HlsVideo.jsx
@@ -37,8 +37,10 @@ const HlsVideo = forwardRef(function HlsVideo({ hlsSrc, src, autoPlay, ...props
// Always use hls.js when supported (including Safari) for consistent behavior
if (Hls.isSupported()) {
const hls = new Hls({
- maxBufferLength: 10,
- maxMaxBufferLength: 30,
+ maxBufferLength: 30,
+ maxMaxBufferLength: 60,
+ capLevelToPlayerSize: true,
+ startLevel: -1,
emeEnabled: true,
})
hlsRef.current = hls
diff --git a/client/src/components/PostCard.jsx b/client/src/components/PostCard.jsx
index b6db08c..4ef34e4 100644
--- a/client/src/components/PostCard.jsx
+++ b/client/src/components/PostCard.jsx
@@ -33,13 +33,16 @@ function timeAgo(dateStr) {
return 'just now'
}
-export default function PostCard({ post }) {
+export default function PostCard({ post, onDownloadPost, downloadingPosts }) {
const author = post.author || post.fromUser || {}
const media = post.media || []
const text = post.text || post.rawText || ''
const postedAt = post.postedAt || post.createdAt || post.publishedAt
const [showText, setShowText] = useState(false)
+ const isDownloading = downloadingPosts?.has?.(post.id)
+ const hasMedia = media.length > 0
+
return (