@seafile/sdoc-editor 1.0.140 → 1.0.141-alpha3

package/dist/basic-sdk/extension/plugins/video/render-elem.js

@@ -0,0 +1,303 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderVideoBlock = renderVideoBlock;
+var _react = _interopRequireWildcard(require("react"));
+var _slateReact = require("@seafile/slate-react");
+var _slate = require("@seafile/slate");
+var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _helpers = require("./helpers");
+var _context = _interopRequireDefault(require("../../../../context"));
+var _core = require("../../core");
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+require("./index.css");
+const Video = _ref => {
+  var _videoStates$element$, _data$videoFiles$, _data$videoFiles$2;
+  let {
+    element,
+    editor,
+    style,
+    className,
+    attributes,
+    children,
+    t
+  } = _ref;
+  const {
+    data
+  } = element;
+  // const readOnly = useReadOnly();
+  const videoRef = (0, _react.useRef)(null);
+  const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
+  const [isShowVideoHoverMenu, setIsShowVideoHoverMenu] = (0, _react.useState)(false);
+  const [menuPosition, setMenuPosition] = (0, _react.useState)({});
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const [isSelected, setIsSelected] = (0, _react.useState)(false);
+  const [videoStates, setVideoStates] = (0, _react.useState)({});
+  // const [isPaused, setIsPaused] = useState(true);
+
+  const handlePlay = () => {
+    // setIsPaused(false);
+    setVideoStates(prev => ({
+      ...prev,
+      [element.id]: false
+    }));
+  };
+  const handlePause = () => {
+    // setIsPaused(true);
+    setVideoStates(prev => ({
+      ...prev,
+      [element.id]: true
+    }));
+  };
+  const isPaused = (_videoStates$element$ = videoStates[element.id]) !== null && _videoStates$element$ !== void 0 ? _videoStates$element$ : true;
+  const handleVideoLoad = () => {
+    // console.log(33);
+    setIsLoaded(true);
+    // setProgress(100);
+  };
+  const setPosition = (0, _react.useCallback)(() => {
+    if (videoRef.current) {
+      const {
+        top,
+        left
+      } = videoRef.current.getBoundingClientRect();
+      setMenuPosition({
+        top: top - 40,
+        left: left
+      });
+    }
+  }, []);
+  const onClickVideo = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    console.log(1, 2, (0, _core.getAboveBlockNode)(editor));
+    _slate.Transforms.select(editor, path);
+    setIsSelected(true);
+    console.log(4, isSelected, path);
+    setPosition();
+    setIsShowVideoHoverMenu(true);
+    const selection = editor.selection;
+    console.log(9, selection);
+  }, [element, setPosition]);
+  const onClickOutside = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    if (videoRef.current && !videoRef.current.contains(e.target)) {
+      setIsSelected(false);
+      console.log(3);
+    }
+  }, []);
+
+  // useEffect(() => {
+  //   const { selection } = editor;
+  //   if (selection) {
+  //     const aboveNodeEntry = getAboveBlockNode(editor);
+  //     if (aboveNodeEntry && aboveNodeEntry[0].type === VIDEO_BLOCK) {
+  //       console.log(2 )
+  //       setIsSelected(true);
+  //     } else {
+  //       console.log(4);
+  //       setIsSelected(false);
+  //     }
+  //   }
+  // }, [editor.selection, element]);
+  // useEffect(() => {
+  //   console.log('Backspace key pressed');
+  //   const handleKeyDown = (e) => {
+  //     if (e.key === 'Backspace') {
+  //       console.log('22, Backspace key pressed');
+  //       e.preventDefault();
+  //     }
+  //   };
+
+  //   window.addEventListener('keydown', handleKeyDown);
+
+  //   return () => {
+  //     window.removeEventListener('keydown', handleKeyDown);
+  //   };
+  // }, []);
+
+  const onHideVideoHoverMenu = (0, _react.useCallback)(e => {
+    if (e.target === videoRef.current) return;
+    setIsShowVideoHoverMenu(false);
+  }, []);
+  const registerEvent = (0, _react.useCallback)(eventList => {
+    eventList.forEach(element => {
+      document.addEventListener(element.eventName, element.event);
+    });
+  }, []);
+  const unregisterEvent = (0, _react.useCallback)(eventList => {
+    eventList.forEach(element => {
+      document.removeEventListener(element.eventName, element.event);
+    });
+  }, []);
+  const onScroll = (0, _react.useCallback)(() => {
+    setPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    let observerRefValue = null;
+    if (isShowVideoHoverMenu) {
+      registerEvent([{
+        'eventName': 'click',
+        'event': onHideVideoHoverMenu
+      }]);
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
+    } else {
+      unregisterEvent([{
+        'eventName': 'click',
+        'event': onHideVideoHoverMenu
+      }]);
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+    }
+    return () => {
+      unregisterEvent([{
+        'eventName': 'click',
+        'event': onHideVideoHoverMenu
+      }]);
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onScroll);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowVideoHoverMenu, onHideVideoHoverMenu]);
+  // console.log(0, data);
+  const videoFileName = data.videoFiles && ((_data$videoFiles$ = data.videoFiles[0]) === null || _data$videoFiles$ === void 0 ? void 0 : _data$videoFiles$.name) || null;
+  const videoFileSize = data.videoFiles && ((_data$videoFiles$2 = data.videoFiles[0]) === null || _data$videoFiles$2 === void 0 ? void 0 : _data$videoFiles$2.size) || null;
+  (0, _react.useEffect)(() => {
+    const videoElement = videoRef.current;
+    if (videoElement) {
+      // videoElement.addEventListener('timeupdate', handleProgress);
+      videoElement.addEventListener('onCanPlay', handleVideoLoad);
+      // console.log(99, videoElement);
+    }
+    document.addEventListener('click', onClickOutside);
+    return () => {
+      if (videoElement) {
+        // videoElement.removeEventListener('timeupdate', handleProgress);
+        videoElement.removeEventListener('onCanPlay', handleVideoLoad);
+      }
+      document.removeEventListener('click', onClickOutside);
+    };
+  }, []);
+  const formatFileSize = size => {
+    if (typeof size !== 'number') {
+      return '';
+    }
+    if (size >= 1000 * 1000 * 1000) {
+      return (size / (1000 * 1000 * 1000)).toFixed(1) + ' G';
+    }
+    if (size >= 1000 * 1000) {
+      return (size / (1000 * 1000)).toFixed(1) + ' M';
+    }
+    if (size >= 1000) {
+      return (size / 1000).toFixed(1) + ' K';
+    }
+    return size.toFixed(1) + ' B';
+  };
+  const videoFileIcon = () => {
+    const server = _context.default.getSetting('serviceUrl');
+    return `${server}/media/img/file/256/video.png`;
+  };
+  // console.log(100, isLoaded);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isLoaded && /*#__PURE__*/_react.default.createElement("div", {
+    className: "video-loading-placeholder"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: "video-file-icon",
+    src: videoFileIcon(),
+    alt: ""
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "video-file-info"
+  }, /*#__PURE__*/_react.default.createElement("div", null, videoFileName), /*#__PURE__*/_react.default.createElement("div", {
+    className: "file-size"
+  }, /*#__PURE__*/_react.default.createElement("span", null, formatFileSize(videoFileSize), " \u2014 "), /*#__PURE__*/_react.default.createElement("div", {
+    className: "loading-spinner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "spinner"
+  }))))), true && /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    "data-id": element.id,
+    className: (0, _classnames.default)('sdoc-video-wrapper', className)
+  }, attributes, {
+    style: {
+      ...style,
+      display: isLoaded ? 'block' : 'none'
+    }
+    // contentEditable='false'
+    // suppressContentEditableWarning
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-video-inner",
+    style: {
+      visibility: isLoaded ? 'visible' : 'hidden'
+    },
+    tabIndex: "-1"
+    // contentEditable='false'
+    // suppressContentEditableWarning
+  }, /*#__PURE__*/_react.default.createElement("video", {
+    className: "sdoc-video-element",
+    ref: videoRef,
+    src: (0, _helpers.getVideoURL)(data, editor),
+    controls: true
+    // style={getVideoStyle()}
+    ,
+    onClick: onClickVideo,
+    draggable: false,
+    onPlay: handlePlay,
+    onPause: handlePause
+    // width= '200px'
+    ,
+    onCanPlay: handleVideoLoad,
+    style: {
+      boxShadow: isSelected ? '0 0 0 2px #007bff' : 'none'
+    }
+    // contentEditable='false'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-video-play sdocfont sdoc-play icon-font",
+    style: {
+      visibility: isPaused ? 'visible' : 'hidden'
+    },
+    contentEditable: "false"
+  }))));
+};
+const SdocVideo = (0, _reactI18next.withTranslation)('sdoc-editor')(Video);
+function renderVideoBlock(props, editor) {
+  const {
+    element,
+    children,
+    attributes
+  } = props;
+  console.log('children', element.type);
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
+    className: "sdoc-video-block-wrapper"
+  }, attributes, {
+    contentEditable: "true",
+    suppressContentEditableWarning: true
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-video-children-wrapper",
+    contentEditable: "false",
+    suppressContentEditableWarning: true,
+    style: {
+      userSelect: 'none',
+      pointerEvents: 'none'
+    }
+  }, children), /*#__PURE__*/_react.default.createElement(SdocVideo
+  // children={children}
+  , {
+    element: element,
+    editor: editor
+    // onSelect={(e) => {
+    //   const selection = window.getSelection();
+    //   if (selection && selection.anchorNode) {
+    //     const isInsideVideo = videoRef.current?.contains(selection.anchorNode);
+    //     if (isInsideVideo) {
+    //       e.preventDefault();
+    //     }
+    //   }
+    // }}
+    // style={{ pointerEvents: 'none' }}
+  }));
+}

