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