react-view-files - npm Package Compare versions

Comparing version 1.0.14 to 1.1.0

dist/App.js

@@ -13,26 +13,11 @@ "use strict";
   var files = [{
-    name: "Atlassian Git Cheatsheet",
-    type: "application/pdf",
-    date: "02 Abril 2023",
-    url: require("../src/files/atlassian-git-cheatsheet.pdf")
-  }, {
-    name: "Visao do sistema Plus Car",
-    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    date: "09 Março 2023",
-    url: require("../src/files/Visao Do Sistema Plus Car.docx")
-  }, {
-    name: "Boat 7092",
+    name: "Esfera forma",
     type: "video/mp4",
     date: "27 Novembro 2022",
-    url: require("../src/files/boat-7092.mp4")
+    url: require("../src/files/esfera-forma.mp4")
   }, {
-    name: "Chill Abstract Intention 12099",
-    type: "audio/mpeg",
-    date: "18 Janeiro 2023",
-    url: require("../src/files/chill-abstract-intention-12099.mp3")
-  }, {
-    name: "Nature",
+    name: "Bebida soda vidro",
     type: "video/mp4",
     date: "08 Junho 2022",
-    url: require("../src/files/nature.mp4")
+    url: require("../src/files/bebida-soda-vidro.mp4")
   }, {
@@ -44,2 +29,12 @@ name: "Pianchette Top",
   }, {
+    name: "Rocks 82",
+    type: "image/jpeg",
+    date: "08 Junho 2022",
+    url: require("../src/files/rocks-82.jpeg")
+  }, {
+    name: "Squirrel 82",
+    type: "image/jpeg",
+    date: "08 Junho 2022",
+    url: require("../src/files/squirrel-82.jpeg")
+  }, {
     name: "Git Cheatsheet",
@@ -55,12 +50,18 @@ type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
   }, {
-    name: "Rocks 82",
-    type: "image/jpeg",
-    date: "08 Junho 2022",
-    url: require("../src/files/rocks-82.jpeg")
+    name: "Chill Abstract Intention 12099",
+    type: "audio/mpeg",
+    date: "18 Janeiro 2023",
+    url: require("../src/files/chill-abstract-intention-12099.mp3")
   }, {
-    name: "Squirrel 82",
-    type: "image/jpeg",
-    date: "08 Junho 2022",
-    url: require("../src/files/squirrel-82.jpeg")
+    name: "Atlassian Git Cheatsheet",
+    type: "application/pdf",
+    date: "02 Abril 2023",
+    url: require("../src/files/atlassian-git-cheatsheet.pdf"),
+    id: 1
   }, {
+    name: "Visao do sistema Plus Car",
+    type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    date: "09 Março 2023",
+    url: require("../src/files/Visao Do Sistema Plus Car.docx")
+  }, {
     name: "Atividade 2 - Faxina Financeira",
@@ -85,4 +86,3 @@ type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
       flexDirection: "column",
-      alignItems: "center",
-      background: "violet",
+      background: "#fafafa",
       padding: "50px"
@@ -94,9 +94,17 @@ },
       style: {
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit, minmax(250px, 250px)",
-        gap: "16px"
+        display: "flex",
+        flexWrap: 'wrap',
+        gap: '16px'
       },
       children: files.map(function (file, index) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaView.MediaView, {
-          file: file
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            width: '270px'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaView.MediaView, {
+            file: file,
+            onDelete: function onDelete(value) {
+              return console.log('aqui', value);
+            }
+          }, index)
         }, index);
@@ -103,0 +111,0 @@ })

dist/components/ContentViewer/index.js

@@ -35,3 +35,9 @@ "use strict";
     setFileExtension = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    headerVisible = _useState6[0],
+    setHeaderVisible = _useState6[1]; // Estado para controlar a visibilidade do header
   var containerRef = (0, _react.useRef)(null);
+  var interactionTimer = (0, _react.useRef)(null); // Referência para o timer de interação
+
   var icons = {
@@ -43,4 +49,4 @@ pdf: require("../../img/pdf.png"),
     audio: require("../../img/audio.png"),
-    video: require("../../img/video.png"),
-    txt: require("../../img/txt.png")
+    video: require("../../img/play.png"),
+    txt: require("../../img/news.png")
   };
@@ -55,3 +61,28 @@ var loadFiles = ["pdf", "image", "audio", "video", "word", "txt"];
   }, [type]);
