@seafile/sdoc-editor 1.0.210 → 1.0.212

package/dist/basic-sdk/extension/plugins/video/dialog/add-video-link-dialog/index.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _helpers = require("../../helpers");
+const AddVideoLinkDialog = _ref => {
+  let {
+    editor,
+    className,
+    closeDialog,
+    handleSubmit
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const [linkErrorMessage, setLinkErrorMessage] = (0, _react.useState)('');
+  const [url, setURL] = (0, _react.useState)('');
+  const isValidVideoLink = link => {
+    const videoRegex = /v\.qq\.com|youtube\.com|v\.youku\.com|bilibili\.com/i;
+    return videoRegex.test(link);
+  };
+  const submit = (0, _react.useCallback)(() => {
+    setLinkErrorMessage('');
+    if (!url) {
+      setLinkErrorMessage(t('The_link_address_is_required'));
+      return;
+    }
+    if (!isValidVideoLink(url)) {
+      setLinkErrorMessage(t('The_link_address_is_invalid'));
+      return;
+    }
+    (0, _helpers.insertVideo)(editor, [{
+      name: url,
+      isEmbeddableLink: true
+    }], [url]);
+    handleSubmit && handleSubmit();
+    closeDialog();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, url]);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if (event.keyCode === 13) {
+      event.preventDefault();
+      submit();
+      return;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, url]);
+  const handleUrlChange = (0, _react.useCallback)(event => {
+    const videoUrl = event.target.value;
+    if (videoUrl === url) return;
+    setURL(videoUrl);
+  }, [url]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    isOpen: true,
+    autoFocus: false,
+    toggle: closeDialog,
+    className: className,
+    zIndex: 1071,
+    returnFocusAfterClose: false
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+    toggle: closeDialog
+  }, t('Insert_link')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+    for: "addLink"
+  }, t('Link_address')), /*#__PURE__*/_react.default.createElement("input", {
+    onKeyDown: onKeyDown,
+    autoFocus: true,
+    type: "url",
+    className: "form-control",
+    id: "addVideoLink",
+    value: url || '',
+    onChange: handleUrlChange
+  }), linkErrorMessage && /*#__PURE__*/_react.default.createElement(_reactstrap.Alert, {
+    color: "danger",
+    className: "mt-2"
+  }, t(linkErrorMessage))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: 'center',
+      fontSize: '12px',
+      color: '#787774'
+    }
+  }, t('Support_Youtube_Tencent_Bilibili_and_more')))), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "secondary",
+    onClick: closeDialog
+  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "primary",
+    disabled: false,
+    onClick: submit
+  }, t('Add_link'))));
+};
+var _default = exports.default = AddVideoLinkDialog;

package/dist/basic-sdk/extension/plugins/video/helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.videoFileIcon = exports.isInsertVideoMenuDisabled = exports.insertVideo = exports.getVideoURL = exports.generateVideoNode = exports.formatFileSize = void 0;
+exports.videoFileIcon = exports.parseVideoLink = exports.isInsertVideoMenuDisabled = exports.insertVideo = exports.getVideoURL = exports.generateVideoNode = exports.formatFileSize = void 0;
 var _urlJoin = _interopRequireDefault(require("url-join"));
 var _slate = require("@seafile/slate");
 var _core = require("../../core");
@@ -43,26 +43,79 @@ const isInsertVideoMenuDisabled = (editor, readonly) => {
   return false;
 };
 exports.isInsertVideoMenuDisabled = isInsertVideoMenuDisabled;
