Self hosted fixes (#1332)

* don't rely on NEXT_PUBLIC_WEB_URL in embed code * add /embed to allowed self hosting routes * remove videos

Author: Brendonovich

apps/web/app/(org)/dashboard/caps/components/SharingDialog.tsx

@@ -16,13 +16,14 @@ import { useMutation } from "@tanstack/react-query";
 import clsx from "clsx";
 import { motion } from "framer-motion";
 import { Check, Globe2, Search } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { shareCap } from "@/actions/caps/share";
 import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
 import type { Spaces } from "@/app/(org)/dashboard/dashboard-data";
 import { SignedImageUrl } from "@/components/SignedImageUrl";
 import { Tooltip } from "@/components/Tooltip";
+import { usePublicEnv } from "@/utils/public-env";
 
 interface SharingDialogProps {
 isOpen: boolean;
@@ -182,13 +183,9 @@ export const SharingDialog: React.FC<SharingDialogProps> = ({
 });
 };
 
-const handleCopyEmbedCode = async () => {
-const embedCode = `<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="${
-process.env.NODE_ENV === "development"
-? process.env.NEXT_PUBLIC_WEB_URL
-: "https://cap.so"
-}/embed/${capId}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>`;
+const embedCode = useEmbedCode(capId);
 
+const handleCopyEmbedCode = async () => {
 try {
 await navigator.clipboard.writeText(embedCode);
 toast.success("Embed code copied to clipboard");
@@ -325,11 +322,7 @@ export const SharingDialog: React.FC<SharingDialogProps> = ({
 <div className="space-y-4">
 <div className="p-3 rounded-lg border bg-gray-3 border-gray-4">
 <code className="font-mono text-xs break-all text-gray-11">
-{`<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="${
-process.env.NODE_ENV === "development"
-? process.env.NEXT_PUBLIC_WEB_URL
-: "https://cap.so"
-}/embed/${capId}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>`}
+{embedCode}
 </code>
 </div>
 <Button
@@ -447,3 +440,28 @@ const SpaceCard = ({
 </Tooltip>
 );
 };
+
+function useEmbedCode(capId: Video.VideoId) {
+const publicEnv = usePublicEnv();
+
+return useMemo(
+() =>
+`
+<div style="position: relative; padding-bottom: 56.25%; height: 0;">
+<iframe
+src="${publicEnv.webUrl}/embed/${capId}"
+frameborder="0"
+webkitallowfullscreen
+mozallowfullscreen
+allowfullscreen
+style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+></iframe>
+</div>
+`
+.trim()
+.replace(/[\n\t]+/g, " ")
+.replace(/>\s+</g, "><")
+.replace(/"\s+>/g, '">'),
+[publicEnv.webUrl, capId],
+);
+}

apps/web/app/embed/[videoId]/page.tsx

@@ -162,13 +162,7 @@ export default async function EmbedVideoPage(
 return Option.fromNullable(video);
 }).pipe(
 Effect.flatten,
-Effect.map(
-(video) =>
-({
-needsPassword: false,
-video,
-}) as const,
-),
+Effect.map((video) => ({ needsPassword: false, video }) as const),
 Effect.catchTag("VerifyVideoPasswordError", () =>
 Effect.succeed({ needsPassword: true } as const),
 ),
@@ -191,7 +185,7 @@ export default async function EmbedVideoPage(
 </p>
 </div>,
 ),
-NoSuchElementException: () => Effect.sync(notFound()),
+NoSuchElementException: () => Effect.sync(() => notFound()),
 }),
 provideOptionalAuth,
 EffectRuntime.runPromise,

apps/web/content/docs/self-hosting.mdx

@@ -40,8 +40,6 @@ and [MinIO](https://min.io) for storing videos.
 
 Once deployed, login email links will be available in Railway’s Deploy Logs.
 
-<video src="https://cap.so/api/playlist/?videoId=6s8mpx2t4epkwrm" controls />
-
 ### Custom Deployment with Docker
 
 The [Cap Web Docker image](https://github.com/CapSoftware/Cap/pkgs/container/cap-web)
@@ -56,8 +54,6 @@ Copy the URL of your Cap Web deployment, and set the 'Cap Server URL'
 in Cap Desktop's settings page to this URL.
 Uploads from Cap Desktop will now be sent to your Cap Web deployment.
 
-<video src="https://cap.so/api/playlist/?videoId=sh5ch60pbs02eec" controls />
-
 ## Email Login Links
 
 If the `RESEND_API_KEY` and `RESEND_FROM_DOMAIN` environment variables are not set,
@@ -68,8 +64,6 @@ To send login links via email, you'll need to configure [Resend](https://resend.
 2. Connect a domain and set it as `RESEND_FROM_DOMAIN`
 3. Generate an API key and set it as `RESEND_API_KEY`
 
-<video src="https://cap.so/api/playlist/?videoId=xyz74j90rr4br3a" controls />
-
 ## Support
 
 If you encounter a problem with the Docker image or think this documentation is lacking,

apps/web/middleware.ts

@@ -41,6 +41,7 @@ export async function middleware(request: NextRequest) {
 if (
 !(
 path.startsWith("/s/") ||
+path.startsWith("/middleware") ||
 path.startsWith("/dashboard") ||
 path.startsWith("/onboarding") ||
 path.startsWith("/api") ||