@twick/video-editor 0.15.7 → 0.15.9
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/index.js +15 -40
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +15 -40
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -7118,19 +7118,21 @@ class VideoFrameExtractor {
|
|
|
7118
7118
|
/**
|
|
7119
7119
|
* Get a frame thumbnail from a video at a specific time.
|
|
7120
7120
|
* Uses caching and reuses video elements for optimal performance.
|
|
7121
|
-
*
|
|
7121
|
+
* Uses 0.1s instead of 0 when seekTime is 0, since frames at t=0 are often blank.
|
|
7122
|
+
*
|
|
7122
7123
|
* @param videoUrl - The URL of the video
|
|
7123
|
-
* @param seekTime - The time in seconds to extract the frame
|
|
7124
|
+
* @param seekTime - The time in seconds to extract the frame (0 is treated as 0.1)
|
|
7124
7125
|
* @returns Promise resolving to a thumbnail image URL (data URL or blob URL)
|
|
7125
7126
|
*/
|
|
7126
7127
|
async getFrame(videoUrl, seekTime = 0.1) {
|
|
7127
|
-
const
|
|
7128
|
+
const effectiveSeekTime = seekTime === 0 ? 0.1 : seekTime;
|
|
7129
|
+
const cacheKey = this.getCacheKey(videoUrl, effectiveSeekTime);
|
|
7128
7130
|
const cached = this.frameCache.get(cacheKey);
|
|
7129
7131
|
if (cached) {
|
|
7130
7132
|
return cached;
|
|
7131
7133
|
}
|
|
7132
7134
|
const videoState = await this.getVideoElement(videoUrl);
|
|
7133
|
-
const thumbnail = await this.extractFrame(videoState.video,
|
|
7135
|
+
const thumbnail = await this.extractFrame(videoState.video, effectiveSeekTime);
|
|
7134
7136
|
this.frameCache.set(cacheKey, thumbnail);
|
|
7135
7137
|
return thumbnail;
|
|
7136
7138
|
}
|
|
@@ -7494,7 +7496,6 @@ const setImageProps = ({
|
|
|
7494
7496
|
((_d = element.props) == null ? void 0 : _d.y) || 0,
|
|
7495
7497
|
canvasMetadata
|
|
7496
7498
|
);
|
|
7497
|
-
console.log(width, height, x2, y2);
|
|
7498
7499
|
img.set("id", element.id);
|
|
7499
7500
|
img.set("zIndex", index);
|
|
7500
7501
|
img.set("width", width);
|
|
@@ -7581,8 +7582,7 @@ const addVideoElement = async ({
|
|
|
7581
7582
|
canvasMetadata,
|
|
7582
7583
|
currentFrameEffect
|
|
7583
7584
|
});
|
|
7584
|
-
} catch
|
|
7585
|
-
console.error("Error loading image:", error);
|
|
7585
|
+
} catch {
|
|
7586
7586
|
}
|
|
7587
7587
|
};
|
|
7588
7588
|
const addImageElement = async ({
|
|
@@ -7618,8 +7618,7 @@ const addImageElement = async ({
|
|
|
7618
7618
|
canvas.add(img);
|
|
7619
7619
|
return img;
|
|
7620
7620
|
}
|
|
7621
|
-
} catch
|
|
7622
|
-
console.error("Error loading image:", error);
|
|
7621
|
+
} catch {
|
|
7623
7622
|
}
|
|
7624
7623
|
};
|
|
7625
7624
|
const addMediaGroup = ({
|
|
@@ -7873,7 +7872,6 @@ const useTwickCanvas = ({
|
|
|
7873
7872
|
return;
|
|
7874
7873
|
}
|
|
7875
7874
|
if (twickCanvasRef.current) {
|
|
7876
|
-
console.log("Destroying twickCanvas");
|
|
7877
7875
|
twickCanvasRef.current.off("mouse:up", handleMouseUp);
|
|
7878
7876
|
twickCanvasRef.current.off("text:editing:exited", onTextEdit);
|
|
7879
7877
|
twickCanvasRef.current.dispose();
|
|
@@ -7896,9 +7894,6 @@ const useTwickCanvas = ({
|
|
|
7896
7894
|
canvasResolutionRef.current = canvasSize;
|
|
7897
7895
|
setTwickCanvas(canvas);
|
|
7898
7896
|
twickCanvasRef.current = canvas;
|
|
7899
|
-
if (onCanvasReady) {
|
|
7900
|
-
onCanvasReady(canvas);
|
|
7901
|
-
}
|
|
7902
7897
|
};
|
|
7903
7898
|
const onTextEdit = (event) => {
|
|
7904
7899
|
if (event.target) {
|
|
@@ -8076,10 +8071,7 @@ const useTwickCanvas = ({
|
|
|
8076
8071
|
captionProps,
|
|
8077
8072
|
cleanAndAdd = false
|
|
8078
8073
|
}) => {
|
|
8079
|
-
if (!twickCanvas || !getCanvasContext(twickCanvas))
|
|
8080
|
-
console.warn("Canvas not properly initialized");
|
|
8081
|
-
return;
|
|
8082
|
-
}
|
|
8074
|
+
if (!twickCanvas || !getCanvasContext(twickCanvas)) return;
|
|
8083
8075
|
try {
|
|
8084
8076
|
if (cleanAndAdd && getCanvasContext(twickCanvas)) {
|
|
8085
8077
|
const backgroundColor = twickCanvas.backgroundColor;
|
|
@@ -8093,10 +8085,7 @@ const useTwickCanvas = ({
|
|
|
8093
8085
|
await Promise.all(
|
|
8094
8086
|
elements.map(async (element, index) => {
|
|
8095
8087
|
try {
|
|
8096
|
-
if (!element)
|
|
8097
|
-
console.warn("Element not found");
|
|
8098
|
-
return;
|
|
8099
|
-
}
|
|
8088
|
+
if (!element) return;
|
|
8100
8089
|
await addElementToCanvas({
|
|
8101
8090
|
element,
|
|
8102
8091
|
index,
|
|
@@ -8104,14 +8093,12 @@ const useTwickCanvas = ({
|
|
|
8104
8093
|
seekTime,
|
|
8105
8094
|
captionProps
|
|
8106
8095
|
});
|
|
8107
|
-
} catch
|
|
8108
|
-
console.error(`Error adding element ${element.id}:`, error);
|
|
8096
|
+
} catch {
|
|
8109
8097
|
}
|
|
8110
8098
|
})
|
|
8111
8099
|
);
|
|
8112
8100
|
reorderElementsByZIndex(twickCanvas);
|
|
8113
|
-
} catch
|
|
8114
|
-
console.error("Error in setCanvasElements:", error);
|
|
8101
|
+
} catch {
|
|
8115
8102
|
}
|
|
8116
8103
|
};
|
|
8117
8104
|
const addElementToCanvas = async ({
|
|
@@ -8122,10 +8109,7 @@ const useTwickCanvas = ({
|
|
|
8122
8109
|
captionProps
|
|
8123
8110
|
}) => {
|
|
8124
8111
|
var _a, _b;
|
|
8125
|
-
if (!twickCanvas)
|
|
8126
|
-
console.warn("Canvas not initialized");
|
|
8127
|
-
return;
|
|
8128
|
-
}
|
|
8112
|
+
if (!twickCanvas) return;
|
|
8129
8113
|
switch (element.type) {
|
|
8130
8114
|
case ELEMENT_TYPES.VIDEO:
|
|
8131
8115
|
const currentFrameEffect = getCurrentFrameEffect(
|
|
@@ -8228,8 +8212,7 @@ const usePlayerManager = ({
|
|
|
8228
8212
|
const currentChangeLog = React.useRef(changeLog);
|
|
8229
8213
|
const prevSeekTime = React.useRef(0);
|
|
8230
8214
|
const [playerUpdating, setPlayerUpdating] = React.useState(false);
|
|
8231
|
-
const handleCanvasReady = (
|
|
8232
|
-
console.log("canvas ready", canvas);
|
|
8215
|
+
const handleCanvasReady = (_canvas) => {
|
|
8233
8216
|
};
|
|
8234
8217
|
const handleCanvasOperation = (operation, data) => {
|
|
8235
8218
|
if (operation === CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED) {
|
|
@@ -17865,7 +17848,6 @@ function TimelineView({
|
|
|
17865
17848
|
}, [duration, zoomLevel]);
|
|
17866
17849
|
const labelWidth = 140;
|
|
17867
17850
|
const handleTrackDragStart = (e3, track) => {
|
|
17868
|
-
console.log("Drag", track);
|
|
17869
17851
|
setDraggedTimeline(track);
|
|
17870
17852
|
e3.dataTransfer.setData("application/json", JSON.stringify(track));
|
|
17871
17853
|
};
|
|
@@ -17967,10 +17949,7 @@ const useTimelineManager = () => {
|
|
|
17967
17949
|
setSelectedItem(updatedElement);
|
|
17968
17950
|
editor.refresh();
|
|
17969
17951
|
};
|
|
17970
|
-
const timelineData = React.useMemo(() =>
|
|
17971
|
-
const timelineDataFromEditor = editor.getTimelineData();
|
|
17972
|
-
return timelineDataFromEditor;
|
|
17973
|
-
}, [changeLog]);
|
|
17952
|
+
const timelineData = React.useMemo(() => editor.getTimelineData(), [changeLog]);
|
|
17974
17953
|
const { setSeekTime, setCurrentTime } = livePlayer.useLivePlayerContext();
|
|
17975
17954
|
const onReorder = (reorderedItems) => {
|
|
17976
17955
|
editor.reorderTracks(reorderedItems);
|
|
@@ -18344,11 +18323,7 @@ const useEditorManager = () => {
|
|
|
18344
18323
|
}
|
|
18345
18324
|
} catch (error2) {
|
|
18346
18325
|
}
|
|
18347
|
-
} else {
|
|
18348
|
-
console.log("TIMELINE ERROR: ", error.errors);
|
|
18349
18326
|
}
|
|
18350
|
-
} else {
|
|
18351
|
-
console.log("TIMELINE ERROR: ", error);
|
|
18352
18327
|
}
|
|
18353
18328
|
}
|
|
18354
18329
|
};
|