@files-preview-app/preview-file 1.3.10 → 1.3.12
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/dist/angular.cjs +63 -18
- package/dist/angular.cjs.map +1 -1
- package/dist/angular.js +63 -18
- package/dist/angular.js.map +1 -1
- package/dist/index.cjs +63 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +63 -18
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +63 -18
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +63 -18
- package/dist/react.js.map +1 -1
- package/dist/vue.cjs +63 -18
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.d.cts +2 -2
- package/dist/vue.d.ts +2 -2
- package/dist/vue.js +63 -18
- package/dist/vue.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2832,13 +2832,28 @@ var MediaPlugin = class {
|
|
|
2832
2832
|
video.src = url;
|
|
2833
2833
|
video.controls = true;
|
|
2834
2834
|
video.playsInline = true;
|
|
2835
|
-
video.style.maxWidth = "90%";
|
|
2836
|
-
video.style.maxHeight = "90%";
|
|
2837
2835
|
video.style.borderRadius = "8px";
|
|
2838
2836
|
video.style.boxShadow = "0 8px 30px rgba(0,0,0,0.3)";
|
|
2839
2837
|
video.style.backgroundColor = "#000000";
|
|
2838
|
+
video.style.objectFit = "contain";
|
|
2839
|
+
video.style.transition = "transform 0.2s ease";
|
|
2840
2840
|
element = video;
|
|
2841
2841
|
mediaElement = video;
|
|
2842
|
+
const onMeta = () => {
|
|
2843
|
+
if (video.videoWidth > 0 && video.videoHeight > 0) {
|
|
2844
|
+
naturalW = video.videoWidth;
|
|
2845
|
+
naturalH = video.videoHeight;
|
|
2846
|
+
}
|
|
2847
|
+
updateBaseDimensions();
|
|
2848
|
+
applyTransform();
|
|
2849
|
+
};
|
|
2850
|
+
if (video.readyState >= 1 && video.videoWidth > 0) {
|
|
2851
|
+
naturalW = video.videoWidth;
|
|
2852
|
+
naturalH = video.videoHeight;
|
|
2853
|
+
} else {
|
|
2854
|
+
video.addEventListener("loadedmetadata", onMeta, { once: true });
|
|
2855
|
+
video.addEventListener("canplay", onMeta, { once: true });
|
|
2856
|
+
}
|
|
2842
2857
|
} else if (isAudio) {
|
|
2843
2858
|
const audio = document.createElement("audio");
|
|
2844
2859
|
audio.src = url;
|
|
@@ -2879,11 +2894,19 @@ var MediaPlugin = class {
|
|
|
2879
2894
|
let fitMode = ctx?.options?.fitMode || "width";
|
|
2880
2895
|
let isUserZoomed = false;
|
|
2881
2896
|
const updateBaseDimensions = () => {
|
|
2882
|
-
if (!isImage) return;
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2897
|
+
if (!isImage && !isVideo) return;
|
|
2898
|
+
if (isImage) {
|
|
2899
|
+
const img = element;
|
|
2900
|
+
if (img.naturalWidth > 0 && img.naturalHeight > 0) {
|
|
2901
|
+
naturalW = img.naturalWidth;
|
|
2902
|
+
naturalH = img.naturalHeight;
|
|
2903
|
+
}
|
|
2904
|
+
} else if (isVideo) {
|
|
2905
|
+
const vid = element;
|
|
2906
|
+
if (vid.videoWidth > 0 && vid.videoHeight > 0) {
|
|
2907
|
+
naturalW = vid.videoWidth;
|
|
2908
|
+
naturalH = vid.videoHeight;
|
|
2909
|
+
}
|
|
2887
2910
|
}
|
|
2888
2911
|
const availW = Math.max(100, ctx.container.clientWidth - 32);
|
|
2889
2912
|
const availH = Math.max(100, ctx.container.clientHeight - 32);
|
|
@@ -2897,7 +2920,7 @@ var MediaPlugin = class {
|
|
|
2897
2920
|
baseH = Math.max(1, Math.round(naturalH * fitRatio));
|
|
2898
2921
|
};
|
|
2899
2922
|
const applyTransform = () => {
|
|
2900
|
-
if (isImage) {
|
|
2923
|
+
if (isImage || isVideo) {
|
|
2901
2924
|
if (!isUserZoomed) {
|
|
2902
2925
|
updateBaseDimensions();
|
|
2903
2926
|
}
|
|
@@ -2908,10 +2931,10 @@ var MediaPlugin = class {
|
|
|
2908
2931
|
sizer.style.width = `${boxW}px`;
|
|
2909
2932
|
sizer.style.height = `${boxH}px`;
|
|
2910
2933
|
sizer.style.margin = boxH < availH ? "auto 0" : "0";
|
|
2911
|
-
const
|
|
2912
|
-
const
|
|
2913
|
-
element.style.width = `${
|
|
2914
|
-
element.style.height = `${
|
|
2934
|
+
const elW = isRotated90 ? boxH : boxW;
|
|
2935
|
+
const elH = isRotated90 ? boxW : boxH;
|
|
2936
|
+
element.style.width = `${elW}px`;
|
|
2937
|
+
element.style.height = `${elH}px`;
|
|
2915
2938
|
element.style.maxWidth = "none";
|
|
2916
2939
|
element.style.maxHeight = "none";
|
|
2917
2940
|
element.style.transform = rotation ? `rotate(${rotation}deg)` : "none";
|
|
@@ -2921,6 +2944,8 @@ var MediaPlugin = class {
|
|
|
2921
2944
|
element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
|
|
2922
2945
|
}
|
|
2923
2946
|
};
|
|
2947
|
+
updateBaseDimensions();
|
|
2948
|
+
applyTransform();
|
|
2924
2949
|
if (isImage) {
|
|
2925
2950
|
const img = element;
|
|
2926
2951
|
if (img.complete && img.naturalWidth > 0) {
|
|
@@ -2965,7 +2990,7 @@ var MediaPlugin = class {
|
|
|
2965
2990
|
currentZoom = level;
|
|
2966
2991
|
applyTransform();
|
|
2967
2992
|
} : void 0,
|
|
2968
|
-
fitToPage: isImage ? () => {
|
|
2993
|
+
fitToPage: isImage || isVideo ? () => {
|
|
2969
2994
|
isUserZoomed = false;
|
|
2970
2995
|
fitMode = "page";
|
|
2971
2996
|
currentZoom = 1;
|
|
@@ -2975,7 +3000,7 @@ var MediaPlugin = class {
|
|
|
2975
3000
|
updateBaseDimensions();
|
|
2976
3001
|
applyTransform();
|
|
2977
3002
|
} : void 0,
|
|
2978
|
-
fitToWidth: isImage ? () => {
|
|
3003
|
+
fitToWidth: isImage || isVideo ? () => {
|
|
2979
3004
|
isUserZoomed = false;
|
|
2980
3005
|
fitMode = "width";
|
|
2981
3006
|
currentZoom = 1;
|
|
@@ -2985,7 +3010,7 @@ var MediaPlugin = class {
|
|
|
2985
3010
|
updateBaseDimensions();
|
|
2986
3011
|
applyTransform();
|
|
2987
3012
|
} : void 0,
|
|
2988
|
-
resetZoom: isImage ? () => {
|
|
3013
|
+
resetZoom: isImage || isVideo ? () => {
|
|
2989
3014
|
isUserZoomed = false;
|
|
2990
3015
|
fitMode = ctx?.options?.fitMode || "width";
|
|
2991
3016
|
currentZoom = 1;
|
|
@@ -6124,6 +6149,16 @@ var ThreeDPlugin = class {
|
|
|
6124
6149
|
type: "button",
|
|
6125
6150
|
group: "actions",
|
|
6126
6151
|
execute: () => instance.download?.()
|
|
6152
|
+
},
|
|
6153
|
+
{
|
|
6154
|
+
id: "open-window",
|
|
6155
|
+
icon: "open-window",
|
|
6156
|
+
label: "Open in Separate Full Window",
|
|
6157
|
+
type: "button",
|
|
6158
|
+
group: "actions",
|
|
6159
|
+
execute: () => {
|
|
6160
|
+
instance.openInSeparateWindow?.();
|
|
6161
|
+
}
|
|
6127
6162
|
}
|
|
6128
6163
|
];
|
|
6129
6164
|
}
|
|
@@ -6194,12 +6229,21 @@ var ThreeDPlugin = class {
|
|
|
6194
6229
|
});
|
|
6195
6230
|
meshGroup.add(obj);
|
|
6196
6231
|
}
|
|
6232
|
+
const initialBox = new THREE__namespace.Box3().setFromObject(meshGroup);
|
|
6233
|
+
const center = initialBox.getCenter(new THREE__namespace.Vector3());
|
|
6234
|
+
meshGroup.position.sub(center);
|
|
6197
6235
|
scene.add(meshGroup);
|
|
6198
6236
|
const box = new THREE__namespace.Box3().setFromObject(meshGroup);
|
|
6199
|
-
const
|
|
6200
|
-
const
|
|
6237
|
+
const size = box.getSize(new THREE__namespace.Vector3());
|
|
6238
|
+
const maxDim = Math.max(size.x, size.y, size.z) || 10;
|
|
6239
|
+
grid.position.y = -size.y / 2;
|
|
6240
|
+
const gridScale = Math.max(0.1, maxDim / 50);
|
|
6241
|
+
grid.scale.set(gridScale, 1, gridScale);
|
|
6242
|
+
const fovRad = camera.fov * (Math.PI / 180);
|
|
6243
|
+
let cameraDistance = maxDim / 2 / Math.tan(fovRad / 2);
|
|
6244
|
+
cameraDistance = Math.max(cameraDistance * 1.5, 2);
|
|
6201
6245
|
const fitCamera = () => {
|
|
6202
|
-
camera.position.set(
|
|
6246
|
+
camera.position.set(cameraDistance * 0.8, cameraDistance * 0.6, cameraDistance);
|
|
6203
6247
|
camera.lookAt(0, 0, 0);
|
|
6204
6248
|
controls.target.set(0, 0, 0);
|
|
6205
6249
|
controls.update();
|
|
@@ -6245,6 +6289,7 @@ var ThreeDPlugin = class {
|
|
|
6245
6289
|
controls.update();
|
|
6246
6290
|
},
|
|
6247
6291
|
fitToPage: fitCamera,
|
|
6292
|
+
fitToWidth: fitCamera,
|
|
6248
6293
|
resetZoom: fitCamera,
|
|
6249
6294
|
rotateCW: () => {
|
|
6250
6295
|
isWireframe = !isWireframe;
|