@elicecontents/content-ui 1.1.2-rc.30 → 1.1.2-rc.32

package/dist/index.cjs

@@ -2907,7 +2907,7 @@ EliceChat.InputArea = ({
       alignItems: recorderState.isRecording ? "center" : "none",
       p: "0.5rem 1rem",
       gap: "0.625rem",
-      zIndex: "1000",
+      zIndex: "50",
       children: isOnlyRecord ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         OnlyRecordButton,
         {
@@ -9234,11 +9234,15 @@ function EliceVideoV3({
   const wrapperRef = import_react16.default.useRef(null);
   const videoRef = import_react16.default.useRef(null);
   const hideControlsTimerRef = import_react16.default.useRef(null);
-  const lastTapRef = import_react16.default.useRef(null);
+  const lastTapRef = import_react16.default.useRef(
+    null
+  );
   const feedbackTimeoutRef = import_react16.default.useRef(null);
   const isPlayingRef = import_react16.default.useRef(false);
   const textTrackRef = import_react16.default.useRef(textTrack);
   const isDraggingTimelineRef = import_react16.default.useRef(false);
+  const isSeekingRef = import_react16.default.useRef(false);
+  const isMediaReloadingRef = import_react16.default.useRef(false);
   const singleTapTimerRef = import_react16.default.useRef(null);
   const [isReady, setIsReady] = import_react16.default.useState(false);
   const [isPlaying, setIsPlaying] = import_react16.default.useState(false);
@@ -9286,18 +9290,27 @@ function EliceVideoV3({
       setShowControls(false);
     }, 2300);
   }, []);
-  const seekBy = import_react16.default.useCallback((delta, withFeedback = true) => {
-    const video = videoRef.current;
-    if (!video) {
-      return;
-    }
-    const next = Math.max(0, Math.min((video.currentTime ?? 0) + delta, Number.isFinite(video.duration) ? video.duration : Infinity));
-    video.currentTime = next;
-    setCurrentTime(next);
-    if (withFeedback) {
-      showFeedback(delta > 0 ? "forward" : "backward");
-    }
-  }, [showFeedback]);
+  const seekBy = import_react16.default.useCallback(
+    (delta, withFeedback = true) => {
+      const video = videoRef.current;
+      if (!video) {
+        return;
+      }
+      const next = Math.max(
+        0,
+        Math.min(
+          (video.currentTime ?? 0) + delta,
+          Number.isFinite(video.duration) ? video.duration : Infinity
+        )
+      );
+      video.currentTime = next;
+      setCurrentTime(next);
+      if (withFeedback) {
+        showFeedback(delta > 0 ? "forward" : "backward");
+      }
+    },
+    [showFeedback]
+  );
   const togglePlayPause = import_react16.default.useCallback(() => {
     const video = videoRef.current;
     if (!video) {
@@ -9374,57 +9387,60 @@ function EliceVideoV3({
       track.mode = shouldShow ? "showing" : "disabled";
     });
   }, []);
-  const handleSurfacePointerDown = import_react16.default.useCallback((event) => {
-    const target = event.target;
-    if (target?.closest('[data-video-v3-control="true"]')) {
-      return;
-    }
-    const now = event.timeStamp;
-    const x = event.clientX;
-    const y = event.clientY;
-    const prev = lastTapRef.current;
-    if (!prev || now - prev.at > DOUBLE_TAP_INTERVAL_MS2) {
-      lastTapRef.current = { at: now, x, y };
-      resetControlsTimer();
+  const handleSurfacePointerDown = import_react16.default.useCallback(
+    (event) => {
+      const target = event.target;
+      if (target?.closest('[data-video-v3-control="true"]')) {
+        return;
+      }
+      const now = event.timeStamp;
+      const x = event.clientX;
+      const y = event.clientY;
+      const prev = lastTapRef.current;
+      if (!prev || now - prev.at > DOUBLE_TAP_INTERVAL_MS2) {
+        lastTapRef.current = { at: now, x, y };
+        resetControlsTimer();
+        if (singleTapTimerRef.current !== null) {
+          window.clearTimeout(singleTapTimerRef.current);
+        }
+        singleTapTimerRef.current = window.setTimeout(() => {
+          singleTapTimerRef.current = null;
+          lastTapRef.current = null;
+          togglePlayPause();
+        }, DOUBLE_TAP_INTERVAL_MS2);
+        return;
+      }
       if (singleTapTimerRef.current !== null) {
         window.clearTimeout(singleTapTimerRef.current);
-      }
-      singleTapTimerRef.current = window.setTimeout(() => {
         singleTapTimerRef.current = null;
-        lastTapRef.current = null;
-        togglePlayPause();
-      }, DOUBLE_TAP_INTERVAL_MS2);
-      return;
-    }
-    if (singleTapTimerRef.current !== null) {
-      window.clearTimeout(singleTapTimerRef.current);
-      singleTapTimerRef.current = null;
-    }
-    const dx = x - prev.x;
-    const dy = y - prev.y;
-    const isNear = dx * dx + dy * dy <= 42 * 42;
-    lastTapRef.current = null;
-    if (!isNear) {
-      return;
-    }
-    event.preventDefault();
-    const wrapper = wrapperRef.current;
-    if (!wrapper) {
-      return;
-    }
-    const bounds = wrapper.getBoundingClientRect();
-    const leftLimit = bounds.left + bounds.width * 0.33;
-    const rightLimit = bounds.left + bounds.width * 0.67;
-    if (x <= leftLimit) {
-      seekBy(-DOUBLE_TAP_SEEK_SECONDS);
-      return;
-    }
-    if (x >= rightLimit) {
-      seekBy(DOUBLE_TAP_SEEK_SECONDS);
-      return;
-    }
-    togglePlayPause();
-  }, [resetControlsTimer, seekBy, togglePlayPause]);
+      }
+      const dx = x - prev.x;
+      const dy = y - prev.y;
+      const isNear = dx * dx + dy * dy <= 42 * 42;
+      lastTapRef.current = null;
+      if (!isNear) {
+        return;
+      }
+      event.preventDefault();
+      const wrapper = wrapperRef.current;
+      if (!wrapper) {
+        return;
+      }
+      const bounds = wrapper.getBoundingClientRect();
+      const leftLimit = bounds.left + bounds.width * 0.33;
+      const rightLimit = bounds.left + bounds.width * 0.67;
+      if (x <= leftLimit) {
+        seekBy(-DOUBLE_TAP_SEEK_SECONDS);
+        return;
+      }
+      if (x >= rightLimit) {
+        seekBy(DOUBLE_TAP_SEEK_SECONDS);
+        return;
+      }
+      togglePlayPause();
+    },
+    [resetControlsTimer, seekBy, togglePlayPause]
+  );
   import_react16.default.useEffect(() => {
     const video = videoRef.current;
     if (!video) {
@@ -9440,6 +9456,7 @@ function EliceVideoV3({
       return;
     }
     const onLoadedMetadata = () => {
+      isMediaReloadingRef.current = false;
       setIsReady(true);
       setDuration(Number.isFinite(video.duration) ? video.duration : 0);
       if (rememberPositionKey) {
@@ -9455,13 +9472,29 @@ function EliceVideoV3({
       }
     };
     const onTimeUpdate = () => {
+      const time = video.currentTime || 0;
       if (!isDraggingTimelineRef.current) {
-        setCurrentTime(video.currentTime || 0);
+        setCurrentTime(time);
       }
       if (rememberPositionKey) {
-        window.localStorage.setItem(rememberPositionKey, `${video.currentTime || 0}`);
+        const shouldSkipRememberWrite = isDraggingTimelineRef.current || isSeekingRef.current || isMediaReloadingRef.current || !Number.isFinite(time) || time < 0.25;
+        if (!shouldSkipRememberWrite) {
+          window.localStorage.setItem(rememberPositionKey, `${time}`);
+        }
       }
     };
+    const onSeeking = () => {
+      isSeekingRef.current = true;
+    };
+    const onSeeked = () => {
+      isSeekingRef.current = false;
+    };
+    const onLoadStart = () => {
+      isMediaReloadingRef.current = true;
+    };
+    const onEmptied = () => {
+      isMediaReloadingRef.current = true;
+    };
     const onPlay = () => {
       setIsPlaying(true);
       setIsBuffering(false);
@@ -9475,12 +9508,17 @@ function EliceVideoV3({
       setIsBuffering(true);
     };
     const onPlaying = () => {
+      isMediaReloadingRef.current = false;
       setIsBuffering(false);
     };
     const onError = () => {
       setErrorMessage(labels.error);
     };
     video.addEventListener("loadedmetadata", onLoadedMetadata);
+    video.addEventListener("loadstart", onLoadStart);
+    video.addEventListener("emptied", onEmptied);
+    video.addEventListener("seeking", onSeeking);
+    video.addEventListener("seeked", onSeeked);
     video.addEventListener("timeupdate", onTimeUpdate);
     video.addEventListener("play", onPlay);
     video.addEventListener("pause", onPause);
@@ -9492,6 +9530,10 @@ function EliceVideoV3({
     video.addEventListener("error", onError);
     return () => {
       video.removeEventListener("loadedmetadata", onLoadedMetadata);
+      video.removeEventListener("loadstart", onLoadStart);
+      video.removeEventListener("emptied", onEmptied);
+      video.removeEventListener("seeking", onSeeking);
+      video.removeEventListener("seeked", onSeeked);
       video.removeEventListener("timeupdate", onTimeUpdate);
       video.removeEventListener("play", onPlay);
       video.removeEventListener("pause", onPause);
@@ -9510,10 +9552,16 @@ function EliceVideoV3({
       setIsFullscreen(Boolean(activeElement));
     };
     document.addEventListener("fullscreenchange", onFullscreenChange);
-    document.addEventListener("webkitfullscreenchange", onFullscreenChange);
+    document.addEventListener(
+      "webkitfullscreenchange",
+      onFullscreenChange
+    );
     return () => {
       document.removeEventListener("fullscreenchange", onFullscreenChange);
-      document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
+      document.removeEventListener(
+        "webkitfullscreenchange",
+        onFullscreenChange
+      );
     };
   }, []);
   import_react16.default.useEffect(() => {
@@ -9565,7 +9613,9 @@ function EliceVideoV3({
           return true;
         case "c":
           stopEvent();
-          applyCaption(selectedCaption === "off" ? textTrack?.[0]?.lang ?? "off" : "off");
+          applyCaption(
+            selectedCaption === "off" ? textTrack?.[0]?.lang ?? "off" : "off"
+          );
           return true;
         default:
           break;
@@ -9585,13 +9635,22 @@ function EliceVideoV3({
           return true;
         case "keyc":
           stopEvent();
-          applyCaption(selectedCaption === "off" ? textTrack?.[0]?.lang ?? "off" : "off");
+          applyCaption(
+            selectedCaption === "off" ? textTrack?.[0]?.lang ?? "off" : "off"
+          );
           return true;
         default:
           return false;
       }
     },
-    [applyCaption, seekBy, selectedCaption, textTrack, toggleFullscreen, togglePlayPause]
+    [
+      applyCaption,
+      seekBy,
+      selectedCaption,
+      textTrack,
+      toggleFullscreen,
+      togglePlayPause
+    ]
   );
   const handleKeyDown = (event) => {
     handleHotkey(event);
@@ -9756,152 +9815,169 @@ function EliceVideoV3({
             children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconPlay, {})
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "elice-video-v3__controls", "data-hidden": showControls ? "false" : "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "elice-video-v3__timeline-wrap", "data-video-v3-control": "true", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-            "input",
-            {
-              "data-video-v3-control": "true",
-              className: "elice-video-v3__timeline",
-              type: "range",
-              min: 0,
-              max: Number.isFinite(duration) && duration > 0 ? duration : 0,
-              step: 0.1,
-              value: Math.min(currentTime, Number.isFinite(duration) ? duration : currentTime),
-              onPointerDown: () => {
-                isDraggingTimelineRef.current = true;
-              },
-              onPointerUp: () => {
-                isDraggingTimelineRef.current = false;
-              },
-              onChange: (event) => {
-                const next = Number(event.target.value);
-                if (!Number.isFinite(next)) {
-                  return;
-                }
-                setCurrentTime(next);
-                if (videoRef.current) {
-                  videoRef.current.currentTime = next;
-                }
-              },
-              "aria-label": labels.seek
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "elice-video-v3__row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "elice-video-v3__group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                "button",
-                {
-                  "data-video-v3-control": "true",
-                  className: "elice-video-v3__btn",
-                  type: "button",
-                  onClick: togglePlayPause,
-                  "aria-label": isPlaying ? labels.pause : labels.play,
-                  title: isPlaying ? labels.pause : labels.play,
-                  children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconPlay, {})
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                "button",
-                {
-                  "data-video-v3-control": "true",
-                  className: "elice-video-v3__btn",
-                  type: "button",
-                  onClick: () => {
-                    setIsMuted((prev) => !prev);
-                  },
-                  "aria-label": isMuted ? labels.unmute : labels.mute,
-                  title: isMuted ? labels.unmute : labels.mute,
-                  children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconVolumeOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconVolumeOn, {})
-                }
-              ),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+          "div",
+          {
+            className: "elice-video-v3__controls",
+            "data-hidden": showControls ? "false" : "true",
+            children: [
               /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                "input",
+                "div",
                 {
+                  className: "elice-video-v3__timeline-wrap",
                   "data-video-v3-control": "true",
-                  className: "elice-video-v3__volume elice-video-v3__hide-mobile",
-                  type: "range",
-                  min: 0,
-                  max: 1,
-                  step: 0.01,
-                  value: isMuted ? 0 : volume,
-                  onChange: (event) => {
-                    const next = Number(event.target.value);
-                    setVolume(next);
-                    setIsMuted(next <= 0);
-                  },
-                  "aria-label": "Volume"
+                  children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    "input",
+                    {
+                      "data-video-v3-control": "true",
+                      className: "elice-video-v3__timeline",
+                      type: "range",
+                      min: 0,
+                      max: Number.isFinite(duration) && duration > 0 ? duration : 0,
+                      step: 0.1,
+                      value: Math.min(
+                        currentTime,
+                        Number.isFinite(duration) ? duration : currentTime
+                      ),
+                      onPointerDown: () => {
+                        isDraggingTimelineRef.current = true;
+                      },
+                      onPointerUp: () => {
+                        isDraggingTimelineRef.current = false;
+                      },
+                      onChange: (event) => {
+                        const next = Number(event.target.value);
+                        if (!Number.isFinite(next)) {
+                          return;
+                        }
+                        setCurrentTime(next);
+                        if (videoRef.current) {
+                          videoRef.current.currentTime = next;
+                        }
+                      },
+                      "aria-label": labels.seek
+                    }
+                  )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "elice-video-v3__time elice-video-v3__hide-mobile", children: [
-                formatTime(currentTime),
-                " / ",
-                formatTime(duration)
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "elice-video-v3__row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "elice-video-v3__group", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    "button",
+                    {
+                      "data-video-v3-control": "true",
+                      className: "elice-video-v3__btn",
+                      type: "button",
+                      onClick: togglePlayPause,
+                      "aria-label": isPlaying ? labels.pause : labels.play,
+                      title: isPlaying ? labels.pause : labels.play,
+                      children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconPause, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconPlay, {})
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    "button",
+                    {
+                      "data-video-v3-control": "true",
+                      className: "elice-video-v3__btn",
+                      type: "button",
+                      onClick: () => {
+                        setIsMuted((prev) => !prev);
+                      },
+                      "aria-label": isMuted ? labels.unmute : labels.mute,
+                      title: isMuted ? labels.unmute : labels.mute,
+                      children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconVolumeOff, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconVolumeOn, {})
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    "input",
+                    {
+                      "data-video-v3-control": "true",
+                      className: "elice-video-v3__volume elice-video-v3__hide-mobile",
+                      type: "range",
+                      min: 0,
+                      max: 1,
+                      step: 0.01,
+                      value: isMuted ? 0 : volume,
+                      onChange: (event) => {
+                        const next = Number(event.target.value);
+                        setVolume(next);
+                        setIsMuted(next <= 0);
+                      },
+                      "aria-label": "Volume"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "elice-video-v3__time elice-video-v3__hide-mobile", children: [
+                    formatTime(currentTime),
+                    " / ",
+                    formatTime(duration)
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "elice-video-v3__group elice-video-v3__group--right", children: [
+                  captionOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+                    "select",
+                    {
+                      "data-video-v3-control": "true",
+                      className: "elice-video-v3__select elice-video-v3__bottom-hide-small",
+                      value: selectedCaption,
+                      onChange: (event) => {
+                        applyCaption(event.target.value);
+                      },
+                      "aria-label": labels.captions,
+                      title: labels.captions,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("option", { value: "off", children: labels.captionsOff }),
+                        captionOptions.map((track) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("option", { value: track.lang, children: track.label ?? track.lang }, track.src))
+                      ]
+                    }
+                  ) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    "select",
+                    {
+                      "data-video-v3-control": "true",
+                      className: "elice-video-v3__select elice-video-v3__bottom-hide-small",
+                      value: String(playbackRate),
+                      onChange: (event) => {
+                        setPlaybackRate(Number(event.target.value));
+                      },
+                      "aria-label": labels.speed,
+                      title: labels.speed,
+                      children: playbackRates.map((rate) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("option", { value: String(rate), children: [
+                        rate,
+                        "x"
+                      ] }, rate))
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    "button",
+                    {
+                      "data-video-v3-control": "true",
+                      className: "elice-video-v3__btn",
+                      type: "button",
+                      onClick: () => {
+                        void togglePiP();
+                      },
+                      title: labels.pip,
+                      "aria-label": labels.pip,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconPiP, {})
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    "button",
+                    {
+                      "data-video-v3-control": "true",
+                      className: "elice-video-v3__btn",
+                      type: "button",
+                      onClick: toggleFullscreen,
+                      title: isFullscreen ? labels.exitFullscreen : labels.fullscreen,
+                      "aria-label": isFullscreen ? labels.exitFullscreen : labels.fullscreen,
+                      children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconFullscreenExit, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconFullscreen, {})
+                    }
+                  )
+                ] })
               ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "elice-video-v3__group elice-video-v3__group--right", children: [
-              captionOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-                "select",
-                {
-                  "data-video-v3-control": "true",
-                  className: "elice-video-v3__select elice-video-v3__bottom-hide-small",
-                  value: selectedCaption,
-                  onChange: (event) => {
-                    applyCaption(event.target.value);
-                  },
-                  "aria-label": labels.captions,
-                  title: labels.captions,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("option", { value: "off", children: labels.captionsOff }),
-                    captionOptions.map((track) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("option", { value: track.lang, children: track.label ?? track.lang }, track.src))
-                  ]
-                }
-              ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                "select",
-                {
-                  "data-video-v3-control": "true",
-                  className: "elice-video-v3__select elice-video-v3__bottom-hide-small",
-                  value: String(playbackRate),
-                  onChange: (event) => {
-                    setPlaybackRate(Number(event.target.value));
-                  },
-                  "aria-label": labels.speed,
-                  title: labels.speed,
-                  children: playbackRates.map((rate) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("option", { value: String(rate), children: [
-                    rate,
-                    "x"
-                  ] }, rate))
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                "button",
-                {
-                  "data-video-v3-control": "true",
-                  className: "elice-video-v3__btn",
-                  type: "button",
-                  onClick: () => {
-                    void togglePiP();
-                  },
-                  title: labels.pip,
-                  "aria-label": labels.pip,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconPiP, {})
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                "button",
-                {
-                  "data-video-v3-control": "true",
-                  className: "elice-video-v3__btn",
-                  type: "button",
-                  onClick: toggleFullscreen,
-                  title: isFullscreen ? labels.exitFullscreen : labels.fullscreen,
-                  "aria-label": isFullscreen ? labels.exitFullscreen : labels.fullscreen,
-                  children: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconFullscreenExit, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(IconFullscreen, {})
-                }
-              )
-            ] })
-          ] })
-        ] })
+            ]
+          }
+        )
       ]
     }
   );