@autorender/sdk-core 0.1.23 → 0.1.25
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/README.md +14 -6
- package/dist/index.cjs +62 -165
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +0 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +62 -165
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -51,7 +51,7 @@ import { createAR } from '@autorender/sdk-core';
|
|
|
51
51
|
const AR = createAR({
|
|
52
52
|
baseUrl: 'https://assets.autorender.io',
|
|
53
53
|
workspace: 'ws_123',
|
|
54
|
-
defaults: {
|
|
54
|
+
defaults: {}
|
|
55
55
|
});
|
|
56
56
|
```
|
|
57
57
|
|
|
@@ -72,6 +72,19 @@ const transformString = AR.transformString({ w: 300, h: 300, fit: 'cover', q: 70
|
|
|
72
72
|
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
+
### Generate Video URLs
|
|
76
|
+
|
|
77
|
+
```javascript
|
|
78
|
+
// MP4
|
|
79
|
+
const mp4Url = AR.url('docs/skateboarding.mp4', { w: 960, h: 540 });
|
|
80
|
+
|
|
81
|
+
// HLS master playlist
|
|
82
|
+
const hlsUrl = AR.url('st_240_360_480_720/docs/skateboarding.mp4/ar-master.m3u8');
|
|
83
|
+
|
|
84
|
+
// DASH manifest
|
|
85
|
+
const dashUrl = AR.url('processing/docs/skateboarding.mp4/dash/manifest.mpd');
|
|
86
|
+
```
|
|
87
|
+
|
|
75
88
|
### Responsive Images
|
|
76
89
|
|
|
77
90
|
```javascript
|
|
@@ -90,9 +103,6 @@ const attrs = AR.responsiveImageAttributes({
|
|
|
90
103
|
```javascript
|
|
91
104
|
// Get device pixel ratio
|
|
92
105
|
const dpr = AR.getDPR(); // 1 or 2
|
|
93
|
-
|
|
94
|
-
// Get connection quality
|
|
95
|
-
const connection = AR.getConnectionQuality(); // '2g' | '3g' | '4g' | 'wifi' | 'unknown'
|
|
96
106
|
```
|
|
97
107
|
|
|
98
108
|
## API Reference
|
|
@@ -116,8 +126,6 @@ Creates a new AutoRender client instance for image transformations.
|
|
|
116
126
|
- `transformString(transform: TransformOptions): string` - Get transformation string only
|
|
117
127
|
- `responsiveImageAttributes(options: ResponsiveOptions): ResponsiveAttributes` - Generate responsive image attributes
|
|
118
128
|
- `getDPR(): number` - Get device pixel ratio (1 or 2)
|
|
119
|
-
- `getConnectionQuality(): string` - Get detected connection quality
|
|
120
|
-
|
|
121
129
|
See the main [@autorender/sdk](../README.md) documentation for full API reference.
|
|
122
130
|
|
|
123
131
|
|
package/dist/index.cjs
CHANGED
|
@@ -2980,124 +2980,6 @@ function getDPR() {
|
|
|
2980
2980
|
const dpr = window.devicePixelRatio || 1;
|
|
2981
2981
|
return dpr >= 2 ? 2 : 1;
|
|
2982
2982
|
}
|
|
2983
|
-
function getNavigatorConnection() {
|
|
2984
|
-
if (typeof navigator === "undefined") return null;
|
|
2985
|
-
const nav = navigator;
|
|
2986
|
-
return nav.connection || nav.mozConnection || nav.webkitConnection || null;
|
|
2987
|
-
}
|
|
2988
|
-
function getConnectionQualityDetailed() {
|
|
2989
|
-
if (typeof navigator === "undefined") {
|
|
2990
|
-
return { quality: "unknown", reason: "ssr:no-navigator", saveData: false };
|
|
2991
|
-
}
|
|
2992
|
-
const connection = getNavigatorConnection();
|
|
2993
|
-
if (!connection) {
|
|
2994
|
-
return { quality: "unknown", reason: "no-network-info-api", saveData: false };
|
|
2995
|
-
}
|
|
2996
|
-
const saveData = connection.saveData === true;
|
|
2997
|
-
const effectiveType = connection.effectiveType || connection.effectiveConnectionType;
|
|
2998
|
-
const downlinkMbps = typeof connection.downlink === "number" ? connection.downlink : void 0;
|
|
2999
|
-
const rttMs = typeof connection.rtt === "number" ? connection.rtt : void 0;
|
|
3000
|
-
if (effectiveType) {
|
|
3001
|
-
if (effectiveType === "slow-2g" || effectiveType === "2g") {
|
|
3002
|
-
return { quality: "2g", reason: `effectiveType:${effectiveType}`, saveData, effectiveType, downlinkMbps, rttMs };
|
|
3003
|
-
}
|
|
3004
|
-
if (effectiveType === "3g") {
|
|
3005
|
-
return { quality: "3g", reason: "effectiveType:3g", saveData, effectiveType, downlinkMbps, rttMs };
|
|
3006
|
-
}
|
|
3007
|
-
if (effectiveType === "4g") {
|
|
3008
|
-
return { quality: "4g", reason: "effectiveType:4g", saveData, effectiveType, downlinkMbps, rttMs };
|
|
3009
|
-
}
|
|
3010
|
-
}
|
|
3011
|
-
const type = connection.type;
|
|
3012
|
-
if (type === "wifi" || type === "ethernet") {
|
|
3013
|
-
return { quality: "wifi", reason: `type:${type}`, saveData, effectiveType, downlinkMbps, rttMs };
|
|
3014
|
-
}
|
|
3015
|
-
if (typeof downlinkMbps === "number") {
|
|
3016
|
-
if (downlinkMbps < 0.7) {
|
|
3017
|
-
return { quality: "2g", reason: `downlink<0.7Mbps:${downlinkMbps}`, saveData, effectiveType, downlinkMbps, rttMs };
|
|
3018
|
-
}
|
|
3019
|
-
if (downlinkMbps < 1.8) {
|
|
3020
|
-
return { quality: "3g", reason: `downlink<1.8Mbps:${downlinkMbps}`, saveData, effectiveType, downlinkMbps, rttMs };
|
|
3021
|
-
}
|
|
3022
|
-
return { quality: "4g", reason: `downlink>=1.8Mbps:${downlinkMbps}`, saveData, effectiveType, downlinkMbps, rttMs };
|
|
3023
|
-
}
|
|
3024
|
-
return { quality: "unknown", reason: "insufficient-signals", saveData, effectiveType, downlinkMbps, rttMs };
|
|
3025
|
-
}
|
|
3026
|
-
function getConnectionQuality() {
|
|
3027
|
-
return getConnectionQualityDetailed().quality;
|
|
3028
|
-
}
|
|
3029
|
-
function getQualityForConnection(input, opts) {
|
|
3030
|
-
const highQuality = opts?.highQuality ?? "auto";
|
|
3031
|
-
const saveDataQuality = opts?.saveDataQuality ?? 50;
|
|
3032
|
-
if (input === "auto") {
|
|
3033
|
-
const detected = getConnectionQualityDetailed();
|
|
3034
|
-
if (detected.saveData) return saveDataQuality;
|
|
3035
|
-
return getQualityForConnection(detected.quality, opts);
|
|
3036
|
-
}
|
|
3037
|
-
switch (input) {
|
|
3038
|
-
case "2g":
|
|
3039
|
-
return 50;
|
|
3040
|
-
case "3g":
|
|
3041
|
-
return 70;
|
|
3042
|
-
case "4g":
|
|
3043
|
-
case "wifi":
|
|
3044
|
-
return highQuality;
|
|
3045
|
-
default:
|
|
3046
|
-
return highQuality;
|
|
3047
|
-
}
|
|
3048
|
-
}
|
|
3049
|
-
|
|
3050
|
-
// src/viewtag/format-detection.ts
|
|
3051
|
-
var cachedFormat = null;
|
|
3052
|
-
function detectBestFormat() {
|
|
3053
|
-
if (cachedFormat !== null) {
|
|
3054
|
-
return cachedFormat;
|
|
3055
|
-
}
|
|
3056
|
-
if (typeof document === "undefined" || typeof Image === "undefined") {
|
|
3057
|
-
cachedFormat = "webp";
|
|
3058
|
-
return cachedFormat;
|
|
3059
|
-
}
|
|
3060
|
-
try {
|
|
3061
|
-
const canvas = document.createElement("canvas");
|
|
3062
|
-
canvas.width = 1;
|
|
3063
|
-
canvas.height = 1;
|
|
3064
|
-
const ctx = canvas.getContext("2d");
|
|
3065
|
-
if (!ctx) {
|
|
3066
|
-
cachedFormat = "webp";
|
|
3067
|
-
return cachedFormat;
|
|
3068
|
-
}
|
|
3069
|
-
try {
|
|
3070
|
-
const avifDataURL = canvas.toDataURL("image/avif");
|
|
3071
|
-
if (avifDataURL && avifDataURL.indexOf("data:image/avif") === 0) {
|
|
3072
|
-
cachedFormat = "avif";
|
|
3073
|
-
return cachedFormat;
|
|
3074
|
-
}
|
|
3075
|
-
} catch (e) {
|
|
3076
|
-
}
|
|
3077
|
-
try {
|
|
3078
|
-
const webpDataURL = canvas.toDataURL("image/webp");
|
|
3079
|
-
if (webpDataURL && webpDataURL.indexOf("data:image/webp") === 0) {
|
|
3080
|
-
cachedFormat = "webp";
|
|
3081
|
-
return cachedFormat;
|
|
3082
|
-
}
|
|
3083
|
-
} catch (e) {
|
|
3084
|
-
}
|
|
3085
|
-
cachedFormat = "jpg";
|
|
3086
|
-
return cachedFormat;
|
|
3087
|
-
} catch (e) {
|
|
3088
|
-
cachedFormat = "webp";
|
|
3089
|
-
return cachedFormat;
|
|
3090
|
-
}
|
|
3091
|
-
}
|
|
3092
|
-
function getBestFormatSync() {
|
|
3093
|
-
if (cachedFormat !== null) {
|
|
3094
|
-
return cachedFormat;
|
|
3095
|
-
}
|
|
3096
|
-
return detectBestFormat();
|
|
3097
|
-
}
|
|
3098
|
-
function resetFormatCache() {
|
|
3099
|
-
cachedFormat = null;
|
|
3100
|
-
}
|
|
3101
2983
|
|
|
3102
2984
|
// src/viewtag/transform.ts
|
|
3103
2985
|
function buildTransformString(transform, defaults, enableDPR = true, connectionQuality) {
|
|
@@ -3217,26 +3099,9 @@ function buildTransformString(transform, defaults, enableDPR = true, connectionQ
|
|
|
3217
3099
|
if (transform.flip) addPart("flip_", transform.flip);
|
|
3218
3100
|
if (transform.br !== void 0) addPart("br_", transform.br);
|
|
3219
3101
|
let format = transform.f ?? defaults?.f;
|
|
3220
|
-
if (format
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
if (format) addPart("f_", format);
|
|
3224
|
-
let quality = transform.q;
|
|
3225
|
-
if (quality === "auto" || quality === void 0) {
|
|
3226
|
-
const defaultQuality = defaults?.q;
|
|
3227
|
-
if (quality === void 0) {
|
|
3228
|
-
quality = defaultQuality;
|
|
3229
|
-
}
|
|
3230
|
-
if (quality === "auto" || quality === void 0) {
|
|
3231
|
-
if (connectionQuality) {
|
|
3232
|
-
const resolvedQuality = getQualityForConnection(connectionQuality);
|
|
3233
|
-
quality = resolvedQuality;
|
|
3234
|
-
} else {
|
|
3235
|
-
quality = "auto";
|
|
3236
|
-
}
|
|
3237
|
-
}
|
|
3238
|
-
}
|
|
3239
|
-
if (quality !== void 0) addPart("q_", quality);
|
|
3102
|
+
if (format && format !== "auto") addPart("f_", format);
|
|
3103
|
+
const quality = transform.q ?? defaults?.q;
|
|
3104
|
+
if (quality !== void 0 && quality !== "auto") addPart("q_", quality);
|
|
3240
3105
|
if (transform.bg) {
|
|
3241
3106
|
if (transform.bg.startsWith("rgb:")) {
|
|
3242
3107
|
addPart("bg_rgb:", transform.bg.replace("rgb:", ""));
|
|
@@ -3673,22 +3538,11 @@ function createAR(config) {
|
|
|
3673
3538
|
defaults = {},
|
|
3674
3539
|
deviceBreakpoints = DEFAULT_DEVICE_BREAKPOINTS2,
|
|
3675
3540
|
imageBreakpoints = DEFAULT_IMAGE_BREAKPOINTS2,
|
|
3676
|
-
enableDPR = true
|
|
3677
|
-
connectionQuality: configConnectionQuality = "auto"
|
|
3541
|
+
enableDPR = true
|
|
3678
3542
|
} = config;
|
|
3679
3543
|
if (!workspace) {
|
|
3680
3544
|
throw new Error("workspace is required");
|
|
3681
3545
|
}
|
|
3682
|
-
const normalizedDefaults = {
|
|
3683
|
-
f: defaults.f || "auto",
|
|
3684
|
-
q: defaults.q !== void 0 ? defaults.q : "auto",
|
|
3685
|
-
...defaults
|
|
3686
|
-
};
|
|
3687
|
-
const effectiveConnectionQuality = configConnectionQuality === "auto" ? (() => {
|
|
3688
|
-
const detected = getConnectionQuality();
|
|
3689
|
-
console.log("detected", detected);
|
|
3690
|
-
return detected === "unknown" ? "wifi" : detected;
|
|
3691
|
-
})() : configConnectionQuality;
|
|
3692
3546
|
const instance = {
|
|
3693
3547
|
/**
|
|
3694
3548
|
* Generate image URL with transformations
|
|
@@ -3699,9 +3553,8 @@ function createAR(config) {
|
|
|
3699
3553
|
workspace,
|
|
3700
3554
|
src,
|
|
3701
3555
|
transform,
|
|
3702
|
-
|
|
3703
|
-
enableDPR
|
|
3704
|
-
effectiveConnectionQuality
|
|
3556
|
+
defaults,
|
|
3557
|
+
enableDPR
|
|
3705
3558
|
);
|
|
3706
3559
|
},
|
|
3707
3560
|
/**
|
|
@@ -3710,9 +3563,8 @@ function createAR(config) {
|
|
|
3710
3563
|
transformString(transform) {
|
|
3711
3564
|
return buildTransformString(
|
|
3712
3565
|
transform,
|
|
3713
|
-
|
|
3714
|
-
enableDPR
|
|
3715
|
-
effectiveConnectionQuality
|
|
3566
|
+
defaults,
|
|
3567
|
+
enableDPR
|
|
3716
3568
|
);
|
|
3717
3569
|
},
|
|
3718
3570
|
/**
|
|
@@ -3724,11 +3576,10 @@ function createAR(config) {
|
|
|
3724
3576
|
baseUrl,
|
|
3725
3577
|
workspace,
|
|
3726
3578
|
options,
|
|
3727
|
-
|
|
3579
|
+
defaults,
|
|
3728
3580
|
effectiveDeviceBreakpoints,
|
|
3729
3581
|
imageBreakpoints,
|
|
3730
|
-
enableDPR
|
|
3731
|
-
effectiveConnectionQuality
|
|
3582
|
+
enableDPR
|
|
3732
3583
|
);
|
|
3733
3584
|
},
|
|
3734
3585
|
/**
|
|
@@ -3736,17 +3587,63 @@ function createAR(config) {
|
|
|
3736
3587
|
*/
|
|
3737
3588
|
getDPR() {
|
|
3738
3589
|
return getDPR();
|
|
3739
|
-
},
|
|
3740
|
-
/**
|
|
3741
|
-
* Get current connection quality
|
|
3742
|
-
*/
|
|
3743
|
-
getConnectionQuality() {
|
|
3744
|
-
return getConnectionQuality();
|
|
3745
3590
|
}
|
|
3746
3591
|
};
|
|
3747
3592
|
return instance;
|
|
3748
3593
|
}
|
|
3749
3594
|
|
|
3595
|
+
// src/viewtag/format-detection.ts
|
|
3596
|
+
var cachedFormat = null;
|
|
3597
|
+
function detectBestFormat() {
|
|
3598
|
+
if (cachedFormat !== null) {
|
|
3599
|
+
return cachedFormat;
|
|
3600
|
+
}
|
|
3601
|
+
if (typeof document === "undefined" || typeof Image === "undefined") {
|
|
3602
|
+
cachedFormat = "webp";
|
|
3603
|
+
return cachedFormat;
|
|
3604
|
+
}
|
|
3605
|
+
try {
|
|
3606
|
+
const canvas = document.createElement("canvas");
|
|
3607
|
+
canvas.width = 1;
|
|
3608
|
+
canvas.height = 1;
|
|
3609
|
+
const ctx = canvas.getContext("2d");
|
|
3610
|
+
if (!ctx) {
|
|
3611
|
+
cachedFormat = "webp";
|
|
3612
|
+
return cachedFormat;
|
|
3613
|
+
}
|
|
3614
|
+
try {
|
|
3615
|
+
const avifDataURL = canvas.toDataURL("image/avif");
|
|
3616
|
+
if (avifDataURL && avifDataURL.indexOf("data:image/avif") === 0) {
|
|
3617
|
+
cachedFormat = "avif";
|
|
3618
|
+
return cachedFormat;
|
|
3619
|
+
}
|
|
3620
|
+
} catch (e) {
|
|
3621
|
+
}
|
|
3622
|
+
try {
|
|
3623
|
+
const webpDataURL = canvas.toDataURL("image/webp");
|
|
3624
|
+
if (webpDataURL && webpDataURL.indexOf("data:image/webp") === 0) {
|
|
3625
|
+
cachedFormat = "webp";
|
|
3626
|
+
return cachedFormat;
|
|
3627
|
+
}
|
|
3628
|
+
} catch (e) {
|
|
3629
|
+
}
|
|
3630
|
+
cachedFormat = "jpg";
|
|
3631
|
+
return cachedFormat;
|
|
3632
|
+
} catch (e) {
|
|
3633
|
+
cachedFormat = "webp";
|
|
3634
|
+
return cachedFormat;
|
|
3635
|
+
}
|
|
3636
|
+
}
|
|
3637
|
+
function getBestFormatSync() {
|
|
3638
|
+
if (cachedFormat !== null) {
|
|
3639
|
+
return cachedFormat;
|
|
3640
|
+
}
|
|
3641
|
+
return detectBestFormat();
|
|
3642
|
+
}
|
|
3643
|
+
function resetFormatCache() {
|
|
3644
|
+
cachedFormat = null;
|
|
3645
|
+
}
|
|
3646
|
+
|
|
3750
3647
|
// src/index.ts
|
|
3751
3648
|
var SOURCE_ALIAS_MAP = {
|
|
3752
3649
|
local: "device",
|