@ctzhian/tiptap 2.1.0 → 2.1.2

package/dist/extension/component/Audio/{Readonly.js → AudioPlayer.js}

@@ -11,47 +11,42 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { FloatingPopover } from "../../../component";
-import { DownloadLineIcon, PauseLineIcon, PlayLineIcon, SpeedLineIcon, VolumeMuteLineIcon, VolumeUpLineIcon } from "../../../component/Icons";
-import { Box, IconButton, MenuItem, MenuList, Paper, Slider, Stack, Typography } from "@mui/material";
-import { NodeViewWrapper } from "@tiptap/react";
+import { PauseLineIcon, PlayLineIcon, SpeedLineIcon, VolumeDownLineIcon, VolumeMuteLineIcon, VolumeUpLineIcon } from "../../../component/Icons";
+import { Box, Divider, IconButton, MenuItem, MenuList, Paper, Slider, Stack, Tooltip, Typography } from "@mui/material";
 import React, { useEffect, useRef, useState } from "react";
 import Disk from "../../../asset/images/disk.png";
-var ReadonlyAudio = function ReadonlyAudio(_ref) {
+var AudioPlayer = function AudioPlayer(_ref) {
   var attrs = _ref.attrs,
     _onError = _ref.onError;
   var audioRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isHovering = _useState2[0],
-    setIsHovering = _useState2[1];
+    isPlaying = _useState2[0],
+    setIsPlaying = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isPlaying = _useState4[0],
-    setIsPlaying = _useState4[1];
-  var _useState5 = useState(false),
+    isMuted = _useState4[0],
+    setIsMuted = _useState4[1];
+  var _useState5 = useState(0),
     _useState6 = _slicedToArray(_useState5, 2),
-    isMuted = _useState6[0],
-    setIsMuted = _useState6[1];
+    currentTime = _useState6[0],
+    setCurrentTime = _useState6[1];
   var _useState7 = useState(0),
     _useState8 = _slicedToArray(_useState7, 2),
-    currentTime = _useState8[0],
-    setCurrentTime = _useState8[1];
-  var _useState9 = useState(0),
+    duration = _useState8[0],
+    setDuration = _useState8[1];
+  var _useState9 = useState(0.5),
     _useState10 = _slicedToArray(_useState9, 2),
-    duration = _useState10[0],
-    setDuration = _useState10[1];
-  var _useState11 = useState(0.5),
+    volume = _useState10[0],
+    setVolume = _useState10[1];
+  var _useState11 = useState(1),
     _useState12 = _slicedToArray(_useState11, 2),
-    volume = _useState12[0],
-    setVolume = _useState12[1];
-  var _useState13 = useState(1),
+    playbackRate = _useState12[0],
+    setPlaybackRate = _useState12[1];
+  var _useState13 = useState(null),
     _useState14 = _slicedToArray(_useState13, 2),
-    playbackRate = _useState14[0],
-    setPlaybackRate = _useState14[1];
-  var _useState15 = useState(null),
-    _useState16 = _slicedToArray(_useState15, 2),
-    anchorElSpeed = _useState16[0],
-    setAnchorElSpeed = _useState16[1];
+    anchorElSpeed = _useState14[0],
+    setAnchorElSpeed = _useState14[1];
   var handleCloseSpeedPopover = function handleCloseSpeedPopover() {
     return setAnchorElSpeed(null);
   };
@@ -121,18 +116,6 @@ var ReadonlyAudio = function ReadonlyAudio(_ref) {
     handleCloseSpeedPopover();
   };
 
-  // 处理下载
-  var handleDownload = function handleDownload() {
-    if (attrs.src) {
-      var link = document.createElement('a');
-      link.href = attrs.src;
-      link.download = attrs.src.split('/').pop() || 'audio.mp3';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    }
-  };
-
   // 音频事件处理
   useEffect(function () {
     var audio = audioRef.current;
@@ -165,39 +148,22 @@ var ReadonlyAudio = function ReadonlyAudio(_ref) {
       audio.removeEventListener('error', handleError);
     };
   }, [attrs.src, _onError]);
-  return /*#__PURE__*/React.createElement(NodeViewWrapper, {
-    className: "audio-wrapper",
-    "data-drag-handle": true
-  }, /*#__PURE__*/React.createElement("audio", {
-    ref: audioRef,
-    src: attrs.src,
-    style: {
-      display: 'none'
-    },
-    onError: function onError(e) {
-      _onError === null || _onError === void 0 || _onError(e);
-    }
-  }), /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
     direction: 'row',
     alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: 1.5,
     sx: {
       position: 'relative',
-      '&:hover': {
-        '.audio-controls': {
-          opacity: 1
-        }
-      }
-    },
-    onMouseEnter: function onMouseEnter() {
-      return setIsHovering(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsHovering(false);
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      p: '0.5rem 1rem',
+      bgcolor: 'background.paper3'
     }
   }, /*#__PURE__*/React.createElement(Box, {
     sx: {
-      height: 100,
-      minWidth: 100,
+      height: 48,
+      minWidth: 48,
+      objectFit: 'cover',
       cursor: 'pointer',
       position: 'relative',
       flexShrink: 0,
@@ -206,109 +172,106 @@ var ReadonlyAudio = function ReadonlyAudio(_ref) {
       justifyContent: 'center',
       borderRadius: 'var(--mui-shape-borderRadius) 0 0 var(--mui-shape-borderRadius)',
       backgroundSize: 'cover',
-      backgroundImage: "url(".concat(Disk, ")")
+      backgroundImage: "url(".concat(attrs.poster || Disk, ")")
     },
     onClick: togglePlay
-  }, attrs.poster && /*#__PURE__*/React.createElement("img", {
-    src: attrs.poster,
-    alt: "\u97F3\u9891\u6D77\u62A5",
-    style: _objectSpread({
-      width: 48,
-      height: 48,
-      objectFit: 'cover',
-      borderRadius: '50%'
-    }, isPlaying && {
-      animation: 'rotate-icon infinite 20s linear'
-    })
   }), /*#__PURE__*/React.createElement(Box, {
     sx: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      opacity: isHovering ? 1 : 0,
-      transition: 'opacity 0.2s',
-      borderRadius: '50%'
-    }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      width: 32,
-      height: 32,
-      borderRadius: '50%',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
+      flex: 1,
+      minWidth: 180
     }
-  }, /*#__PURE__*/React.createElement(IconButton, null, isPlaying ? /*#__PURE__*/React.createElement(PauseLineIcon, {
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    justifyContent: 'space-between',
     sx: {
-      fontSize: '1.5rem',
-      color: 'text.primary'
+      mb: 0.5
     }
-  }) : /*#__PURE__*/React.createElement(PlayLineIcon, {
+  }, /*#__PURE__*/React.createElement(Box, {
     sx: {
-      fontSize: '1.5rem',
-      color: 'text.primary'
+      fontWeight: '500',
+      fontSize: 14
     }
-  }))))), /*#__PURE__*/React.createElement(Box, {
+  }, attrs.title || '音频'), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    spacing: 1,
     sx: {
-      flex: 1,
-      pr: 2,
-      pl: 4,
-      position: 'relative'
+      color: 'text.tertiary'
     }
   }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "subtitle1",
+    variant: "caption"
+  }, formatTime(currentTime)), /*#__PURE__*/React.createElement(Divider, {
+    orientation: "vertical",
+    flexItem: true,
     sx: {
-      fontWeight: 500,
-      mb: 1
+      height: '1rem',
+      mx: 0.5,
+      alignSelf: 'center',
+      borderColor: 'divider'
     }
-  }, attrs.title || '音频'), /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    alignItems: "center",
-    spacing: 1
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption"
+  }, formatTime(duration)))), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     alignItems: "center",
-    spacing: 1,
+    spacing: 2
+  }, /*#__PURE__*/React.createElement(Box, {
     sx: {
-      flex: 1
+      cursor: 'pointer',
+      color: 'text.disabled',
+      px: 1,
+      py: 0.5,
+      borderRadius: 'var(--mui-shape-borderRadius)',
+      backgroundColor: 'action.hover',
+      '&:hover': {
+        backgroundColor: 'action.selected',
+        color: 'text.primary'
+      }
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
+  }, isPlaying ? /*#__PURE__*/React.createElement(PauseLineIcon, {
     sx: {
-      minWidth: 40
-    }
-  }, formatTime(currentTime)), /*#__PURE__*/React.createElement(Slider, {
+      fontSize: '1rem'
+    },
+    onClick: togglePlay
+  }) : /*#__PURE__*/React.createElement(PlayLineIcon, {
+    sx: {
+      fontSize: '1rem'
+    },
+    onClick: togglePlay
+  })), /*#__PURE__*/React.createElement(Slider, {
     value: currentTime,
     min: 0,
     max: duration || 100,
     onChange: handleProgressChange,
     size: "small",
     sx: {
-      flex: 1
-    }
-  }), /*#__PURE__*/React.createElement(Typography, {
-    variant: "caption",
-    sx: {
-      minWidth: 40
+      py: '3px',
+      flex: 1,
+      '& .MuiSlider-track': {
+        border: 'none'
+      },
+      '& .MuiSlider-thumb': {
+        width: '10px',
+        height: '10px',
+        '&::after': {
+          width: '12px !important',
+          height: '12px !important'
+        },
+        '&:hover, &.Mui-focusVisible, &.Mui-active': {
+          boxShadow: 'none'
+        }
+      }
     }
-  }, formatTime(duration))), /*#__PURE__*/React.createElement(Stack, {
+  }))), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     alignItems: "center",
     sx: {
-      flexShrink: 0
-    }
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    size: "small",
-    onClick: toogleMute,
-    sx: {
-      flexShrink: 0
-    }
-  }, !isMuted ? /*#__PURE__*/React.createElement(VolumeUpLineIcon, {
+      flexShrink: 0,
+      color: 'text.disabled'
+    },
+    gap: 1
+  }, volume > 0 ? /*#__PURE__*/React.createElement(VolumeDownLineIcon, {
     sx: {
       fontSize: '1rem'
     }
@@ -316,7 +279,7 @@ var ReadonlyAudio = function ReadonlyAudio(_ref) {
     sx: {
       fontSize: '1rem'
     }
-  })), /*#__PURE__*/React.createElement(Slider, {
+  }), /*#__PURE__*/React.createElement(Slider, {
     value: volume,
     min: 0,
     max: 1,
@@ -327,18 +290,23 @@ var ReadonlyAudio = function ReadonlyAudio(_ref) {
     disabled: isMuted,
     sx: function sx(t) {
       return _objectSpread({
-        width: 80,
+        width: 64,
+        py: '3px',
         color: 'rgba(0,0,0,0.87)',
         '& .MuiSlider-track': {
           border: 'none'
         },
         '& .MuiSlider-thumb': {
-          width: 12,
-          height: 12,
+          width: '8px',
+          height: '8px',
           backgroundColor: '#fff',
           '&::before': {
             boxShadow: '0 4px 8px rgba(0,0,0,0.4)'
           },
+          '&::after': {
+            width: '12px !important',
+            height: '12px !important'
+          },
           '&:hover, &.Mui-focusVisible, &.Mui-active': {
             boxShadow: 'none'
           }
@@ -347,49 +315,35 @@ var ReadonlyAudio = function ReadonlyAudio(_ref) {
         color: '#fff'
       }));
     }
-  })), /*#__PURE__*/React.createElement(Stack, {
-    direction: 'row',
-    alignItems: 'center',
+  }), /*#__PURE__*/React.createElement(VolumeUpLineIcon, {
     sx: {
-      flexShrink: 0,
-      pr: 1
-    },
+      fontSize: '1rem'
+    }
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    arrow: true,
+    title: "\u500D\u901F\u64AD\u653E"
+  }, /*#__PURE__*/React.createElement(Box, {
     onClick: handleShowSpeedPopover
   }, /*#__PURE__*/React.createElement(IconButton, {
     size: "small",
     sx: {
-      color: anchorElSpeed ? 'primary.main' : ''
+      flexShrink: 0,
+      color: playbackRate !== 1 ? 'primary.main' : 'text.tertiary'
     }
   }, /*#__PURE__*/React.createElement(SpeedLineIcon, {
     sx: {
       fontSize: '1rem'
     }
-  })), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      color: 'text.secondary',
-      fontSize: '0.75rem'
-    }
-  }, playbackRate, "x")))), isHovering && /*#__PURE__*/React.createElement(Box, {
-    className: "audio-controls",
-    sx: {
-      position: 'absolute',
-      top: '0.5rem',
-      right: '0.5rem',
-      display: 'flex',
-      gap: '0.25rem'
-    }
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    size: "small",
-    onClick: handleDownload,
-    sx: {
-      color: 'text.primary',
-      bgcolor: 'background.paper'
-    }
-  }, /*#__PURE__*/React.createElement(DownloadLineIcon, {
-    sx: {
-      fontSize: '1rem'
+  }))))), /*#__PURE__*/React.createElement("audio", {
+    ref: audioRef,
+    src: attrs.src,
+    style: {
+      display: 'none'
+    },
+    onError: function onError(e) {
+      _onError === null || _onError === void 0 || _onError(e);
     }
-  })))), /*#__PURE__*/React.createElement(FloatingPopover, {
+  }), /*#__PURE__*/React.createElement(FloatingPopover, {
     open: Boolean(anchorElSpeed),
     anchorEl: anchorElSpeed,
     onClose: handleCloseSpeedPopover,
@@ -425,4 +379,4 @@ var ReadonlyAudio = function ReadonlyAudio(_ref) {
     }, /*#__PURE__*/React.createElement(Box, null, rate, "x"));
   })))));
 };
-export default ReadonlyAudio;
+export default AudioPlayer;