@haklex/rich-renderer-video 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2024 Innei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+Additional Terms and Conditions
+
+----------------
+
+Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.

package/README.md

@@ -0,0 +1,38 @@
+# @haklex/rich-renderer-video
+
+视频播放器渲染器。
+
+## 安装
+
+```bash
+pnpm add @haklex/rich-renderer-video @haklex/rich-editor
+```
+
+## 导出
+
+```ts
+export { VideoRenderer } from './VideoRenderer'
+export { VideoEditRenderer } from './VideoEditRenderer'
+```
+
+## 功能
+
+- 自定义控制栏
+- 进度条
+- 音量控制
+- 全屏
+
+## 使用
+
+```tsx
+import { VideoRenderer } from '@haklex/rich-renderer-video'
+import type { RendererConfig } from '@haklex/rich-editor'
+
+const config: RendererConfig = {
+  Video: VideoRenderer,
+}
+```
+
+## License
+
+MIT

package/dist/VideoEditRenderer.d.ts

@@ -0,0 +1,3 @@
+import { VideoRendererProps } from '@haklex/rich-editor';
+export declare function VideoEditRenderer(props: VideoRendererProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VideoEditRenderer.d.ts.map

package/dist/VideoEditRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoEditRenderer.d.ts","sourceRoot":"","sources":["../src/VideoEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAU7D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAQ1D"}

package/dist/VideoRenderer.d.ts

@@ -0,0 +1,4 @@
+import { VideoRendererProps } from '@haklex/rich-editor';
+import { ComponentType } from 'react';
+export declare const VideoRenderer: ComponentType<VideoRendererProps>;
+//# sourceMappingURL=VideoRenderer.d.ts.map

package/dist/VideoRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoRenderer.d.ts","sourceRoot":"","sources":["../src/VideoRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAGrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAW7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAY1C,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,kBAAkB,CA8Q3D,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { VideoEditRenderer } from './VideoEditRenderer';
+export { VideoRenderer } from './VideoRenderer';
+export { VideoRenderer as default } from './VideoRenderer';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,449 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRendererMode } from "@haklex/rich-editor";
+import { Popover, PopoverTrigger, PopoverPanel } from "@haklex/rich-editor-ui";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNearestNodeFromDOMNode } from "lexical";
+import { Play, Pause, VolumeX, Volume2, Loader2, Download, Minimize, Maximize, Video, ImageIcon, ExternalLink, Trash2 } from "lucide-react";
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import { Slider } from "@base-ui/react/slider";
+const PlayIcon = ({ size = 20 }) => /* @__PURE__ */ jsx(Play, { size });
+const PauseIcon = ({ size = 20 }) => /* @__PURE__ */ jsx(Pause, { size });
+const VolumeIcon = () => /* @__PURE__ */ jsx(Volume2, { size: 20 });
+const VolumeMuteIcon = () => /* @__PURE__ */ jsx(VolumeX, { size: 20 });
+const DownloadIcon = () => /* @__PURE__ */ jsx(Download, { size: 20 });
+const LoadingIcon = () => /* @__PURE__ */ jsx(Loader2, { size: 20, className: "rr-video-spin" });
+const FullscreenIcon = () => /* @__PURE__ */ jsx(Maximize, { size: 20 });
+const ExitFullscreenIcon = () => /* @__PURE__ */ jsx(Minimize, { size: 20 });
+const VideoRenderer = ({
+  src,
+  poster,
+  width,
+  height
+}) => {
+  const wrapperRef = useRef(null);
+  const videoRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [muted, setMuted] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [indicator, setIndicator] = useState(null);
+  const [draggingTime, setDraggingTime] = useState(null);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const dragWasPlayingRef = useRef(false);
+  const indicatorTimerRef = useRef(void 0);
+  const indicatorKeyRef = useRef(0);
+  const aspectRatio = useMemo(() => {
+    if (width && height && width > 0 && height > 0) {
+      return `${width} / ${height}`;
+    }
+    return "16 / 9";
+  }, [height, width]);
+  const showIndicator = useCallback((type) => {
+    indicatorKeyRef.current += 1;
+    setIndicator({ type, key: indicatorKeyRef.current });
+    clearTimeout(indicatorTimerRef.current);
+    indicatorTimerRef.current = setTimeout(() => setIndicator(null), 500);
+  }, []);
+  const play = useCallback(() => {
+    void videoRef.current?.play();
+  }, []);
+  const pause = useCallback(() => {
+    videoRef.current?.pause();
+  }, []);
+  const togglePlay = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) {
+      play();
+      showIndicator("play");
+    } else {
+      pause();
+      showIndicator("pause");
+    }
+  }, [pause, play, showIndicator]);
+  const seekTo = useCallback((time) => {
+    const video = videoRef.current;
+    if (!video) return;
+    const clamped = Math.min(
+      Math.max(0, time),
+      Number.isFinite(video.duration) ? video.duration : time
+    );
+    video.currentTime = clamped;
+    setCurrentTime(clamped);
+  }, []);
+  const toggleMute = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.muted = !video.muted;
+    setMuted(video.muted);
+  }, []);
+  const toggleFullscreen = useCallback(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    if (!document.fullscreenElement) {
+      void wrapper.requestFullscreen();
+    } else {
+      void document.exitFullscreen();
+    }
+  }, []);
+  const downloadingRef = useRef(false);
+  const downloadVideo = useCallback(() => {
+    if (downloadingRef.current) return;
+    downloadingRef.current = true;
+    setIsDownloading(true);
+    const filename = src.split("/").pop() || "video";
+    const fallback = () => {
+      const a = document.createElement("a");
+      a.href = src;
+      a.download = filename;
+      a.rel = "noopener noreferrer";
+      a.click();
+    };
+    fetch(src).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.blob();
+    }).then((blob) => {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      a.click();
+      setTimeout(() => URL.revokeObjectURL(url), 1e3);
+    }).catch(() => fallback()).finally(() => {
+      downloadingRef.current = false;
+      setIsDownloading(false);
+    });
+  }, [src]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const onLoadedMetadata = () => {
+      setDuration(Number.isFinite(video.duration) ? video.duration : 0);
+      setMuted(video.muted);
+    };
+    const onDurationChange = () => {
+      setDuration(Number.isFinite(video.duration) ? video.duration : 0);
+    };
+    const onTimeUpdate = () => setCurrentTime(video.currentTime);
+    const onPlay = () => setPlaying(true);
+    const onPause = () => setPlaying(false);
+    const onVolumeChange = () => setMuted(video.muted);
+    video.addEventListener("loadedmetadata", onLoadedMetadata);
+    video.addEventListener("durationchange", onDurationChange);
+    video.addEventListener("timeupdate", onTimeUpdate);
+    video.addEventListener("play", onPlay);
+    video.addEventListener("pause", onPause);
+    video.addEventListener("volumechange", onVolumeChange);
+    return () => {
+      video.removeEventListener("loadedmetadata", onLoadedMetadata);
+      video.removeEventListener("durationchange", onDurationChange);
+      video.removeEventListener("timeupdate", onTimeUpdate);
+      video.removeEventListener("play", onPlay);
+      video.removeEventListener("pause", onPause);
+      video.removeEventListener("volumechange", onVolumeChange);
+    };
+  }, []);
+  useEffect(() => {
+    const handler = () => setIsFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", handler);
+    return () => document.removeEventListener("fullscreenchange", handler);
+  }, []);
+  useEffect(() => {
+    return () => clearTimeout(indicatorTimerRef.current);
+  }, []);
+  const timelineValue = draggingTime ?? currentTime;
+  return /* @__PURE__ */ jsx("figure", { className: "rr-video-root", children: /* @__PURE__ */ jsxs("div", { className: "rr-video-player", ref: wrapperRef, style: { aspectRatio }, children: [
+    /* @__PURE__ */ jsx(
+      "video",
+      {
+        ref: videoRef,
+        className: "rr-video-element",
+        src,
+        poster,
+        preload: "metadata",
+        playsInline: true,
+        onClick: togglePlay,
+        onDoubleClick: toggleFullscreen
+      }
+    ),
+    indicator && /* @__PURE__ */ jsx("span", { className: "rr-video-indicator", "aria-hidden": true, children: indicator.type === "play" ? /* @__PURE__ */ jsx(PlayIcon, { size: 32 }) : /* @__PURE__ */ jsx(PauseIcon, { size: 32 }) }, indicator.key),
+    /* @__PURE__ */ jsxs("div", { className: "rr-video-controls", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rr-video-btn",
+          "aria-label": playing ? "Pause" : "Play",
+          onClick: togglePlay,
+          children: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Slider.Root,
+        {
+          className: "rr-video-progress",
+          min: 0,
+          max: duration || 0,
+          step: 0.01,
+          value: timelineValue,
+          onValueChange: (value) => {
+            setDraggingTime(value);
+          },
+          onValueCommitted: (value) => {
+            seekTo(value);
+            setDraggingTime(null);
+            if (dragWasPlayingRef.current) {
+              play();
+            }
+          },
+          children: /* @__PURE__ */ jsx(
+            Slider.Control,
+            {
+              className: "rr-video-progress-control",
+              onPointerDown: () => {
+                dragWasPlayingRef.current = playing;
+                pause();
+                setDraggingTime(currentTime);
+              },
+              children: /* @__PURE__ */ jsxs(Slider.Track, { className: "rr-video-progress-track", children: [
+                /* @__PURE__ */ jsx(Slider.Indicator, { className: "rr-video-progress-range" }),
+                /* @__PURE__ */ jsx(
+                  Slider.Thumb,
+                  {
+                    className: "rr-video-progress-thumb",
+                    "aria-label": "Playback progress"
+                  }
+                )
+              ] })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rr-video-btn",
+          "aria-label": muted ? "Unmute" : "Mute",
+          onClick: toggleMute,
+          children: muted ? /* @__PURE__ */ jsx(VolumeMuteIcon, {}) : /* @__PURE__ */ jsx(VolumeIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rr-video-btn",
+          "aria-label": "Download",
+          onClick: downloadVideo,
+          children: isDownloading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : /* @__PURE__ */ jsx(DownloadIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rr-video-btn",
+          "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
+          onClick: toggleFullscreen,
+          children: isFullscreen ? /* @__PURE__ */ jsx(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
+        }
+      )
+    ] })
+  ] }) });
+};
+function VideoEditRenderer(props) {
+  const mode = useRendererMode();
+  if (mode !== "editor") {
+    return /* @__PURE__ */ jsx(VideoRenderer, { ...props });
+  }
+  return /* @__PURE__ */ jsx(VideoEditRendererInner, { ...props });
+}
+function VideoEditRendererInner({
+  src,
+  poster,
+  width,
+  height
+}) {
+  const [editor] = useLexicalComposerContext();
+  const editable = editor.isEditable();
+  const wrapperRef = useRef(null);
+  const srcInputRef = useRef(null);
+  const [open, setOpen] = useState(!src);
+  const [editSrc, setEditSrc] = useState(src);
+  const [editPoster, setEditPoster] = useState(poster || "");
+  useEffect(() => {
+    setEditSrc(src);
+    setEditPoster(poster || "");
+  }, [src, poster]);
+  useEffect(() => {
+    if (!src) setOpen(true);
+  }, [src]);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => srcInputRef.current?.focus());
+    }
+  }, [open]);
+  const commitChanges = useCallback(() => {
+    const trimmedSrc = editSrc.trim();
+    if (!trimmedSrc) return;
+    if (/^(?:javascript\s*:|vbscript\s*:|data\s*:(?!video\/))/i.test(trimmedSrc))
+      return;
+    if (!wrapperRef.current) return;
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(wrapperRef.current);
+      if (!node) return;
+      const writable = node.getWritable();
+      writable.__src = trimmedSrc;
+      writable.__poster = editPoster.trim() || void 0;
+    });
+    setOpen(false);
+  }, [editor, editSrc, editPoster]);
+  const handleDelete = useCallback(() => {
+    if (!wrapperRef.current) return;
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(wrapperRef.current);
+      if (node) node.remove();
+    });
+    setOpen(false);
+  }, [editor]);
+  const handleOpen = useCallback(() => {
+    if (src) window.open(src, "_blank", "noopener,noreferrer");
+  }, [src]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitChanges();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setEditSrc(src);
+        setEditPoster(poster || "");
+        setOpen(false);
+      }
+    },
+    [commitChanges, src, poster]
+  );
+  if (!editable) {
+    return /* @__PURE__ */ jsx(VideoRenderer, { src, poster, width, height });
+  }
+  const aspectRatio = width && height && width > 0 && height > 0 ? `${width} / ${height}` : "16 / 9";
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+          setEditSrc(src);
+          setEditPoster(poster || "");
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          PopoverTrigger,
+          {
+            render: /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: "rr-video-edit-trigger" }),
+            children: src ? /* @__PURE__ */ jsx("figure", { className: "rr-video-root", children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "rr-video-edit-preview",
+                style: {
+                  aspectRatio,
+                  backgroundImage: poster ? `url(${poster})` : void 0
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "video",
+                    {
+                      className: "rr-video-edit-video",
+                      src,
+                      poster,
+                      preload: "metadata"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "rr-video-edit-overlay", children: /* @__PURE__ */ jsx(Video, { size: 32 }) })
+                ]
+              }
+            ) }) : /* @__PURE__ */ jsxs("div", { className: "rr-video-edit-placeholder", children: [
+              /* @__PURE__ */ jsx(Video, { size: 24 }),
+              /* @__PURE__ */ jsx("span", { children: "Click to add video" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          PopoverPanel,
+          {
+            side: "bottom",
+            sideOffset: 8,
+            className: "rr-video-edit-panel",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "rr-video-edit-field", children: [
+                /* @__PURE__ */ jsx(Video, { className: "rr-video-edit-field-icon", size: 14 }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: srcInputRef,
+                    className: "rr-video-edit-input",
+                    type: "url",
+                    value: editSrc,
+                    onChange: (e) => setEditSrc(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Video URL"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rr-video-edit-field", children: [
+                /* @__PURE__ */ jsx(ImageIcon, { className: "rr-video-edit-field-icon", size: 14 }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "rr-video-edit-input",
+                    type: "url",
+                    value: editPoster,
+                    onChange: (e) => setEditPoster(e.target.value),
+                    onBlur: commitChanges,
+                    onKeyDown: handleKeyDown,
+                    placeholder: "Poster URL (optional)"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "rr-video-edit-actions", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: "rr-video-edit-action-btn",
+                    type: "button",
+                    onClick: handleOpen,
+                    children: [
+                      /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                      "Open"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: "rr-video-edit-action-btn rr-video-edit-action-btn--end",
+                    type: "button",
+                    onClick: handleDelete,
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+                      "Remove"
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  VideoEditRenderer,
+  VideoRenderer,
+  VideoRenderer as default
+};

package/dist/rich-renderer-video.css

@@ -0,0 +1,266 @@
+@keyframes _1x2h1ol0 {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.3);
+  }
+}
+@keyframes _1x2h1ol1 {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.rr-video-root {
+  margin: 1.25rem 0;
+}
+.rr-video-player {
+  position: relative;
+  width: 100%;
+  background: #000;
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+.rr-video-element {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+  background: #000;
+  cursor: pointer;
+}
+.rr-video-indicator {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  pointer-events: none;
+  animation: _1x2h1ol0 0.5s ease forwards;
+}
+.rr-video-controls {
+  position: absolute;
+  left: 2rem;
+  right: 2rem;
+  bottom: 0.5rem;
+  height: 2.5rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--rc-border) 20%, transparent);
+  background: color-mix(in srgb, var(--rc-bg-secondary) 90%, transparent);
+  backdrop-filter: blur(24px) saturate(180%);
+  color: var(--rc-text);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0 1rem;
+  max-width: 80vw;
+  margin: 0 auto;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.rr-video-player:hover .rr-video-controls, .rr-video-player:focus-within .rr-video-controls {
+  opacity: 1;
+  transform: translateY(0);
+}
+.rr-video-btn {
+  appearance: none;
+  border: none;
+  background: none;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0.125rem;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+.rr-video-btn:hover {
+  transform: scale(1.1);
+}
+.rr-video-btn:active {
+  transform: scale(0.93);
+}
+.rr-video-btn:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.rr-video-btn:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.rr-video-progress {
+  flex: 1;
+  height: 100%;
+}
+.rr-video-progress-control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  user-select: none;
+}
+.rr-video-progress-track {
+  position: relative;
+  flex: 1;
+  height: 0.25rem;
+  border-radius: 999px;
+  background: var(--rc-bg);
+}
+.rr-video-progress-range {
+  position: absolute;
+  height: 100%;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent);
+}
+.rr-video-progress-thumb {
+  display: block;
+  height: 0.75rem;
+  width: 3px;
+  border-radius: 1px;
+  border: none;
+  background: var(--rc-text-secondary);
+}
+.rr-video-spin {
+  animation: _1x2h1ol1 0.8s linear infinite;
+}
+.rr-video-edit-trigger {
+  display: block;
+  cursor: pointer;
+}
+.rr-video-edit-preview {
+  position: relative;
+  width: 100%;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: #000;
+  background-size: cover;
+  background-position: center;
+  cursor: pointer;
+}
+.rr-video-edit-video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+  pointer-events: none;
+}
+.rr-video-edit-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.35);
+  color: #fff;
+  transition: background 0.2s;
+}
+.rr-video-edit-trigger:hover .rr-video-edit-overlay {
+  background: rgba(0, 0, 0, 0.5);
+}
+.rr-video-edit-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 2rem;
+  border: 2px dashed var(--rc-border);
+  border-radius: var(--rc-radius-md);
+  color: var(--rc-text-secondary);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+}
+.rr-video-edit-placeholder:hover {
+  border-color: var(--rc-accent);
+  color: var(--rc-text);
+}
+.rr-video-edit-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 340px;
+  padding: 12px;
+  font-size: 13px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+.rr-video-edit-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background-color: var(--rc-bg-secondary);
+  border-radius: 6px;
+  min-width: 0;
+}
+.rr-video-edit-field-icon {
+  flex-shrink: 0;
+  color: var(--rc-text-secondary);
+}
+.rr-video-edit-input {
+  flex: 1;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  font-size: 13px;
+  padding: 0;
+  outline: none;
+  min-width: 0;
+}
+.rr-video-edit-input::placeholder {
+  color: var(--rc-text-secondary);
+}
+.rr-video-edit-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.rr-video-edit-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  appearance: none;
+  border: none;
+  background: none;
+  color: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  white-space: nowrap;
+}
+.rr-video-edit-action-btn:hover {
+  background-color: var(--rc-bg-secondary);
+}
+.rr-video-edit-action-btn--end {
+  margin-left: auto;
+}
+@media (max-width: 768px) {
+  .rr-video-controls {
+    left: 0.75rem;
+    right: 0.75rem;
+    opacity: 1;
+    transform: none;
+    gap: 0.5rem;
+    padding: 0 0.75rem;
+  }
+}

package/dist/styles.css.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@haklex/rich-renderer-video",
+  "version": "0.0.1",
+  "description": "Video player renderer",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-renderer-video.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@base-ui/react": "^1.1.0",
+    "lucide-react": "^0.574.0"
+  },
+  "devDependencies": {
+    "@lexical/react": "^0.39.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "lexical": "^0.39.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-editor-ui": "0.0.1",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependencies": {
+    "@lexical/react": "^0.39.0",
+    "lexical": "^0.39.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-editor": "0.0.1",
+    "@haklex/rich-style-token": "0.0.1",
+    "@haklex/rich-editor-ui": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}