-const generateVideoNode = (src, videoFiles) => {
+const generateVideoNode = (src, videoInfo) => {
   const element = (0, _core.generateEmptyElement)(_constants.VIDEO);
-  return {
+  const {
+    name,
+    size,
+    is_embeddable_link
+  } = videoInfo;
+  return [{
     ...element,
     data: {
       src,
-      videoFiles
+      name,
+      size,
+      is_embeddable_link
     }
-  };
+  }];
 };
 exports.generateVideoNode = generateVideoNode;
+const parseVideoLink = url => {
+  if (!url) return false;
+
+  // Youtube url conversion
+  if (url.includes('youtube.com')) {
+    const videoId = new URL(url).searchParams.get('v');
+    const videoUrl = videoId ? `https://www.youtube.com/embed/${videoId}/?rel=0` : false;
+    return videoUrl;
+  }
+
+  // Tencent url conversion
+  if (url.includes('v.qq.com')) {
+    const vidMatch = url.match(/\/([^\/]+)\.html/);
+    const videoUrl = vidMatch !== null && vidMatch !== void 0 && vidMatch[1] ? `https://v.qq.com/txp/iframe/player.html?vid=${vidMatch[1]}` : false;
+    return videoUrl;
+  }
+
+  // Bilibili url conversion
+  if (url.includes('bilibili.com')) {
+    const vidMatch = url.match(/\/video\/(BV[0-9A-Za-z]+)/);
+    const videoUrl = vidMatch !== null && vidMatch !== void 0 && vidMatch[1] ? `https://player.bilibili.com/player.html?bvid=${vidMatch[1]}` : false;
+    return videoUrl;
+  }
+
+  // Youku url conversion
+  if (url.includes('v.youku.com')) {
+    const vidMatch = url.match(/id_([A-Za-z0-9=]+)\.html/);
+    const videoUrl = vidMatch !== null && vidMatch !== void 0 && vidMatch[1] ? `https://player.youku.com/embed/${vidMatch[1]}` : false;
+    return videoUrl;
+  }
+
+  // Unsupported url
+  return false;
+};
+exports.parseVideoLink = parseVideoLink;
 const insertVideo = function (editor, videoFiles, srcList, selection) {
   let position = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : _constants.INSERT_POSITION.CURRENT;
   if (!srcList) return;
   if (position !== _constants.INSERT_POSITION.AFTER) {
     if (isInsertVideoMenuDisabled(editor)) return;
   }
-  const videoNodes = srcList.map(src => {
-    return generateVideoNode(src, videoFiles);
-  });
+  const videoInfo = {
+    name: videoFiles[0].name || null,
+    size: videoFiles[0].size || null,
+    is_embeddable_link: videoFiles[0].isEmbeddableLink || false
+  };
+  let videoNodes;
+  // Return when embedding an invalid youtube, tencent or bilibili video url
+  if (videoInfo.is_embeddable_link) {
+    const parsedSrc = parseVideoLink(srcList[0]);
+    if (!parsedSrc) return;
+    videoNodes = generateVideoNode(parsedSrc, videoInfo);
+  } else {
+    videoNodes = generateVideoNode(srcList[0], videoInfo);
+  }
   const validSelection = selection || editor.selection;
   let path = _slate.Editor.path(editor, validSelection);
   if (position === _constants.INSERT_POSITION.AFTER) {

package/dist/basic-sdk/extension/plugins/video/index.css

@@ -1,7 +1,7 @@
 .video-loading-placeholder {
   background-color: #F2F2F2;
   width: 100%;
-  height: 45px;
+  height: auto;
   display: flex;
   align-items: center;
 }
@@ -49,14 +49,15 @@
 
 .sdoc-video-wrapper .sdoc-video-inner {
   position: relative;
-  width: 670px;
+  width: 100%;
+  aspect-ratio: 16 / 9;
   display: flex;
   margin-top: 5px;
   margin-bottom: 10px;
 }
 
 .sdoc-video-inner .sdoc-video-element{
-  width: 670px;
+  width: 100%;
 }
 
 .sdoc-video-inner .sdoc-video-element:focus-visible {

package/dist/basic-sdk/extension/plugins/video/menu/index.js

@@ -17,6 +17,7 @@ const VideoMenu = _ref => {
   let {
     editor,
     readonly,
+    toggle,
     eventBus
   } = _ref;
   const disabled = (0, _helpers.isInsertVideoMenuDisabled)(editor, readonly);
@@ -30,6 +31,22 @@ const VideoMenu = _ref => {
       editor
     });
   }, [editor, eventBus]);
+  const addVideoLink = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.ELEMENT_TYPE.VIDEO_LINK,
+      editor
+    });
+    toggle && toggle();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, eventBus]);
+  const openSelectVideoFileDialog = (0, _react.useCallback)(() => {
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants.ELEMENT_TYPE.VIDEO,
+      insertVideo: _helpers.insertVideo
+    });
+    toggle && toggle();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toggle, eventBus]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
     disabled: disabled,
     menuConfig: menuConfig,
@@ -48,6 +65,12 @@ const VideoMenu = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: openLocalVideoDialog
-  }, t('Upload_local_video')))));
+  }, t('Upload_local_video')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: addVideoLink
+  }, t('Add_video_link')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: openSelectVideoFileDialog
+  }, t('Link_Seafile_video_file')))));
 };
 var _default = exports.default = VideoMenu;

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

