feat: Introduce guest access for video viewing, implement user notification settings via email and Telegram, and add rate limiting infrastructure.

2026-09-11 17:46:06 +00:00 · 2026-02-07 13:56:26 +03:00
parent 296c5257a7
commit 88dcf9514c
17 changed files with 1566 additions and 39 deletions
@@ -101,7 +101,11 @@ export default function ProjectMembersPage() {
        return;
      }

-      setSuccess(`Invited ${data.user.name || data.user.email} as ${inviteRole.toLowerCase()}`);
+      if (data.user) {
+        setSuccess(`Invited ${data.user.name || data.user.email || inviteEmail} as ${inviteRole.toLowerCase()}`);
+      } else {
+        setSuccess(data.message || `Invitation sent to ${inviteEmail}`);
+      }
      setInviteEmail('');
      fetchMembers();
    } catch {
@@ -16,6 +16,7 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { VideoCard } from '@/components/video-card';
+import { GuestGate } from '@/components/guest-gate';
 import { auth } from '@/lib/auth';
 import { db } from '@/lib/db';

@@ -135,7 +136,55 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
  });

  const canEdit = isOwner || project.members[0]?.role === 'ADMIN' || workspaceRole === 'OWNER' || workspaceRole === 'ADMIN';
+  const isAuthenticated = !!session?.user?.id;

+  // Guest name gate for unauthenticated users on public projects
+  if (!isAuthenticated && isPublic) {
+    return (
+      <GuestGate>
+        <ProjectContent
+          project={project}
+          projectId={projectId}
+          videos={videos}
+          canEdit={false}
+          isOwner={false}
+          isPublic={isPublic}
+          workspaceRole={null}
+        />
+      </GuestGate>
+    );
+  }
+
+  return (
+    <ProjectContent
+      project={project}
+      projectId={projectId}
+      videos={videos}
+      canEdit={canEdit}
+      isOwner={isOwner}
+      isPublic={isPublic}
+      workspaceRole={workspaceRole}
+    />
+  );
+}
+
+function ProjectContent({
+  project,
+  projectId,
+  videos,
+  canEdit,
+  isOwner,
+  isPublic,
+  workspaceRole,
+}: {
+  project: { name: string; description: string | null; visibility: string; workspace: { id: string; name: string } | null; members: { role: string }[] };
+  projectId: string;
+  videos: { id: string; title: string; thumbnailUrl: string; currentVersion: number; commentCount: number; duration: string; lastUpdated: string }[];
+  canEdit: boolean;
+  isOwner: boolean;
+  isPublic: boolean;
+  workspaceRole: string | null;
+}) {
  return (
    <div className="px-6 lg:px-8 py-8 w-full">
      {/* Back link */}
@@ -101,6 +101,7 @@ interface VideoData {
    members: { role: string }[];
  };
  versions: (Version & { comments: Comment[] })[];
+  isAuthenticated: boolean;
 }

 function formatTime(seconds: number): string {
@@ -167,6 +168,14 @@ export default function VideoPage() {
  const [isSubmittingEdit, setIsSubmittingEdit] = useState(false);
  const [deletingCommentId, setDeletingCommentId] = useState<string | null>(null);

+  // Guest name (for unauthenticated users on public projects)
+  const [guestName, setGuestName] = useState('');
+  useEffect(() => {
+    const saved = localStorage.getItem('openframe_guest_name');
+    if (saved) setGuestName(saved);
+  }, []);
+  const isGuest = video ? !video.isAuthenticated : false;
+
  // New version dialog
  const [showVersionDialog, setShowVersionDialog] = useState(false);
  const [newVersionUrl, setNewVersionUrl] = useState('');
@@ -371,6 +380,7 @@ export default function VideoPage() {
          content: voiceData ? commentText.trim() || null : commentText,
          timestamp: selectedTimestamp ?? currentTime,
          ...(voiceData && { voiceUrl: voiceData.url, voiceDuration: voiceData.duration }),
+          ...(isGuest && guestName && { guestName }),
        }),
      });

@@ -395,7 +405,7 @@ export default function VideoPage() {
    } finally {
      setIsSubmittingComment(false);
    }
