-
+ {isInteractiveCircle ? (
+
{
+ event.stopPropagation();
+ opts.onAttachmentContextMenu(event, item.url);
+ }}
+ >
+
+
+ ) : (
+
+ )}
{captionText ? (
) : null}
@@ -1500,6 +1513,71 @@ async function downloadFileFromUrl(url: string): Promise
{
window.URL.revokeObjectURL(blobUrl);
}
+function CircleVideoInlinePlayer({ src }: { src: string }) {
+ const videoRef = useRef(null);
+ const [isPlaying, setIsPlaying] = useState(false);
+
+ useEffect(() => {
+ const video = videoRef.current;
+ if (!video) {
+ return;
+ }
+ const handlePlay = () => setIsPlaying(true);
+ const handlePause = () => setIsPlaying(false);
+ const handleEnded = () => {
+ setIsPlaying(false);
+ video.currentTime = 0;
+ };
+ video.addEventListener("play", handlePlay);
+ video.addEventListener("pause", handlePause);
+ video.addEventListener("ended", handleEnded);
+ return () => {
+ video.removeEventListener("play", handlePlay);
+ video.removeEventListener("pause", handlePause);
+ video.removeEventListener("ended", handleEnded);
+ };
+ }, [src]);
+
+ async function togglePlayback() {
+ const video = videoRef.current;
+ if (!video) {
+ return;
+ }
+ if (video.paused || video.ended) {
+ try {
+ await video.play();
+ } catch {
+ setIsPlaying(false);
+ }
+ return;
+ }
+ video.pause();
+ }
+
+ return (
+
+
+
+
+ {isPlaying ? "❚❚" : "▶"}
+
+
+
+ );
+}
+
function AudioInlinePlayer({ src, title }: { src: string; title: string }) {
const track = useAudioPlayerStore((s) => s.track);
const isPlayingGlobal = useAudioPlayerStore((s) => s.isPlaying);