ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

refactor(replay): remove session replay functionality and related components to streamline codebase

Browse Source
This commit is contained in:
Usman Baig
2026-01-23 18:21:50 +01:00
parent b64a48cc7d
commit e75d70269f
10 changed files with 6 additions and 1588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
app/sites/[id]/settings/page.tsx
View File

@@ -2,8 +2,7 @@
import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { getSite, updateSite, resetSiteData, deleteSite, type Site, type GeoDataLevel, type ReplayMode } from '@/lib/api/sites'
import { getRealtime } from '@/lib/api/stats'
import { getSite, updateSite, resetSiteData, deleteSite, type Site, type GeoDataLevel } from '@/lib/api/sites'
import { toast } from 'sonner'
import LoadingOverlay from '@/components/LoadingOverlay'
import VerificationModal from '@/components/sites/VerificationModal'
@@ -21,19 +20,8 @@ import {
CopyIcon,
ExclamationTriangleIcon,
LightningBoltIcon,
VideoIcon,
LockClosedIcon,
} from '@radix-ui/react-icons'
/** Sampling rate options: 25, 50, 75, 100. */
const SAMPLING_RATE_OPTIONS = [25, 50, 75, 100] as const
function snapSamplingRate(v: number): number {
return (SAMPLING_RATE_OPTIONS as readonly number[]).reduce(
(best, x) => (Math.abs(x - v) < Math.abs(best - v) ? x : best)
)
}
const TIMEZONES = [
'UTC',
'America/New_York',
@@ -62,7 +50,7 @@ export default function SiteSettingsPage() {
const [site, setSite] = useState<Site | null>(null)
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'replay'>('general')
const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data'>('general')
const [formData, setFormData] = useState({
name: '',
@@ -79,13 +67,7 @@ export default function SiteSettingsPage() {
// Performance insights setting
enable_performance_insights: false,
// Bot and noise filtering
filter_bots: true,
// Session replay settings
replay_mode: 'disabled' as ReplayMode,
replay_sampling_rate: 100,
replay_retention_days: 30,
replay_mask_all_text: false,
replay_mask_all_inputs: true
filter_bots: true
})
const [scriptCopied, setScriptCopied] = useState(false)
const [linkCopied, setLinkCopied] = useState(false)
@@ -117,13 +99,7 @@ export default function SiteSettingsPage() {
// Performance insights setting (default to false)
enable_performance_insights: data.enable_performance_insights ?? false,
// Bot and noise filtering (default to true)
filter_bots: data.filter_bots ?? true,
// Session replay settings (legacy consent_required from API mapped to anonymous_skeleton)
replay_mode: ((data as { replay_mode?: string }).replay_mode === 'consent_required' ? 'anonymous_skeleton' : data.replay_mode) || 'disabled',
replay_sampling_rate: snapSamplingRate(data.replay_sampling_rate ?? 100),
replay_retention_days: data.replay_retention_days ?? 30,
replay_mask_all_text: data.replay_mask_all_text ?? false,
replay_mask_all_inputs: data.replay_mask_all_inputs ?? true
filter_bots: data.filter_bots ?? true
})
if (data.has_password) {
setIsPasswordEnabled(true)
@@ -163,13 +139,7 @@ export default function SiteSettingsPage() {
// Performance insights setting
enable_performance_insights: formData.enable_performance_insights,
// Bot and noise filtering
filter_bots: formData.filter_bots,
// Session replay settings
replay_mode: formData.replay_mode,
replay_sampling_rate: formData.replay_sampling_rate,
replay_retention_days: formData.replay_retention_days,
replay_mask_all_text: formData.replay_mask_all_text,
replay_mask_all_inputs: formData.replay_mask_all_inputs
filter_bots: formData.filter_bots
})
toast.success('Site updated successfully')
loadSite()
@@ -291,17 +261,6 @@ export default function SiteSettingsPage() {
<FileTextIcon className="w-5 h-5" />
Data & Privacy
</button>
<button
onClick={() => setActiveTab('replay')}
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 ${
activeTab === 'replay'
? 'bg-brand-orange/10 text-brand-orange'
: 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
}`}
>
<VideoIcon className="w-5 h-5" />
Session Replay
</button>
</nav>
{/* Content Area */}
@@ -857,174 +816,6 @@ export default function SiteSettingsPage() {
</form>
</div>
)}
{activeTab === 'replay' && (
<div className="space-y-12">
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<h2 className="text-xl font-semibold text-neutral-900 dark:text-white mb-1">Session Replay</h2>
<p className="text-sm text-neutral-500 dark:text-neutral-400">Record and playback visitor sessions to understand user behavior.</p>
</div>
{/* Privacy Mode Selection */}
<div className="space-y-4">
<h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Privacy Mode</h3>
<div className="space-y-3">
{/* Disabled */}
<label className={`block p-4 rounded-xl border-2 cursor-pointer transition-all ${
formData.replay_mode === 'disabled'
? 'border-brand-orange bg-brand-orange/5'
: 'border-neutral-200 dark:border-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-700'
}`}>
<div className="flex items-start gap-3">
<input
type="radio"
name="replay_mode"
value="disabled"
checked={formData.replay_mode === 'disabled'}
onChange={(e) => setFormData({ ...formData, replay_mode: e.target.value as ReplayMode })}
className="mt-1 accent-brand-orange"
/>
<div>
<div className="font-medium text-neutral-900 dark:text-white">Disabled</div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
No session recording. Maximum privacy.
</p>
</div>
</div>
</label>
{/* Anonymous Skeleton */}
<label className={`block p-4 rounded-xl border-2 cursor-pointer transition-all ${
formData.replay_mode === 'anonymous_skeleton'
? 'border-brand-orange bg-brand-orange/5'
: 'border-neutral-200 dark:border-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-700'
}`}>
<div className="flex items-start gap-3">
<input
type="radio"
name="replay_mode"
value="anonymous_skeleton"
checked={formData.replay_mode === 'anonymous_skeleton'}
onChange={(e) => setFormData({ ...formData, replay_mode: e.target.value as ReplayMode })}
className="mt-1 accent-brand-orange"
/>
<div>
<div className="font-medium text-neutral-900 dark:text-white flex items-center gap-2">
Anonymous Skeleton
<span className="inline-flex items-center gap-1 text-xs bg-brand-orange/10 text-brand-orange px-2 py-0.5 rounded">
<LockClosedIcon className="w-3 h-3 flex-shrink-0" />
Privacy First
</span>
</div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
All text replaced with blocks (████), all inputs hidden. Layout and clicks preserved. No consent required.
</p>
</div>
</div>
</label>
</div>
</div>
{/* Recording Settings - Only show when not disabled */}
<AnimatePresence>
{formData.replay_mode !== 'disabled' && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
className="space-y-4 overflow-hidden"
>
<h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300 pt-4 border-t border-neutral-100 dark:border-neutral-800">Recording Settings</h3>
{/* Sampling Rate */}
<div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Sampling Rate</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
Percentage of sessions to record
</p>
</div>
<Select
value={String(formData.replay_sampling_rate)}
onChange={(v) =>
setFormData({ ...formData, replay_sampling_rate: parseInt(v, 10) })
}
options={SAMPLING_RATE_OPTIONS.map((pct) => ({
value: String(pct),
label: `${pct}%`,
}))}
variant="input"
align="right"
className="min-w-[120px]"
/>
</div>
</div>
{/* Retention Period */}
<div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Retention Period</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
How long to keep recordings
</p>
</div>
<Select
value={String(formData.replay_retention_days)}
onChange={(v) => setFormData({ ...formData, replay_retention_days: parseInt(v, 10) })}
options={[
{ value: '7', label: '7 days' },
{ value: '14', label: '14 days' },
{ value: '30', label: '30 days' },
{ value: '60', label: '60 days' },
{ value: '90', label: '90 days' },
]}
variant="input"
align="right"
className="min-w-[120px]"
/>
</div>
</div>
{/* View Replays Link */}
<div className="pt-4">
<a
href={`/sites/${siteId}/replays`}
className="inline-flex items-center gap-2 text-brand-orange hover:underline text-sm font-medium"
>
<VideoIcon className="w-4 h-4" />
View Session Replays →
</a>
</div>
</motion.div>
)}
</AnimatePresence>
<div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
{canEdit && (
<button
type="submit"
disabled={saving}
className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
>
{saving ? (
<div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<>
<CheckIcon className="w-4 h-4" />
Save Changes
</>
)}
</button>
)}
</div>
</form>
</div>
)}
</motion.div>
</div>
</div>