show video thumbnail (#7639)

* show video thumbnail

* check preview permission

---------

Co-authored-by: zhouwenxuan <[email protected]>

Author: Aries-0331

frontend/src/metadata/context.js

@@ -7,6 +7,7 @@ import {
 import LocalStorage from './utils/local-storage';
 import EventBus from '../components/common/event-bus';
 import { username, lang } from '../utils/constants';
+import { Utils } from '../utils/utils';
 
 class Context {
 
@@ -41,6 +42,8 @@ class Context {
     this.eventBus = eventBus;
 
     this.permission = repoInfo.permission !== 'admin' && repoInfo.permission !== 'rw' ? 'r' : 'rw';
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(repoInfo.permission);
+    this.customPermission = isCustomPermission ? customPermission : null;
 
     this.hasInit = true;
   }
@@ -187,6 +190,14 @@ class Context {
     return true;
   };
 
+  canPreview = () => {
+    if (this.customPermission) {
+      const { preview, modify } = this.customPermission.permission;
+      return preview || modify;
+    }
+    return true;
+  };
+
   restoreRows = () => {
     // todo
   };

frontend/src/metadata/utils/file.js

@@ -101,7 +101,6 @@ export const openFile = (repoID, record, _openImage = () => {}) => {
 };
 
 export const openInNewTab = (repoID, record) => {
-  if (!record) return;
   const isDir = checkIsDir(record);
   const fileName = getFileNameFromRecord(record);
   const parentDir = _getParentDir(record);

frontend/src/metadata/views/gallery/main.js

@@ -8,12 +8,13 @@ import GalleryContextmenu from './context-menu';
 import { useMetadataView } from '../../hooks/metadata-view';
 import { Utils } from '../../../utils/utils';
 import { getDateDisplayString, getFileMTimeFromRecord, getFileNameFromRecord, getParentDirFromRecord, getRecordIdFromRecord } from '../../utils/cell';
-import { siteRoot, fileServerRoot, thumbnailSizeForGrid, thumbnailSizeForOriginal, thumbnailDefaultSize } from '../../../utils/constants';
+import { siteRoot, fileServerRoot, thumbnailSizeForGrid, thumbnailSizeForOriginal, thumbnailDefaultSize, enableVideoThumbnail } from '../../../utils/constants';
 import { EVENT_BUS_TYPE, GALLERY_DATE_MODE, DATE_TAG_HEIGHT, STORAGE_GALLERY_DATE_MODE_KEY, STORAGE_GALLERY_ZOOM_GEAR_KEY, VIEW_TYPE_DEFAULT_SORTS, VIEW_TYPE } from '../../constants';
 import { getRowById } from '../../../components/sf-table/utils/table';
 import { getEventClassName } from '../../../utils/dom';
 import { getColumns, getImageSize, getRowHeight } from './utils';
 import ObjectUtils from '../../../utils/object';
+import { openFile } from '../../utils/file';
 
 import './index.css';
 
@@ -36,13 +37,17 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
 
   const { repoID, updateCurrentDirent } = useMetadataView();
   const repoInfo = window.sfMetadataContext.getSetting('repoInfo');
+  const canPreview = window.sfMetadataContext.canPreview();
 
   const images = useMemo(() => {
     if (isFirstLoading) return [];
     if (!Array.isArray(metadata.rows) || metadata.rows.length === 0) return [];
     const firstSort = metadata.view.sorts[0] || VIEW_TYPE_DEFAULT_SORTS[VIEW_TYPE.GALLERY];
     return metadata.rows
-      .filter(record => Utils.imageCheck(getFileNameFromRecord(record)))
+      .filter(record => {
+        const fileName = getFileNameFromRecord(record);
+        return Utils.imageCheck(fileName) || Utils.videoCheck(fileName);
+      })
       .map(record => {
         const id = getRecordIdFromRecord(record);
         const fileName = getFileNameFromRecord(record);
@@ -59,13 +64,32 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
         const year = date.slice(0, 4);
         const month = date.slice(0, -3);
         const day = date.slice(-2,);
+
+        const isVideo = Utils.videoCheck(fileName);
+        const useFallbackIcon = isVideo && !enableVideoThumbnail;
+
+        const baseThumbnailPath = `${siteRoot}thumbnail/${repoID}`;
+        let src = useFallbackIcon
+          ? Utils.getFileIconUrl(fileName)
+          : `${baseThumbnailPath}/${size}${path}`;
+
+        let thumbnail = useFallbackIcon
+          ? Utils.getFileIconUrl(fileName)
+          : `${baseThumbnailPath}/${thumbnailSizeForOriginal}${path}?mtime=${mtime}`;
+
+        if (!canPreview) {
+          const fileIcon = Utils.getFileIconUrl(fileName);
+          src = fileIcon;
+          thumbnail = fileIcon;
+        }
+
         return {
           id,
           name: fileName,
           parentDir,
           url: `${siteRoot}lib/${repoID}/file${path}`,
-          src: `${siteRoot}thumbnail/${repoID}/${size}${path}`,
-          thumbnail: `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}?mtime=${mtime}`,
+          src,
+          thumbnail,
           downloadURL: `${fileServerRoot}repos/${repoID}/files${path}?op=download`,
           year,
           month,
@@ -192,10 +216,14 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord,
 
   const handleDoubleClick = useCallback((event, image) => {
     event.preventDefault();
-    const index = images.findIndex(item => item.id === image.id);
-    setImageIndex(index);
-    setIsImagePopupOpen(true);
-  }, [images]);
+    const record = getRowById(metadata, image.id);
+    if (!canPreview) return;
+    openFile(repoID, record, () => {
+      const index = images.findIndex(item => item.id === image.id);
+      setImageIndex(index);
+      setIsImagePopupOpen(true);
+    });
+  }, [repoID, metadata, images]);
 
   const handleContextMenu = useCallback((event, image) => {
     event.preventDefault();

frontend/src/metadata/views/kanban/boards/board/card/index.js

@@ -31,6 +31,8 @@ const Card = ({
     if (titleColumn?.type !== CellType.FILE_NAME) return;
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
+    const canPreview = window.sfMetadataContext.canPreview();
+    if (!canPreview) return;
     onOpenFile(record);
   }, [titleColumn, record, onOpenFile]);
 

frontend/src/metadata/views/kanban/boards/index.js

@@ -182,6 +182,8 @@ const Boards = ({ modifyRecord, deleteRecords, modifyColumnData, onCloseSettings
 
   const onOpenFile = useCallback((record) => {
     const repoID = window.sfMetadataContext.getSetting('repoID');
+    const canPreview = window.sfMetadataContext.canPreview();
+    if (!canPreview) return;
     openFile(repoID, record, () => {
       currentImageRef.current = record;
       setImagePreviewerVisible(true);

frontend/src/metadata/views/table/masks/interaction-masks/index.js

@@ -451,6 +451,7 @@ class InteractionMasks extends React.Component {
   };
 
   handleSpaceKeyDown = (e) => {
+    e.preventDefault();
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
     const repoID = window.sfMetadataContext.getSetting('repoID');

frontend/src/metadata/views/table/table-main/records/record/cell/index.js

@@ -154,6 +154,8 @@ const Cell = React.memo(({
     event.nativeEvent.stopImmediatePropagation();
     if (!isCellSelected) return;
     const repoID = window.sfMetadataContext.getSetting('repoID');
+    const canPreview = window.sfMetadataContext.canPreview();
+    if (!canPreview) return;
     openFile(repoID, record, () => {
       window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.OPEN_EDITOR, EDITOR_TYPE.PREVIEWER);
     });

frontend/src/metadata/views/table/table-main/records/record/cell/operation-btn/file-name-operation-btn/index.js

@@ -22,6 +22,8 @@ const FileNameOperationBtn = ({ column, record, ...props }) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     const repoID = window.sfMetadataContext.getSetting('repoID');
+    const canPreview = window.sfMetadataContext.canPreview();
+    if (!canPreview) return;
     openFile(repoID, record, () => {
       window.sfMetadataContext.eventBus.dispatch(METADATA_EVENT_BUS_TYPE.OPEN_EDITOR, EDITOR_TYPE.PREVIEWER);
     });

frontend/src/tag/context.js

@@ -2,6 +2,7 @@ import tagsAPI from './api';
 import LocalStorage from '../metadata/utils/local-storage';
 import EventBus from '../components/common/event-bus';
 import { username, lang } from '../utils/constants';
+import { Utils } from '../utils/utils';
 
 class Context {
 
@@ -36,6 +37,8 @@ class Context {
     this.eventBus = eventBus;
 
     this.permission = repoInfo.permission !== 'admin' && repoInfo.permission !== 'rw' ? 'r' : 'rw';
+    const { isCustomPermission, customPermission } = Utils.getUserPermission(repoInfo.permission);
+    this.customPermission = isCustomPermission ? customPermission : null;
 
     this.hasInit = true;
   }
@@ -72,6 +75,14 @@ class Context {
     return true;
   };
 
+  canPreview = () => {
+    if (this.customPermission) {
+      const { preview, modify } = this.customPermission.permission;
+      return preview || modify;
+    }
+    return true;
+  };
+
   canAddTag = () => {
     if (this.permission === 'r') return false;
     return true;

frontend/src/tag/views/tag-files/tag-file/index.js

@@ -76,7 +76,8 @@ const TagFile = ({ isSelected, repoID, file, tagsData, onSelectFile, openImagePr
 
   const handelClickFileName = useCallback((event) => {
     event.preventDefault();
-    if (isRenameing) return;
+    const canPreview = window.sfTagsDataContext.canPreview();
+    if (isRenameing || !canPreview) return;
     openFile(repoID, file, () => {
       openImagePreview(file);
     });