package/dist/basic-sdk/extension/render/custom-element.js

@@ -128,6 +128,13 @@ const CustomRenderElement = props => {
           ...props
         }, editor);
       }
+    case _constants.VIDEO_BLOCK:
+      {
+        const [renderVideoBlock] = _plugins.VideoPlugin.renderElements;
+        return renderVideoBlock({
+          ...props
+        }, editor);
+      }
     case _constants.ELEMENT_TYPE.MULTI_COLUMN:
       {
         const [renderMultiColumn] = _plugins.MultiColumnPlugin.renderElements;

package/dist/basic-sdk/extension/render/render-comment-editor-element.js

@@ -73,6 +73,13 @@ const RenderCommentEditorCustomRenderElement = props => {
           ...props
         }, editor);
       }
+    case _constants.VIDEO_BLOCK:
+      {
+        const [renderVideoBlock] = _plugins.VideoPlugin.renderElements;
+        return renderVideoBlock({
+          ...props
+        }, editor);
+      }
     case _constants.MENTION:
       {
         const [renderMention] = _plugins.MentionPlugin.renderElements;

package/dist/basic-sdk/extension/toolbar/header-toolbar/insert-toolbar/index.js

@@ -11,13 +11,14 @@ var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _menu = _interopRequireDefault(require("../../../plugins/image/menu"));
+var _menu2 = _interopRequireDefault(require("../../../plugins/video/menu"));
 var _tableMenu = _interopRequireDefault(require("../../../plugins/table/menu/table-menu"));
-var _menu2 = _interopRequireDefault(require("../../../plugins/link/menu"));
-var _menu3 = _interopRequireDefault(require("../../../plugins/code-block/menu"));
-var _menu4 = _interopRequireDefault(require("../../../plugins/sdoc-link/menu"));
-var _menu5 = _interopRequireDefault(require("../../../plugins/file-link/menu"));
-var _menu6 = _interopRequireDefault(require("../../../plugins/seatable-column/menu"));
-var _menu7 = _interopRequireDefault(require("../../../plugins/seatable-tables/menu"));
+var _menu3 = _interopRequireDefault(require("../../../plugins/link/menu"));
+var _menu4 = _interopRequireDefault(require("../../../plugins/code-block/menu"));
+var _menu5 = _interopRequireDefault(require("../../../plugins/sdoc-link/menu"));
+var _menu6 = _interopRequireDefault(require("../../../plugins/file-link/menu"));
+var _menu7 = _interopRequireDefault(require("../../../plugins/seatable-column/menu"));
+var _menu8 = _interopRequireDefault(require("../../../plugins/seatable-tables/menu"));
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 require("./index.css");
 const InsertToolbar = _ref => {
@@ -93,9 +94,9 @@ const InsertToolbar = _ref => {
     style: {
       maxHeight: window.innerHeight - bottom - 100
     }
-  }, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_tableMenu.default, props), /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_tableMenu.default, props), /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-dropdown-menu-divider"
-  }), editor.columns && /*#__PURE__*/_react.default.createElement(_menu6.default, props), editor.tables && /*#__PURE__*/_react.default.createElement(_menu7.default, props), !editor.tables && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement(_menu5.default, props)))));
+  }), editor.columns && /*#__PURE__*/_react.default.createElement(_menu7.default, props), editor.tables && /*#__PURE__*/_react.default.createElement(_menu8.default, props), !editor.tables && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_menu5.default, props), /*#__PURE__*/_react.default.createElement(_menu6.default, props)))));
 };
 InsertToolbar.defaultProps = {
   isRichEditor: true,

package/dist/basic-sdk/extension/toolbar/insert-element-toolbar/index.js

@@ -51,6 +51,19 @@ const QuickInsertBlockMenu = _ref => {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition]);
+  const onInsertVideoToggle = (0, _react.useCallback)(() => {
+    callback && callback();
+    const eventBus = _eventBus.default.getInstance();
+    if (insertPosition === _constants.INSERT_POSITION.CURRENT) {
+      _slate.Transforms.select(editor, editor.selection.focus);
+    }
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.LOCAL_VIDEO,
+      insertPosition,
+      slateNode
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition]);
   const createTable = (0, _react.useCallback)(size => {
     callback && callback();
     const newInsertPosition = slateNode.type === _constants.ELEMENT_TYPE.LIST_ITEM ? _constants.INSERT_POSITION.AFTER : insertPosition;
@@ -114,6 +127,12 @@ const QuickInsertBlockMenu = _ref => {
     });
     return !!callout;
   }, [editor]);