-  }, [commentText, currentTime, selectedTimestamp, activeVersion, activeVersionId]);
+  }, [commentText, currentTime, selectedTimestamp, activeVersion, activeVersionId, isGuest, guestName]);

  // Voice recording handlers
  const startRecording = useCallback(async () => {
@@ -631,6 +641,7 @@ export default function VideoPage() {
          timestamp: comments.find((c) => c.id === parentId)?.timestamp ?? currentTime,
          parentId,
          ...(voiceData && { voiceUrl: voiceData.url, voiceDuration: voiceData.duration }),
+          ...(isGuest && guestName && { guestName }),
        }),
      });
      if (res.ok) {
@@ -0,0 +1,498 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Bell, Send, Mail, CheckCircle2, AlertCircle, Loader2, ExternalLink, Globe } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+
+interface NotificationSettings {
+  telegramBotToken: string | null;
+  telegramChatId: string | null;
+  telegramEnabled: boolean;
+  emailEnabled: boolean;
+  onNewVideo: boolean;
+  onNewComment: boolean;
+  onNewReply: boolean;
+  timezone: string;
+}
+
+function ToggleButton({
+  enabled,
+  onToggle,
+  label,
+  description,
+}: {
+  enabled: boolean;
+  onToggle: () => void;
+  label: string;
+  description?: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className={cn(
+        'flex items-center justify-between w-full p-3 rounded-lg border transition-colors text-left',
+        enabled
+          ? 'border-primary/50 bg-primary/5'
+          : 'border-border hover:bg-accent/50'
+      )}
+    >
+      <div>
+        <span className="text-sm font-medium">{label}</span>
+        {description && (
+          <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
+        )}
+      </div>
+      <div
+        className={cn(
+          'w-10 h-6 rounded-full relative transition-colors',
+          enabled ? 'bg-primary' : 'bg-muted'
+        )}
+      >
+        <div
+          className={cn(
+            'absolute top-1 w-4 h-4 rounded-full bg-white transition-transform',
+            enabled ? 'translate-x-5' : 'translate-x-1'
+          )}
+        />
+      </div>
+    </button>
+  );
+}
+
+export default function SettingsPage() {
+  const [settings, setSettings] = useState<NotificationSettings>({
+    telegramBotToken: null,
+    telegramChatId: null,
+    telegramEnabled: false,
+    emailEnabled: false,
+    onNewVideo: true,
+    onNewComment: true,
+    onNewReply: true,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
+  });
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState<string | null>(null);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  // Form state for Telegram fields (separate from saved settings for editing)
+  const [telegramToken, setTelegramToken] = useState('');
+  const [telegramChatId, setTelegramChatId] = useState('');
+
+  useEffect(() => {
+    async function fetchSettings() {
+      try {
+        const res = await fetch('/api/settings/notifications');
+        if (res.ok) {
+          const data = await res.json();
+          setSettings(data);
+          setTelegramToken(data.telegramBotToken || '');
+          setTelegramChatId(data.telegramChatId || '');
+        }
+      } catch {
+        console.error('Failed to fetch notification settings');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchSettings();
+  }, []);
+
+  const showMessage = useCallback((type: 'success' | 'error', text: string) => {
+    setMessage({ type, text });
+    setTimeout(() => setMessage(null), 4000);
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    try {
+      const res = await fetch('/api/settings/notifications', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...settings,
+          telegramBotToken: telegramToken || null,
+          telegramChatId: telegramChatId || null,
+        }),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setSettings(data);
+        showMessage('success', 'Settings saved');
+      } else {
+        const data = await res.json();
+        showMessage('error', data.error || 'Failed to save');
+      }
+    } catch {
+      showMessage('error', 'Failed to save settings');
+    } finally {
+      setSaving(false);
+    }
+  }, [settings, telegramToken, telegramChatId, showMessage]);
+
+  const handleTest = useCallback(
+    async (channel: 'telegram' | 'email') => {
+      setTesting(channel);
+      try {
+        const res = await fetch('/api/settings/notifications', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            channel,
+            telegramBotToken: telegramToken,
+            telegramChatId,
+          }),
+        });
+        const data = await res.json();
+        if (res.ok) {
+          showMessage('success', data.message);
+        } else {
+          showMessage('error', data.error || 'Test failed');
+        }
+      } catch {
+        showMessage('error', 'Test failed');
+      } finally {
+        setTesting(null);
+      }
+    },
+    [telegramToken, telegramChatId, showMessage]
+  );
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto py-8 px-4">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
+        <p className="text-muted-foreground mt-1">
+          Manage your notification preferences
+        </p>
+      </div>
+
+      {/* Status message */}
+      {message && (
+        <div
+          className={cn(
+            'flex items-center gap-2 p-3 rounded-lg mb-6 text-sm',
+            message.type === 'success'
+              ? 'bg-green-500/10 text-green-700 dark:text-green-400'
+              : 'bg-destructive/10 text-destructive'
+          )}
+        >
+          {message.type === 'success' ? (
+            <CheckCircle2 className="h-4 w-4 shrink-0" />
+          ) : (
+            <AlertCircle className="h-4 w-4 shrink-0" />
+          )}
+          {message.text}
+        </div>
+      )}
+
+      {/* Event Subscriptions */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Bell className="h-5 w-5" />
+            Notification Events
+          </CardTitle>
+          <CardDescription>
+            Choose which events trigger notifications
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <ToggleButton
+            enabled={settings.onNewVideo}
+            onToggle={() =>
+              setSettings((s) => ({ ...s, onNewVideo: !s.onNewVideo }))
+            }
+            label="New Video Added"
+            description="When a new video is added to one of your projects"
+          />
+          <ToggleButton
+            enabled={settings.onNewComment}
+            onToggle={() =>
+              setSettings((s) => ({ ...s, onNewComment: !s.onNewComment }))
+            }
+            label="New Comment"
+            description="When someone leaves a comment on your videos"
+          />
+          <ToggleButton
+            enabled={settings.onNewReply}
+            onToggle={() =>
+              setSettings((s) => ({ ...s, onNewReply: !s.onNewReply }))
+            }
+            label="New Reply"
+            description="When someone replies to a comment thread"
+          />
+        </CardContent>
+      </Card>
+
+      {/* Telegram */}
+      <Card className="mb-6">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              <Send className="h-5 w-5" />
+              Telegram
+            </CardTitle>
+            <Badge variant={settings.telegramEnabled ? 'default' : 'secondary'}>
+              {settings.telegramEnabled ? 'Enabled' : 'Disabled'}
+            </Badge>
+          </div>
+          <CardDescription>
+            Get instant notifications via a Telegram bot
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="rounded-lg border bg-muted/50 p-3 text-sm text-muted-foreground space-y-1">
+            <p className="font-medium text-foreground">Setup instructions:</p>
+            <ol className="list-decimal list-inside space-y-1 text-xs">
+              <li>
+                Open Telegram and message{' '}
+                <a
+                  href="https://t.me/BotFather"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline inline-flex items-center gap-0.5"
+                >
+                  @BotFather <ExternalLink className="h-3 w-3" />
+                </a>
+              </li>
+              <li>Send <code className="px-1 py-0.5 bg-background rounded text-xs">/newbot</code> and follow the prompts to create a bot</li>
+              <li>Copy the <strong>Bot Token</strong> and paste it below</li>
+              <li>
+                Send a message to your new bot, then visit{' '}
+                <a
+                  href="https://api.telegram.org"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline inline-flex items-center gap-0.5"
+                >
+                  api.telegram.org <ExternalLink className="h-3 w-3" />
+                </a>{' '}
+                <code className="px-1 py-0.5 bg-background rounded text-xs">/bot&lt;token&gt;/getUpdates</code> to find your <strong>Chat ID</strong>
+              </li>
+            </ol>
+          </div>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="telegram-token">Bot Token</Label>
+              <Input
+                id="telegram-token"
+                type="password"
+                placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
+                value={telegramToken}
+                onChange={(e) => setTelegramToken(e.target.value)}
+                className="mt-1 font-mono text-sm"
+              />
+            </div>
+            <div>
+              <Label htmlFor="telegram-chat-id">Chat ID</Label>
+              <Input
+                id="telegram-chat-id"
+                placeholder="-1001234567890"
+                value={telegramChatId}
+                onChange={(e) => setTelegramChatId(e.target.value)}
+                className="mt-1 font-mono text-sm"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <ToggleButton
+              enabled={settings.telegramEnabled}
+              onToggle={() =>
+                setSettings((s) => ({ ...s, telegramEnabled: !s.telegramEnabled }))
+              }
+              label="Enable Telegram notifications"
+            />
+          </div>
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handleTest('telegram')}
+            disabled={!telegramToken || !telegramChatId || testing === 'telegram'}
+          >
+            {testing === 'telegram' ? (
+              <Loader2 className="h-4 w-4 animate-spin mr-2" />
+            ) : (
+              <Send className="h-4 w-4 mr-2" />
+            )}
+            Send Test Message
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* Email */}
+      <Card className="mb-6">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              <Mail className="h-5 w-5" />
+              Email
+            </CardTitle>
+            <Badge variant={settings.emailEnabled ? 'default' : 'secondary'}>
+              {settings.emailEnabled ? 'Enabled' : 'Disabled'}
+            </Badge>
+          </div>
+          <CardDescription>
+            Receive notification emails to your account email address
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <ToggleButton
+            enabled={settings.emailEnabled}
+            onToggle={() =>
+              setSettings((s) => ({ ...s, emailEnabled: !s.emailEnabled }))
+            }
+            label="Enable email notifications"
+          />
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handleTest('email')}
+            disabled={!settings.emailEnabled || testing === 'email'}
+          >
+            {testing === 'email' ? (
+              <Loader2 className="h-4 w-4 animate-spin mr-2" />
+            ) : (
+              <Mail className="h-4 w-4 mr-2" />
+            )}
+            Send Test Email
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* Timezone */}
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Globe className="h-5 w-5" />
+            Timezone
+          </CardTitle>
+          <CardDescription>
+            Timestamps in notifications will use this timezone
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Select
+            value={settings.timezone}
+            onValueChange={(value) =>
+              setSettings((s) => ({ ...s, timezone: value }))
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select timezone" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Americas</SelectLabel>
+                <SelectItem value="America/New_York">Eastern Time (New York)</SelectItem>
+                <SelectItem value="America/Chicago">Central Time (Chicago)</SelectItem>
+                <SelectItem value="America/Denver">Mountain Time (Denver)</SelectItem>
+                <SelectItem value="America/Los_Angeles">Pacific Time (Los Angeles)</SelectItem>
+                <SelectItem value="America/Anchorage">Alaska (Anchorage)</SelectItem>
+                <SelectItem value="Pacific/Honolulu">Hawaii (Honolulu)</SelectItem>
+                <SelectItem value="America/Toronto">Toronto</SelectItem>
+                <SelectItem value="America/Vancouver">Vancouver</SelectItem>
+                <SelectItem value="America/Mexico_City">Mexico City</SelectItem>
+                <SelectItem value="America/Sao_Paulo">São Paulo</SelectItem>
+                <SelectItem value="America/Argentina/Buenos_Aires">Buenos Aires</SelectItem>
+                <SelectItem value="America/Bogota">Bogotá</SelectItem>
+              </SelectGroup>
+              <SelectGroup>
+                <SelectLabel>Europe</SelectLabel>
+                <SelectItem value="Europe/London">London (GMT/BST)</SelectItem>
+                <SelectItem value="Europe/Paris">Paris (CET)</SelectItem>
+                <SelectItem value="Europe/Berlin">Berlin (CET)</SelectItem>
+                <SelectItem value="Europe/Amsterdam">Amsterdam (CET)</SelectItem>
+                <SelectItem value="Europe/Madrid">Madrid (CET)</SelectItem>
+                <SelectItem value="Europe/Rome">Rome (CET)</SelectItem>
+                <SelectItem value="Europe/Zurich">Zurich (CET)</SelectItem>
+                <SelectItem value="Europe/Stockholm">Stockholm (CET)</SelectItem>
+                <SelectItem value="Europe/Helsinki">Helsinki (EET)</SelectItem>
+                <SelectItem value="Europe/Athens">Athens (EET)</SelectItem>
+                <SelectItem value="Europe/Istanbul">Istanbul (TRT)</SelectItem>
+                <SelectItem value="Europe/Moscow">Moscow (MSK)</SelectItem>
+                <SelectItem value="Europe/Kiev">Kyiv (EET)</SelectItem>
+                <SelectItem value="Europe/Warsaw">Warsaw (CET)</SelectItem>
+              </SelectGroup>
+              <SelectGroup>
+                <SelectLabel>Asia & Pacific</SelectLabel>
+                <SelectItem value="Asia/Dubai">Dubai (GST)</SelectItem>
+                <SelectItem value="Asia/Kolkata">India (IST)</SelectItem>
+                <SelectItem value="Asia/Bangkok">Bangkok (ICT)</SelectItem>
+                <SelectItem value="Asia/Singapore">Singapore (SGT)</SelectItem>
+                <SelectItem value="Asia/Hong_Kong">Hong Kong (HKT)</SelectItem>
+                <SelectItem value="Asia/Shanghai">Shanghai (CST)</SelectItem>
+                <SelectItem value="Asia/Tokyo">Tokyo (JST)</SelectItem>
+                <SelectItem value="Asia/Seoul">Seoul (KST)</SelectItem>
+                <SelectItem value="Asia/Taipei">Taipei (CST)</SelectItem>
+                <SelectItem value="Asia/Jakarta">Jakarta (WIB)</SelectItem>
+                <SelectItem value="Australia/Sydney">Sydney (AEST)</SelectItem>
+                <SelectItem value="Australia/Melbourne">Melbourne (AEST)</SelectItem>
+                <SelectItem value="Australia/Perth">Perth (AWST)</SelectItem>
+                <SelectItem value="Pacific/Auckland">Auckland (NZST)</SelectItem>
+              </SelectGroup>
+              <SelectGroup>
+                <SelectLabel>Africa & Middle East</SelectLabel>
+                <SelectItem value="Africa/Cairo">Cairo (EET)</SelectItem>
+                <SelectItem value="Africa/Lagos">Lagos (WAT)</SelectItem>
+                <SelectItem value="Africa/Johannesburg">Johannesburg (SAST)</SelectItem>
+                <SelectItem value="Africa/Nairobi">Nairobi (EAT)</SelectItem>
+                <SelectItem value="Asia/Riyadh">Riyadh (AST)</SelectItem>
+                <SelectItem value="Asia/Tehran">Tehran (IRST)</SelectItem>
+              </SelectGroup>
+              <SelectGroup>
+                <SelectLabel>Other</SelectLabel>
+                <SelectItem value="UTC">UTC</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </CardContent>
+      </Card>
+
+      <Separator className="my-6" />
+
+      {/* Save button */}
+      <div className="flex justify-end">
+        <Button onClick={handleSave} disabled={saving}>
+          {saving ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin mr-2" />
+              Saving...
+            </>
+          ) : (
+            'Save Settings'
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
@@ -101,7 +101,11 @@ export default function WorkspaceMembersPage() {
        return;
      }

-      setSuccess(`Invited ${data.user.name || data.user.email} as ${inviteRole.toLowerCase()}`);
+      if (data.user) {
+        setSuccess(`Invited ${data.user.name || data.user.email || inviteEmail} as ${inviteRole.toLowerCase()}`);
+      } else {
+        setSuccess(data.message || `Invitation sent to ${inviteEmail}`);
+      }
      setInviteEmail('');
      fetchMembers();
    } catch {
@@ -54,7 +54,10 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
            return NextResponse.json({ error: 'Access denied' }, { status: 403 });
        }

-        return NextResponse.json(video);
+        return NextResponse.json({
+            ...video,
+            isAuthenticated: !!session?.user?.id,
+        });
    } catch (error) {
        console.error('Error fetching video:', error);
        return NextResponse.json(
@@ -4,6 +4,7 @@ import { auth } from '@/lib/auth';
 import { ProjectMemberRole } from '@prisma/client';
 import { validateUrl, validateOptionalUrl } from '@/lib/validation';
 import { rateLimit } from '@/lib/rate-limit';
+import { notifyProjectOwner } from '@/lib/notifications';

 type RouteParams = { params: Promise<{ projectId: string }> };

@@ -141,6 +142,18 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
            },
        });