+
+  // Função para ocultar o cabeçalho
+  var hideHeader = function hideHeader() {
+    setHeaderVisible(false);
+  };
+
+  // Função para resetar o timer de interação
+  var resetInteractionTimer = function resetInteractionTimer() {
+    setHeaderVisible(true);
+    if (interactionTimer.current) clearTimeout(interactionTimer.current);
+    interactionTimer.current = setTimeout(hideHeader, 2500);
+  };
+
+  // Adiciona listeners de interação ao montar o componente
   (0, _react.useEffect)(function () {
+    window.addEventListener("mousemove", resetInteractionTimer);
+    window.addEventListener("keydown", resetInteractionTimer);
+
+    // Limpa os listeners ao desmontar o componente
+    return function () {
+      window.removeEventListener("mousemove", resetInteractionTimer);
+      window.removeEventListener("keydown", resetInteractionTimer);
+      if (interactionTimer.current) clearTimeout(interactionTimer.current);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
     window.addEventListener("keydown", function (event) {
@@ -81,3 +112,4 @@ if (event.code === "Escape") {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "".concat(_ContentViewerModule["default"]["container-viewer__header"], " ").concat(!(loadFiles !== null && loadFiles !== void 0 && loadFiles.includes(fileExtension === null || fileExtension === void 0 ? void 0 : fileExtension.type)) ? _ContentViewerModule["default"]["container-viewer__header--dark"] : ""),
+      className: "".concat(_ContentViewerModule["default"]["container-viewer__header"], " ").concat(!(loadFiles !== null && loadFiles !== void 0 && loadFiles.includes(fileExtension === null || fileExtension === void 0 ? void 0 : fileExtension.type)) ? _ContentViewerModule["default"]["container-viewer__header--dark"] : "", " ").concat(headerVisible ? '' : _ContentViewerModule["default"]["container-viewer__header--hidden"]) // Adiciona classe para ocultar
+      ,
       children: [fileExtension !== null && fileExtension !== void 0 && fileExtension.name ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -84,0 +116,0 @@ className: "d-flex align-items-center",

dist/components/DropdownMenuOptions/index.js

@@ -96,3 +96,3 @@ "use strict";
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdMoreVert, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdOutlineMoreHoriz, {
         className: "dmc-dropdown-icon"
@@ -99,0 +99,0 @@ })

dist/components/MediaPreview/index.js

@@ -14,5 +14,6 @@ "use strict";
 var _md = require("react-icons/md");
+var _fa = require("react-icons/fa6");
+var _fi = require("react-icons/fi");
 var _extensions = require("../../extensions");
 var _audioBox = _interopRequireDefault(require("../../img/audio-box.jpg"));
-var _audioBox2 = _interopRequireDefault(require("../../img/audio-box.png"));
 require("./MediaPreview.scss");
@@ -44,10 +45,17 @@ var _jsxRuntime = require("react/jsx-runtime");
 var MediaPreview = exports.MediaPreview = function MediaPreview(_ref) {
-  var file = _ref.file,
-    type = _ref.type,
+  var _ref$file = _ref.file,
+    file = _ref$file === void 0 ? {} : _ref$file,
+    _ref$displayFooter = _ref.displayFooter,
+    displayFooter = _ref$displayFooter === void 0 ? true : _ref$displayFooter,
+    _ref$hideDropdown = _ref.hideDropdown,
+    hideDropdown = _ref$hideDropdown === void 0 ? false : _ref$hideDropdown,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$cover = _ref.cover,
+    cover = _ref$cover === void 0 ? false : _ref$cover,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
     onClick = _ref.onClick,
-    displayFooter = _ref.displayFooter,
-    hideDropdown = _ref.hideDropdown,
-    style = _ref.style,
-    cover = _ref.cover,
-    className = _ref.className;
+    onRename = _ref.onRename,
+    onDelete = _ref.onDelete;
   var _useState = (0, _react.useState)(null),
@@ -91,6 +99,6 @@ _useState2 = _slicedToArray(_useState, 2),
     audio: require("../../img/audio.png"),
-    video: require("../../img/video.png"),
+    video: require("../../img/play.png"),
     word: require("../../img/word.png"),
     pdf: require("../../img/pdf.png"),
-    txt: require("../../img/txt.png")
+    txt: require("../../img/news.png")
   };
@@ -119,5 +127,5 @@ var dropdownOptions = [{
   var backgroundSize = {
-    pdf: '180px',
-    word: '400px',
-    txt: '180px'
+    pdf: '220px',
+    word: '480px',
+    txt: '220px'
   };
@@ -204,3 +212,3 @@ var backgroundPosition = {
             _context.next = 2;
-            return generateVideoThumbnail(file);
+            return generateVideoThumbnail(file, 1.55);
           case 2:
@@ -219,3 +227,3 @@ thumbnail = _context.sent;
   }();
-  var generateVideoThumbnail = function generateVideoThumbnail(file) {
+  var generateVideoThumbnail = function generateVideoThumbnail(file, timeInSeconds) {
     return new Promise(function (resolve) {
@@ -227,12 +235,21 @@ var canvas = document.createElement("canvas");
       video.src = file !== null && file !== void 0 && file.url ? file.url : URL.createObjectURL(file);
-      video.onloadeddata = function () {
-        var ctx = canvas.getContext("2d");
+      video.onloadedmetadata = function () {
+        video.currentTime = timeInSeconds; // Defina o tempo desejado aqui
+      };
+
+      video.onseeked = function () {
+        // Cria o contexto do canvas e desenha o frame atual do vídeo
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
+        var ctx = canvas.getContext("2d");
         ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+        resolve(canvas.toDataURL("image/png"));
         video.pause();
-        return resolve(canvas.toDataURL("image/png"));
       };
+      video.onerror = function () {
+        resolve(null); // Se houver um erro, retorna nulo
+      };
     });
   };
+
   var generatePDFThumbnail = function generatePDFThumbnail(item) {
@@ -438,2 +455,5 @@ var fileReader = new FileReader();
     if (action === "rename") setActiveRename(true);
+    if (action === "delete") {
+      onDelete === null || onDelete === void 0 || onDelete(file);
+    }
   };
@@ -464,5 +484,14 @@ var downloadFile = function downloadFile() {
   };
+  var handleRename = function handleRename() {
+    setSelectedFile(_objectSpread(_objectSpread({}, selectedFile), {}, {
+      name: changeFilename
+    }));
+    setActiveRename(false);
+    onRename === null || onRename === void 0 || onRename(_objectSpread(_objectSpread({}, selectedFile), {}, {
+      name: changeFilename
+    }));
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "media-preview-container ".concat(!displayFooter && 'media-preview-container--default-padding', " ").concat(className, " "),
+      className: "media-preview-container ".concat(!displayFooter && 'media-preview-container__hide-footer', " ").concat(className, " "),
       onDoubleClick: function onDoubleClick() {
@@ -479,3 +508,3 @@ return onClick === null || onClick === void 0 ? void 0 : onClick(selectedFile, fileExtension);
             width: (style === null || style === void 0 ? void 0 : style.width) || "100%",
-            height: (style === null || style === void 0 ? void 0 : style.height) || "200px",
+            height: (style === null || style === void 0 ? void 0 : style.height) || "170px",
             backgroundRepeat: "no-repeat",
@@ -485,8 +514,9 @@ backgroundSize: (style === null || style === void 0 ? void 0 : style.backgroundSize) || backgroundSize[fileExtension === null || fileExtension === void 0 ? void 0 : fileExtension.type] || 'cover',
           },
-          ref: mediaPreviewRef
+          ref: mediaPreviewRef,
+          children: (fileExtension === null || fileExtension === void 0 ? void 0 : fileExtension.type) === 'video' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "video-play-icon",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaPlay, {})
+          })
         }), displayFooter && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "viewer-thumbnail__footer",
-          style: {
-            maxWidth: containerWidth
-          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -498,3 +528,3 @@ className: "d-flex align-items-center",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "file__icon",
+              className: "file-icon",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
@@ -528,7 +558,7 @@ src: icons[fileExtension === null || fileExtension === void 0 ? void 0 : fileExtension.type],
         }), cover && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "cover__preview",
+          className: "cover-preview",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "cover__preview__name",
+            className: "cover-preview__name",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "file__icon",
+              className: "file-icon",
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
@@ -542,3 +572,3 @@ src: icons[fileExtension === null || fileExtension === void 0 ? void 0 : fileExtension.type],
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "file__size",
+            className: "file-size",
             children: (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.size) || fileSize
@@ -548,7 +578,7 @@ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "file__download",
+              className: "file-download",
               onClick: function onClick() {
                 return downloadFile();
               },
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdDownload, {})
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fi.FiDownload, {})
             })
@@ -563,4 +593,4 @@ })]
           width: (style === null || style === void 0 ? void 0 : style.width) || "100%",
