Conversation
Add a Floating media field on work stories, independent of in-flow image/video bloks. Native videos and images render as 400px frames with a seeded scatter and a title-bar drag handle.
Bundle ReportChanges will increase total bundle size by 31.22kB (0.18%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: portfolio-client-array-pushAssets Changed:
App Routes Affected:
view changes for bundle: portfolio-server-cjsAssets Changed:
App Routes Affected:
|
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #421 +/- ##
==========================================
+ Coverage 97.29% 97.31% +0.01%
==========================================
Files 356 361 +5
Lines 9109 9322 +213
Branches 3091 3067 -24
==========================================
+ Hits 8863 9072 +209
- Misses 238 242 +4
Partials 8 8
|
Reuse a dedicated CMS dropdown (240–720px, default 400) rather than the in-flow image width percentages. Frames still use the Now Playing drag cursor via data-draggable.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
⇝pull request
*ੈ✩‧₊˚༺☆༻*ੈ✩‧₊˚
what & why
Work pages can scatter images and native videos as draggable frames, independent of in-flow image/video bloks and of the Downloads desktop icons. Frame width is a CMS dropdown (240–720px, default 400).
scope
@httpjpg/ui,@httpjpg/storyblok-ui,@httpjpg/storyblok-sync,@httpjpg/storyblok-utils,@httpjpg/storybook,@httpjpg/portfolio(search index: allowlistname)change type
feat— new feature · Added · minorfix— bug fix · Fixed · patchrefactor/style/revert· Changed · patchperf— faster or leaner · Performance · patchbuild/ci/docs/test· Tooling · patchdeps— dependency bump · Dependencies · patchchore— hidden from the changelog · patchBREAKING CHANGE:footer · ⚠ BREAKING · majorscreenshots / recordings
Storybook: Widgets / FloatingMedia. Image frames are Argos-tested; the mixed video story is tagged
!test. The story mountsCustomCursorso hover uses the same 👋 drag animation as Now Playing (Argos runs with reduced motion, so snapshots stay cursor-free).checklist — every pull request
pnpm lint,pnpm type-check,pnpm testandpnpm buildpass locallyCLAUDE.md— I read a neighbouring file before inventing a pattern"use client"boundary is as small as possible@httpjpg/tokensvia Panda (no raw hex outside genuinely off-palette decoration)uinever imports back from consumers)packages/env/src/env.mjs,.env.exampleandturbo.json*.test.ts(x)); E2E updated if a user-facing flow changedconsole.login shipped paths; errors reported through@httpjpg/observabilitypackage.jsonversion,.release-please-manifest.jsonorCHANGELOG.mdstoryblok / cms — only if a blok or schema moved
packages/storyblok-sync/scripts/blocks/*sync:components(andsync:datasourcesfor newCMS_OPTIONS) run against StoryblokSb*component added underpackages/storyblok-ui/src/components/<kebab>/and exported explicitly fromsrc/index.tsapps/portfolio/lib/storyblok.tsunder its blok nameeditableAttrs(blok)spread on the root element, spacing handled viaBlokSpacing/spacingCss()notes for reviewers
This is not the Downloads overlay (#420). Work stories get a new
floating_mediafield (nestablefloating_item:name, Storyblokfileand/or pastedurl,width).Width is not
CMS_OPTIONS.imageWidth(those are 10–100% of the grid). It is a new pixel scaleCMS_OPTIONS.floatingMediaWidth: 240 / 320 / 400 / 480 / 560 / 720. Default 400px.Images and mp4s share one portal; YouTube/Vimeo stay on the regular Video blok.
floating_itemis not registered in the Storyblok component registry — same pattern as other nestables that only live on the work story.Drag the title bar (images also drag from the picture). Video controls are
no-dragso seeking still works. Frames already setdata-draggable="true", which is what Now Playing uses for the 👋 cursor. Positions are seeded, notMath.random().Someone with Management API access still needs:
May conflict with #420 on
pages.ts/SbPageWorkif that lands first — both add a work-page field, they do not share one.