From 36f91a76e267189c649536daf56ccfd456f7c5b5 Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Fri, 9 Oct 2026 17:47:02 -0700 Subject: [PATCH 1/4] improvement(changelog): open recordings in the shared lightbox --- .../changelog-video/changelog-video.tsx | 58 +++++++++++++------ apps/sim/content/changelog/README.md | 8 ++- .../compare-workflow-deployments/index.mdx | 2 + .../content/changelog/editorial-standard.md | 2 +- .../changelog/review-fork-changes/index.mdx | 2 + .../emcn/src/components/lightbox/lightbox.tsx | 57 ++++++++++++++++-- 6 files changed, 102 insertions(+), 27 deletions(-) diff --git a/apps/sim/app/(landing)/changelog/components/changelog-video/changelog-video.tsx b/apps/sim/app/(landing)/changelog/components/changelog-video/changelog-video.tsx index 5d6c56ea001..77550d6b613 100644 --- a/apps/sim/app/(landing)/changelog/components/changelog-video/changelog-video.tsx +++ b/apps/sim/app/(landing)/changelog/components/changelog-video/changelog-video.tsx @@ -1,4 +1,4 @@ -import { cn } from '@sim/emcn' +import { cn, Lightbox } from '@sim/emcn' import { isChangelogMediaSource } from '@/lib/changelog/media' import { LANDING_STAGE_RADIUS } from '@/app/(landing)/components/landing-layout' @@ -8,31 +8,51 @@ interface ChangelogVideoProps { /** Accessible description for the player; not repeated below the video. */ caption: string captionsSrc?: string + width?: number | `${number}` + height?: number | `${number}` } -/** Product recordings load on demand and retain a readable description without playback. */ -export function ChangelogVideo({ src, poster, caption, captionsSrc }: ChangelogVideoProps) { +/** A quiet poster opens the recording in the shared media viewer. */ +export function ChangelogVideo({ + src, + poster, + caption, + captionsSrc, + width = 1280, + height = 720, +}: ChangelogVideoProps) { if (!isChangelogMediaSource(src) || (captionsSrc && !isChangelogMediaSource(captionsSrc))) { throw new Error('Changelog recordings must use same-origin paths or the approved media CDN') } return (
- + + +
) } diff --git a/apps/sim/content/changelog/README.md b/apps/sim/content/changelog/README.md index f7a4cfb671d..0eb4b1e5266 100644 --- a/apps/sim/content/changelog/README.md +++ b/apps/sim/content/changelog/README.md @@ -61,11 +61,11 @@ After deployment, verify a representative article and the archive with Search Co ## Artifact delivery - Record one complete action and its visible result with sample data in a dedicated demo workspace. Verify the feature and permissions in that environment first. Use the product's normal theme and typography. Keep the cursor and text readable; crop around the relevant controls while preserving enough context to understand the action. -- Export an H.264 MP4 at a readable resolution, usually 1280×720 or 1920×1080. Keep it about 20–45 seconds and optimize it for web playback with `+faststart`. Prefer a focused demonstration with native playback controls over a decorative loop. Check the final crop on a 390px-wide screen. -- Take screenshots and the poster from the reviewed product capture. Choose a frame that shows the announced result, with a legible 16:9 crop for the story card. A separate 1200×630 share image can use the same frame with enough safe area for cropping. Keep the headline and benefit in the page's HTML rather than baking them into the image. Compress local JPEG, WebP, or PNG assets and retain actual screenshot dimensions in MDX. +- Export an H.264 MP4 at a readable resolution, usually 1280×720 or 1920×1080. Keep it about 20–45 seconds and optimize it for web playback with `+faststart`. The article shows the reviewed poster; playback starts only after opening the shared lightbox, which provides pause and zoom controls. Spoken recordings include captions and an unmute control. Check the preview and expanded recording on a 390px-wide screen. +- Take screenshots and the poster from the reviewed product capture. Choose a frame that shows the announced result. Preserve the capture's aspect ratio and provide its actual width and height in MDX for both screenshots and videos. A separate 1200×630 share image can use the same frame with enough safe area for cropping. Keep the headline and benefit in the page's HTML rather than baking them into the image. Compress local JPEG, WebP, or PNG assets. - Use immutable, versioned media filenames, such as `compare-workflow-deployments-v1.mp4`. Upload recordings and spoken captions under `changelog/` in the existing public Academy asset store: `https://nnjgp7vypgx4myuq.public.blob.vercel-storage.com`. Put the returned public URLs in the entry. The app CSP and content audit explicitly allow this origin for recordings and captions. Small optimized walkthroughs under 1 MiB can live in `public/changelog/` and deploy atomically with their entry. Use the CDN for larger recordings. The component does not upload or proxy videos. - Serve MP4s as `video/mp4` and spoken captions as `text/vtt`. The existing CDN supports HTTP Range requests, cross-origin playback, and caching. Use a new filename for every revision and verify those response headers on the uploaded asset. Do not overwrite an existing recording URL. -- In the deployment preview, check playback, seeking, captions, poster loading, and mobile readability. A silent recording uses the component's muted default. Spoken recordings need a WebVTT file. +- In the deployment preview, check opening and closing the lightbox, playback, pause, zoom, captions, poster loading, and mobile readability. Recordings start muted; spoken recordings need a WebVTT file and expose an unmute control. - Generate social and email drafts from the reviewed product story: capability, practical benefit, and one link to the canonical entry. Use the same claims and restrictions everywhere. Keep distribution manual until the format and review process are established. AI can prepare storyboards, copy, captions, and clearly labeled conceptual diagrams. Screenshots and feature recordings must come from the real product. Do not generate fictional controls, results, performance numbers, or before-and-after evidence. Label a walkthrough assembled from still captures as a step-by-step walkthrough; do not describe it as a continuous recording. Keep its UI frames unmodified and record the assembly method in the production brief. @@ -101,6 +101,8 @@ release: diff --git a/apps/sim/content/changelog/compare-workflow-deployments/index.mdx b/apps/sim/content/changelog/compare-workflow-deployments/index.mdx index 825bdc266b6..57c455fbe32 100644 --- a/apps/sim/content/changelog/compare-workflow-deployments/index.mdx +++ b/apps/sim/content/changelog/compare-workflow-deployments/index.mdx @@ -17,6 +17,8 @@ release: diff --git a/apps/sim/content/changelog/editorial-standard.md b/apps/sim/content/changelog/editorial-standard.md index b2217463569..b6fda8a938d 100644 --- a/apps/sim/content/changelog/editorial-standard.md +++ b/apps/sim/content/changelog/editorial-standard.md @@ -15,7 +15,7 @@ Keep existing article URLs, original dates, and RSS identities when refining his - Headline: name the capability or action, at most 65 characters. Avoid generic headlines such as “A better experience.” - Summary: 15–40 words for search, sharing, and RSS, naming Sim and explaining the capability in plain language. It must make sense without the image. - Body: normally 60–180 words, with one concrete example or short path to the feature. Explain the action and result; do not repeat the summary or turn a small improvement into a tutorial. -- Media: place the reviewed image or video immediately after the article header, before procedural detail. Images use the shared lightbox and can show a brief caption for a necessary demonstration limit. Videos keep native playback controls and an accessible description, without a repeated description beneath the player. Any material claim limitation belongs in the article's prose. +- Media: place the reviewed image or video immediately after the article header, before procedural detail. Images use the shared lightbox and can show a brief caption for a necessary demonstration limit. Videos show a plain still poster that opens in that same lightbox, with playback and zoom controls. Keep an accessible description without repeating it beneath the preview. Any material claim limitation belongs in the article's prose. - Supporting notes: up to three related, source-backed improvements, each one sentence. Omit empty sections. Do not invent extras to fill a template. - Links: one descriptive setup/documentation link, plus an integration, model, or product link when directly relevant. Use the actual catalog slug and guide. Put links in context; avoid a wall of generic “Learn more” links. - Availability: retain real version, plan, permission, and rollout restrictions in the article. Keep unverified rollout questions, source analysis, capture instructions, and approval checkboxes in production.md. diff --git a/apps/sim/content/changelog/review-fork-changes/index.mdx b/apps/sim/content/changelog/review-fork-changes/index.mdx index 8344f163e92..d16988c8502 100644 --- a/apps/sim/content/changelog/review-fork-changes/index.mdx +++ b/apps/sim/content/changelog/review-fork-changes/index.mdx @@ -17,6 +17,8 @@ release: diff --git a/packages/emcn/src/components/lightbox/lightbox.tsx b/packages/emcn/src/components/lightbox/lightbox.tsx index cc67372190d..fa8bfd2d50d 100644 --- a/packages/emcn/src/components/lightbox/lightbox.tsx +++ b/packages/emcn/src/components/lightbox/lightbox.tsx @@ -19,6 +19,10 @@ export interface LightboxProps { src: string alt: string type?: 'image' | 'video' + /** Displayed until the recording's first frame is ready. */ + poster?: string + /** Reviewed English captions for a recording with speech. */ + captionsSrc?: string /** Playback position to resume when a video opens. */ startTime?: number } @@ -53,18 +57,31 @@ function centerViewport(viewport: HTMLDivElement | null) { * * ``` */ -export function Lightbox({ children, src, alt, type = 'image', startTime = 0 }: LightboxProps) { +export function Lightbox({ + children, + src, + alt, + type = 'image', + poster, + captionsSrc, + startTime = 0, +}: LightboxProps) { const viewportRef = useRef(null) const mediaFrameRef = useRef(null) const controlsRef = useRef(null) + const videoRef = useRef(null) const zoomAnchorRef = useRef(null) const [open, setOpen] = useState(false) const [zoom, setZoom] = useState(1) + const [playing, setPlaying] = useState(false) + const [muted, setMuted] = useState(true) function handleOpenChange(nextOpen: boolean) { if (nextOpen) { zoomAnchorRef.current = null setZoom(1) + setPlaying(false) + setMuted(true) } setOpen(nextOpen) } @@ -148,19 +165,34 @@ export function Lightbox({ children, src, alt, type = 'image', startTime = 0 }: /> ) : ( )} @@ -169,12 +201,29 @@ export function Lightbox({ children, src, alt, type = 'image', startTime = 0 }:
+ {type === 'video' ? ( + <> + { + const video = videoRef.current + if (!video) return + if (video.paused) void video.play().catch(() => setPlaying(false)) + else video.pause() + }} + > + {playing ? 'Pause' : 'Play'} + + {captionsSrc ? ( + setMuted(!muted)}>{muted ? 'Unmute' : 'Mute'} + ) : null} + + ) : null} Date: Fri, 9 Oct 2026 18:51:06 -0700 Subject: [PATCH 2/4] improvement(changelog): refresh product captures and released updates --- .../changelog-video/changelog-video.tsx | 9 ++- apps/sim/content/changelog/README.md | 4 +- .../compare-workflow-deployments/index.mdx | 14 ++-- .../production.md | 16 ++-- .../content/changelog/editorial-standard.md | 2 +- .../intune-device-inventory/index.mdx | 27 +++++++ .../intune-device-inventory/production.md | 25 +++++++ .../changelog/new-models-for-agents/index.mdx | 27 +++++++ .../new-models-for-agents/production.md | 25 +++++++ .../changelog/agent-model-picker-v1.jpg | Bin 0 -> 50123 bytes .../compare-workflow-deployments-v2.jpg | Bin 0 -> 48777 bytes .../changelog/intune-device-filter-v1.jpg | Bin 0 -> 42847 bytes .../emcn/src/components/lightbox/lightbox.tsx | 69 ++++++++++++++++-- 13 files changed, 192 insertions(+), 26 deletions(-) create mode 100644 apps/sim/content/changelog/intune-device-inventory/index.mdx create mode 100644 apps/sim/content/changelog/intune-device-inventory/production.md create mode 100644 apps/sim/content/changelog/new-models-for-agents/index.mdx create mode 100644 apps/sim/content/changelog/new-models-for-agents/production.md create mode 100644 apps/sim/public/changelog/agent-model-picker-v1.jpg create mode 100644 apps/sim/public/changelog/compare-workflow-deployments-v2.jpg create mode 100644 apps/sim/public/changelog/intune-device-filter-v1.jpg diff --git a/apps/sim/app/(landing)/changelog/components/changelog-video/changelog-video.tsx b/apps/sim/app/(landing)/changelog/components/changelog-video/changelog-video.tsx index 77550d6b613..7b5ee241246 100644 --- a/apps/sim/app/(landing)/changelog/components/changelog-video/changelog-video.tsx +++ b/apps/sim/app/(landing)/changelog/components/changelog-video/changelog-video.tsx @@ -26,7 +26,14 @@ export function ChangelogVideo({ } return (
- +