@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 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 cacheKey = this.getCacheKey(videoUrl, seekTime);
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, seekTime);
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 (error) {
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 (error) {
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 (error) {
8108
- console.error(`Error adding element ${element.id}:`, error);
8096
+ } catch {
8109
8097
  }
8110
8098
  })
8111
8099
  );
8112
8100
  reorderElementsByZIndex(twickCanvas);
8113
- } catch (error) {
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 = (canvas) => {
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
  };