Add Emby webhook integration and remove unused username field

Add Emby as a third media server integration alongside Plex and Jellyfin.
Emby webhooks use a similar payload format (JSON with nested Item object
and ProviderIds). Also removes the mediaServerUsername field from all
webhook connections since it was never used for authentication — the
token-in-URL is the sole auth mechanism. This simplifies the connection
UX to a single "Connect" button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(pages)/settings/_components/icons.tsx

@@ -19,6 +19,25 @@ export function PlexIcon(props: SVGProps<SVGSVGElement>) {
   );
 }
 
+export function EmbyIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      {...props}
+    >
+      {/* Icon from Simple Icons by Simple Icons Collaborators - https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md */}
+      <path
+        fill="currentColor"
+        d="M11.041 0L0 17.98l11.041 6.02 12.959-6.02zm.058 6.905l7.348 10.607-7.348 3.986-7.306-3.986z"
+      />
+    </svg>
+  );
+}
+
 export function JellyfinIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg

app/(pages)/settings/_components/integrations-section.tsx

@@ -21,31 +21,23 @@ export function IntegrationsSection({
   const plexConnection = connections.find((c) => c.provider === "plex") ?? null;
   const jellyfinConnection =
     connections.find((c) => c.provider === "jellyfin") ?? null;
+  const embyConnection = connections.find((c) => c.provider === "emby") ?? null;
 
-  async function handleSave(provider: "plex" | "jellyfin", username: string) {
-    const label = provider === "plex" ? "Plex" : "Jellyfin";
-    const isNew = !connections.find((c) => c.provider === provider);
+  async function handleConnect(provider: "plex" | "jellyfin" | "emby") {
+    const label =
+      provider === "plex" ? "Plex" : provider === "emby" ? "Emby" : "Jellyfin";
     try {
-      const result = await saveWebhookConnection(provider, username);
-      setConnections((prev) => {
-        const existing = prev.find((c) => c.provider === provider);
-        if (existing) {
-          return prev.map((c) =>
-            c.provider === provider
-              ? { ...result, recentEvents: existing.recentEvents }
-              : c,
-          );
-        }
-        return [...prev, { ...result, recentEvents: [] }];
-      });
-      toast.success(isNew ? `${label} connected` : `${label} updated`);
+      const result = await saveWebhookConnection(provider);
+      setConnections((prev) => [...prev, { ...result, recentEvents: [] }]);
+      toast.success(`${label} connected`);
     } catch {
-      toast.error(`Failed to save ${label} connection`);
+      toast.error(`Failed to connect ${label}`);
     }
   }
 
-  async function handleDelete(provider: "plex" | "jellyfin") {
-    const label = provider === "plex" ? "Plex" : "Jellyfin";
+  async function handleDelete(provider: "plex" | "jellyfin" | "emby") {
+    const label =
+      provider === "plex" ? "Plex" : provider === "emby" ? "Emby" : "Jellyfin";
     const previous = connections;
     setConnections((prev) => prev.filter((c) => c.provider !== provider));
     try {
@@ -57,8 +49,9 @@ export function IntegrationsSection({
     }
   }
 
-  async function handleRegenerateToken(provider: "plex" | "jellyfin") {
-    const label = provider === "plex" ? "Plex" : "Jellyfin";
+  async function handleRegenerateToken(provider: "plex" | "jellyfin" | "emby") {
+    const label =
+      provider === "plex" ? "Plex" : provider === "emby" ? "Emby" : "Jellyfin";
     try {
       const result = await regenerateWebhookToken(provider);
       setConnections((prev) =>
@@ -72,19 +65,18 @@ export function IntegrationsSection({
     }
   }
 
-  async function handleToggle(provider: "plex" | "jellyfin", enabled: boolean) {
-    const label = provider === "plex" ? "Plex" : "Jellyfin";
+  async function handleToggle(
+    provider: "plex" | "jellyfin" | "emby",
+    enabled: boolean,
+  ) {
+    const label =
+      provider === "plex" ? "Plex" : provider === "emby" ? "Emby" : "Jellyfin";
     const previous = connections;
     setConnections((prev) =>
       prev.map((c) => (c.provider === provider ? { ...c, enabled } : c)),
     );
     try {
-      const conn = connections.find((c) => c.provider === provider);
-      await saveWebhookConnection(
-        provider,
-        conn?.mediaServerUsername ?? "",
-        enabled,
-      );
+      await saveWebhookConnection(provider, enabled);
       toast.success(`${label} webhook ${enabled ? "enabled" : "disabled"}`);
     } catch {
       setConnections(previous);
@@ -104,7 +96,7 @@ export function IntegrationsSection({
         <WebhookCard
           provider="plex"
           connection={plexConnection}
-          onSave={handleSave}
+          onConnect={handleConnect}
           onDelete={handleDelete}
           onRegenerateToken={handleRegenerateToken}
           onToggle={handleToggle}
@@ -112,7 +104,15 @@ export function IntegrationsSection({
         <WebhookCard
           provider="jellyfin"
           connection={jellyfinConnection}
-          onSave={handleSave}
+          onConnect={handleConnect}
+          onDelete={handleDelete}
+          onRegenerateToken={handleRegenerateToken}
+          onToggle={handleToggle}
+        />
+        <WebhookCard
+          provider="emby"
+          connection={embyConnection}
+          onConnect={handleConnect}
           onDelete={handleDelete}
           onRegenerateToken={handleRegenerateToken}
           onToggle={handleToggle}

app/(pages)/settings/_components/webhook-card.tsx

@@ -31,13 +31,12 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { JellyfinIcon, PlexIcon } from "./icons";
+import { EmbyIcon, JellyfinIcon, PlexIcon } from "./icons";
 
 export interface WebhookConnection {
   id: string;
-  provider: "plex" | "jellyfin";
+  provider: "plex" | "jellyfin" | "emby";
   token: string;
-  mediaServerUsername: string;
   enabled: boolean;
   lastEventAt: string | null;
   recentEvents: {
@@ -53,41 +52,41 @@ export interface WebhookConnection {
 export function WebhookCard({
   provider,
   connection,
-  onSave,
+  onConnect,
   onDelete,
   onRegenerateToken,
   onToggle,
 }: {
-  provider: "plex" | "jellyfin";
+  provider: "plex" | "jellyfin" | "emby";
   connection: WebhookConnection | null;
-  onSave: (provider: "plex" | "jellyfin", username: string) => Promise<void>;
-  onDelete: (provider: "plex" | "jellyfin") => Promise<void>;
-  onRegenerateToken: (provider: "plex" | "jellyfin") => Promise<void>;
-  onToggle: (provider: "plex" | "jellyfin", enabled: boolean) => Promise<void>;
+  onConnect: (provider: "plex" | "jellyfin" | "emby") => Promise<void>;
+  onDelete: (provider: "plex" | "jellyfin" | "emby") => Promise<void>;
+  onRegenerateToken: (provider: "plex" | "jellyfin" | "emby") => Promise<void>;
+  onToggle: (
+    provider: "plex" | "jellyfin" | "emby",
+    enabled: boolean,
+  ) => Promise<void>;
 }) {
-  const [username, setUsername] = useState(
-    connection?.mediaServerUsername ?? "",
-  );
-  const [saving, setSaving] = useState(false);
+  const [connecting, setConnecting] = useState(false);
   const [copied, setCopied] = useState(false);
   const [setupOpen, setSetupOpen] = useState(false);
   const [cardOpen, setCardOpen] = useState(false);
 
   const isPlex = provider === "plex";
-  const label = isPlex ? "Plex" : "Jellyfin";
-  const Icon = isPlex ? PlexIcon : JellyfinIcon;
+  const isEmby = provider === "emby";
+  const label = isPlex ? "Plex" : isEmby ? "Emby" : "Jellyfin";
+  const Icon = isPlex ? PlexIcon : isEmby ? EmbyIcon : JellyfinIcon;
 
   const webhookUrl = connection
     ? `${window.location.origin}/api/webhooks/${connection.token}`
     : null;
 
-  async function handleSave() {
-    if (!username.trim()) return;
-    setSaving(true);
+  async function handleConnect() {
+    setConnecting(true);
     try {
-      await onSave(provider, username.trim());
+      await onConnect(provider);
     } finally {
-      setSaving(false);
+      setConnecting(false);
     }
   }
 
@@ -147,52 +146,44 @@ export function WebhookCard({
                     href="https://www.plex.tv/plex-pass/"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="font-medium text-foreground inline-flex items-center gap-0.5 hover:underline underline-offset-2"
+                    className="inline-flex items-center gap-0.5 font-medium text-foreground underline-offset-2 hover:underline"
                   >
                     <span>Plex Pass</span>
-                    <IconExternalLink className="size-3 inline-block translate-y-[-1px]" />
+                    <IconExternalLink className="inline-block size-3 translate-y-[-1px]" />
                   </a>{" "}
                   subscription.
                 </p>
               </div>
             )}
 
-            <div>
-              <label
-                htmlFor={`${provider}-username`}
-                className="mb-1 block text-xs text-muted-foreground"
+            {isEmby && (
+              <div className="flex gap-2.5 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2.5">
+                <IconInfoCircle className="mt-0.5 size-3.5 shrink-0 text-primary" />
+                <p className="text-xs leading-relaxed text-foreground/80">
+                  Emby webhooks require an active{" "}
+                  <a
+                    href="https://emby.media/premiere.html"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-0.5 font-medium text-foreground underline-offset-2 hover:underline"
                   >
-                {label} username
-              </label>
-              <div className="flex gap-2">
-                <Input
-                  id={`${provider}-username`}
-                  placeholder={`Your ${label} username`}
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  onKeyDown={(e) => e.key === "Enter" && handleSave()}
-                />
+                    <span>Emby Premiere</span>
+                    <IconExternalLink className="inline-block size-3 translate-y-[-1px]" />
+                  </a>{" "}
+                  subscription.
+                </p>
+              </div>
+            )}
+
             {!connection ? (
               <Button
-                    onClick={handleSave}
-                    disabled={saving || !username.trim()}
+                onClick={handleConnect}
+                disabled={connecting}
+                className="w-full"
               >
-                    {saving ? "Saving..." : "Connect"}
+                {connecting ? "Connecting..." : `Connect ${label}`}
               </Button>
             ) : (
-                  username.trim() !== connection.mediaServerUsername && (
-                    <Button
-                      onClick={handleSave}
-                      disabled={saving || !username.trim()}
-                      variant="outline"
-                    >
-                      Update
-                    </Button>
-                  )
-                )}
-              </div>
-            </div>
-
               <AnimatePresence>
                 {webhookUrl && (
                   <motion.div
@@ -257,6 +248,7 @@ export function WebhookCard({
                   </motion.div>
                 )}
               </AnimatePresence>
+            )}
 
             <Collapsible open={setupOpen} onOpenChange={setSetupOpen}>
               <CollapsibleTrigger className="flex w-full items-center gap-1.5 rounded-md py-1 text-xs text-muted-foreground transition-colors hover:text-foreground">
@@ -286,9 +278,26 @@ export function WebhookCard({
                         Sofa will automatically log movies and episodes when you
                         finish watching them
                       </li>
+                    </ol>
+                  ) : isEmby ? (
+                    <ol className="list-inside list-decimal space-y-1.5">
                       <li>
-                        Make sure the username above matches your Plex account
-                        name
+                        Open Emby, go to{" "}
+                        <span className="font-medium text-foreground">
+                          Settings &gt; Webhooks
+                        </span>
+                      </li>
+                      <li>Add a new webhook and paste the URL above</li>
+                      <li>
+                        Enable the{" "}
+                        <span className="font-medium text-foreground">
+                          Playback Stop
+                        </span>{" "}
+                        event type
+                      </li>
+                      <li>
+                        Sofa will automatically log movies and episodes when you
+                        finish watching them
                       </li>
                     </ol>
                   ) : (
@@ -320,10 +329,6 @@ export function WebhookCard({
                         </span>{" "}
                         notification type
                       </li>
-                      <li>
-                        Make sure the username above matches your Jellyfin
-                        username
-                      </li>
                     </ol>
                   )}
                 </div>

app/(pages)/settings/page.tsx

@@ -46,7 +46,6 @@ export default async function SettingsPage() {
         id: conn.id,
         provider: conn.provider,
         token: conn.token,
-        mediaServerUsername: conn.mediaServerUsername,
         enabled: conn.enabled,
         lastEventAt: conn.lastEventAt?.toISOString() ?? null,
         recentEvents: events.map((e) => ({

app/api/webhooks/[token]/route.ts

@@ -6,6 +6,7 @@ import { webhookConnections } from "@/lib/db/schema";
 import { createLogger } from "@/lib/logger";
 import type { WebhookEvent } from "@/lib/services/webhooks";
 import {
+  parseEmbyPayload,
   parseJellyfinPayload,
   parsePlexPayload,
   processWebhook,
@@ -36,6 +37,9 @@ export async function POST(
     if (connection.provider === "plex") {
       const formData = await req.formData();
       event = parsePlexPayload(formData);
+    } else if (connection.provider === "emby") {
+      const body = await req.json();
+      event = parseEmbyPayload(body);
     } else {
       const body = await req.json();
       event = parseJellyfinPayload(body);

drizzle/20260305054757_high_cobalt_man/migration.sql

@@ -0,0 +1 @@
+ALTER TABLE `webhookConnections` DROP COLUMN `mediaServerUsername`;

lib/actions/settings.ts

@@ -29,18 +29,14 @@ async function getAdminSession() {
 // --- Webhook actions ---
 
 export async function saveWebhookConnection(
-  provider: "plex" | "jellyfin",
-  mediaServerUsername: string,
+  provider: "plex" | "jellyfin" | "emby",
   enabled?: boolean,
 ) {
   const session = await getSession();
 
-  if (!["plex", "jellyfin"].includes(provider)) {
+  if (!["plex", "jellyfin", "emby"].includes(provider)) {
     throw new Error("Invalid provider");
   }
-  if (!mediaServerUsername?.trim()) {
-    throw new Error("Media server username is required");
-  }
 
   const existing = db
     .select()
@@ -57,7 +53,6 @@ export async function saveWebhookConnection(
     const connection = db
       .update(webhookConnections)
       .set({
-        mediaServerUsername: mediaServerUsername.trim(),
         enabled: typeof enabled === "boolean" ? enabled : existing.enabled,
       })
       .where(eq(webhookConnections.id, existing.id))
@@ -81,7 +76,6 @@ export async function saveWebhookConnection(
       userId: session.user.id,
       provider,
       token,
-      mediaServerUsername: mediaServerUsername.trim(),
       enabled: true,
       createdAt: now,
     })
@@ -95,10 +89,12 @@ export async function saveWebhookConnection(
   };
 }
 
-export async function deleteWebhookConnection(provider: "plex" | "jellyfin") {
+export async function deleteWebhookConnection(
+  provider: "plex" | "jellyfin" | "emby",
+) {
   const session = await getSession();
 
-  if (!["plex", "jellyfin"].includes(provider)) {
+  if (!["plex", "jellyfin", "emby"].includes(provider)) {
     throw new Error("Invalid provider");
   }
 
@@ -112,10 +108,12 @@ export async function deleteWebhookConnection(provider: "plex" | "jellyfin") {
     .run();
 }
 
-export async function regenerateWebhookToken(provider: "plex" | "jellyfin") {
+export async function regenerateWebhookToken(
+  provider: "plex" | "jellyfin" | "emby",
+) {
   const session = await getSession();
 
-  if (!["plex", "jellyfin"].includes(provider)) {
+  if (!["plex", "jellyfin", "emby"].includes(provider)) {
     throw new Error("Invalid provider");
   }
 

lib/db/schema.ts

@@ -181,7 +181,7 @@ export const userMovieWatches = sqliteTable(
       .references(() => titles.id, { onDelete: "cascade" }),
     watchedAt: int("watchedAt", { mode: "timestamp" }).notNull(),
     source: text("source", {
-      enum: ["manual", "import", "plex", "jellyfin"],
+      enum: ["manual", "import", "plex", "jellyfin", "emby"],
     })
       .notNull()
       .default("manual"),
@@ -207,7 +207,7 @@ export const userEpisodeWatches = sqliteTable(
       .references(() => episodes.id, { onDelete: "cascade" }),
     watchedAt: int("watchedAt", { mode: "timestamp" }).notNull(),
     source: text("source", {
-      enum: ["manual", "import", "plex", "jellyfin"],
+      enum: ["manual", "import", "plex", "jellyfin", "emby"],
     })
       .notNull()
       .default("manual"),
@@ -297,9 +297,10 @@ export const webhookConnections = sqliteTable(
     userId: text("userId")
       .notNull()
       .references(() => user.id, { onDelete: "cascade" }),
-    provider: text("provider", { enum: ["plex", "jellyfin"] }).notNull(),
+    provider: text("provider", {
+      enum: ["plex", "jellyfin", "emby"],
+    }).notNull(),
     token: text("token").notNull().unique(),
-    mediaServerUsername: text("mediaServerUsername").notNull(),
     enabled: int("enabled", { mode: "boolean" }).notNull().default(true),
     createdAt: int("createdAt", { mode: "timestamp" }).notNull(),
     lastEventAt: int("lastEventAt", { mode: "timestamp" }),

lib/services/tracking.ts

@@ -15,7 +15,7 @@ export function setTitleStatus(
   titleId: string,
   status: "watchlist" | "in_progress" | "completed",
   // biome-ignore lint/correctness/noUnusedFunctionParameters: kept for API consistency with callers
-  source: "manual" | "import" | "plex" | "jellyfin" = "manual",
+  source: "manual" | "import" | "plex" | "jellyfin" | "emby" = "manual",
 ) {
   const now = new Date();
   db.insert(userTitleStatus)
@@ -41,7 +41,7 @@ export function removeTitleStatus(userId: string, titleId: string) {
 export function logMovieWatch(
   userId: string,
   titleId: string,
-  source: "manual" | "import" | "plex" | "jellyfin" = "manual",
+  source: "manual" | "import" | "plex" | "jellyfin" | "emby" = "manual",
 ) {
   const now = new Date();
   db.insert(userMovieWatches)
@@ -70,7 +70,7 @@ export function logMovieWatch(
 export function logEpisodeWatch(
   userId: string,
   episodeId: string,
-  source: "manual" | "import" | "plex" | "jellyfin" = "manual",
+  source: "manual" | "import" | "plex" | "jellyfin" | "emby" = "manual",
 ) {
   const now = new Date();
   db.insert(userEpisodeWatches)
@@ -111,7 +111,7 @@ export function logEpisodeWatch(
 export function markAllEpisodesWatched(
   userId: string,
   titleId: string,
-  source: "manual" | "import" | "plex" | "jellyfin" = "manual",
+  source: "manual" | "import" | "plex" | "jellyfin" | "emby" = "manual",
 ) {
   const title = db.select().from(titles).where(eq(titles.id, titleId)).get();
   if (!title || title.type !== "tv") return;

lib/services/webhooks.ts

@@ -15,7 +15,7 @@ import { logEpisodeWatch, logMovieWatch } from "./tracking";
 // ─── Types ──────────────────────────────────────────────────────────
 
 export interface WebhookEvent {
-  provider: "plex" | "jellyfin";
+  provider: "plex" | "jellyfin" | "emby";
   mediaType: "movie" | "episode";
   title: string;
   tmdbId?: number;
@@ -109,6 +109,39 @@ export function parseJellyfinPayload(
   };
 }
 
+export function parseEmbyPayload(
+  body: Record<string, unknown>,
+): WebhookEvent | null {
+  // Emby sends "playback.stop" or "PlaybackStop" depending on webhook plugin version
+  const event = body.Event as string | undefined;
+  if (event !== "playback.stop" && event !== "PlaybackStop") return null;
+  if (body.PlayedToCompletion !== true) return null;
+
+  const item = body.Item as Record<string, unknown> | undefined;
+  if (!item) return null;
+
+  const itemType = item.Type as string | undefined;
+  const isMovie = itemType === "Movie";
+  const isEpisode = itemType === "Episode";
+  if (!isMovie && !isEpisode) return null;
+
+  const providerIds = (item.ProviderIds ?? {}) as Record<string, string>;
+  const tmdbRaw = providerIds.Tmdb;
+  const tmdbId = tmdbRaw ? Number.parseInt(tmdbRaw, 10) : undefined;
+
+  return {
+    provider: "emby",
+    mediaType: isMovie ? "movie" : "episode",
+    title: (item.Name ?? "") as string,
+    tmdbId: tmdbId && !Number.isNaN(tmdbId) ? tmdbId : undefined,
+    imdbId: providerIds.Imdb || undefined,
+    tvdbId: providerIds.Tvdb || undefined,
+    seasonNumber: item.ParentIndexNumber as number | undefined,
+    episodeNumber: item.IndexNumber as number | undefined,
+    showTitle: (item.SeriesName ?? item.ShowName) as string | undefined,
+  };
+}
+
 // ─── Title Resolution ───────────────────────────────────────────────
 
 async function resolveMovieTmdbId(event: WebhookEvent): Promise<number | null> {
@@ -240,7 +273,12 @@ function logEvent(
   db.insert(webhookEventLog)
     .values({
       connectionId,
-      eventType: event?.provider === "plex" ? "media.scrobble" : "PlaybackStop",
+      eventType:
+        event?.provider === "plex"
+          ? "media.scrobble"
+          : event?.provider === "emby"
+            ? "playback.stop"
+            : "PlaybackStop",
       mediaType: event?.mediaType ?? null,
       mediaTitle: event?.title ?? null,
       status,
@@ -260,7 +298,7 @@ function logEvent(
 export async function processWebhook(
   connectionId: string,
   userId: string,
-  provider: "plex" | "jellyfin",
+  provider: "plex" | "jellyfin" | "emby",
   event: WebhookEvent,
 ): Promise<{ status: "success" | "ignored" | "error"; message: string }> {
   try {