-          minHeight: (style === null || style === void 0 ? void 0 : style.height) || "262px",
-          height: (style === null || style === void 0 ? void 0 : style.height) || "262px"
+          minHeight: (style === null || style === void 0 ? void 0 : style.height) || "225px",
+          height: (style === null || style === void 0 ? void 0 : style.height) || "225px"
         },
@@ -596,8 +626,3 @@ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-            onClick: function onClick() {
-              setSelectedFile(_objectSpread(_objectSpread({}, selectedFile), {}, {
-                name: changeFilename
-              }));
-              setActiveRename(false);
-            },
+            onClick: handleRename,
             className: "media-preview-button media-preview-button__save",
@@ -604,0 +629,0 @@ children: "Salvar"

dist/components/MediaView/index.js

@@ -29,3 +29,5 @@ "use strict";
 var MediaView = exports.MediaView = function MediaView(_ref) {
-  var file = _ref.file;
+  var file = _ref.file,
+    _onRename = _ref.onRename,
+    _onDelete = _ref.onDelete;
   var _useState = (0, _react.useState)(null),
@@ -69,5 +71,10 @@ _useState2 = _slicedToArray(_useState, 2),
       file: selectedFile,
-      displayFooter: true,
       onClick: function onClick(value, extension) {
         return handleView(value, extension);
+      },
+      onRename: function onRename(value) {
+        return _onRename === null || _onRename === void 0 ? void 0 : _onRename(value);
+      },
+      onDelete: function onDelete(value) {
+        return _onDelete === null || _onDelete === void 0 ? void 0 : _onDelete(value);
       }
@@ -74,0 +81,0 @@ }), visible && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ContentViewer["default"], {

dist/index.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "MediaPreview", {
-  enumerable: true,
-  get: function get() {
-    return _MediaPreview.MediaPreview;
-  }
-});
-Object.defineProperty(exports, "MediaView", {
-  enumerable: true,
-  get: function get() {
-    return _MediaView.MediaView;
-  }
-});
-var _MediaView = require("./components/MediaView");
-var _MediaPreview = require("./components/MediaPreview");
 var _reactPdf = require("react-pdf");
