@storystick/media 0.0.0-stage → 0.2.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +112 -0
- package/PUBLIC-API.md +19 -0
- package/README.md +46 -2
- package/dist/file-field.generated.d.ts +4 -0
- package/dist/file-field.generated.js +4 -0
- package/dist/image-field.generated.d.ts +32 -0
- package/dist/image-field.generated.js +4 -0
- package/dist/index.d.ts +121 -0
- package/dist/index.js +379 -0
- package/dist/internal/render-diagnostics.d.ts +3 -0
- package/dist/internal/render-diagnostics.js +9 -0
- package/dist/video-field.generated.d.ts +22 -0
- package/dist/video-field.generated.js +4 -0
- package/dist/video.d.ts +117 -0
- package/dist/video.js +264 -0
- package/package.json +57 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# Functional Source License, Version 1.1, MIT Future License
|
|
2
|
+
|
|
3
|
+
## Abbreviation
|
|
4
|
+
|
|
5
|
+
FSL-1.1-MIT
|
|
6
|
+
|
|
7
|
+
## Notice
|
|
8
|
+
|
|
9
|
+
Copyright 2026 Tanguy Freycon
|
|
10
|
+
|
|
11
|
+
## Terms and Conditions
|
|
12
|
+
|
|
13
|
+
### Licensor ("We")
|
|
14
|
+
|
|
15
|
+
The party offering the Software under these Terms and Conditions.
|
|
16
|
+
|
|
17
|
+
### The Software
|
|
18
|
+
|
|
19
|
+
The "Software" is each version of the software that we make available under
|
|
20
|
+
these Terms and Conditions, as indicated by our inclusion of these Terms and
|
|
21
|
+
Conditions with the Software.
|
|
22
|
+
|
|
23
|
+
### License Grant
|
|
24
|
+
|
|
25
|
+
Subject to your compliance with this License Grant and the Patents,
|
|
26
|
+
Redistribution and Trademark clauses below, we hereby grant you the right to
|
|
27
|
+
use, copy, modify, create derivative works, publicly perform, publicly display
|
|
28
|
+
and redistribute the Software for any Permitted Purpose identified below.
|
|
29
|
+
|
|
30
|
+
### Permitted Purpose
|
|
31
|
+
|
|
32
|
+
A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
|
|
33
|
+
means making the Software available to others in a commercial product or
|
|
34
|
+
service that:
|
|
35
|
+
|
|
36
|
+
1. substitutes for the Software;
|
|
37
|
+
|
|
38
|
+
2. substitutes for any other product or service we offer using the Software
|
|
39
|
+
that exists as of the date we make the Software available; or
|
|
40
|
+
|
|
41
|
+
3. offers the same or substantially similar functionality as the Software.
|
|
42
|
+
|
|
43
|
+
Permitted Purposes specifically include using the Software:
|
|
44
|
+
|
|
45
|
+
1. for your internal use and access;
|
|
46
|
+
|
|
47
|
+
2. for non-commercial education;
|
|
48
|
+
|
|
49
|
+
3. for non-commercial research; and
|
|
50
|
+
|
|
51
|
+
4. in connection with professional services that you provide to a licensee
|
|
52
|
+
using the Software in accordance with these Terms and Conditions.
|
|
53
|
+
|
|
54
|
+
### Patents
|
|
55
|
+
|
|
56
|
+
To the extent your use for a Permitted Purpose would necessarily infringe our
|
|
57
|
+
patents, the license grant above includes a license under our patents. If you
|
|
58
|
+
make a claim against any party that the Software infringes or contributes to
|
|
59
|
+
the infringement of any patent, then your patent license to the Software ends
|
|
60
|
+
immediately.
|
|
61
|
+
|
|
62
|
+
### Redistribution
|
|
63
|
+
|
|
64
|
+
The Terms and Conditions apply to all copies, modifications and derivatives of
|
|
65
|
+
the Software.
|
|
66
|
+
|
|
67
|
+
If you redistribute any copies, modifications or derivatives of the Software,
|
|
68
|
+
you must include a copy of or a link to these Terms and Conditions and not
|
|
69
|
+
remove any copyright notices provided in or with the Software.
|
|
70
|
+
|
|
71
|
+
### Disclaimer
|
|
72
|
+
|
|
73
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
|
|
74
|
+
IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
|
|
75
|
+
PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
|
|
76
|
+
|
|
77
|
+
IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
|
|
78
|
+
SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
|
|
79
|
+
EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
|
|
80
|
+
|
|
81
|
+
### Trademarks
|
|
82
|
+
|
|
83
|
+
Except for displaying the License Details and identifying us as the origin of
|
|
84
|
+
the Software, you have no right under these Terms and Conditions to use our
|
|
85
|
+
trademarks, trade names, service marks or product names.
|
|
86
|
+
|
|
87
|
+
## Grant of Future License
|
|
88
|
+
|
|
89
|
+
We hereby irrevocably grant you an additional license to use the Software under
|
|
90
|
+
the MIT license that is effective on the second anniversary of the date we make
|
|
91
|
+
the Software available. On or after that date, you may use the Software under
|
|
92
|
+
the MIT license, in which case the following will apply:
|
|
93
|
+
|
|
94
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
95
|
+
this software and associated documentation files (the "Software"), to deal in
|
|
96
|
+
the Software without restriction, including without limitation the rights to
|
|
97
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
|
98
|
+
of the Software, and to permit persons to whom the Software is furnished to do
|
|
99
|
+
so, subject to the following conditions:
|
|
100
|
+
|
|
101
|
+
The above copyright notice and this permission notice shall be included in all
|
|
102
|
+
copies or substantial portions of the Software.
|
|
103
|
+
|
|
104
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
105
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
106
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
107
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
108
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
109
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
110
|
+
SOFTWARE.
|
|
111
|
+
|
|
112
|
+
This Agreement shall be governed by the laws of France.
|
package/PUBLIC-API.md
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# @storystick/media API contract
|
|
2
|
+
|
|
3
|
+
Install this candidate explicitly with `@storystick/media@0.2.0-rc.0` after registry bootstrap and publication. This repository alone does not make the candidate or beta channel available on npm.
|
|
4
|
+
|
|
5
|
+
Version 0.2.0-rc.0, cohort `sdk-0.2.0-rc.0`. ESM distribution; no CommonJS or universal Edge compatibility is promised.
|
|
6
|
+
|
|
7
|
+
This package supports the integration facades; installing it directly is an advanced use. Reserved contracts are required between SDK packages and must be upgraded with the same cohort. Their public export paths do not promise independent stability.
|
|
8
|
+
|
|
9
|
+
| Entry | Status |
|
|
10
|
+
| --- | --- |
|
|
11
|
+
| `.` | Supported beta entry |
|
|
12
|
+
| `./video` | Supported beta entry |
|
|
13
|
+
| `./internal/render-diagnostics` | Reserved SDK contract |
|
|
14
|
+
|
|
15
|
+
The qualified toolchain is Node 24.19.0 and pnpm 9.15.9. Next uses App Router 15.5.28, Sharp 0.35.5 and React/React DOM 19.2.8; Astro uses 7.4.4 with the Node adapter 11.1.9. Browser delivery is verified by bundling; hosted Preview activation and cross-browser behavior require the staging manual check. Source/CLI are Node tools, server entries belong on the server, and browser entries must never receive a server API key.
|
|
16
|
+
|
|
17
|
+
This is a support/tooling contract. It does not independently grant project access or permission to perform effects.
|
|
18
|
+
|
|
19
|
+
The repository is private. Public package availability does not make the monorepo public, and npm provenance from that repository is unavailable. Product and pilot support: [Storystick](https://storystick.app).
|
package/README.md
CHANGED
|
@@ -1,3 +1,47 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @storystick/media
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Provider-agnostic helpers for rendering Storystick asset-backed media fields.
|
|
4
|
+
|
|
5
|
+
## Render an image field
|
|
6
|
+
|
|
7
|
+
SDK image values carry the asset metadata needed to render them. Resolve the
|
|
8
|
+
value and spread its HTML props to preserve its Preview edit marker:
|
|
9
|
+
|
|
10
|
+
```tsx
|
|
11
|
+
import { resolveImage } from '@storystick/media'
|
|
12
|
+
|
|
13
|
+
export function Hero({ image }) {
|
|
14
|
+
const { props } = resolveImage(image, { sizes: '100vw' })
|
|
15
|
+
return props ? <img {...props} /> : null
|
|
16
|
+
}
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
The result includes a discriminated `status` and `props` (`null` when the image
|
|
20
|
+
cannot render). Renderable images supply `src`, intrinsic dimensions, `alt`,
|
|
21
|
+
lazy-loading defaults, responsive props, and the Preview edit marker. The
|
|
22
|
+
resolver cleans text before writing the invisible `alt` attribute.
|
|
23
|
+
|
|
24
|
+
For raw values, pass `resolveImage(image, { source: document })`. An explicit
|
|
25
|
+
`source` replaces the value's metadata, including when it is `null` or
|
|
26
|
+
`undefined`. It accepts an asset sidecar or a document carrying `_assets`.
|
|
27
|
+
`resolveFile` and `resolveVideo` follow the same source and result conventions.
|
|
28
|
+
|
|
29
|
+
Living documents resolve the asset's current ready version. Published
|
|
30
|
+
documents resolve only the immutable version and render defaults captured in
|
|
31
|
+
their snapshot sidecar; replacing an asset never rewrites an existing
|
|
32
|
+
publication. A missing publish-time binding is reported as
|
|
33
|
+
`unavailable-at-publication`, and a missing captured version as
|
|
34
|
+
`pinned-version-missing`.
|
|
35
|
+
|
|
36
|
+
One render can emit at most `IMAGE_RENDER_TRANSFORM_BUDGET` distinct keys: one
|
|
37
|
+
primary transform plus one per canonical responsive-width bucket. Stored crop,
|
|
38
|
+
hotspot, and asset focal-point values are resolved by `asset-grammar` into the
|
|
39
|
+
same canonical crop for the primary URL and every `srcSet` candidate. A
|
|
40
|
+
version-scoped metadata `lqip`, when present and non-empty, is exposed as
|
|
41
|
+
`blurDataURL` on the resolved image.
|
|
42
|
+
|
|
43
|
+
## Candidate distribution contract
|
|
44
|
+
|
|
45
|
+
See [PUBLIC-API.md](./PUBLIC-API.md) for supported entries, reserved SDK contracts,
|
|
46
|
+
the qualified runtime matrix and the candidate cohort. Upgrade Storystick
|
|
47
|
+
packages together.
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export interface StorystickImageCrop {
|
|
2
|
+
/** Top */
|
|
3
|
+
top?: number;
|
|
4
|
+
/** Bottom */
|
|
5
|
+
bottom?: number;
|
|
6
|
+
/** Left */
|
|
7
|
+
left?: number;
|
|
8
|
+
/** Right */
|
|
9
|
+
right?: number;
|
|
10
|
+
}
|
|
11
|
+
export interface StorystickImageHotspot {
|
|
12
|
+
/** Horizontal center */
|
|
13
|
+
x?: number;
|
|
14
|
+
/** Vertical center */
|
|
15
|
+
y?: number;
|
|
16
|
+
/** Width */
|
|
17
|
+
width?: number;
|
|
18
|
+
/** Height */
|
|
19
|
+
height?: number;
|
|
20
|
+
}
|
|
21
|
+
export interface StorystickImageFieldData {
|
|
22
|
+
/** Image asset */
|
|
23
|
+
assetId?: string;
|
|
24
|
+
/** Alt text */
|
|
25
|
+
alt?: string;
|
|
26
|
+
/** Caption */
|
|
27
|
+
caption?: string;
|
|
28
|
+
/** Crop */
|
|
29
|
+
crop?: StorystickImageCrop;
|
|
30
|
+
/** Hotspot */
|
|
31
|
+
hotspot?: StorystickImageHotspot;
|
|
32
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { type ImageDimensionBucket } from '@storystick/asset-grammar';
|
|
2
|
+
import { type StorystickAsset, type StorystickAssetSidecar, type PreviewObjectMarkerAttrs, type PreviewObjectMarkerCarrier } from '@storystick/types';
|
|
3
|
+
import type { StorystickFileFieldData } from './file-field.generated.js';
|
|
4
|
+
import type { StorystickImageFieldData } from './image-field.generated.js';
|
|
5
|
+
export type { StorystickImageCrop, StorystickImageHotspot, } from './image-field.generated.js';
|
|
6
|
+
export type { StorystickAsset, StorystickAssetAltDefault, StorystickAssetDeliveryStatus, StorystickAssetMetadata, StorystickAssetSidecar, StorystickAssetType, } from '@storystick/types';
|
|
7
|
+
export type StorystickImageField = StorystickImageFieldData & PreviewObjectMarkerCarrier;
|
|
8
|
+
/** Canonical provider-neutral value emitted by a `type: file` Story field. */
|
|
9
|
+
export type StorystickFileField = StorystickFileFieldData & PreviewObjectMarkerCarrier;
|
|
10
|
+
export type StorystickImageFit = 'cover' | 'contain' | 'scale-down';
|
|
11
|
+
export type StorystickImageFormat = 'auto' | 'webp' | 'avif' | 'jpeg' | 'png';
|
|
12
|
+
export type StorystickImageQuality = 'low' | 'medium' | 'high';
|
|
13
|
+
export type StorystickImageDpr = 1 | 1.5 | 2;
|
|
14
|
+
export type StorystickImageTransformOptions = {
|
|
15
|
+
/** A canonical cache bucket. Round measured dimensions before passing them. */
|
|
16
|
+
width?: ImageDimensionBucket;
|
|
17
|
+
/** A canonical cache bucket. Round measured dimensions before passing them. */
|
|
18
|
+
height?: ImageDimensionBucket;
|
|
19
|
+
fit?: StorystickImageFit;
|
|
20
|
+
format?: StorystickImageFormat;
|
|
21
|
+
quality?: StorystickImageQuality;
|
|
22
|
+
dpr?: StorystickImageDpr;
|
|
23
|
+
widths?: readonly number[];
|
|
24
|
+
sizes?: string;
|
|
25
|
+
};
|
|
26
|
+
export type ResolveImageOptions = StorystickImageTransformOptions & {
|
|
27
|
+
source?: unknown;
|
|
28
|
+
warn?: (message: string) => void;
|
|
29
|
+
};
|
|
30
|
+
/** One primary transform plus at most one transform per canonical width bucket. */
|
|
31
|
+
export declare const IMAGE_RENDER_TRANSFORM_BUDGET: number;
|
|
32
|
+
/**
|
|
33
|
+
* De-facto responsive widths shared with framework image components. They are
|
|
34
|
+
* all canonical grammar buckets and are capped to the source asset width.
|
|
35
|
+
*/
|
|
36
|
+
export declare const DEFAULT_RESPONSIVE_IMAGE_WIDTHS: readonly [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
|
|
37
|
+
export type ImageStatus = 'ok' | 'no-image' | 'no-sidecar' | 'missing-asset' | 'unavailable-at-publication' | 'pinned-version-missing' | 'not-image' | 'archived-asset' | 'private-asset' | 'asset-not-ready' | 'provider-unconfigured' | 'invalid-dimensions' | 'invalid-transform';
|
|
38
|
+
export type StorystickImageProps = {
|
|
39
|
+
src: string;
|
|
40
|
+
alt: string;
|
|
41
|
+
width: number;
|
|
42
|
+
height: number;
|
|
43
|
+
srcSet?: string;
|
|
44
|
+
sizes?: string;
|
|
45
|
+
loading: 'lazy';
|
|
46
|
+
decoding: 'async';
|
|
47
|
+
style?: {
|
|
48
|
+
objectPosition: string;
|
|
49
|
+
};
|
|
50
|
+
} & PreviewObjectMarkerAttrs;
|
|
51
|
+
export type ResolveFileOptions = {
|
|
52
|
+
source?: unknown;
|
|
53
|
+
warn?: (message: string) => void;
|
|
54
|
+
};
|
|
55
|
+
export type FileStatus = 'ok' | 'no-file' | 'no-sidecar' | 'missing-asset' | 'unavailable-at-publication' | 'pinned-version-missing' | 'not-file' | 'archived-asset' | 'private-asset' | 'asset-not-ready' | 'provider-unconfigured';
|
|
56
|
+
export type StorystickFileProps = {
|
|
57
|
+
href: string;
|
|
58
|
+
download: string;
|
|
59
|
+
type?: string;
|
|
60
|
+
} & PreviewObjectMarkerAttrs;
|
|
61
|
+
type ResolvedStorystickFileOk = {
|
|
62
|
+
status: 'ok';
|
|
63
|
+
asset: StorystickAsset;
|
|
64
|
+
href: string;
|
|
65
|
+
filename: string;
|
|
66
|
+
mimeType?: string;
|
|
67
|
+
sizeBytes?: number;
|
|
68
|
+
props: StorystickFileProps;
|
|
69
|
+
} & PreviewObjectMarkerAttrs;
|
|
70
|
+
export type ResolvedStorystickFile = ResolvedStorystickFileOk | {
|
|
71
|
+
status: 'no-file';
|
|
72
|
+
assetId?: never;
|
|
73
|
+
asset?: never;
|
|
74
|
+
props: null;
|
|
75
|
+
} | ({
|
|
76
|
+
status: 'no-sidecar' | 'missing-asset' | 'unavailable-at-publication' | 'pinned-version-missing';
|
|
77
|
+
assetId: string;
|
|
78
|
+
version?: number;
|
|
79
|
+
asset?: never;
|
|
80
|
+
props: null;
|
|
81
|
+
} & PreviewObjectMarkerAttrs) | ({
|
|
82
|
+
status: 'not-file' | 'archived-asset' | 'private-asset' | 'asset-not-ready' | 'provider-unconfigured';
|
|
83
|
+
assetId: string;
|
|
84
|
+
asset: StorystickAsset;
|
|
85
|
+
props: null;
|
|
86
|
+
} & PreviewObjectMarkerAttrs);
|
|
87
|
+
type ResolvedStorystickImageOk = {
|
|
88
|
+
status: 'ok';
|
|
89
|
+
asset: StorystickAsset;
|
|
90
|
+
src: string;
|
|
91
|
+
srcSet?: string;
|
|
92
|
+
sizes?: string;
|
|
93
|
+
alt: string;
|
|
94
|
+
caption?: string;
|
|
95
|
+
width: number;
|
|
96
|
+
height: number;
|
|
97
|
+
transformKey: string;
|
|
98
|
+
blurDataURL?: string;
|
|
99
|
+
props: StorystickImageProps;
|
|
100
|
+
} & PreviewObjectMarkerAttrs;
|
|
101
|
+
export type ResolvedStorystickImage = ResolvedStorystickImageOk | {
|
|
102
|
+
status: 'no-image';
|
|
103
|
+
assetId?: never;
|
|
104
|
+
asset?: never;
|
|
105
|
+
props: null;
|
|
106
|
+
} | {
|
|
107
|
+
status: 'no-sidecar' | 'missing-asset' | 'unavailable-at-publication' | 'pinned-version-missing';
|
|
108
|
+
assetId: string;
|
|
109
|
+
version?: number;
|
|
110
|
+
asset?: never;
|
|
111
|
+
props: null;
|
|
112
|
+
} & PreviewObjectMarkerAttrs | {
|
|
113
|
+
status: 'not-image' | 'archived-asset' | 'private-asset' | 'asset-not-ready' | 'provider-unconfigured' | 'invalid-dimensions' | 'invalid-transform';
|
|
114
|
+
assetId: string;
|
|
115
|
+
asset: StorystickAsset;
|
|
116
|
+
props: null;
|
|
117
|
+
} & PreviewObjectMarkerAttrs;
|
|
118
|
+
export declare function resolveImage(image: StorystickImageField | null | undefined, options?: ResolveImageOptions): ResolvedStorystickImage;
|
|
119
|
+
/** Resolve a provider-neutral File field to its canonical download surface. */
|
|
120
|
+
export declare function resolveFile(file: StorystickFileField | null | undefined, options?: ResolveFileOptions): ResolvedStorystickFile;
|
|
121
|
+
export declare function getAssetSidecar(source: unknown): StorystickAssetSidecar | undefined;
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,379 @@
|
|
|
1
|
+
import { canDeliverSvgOriginal } from '@storystick/asset-grammar';
|
|
2
|
+
import { buildUnsplashImageUrl } from '@storystick/asset-grammar/internal/unsplash';
|
|
3
|
+
import { contentResolutionSource } from '@storystick/types/internal/content-origin';
|
|
4
|
+
import { buildImageTransformKey, IMAGE_TRANSFORM_CARDINALITY, ImageTransformGrammarError, resolveImageFraming, roundUpImageDimensionBucket, } from '@storystick/asset-grammar';
|
|
5
|
+
import { lookupStorystickAsset, isStorystickExternalImage, previewObjectMarkerAttrs, storystickAssetOriginalDownloadUrl, } from '@storystick/types';
|
|
6
|
+
import { stripPreviewProvenanceTextMarkers } from '@storystick/types/preview-provenance';
|
|
7
|
+
/** One primary transform plus at most one transform per canonical width bucket. */
|
|
8
|
+
export const IMAGE_RENDER_TRANSFORM_BUDGET = Number(IMAGE_TRANSFORM_CARDINALITY.bucketCount) + 1;
|
|
9
|
+
/**
|
|
10
|
+
* De-facto responsive widths shared with framework image components. They are
|
|
11
|
+
* all canonical grammar buckets and are capped to the source asset width.
|
|
12
|
+
*/
|
|
13
|
+
export const DEFAULT_RESPONSIVE_IMAGE_WIDTHS = [
|
|
14
|
+
640,
|
|
15
|
+
750,
|
|
16
|
+
828,
|
|
17
|
+
1080,
|
|
18
|
+
1200,
|
|
19
|
+
1920,
|
|
20
|
+
2048,
|
|
21
|
+
3840,
|
|
22
|
+
];
|
|
23
|
+
export function resolveImage(image, options = {}) {
|
|
24
|
+
options = { ...options, source: contentResolutionSource(image, options) };
|
|
25
|
+
if (!image || typeof image.assetId !== 'string' || image.assetId.length === 0) {
|
|
26
|
+
return { status: 'no-image', props: null };
|
|
27
|
+
}
|
|
28
|
+
const assetId = image.assetId;
|
|
29
|
+
const markerAttrs = previewObjectMarkerAttrs(image);
|
|
30
|
+
const lookup = lookupStorystickAsset(options.source, assetId);
|
|
31
|
+
if (lookup.status === 'no-sidecar') {
|
|
32
|
+
warn(options, `Storystick image asset "${assetId}" cannot resolve without an _assets sidecar.`);
|
|
33
|
+
return { ...markerAttrs, status: 'no-sidecar', assetId, props: null };
|
|
34
|
+
}
|
|
35
|
+
if (lookup.status !== 'ok') {
|
|
36
|
+
warn(options, failureMessage(assetId, lookup.status, 'failure' in lookup ? lookup.failure : undefined));
|
|
37
|
+
return {
|
|
38
|
+
...markerAttrs,
|
|
39
|
+
status: lookup.status,
|
|
40
|
+
assetId,
|
|
41
|
+
...('version' in lookup && lookup.version !== undefined
|
|
42
|
+
? { version: lookup.version }
|
|
43
|
+
: {}),
|
|
44
|
+
props: null,
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
const asset = lookup.asset;
|
|
48
|
+
if (asset.assetType !== 'image') {
|
|
49
|
+
warn(options, `Storystick image asset "${assetId}" is not an image asset.`);
|
|
50
|
+
return { ...markerAttrs, status: 'not-image', assetId, asset, props: null };
|
|
51
|
+
}
|
|
52
|
+
if (asset.delivery.status !== 'ready' || !asset.delivery.baseUrl) {
|
|
53
|
+
const status = deliveryAssetStatus(asset.delivery.status);
|
|
54
|
+
warn(options, `Storystick image asset "${assetId}" is not renderable; delivery status is "${asset.delivery.status}".`);
|
|
55
|
+
return { ...markerAttrs, status, assetId, asset, props: null };
|
|
56
|
+
}
|
|
57
|
+
if (asset.externalImage !== undefined && (!isStorystickExternalImage(asset.externalImage) ||
|
|
58
|
+
!finitePositive(asset.width) || !Number.isInteger(asset.width) ||
|
|
59
|
+
!finitePositive(asset.height) || !Number.isInteger(asset.height))) {
|
|
60
|
+
warn(options, `Storystick image asset "${assetId}" has invalid external image material.`);
|
|
61
|
+
return { ...markerAttrs, status: 'asset-not-ready', assetId, asset, props: null };
|
|
62
|
+
}
|
|
63
|
+
const dimensions = resolveDimensions(asset, options);
|
|
64
|
+
if (!dimensions) {
|
|
65
|
+
warn(options, `Storystick image asset "${assetId}" is missing renderable dimensions.`);
|
|
66
|
+
return {
|
|
67
|
+
...markerAttrs,
|
|
68
|
+
status: 'invalid-dimensions',
|
|
69
|
+
assetId,
|
|
70
|
+
asset,
|
|
71
|
+
props: null,
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
const framing = resolveImageFraming({
|
|
75
|
+
crop: image.crop,
|
|
76
|
+
hotspot: image.hotspot,
|
|
77
|
+
focalPoint: asset.focalPoint,
|
|
78
|
+
source: {
|
|
79
|
+
width: asset.width ?? Number.NaN,
|
|
80
|
+
height: asset.height ?? Number.NaN,
|
|
81
|
+
},
|
|
82
|
+
target: { width: options.width, height: options.height },
|
|
83
|
+
});
|
|
84
|
+
if (framing.wasClamped) {
|
|
85
|
+
warn(options, `Storystick image asset "${assetId}" has framing values outside [0, 1]; they were clamped for rendering.`);
|
|
86
|
+
}
|
|
87
|
+
let transformKey;
|
|
88
|
+
let src;
|
|
89
|
+
let srcSet;
|
|
90
|
+
try {
|
|
91
|
+
const transform = transformForOptions(options, framing.crop);
|
|
92
|
+
if (asset.mimeType === 'image/svg+xml' && !canDeliverSvgOriginal(transform, asset)) {
|
|
93
|
+
warn(options, `Storystick SVG asset "${assetId}" cannot be cropped or rasterized. Use its vector original or supply a raster asset.`);
|
|
94
|
+
return { ...markerAttrs, status: 'invalid-transform', assetId, asset, props: null };
|
|
95
|
+
}
|
|
96
|
+
transformKey = asset.mimeType === 'image/svg+xml' ? 'original' : buildImageTransformKey(transform);
|
|
97
|
+
src = asset.externalImage ? buildUnsplashImageUrl({ urls: asset.externalImage.urls, width: asset.width, height: asset.height }, transform) : transformUrl(asset.delivery.baseUrl, transformKey);
|
|
98
|
+
srcSet = asset.mimeType === 'image/svg+xml' ? undefined : buildSrcSet(asset.delivery.baseUrl, asset, options, framing.crop);
|
|
99
|
+
}
|
|
100
|
+
catch (error) {
|
|
101
|
+
if (!(error instanceof ImageTransformGrammarError))
|
|
102
|
+
throw error;
|
|
103
|
+
warn(options, `Storystick image asset "${assetId}" received an invalid transform (${error.code}). Use a canonical image dimension bucket.`);
|
|
104
|
+
return {
|
|
105
|
+
...markerAttrs,
|
|
106
|
+
status: 'invalid-transform',
|
|
107
|
+
assetId,
|
|
108
|
+
asset,
|
|
109
|
+
props: null,
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
const blurDataURL = resolveBlurDataURL(asset);
|
|
113
|
+
const alt = stripPreviewProvenanceTextMarkers(resolveAlt(image, asset, options));
|
|
114
|
+
const caption = typeof image.caption === 'string' && image.caption.trim().length > 0
|
|
115
|
+
? stripPreviewProvenanceTextMarkers(image.caption)
|
|
116
|
+
: undefined;
|
|
117
|
+
const fallbackObjectPosition = framing.crop === null && framing.fallbackPoint
|
|
118
|
+
? `${unitPercent(framing.fallbackPoint.x)} ${unitPercent(framing.fallbackPoint.y)}`
|
|
119
|
+
: undefined;
|
|
120
|
+
const props = {
|
|
121
|
+
...markerAttrs,
|
|
122
|
+
src,
|
|
123
|
+
alt,
|
|
124
|
+
width: dimensions.width,
|
|
125
|
+
height: dimensions.height,
|
|
126
|
+
...(srcSet ? { srcSet } : {}),
|
|
127
|
+
...(options.sizes ? { sizes: options.sizes } : {}),
|
|
128
|
+
loading: 'lazy',
|
|
129
|
+
decoding: 'async',
|
|
130
|
+
...(fallbackObjectPosition
|
|
131
|
+
? { style: { objectPosition: fallbackObjectPosition } }
|
|
132
|
+
: {}),
|
|
133
|
+
};
|
|
134
|
+
return {
|
|
135
|
+
...markerAttrs,
|
|
136
|
+
status: 'ok',
|
|
137
|
+
asset,
|
|
138
|
+
src,
|
|
139
|
+
...(srcSet ? { srcSet } : {}),
|
|
140
|
+
...(options.sizes ? { sizes: options.sizes } : {}),
|
|
141
|
+
alt,
|
|
142
|
+
...(caption ? { caption } : {}),
|
|
143
|
+
width: dimensions.width,
|
|
144
|
+
height: dimensions.height,
|
|
145
|
+
transformKey,
|
|
146
|
+
...(blurDataURL ? { blurDataURL } : {}),
|
|
147
|
+
props,
|
|
148
|
+
};
|
|
149
|
+
}
|
|
150
|
+
function failureStatus(failure) {
|
|
151
|
+
if (failure?.reason === 'unavailable-at-publication') {
|
|
152
|
+
return 'unavailable-at-publication';
|
|
153
|
+
}
|
|
154
|
+
if (failure?.reason === 'pinned-version-missing') {
|
|
155
|
+
return 'pinned-version-missing';
|
|
156
|
+
}
|
|
157
|
+
return 'missing-asset';
|
|
158
|
+
}
|
|
159
|
+
function failureMessage(assetId, status, failure) {
|
|
160
|
+
if (status === 'unavailable-at-publication') {
|
|
161
|
+
return `Storystick image asset "${assetId}" was not ready when this publication was created.`;
|
|
162
|
+
}
|
|
163
|
+
if (status === 'pinned-version-missing') {
|
|
164
|
+
return `Storystick image asset "${assetId}" cannot resolve its pinned version${failure?.version !== undefined ? ` ${failure.version}` : ''}.`;
|
|
165
|
+
}
|
|
166
|
+
return `Storystick image asset "${assetId}" is missing from the _assets sidecar.`;
|
|
167
|
+
}
|
|
168
|
+
function deliveryAssetStatus(status) {
|
|
169
|
+
if (status === 'archived')
|
|
170
|
+
return 'archived-asset';
|
|
171
|
+
if (status === 'private-unsigned')
|
|
172
|
+
return 'private-asset';
|
|
173
|
+
if (status === 'provider-unconfigured')
|
|
174
|
+
return 'provider-unconfigured';
|
|
175
|
+
return 'asset-not-ready';
|
|
176
|
+
}
|
|
177
|
+
/** Resolve a provider-neutral File field to its canonical download surface. */
|
|
178
|
+
export function resolveFile(file, options = {}) {
|
|
179
|
+
options = { ...options, source: contentResolutionSource(file, options) };
|
|
180
|
+
if (!file || typeof file.assetId !== 'string' || file.assetId.length === 0) {
|
|
181
|
+
return { status: 'no-file', props: null };
|
|
182
|
+
}
|
|
183
|
+
const assetId = file.assetId;
|
|
184
|
+
const markerAttrs = previewObjectMarkerAttrs(file);
|
|
185
|
+
const lookup = lookupStorystickAsset(options.source, assetId);
|
|
186
|
+
if (lookup.status === 'no-sidecar') {
|
|
187
|
+
warn(options, `Storystick file asset "${assetId}" cannot resolve without an _assets sidecar.`);
|
|
188
|
+
return { ...markerAttrs, status: 'no-sidecar', assetId, props: null };
|
|
189
|
+
}
|
|
190
|
+
if (lookup.status !== 'ok') {
|
|
191
|
+
warn(options, fileFailureMessage(assetId, lookup.status, 'failure' in lookup ? lookup.failure : undefined));
|
|
192
|
+
return {
|
|
193
|
+
...markerAttrs,
|
|
194
|
+
status: lookup.status,
|
|
195
|
+
assetId,
|
|
196
|
+
...('version' in lookup && lookup.version !== undefined
|
|
197
|
+
? { version: lookup.version }
|
|
198
|
+
: {}),
|
|
199
|
+
props: null,
|
|
200
|
+
};
|
|
201
|
+
}
|
|
202
|
+
const asset = lookup.asset;
|
|
203
|
+
if (asset.assetType !== 'file') {
|
|
204
|
+
warn(options, `Storystick file asset "${assetId}" is not a file asset.`);
|
|
205
|
+
return { ...markerAttrs, status: 'not-file', assetId, asset, props: null };
|
|
206
|
+
}
|
|
207
|
+
if (asset.delivery.status !== 'ready' || !asset.delivery.baseUrl) {
|
|
208
|
+
const status = deliveryAssetStatus(asset.delivery.status);
|
|
209
|
+
warn(options, `Storystick file asset "${assetId}" is not downloadable; delivery status is "${asset.delivery.status}".`);
|
|
210
|
+
return { ...markerAttrs, status, assetId, asset, props: null };
|
|
211
|
+
}
|
|
212
|
+
const filename = stripPreviewProvenanceTextMarkers(asset.originalFilename ?? '').trim() ||
|
|
213
|
+
stripPreviewProvenanceTextMarkers(asset.displayName ?? '') || assetId;
|
|
214
|
+
const href = storystickAssetOriginalDownloadUrl(asset);
|
|
215
|
+
if (!href) {
|
|
216
|
+
return {
|
|
217
|
+
...markerAttrs,
|
|
218
|
+
status: 'asset-not-ready',
|
|
219
|
+
assetId,
|
|
220
|
+
asset,
|
|
221
|
+
props: null,
|
|
222
|
+
};
|
|
223
|
+
}
|
|
224
|
+
const props = {
|
|
225
|
+
...markerAttrs,
|
|
226
|
+
href,
|
|
227
|
+
download: filename,
|
|
228
|
+
...(asset.mimeType ? { type: asset.mimeType } : {}),
|
|
229
|
+
};
|
|
230
|
+
return {
|
|
231
|
+
...markerAttrs,
|
|
232
|
+
status: 'ok',
|
|
233
|
+
asset,
|
|
234
|
+
href,
|
|
235
|
+
filename,
|
|
236
|
+
...(asset.mimeType ? { mimeType: asset.mimeType } : {}),
|
|
237
|
+
...(asset.sizeBytes !== undefined ? { sizeBytes: asset.sizeBytes } : {}),
|
|
238
|
+
props,
|
|
239
|
+
};
|
|
240
|
+
}
|
|
241
|
+
export function getAssetSidecar(source) {
|
|
242
|
+
if (isAssetSidecar(source))
|
|
243
|
+
return source;
|
|
244
|
+
if (!isRecord(source))
|
|
245
|
+
return undefined;
|
|
246
|
+
return isAssetSidecar(source._assets) ? source._assets : undefined;
|
|
247
|
+
}
|
|
248
|
+
function resolveAlt(image, asset, options) {
|
|
249
|
+
if (typeof image.alt === 'string') {
|
|
250
|
+
if (image.alt.length === 0)
|
|
251
|
+
return '';
|
|
252
|
+
if (image.alt.trim().length > 0)
|
|
253
|
+
return image.alt;
|
|
254
|
+
}
|
|
255
|
+
if (asset.altDefault.state === 'text')
|
|
256
|
+
return asset.altDefault.text;
|
|
257
|
+
if (asset.altDefault.state === 'decorative')
|
|
258
|
+
return '';
|
|
259
|
+
warn(options, `Storystick image asset "${asset.assetId}" has no alt text.`);
|
|
260
|
+
return '';
|
|
261
|
+
}
|
|
262
|
+
function fileFailureMessage(assetId, status, failure) {
|
|
263
|
+
if (status === 'unavailable-at-publication') {
|
|
264
|
+
return `Storystick file asset "${assetId}" was not ready when this publication was created.`;
|
|
265
|
+
}
|
|
266
|
+
if (status === 'pinned-version-missing') {
|
|
267
|
+
return `Storystick file asset "${assetId}" cannot resolve its pinned version${failure?.version !== undefined ? ` ${failure.version}` : ''}.`;
|
|
268
|
+
}
|
|
269
|
+
return `Storystick file asset "${assetId}" is missing from the _assets sidecar.`;
|
|
270
|
+
}
|
|
271
|
+
function resolveDimensions(asset, options) {
|
|
272
|
+
const assetWidth = finitePositive(asset.width) ? asset.width : undefined;
|
|
273
|
+
const assetHeight = finitePositive(asset.height) ? asset.height : undefined;
|
|
274
|
+
const optionWidth = finitePositive(options.width) ? options.width : undefined;
|
|
275
|
+
const optionHeight = finitePositive(options.height) ? options.height : undefined;
|
|
276
|
+
if (optionWidth && optionHeight)
|
|
277
|
+
return { width: optionWidth, height: optionHeight };
|
|
278
|
+
if (optionWidth && assetWidth && assetHeight) {
|
|
279
|
+
return { width: optionWidth, height: Math.round((optionWidth * assetHeight) / assetWidth) };
|
|
280
|
+
}
|
|
281
|
+
if (optionHeight && assetWidth && assetHeight) {
|
|
282
|
+
return { width: Math.round((optionHeight * assetWidth) / assetHeight), height: optionHeight };
|
|
283
|
+
}
|
|
284
|
+
if (assetWidth && assetHeight)
|
|
285
|
+
return { width: assetWidth, height: assetHeight };
|
|
286
|
+
return null;
|
|
287
|
+
}
|
|
288
|
+
function finitePositive(value) {
|
|
289
|
+
return typeof value === 'number' && Number.isFinite(value) && value > 0;
|
|
290
|
+
}
|
|
291
|
+
function unitPercent(value) {
|
|
292
|
+
return `${Number((value * 100).toFixed(4))}%`;
|
|
293
|
+
}
|
|
294
|
+
function isAssetSidecar(value) {
|
|
295
|
+
return isRecord(value) && isRecord(value.byId);
|
|
296
|
+
}
|
|
297
|
+
function isRecord(value) {
|
|
298
|
+
return typeof value === 'object' && value !== null && !Array.isArray(value);
|
|
299
|
+
}
|
|
300
|
+
function buildSrcSet(baseUrl, asset, options, framingCrop) {
|
|
301
|
+
const requestedWidths = options.widths ??
|
|
302
|
+
(options.sizes ? DEFAULT_RESPONSIVE_IMAGE_WIDTHS : undefined);
|
|
303
|
+
const widths = normalizeSrcSetWidths(requestedWidths, asset.width);
|
|
304
|
+
if (widths.length === 0)
|
|
305
|
+
return undefined;
|
|
306
|
+
return widths
|
|
307
|
+
.map((width) => {
|
|
308
|
+
const transform = transformForOptions({ ...options, width, height: undefined, dpr: undefined }, framingCrop);
|
|
309
|
+
const transformKey = buildImageTransformKey(transform);
|
|
310
|
+
const url = asset.externalImage ? buildUnsplashImageUrl({ urls: asset.externalImage.urls, width: asset.width, height: asset.height }, transform) : transformUrl(baseUrl, transformKey);
|
|
311
|
+
return `${url} ${width}w`;
|
|
312
|
+
})
|
|
313
|
+
.join(', ');
|
|
314
|
+
}
|
|
315
|
+
function normalizeSrcSetWidths(widths, assetWidth) {
|
|
316
|
+
if (!widths || widths.length === 0)
|
|
317
|
+
return [];
|
|
318
|
+
const max = finitePositive(assetWidth) ? assetWidth : Infinity;
|
|
319
|
+
const unique = new Set();
|
|
320
|
+
for (const width of widths) {
|
|
321
|
+
const bucket = roundUpImageDimensionBucket(width);
|
|
322
|
+
if (bucket !== null && bucket <= max)
|
|
323
|
+
unique.add(bucket);
|
|
324
|
+
}
|
|
325
|
+
return [...unique].sort((a, b) => a - b);
|
|
326
|
+
}
|
|
327
|
+
function transformForOptions(options, framingCrop) {
|
|
328
|
+
const resize = options.width !== undefined || options.height !== undefined
|
|
329
|
+
? {
|
|
330
|
+
width: options.width,
|
|
331
|
+
height: options.height,
|
|
332
|
+
fit: options.fit ?? (options.width !== undefined && options.height !== undefined ? 'cover' : 'scale-down'),
|
|
333
|
+
}
|
|
334
|
+
: undefined;
|
|
335
|
+
if (!resize &&
|
|
336
|
+
framingCrop === null &&
|
|
337
|
+
options.format === undefined &&
|
|
338
|
+
options.quality === undefined &&
|
|
339
|
+
options.dpr === undefined) {
|
|
340
|
+
return null;
|
|
341
|
+
}
|
|
342
|
+
return {
|
|
343
|
+
schemaVersion: 1,
|
|
344
|
+
...(resize ? { resize } : {}),
|
|
345
|
+
...(framingCrop
|
|
346
|
+
? { focus: { mode: 'crop', crop: framingCrop } }
|
|
347
|
+
: {}),
|
|
348
|
+
...(options.format !== undefined ? { format: options.format } : {}),
|
|
349
|
+
...(options.quality !== undefined ? { quality: options.quality } : {}),
|
|
350
|
+
...(options.dpr !== undefined ? { dpr: options.dpr } : {}),
|
|
351
|
+
};
|
|
352
|
+
}
|
|
353
|
+
function resolveBlurDataURL(asset) {
|
|
354
|
+
const lqip = asset.metadata?.lqip;
|
|
355
|
+
return typeof lqip === 'string' &&
|
|
356
|
+
lqip.length <= 1024 &&
|
|
357
|
+
/^data:image\/(?:avif|jpeg|png|webp);base64,[A-Za-z0-9+/]+={0,2}$/.test(lqip)
|
|
358
|
+
? lqip
|
|
359
|
+
: undefined;
|
|
360
|
+
}
|
|
361
|
+
function transformUrl(baseUrl, transformKey) {
|
|
362
|
+
return `${baseUrl.replace(/\/+$/, '')}/${encodeURIComponent(transformKey)}`;
|
|
363
|
+
}
|
|
364
|
+
function warn(options, message) {
|
|
365
|
+
if (options.warn) {
|
|
366
|
+
options.warn(message);
|
|
367
|
+
return;
|
|
368
|
+
}
|
|
369
|
+
if (isProduction())
|
|
370
|
+
return;
|
|
371
|
+
if (typeof console !== 'undefined' && typeof console.warn === 'function') {
|
|
372
|
+
console.warn(message);
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
function isProduction() {
|
|
376
|
+
return (typeof process !== 'undefined' &&
|
|
377
|
+
typeof process.env === 'object' &&
|
|
378
|
+
process.env.NODE_ENV === 'production');
|
|
379
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/** Shared renderer diagnostics; not part of the public media API. */
|
|
2
|
+
export function emitMediaDiagnostic(message, warn) {
|
|
3
|
+
warn?.(message);
|
|
4
|
+
if (typeof console !== 'undefined' && typeof console.warn === 'function')
|
|
5
|
+
console.warn(message);
|
|
6
|
+
}
|
|
7
|
+
export function isProduction() {
|
|
8
|
+
return typeof process !== 'undefined' && typeof process.env === 'object' && process.env.NODE_ENV === 'production';
|
|
9
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export interface StorystickVideoTrackData {
|
|
2
|
+
/** WebVTT file */
|
|
3
|
+
assetId?: string;
|
|
4
|
+
/** Kind */
|
|
5
|
+
kind?: "captions" | "subtitles";
|
|
6
|
+
/** Language */
|
|
7
|
+
language?: string;
|
|
8
|
+
/** Label */
|
|
9
|
+
label?: string;
|
|
10
|
+
/** Default track */
|
|
11
|
+
default?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export interface StorystickVideoFieldData {
|
|
14
|
+
/** Video asset */
|
|
15
|
+
assetId?: string;
|
|
16
|
+
/** Poster image */
|
|
17
|
+
posterAssetId?: string;
|
|
18
|
+
/** Text tracks */
|
|
19
|
+
tracks?: Array<StorystickVideoTrackData & {
|
|
20
|
+
_key: string;
|
|
21
|
+
}>;
|
|
22
|
+
}
|
package/dist/video.d.ts
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { isPlausibleBcp47LanguageTag, type PreviewObjectMarkerAttrs, type PreviewObjectMarkerCarrier, type StorystickAsset } from '@storystick/types';
|
|
2
|
+
import type { StorystickVideoFieldData, StorystickVideoTrackData } from './video-field.generated.js';
|
|
3
|
+
export { isPlausibleBcp47LanguageTag };
|
|
4
|
+
export type StorystickVideoTrack = StorystickVideoTrackData & PreviewObjectMarkerCarrier;
|
|
5
|
+
/** Canonical provider-neutral value emitted by a `type: video` Story field. */
|
|
6
|
+
export type StorystickVideoField = Omit<StorystickVideoFieldData, 'tracks'> & PreviewObjectMarkerCarrier & {
|
|
7
|
+
tracks?: Array<StorystickVideoTrack & {
|
|
8
|
+
_key: string;
|
|
9
|
+
}>;
|
|
10
|
+
};
|
|
11
|
+
export type ResolveVideoOptions = {
|
|
12
|
+
source?: unknown;
|
|
13
|
+
warn?: (message: string) => void;
|
|
14
|
+
};
|
|
15
|
+
export type VideoStatus = 'ok' | 'no-video' | 'no-sidecar' | 'missing-asset' | 'unavailable-at-publication' | 'pinned-version-missing' | 'not-video' | 'archived-asset' | 'private-asset' | 'asset-not-ready' | 'provider-unconfigured' | 'invalid-metadata';
|
|
16
|
+
export type VideoPosterStatus = 'ok' | 'no-poster' | 'no-sidecar' | 'missing-asset' | 'unavailable-at-publication' | 'pinned-version-missing' | 'not-image' | 'archived-asset' | 'private-asset' | 'asset-not-ready' | 'provider-unconfigured';
|
|
17
|
+
export type VideoTrackStatus = 'ok' | 'invalid-track' | 'no-sidecar' | 'missing-asset' | 'unavailable-at-publication' | 'pinned-version-missing' | 'not-file' | 'not-vtt' | 'archived-asset' | 'private-asset' | 'asset-not-ready' | 'provider-unconfigured';
|
|
18
|
+
export type StorystickVideoProps = {
|
|
19
|
+
src: string;
|
|
20
|
+
poster?: string;
|
|
21
|
+
crossOrigin?: 'anonymous';
|
|
22
|
+
width: number;
|
|
23
|
+
height: number;
|
|
24
|
+
controls: true;
|
|
25
|
+
preload: 'metadata';
|
|
26
|
+
playsInline: true;
|
|
27
|
+
} & PreviewObjectMarkerAttrs;
|
|
28
|
+
export type StorystickVideoTrackProps = {
|
|
29
|
+
src: string;
|
|
30
|
+
kind: 'captions' | 'subtitles';
|
|
31
|
+
srcLang: string;
|
|
32
|
+
label?: string;
|
|
33
|
+
default?: boolean;
|
|
34
|
+
} & PreviewObjectMarkerAttrs;
|
|
35
|
+
export type ResolvedStorystickVideoPoster = {
|
|
36
|
+
status: 'ok';
|
|
37
|
+
assetId: string;
|
|
38
|
+
asset: StorystickAsset;
|
|
39
|
+
src: string;
|
|
40
|
+
} | {
|
|
41
|
+
status: 'no-poster';
|
|
42
|
+
assetId?: never;
|
|
43
|
+
asset?: never;
|
|
44
|
+
src?: never;
|
|
45
|
+
} | {
|
|
46
|
+
status: 'no-sidecar' | 'missing-asset' | 'unavailable-at-publication' | 'pinned-version-missing';
|
|
47
|
+
assetId: string;
|
|
48
|
+
version?: number;
|
|
49
|
+
asset?: never;
|
|
50
|
+
src?: never;
|
|
51
|
+
} | {
|
|
52
|
+
status: 'not-image' | 'archived-asset' | 'private-asset' | 'asset-not-ready' | 'provider-unconfigured';
|
|
53
|
+
assetId: string;
|
|
54
|
+
asset: StorystickAsset;
|
|
55
|
+
src?: never;
|
|
56
|
+
};
|
|
57
|
+
export type ResolvedStorystickVideoTrack = ({
|
|
58
|
+
status: 'ok';
|
|
59
|
+
_key: string;
|
|
60
|
+
assetId: string;
|
|
61
|
+
asset: StorystickAsset;
|
|
62
|
+
kind: 'captions' | 'subtitles';
|
|
63
|
+
language: string;
|
|
64
|
+
label?: string;
|
|
65
|
+
default?: boolean;
|
|
66
|
+
props: StorystickVideoTrackProps;
|
|
67
|
+
} & PreviewObjectMarkerAttrs) | ({
|
|
68
|
+
status: 'invalid-track';
|
|
69
|
+
_key: string;
|
|
70
|
+
assetId?: string;
|
|
71
|
+
props: null;
|
|
72
|
+
} & PreviewObjectMarkerAttrs) | ({
|
|
73
|
+
status: 'no-sidecar' | 'missing-asset' | 'unavailable-at-publication' | 'pinned-version-missing';
|
|
74
|
+
_key: string;
|
|
75
|
+
assetId: string;
|
|
76
|
+
version?: number;
|
|
77
|
+
asset?: never;
|
|
78
|
+
props: null;
|
|
79
|
+
} & PreviewObjectMarkerAttrs) | ({
|
|
80
|
+
status: 'not-file' | 'not-vtt' | 'archived-asset' | 'private-asset' | 'asset-not-ready' | 'provider-unconfigured';
|
|
81
|
+
_key: string;
|
|
82
|
+
assetId: string;
|
|
83
|
+
asset: StorystickAsset;
|
|
84
|
+
props: null;
|
|
85
|
+
} & PreviewObjectMarkerAttrs);
|
|
86
|
+
type ResolvedStorystickVideoOk = {
|
|
87
|
+
status: 'ok';
|
|
88
|
+
assetId: string;
|
|
89
|
+
asset: StorystickAsset;
|
|
90
|
+
src: string;
|
|
91
|
+
width: number;
|
|
92
|
+
height: number;
|
|
93
|
+
durationSeconds: number;
|
|
94
|
+
codecs: NonNullable<StorystickAsset['codecs']>;
|
|
95
|
+
poster: ResolvedStorystickVideoPoster;
|
|
96
|
+
tracks: ResolvedStorystickVideoTrack[];
|
|
97
|
+
props: StorystickVideoProps;
|
|
98
|
+
} & PreviewObjectMarkerAttrs;
|
|
99
|
+
export type ResolvedStorystickVideo = ResolvedStorystickVideoOk | {
|
|
100
|
+
status: 'no-video';
|
|
101
|
+
assetId?: never;
|
|
102
|
+
asset?: never;
|
|
103
|
+
props: null;
|
|
104
|
+
} | ({
|
|
105
|
+
status: 'no-sidecar' | 'missing-asset' | 'unavailable-at-publication' | 'pinned-version-missing';
|
|
106
|
+
assetId: string;
|
|
107
|
+
version?: number;
|
|
108
|
+
asset?: never;
|
|
109
|
+
props: null;
|
|
110
|
+
} & PreviewObjectMarkerAttrs) | ({
|
|
111
|
+
status: 'not-video' | 'archived-asset' | 'private-asset' | 'asset-not-ready' | 'provider-unconfigured' | 'invalid-metadata';
|
|
112
|
+
assetId: string;
|
|
113
|
+
asset: StorystickAsset;
|
|
114
|
+
props: null;
|
|
115
|
+
} & PreviewObjectMarkerAttrs);
|
|
116
|
+
/** Resolve a provider-neutral Video field, poster and WebVTT tracks. */
|
|
117
|
+
export declare function resolveVideo(video: StorystickVideoField | null | undefined, options?: ResolveVideoOptions): ResolvedStorystickVideo;
|
package/dist/video.js
ADDED
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
import { stripPreviewProvenanceTextMarkers } from '@storystick/types/preview-provenance';
|
|
2
|
+
import { contentResolutionSource } from '@storystick/types/internal/content-origin';
|
|
3
|
+
import { isPlausibleBcp47LanguageTag, lookupStorystickAsset, previewObjectMarkerAttrs, storystickAssetOriginalUrl, } from '@storystick/types';
|
|
4
|
+
export { isPlausibleBcp47LanguageTag };
|
|
5
|
+
/** Resolve a provider-neutral Video field, poster and WebVTT tracks. */
|
|
6
|
+
export function resolveVideo(video, options = {}) {
|
|
7
|
+
options = { ...options, source: contentResolutionSource(video, options) };
|
|
8
|
+
if (!video ||
|
|
9
|
+
typeof video.assetId !== 'string' ||
|
|
10
|
+
video.assetId.length === 0) {
|
|
11
|
+
return { status: 'no-video', props: null };
|
|
12
|
+
}
|
|
13
|
+
const assetId = video.assetId;
|
|
14
|
+
const markerAttrs = previewObjectMarkerAttrs(video);
|
|
15
|
+
const lookup = lookupStorystickAsset(options.source, assetId);
|
|
16
|
+
if (lookup.status === 'no-sidecar') {
|
|
17
|
+
warn(options, `Storystick video asset "${assetId}" cannot resolve without an _assets sidecar.`);
|
|
18
|
+
return { ...markerAttrs, status: 'no-sidecar', assetId, props: null };
|
|
19
|
+
}
|
|
20
|
+
if (lookup.status !== 'ok') {
|
|
21
|
+
warn(options, videoAssetFailureMessage('video', assetId, lookup.status, 'failure' in lookup ? lookup.failure : undefined));
|
|
22
|
+
return {
|
|
23
|
+
...markerAttrs,
|
|
24
|
+
status: lookup.status,
|
|
25
|
+
assetId,
|
|
26
|
+
...('version' in lookup && lookup.version !== undefined
|
|
27
|
+
? { version: lookup.version }
|
|
28
|
+
: {}),
|
|
29
|
+
props: null,
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
const asset = lookup.asset;
|
|
33
|
+
if (asset.assetType !== 'video') {
|
|
34
|
+
warn(options, `Storystick video asset "${assetId}" is not a video asset.`);
|
|
35
|
+
return { ...markerAttrs, status: 'not-video', assetId, asset, props: null };
|
|
36
|
+
}
|
|
37
|
+
if (asset.delivery.status !== 'ready' || !asset.delivery.baseUrl) {
|
|
38
|
+
const status = deliveryAssetStatus(asset.delivery.status);
|
|
39
|
+
warn(options, `Storystick video asset "${assetId}" is not playable; delivery status is "${asset.delivery.status}".`);
|
|
40
|
+
return { ...markerAttrs, status, assetId, asset, props: null };
|
|
41
|
+
}
|
|
42
|
+
const src = storystickAssetOriginalUrl(asset);
|
|
43
|
+
if (!src ||
|
|
44
|
+
!finitePositive(asset.width) ||
|
|
45
|
+
!finitePositive(asset.height) ||
|
|
46
|
+
!finitePositive(asset.durationSeconds) ||
|
|
47
|
+
!asset.codecs?.video) {
|
|
48
|
+
warn(options, `Storystick video asset "${assetId}" is missing authoritative playback metadata.`);
|
|
49
|
+
return {
|
|
50
|
+
...markerAttrs,
|
|
51
|
+
status: 'invalid-metadata',
|
|
52
|
+
assetId,
|
|
53
|
+
asset,
|
|
54
|
+
props: null,
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
const poster = resolveVideoPoster(video.posterAssetId, options);
|
|
58
|
+
let hasDefaultTrack = false;
|
|
59
|
+
const tracks = (video.tracks ?? []).map((track) => {
|
|
60
|
+
const resolved = resolveVideoTrack(track, options);
|
|
61
|
+
if (resolved.status !== 'ok' || resolved.default !== true)
|
|
62
|
+
return resolved;
|
|
63
|
+
if (!hasDefaultTrack) {
|
|
64
|
+
hasDefaultTrack = true;
|
|
65
|
+
return resolved;
|
|
66
|
+
}
|
|
67
|
+
warn(options, `Storystick video track "${track._key}" cannot also be default; only the first resolved default track is kept.`);
|
|
68
|
+
const { default: _default, ...trackWithoutDefault } = resolved;
|
|
69
|
+
const { default: _propsDefault, ...propsWithoutDefault } = resolved.props;
|
|
70
|
+
return { ...trackWithoutDefault, props: propsWithoutDefault };
|
|
71
|
+
});
|
|
72
|
+
const props = {
|
|
73
|
+
...markerAttrs,
|
|
74
|
+
src,
|
|
75
|
+
...(poster.status === 'ok' ? { poster: poster.src } : {}),
|
|
76
|
+
...(tracks.some((track) => track.status === 'ok')
|
|
77
|
+
? { crossOrigin: 'anonymous' }
|
|
78
|
+
: {}),
|
|
79
|
+
width: asset.width,
|
|
80
|
+
height: asset.height,
|
|
81
|
+
controls: true,
|
|
82
|
+
preload: 'metadata',
|
|
83
|
+
playsInline: true,
|
|
84
|
+
};
|
|
85
|
+
return {
|
|
86
|
+
...markerAttrs,
|
|
87
|
+
status: 'ok',
|
|
88
|
+
assetId,
|
|
89
|
+
asset,
|
|
90
|
+
src,
|
|
91
|
+
width: asset.width,
|
|
92
|
+
height: asset.height,
|
|
93
|
+
durationSeconds: asset.durationSeconds,
|
|
94
|
+
codecs: asset.codecs,
|
|
95
|
+
poster,
|
|
96
|
+
tracks,
|
|
97
|
+
props,
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
function resolveVideoPoster(posterAssetId, options) {
|
|
101
|
+
if (!posterAssetId)
|
|
102
|
+
return { status: 'no-poster' };
|
|
103
|
+
const lookup = lookupStorystickAsset(options.source, posterAssetId);
|
|
104
|
+
if (lookup.status === 'no-sidecar') {
|
|
105
|
+
warn(options, `Storystick video poster "${posterAssetId}" cannot resolve without an _assets sidecar.`);
|
|
106
|
+
return { status: 'no-sidecar', assetId: posterAssetId };
|
|
107
|
+
}
|
|
108
|
+
if (lookup.status !== 'ok') {
|
|
109
|
+
warn(options, videoAssetFailureMessage('poster', posterAssetId, lookup.status, 'failure' in lookup ? lookup.failure : undefined));
|
|
110
|
+
return {
|
|
111
|
+
status: lookup.status,
|
|
112
|
+
assetId: posterAssetId,
|
|
113
|
+
...('version' in lookup && lookup.version !== undefined
|
|
114
|
+
? { version: lookup.version }
|
|
115
|
+
: {}),
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
const asset = lookup.asset;
|
|
119
|
+
if (asset.assetType !== 'image') {
|
|
120
|
+
warn(options, `Storystick video poster "${posterAssetId}" is not an image asset.`);
|
|
121
|
+
return { status: 'not-image', assetId: posterAssetId, asset };
|
|
122
|
+
}
|
|
123
|
+
const src = storystickAssetOriginalUrl(asset);
|
|
124
|
+
if (!src) {
|
|
125
|
+
const status = deliveryAssetStatus(asset.delivery.status);
|
|
126
|
+
warn(options, `Storystick video poster "${posterAssetId}" is not renderable; delivery status is "${asset.delivery.status}".`);
|
|
127
|
+
return { status, assetId: posterAssetId, asset };
|
|
128
|
+
}
|
|
129
|
+
return { status: 'ok', assetId: posterAssetId, asset, src };
|
|
130
|
+
}
|
|
131
|
+
function resolveVideoTrack(track, options) {
|
|
132
|
+
const markerAttrs = previewObjectMarkerAttrs(track);
|
|
133
|
+
const assetId = track.assetId;
|
|
134
|
+
if (!assetId ||
|
|
135
|
+
(track.kind !== 'captions' && track.kind !== 'subtitles') ||
|
|
136
|
+
!isPlausibleBcp47LanguageTag(track.language)) {
|
|
137
|
+
warn(options, `Storystick video track "${track._key}" needs a WebVTT asset, captions/subtitles kind and BCP 47 language.`);
|
|
138
|
+
return {
|
|
139
|
+
...markerAttrs,
|
|
140
|
+
status: 'invalid-track',
|
|
141
|
+
_key: track._key,
|
|
142
|
+
...(assetId ? { assetId } : {}),
|
|
143
|
+
props: null,
|
|
144
|
+
};
|
|
145
|
+
}
|
|
146
|
+
const lookup = lookupStorystickAsset(options.source, assetId);
|
|
147
|
+
if (lookup.status === 'no-sidecar') {
|
|
148
|
+
warn(options, `Storystick video track "${track._key}" cannot resolve asset "${assetId}" without an _assets sidecar.`);
|
|
149
|
+
return {
|
|
150
|
+
...markerAttrs,
|
|
151
|
+
status: 'no-sidecar',
|
|
152
|
+
_key: track._key,
|
|
153
|
+
assetId,
|
|
154
|
+
props: null,
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
if (lookup.status !== 'ok') {
|
|
158
|
+
warn(options, videoAssetFailureMessage('track', assetId, lookup.status, 'failure' in lookup ? lookup.failure : undefined));
|
|
159
|
+
return {
|
|
160
|
+
...markerAttrs,
|
|
161
|
+
status: lookup.status,
|
|
162
|
+
_key: track._key,
|
|
163
|
+
assetId,
|
|
164
|
+
...('version' in lookup && lookup.version !== undefined
|
|
165
|
+
? { version: lookup.version }
|
|
166
|
+
: {}),
|
|
167
|
+
props: null,
|
|
168
|
+
};
|
|
169
|
+
}
|
|
170
|
+
const asset = lookup.asset;
|
|
171
|
+
if (asset.assetType !== 'file') {
|
|
172
|
+
warn(options, `Storystick video track "${track._key}" asset "${assetId}" is not a file asset.`);
|
|
173
|
+
return {
|
|
174
|
+
...markerAttrs,
|
|
175
|
+
status: 'not-file',
|
|
176
|
+
_key: track._key,
|
|
177
|
+
assetId,
|
|
178
|
+
asset,
|
|
179
|
+
props: null,
|
|
180
|
+
};
|
|
181
|
+
}
|
|
182
|
+
if (asset.mimeType !== 'text/vtt') {
|
|
183
|
+
warn(options, `Storystick video track "${track._key}" asset "${assetId}" is not WebVTT.`);
|
|
184
|
+
return {
|
|
185
|
+
...markerAttrs,
|
|
186
|
+
status: 'not-vtt',
|
|
187
|
+
_key: track._key,
|
|
188
|
+
assetId,
|
|
189
|
+
asset,
|
|
190
|
+
props: null,
|
|
191
|
+
};
|
|
192
|
+
}
|
|
193
|
+
const src = storystickAssetOriginalUrl(asset);
|
|
194
|
+
if (!src) {
|
|
195
|
+
warn(options, `Storystick video track "${track._key}" asset "${assetId}" is not deliverable; delivery status is "${asset.delivery.status}".`);
|
|
196
|
+
return {
|
|
197
|
+
...markerAttrs,
|
|
198
|
+
status: deliveryAssetStatus(asset.delivery.status),
|
|
199
|
+
_key: track._key,
|
|
200
|
+
assetId,
|
|
201
|
+
asset,
|
|
202
|
+
props: null,
|
|
203
|
+
};
|
|
204
|
+
}
|
|
205
|
+
const label = track.label === undefined ? undefined : stripPreviewProvenanceTextMarkers(track.label);
|
|
206
|
+
const props = {
|
|
207
|
+
...markerAttrs,
|
|
208
|
+
src,
|
|
209
|
+
kind: track.kind,
|
|
210
|
+
srcLang: track.language,
|
|
211
|
+
...(label ? { label } : {}),
|
|
212
|
+
...(track.default === true ? { default: true } : {}),
|
|
213
|
+
};
|
|
214
|
+
return {
|
|
215
|
+
...markerAttrs,
|
|
216
|
+
status: 'ok',
|
|
217
|
+
_key: track._key,
|
|
218
|
+
assetId,
|
|
219
|
+
asset,
|
|
220
|
+
kind: track.kind,
|
|
221
|
+
language: track.language,
|
|
222
|
+
...(label ? { label } : {}),
|
|
223
|
+
...(track.default === true ? { default: true } : {}),
|
|
224
|
+
props,
|
|
225
|
+
};
|
|
226
|
+
}
|
|
227
|
+
function videoAssetFailureMessage(role, assetId, status, failure) {
|
|
228
|
+
const subject = `Storystick video ${role} asset "${assetId}"`;
|
|
229
|
+
if (status === 'unavailable-at-publication') {
|
|
230
|
+
return `${subject} was not ready when this publication was created.`;
|
|
231
|
+
}
|
|
232
|
+
if (status === 'pinned-version-missing') {
|
|
233
|
+
return `${subject} cannot resolve its pinned version${failure?.version !== undefined ? ` ${failure.version}` : ''}.`;
|
|
234
|
+
}
|
|
235
|
+
return `${subject} is missing from the _assets sidecar.`;
|
|
236
|
+
}
|
|
237
|
+
function deliveryAssetStatus(status) {
|
|
238
|
+
if (status === 'archived')
|
|
239
|
+
return 'archived-asset';
|
|
240
|
+
if (status === 'private-unsigned')
|
|
241
|
+
return 'private-asset';
|
|
242
|
+
if (status === 'provider-unconfigured')
|
|
243
|
+
return 'provider-unconfigured';
|
|
244
|
+
return 'asset-not-ready';
|
|
245
|
+
}
|
|
246
|
+
function finitePositive(value) {
|
|
247
|
+
return typeof value === 'number' && Number.isFinite(value) && value > 0;
|
|
248
|
+
}
|
|
249
|
+
function warn(options, message) {
|
|
250
|
+
if (options.warn) {
|
|
251
|
+
options.warn(message);
|
|
252
|
+
return;
|
|
253
|
+
}
|
|
254
|
+
if (isProduction())
|
|
255
|
+
return;
|
|
256
|
+
if (typeof console !== 'undefined' && typeof console.warn === 'function') {
|
|
257
|
+
console.warn(message);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
function isProduction() {
|
|
261
|
+
return (typeof process !== 'undefined' &&
|
|
262
|
+
typeof process.env === 'object' &&
|
|
263
|
+
process.env.NODE_ENV === 'production');
|
|
264
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,60 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storystick/media",
|
|
3
|
-
"version": "0.0.0
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.2.0-rc.0",
|
|
4
|
+
"license": "FSL-1.1-MIT",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"main": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./video": {
|
|
15
|
+
"types": "./dist/video.d.ts",
|
|
16
|
+
"import": "./dist/video.js",
|
|
17
|
+
"default": "./dist/video.js"
|
|
18
|
+
},
|
|
19
|
+
"./internal/render-diagnostics": {
|
|
20
|
+
"types": "./dist/internal/render-diagnostics.d.ts",
|
|
21
|
+
"import": "./dist/internal/render-diagnostics.js"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"dist",
|
|
26
|
+
"README.md",
|
|
27
|
+
"PUBLIC-API.md"
|
|
28
|
+
],
|
|
29
|
+
"publishConfig": {
|
|
30
|
+
"access": "public",
|
|
31
|
+
"provenance": false,
|
|
32
|
+
"tag": "beta"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@storystick/asset-grammar": "0.1.0-rc.0",
|
|
36
|
+
"@storystick/types": "0.1.0-rc.0"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@types/node": "^22.13.10",
|
|
40
|
+
"typescript": "^5.8.2",
|
|
41
|
+
"vitest": "^3.1.1"
|
|
42
|
+
},
|
|
43
|
+
"engines": {
|
|
44
|
+
"node": ">=24.19.0 <25"
|
|
45
|
+
},
|
|
46
|
+
"repository": {
|
|
47
|
+
"type": "git",
|
|
48
|
+
"url": "git+https://github.com/withstorystick/storystick.git",
|
|
49
|
+
"directory": "packages/media"
|
|
50
|
+
},
|
|
51
|
+
"homepage": "https://storystick.app",
|
|
52
|
+
"bugs": {
|
|
53
|
+
"url": "https://storystick.app"
|
|
54
|
+
},
|
|
55
|
+
"scripts": {
|
|
56
|
+
"build": "node ../../scripts/package-dist.mjs clean && tsc",
|
|
57
|
+
"test": "vitest run",
|
|
58
|
+
"test:watch": "vitest"
|
|
59
|
+
}
|
|
6
60
|
}
|