80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import { RefreshCw, Download } from 'lucide-react'
|
|
|
|
const CHECK_INTERVAL = 60_000 // check every 60s
|
|
|
|
export function UpdateBanner() {
|
|
const [updateAvailable, setUpdateAvailable] = useState(false)
|
|
const [initialVersion, setInitialVersion] = useState<string | null>(null)
|
|
const [updating, setUpdating] = useState(false)
|
|
|
|
const checkVersion = useCallback(async () => {
|
|
try {
|
|
const res = await fetch('/api/version', { cache: 'no-store' })
|
|
const { version } = await res.json()
|
|
if (!version) return
|
|
|
|
if (initialVersion === null) {
|
|
setInitialVersion(version)
|
|
} else if (version !== initialVersion) {
|
|
setUpdateAvailable(true)
|
|
}
|
|
} catch {
|
|
// network error, skip
|
|
}
|
|
}, [initialVersion])
|
|
|
|
useEffect(() => {
|
|
checkVersion()
|
|
const id = setInterval(checkVersion, CHECK_INTERVAL)
|
|
return () => clearInterval(id)
|
|
}, [checkVersion])
|
|
|
|
// Also check on visibility change (user returns to tab)
|
|
useEffect(() => {
|
|
const onVisible = () => {
|
|
if (document.visibilityState === 'visible') checkVersion()
|
|
}
|
|
document.addEventListener('visibilitychange', onVisible)
|
|
return () => document.removeEventListener('visibilitychange', onVisible)
|
|
}, [checkVersion])
|
|
|
|
if (!updateAvailable) return null
|
|
|
|
const handleUpdate = () => {
|
|
setUpdating(true)
|
|
window.location.reload()
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-x-0 top-0 z-[100] bg-gradient-to-r from-purple-700 via-purple-600 to-indigo-600 text-white shadow-2xl animate-in slide-in-from-top duration-300">
|
|
<div className="mx-auto max-w-2xl px-4 py-4 flex flex-col items-center gap-3 sm:flex-row sm:justify-between">
|
|
<div className="flex items-center gap-3 text-center sm:text-left">
|
|
<div className="rounded-full bg-white/20 p-2 animate-pulse">
|
|
<Download className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-base font-bold tracking-tight sm:text-lg">
|
|
Update Available
|
|
</h2>
|
|
<p className="text-xs text-purple-100 sm:text-sm">
|
|
A new version of Jefflix has been deployed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleUpdate}
|
|
disabled={updating}
|
|
className="flex items-center gap-2 rounded-full bg-white text-purple-700 font-bold px-6 py-2.5 text-sm shadow-lg hover:bg-purple-50 active:scale-95 transition-all cursor-pointer disabled:opacity-70 whitespace-nowrap"
|
|
>
|
|
<RefreshCw className={`h-4 w-4 ${updating ? 'animate-spin' : ''}`} />
|
|
{updating ? 'Updating…' : 'Update Now'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|