@seafile/sdoc-editor 1.0.206-test0.2.7 → 1.0.206-test0.2.9

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");
@@ -54,16 +54,45 @@ const generateVideoNode = (src, videoFiles) => {
   };
 };
 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;
+  }
+
+  // Unsupported url
+  return false;
+};
+exports.parseVideoLink = parseVideoLink;
 const insertVideo = function (editor, videoFiles, srcList, selection) {
+  var _videoFiles$;
   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;
   }
-  console.log('helper', videoFiles, srcList);
-  const videoNodes = srcList.map(src => {
-    return generateVideoNode(src, videoFiles);
-  });
+  let videoNodes;
+  // Parse youtube and tencent video url when embed thirdPlatform link
+  if (Array.isArray(videoFiles) && (_videoFiles$ = videoFiles[0]) !== null && _videoFiles$ !== void 0 && _videoFiles$.isEmbeddableLink) {
+    const parsedSrc = parseVideoLink(srcList[0]);
+    if (!parsedSrc) return;
+    videoNodes = generateVideoNode(parsedSrc, videoFiles);
+  } else {
+    videoNodes = srcList.map(src => {
+      return generateVideoNode(src, videoFiles);
+    });
+  }
   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

@@ -50,7 +50,7 @@
 .sdoc-video-wrapper .sdoc-video-inner {
   position: relative;
   width: 100%;
-  aspect-ratio: 1.6;
+  aspect-ratio: 16 / 9;
   display: flex;
   margin-top: 5px;
   margin-bottom: 10px;
@@ -60,6 +60,15 @@
   width: 100%;
 }
 
+/* .sdoc-video-element canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  object-fit: contain;
+} */
+
 .sdoc-video-inner .sdoc-video-element:focus-visible {
   outline: none;
 }

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

@@ -27,7 +27,7 @@ const Video = _ref => {
   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 isEmbeddableLink = data.videoFiles && ((_data$videoFiles$3 = data.videoFiles[0]) === null || _data$videoFiles$3 === void 0 ? void 0 : _data$videoFiles$3.isEmbeddableLink) || false;
-  console.log(55, isEmbeddableLink, (0, _helpers.getVideoURL)(data));
+  console.log(55, data.videoFiles, isEmbeddableLink, (0, _helpers.getVideoURL)(data));
   const handlePlay = () => {
     setVideoStates(prev => ({
       ...prev,
@@ -69,6 +69,25 @@ const Video = _ref => {
       document.removeEventListener('click', onClickOutside);
     };
   }, [onClickOutside]);
+  (0, _react.useEffect)(() => {
+    const enterFullscreen = () => {
+      if (videoRef.current) {
+        const iframeElement = videoRef.current;
+        console.log(333);
+        if (iframeElement.requestFullscreen) {
+          iframeElement.requestFullscreen();
+        } else if (iframeElement.webkitRequestFullscreen) {
+          iframeElement.webkitRequestFullscreen(); // Safari
+        } else if (iframeElement.mozRequestFullScreen) {
+          iframeElement.mozRequestFullScreen(); // Firefox
+        } else if (iframeElement.msRequestFullscreen) {
+          iframeElement.msRequestFullscreen(); // IE/Edge
+        }
+      }
+    };
+
+    // enterFullscreen();
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isLoaded && /*#__PURE__*/_react.default.createElement("div", {
     className: "video-loading-placeholder"
   }, /*#__PURE__*/_react.default.createElement("img", {
@@ -94,7 +113,7 @@ const Video = _ref => {
     style: {
       visibility: isLoaded ? 'visible' : 'hidden'
     }
-  }, !isEmbeddableLink && /*#__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),
@@ -107,27 +126,20 @@ const Video = _ref => {
     style: {
       boxShadow: isSelected ? '0 0 0 2px #007bff' : 'none'
     }
-  }), isEmbeddableLink && /*#__PURE__*/_react.default.createElement("iframe", {
-    className: "sdoc-video-element",
-    ref: videoRef,
-    src: (0, _helpers.getVideoURL)(data),
-    onClick: onClickVideo,
-    draggable: false,
-    onPlay: handlePlay,
-    onPause: handlePause,
-    onLoad: handleVideoLoad,
-    title: data.src,
-    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-    allowFullScreen: true,
-    style: {
-      boxShadow: isSelected ? '0 0 0 2px #007bff' : 'none'
-    }
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-video-play sdocfont sdoc-play icon-font",
     style: {
       visibility: isPaused ? 'visible' : 'hidden'
     },
     contentEditable: "false"
+  })), isEmbeddableLink && /*#__PURE__*/_react.default.createElement("iframe", {
+    className: "sdoc-video-element",
+    ref: videoRef,
+    title: data.src,
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allowFullScreen: true,
+    src: (0, _helpers.getVideoURL)(data),
+    onLoad: handleVideoLoad
   }))));
 };
 const SdocVideo = (0, _reactI18next.withTranslation)('sdoc-editor')(Video);

package/package.json

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