+        // Notify project owner (fire-and-forget, skip if they added it themselves)
+        if (project.ownerId !== session.user.id) {
+            const baseUrl = process.env.NEXTAUTH_URL || '';
+            notifyProjectOwner(project.ownerId, {
+                type: 'new_video',
+                projectName: project.name,
+                videoTitle: title.trim(),
+                addedBy: session.user.name || 'A team member',
+                url: `${baseUrl}/watch/${video.id}`,
+            }).catch((err) => console.error('Notification failed:', err));
+        }
+
        return NextResponse.json(video, { status: 201 });
    } catch (error) {
        console.error('Error creating video:', error);
@@ -0,0 +1,220 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { db } from '@/lib/db';
+import { auth } from '@/lib/auth';
+import { rateLimit } from '@/lib/rate-limit';
+import nodemailer from 'nodemailer';
+import { testEmailHtml } from '@/lib/notifications';
+
+// GET /api/settings/notifications — Fetch current notification preferences
+export async function GET() {
+    try {
+        const session = await auth();
+        if (!session?.user?.id) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const settings = await db.notificationSetting.findUnique({
+            where: { userId: session.user.id },
+        });
+
+        // Return defaults if no settings exist yet
+        return NextResponse.json(
+            settings ?? {
+                telegramBotToken: null,
+                telegramChatId: null,
+                telegramEnabled: false,
+                emailEnabled: false,
+                onNewVideo: true,
+                onNewComment: true,
+                onNewReply: true,
+                timezone: 'UTC',
+            }
+        );
+    } catch (error) {
+        console.error('Error fetching notification settings:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch settings' },
+            { status: 500 }
+        );
+    }
+}
+
+// PUT /api/settings/notifications — Update notification preferences
+export async function PUT(request: NextRequest) {
+    try {
+        const limited = await rateLimit(request, 'mutate');
+        if (limited) return limited;
+
+        const session = await auth();
+        if (!session?.user?.id) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await request.json();
+        const {
+            telegramBotToken,
+            telegramChatId,
+            telegramEnabled,
+            emailEnabled,
+            onNewVideo,
+            onNewComment,
+            onNewReply,
+            timezone,
+        } = body;
+
+        // Validate: if enabling Telegram, both token and chatId are required
+        if (telegramEnabled && (!telegramBotToken || !telegramChatId)) {
+            return NextResponse.json(
+                { error: 'Telegram Bot Token and Chat ID are required to enable Telegram notifications' },
+                { status: 400 }
+            );
+        }
+
+        const settings = await db.notificationSetting.upsert({
+            where: { userId: session.user.id },
+            create: {
+                userId: session.user.id,
+                telegramBotToken: telegramBotToken || null,
+                telegramChatId: telegramChatId || null,
+                telegramEnabled: !!telegramEnabled,
+                emailEnabled: !!emailEnabled,
+                onNewVideo: onNewVideo ?? true,
+                onNewComment: onNewComment ?? true,
+                onNewReply: onNewReply ?? true,
+                timezone: timezone || 'UTC',
+            },
+            update: {
+                telegramBotToken: telegramBotToken || null,
+                telegramChatId: telegramChatId || null,
+                telegramEnabled: !!telegramEnabled,
+                emailEnabled: !!emailEnabled,
+                onNewVideo: onNewVideo ?? true,
+                onNewComment: onNewComment ?? true,
+                onNewReply: onNewReply ?? true,
+                timezone: timezone || 'UTC',
+            },
+        });
+
+        return NextResponse.json(settings);
+    } catch (error) {
+        console.error('Error updating notification settings:', error);
+        return NextResponse.json(
+            { error: 'Failed to update settings' },
+            { status: 500 }
+        );
+    }
+}
+
+// POST /api/settings/notifications — Test a notification channel
+export async function POST(request: NextRequest) {
+    try {
+        const limited = await rateLimit(request, 'mutate');
+        if (limited) return limited;
+
+        const session = await auth();
+        if (!session?.user?.id) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await request.json();
+        const { channel, telegramBotToken, telegramChatId } = body;
+
+        if (channel === 'telegram') {
+            if (!telegramBotToken || !telegramChatId) {
+                return NextResponse.json(
+                    { error: 'Bot Token and Chat ID are required' },
+                    { status: 400 }
+                );
+            }
+
+            const settingsUrl = `${process.env.NEXTAUTH_URL || ''}/settings`;
+            const telegramPayload: Record<string, unknown> = {
+                chat_id: telegramChatId,
+                text: '✅ OpenFrame notifications connected successfully!\n\nYou will receive notifications here when activity happens on your projects.',
+                link_preview_options: { is_disabled: true },
+            };
+            // Telegram inline keyboard buttons require HTTPS URLs
+            if (settingsUrl.startsWith('https://')) {
+                telegramPayload.reply_markup = {
+                    inline_keyboard: [[{ text: 'Open Settings', url: settingsUrl }]],
+                };
+            }
+            const res = await fetch(`https://api.telegram.org/bot${telegramBotToken}/sendMessage`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(telegramPayload),
+            });
+
+            if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                const desc = (data as { description?: string }).description || 'Unknown error';
+                return NextResponse.json(
+                    { error: `Telegram test failed: ${desc}` },
+                    { status: 400 }
+                );
+            }
+
+            return NextResponse.json({ success: true, message: 'Test message sent to Telegram' });
+        }
+
+        if (channel === 'email') {
+            const user = await db.user.findUnique({
+                where: { id: session.user.id },
+                select: { email: true },
+            });
+
+            if (!user?.email) {
+                return NextResponse.json(
+                    { error: 'No email address on your account' },
+                    { status: 400 }
+                );
+            }
+
+            const smtpHost = process.env.SMTP_HOST;
+            const smtpPort = Number(process.env.SMTP_PORT || '587');
+            const smtpUser = process.env.SMTP_USER;
+            const smtpPass = process.env.SMTP_PASSWORD;
+
+            if (!smtpHost || !smtpUser || !smtpPass) {
+                return NextResponse.json(
+                    { error: 'Email service not configured (SMTP settings missing)' },
+                    { status: 500 }
+                );
+            }
+
+            const transporter = nodemailer.createTransport({
+                host: smtpHost,
+                port: smtpPort,
+                secure: smtpPort === 465,
+                auth: { user: smtpUser, pass: smtpPass },
+            });
+
+            const fromAddress = process.env.SMTP_FROM || process.env.EMAIL_FROM || 'OpenFrame <[email protected]>';
+
+            try {
+                await transporter.sendMail({
+                    from: fromAddress,
+                    to: user.email,
+                    subject: '[OpenFrame] Test notification',
+                    html: testEmailHtml(),
+                });
+            } catch (emailErr) {
+                console.error('SMTP test email failed:', emailErr);
+                return NextResponse.json(
+                    { error: 'Failed to send test email — check SMTP settings' },
+                    { status: 500 }
+                );
+            }
+
+            return NextResponse.json({ success: true, message: `Test email sent to ${user.email}` });
+        }
+
+        return NextResponse.json({ error: 'Unknown channel' }, { status: 400 });
+    } catch (error) {
+        console.error('Error testing notification:', error);
+        return NextResponse.json(
+            { error: 'Failed to test notification' },
+            { status: 500 }
+        );
+    }
+}
@@ -3,6 +3,7 @@ import { db } from '@/lib/db';
 import { auth } from '@/lib/auth';
 import { validateOptionalUrl } from '@/lib/validation';
 import { rateLimit } from '@/lib/rate-limit';