@@ -12,7 +12,7 @@ var _reactI18next = require("react-i18next");
 var _helpers = require("./helpers");
 require("./index.css");
 const Video = _ref => {
-  var _data$videoFiles$, _data$videoFiles$2, _videoStates$element$;
+  var _videoStates$element$;
   let {
     element,
     editor
@@ -24,8 +24,9 @@ const Video = _ref => {
   const [isLoaded, setIsLoaded] = (0, _react.useState)(false);
   const [isSelected, setIsSelected] = (0, _react.useState)(false);
   const [videoStates, setVideoStates] = (0, _react.useState)({});
-  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;
+  const videoName = (data === null || data === void 0 ? void 0 : data.name) || (data === null || data === void 0 ? void 0 : data.src);
+  const videoSize = data === null || data === void 0 ? void 0 : data.size;
+  const isEmbeddableLink = data === null || data === void 0 ? void 0 : data.is_embeddable_link;
   const handlePlay = () => {
     setVideoStates(prev => ({
       ...prev,
@@ -75,9 +76,9 @@ const Video = _ref => {
     alt: ""
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "video-file-info"
-  }, /*#__PURE__*/_react.default.createElement("div", null, videoFileName), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", null, videoName), /*#__PURE__*/_react.default.createElement("div", {
     className: "file-size"
-  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _helpers.formatFileSize)(videoFileSize), " \u2014 "), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, (0, _helpers.formatFileSize)(videoSize), " \u2014 "), /*#__PURE__*/_react.default.createElement("div", {
     className: "loading-spinner"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "spinner"
@@ -92,10 +93,10 @@ const Video = _ref => {
     style: {
       visibility: isLoaded ? 'visible' : 'hidden'
     }
-  }, /*#__PURE__*/_react.default.createElement("video", {
+  }, !isEmbeddableLink && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("video", {
     className: "sdoc-video-element",
     ref: videoRef,
-    src: (0, _helpers.getVideoURL)(data, editor),
+    src: (0, _helpers.getVideoURL)(data),
     controls: true,
     onClick: onClickVideo,
     draggable: false,
@@ -111,6 +112,18 @@ const Video = _ref => {
       visibility: isPaused ? 'visible' : 'hidden'
     },
     contentEditable: "false"
+  })), isEmbeddableLink && /*#__PURE__*/_react.default.createElement("iframe", {
+    className: "sdoc-video-element",
+    title: data.src,
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true,
+    src: (0, _helpers.getVideoURL)(data),
+    onLoad: handleVideoLoad,
+    style: {
+      width: '100%',
+      height: '100%',
+      border: 'none'
+    }
   }))));
 };
 const SdocVideo = (0, _reactI18next.withTranslation)('sdoc-editor')(Video);

package/dist/constants/index.js

@@ -36,6 +36,7 @@ const EXTERNAL_EVENT = exports.EXTERNAL_EVENT = {
   PARTICIPANT_REMOVED: 'participant-removed',
   CREATE_SDOC_FILE: 'create_sdoc_file',
   CREATE_WIKI_PAGE: 'create_wiki_page',
+  ADD_VIDEO_LINK: 'add_video_link',
   // wiki
   INSERT_LINK: 'insert_link',
   // document

package/package.json

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

package/public/locales/cs/sdoc-editor.json

@@ -573,7 +573,7 @@
   "Five_column": "5 columns",
   "Full_width_mode": "Full width mode",
   "Video": "Video",
-  "Upload_local_video": "Upload_local_video",
+  "Upload_local_video": "Upload local video",
   "The_current_version_does_not_support_>5MB_video_file": "The_current_version_does_not_support_>5MB_video_file",
   "Token_expired_Please_refresh_the_page": "Token expired. Please refresh the page.",
   "Link_to_page": "Link to page",
@@ -606,5 +606,9 @@
   "Ask_AI": "Ask AI",
   "Enter_reply": "Enter reply",
   "Processing_content_cannot_be_empty": "Processing content cannot be empty",
-  "AI_error_message": "Request error, please try again"
+  "AI_error_message": "Request error, please try again",
+  "Add_video_link": "Add video link",
+  "Link_Seafile_video_file": "Link Seafile video file",
+  "Select_video_file": "Select video file",
+  "Support_Youtube_Tencent_Bilibili_and_more": "Support Youtube, Tencent, Bilibili and more"
 }