diff --git a/public/intl/messages/en-US.json b/public/intl/messages/en-US.json index 9a5ef402e..46ac8d6a0 100644 --- a/public/intl/messages/en-US.json +++ b/public/intl/messages/en-US.json @@ -255,6 +255,7 @@ "play": "Play", "replay": "Replay", "replay-id": "Replay ID", + "replay-code": "Session replay code", "replay-enabled": "Replay enabled", "replays": "Replays", "reports": "Reports", diff --git a/src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx b/src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx index 3c9d37564..d62a6d2ac 100644 --- a/src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx +++ b/src/app/(main)/websites/[websiteId]/settings/WebsiteReplaySettings.tsx @@ -7,6 +7,7 @@ import { Select, Slider, Switch, + Text, TextField, } from '@umami/react-zen'; import { useState } from 'react'; @@ -14,6 +15,8 @@ import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder'; import { useMessages, useSubscription, useUpdateQuery, useWebsite } from '@/components/hooks'; import { Video } from '@/components/icons'; +const RECORDER_NAME = 'recorder.js'; + interface ReplayConfig { sampleRate?: number; maskLevel?: string; @@ -35,6 +38,14 @@ export function WebsiteReplaySettings({ websiteId }: { websiteId: string }) { const [maxDuration, setMaxDuration] = useState(String(config.maxDuration ?? 300000)); const [blockSelector, setBlockSelector] = useState(config.blockSelector ?? ''); + const recorderUrl = cloudMode + ? `${process.env.cloudUrl}/${RECORDER_NAME}` + : `${window?.location?.origin || ''}${process.env.basePath || ''}/${RECORDER_NAME}`; + + let recorderAttrs = `data-website-id="${websiteId}" data-sample-rate="${sampleRate}" data-mask-level="${maskLevel}" data-max-duration="${parseInt(maxDuration, 10) || 300000}"`; + if (blockSelector) recorderAttrs += ` data-block-selector="${blockSelector}"`; + const recorderCode = ``; + const handleToggle = async (value: boolean) => { const previous = enabled; setEnabled(value); @@ -106,6 +117,9 @@ export function WebsiteReplaySettings({ websiteId }: { websiteId: string }) { {enabled && ( <> + + {t(messages.trackingCode)} + n.trim())?.[0] || SCRIPT_NAME; @@ -30,27 +28,13 @@ export function WebsiteTrackingCode({ const url = trackerScriptName?.startsWith('http') ? trackerScriptName : getUrl(trackerScriptName); - let code = ``; - - if (website?.replayEnabled) { - const recorderUrl = getUrl(RECORDER_NAME); - const replayConfig = (website.replayConfig as any) || {}; - let recorderAttrs = `data-website-id="${websiteId}"`; - if (replayConfig.sampleRate !== undefined) - recorderAttrs += ` data-sample-rate="${replayConfig.sampleRate}"`; - if (replayConfig.maskLevel) recorderAttrs += ` data-mask-level="${replayConfig.maskLevel}"`; - if (replayConfig.maxDuration !== undefined) - recorderAttrs += ` data-max-duration="${replayConfig.maxDuration}"`; - if (replayConfig.blockSelector) - recorderAttrs += ` data-block-selector="${replayConfig.blockSelector}"`; - code += `\n`; - } + const code = ``; return ( {t(messages.trackingCode)} - + ); } diff --git a/src/app/global.css b/src/app/global.css index 678c7e9ea..cbf11ae67 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -56,6 +56,11 @@ select:-webkit-autofill:focus { transition: color 5000s ease-in-out 0s; } +/* Code snippet textareas */ +.code-textarea textarea { + min-height: 100px; +} + /* rrweb-player overrides */ .rr-controller__btns { gap: 8px; diff --git a/src/components/messages.ts b/src/components/messages.ts index e91390bf8..5046f1904 100644 --- a/src/components/messages.ts +++ b/src/components/messages.ts @@ -371,6 +371,7 @@ export const labels: Record = { replay: 'label.replay', replayId: 'label.replay-id', replayEnabled: 'label.replay-enabled', + replayCode: 'label.replay-code', sampleRate: 'label.sample-rate', maskLevel: 'label.mask-level', maxDuration: 'label.max-duration',