+import { notifyProjectOwner } from '@/lib/notifications';

 type RouteParams = { params: Promise<{ versionId: string }> };

@@ -184,6 +185,45 @@ export async function POST(request: NextRequest, { params }: RouteParams) {
            },
        });

+        // Notify project owner (fire-and-forget, skip self-notifications)
+        const commentAuthorName = session?.user?.name || guestName || 'Someone';
+        const isOwnProject = session?.user?.id === project.ownerId;
+        if (!isOwnProject) {
+            const baseUrl = process.env.NEXTAUTH_URL || '';
+            const videoTitle = version.video.title || 'Untitled Video';
+            const mins = Math.floor(parseFloat(timestamp) / 60);
+            const secs = Math.floor(parseFloat(timestamp) % 60);
+            const ts = `${mins}:${secs.toString().padStart(2, '0')}`;
+
+            if (parentId) {
+                // It's a reply — look up parent author
+                const parentComment = await db.comment.findUnique({
+                    where: { id: parentId },
+                    include: { author: { select: { name: true } } },
+                });
+                notifyProjectOwner(project.ownerId, {
+                    type: 'new_reply',
+                    projectName: project.name,
+                    videoTitle,
+                    replyAuthor: commentAuthorName,
+                    replyText: content?.trim() || '(voice note)',
+                    parentAuthor: parentComment?.author?.name || parentComment?.guestName || 'Someone',
+                    timestamp: ts,
+                    url: `${baseUrl}/watch/${version.video.id}`,
+                }).catch((err) => console.error('Notification failed:', err));
+            } else {
+                notifyProjectOwner(project.ownerId, {
+                    type: 'new_comment',
+                    projectName: project.name,
+                    videoTitle,
+                    commentAuthor: commentAuthorName,
+                    commentText: content?.trim() || '(voice note)',
+                    timestamp: ts,
+                    url: `${baseUrl}/watch/${version.video.id}`,
+                }).catch((err) => console.error('Notification failed:', err));
+            }
+        }
+
        return NextResponse.json(comment, { status: 201 });
    } catch (error) {
        console.error('Error creating comment:', error);
@@ -53,7 +53,19 @@ export async function GET(request: NextRequest, { params }: RouteParams) {
            return NextResponse.json({ error: 'Access denied' }, { status: 403 });
        }

-        return NextResponse.json(video);
+        // Include auth context so the client knows if the viewer is a guest
+        const { project, ...videoData } = video;
+        return NextResponse.json({
+            ...videoData,
+            projectId: video.projectId,
+            project: {
+                name: project.name,
+                ownerId: project.ownerId,
+                visibility: project.visibility,
+            },
+            isAuthenticated: !!session?.user?.id,
+            canComment: isOwner || isMember || isPublic,
+        });
    } catch (error) {
        console.error('Error fetching video:', error);
        return NextResponse.json(
@@ -25,6 +25,7 @@ import {
  Trash2,
  X,
  ArrowUpRight,
+  User,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -83,9 +84,11 @@ interface VideoData {
  project: {
    name: string;
    ownerId: string;
-    members: { role: string }[];
+    visibility: string;
  };
  versions: (Version & { comments: Comment[] })[];
+  isAuthenticated: boolean;
+  canComment: boolean;
 }

 function formatTime(seconds: number): string {
@@ -148,6 +151,18 @@ export default function WatchPage() {
  const [isSubmittingEdit, setIsSubmittingEdit] = useState(false);
  const [deletingCommentId, setDeletingCommentId] = useState<string | null>(null);
  const [guestName, setGuestName] = useState('');
+  const [guestNameConfirmed, setGuestNameConfirmed] = useState(false);
+
+  // Restore guest name from localStorage
+  useEffect(() => {
+    const saved = localStorage.getItem('openframe_guest_name');
+    if (saved) {
+      setGuestName(saved);
+      setGuestNameConfirmed(true);
+    }
+  }, []);
+
+  const isGuest = video ? !video.isAuthenticated : false;

  // Fetch video data
  useEffect(() => {
@@ -310,6 +325,7 @@ export default function WatchPage() {
          content: voiceData ? commentText.trim() || null : commentText,
          timestamp: selectedTimestamp ?? currentTime,
          ...(voiceData && { voiceUrl: voiceData.url, voiceDuration: voiceData.duration }),
+          ...(isGuest && guestName && { guestName }),
        }),
      });

@@ -334,7 +350,7 @@ export default function WatchPage() {
    } finally {
      setIsSubmittingComment(false);
    }
-  }, [commentText, currentTime, selectedTimestamp, activeVersion, activeVersionId]);
+  }, [commentText, currentTime, selectedTimestamp, activeVersion, activeVersionId, isGuest, guestName]);

  // Voice recording handlers
  const startRecording = useCallback(async () => {
@@ -536,11 +552,11 @@ export default function WatchPage() {
              versions: prev.versions.map((v) =>
                v.id === activeVersionId
                  ? {
-                      ...v,
-                      comments: v.comments.map((c) =>
-                        c.id === commentId ? { ...c, isResolved: !c.isResolved } : c
-                      ),
-                    }
+                    ...v,
+                    comments: v.comments.map((c) =>
+                      c.id === commentId ? { ...c, isResolved: !c.isResolved } : c
+                    ),
+                  }
                  : v
              ),
            };
@@ -567,6 +583,7 @@ export default function WatchPage() {
          timestamp: comments.find((c) => c.id === parentId)?.timestamp ?? currentTime,
          parentId,
          ...(voiceData && { voiceUrl: voiceData.url, voiceDuration: voiceData.duration }),
+          ...(isGuest && guestName && { guestName }),
        }),
      });
      if (res.ok) {
@@ -578,13 +595,13 @@ export default function WatchPage() {
            versions: prev.versions.map((v) =>
              v.id === activeVersionId
                ? {
-                    ...v,
-                    comments: v.comments.map((c) =>
-                      c.id === parentId
-                        ? { ...c, replies: [...c.replies, newReply] }
-                        : c
-                    ),
-                  }
+                  ...v,
+                  comments: v.comments.map((c) =>
+                    c.id === parentId
+                      ? { ...c, replies: [...c.replies, newReply] }
+                      : c
+                  ),
+                }
                : v
            ),
          };