+  const isDisableVideo = (0, _react.useMemo)(() => {
+    const callout = (0, _core.getAboveBlockNode)(editor, {
+      match: n => [_constants.ELEMENT_TYPE.ORDERED_LIST, _constants.ELEMENT_TYPE.UNORDERED_LIST, _constants.ELEMENT_TYPE.CHECK_LIST_ITEM].includes(n.type)
+    });
+    return !!callout;
+  }, [editor]);
   const onInsertBlockQuote = (0, _react.useCallback)(() => {
     callback && callback();
     (0, _helpers5.insertBlockQuote)(editor, false);
@@ -133,6 +152,14 @@ const QuickInsertBlockMenu = _ref => {
         },
         onClick: onInsertImageToggle
       }),
+      [_constants.VIDEO]: /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+        disabled: isDisableVideo,
+        key: "sdoc-insert-menu-video",
+        menuConfig: {
+          ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.VIDEO]
+        },
+        onClick: onInsertVideoToggle
+      }),
       [_constants.TABLE]:
       /*#__PURE__*/
       // eslint-disable-next-line react/jsx-indent
@@ -231,7 +258,7 @@ const QuickInsertBlockMenu = _ref => {
       });
     });
     return items;
-  }, [isDisableImage, onInsertImageToggle, editor, createTable, openLinkDialog, onInsertBlockQuote, onInsertCodeBlock, isDisableCallout, onInsertCheckList, isEmptyNode, onInsertCallout, onInsertList, onInsert, createMultiColumn]);
+  }, [isDisableImage, isDisableVideo, onInsertImageToggle, editor, createTable, openLinkDialog, onInsertBlockQuote, onInsertCodeBlock, isDisableCallout, onInsertCheckList, isEmptyNode, onInsertCallout, onInsertList, onInsert, createMultiColumn]);
   const getSelectItemDom = selectIndex => {
     const dropDownItemWrapper = downDownWrapperRef.current;
     const currentSelectItem = dropDownItemWrapper.children[selectIndex];

package/dist/basic-sdk/extension/toolbar/side-toolbar/helpers.js

@@ -131,10 +131,11 @@ exports.getTopValue = getTopValue;
 const isVoidNode = node => {
   if (!node) return true;
   const hasImage = node.children.find(n => n.type === _constants.IMAGE);
+  const isVideoBlock = node.type === _constants.VIDEO_BLOCK;
   const isTable = node.type === _constants.TABLE;
   const isCodeBlock = node.type === _constants.CODE_BLOCK;
   const isCallout = node.type === _constants.CALL_OUT;
-  return _slate.Node.string(node) === '' && !hasImage && !isTable && !isCodeBlock && !isCallout;
+  return _slate.Node.string(node) === '' && !hasImage && !isVideoBlock && !isTable && !isCodeBlock && !isCallout;
 };
 exports.isVoidNode = isVoidNode;
 const isNotSupportTransform = node => {

package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -48,6 +48,19 @@ const InsertBlockMenu = _ref => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition]);
+  const onInsertVideoToggle = (0, _react.useCallback)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    if (insertPosition === _constants.INSERT_POSITION.CURRENT) {
+      _slate.Transforms.select(editor, editor.selection.focus);
+    }
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.LOCAL_VIDEO,
+      insertPosition,
+      slateNode
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition]);
   const createTable = (0, _react.useCallback)(size => {
     const newInsertPosition = slateNode.type === _constants.ELEMENT_TYPE.LIST_ITEM ? _constants.INSERT_POSITION.AFTER : insertPosition;
     (0, _helpers2.insertTable)(editor, size, editor.selection, newInsertPosition);
@@ -100,6 +113,12 @@ const InsertBlockMenu = _ref => {
       ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.IMAGE]
     },
     onClick: onInsertImageToggle
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.VIDEO],
+    menuConfig: {
+      ..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.VIDEO]
+    },
+    onClick: onInsertVideoToggle
   }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
     isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.TABLE],
     menuConfig: {

package/dist/components/toast/toast.js

@@ -22,6 +22,7 @@ class Toast extends _react.default.PureComponent {
         event.nativeEvent.stopImmediatePropagation();
         event.stopPropagation();
       }
+      console.log('close');
       this.clearCloseTimer();
       this.setState({
         isShown: false
@@ -35,6 +36,7 @@ class Toast extends _react.default.PureComponent {
       }
     });
     (0, _defineProperty2.default)(this, "clearCloseTimer", () => {
+      console.log('clearCloseTimer', this.closeTimer);
       if (this.closeTimer) {
         clearTimeout(this.closeTimer);
         this.closeTimer = null;
@@ -65,9 +67,11 @@ class Toast extends _react.default.PureComponent {
     }
   }
   componentDidMount() {
+    console.log('componentDidMount');
     this.startCloseTimer();
   }
   componentWillUnmount() {
+    console.log('componentWillUnmount');
     this.clearCloseTimer();
   }
   render() {

package/dist/components/toast/toaster.js

@@ -65,6 +65,7 @@ class Toaster {
     if (!isBrowser) return;
     const container = document.createElement('div');
     container.setAttribute('data-evergreen-toaster-container', '');
+    console.log('src');
     document.body.appendChild(container);
     _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_toastManager.default, {
       bindNotify: this._bindNotify,

package/dist/context.js

@@ -42,6 +42,15 @@ class Context {
         return relative_path;
       });
     });
+    (0, _defineProperty2.default)(this, "uploadLocalVideo", videoFiles => {
+      const docUuid = this.getSetting('docUuid');
+      return this.api.uploadSdocVideo(docUuid, videoFiles).then(res => {
+        const {
+          relative_path
+        } = res.data;
+        return relative_path;
+      });
+    });
     this.settings = null;
     this.sdocServerApi = null;
     this.api = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "1.0.140",
+  "version": "1.0.141-alpha3",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,6 +14,10 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="sdoc-play" unicode="&#59004;" d="M512 896C230.4 896 0 665.6 0 384s230.4-512 512-512 512 230.4 512 512c0 134.4-54.4 265.6-150.4 361.6S646.4 896 512 896z m0-944c-236.8 0-432 192-432 432S275.2 816 512 816s432-192 432-432c0-115.2-44.8-224-124.8-304s-192-128-307.2-128z m185.6 457.6l-134.4 76.8-140.8 83.2c-9.6 3.2-19.2 3.2-25.6-3.2-6.4-6.4-12.8-16-9.6-25.6v-320c0-9.6 3.2-19.2 9.6-25.6s16-6.4 25.6-3.2l140.8 83.2 134.4 76.8c9.6 6.4 12.8 16 12.8 25.6s-6.4 28.8-12.8 32z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-video" unicode="&#59003;" d="M969.6 832c28.8 0 54.4-25.6 54.4-57.6v-784c0-32-25.6-57.6-54.4-57.6H54.4C25.6-64 0-38.4 0-6.4V774.4C0 806.4 25.6 832 54.4 832h915.2zM928 736H96v-704h832V736zM348.8 608l380.8-227.2-380.8-227.2V608z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="sdoc-mark-as-resolved" unicode="&#59002;" d="M512 896c281.6 0 512-230.4 512-512s-230.4-512-512-512S0 102.4 0 384 230.4 896 512 896z m0-96C281.6 800 96 614.4 96 384s185.6-416 416-416 416 185.6 416 416S742.4 800 512 800z m272-243.2c19.2-22.4 16-54.4 0-70.4-6.4-6.4-64-70.4-124.8-134.4l-22.4-25.6c-57.6-64-115.2-121.6-124.8-134.4-22.4-25.6-44.8-35.2-70.4-35.2-25.6 0-44.8 9.6-64 28.8s-121.6 140.8-140.8 160-12.8 54.4 6.4 70.4 51.2 16 70.4-3.2c12.8-12.8 54.4-60.8 131.2-144 169.6 182.4 259.2 281.6 268.8 291.2 16 19.2 51.2 19.2 70.4-3.2z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-multi-column" unicode="&#59001;" d="M236.8 864l160-416h-73.6l-38.4 105.6H112L73.6 448H0L160 864h76.8zM198.4 790.4L131.2 608h134.4L198.4 790.4zM0 352h448v-64H0v64z m0-128h448v-64H0v64z m0-128h448v-64H0v64z m0-128h320v-64H0v64zM768 864c41.6 0 73.6-9.6 96-28.8 22.4-19.2 32-44.8 32-73.6 0-22.4-6.4-41.6-16-60.8-12.8-16-28.8-28.8-48-35.2 28.8-6.4 48-16 60.8-32 12.8-16 19.2-38.4 19.2-67.2 0-41.6-16-73.6-41.6-92.8-25.6-16-57.6-25.6-102.4-25.6h-192V864h192z m-9.6-230.4h-115.2v-128h112c25.6 0 44.8 3.2 60.8 12.8 19.2 9.6 28.8 25.6 28.8 51.2 0 22.4-6.4 41.6-19.2 51.2-12.8 6.4-35.2 12.8-67.2 12.8z m-9.6 176h-105.6v-118.4h105.6c28.8 0 48 6.4 60.8 16 12.8 9.6 19.2 25.6 19.2 48 0 19.2-6.4 35.2-19.2 41.6-12.8 6.4-32 12.8-60.8 12.8zM576 352h448v-64H576v64z m0-128h448v-64H576v64z m0-128h448v-64H576v64z m0-128h320v-64H576v64z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -1,14 +1,11 @@
 @font-face {
-  font-family: "sdocfont";
-  /* Project id 4097705 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1729735524150');
-  /* IE9 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1729735524150#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */
-    url('./sdoc-editor-font/iconfont.woff2?t=1729735524150') format('woff2'),
-    url('./sdoc-editor-font/iconfont.woff?t=1729735524150') format('woff'),
-    url('./sdoc-editor-font/iconfont.ttf?t=1729735524150') format('truetype'),
-    url('./sdoc-editor-font/iconfont.svg?t=1729735524150#sdocfont') format('svg');
+  font-family: "sdocfont"; /* Project id 4097705 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1732000106128'); /* IE9 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1732000106128#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./sdoc-editor-font/iconfont.woff2?t=1732000106128') format('woff2'),
+       url('./sdoc-editor-font/iconfont.woff?t=1732000106128') format('woff'),
+       url('./sdoc-editor-font/iconfont.ttf?t=1732000106128') format('truetype'),
+       url('./sdoc-editor-font/iconfont.svg?t=1732000106128#sdocfont') format('svg');
 }
 
 .sdocfont {
@@ -19,6 +16,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sdoc-play:before {
+  content: "\e67c";
+}
+
+.sdoc-video:before {
+  content: "\e67b";
+}
+
 .sdoc-mark-as-resolved:before {
   content: "\e67a";
 }