+var _react = _interopRequireDefault(require("react"));
+var _client = _interopRequireDefault(require("react-dom/client"));
 require("./styles/_styles.scss");
-_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//unpkg.com/pdfjs-dist@".concat(_reactPdf.pdfjs.version, "/build/pdf.worker.min.js");
+var _App = _interopRequireDefault(require("./App"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+// import { MediaView } from "./components/MediaView";
+// import { MediaPreview } from "./components/MediaPreview";
+
+// import "./styles/_styles.scss";
+
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//unpkg.com/pdfjs-dist@".concat(_reactPdf.pdfjs.version, "/build/pdf.worker.min.js");
+
+// export { MediaView, MediaPreview };
+
+var root = _client["default"].createRoot(document.getElementById("app"));
+root.render( /*#__PURE__*/(0, _jsxRuntime.jsx)(_react["default"].StrictMode, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_App["default"], {})
+}));

package.json

 {
-  "name": "react-view-files",
-  "version": "1.0.14",
-  "description": "",
-  "main": "dist/index.js",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "babel src -d dist"
-  },
-  "keywords": [
-    "pdf",
-    "word",
-    "react-view",
-    "vídeo",
-    "vídeo player",
-    "doc viewer"
-  ],
-  "author": "Erivan Roberto",
-  "license": "ISC",
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "dependencies": {
-    "docx-preview": "^0.1.20",
-    "html2canvas": "^1.4.1",
-    "react-icons": "^4.12.0",
-    "react-pdf": "^7.5.1"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
-    "sass": "^1.69.5"
-  }
-}
+    "name": "react-view-files",
+    "version": "1.1.0",
+    "description": "",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "babel src -d dist"
+    },
+    "keywords": [
+        "pdf",
+        "word",
+        "react-view",
+        "vídeo",
+        "vídeo player",
+        "doc viewer"
+    ],
+    "author": "Erivan Roberto",
+    "license": "ISC",
+    "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "dependencies": {
+        "docx-preview": "^0.1.20",
+        "html2canvas": "^1.4.1",
+        "react-icons": "^4.12.0",
+        "react-pdf": "^7.5.1"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.23.0",
+        "@babel/core": "^7.23.3",
+        "@babel/preset-env": "^7.23.3",
+        "@babel/preset-react": "^7.23.3",
+        "sass": "^1.69.5"
+    }
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 7 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13175439

increased by7243.27%

Number of package files

94

increased by129.27%

Lines of code

3067

increased by74.56%

Worsened metrics

Number of medium supply chain risk alerts

12

increased by140%

No dependency changes