@@ -686,17 +703,17 @@ export default function WatchPage() {
            versions: prev.versions.map((v) =>
              v.id === activeVersionId
                ? {
-                    ...v,
-                    comments: v.comments.map((c) => {
-                      if (c.id === commentId) return { ...c, content: editText.trim() };
-                      return {
-                        ...c,
-                        replies: c.replies.map((r) =>
-                          r.id === commentId ? { ...r, content: editText.trim() } : r
-                        ),
-                      };
-                    }),
-                  }
+                  ...v,
+                  comments: v.comments.map((c) => {
+                    if (c.id === commentId) return { ...c, content: editText.trim() };
+                    return {
+                      ...c,
+                      replies: c.replies.map((r) =>
+                        r.id === commentId ? { ...r, content: editText.trim() } : r
+                      ),
+                    };
+                  }),
+                }
                : v
            ),
          };
@@ -724,14 +741,14 @@ export default function WatchPage() {
            versions: prev.versions.map((v) =>
              v.id === activeVersionId
                ? {
-                    ...v,
-                    comments: v.comments
-                      .filter((c) => c.id !== commentId)
-                      .map((c) => ({
-                        ...c,
-                        replies: c.replies.filter((r) => r.id !== commentId),
-                      })),
-                  }
+                  ...v,
+                  comments: v.comments
+                    .filter((c) => c.id !== commentId)
+                    .map((c) => ({
+                      ...c,
+                      replies: c.replies.filter((r) => r.id !== commentId),
+                    })),
+                }
                : v
            ),
          };
