404
++ Az oldal nem található +
++ A keresett tartalom nem létezik, még nem jelent meg, vagy már nem + elérhető. +
+ + Vissza a főoldalra + +Kapcsolat
bss@sch.bme.hu
-
- ![{'instagram]()
- ![{'youtube]()
- ![{'facebook]()
+
+ {socialLinks.map((social) => (
+
+ 
+
+ ))}
-
- ![{'ac'}]()
- ![{'schonherz'}]()
- ![{'simonyi'}]()
- ![{'schdesign'}]()
- ![{'vik'}]()
+
+ {partners.map((partner) => (
+
+ 
+
+ ))}
)
diff --git a/src/components/MemberCard.tsx b/src/components/MemberCard.tsx
index e31b91e..1d4a48b 100644
--- a/src/components/MemberCard.tsx
+++ b/src/components/MemberCard.tsx
@@ -1,8 +1,4 @@
-
-
-export default function MemberCard({
- memberId = 'unknown',
-}: Readonly<{ memberId?: string }>) {
+export default function MemberCard() {
return (
- typeof window !== 'undefined' ? window.location.pathname : '/'
- )
+ const [menuOpen, setMenuOpen] = useState(false)
+ const location = useLocation()
+ const viewerQuery = useQuery({
+ queryKey: ['viewer'],
+ queryFn: fetchViewerState,
+ staleTime: 60_000,
+ })
+ const viewer = viewerQuery.data
+ // Close the mobile menu on route change.
useEffect(() => {
- const handleLocationChange = () => setPathname(window.location.pathname)
-
- // catch back/forward
- window.addEventListener('popstate', handleLocationChange)
-
- // also patch pushState to detect client-side navigations that don't trigger popstate
- const _pushState = history.pushState
- ;(history as any).pushState = function (...args: any[]) {
- _pushState.call(this, args[0], args[1], args[2])
- handleLocationChange()
- }
-
- return () => {
- window.removeEventListener('popstate', handleLocationChange)
- // restore
- ;(history as any).pushState = _pushState
- }
- }, [])
+ setMenuOpen(false)
+ }, [location.href])
return (
)
-}
\ No newline at end of file
+}
+
+/** Logs in, returning to the current page; logout lives in the profile menu. */
+function LoginButton() {
+ const location = useLocation()
+ const returnTo = `${location.pathname}${location.searchStr}`
+ return (
+
+ Belépés
+
+ )
+}
diff --git a/src/components/PageStates.tsx b/src/components/PageStates.tsx
new file mode 100644
index 0000000..1db225d
--- /dev/null
+++ b/src/components/PageStates.tsx
@@ -0,0 +1,145 @@
+import { Link } from '@tanstack/react-router'
+
+/**
+ * Shared page states with Hungarian copy (BSS-019): distinct loading, empty,
+ * and error states for every list and view (spec 18).
+ */
+
+export function LoadingState({ label = 'Betöltés…' }: { label?: string }) {
+ return (
+
+
+ )
+}
+
+export function ForbiddenContent() {
+ return (
+
+
+ )
+}
+
+/* --- Loading placeholders ------------------------------------------------- */
+
+/** Placeholder for a line of text; the caller supplies the height. */
+export function SkeletonLine({ className = '' }: { className?: string }) {
+ return
+}
+
+/**
+ * Placeholder for a video or event card: 16:9 thumbnail plus a heading. Its
+ * sizes match the real card's, so the layout doesn't jump when content
+ * appears.
+ */
+export function ThumbnailCardSkeleton({
+ lines = 1,
+ className = '',
+}: {
+ lines?: number
+ className?: string
+}) {
+ return (
+
+ )
+}
+
+/**
+ * Placeholder for a card grid. The `className` must carry the real grid's
+ * column settings so the placeholders render with the same number of columns.
+ */
+export function ThumbnailGridSkeleton({
+ count,
+ className = '',
+ lines = 1,
+ label = 'Betöltés…',
+}: {
+ count: number
+ className?: string
+ lines?: number
+ label?: string
+}) {
+ return (
+ (EMPTY_RESULTS)
+ const [activeIndex, setActiveIndex] = useState(-1)
+ const boxRef = useRef(null)
+ const abortRef = useRef(null)
+
+ useEffect(() => {
+ function onDocClick(event: MouseEvent) {
+ if (boxRef.current === null) return
+ if (
+ event.target instanceof Node &&
+ boxRef.current.contains(event.target)
+ ) {
+ return
+ }
+ setOpen(false)
+ }
+ document.addEventListener('click', onDocClick)
+ return () => document.removeEventListener('click', onDocClick)
+ }, [])
+
+ useEffect(() => {
+ const trimmed = query.trim()
+ if (trimmed.length < 2) {
+ setResults(EMPTY_RESULTS)
+ setActiveIndex(-1)
+ return
+ }
+ const timer = setTimeout(() => {
+ abortRef.current?.abort()
+ const controller = new AbortController()
+ abortRef.current = controller
+ void fetch(`/api/search?q=${encodeURIComponent(trimmed)}&limit=5`, {
+ signal: controller.signal,
+ })
+ .then((response) => (response.ok ? response.json() : EMPTY_RESULTS))
+ .then((data: SearchResults) => {
+ setResults(data)
+ setOpen(true)
+ })
+ .catch(() => {})
+ }, 250)
+ return () => clearTimeout(timer)
+ }, [query])
+
+ type Hit =
+ | { kind: 'video'; label: string; href: string }
+ | { kind: 'event'; label: string; href: string }
+ | { kind: 'member'; label: string; href: string }
+ | { kind: 'tag'; label: string; href: string }
+
+ const hits: Array = [
+ ...results.videos.map((video) => ({
+ kind: 'video' as const,
+ label: video.title,
+ href: `/videos/${video.slug}`,
+ })),
+ ...results.events.map((event) => ({
+ kind: 'event' as const,
+ label: event.title,
+ href: `/events/${event.slug}`,
+ })),
+ ...results.members.map((member) => ({
+ kind: 'member' as const,
+ label: `${member.fullName} (Tag)`,
+ href: `/members/${member.username}`,
+ })),
+ ...results.tags.map((tag) => ({
+ kind: 'tag' as const,
+ label: `${tag.name} (Címke)`,
+ href: `/videos?tags=${encodeURIComponent(tag.name)}`,
+ })),
+ ]
+
+ function openHit(hit: Hit) {
+ setOpen(false)
+ if (hit.href.startsWith('/videos?')) {
+ const tagName = decodeURIComponent(hit.href.replace('/videos?tags=', ''))
+ void navigate({
+ to: '/videos',
+ search: { tags: [tagName] },
+ })
+ return
+ }
+ window.location.assign(hit.href)
+ }
+
+ function onKeyDown(event: React.KeyboardEvent) {
+ if (event.key === 'Escape') {
+ setOpen(false)
+ setActiveIndex(-1)
+ return
+ }
+ if (!open || hits.length === 0) {
+ return
+ }
+ if (event.key === 'ArrowDown') {
+ event.preventDefault()
+ setActiveIndex((index) => (index + 1) % hits.length)
+ } else if (event.key === 'ArrowUp') {
+ event.preventDefault()
+ setActiveIndex((index) => (index <= 0 ? hits.length - 1 : index - 1))
+ } else if (event.key === 'Enter') {
+ const hit = hits.at(activeIndex)
+ if (hit === undefined) {
+ return
+ }
+ event.preventDefault()
+ openHit(hit)
+ }
+ }
+
+ const kindLabels: Record = {
+ video: 'Videó',
+ event: 'Esemény',
+ member: 'Tag',
+ tag: 'Címke',
+ }
+
+ return (
+ ('auto')
- const [resolvedTheme, setResolvedTheme] = useState(() =>
- resolveThemeMode('auto'),
- )
+ const [resolvedTheme, setResolvedTheme] = useState('light')
useEffect(() => {
- setMode('auto')
- setResolvedTheme(applyThemeMode('auto'))
+ const stored = readStoredMode()
+ setMode(stored)
+ setResolvedTheme(applyThemeMode(stored))
}, [])
useEffect(() => {
@@ -102,29 +117,19 @@ export default function ThemeToggle() {
}, [mode])
function toggleMode() {
- let nextMode: ThemeMode
- if (mode === 'light') {
- nextMode = 'dark'
- } else {
- nextMode = 'light'
- }
+ // From auto mode we switch to the opposite of the currently visible theme,
+ // so that every click produces a noticeable change.
+ const nextMode: ThemeMode = resolvedTheme === 'dark' ? 'light' : 'dark'
setMode(nextMode)
setResolvedTheme(applyThemeMode(nextMode))
window.localStorage.setItem('theme', nextMode)
}
- let modeLabel = 'Light'
- if (mode === 'dark') {
- modeLabel = 'Dark'
- } else if (mode === 'auto') {
- modeLabel = 'Auto'
- }
-
const label =
- mode === 'auto'
- ? 'Theme mode: auto (system). Click to switch to light mode.'
- : `Theme mode: ${mode}. Click to switch mode.`
+ resolvedTheme === 'dark'
+ ? 'Sötét téma aktív. Kattints a világos témára váltáshoz.'
+ : 'Világos téma aktív. Kattints a sötét témára váltáshoz.'
return (
diff --git a/src/components/Thumbnail.tsx b/src/components/Thumbnail.tsx
new file mode 100644
index 0000000..3973282
--- /dev/null
+++ b/src/components/Thumbnail.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+
+/** Every thumbnail is 16:9; a missing image also reserves that space. */
+export const THUMBNAIL_FALLBACK_SRC = '/video-thumbnail.png'
+
+/**
+ * Thumbnail with a fixed 16:9 frame (BSS-019 UI): the frame reserves the
+ * space even before the image arrives, so the grid doesn't jump during
+ * loading. Until the image is ready, the frame flashes as a skeleton; the
+ * image then fades in.
+ */
+export default function Thumbnail({
+ src,
+ alt,
+ className = '',
+ imgClassName = '',
+ loading = 'lazy',
+}: {
+ src: string | null | undefined
+ alt: string
+ /** Extra classes applied to the 16:9 frame. */
+ className?: string
+ /** Extra classes applied to the `![]()
` itself. */
+ imgClassName?: string
+ loading?: 'lazy' | 'eager'
+}) {
+ const resolvedSrc = src ?? THUMBNAIL_FALLBACK_SRC
+ // We store the loaded URL rather than a plain boolean flag: this way the
+ // placeholder resets automatically when `src` changes (e.g. on re-render
+ // after filtering).
+ const [settledSrc, setSettledSrc] = useState(null)
+ const loaded = settledSrc === resolvedSrc
+
+ // The `load` event of an image arriving from cache can fire before hydration
+ // completes, so we also check the `complete` flag via the ref — otherwise
+ // the image would stay invisible.
+ const measureRef = useCallback(
+ (node: HTMLImageElement | null) => {
+ if (node !== null && node.complete) {
+ setSettledSrc(resolvedSrc)
+ }
+ },
+ [resolvedSrc],
+ )
+
+ return (
+ = {
+ anonymous: 'Vendég',
+ schonherz: 'Schönherz',
+ member: 'Tag',
+ leadership: 'Vezetőség',
+}
+
+/** Monogram in place of the profile picture: initials of at most two name parts. */
+function initials(name: string): string {
+ const letters = name
+ .trim()
+ .split(/\s+/)
+ .filter((part) => part !== '')
+ .slice(0, 2)
+ .map((part) => part.slice(0, 1).toLocaleUpperCase('hu-HU'))
+ .join('')
+ return letters === '' ? '?' : letters
+}
+
+function Avatar({
+ name,
+ avatarUrl,
+}: {
+ name: string
+ avatarUrl: string | null
+}) {
+ const [failed, setFailed] = useState(false)
+
+ if (avatarUrl === null || failed) {
+ return (
+
+ )
+ }
+ return (
+ 
setFailed(true)}
+ className="h-8 w-8 shrink-0 rounded-full object-cover"
+ />
+ )
+}
+
+/**
+ * The signed-in viewer's name and avatar in the navbar, with a popover on
+ * click (BSS-019 UI): the menu contains logout and, for members and above,
+ * the admin area. Authorization is decided by the server; the menu only hides
+ * inaccessible items — direct URLs are guarded by the server too (spec 14).
+ */
+export default function UserMenu({ viewer }: { viewer: ViewerStateDto }) {
+ const [open, setOpen] = useState(false)
+ const containerRef = useRef(null)
+ const location = useLocation()
+ const name = viewer.displayName ?? viewer.username ?? 'Profil'
+
+ // Close the menu on route change.
+ useEffect(() => {
+ setOpen(false)
+ }, [location.href])
+
+ useEffect(() => {
+ if (!open) {
+ return
+ }
+ function onPointerDown(event: MouseEvent) {
+ if (
+ containerRef.current !== null &&
+ event.target instanceof Node &&
+ containerRef.current.contains(event.target)
+ ) {
+ return
+ }
+ setOpen(false)
+ }
+ function onKeyDown(event: KeyboardEvent) {
+ if (event.key === 'Escape') {
+ setOpen(false)
+ }
+ }
+ document.addEventListener('mousedown', onPointerDown)
+ document.addEventListener('keydown', onKeyDown)
+ return () => {
+ document.removeEventListener('mousedown', onPointerDown)
+ document.removeEventListener('keydown', onKeyDown)
+ }
+ }, [open])
+
+ const itemClass =
+ 'block w-full px-3 py-2 text-left text-sm font-bold text-(--bss-text-secondary) hover:bg-(--nav-search-bg) hover:text-(--orange)'
+
+ return (
+ (null)
+ const videoRef = useRef(null)
+ const countedRef = useRef(false)
+ const previousVolumeRef = useRef(1)
+ const hudTimerRef = useRef | null>(null)
+ const [errorKey, setErrorKey] = useState(0)
+ const [failed, setFailed] = useState(false)
+ const [isPlaying, setIsPlaying] = useState(false)
+ const [currentTime, setCurrentTime] = useState(0)
+ const [duration, setDuration] = useState(0)
+ const [volume, setVolume] = useState(1)
+ const [isFullscreen, setIsFullscreen] = useState(false)
+ const [isHudVisible, setIsHudVisible] = useState(true)
+
+ useEffect(() => {
+ setFailed(false)
+ setIsPlaying(false)
+ setCurrentTime(0)
+ setDuration(0)
+ countedRef.current = false
+ }, [videoId, videoUrl])
+
+ useEffect(() => {
+ const video = videoRef.current
+ if (!video) return
+
+ const syncDuration = () => {
+ if (Number.isFinite(video.duration) && video.duration > 0) {
+ setDuration(video.duration)
+ }
+ }
+
+ // Metadata can finish loading before hydration attaches React's media
+ // event handlers, especially when the MP4 is already cached.
+ syncDuration()
+ video.addEventListener('loadedmetadata', syncDuration)
+ video.addEventListener('durationchange', syncDuration)
+ video.addEventListener('canplay', syncDuration)
+ return () => {
+ video.removeEventListener('loadedmetadata', syncDuration)
+ video.removeEventListener('durationchange', syncDuration)
+ video.removeEventListener('canplay', syncDuration)
+ }
+ }, [errorKey, videoUrl])
+
+ useEffect(() => {
+ const handleFullscreenChange = () =>
+ setIsFullscreen(document.fullscreenElement === playerRef.current)
+ document.addEventListener('fullscreenchange', handleFullscreenChange)
+ return () =>
+ document.removeEventListener('fullscreenchange', handleFullscreenChange)
+ }, [])
+
+ useEffect(() => {
+ const video = videoRef.current
+ if (!video) return
+
+ const handleMobileFullscreenStart = () => setIsFullscreen(true)
+ const handleMobileFullscreenEnd = () => setIsFullscreen(false)
+ video.addEventListener('webkitbeginfullscreen', handleMobileFullscreenStart)
+ video.addEventListener('webkitendfullscreen', handleMobileFullscreenEnd)
+ return () => {
+ video.removeEventListener(
+ 'webkitbeginfullscreen',
+ handleMobileFullscreenStart,
+ )
+ video.removeEventListener(
+ 'webkitendfullscreen',
+ handleMobileFullscreenEnd,
+ )
+ }
+ }, [errorKey, videoUrl])
+
+ useEffect(() => {
+ revealHud()
+ }, [isFullscreen, isPlaying])
+
+ useEffect(
+ () => () => {
+ if (hudTimerRef.current !== null) clearTimeout(hudTimerRef.current)
+ },
+ [],
+ )
+
+ function handlePlay() {
+ setIsPlaying(true)
+ if (countedRef.current) return
+
+ countedRef.current = true
+ void fetch(`/api/videos/${videoId}/view`, { method: 'POST' }).catch(
+ () => {},
+ )
+ }
+
+ function togglePlayback() {
+ const video = videoRef.current
+ if (!video) return
+ if (video.paused) {
+ void video.play().catch(() => setFailed(true))
+ } else {
+ video.pause()
+ }
+ }
+
+ function skip(seconds: number) {
+ const video = videoRef.current
+ if (!video || !Number.isFinite(video.duration)) return
+ video.currentTime = Math.min(
+ Math.max(video.currentTime + seconds, 0),
+ video.duration,
+ )
+ setCurrentTime(video.currentTime)
+ }
+
+ function changeVolumeBy(amount: number) {
+ const video = videoRef.current
+ if (!video) return
+ const nextVolume = Math.min(Math.max(video.volume + amount, 0), 1)
+ video.volume = nextVolume
+ video.muted = nextVolume === 0
+ setVolume(nextVolume)
+ if (nextVolume > 0) previousVolumeRef.current = nextVolume
+ }
+
+ function handlePlayerKeyDown(event: React.KeyboardEvent) {
+ revealHud()
+
+ const target = event.target as HTMLElement
+ const key = event.key.toLowerCase()
+ if (target !== event.currentTarget) {
+ if (
+ target.closest('input, a, textarea, select, [contenteditable=true]')
+ ) {
+ return
+ }
+ if (target.closest('button') && (key === ' ' || key === 'enter')) {
+ return
+ }
+ }
+
+ const video = videoRef.current
+ if (!video) return
+
+ if (event.repeat && [' ', 'k', 'm', 'f'].includes(key)) {
+ event.preventDefault()
+ return
+ }
+
+ switch (key) {
+ case ' ':
+ case 'k':
+ event.preventDefault()
+ togglePlayback()
+ break
+ case 'j':
+ event.preventDefault()
+ skip(-10)
+ break
+ case 'l':
+ event.preventDefault()
+ skip(10)
+ break
+ case 'arrowleft':
+ event.preventDefault()
+ skip(-5)
+ break
+ case 'arrowright':
+ event.preventDefault()
+ skip(5)
+ break
+ case 'arrowup':
+ event.preventDefault()
+ changeVolumeBy(0.05)
+ break
+ case 'arrowdown':
+ event.preventDefault()
+ changeVolumeBy(-0.05)
+ break
+ case 'm':
+ event.preventDefault()
+ toggleMute()
+ break
+ case 'f':
+ event.preventDefault()
+ void toggleFullscreen()
+ break
+ case 'home':
+ event.preventDefault()
+ video.currentTime = 0
+ setCurrentTime(0)
+ break
+ case 'end':
+ event.preventDefault()
+ if (Number.isFinite(video.duration)) {
+ video.currentTime = video.duration
+ setCurrentTime(video.duration)
+ }
+ break
+ default:
+ if (/^[0-9]$/.test(key) && Number.isFinite(video.duration)) {
+ event.preventDefault()
+ const nextTime = video.duration * (Number(key) / 10)
+ video.currentTime = nextTime
+ setCurrentTime(nextTime)
+ }
+ }
+ }
+
+ function seek(event: React.ChangeEvent) {
+ const video = videoRef.current
+ if (!video) return
+ video.currentTime = Number(event.target.value)
+ setCurrentTime(video.currentTime)
+ }
+
+ function changeVolume(event: React.ChangeEvent) {
+ const video = videoRef.current
+ if (!video) return
+ const nextVolume = Number(event.target.value)
+ video.volume = nextVolume
+ video.muted = nextVolume === 0
+ setVolume(nextVolume)
+ if (nextVolume > 0) previousVolumeRef.current = nextVolume
+ }
+
+ function toggleMute() {
+ const video = videoRef.current
+ if (!video) return
+
+ if (video.muted || volume === 0) {
+ const restoredVolume = previousVolumeRef.current || 1
+ video.muted = false
+ video.volume = restoredVolume
+ setVolume(restoredVolume)
+ } else {
+ previousVolumeRef.current = volume
+ video.muted = true
+ setVolume(0)
+ }
+ }
+
+ async function toggleFullscreen() {
+ const player = playerRef.current
+ const video: WebkitFullscreenVideo | null = videoRef.current
+ if (!player || !video) return
+
+ if (document.fullscreenElement !== null) {
+ try {
+ await document.exitFullscreen()
+ } catch {
+ // The browser owns fullscreen state; leave the player unchanged if
+ // exiting is rejected.
+ }
+ return
+ }
+
+ if (video.webkitDisplayingFullscreen) {
+ video.webkitExitFullscreen?.()
+ return
+ }
+
+ // iOS Safari does not support fullscreen on arbitrary containers. Its
+ // video-specific API must be called directly from the user gesture.
+ if (!document.fullscreenEnabled && video.webkitEnterFullscreen) {
+ video.webkitEnterFullscreen()
+ return
+ }
+
+ try {
+ if (typeof player.requestFullscreen === 'function') {
+ await player.requestFullscreen()
+ return
+ }
+ if (typeof video.requestFullscreen === 'function') {
+ await video.requestFullscreen()
+ return
+ }
+ } catch {
+ // Fall through to the WebKit mobile-video API when the standard API is
+ // present but unavailable for this element.
+ }
+
+ video.webkitEnterFullscreen?.()
+ }
+
+ function revealHud() {
+ setIsHudVisible(true)
+ if (hudTimerRef.current !== null) clearTimeout(hudTimerRef.current)
+
+ if (
+ document.fullscreenElement === playerRef.current &&
+ videoRef.current !== null &&
+ !videoRef.current.paused
+ ) {
+ hudTimerRef.current = setTimeout(() => {
+ setIsHudVisible(false)
+ hudTimerRef.current = null
+ }, 2500)
+ }
+ }
+
+ function retry() {
+ setFailed(false)
+ setErrorKey((value) => value + 1)
+ }
+
+ if (failed) {
+ return (
+ (null)
diff --git a/src/components/admin/._SearchSelect.tsx b/src/components/admin/._SearchSelect.tsx
new file mode 100755
index 0000000..cf353fe
Binary files /dev/null and b/src/components/admin/._SearchSelect.tsx differ
diff --git a/src/components/admin/AdminSidebar.tsx b/src/components/admin/AdminSidebar.tsx
new file mode 100644
index 0000000..4143302
--- /dev/null
+++ b/src/components/admin/AdminSidebar.tsx
@@ -0,0 +1,60 @@
+import { Link, useMatchRoute } from '@tanstack/react-router'
+
+export interface SidebarItem {
+ to: string
+ label: string
+ leadershipOnly?: boolean
+}
+
+/** Sidebar items in order, per chapter 12.1 of the spec. */
+export const ADMIN_SIDEBAR_ITEMS: SidebarItem[] = [
+ { to: '/admin/videos', label: 'Videók' },
+ { to: '/admin/events', label: 'Események' },
+ { to: '/admin/homepage', label: 'Live és kiemelés', leadershipOnly: true },
+ { to: '/admin/catalog/tags', label: 'Címkekatalógus', leadershipOnly: true },
+ {
+ to: '/admin/catalog/staff-roles',
+ label: 'Stábszerepek',
+ leadershipOnly: true,
+ },
+ { to: '/admin/members', label: 'Tagok', leadershipOnly: true },
+ { to: '/admin/trash', label: 'Lomtár' },
+ { to: '/admin/audit', label: 'Auditnapló', leadershipOnly: true },
+]
+
+/**
+ * Admin sidebar (BSS-027): a member does not see leadership menu items — but
+ * the leadership pages are also separately blocked by the server, even via
+ * direct URLs.
+ */
+export function AdminSidebar({ level }: { level: string }) {
+ const matchRoute = useMatchRoute()
+ const items = ADMIN_SIDEBAR_ITEMS.filter(
+ (item) => !item.leadershipOnly || level === 'leadership',
+ )
+
+ return (
+
+ )
+}
diff --git a/src/components/admin/Alerts.tsx b/src/components/admin/Alerts.tsx
new file mode 100644
index 0000000..9053496
--- /dev/null
+++ b/src/components/admin/Alerts.tsx
@@ -0,0 +1,98 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Admin save error states (BSS-028, spec 12.4):
+ * - expired session: the form data stays on the client; it can be resubmitted
+ * after logging in again;
+ * - stale save (409): conflict message + reload option, no "last save wins"
+ * behavior.
+ */
+
+export function LoginRequiredBanner({ loginUrl }: { loginUrl: string }) {
+ return (
+ {
+ key: string
+ header: string
+ render: (row: TRow) => ReactNode
+ /** The primary (bold) row in card view. */
+ primary?: boolean
+}
+
+/**
+ * Shared admin table (BSS-027): a table on desktop, cards on mobile —
+ * instead of a horizontally scrollable table (spec 12.1).
+ */
+export function ResponsiveTable({
+ columns,
+ rows,
+ emptyTitle,
+ emptyDescription,
+}: {
+ columns: Array>
+ rows: readonly TRow[]
+ emptyTitle: string
+ emptyDescription?: string
+}) {
+ if (rows.length === 0) {
+ return
+ onChange: (value: string) => void
+ placeholder?: string
+ searchPlaceholder?: string
+ /** When set, a separate row is added at the top of the list to choose the empty value. */
+ emptyOptionLabel?: string
+ hint?: ReactNode
+ disabled?: boolean
+ triggerClassName?: string
+ /** In filter bars we use a subtler label style. */
+ labelClassName?: string
+ /** The search bar appears above this many items. */
+ searchThreshold?: number
+}) {
+ const [open, setOpen] = useState(false)
+ const [query, setQuery] = useState('')
+ const [activeIndex, setActiveIndex] = useState(0)
+ const containerRef = useRef(null)
+ const panelRef = useRef(null)
+ const listboxId = useId()
+ const labelId = useId()
+ const showSearch = options.length > searchThreshold
+
+ const visible = useMemo(() => {
+ const filtered = options.filter((option) =>
+ matchesSearch(`${option.label} ${option.meta ?? ''}`, query),
+ )
+ return emptyOptionLabel !== undefined
+ ? [{ value: '', label: emptyOptionLabel }, ...filtered]
+ : filtered
+ }, [options, query, emptyOptionLabel])
+
+ const selectedLabel =
+ options.find((option) => option.value === value)?.label ?? null
+
+ useEffect(() => {
+ if (!open) {
+ return
+ }
+ function onPointerDown(event: MouseEvent) {
+ if (
+ containerRef.current !== null &&
+ event.target instanceof Node &&
+ containerRef.current.contains(event.target)
+ ) {
+ return
+ }
+ setOpen(false)
+ }
+ document.addEventListener('mousedown', onPointerDown)
+ return () => document.removeEventListener('mousedown', onPointerDown)
+ }, [open])
+
+ // Without a search bar, the panel gets focus so the arrow keys work.
+ useEffect(() => {
+ if (open && !showSearch) {
+ panelRef.current?.focus()
+ }
+ }, [open, showSearch])
+
+ function select(nextValue: string) {
+ onChange(nextValue)
+ setOpen(false)
+ setQuery('')
+ }
+
+ function onKeyDown(event: React.KeyboardEvent) {
+ if (event.key === 'Escape') {
+ event.preventDefault()
+ setOpen(false)
+ return
+ }
+ if (event.key === 'Enter') {
+ // Works inside filter forms too: Enter selects from the list instead of submitting the form.
+ event.preventDefault()
+ const option = visible.at(activeIndex)
+ if (option !== undefined) {
+ select(option.value)
+ }
+ return
+ }
+ if (visible.length === 0) {
+ return
+ }
+ if (event.key === 'ArrowDown') {
+ event.preventDefault()
+ setActiveIndex((index) => (index + 1) % visible.length)
+ } else if (event.key === 'ArrowUp') {
+ event.preventDefault()
+ setActiveIndex((index) => (index <= 0 ? visible.length - 1 : index - 1))
+ }
+ }
+
+ return (
+
+
+ )
+}
+
+export function EmptyState({
+ title,
+ description,
+}: {
+ title: string
+ description?: string
+}) {
+ return (
+ {label}
+
+
+ )
+}
+
+export function ErrorState({
+ label = 'Hiba történt az adatok betöltése közben. Próbáld újra később.',
+}: {
+ label?: string
+}) {
+ return (
+ {title}
+ {description !== undefined && ( +{description}
+ )} +
+
+ )
+}
+
+export function NotFoundContent() {
+ return (
+ Hoppá!
++ {label} +
+403
++ Hozzáférés megtagadva +
++ Ehhez az oldalhoz nincs jogosultságod. +
+ + Vissza a főoldalra + +
+ {label}
+
+ )
+}
diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx
new file mode 100644
index 0000000..59664c8
--- /dev/null
+++ b/src/components/SearchBox.tsx
@@ -0,0 +1,229 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+
+interface SearchResults {
+ videos: Array<{ slug: string; title: string }>
+ events: Array<{ slug: string; title: string }>
+ members: Array<{ username: string; fullName: string }>
+ tags: Array<{ name: string }>
+}
+
+const EMPTY_RESULTS: SearchResults = {
+ videos: [],
+ events: [],
+ members: [],
+ tags: [],
+}
+
+/**
+ * Global search popover (spec 11.1): from two characters on, with a 250 ms
+ * delay; at most five hits per group; also keyboard-operable.
+ */
+export default function SearchBox() {
+ const navigate = useNavigate()
+ const [query, setQuery] = useState('')
+ const [open, setOpen] = useState(false)
+ const [results, setResults] = useState
+ {Array.from({ length: count }, (_, index) => (
+
+
+
+ )
+}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 5cdc9b3..01522f7 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -4,6 +4,20 @@ type ThemeMode = 'light' | 'dark' | 'auto'
type ResolvedTheme = 'light' | 'dark'
+function isThemeMode(value: unknown): value is ThemeMode {
+ return value === 'light' || value === 'dark' || value === 'auto'
+}
+
+/** The stored setting already applied by the inline script in `__root.tsx`. */
+function readStoredMode(): ThemeMode {
+ try {
+ const stored = window.localStorage.getItem('theme')
+ return isThemeMode(stored) ? stored : 'auto'
+ } catch {
+ return 'auto'
+ }
+}
+
function resolveThemeMode(mode: ThemeMode): ResolvedTheme {
if (typeof window === 'undefined') {
return 'light'
@@ -77,14 +91,15 @@ function MoonIcon() {
}
export default function ThemeToggle() {
+ // SSR always renders light; the real mode is picked up after hydration so
+ // that server and client output match.
const [mode, setMode] = useState
+ setQuery(event.target.value)}
+ onFocus={() => query.trim().length >= 2 && setOpen(true)}
+ onKeyDown={onKeyDown}
+ placeholder="Keresés..."
+ aria-label="Keresés"
+ aria-expanded={open}
+ role="combobox"
+ aria-controls="global-search-results"
+ className="w-40 border-0 text-(--nav-search-placeholder) outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 lg:w-56"
+ />
+
+
+
+ {open && (
+
+ {hits.length === 0 ? (
+
+ )}
+ + Nincs találat. +
+ ) : ( +-
+ {hits.map((hit, index) => (
+
- + + + ))} +
+ 
setSettledSrc(resolvedSrc)}
+ // On a broken URL, don't leave the skeleton flashing forever.
+ onError={() => setSettledSrc(resolvedSrc)}
+ className={`absolute inset-0 block h-full w-full object-cover transition-opacity duration-300 ${
+ loaded ? 'opacity-100' : 'opacity-0'
+ } ${imgClassName}`}
+ />
+
+ )
+}
diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx
new file mode 100644
index 0000000..cea23b7
--- /dev/null
+++ b/src/components/UserMenu.tsx
@@ -0,0 +1,170 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import type { ViewerStateDto } from '#/server/pages/viewer-fn.ts'
+
+const LEVEL_LABELS: Record
+
+
+ {open && (
+
+ )
+}
diff --git a/src/components/VideoDetailPlayer.tsx b/src/components/VideoDetailPlayer.tsx
new file mode 100644
index 0000000..f42f051
--- /dev/null
+++ b/src/components/VideoDetailPlayer.tsx
@@ -0,0 +1,520 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+type WebkitFullscreenVideo = HTMLVideoElement & {
+ webkitDisplayingFullscreen?: boolean
+ webkitEnterFullscreen?: () => void
+ webkitExitFullscreen?: () => void
+}
+
+function formatTime(value: number) {
+ if (!Number.isFinite(value) || value < 0) return '0:00'
+
+ const hours = Math.floor(value / 3600)
+ const minutes = Math.floor((value % 3600) / 60)
+ const seconds = Math.floor(value % 60)
+ return hours > 0
+ ? `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+ : `${minutes}:${seconds.toString().padStart(2, '0')}`
+}
+
+/** Branded MP4 player. A view is counted on the first successful play event. */
+export default function VideoDetailPlayer({
+ videoId,
+ videoUrl,
+ posterUrl,
+ title,
+}: Readonly<{
+ videoId: string
+ videoUrl: string
+ posterUrl?: string | null
+ title: string
+}>) {
+ const playerRef = useRef
+
+ )}
+
+
+
+ {viewer.canAccessAdmin && (
+ setOpen(false)}
+ className={itemClass}
+ >
+ Adminfelület
+
+ )}
+
+
+
+
+ {name}
++ {viewer.username !== null && `${viewer.username} · `} + {LEVEL_LABELS[viewer.level]} +
+
+
+ )
+ }
+
+ const playedPercent = duration > 0 ? (currentTime / duration) * 100 : 0
+
+ return (
+ + A videó lejátszása most nem sikerült. Ellenőrizd a kapcsolatot, majd + próbáld újra. +
+ +
+
+ )
+}
diff --git a/src/components/Videoplayer.tsx b/src/components/Videoplayer.tsx
index bbceabb..aad0b78 100644
--- a/src/components/Videoplayer.tsx
+++ b/src/components/Videoplayer.tsx
@@ -3,10 +3,8 @@
import { useRef, useState, useEffect } from 'react'
export default function Videoplayer({
- videoId = '',
videoUrl = '/test_video.mp4',
}: Readonly<{
- videoId?: string
videoUrl?: string
}>) {
const videoRef = useRef
+
+ )
+}
+
+export function ConflictBanner({
+ message,
+ onReload,
+}: {
+ message: string
+ onReload: () => void
+}) {
+ return (
+ A bejelentkezésed lejárt.
++ A kitöltött adatok nem vesznek el ezen az oldalon.{' '} + + Jelentkezz be újra + {' '} + egy új fülön, majd próbáld meg itt újra menteni. +
+
+
+ )
+}
+
+export function ValidationProblems({ problems }: { problems: string[] }) {
+ return (
+ Ütközés: más módosította közben a rekordot.
+{message}
+ +-
+ {problems.map((problem, index) => (
+
- {problem} + ))} +
+ {children} +
+ ) +} + +/** + * Non-blocking warning (e.g. disallowed media host): the draft can still be + * saved with it, but it cannot be published. + */ +export function WarningList({ warnings }: { warnings: string[] }) { + if (warnings.length === 0) { + return null + } + return ( +
+
+ )
+}
diff --git a/src/components/admin/ResponsiveTable.tsx b/src/components/admin/ResponsiveTable.tsx
new file mode 100644
index 0000000..7c01bcd
--- /dev/null
+++ b/src/components/admin/ResponsiveTable.tsx
@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react'
+import { EmptyState } from '#/components/PageStates.tsx'
+
+export interface AdminColumnFigyelem
+-
+ {warnings.map((warning, index) => (
+
- {warning} + ))} +
+
+
+
+
+ {/* Mobile card view */}
+ | + {column.header} + | + ))} +
|---|
| + {column.render(row)} + | + ))} +
+ {rows.map((row, index) => (
+
+
+ )
+}
diff --git a/src/components/admin/SearchSelect.tsx b/src/components/admin/SearchSelect.tsx
new file mode 100644
index 0000000..f6fb1ae
--- /dev/null
+++ b/src/components/admin/SearchSelect.tsx
@@ -0,0 +1,243 @@
+'use client'
+
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import { matchesSearch } from '#/lib/text-search.ts'
+
+export interface SearchSelectOption {
+ value: string
+ label: string
+ /** Secondary info shown at the end of the row (e.g. event date). */
+ meta?: string
+}
+
+/** Subtler label style for filter bars. */
+export const FILTER_LABEL_CLASS = 'text-xs text-(--bss-text-secondary)'
+
+/** The search bar in the dropdown appears above this many items. */
+export const SEARCH_SELECT_THRESHOLD = 8
+
+/**
+ * Searchable single-select list (combobox) for admin lists: event, staff
+ * member, related video, tag, action. Needed instead of a native `select`
+ * because with hundreds of items you can't search in the dropdown (BSS-028 UI
+ * fix). For short, fixed lists (status, visibility) the search bar is omitted
+ * to avoid a needless field, while keeping the appearance consistent.
+ */
+export function AdminSearchSelect({
+ label,
+ value,
+ options,
+ onChange,
+ placeholder = 'Válassz…',
+ searchPlaceholder = 'Keresés…',
+ emptyOptionLabel,
+ hint,
+ disabled = false,
+ triggerClassName = '',
+ labelClassName = 'font-bold text-(--bss-text)',
+ searchThreshold = SEARCH_SELECT_THRESHOLD,
+}: {
+ label?: string
+ /** Selected value; empty text = no selection. */
+ value: string
+ options: ReadonlyArray
+ {columns.map((column) => (
+
+ ))}
+
+
+ {column.header}:
+
+
+ {column.render(row)}
+
+
+ ))}
+
+ {label !== undefined && (
+
+ {label}
+
+ )}
+
+ )
+}
diff --git a/src/components/admin/VideoVisibility.tsx b/src/components/admin/VideoVisibility.tsx
new file mode 100644
index 0000000..e08bc94
--- /dev/null
+++ b/src/components/admin/VideoVisibility.tsx
@@ -0,0 +1,15 @@
+import { Eye, EyeOff, Lock } from 'lucide-react'
+import { visibilityLabel } from '#/lib/admin-labels.ts'
+
+export function VideoVisibility({ visibility }: { visibility: string }) {
+ const label = visibilityLabel(visibility)
+ const Icon =
+ visibility === 'public' ? Eye : visibility === 'schonherz' ? EyeOff : Lock
+
+ return (
+
+
+ {label}
+
+ )
+}
diff --git a/src/components/admin/form.tsx b/src/components/admin/form.tsx
new file mode 100644
index 0000000..bc9fc3f
--- /dev/null
+++ b/src/components/admin/form.tsx
@@ -0,0 +1,134 @@
+import type { ReactNode } from 'react'
+
+/** Shared admin form fields (BSS-028). */
+
+export function AdminTextField({
+ label,
+ value,
+ onChange,
+ type = 'text',
+ required = false,
+ maxLength,
+ hint,
+}: {
+ label: string
+ value: string
+ onChange: (value: string) => void
+ type?: string
+ required?: boolean
+ /** When set, the field is limited and gets a remaining-character indicator (spec 18). */
+ maxLength?: number
+ hint?: ReactNode
+}) {
+ return (
+
+ )
+}
+
+export function AdminTextArea({
+ label,
+ value,
+ onChange,
+ rows = 4,
+ maxLength,
+ hint,
+}: {
+ label: string
+ value: string
+ onChange: (value: string) => void
+ rows?: number
+ maxLength?: number
+ hint?: ReactNode
+}) {
+ return (
+
+
+
+ {open && (
+
+ {hint !== undefined && (
+ {hint}
+ )}
+
+ {showSearch && (
+ {
+ setQuery(event.target.value)
+ setActiveIndex(0)
+ }}
+ placeholder={searchPlaceholder}
+ aria-label={searchPlaceholder}
+ className="h-10 w-full border-b border-(--nav-border-b) bg-(--nav-search-bg) px-2 outline-none focus:border-(--orange)"
+ />
+ )}
+ {visible.length === 0 ? (
+
+ )}
+ + Nincs találat. +
+ ) : ( +-
+ {visible.map((option, index) => (
+
- + + + ))} +