@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/react.cjs
CHANGED
|
@@ -2751,13 +2751,28 @@ var MediaPlugin = class {
|
|
|
2751
2751
|
video.src = url;
|
|
2752
2752
|
video.controls = true;
|
|
2753
2753
|
video.playsInline = true;
|
|
2754
|
-
video.style.maxWidth = "90%";
|
|
2755
|
-
video.style.maxHeight = "90%";
|
|
2756
2754
|
video.style.borderRadius = "8px";
|
|
2757
2755
|
video.style.boxShadow = "0 8px 30px rgba(0,0,0,0.3)";
|
|
2758
2756
|
video.style.backgroundColor = "#000000";
|
|
2757
|
+
video.style.objectFit = "contain";
|
|
2758
|
+
video.style.transition = "transform 0.2s ease";
|
|
2759
2759
|
element = video;
|
|
2760
2760
|
mediaElement = video;
|
|
2761
|
+
const onMeta = () => {
|
|
2762
|
+
if (video.videoWidth > 0 && video.videoHeight > 0) {
|
|
2763
|
+
naturalW = video.videoWidth;
|
|
2764
|
+
naturalH = video.videoHeight;
|
|
2765
|
+
}
|
|
2766
|
+
updateBaseDimensions();
|
|
2767
|
+
applyTransform();
|
|
2768
|
+
};
|
|
2769
|
+
if (video.readyState >= 1 && video.videoWidth > 0) {
|
|
2770
|
+
naturalW = video.videoWidth;
|
|
2771
|
+
naturalH = video.videoHeight;
|
|
2772
|
+
} else {
|
|
2773
|
+
video.addEventListener("loadedmetadata", onMeta, { once: true });
|
|
2774
|
+
video.addEventListener("canplay", onMeta, { once: true });
|
|
2775
|
+
}
|
|
2761
2776
|
} else if (isAudio) {
|
|
2762
2777
|
const audio = document.createElement("audio");
|
|
2763
2778
|
audio.src = url;
|
|
@@ -2798,11 +2813,19 @@ var MediaPlugin = class {
|
|
|
2798
2813
|
let fitMode = ctx?.options?.fitMode || "width";
|
|
2799
2814
|
let isUserZoomed = false;
|
|
2800
2815
|
const updateBaseDimensions = () => {
|
|
2801
|
-
if (!isImage) return;
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2816
|
+
if (!isImage && !isVideo) return;
|
|
2817
|
+
if (isImage) {
|
|
2818
|
+
const img = element;
|
|
2819
|
+
if (img.naturalWidth > 0 && img.naturalHeight > 0) {
|
|
2820
|
+
naturalW = img.naturalWidth;
|
|
2821
|
+
naturalH = img.naturalHeight;
|
|
2822
|
+
}
|
|
2823
|
+
} else if (isVideo) {
|
|
2824
|
+
const vid = element;
|
|
2825
|
+
if (vid.videoWidth > 0 && vid.videoHeight > 0) {
|
|
2826
|
+
naturalW = vid.videoWidth;
|
|
2827
|
+
naturalH = vid.videoHeight;
|
|
2828
|
+
}
|
|
2806
2829
|
}
|
|
2807
2830
|
const availW = Math.max(100, ctx.container.clientWidth - 32);
|
|
2808
2831
|
const availH = Math.max(100, ctx.container.clientHeight - 32);
|
|
@@ -2816,7 +2839,7 @@ var MediaPlugin = class {
|
|
|
2816
2839
|
baseH = Math.max(1, Math.round(naturalH * fitRatio));
|
|
2817
2840
|
};
|
|
2818
2841
|
const applyTransform = () => {
|
|
2819
|
-
if (isImage) {
|
|
2842
|
+
if (isImage || isVideo) {
|
|
2820
2843
|
if (!isUserZoomed) {
|
|
2821
2844
|
updateBaseDimensions();
|
|
2822
2845
|
}
|
|
@@ -2827,10 +2850,10 @@ var MediaPlugin = class {
|
|
|
2827
2850
|
sizer.style.width = `${boxW}px`;
|
|
2828
2851
|
sizer.style.height = `${boxH}px`;
|
|
2829
2852
|
sizer.style.margin = boxH < availH ? "auto 0" : "0";
|
|
2830
|
-
const
|
|
2831
|
-
const
|
|
2832
|
-
element.style.width = `${
|
|
2833
|
-
element.style.height = `${
|
|
2853
|
+
const elW = isRotated90 ? boxH : boxW;
|
|
2854
|
+
const elH = isRotated90 ? boxW : boxH;
|
|
2855
|
+
element.style.width = `${elW}px`;
|
|
2856
|
+
element.style.height = `${elH}px`;
|
|
2834
2857
|
element.style.maxWidth = "none";
|
|
2835
2858
|
element.style.maxHeight = "none";
|
|
2836
2859
|
element.style.transform = rotation ? `rotate(${rotation}deg)` : "none";
|
|
@@ -2840,6 +2863,8 @@ var MediaPlugin = class {
|
|
|
2840
2863
|
element.style.transform = `scale(${currentZoom}) rotate(${rotation}deg)`;
|
|
2841
2864
|
}
|
|
2842
2865
|
};
|
|
2866
|
+
updateBaseDimensions();
|
|
2867
|
+
applyTransform();
|
|
2843
2868
|
if (isImage) {
|
|
2844
2869
|
const img = element;
|
|
2845
2870
|
if (img.complete && img.naturalWidth > 0) {
|
|
@@ -2884,7 +2909,7 @@ var MediaPlugin = class {
|
|
|
2884
2909
|
currentZoom = level;
|
|
2885
2910
|
applyTransform();
|
|
2886
2911
|
} : void 0,
|
|
2887
|
-
fitToPage: isImage ? () => {
|
|
2912
|
+
fitToPage: isImage || isVideo ? () => {
|
|
2888
2913
|
isUserZoomed = false;
|
|
2889
2914
|
fitMode = "page";
|
|
2890
2915
|
currentZoom = 1;
|
|
@@ -2894,7 +2919,7 @@ var MediaPlugin = class {
|
|
|
2894
2919
|
updateBaseDimensions();
|
|
2895
2920
|
applyTransform();
|
|
2896
2921
|
} : void 0,
|
|
2897
|
-
fitToWidth: isImage ? () => {
|
|
2922
|
+
fitToWidth: isImage || isVideo ? () => {
|
|
2898
2923
|
isUserZoomed = false;
|
|
2899
2924
|
fitMode = "width";
|
|
2900
2925
|
currentZoom = 1;
|
|
@@ -2904,7 +2929,7 @@ var MediaPlugin = class {
|
|
|
2904
2929
|
updateBaseDimensions();
|
|
2905
2930
|
applyTransform();
|
|
2906
2931
|
} : void 0,
|
|
2907
|
-
resetZoom: isImage ? () => {
|
|
2932
|
+
resetZoom: isImage || isVideo ? () => {
|
|
2908
2933
|
isUserZoomed = false;
|
|
2909
2934
|
fitMode = ctx?.options?.fitMode || "width";
|
|
2910
2935
|
currentZoom = 1;
|
|
@@ -6043,6 +6068,16 @@ var ThreeDPlugin = class {
|
|
|
6043
6068
|
type: "button",
|
|
6044
6069
|
group: "actions",
|
|
6045
6070
|
execute: () => instance.download?.()
|
|
6071
|
+
},
|
|
6072
|
+
{
|
|
6073
|
+
id: "open-window",
|
|
6074
|
+
icon: "open-window",
|
|
6075
|
+
label: "Open in Separate Full Window",
|
|
6076
|
+
type: "button",
|
|
6077
|
+
group: "actions",
|
|
6078
|
+
execute: () => {
|
|
6079
|
+
instance.openInSeparateWindow?.();
|
|
6080
|
+
}
|
|
6046
6081
|
}
|
|
6047
6082
|
];
|
|
6048
6083
|
}
|
|
@@ -6113,12 +6148,21 @@ var ThreeDPlugin = class {
|
|
|
6113
6148
|
});
|
|
6114
6149
|
meshGroup.add(obj);
|
|
6115
6150
|
}
|
|
6151
|
+
const initialBox = new THREE__namespace.Box3().setFromObject(meshGroup);
|
|
6152
|
+
const center = initialBox.getCenter(new THREE__namespace.Vector3());
|
|
6153
|
+
meshGroup.position.sub(center);
|
|
6116
6154
|
scene.add(meshGroup);
|
|
6117
6155
|
const box = new THREE__namespace.Box3().setFromObject(meshGroup);
|
|
6118
|
-
const
|
|
6119
|
-
const
|
|
6156
|
+
const size = box.getSize(new THREE__namespace.Vector3());
|
|
6157
|
+
const maxDim = Math.max(size.x, size.y, size.z) || 10;
|
|
6158
|
+
grid.position.y = -size.y / 2;
|
|
6159
|
+
const gridScale = Math.max(0.1, maxDim / 50);
|
|
6160
|
+
grid.scale.set(gridScale, 1, gridScale);
|
|
6161
|
+
const fovRad = camera.fov * (Math.PI / 180);
|
|
6162
|
+
let cameraDistance = maxDim / 2 / Math.tan(fovRad / 2);
|
|
6163
|
+
cameraDistance = Math.max(cameraDistance * 1.5, 2);
|
|
6120
6164
|
const fitCamera = () => {
|
|
6121
|
-
camera.position.set(
|
|
6165
|
+
camera.position.set(cameraDistance * 0.8, cameraDistance * 0.6, cameraDistance);
|
|
6122
6166
|
camera.lookAt(0, 0, 0);
|
|
6123
6167
|
controls.target.set(0, 0, 0);
|
|
6124
6168
|
controls.update();
|
|
@@ -6164,6 +6208,7 @@ var ThreeDPlugin = class {
|
|
|
6164
6208
|
controls.update();
|
|
6165
6209
|
},
|
|
6166
6210
|
fitToPage: fitCamera,
|
|
6211
|
+
fitToWidth: fitCamera,
|
|
6167
6212
|
resetZoom: fitCamera,
|
|
6168
6213
|
rotateCW: () => {
|
|
6169
6214
|
isWireframe = !isWireframe;
|