@@ -790,6 +807,56 @@ export default function WatchPage() {
    );
  }

+  // Guest name gate — prompt guests to enter their name before viewing
+  if (isGuest && !guestNameConfirmed) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-background">
+        <div className="w-full max-w-sm mx-auto p-6">
+          <div className="text-center mb-6">
+            <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 mb-4">
+              <User className="h-6 w-6 text-primary" />
+            </div>
+            <h1 className="text-xl font-semibold mb-1">Welcome to OpenFrame</h1>
+            <p className="text-sm text-muted-foreground">
+              Enter your name to view and comment on this video
+            </p>
+          </div>
+          <div className="space-y-3">
+            <Input
+              placeholder="Your name"
+              value={guestName}
+              onChange={(e) => setGuestName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && guestName.trim()) {
+                  localStorage.setItem('openframe_guest_name', guestName.trim());
+                  setGuestNameConfirmed(true);
+                }
+              }}
+              autoFocus
+            />
+            <Button
+              className="w-full"
+              disabled={!guestName.trim()}
+              onClick={() => {
+                localStorage.setItem('openframe_guest_name', guestName.trim());
+                setGuestNameConfirmed(true);
+              }}
+            >
+              Continue
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground text-center mt-4">
+            Or{' '}
+            <Link href="/login" className="text-primary hover:underline">
+              sign in
+            </Link>{' '}
+            for a full account
+          </p>
+        </div>
+      </div>
+    );
+  }
+
  const embedUrl = getEmbedUrl(activeVersion);

  return (