napp-wallet-post-feed-test 1.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +157 -0
- package/dist/0ae4e6254fc19607c79e.woff2 +0 -0
- package/dist/1f38a564cd9eae27ebc3.woff2 +0 -0
- package/dist/432.napp.bundle.js +1 -0
- package/dist/661bd6b7245d5205d3e1.woff2 +0 -0
- package/dist/Post.browser.js +24 -0
- package/dist/Post.js +606 -0
- package/dist/components/CodeSplitting.js +88 -0
- package/dist/components/Deeplink/Deeplink.js +813 -0
- package/dist/components/EditPostModal.js +916 -0
- package/dist/components/ErrorBoundary.js +74 -0
- package/dist/components/ExpandedTest/ExpandableText.js +38 -0
- package/dist/components/FilterDropdown.js +71 -0
- package/dist/components/ImagePreloader.js +1194 -0
- package/dist/components/Loader.js +42 -0
- package/dist/components/LoadingSkeletons.js +978 -0
- package/dist/components/MediaRenderer.js +759 -0
- package/dist/components/MemoryManager.js +302 -0
- package/dist/components/PostCard.js +446 -0
- package/dist/components/PostViews.js +247 -0
- package/dist/components/Postfeed.js +251 -0
- package/dist/components/Svgloader.js +231 -0
- package/dist/components/UploadPostModal.js +1352 -0
- package/dist/components/VideoPlayer.js +1304 -0
- package/dist/components/ViewPostModal/MediaPreloadManager.js +379 -0
- package/dist/components/ViewPostModal/README.md +164 -0
- package/dist/components/ViewPostModal/ShareModal.js +96 -0
- package/dist/components/ViewPostModal/VirtualPost.js +248 -0
- package/dist/components/ViewPostModal/useBodyScrollLock.js +42 -0
- package/dist/components/ViewPostModal/useDeviceDetection.js +38 -0
- package/dist/components/ViewPostModal/useFullscreenManager.js +43 -0
- package/dist/components/ViewPostModal/useNavigationManager.js +185 -0
- package/dist/components/ViewPostModal/usePostDataManager.js +143 -0
- package/dist/components/ViewPostModal/usePreloadManager.js +97 -0
- package/dist/components/ViewPostModal/useShareManager.js +76 -0
- package/dist/components/ViewPostModal.js +552 -0
- package/dist/components/VirtualPostFeed.js +475 -0
- package/dist/components/hooks/useFeedVisibility.js +72 -0
- package/dist/components/hooks/useIntersectionObserver.js +54 -0
- package/dist/components/hooks/usePerformanceMonitor.js +159 -0
- package/dist/components/hooks/usePostApi.js +381 -0
- package/dist/components/hooks/usePostState.js +116 -0
- package/dist/components/useImagePreloading.js +231 -0
- package/dist/e7461d69dbbff1310a5c.woff2 +0 -0
- package/dist/helper/Helper.js +504 -0
- package/dist/index.browser.js +5 -0
- package/dist/index.js +3 -0
- package/dist/napp.bundle.js +2 -0
- package/dist/napp.bundle.js.LICENSE.txt +733 -0
- package/dist/style/post.css +5751 -0
- package/dist/style/post.css.map +1 -0
- package/dist/style/post.purged.css +3236 -0
- package/dist/style/post.scss +5910 -0
- package/dist/utils/bootstrap.js +4 -0
- package/dist/utils/ffmpegLoader.js +40 -0
- package/package.json +70 -0
package/README.md
ADDED
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
# Exarcha Wallet Post Feed NAPP
|
|
2
|
+
|
|
3
|
+
A powerful React component for wallet-based post feeds with advanced features including virtual scrolling, mobile optimization, memory management, and lazy loading.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🚀 **Virtual Scrolling** - Optimized performance for large post feeds
|
|
8
|
+
- 📱 **Mobile Optimized** - Enhanced performance and memory management for mobile devices
|
|
9
|
+
- 🔄 **Infinite Scroll** - Seamless loading of additional posts
|
|
10
|
+
- 🎨 **Modern UI** - Beautiful, responsive design with smooth animations
|
|
11
|
+
- 🧠 **Memory Management** - Automatic cleanup and optimization
|
|
12
|
+
- ⚡ **Lazy Loading** - Code splitting for faster initial load times
|
|
13
|
+
- 🎯 **Error Boundaries** - Robust error handling
|
|
14
|
+
- 🔧 **Highly Configurable** - Customizable parameters and behavior
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install exarcha-wallet-post-feed-napp
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Dependencies
|
|
23
|
+
|
|
24
|
+
This package requires the following peer dependencies:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install react react-dom
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
The package also uses these dependencies (automatically installed):
|
|
31
|
+
|
|
32
|
+
- `prop-types` - React prop validation
|
|
33
|
+
- `react-toastify` - Toast notifications
|
|
34
|
+
- `react-infinite-scroll-component` - Infinite scrolling
|
|
35
|
+
- `@fortawesome/fontawesome-svg-core` - FontAwesome icons
|
|
36
|
+
- `@fortawesome/free-solid-svg-icons` - Solid icons
|
|
37
|
+
- `@fortawesome/react-fontawesome` - React FontAwesome component
|
|
38
|
+
- `axios` - HTTP client
|
|
39
|
+
- `bootstrap` - CSS framework
|
|
40
|
+
- `framer-motion` - Animation library
|
|
41
|
+
- `hls.js` - Video streaming
|
|
42
|
+
- `jquery` - DOM manipulation
|
|
43
|
+
- `react-bootstrap` - Bootstrap React components
|
|
44
|
+
- `sweetalert2` - Alert dialogs
|
|
45
|
+
|
|
46
|
+
## Usage
|
|
47
|
+
|
|
48
|
+
### Basic Usage
|
|
49
|
+
|
|
50
|
+
```javascript
|
|
51
|
+
import { useState } from 'react'
|
|
52
|
+
import { Post } from 'exarcha-wallet-post-feed-napp';
|
|
53
|
+
|
|
54
|
+
function App() {
|
|
55
|
+
const [params, setParams] = useState({
|
|
56
|
+
pmc: "ULSr3DPV+vkFmKKiVbQLZqmyBl36ld3WB6FN56x02boccLDoevDg6oqL6ae20yoMvQyqnPj6riZMst9nOy9NkD6XcJDqjW+qATRARfo2XaJffte7NfiON1p2hU4ph7K/fi3UqWvsRo/4rhqn80kPFSWTjWK5HEbpTd1qsXB4/Qs75xVFnZGankye/voPQbCce17ODLcV25SJ81FKoTUW51YWFi1W3CpLWEoNWm3JexF5BL0C7Z2hI+hsvAOOQf2Moc3aaMZct59LaymFRRRQCx+2b0Hdc8yeRxOpYvXB+t9BnD8/ykZ4CcWhFiQkZ5AyFZLL1xQCW6/eXHytDh7GSJ26CVhGcikKLBonBQ6nhU=",
|
|
57
|
+
walletLoginToken: "FC8CF595-0FE3-4E17-929F-52F2FD9BA8B3",
|
|
58
|
+
entityLoginToken: "CCCFD167-65BA-433C-82A6-46341F103877",
|
|
59
|
+
pageRow: 10,
|
|
60
|
+
EndPointToCall: 'GetPostsForNotifications',
|
|
61
|
+
GUIDToUse: '11f609aa-9e08-4060-9c01-4bc91be756ed',
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<>
|
|
66
|
+
<Post parameters={params} />
|
|
67
|
+
</>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default App
|
|
72
|
+
|
|
73
|
+
### Parameters Object
|
|
74
|
+
|
|
75
|
+
The `parameters` prop is an object containing the following properties:
|
|
76
|
+
|
|
77
|
+
| Property | Type | Description | Required |
|
|
78
|
+
|----------|------|-------------|----------|
|
|
79
|
+
| `pmc` | string | Encrypted wallet credentials | ✅ |
|
|
80
|
+
| `walletLoginToken` | string | Wallet authentication token | ✅ |
|
|
81
|
+
| `entityLoginToken` | string | Entity authentication token | ✅ |
|
|
82
|
+
| `pageRow` | number | Number of posts per page | ✅ |
|
|
83
|
+
| `EndPointToCall` | string | API endpoint for fetching posts | ✅ |
|
|
84
|
+
| `GUIDToUse` | string | Unique identifier for the request | ✅ |
|
|
85
|
+
|
|
86
|
+
## Features Overview
|
|
87
|
+
|
|
88
|
+
### Virtual Scrolling
|
|
89
|
+
- Optimized rendering for large datasets
|
|
90
|
+
- Smooth scrolling performance
|
|
91
|
+
- Memory efficient post management
|
|
92
|
+
|
|
93
|
+
### Mobile Optimization
|
|
94
|
+
- Automatic mobile device detection
|
|
95
|
+
- Optimized data loading strategies
|
|
96
|
+
- Memory cleanup for mobile devices
|
|
97
|
+
|
|
98
|
+
### Advanced UI Components
|
|
99
|
+
- **UploadPostModal** - Create new posts
|
|
100
|
+
- **ViewPostModal** - View posts in full-screen
|
|
101
|
+
- **EditPostModal** - Edit existing posts
|
|
102
|
+
- **Loading Skeletons** - Beautiful loading states
|
|
103
|
+
- **Error Boundaries** - Graceful error handling
|
|
104
|
+
|
|
105
|
+
### Memory Management
|
|
106
|
+
- Automatic cleanup on component unmount
|
|
107
|
+
- Mobile-specific memory optimization
|
|
108
|
+
- Efficient data deduplication
|
|
109
|
+
|
|
110
|
+
## Styling
|
|
111
|
+
|
|
112
|
+
The component includes its own CSS styles. Make sure to import the required CSS:
|
|
113
|
+
|
|
114
|
+
```javascript
|
|
115
|
+
import 'exarcha-wallet-post-feed-napp/dist/style/post.css';
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
Or if using the source directly:
|
|
119
|
+
|
|
120
|
+
```javascript
|
|
121
|
+
import 'exarcha-wallet-post-feed-napp/src/style/post.css';
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## Browser Support
|
|
125
|
+
|
|
126
|
+
- Chrome (latest)
|
|
127
|
+
- Firefox (latest)
|
|
128
|
+
- Safari (latest)
|
|
129
|
+
- Edge (latest)
|
|
130
|
+
- Internet Explorer 11+
|
|
131
|
+
|
|
132
|
+
## Performance
|
|
133
|
+
|
|
134
|
+
- **Bundle Size**: ~143.5 kB (compressed)
|
|
135
|
+
- **Initial Load**: Optimized with code splitting
|
|
136
|
+
- **Memory Usage**: Automatic cleanup and optimization
|
|
137
|
+
- **Mobile Performance**: Enhanced for mobile devices
|
|
138
|
+
|
|
139
|
+
## Contributing
|
|
140
|
+
|
|
141
|
+
1. Fork the repository
|
|
142
|
+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
143
|
+
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
|
|
144
|
+
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
145
|
+
5. Open a Pull Request
|
|
146
|
+
|
|
147
|
+
## License
|
|
148
|
+
|
|
149
|
+
ISC License
|
|
150
|
+
|
|
151
|
+
## Support
|
|
152
|
+
|
|
153
|
+
For support, please open an issue on the GitHub repository or contact the maintainers.
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
Made with ❤️ by Exarcha
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(this.webpackChunkNAPP=this.webpackChunkNAPP||[]).push([[432],{7432(e,t,n){n.r(t),n.d(t,{default:()=>s});var l=n(4883),o=n.n(l),r=n(5556),a=n.n(r),i=o().memo(function(e){var t=e.selectedFilter,n=e.onSelect,l=e.toggle,r=e.onToggle;return o().createElement("div",{className:"filter-icon-wrapper pb-2"},o().createElement("div",{className:"text-end pe-auto"},o().createElement("div",{className:"post-dropdown-actions filter-dropdown",tabIndex:0},o().createElement("button",{className:"filter-text d-inline-flex align-items-center gap-1 btn btn-link",onClick:r,"aria-haspopup":"listbox","aria-expanded":l,"aria-label":"Toggle filter dropdown",type:"button"},o().createElement("i",{className:"fas fa-filter"}),o().createElement("span",{className:"m-0"},"Filter Post")),o().createElement("ul",{className:"post-menu-dropdown filter-dropdown-menu ".concat(l?"d-block":"d-none"),role:"listbox"},o().createElement("li",{onClick:function(){return n("wallet")},"aria-selected":"wallet"===t,role:"option",tabIndex:0,onKeyPress:function(e){return("Enter"===e.key||" "===e.key)&&n("wallet")}},"Posts From This Wallet"),o().createElement("li",{onClick:function(){return n("token")},"aria-selected":"token"===t,role:"option",tabIndex:0,onKeyPress:function(e){return("Enter"===e.key||" "===e.key)&&n("token")}},"Posts From Tokens")))))});i.propTypes={selectedFilter:a().string.isRequired,onSelect:a().func.isRequired,toggle:a().bool.isRequired,onToggle:a().func.isRequired};const s=i}}]);
|
|
Binary file
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// Browser-compatible version of Post.js
|
|
2
|
+
// This is a copy of Post.js with browser-compatible imports
|
|
3
|
+
|
|
4
|
+
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
5
|
+
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { if (r) i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n;else { var o = function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); }; o("next", 0), o("throw", 1, o("return", 2); } }, _regeneratorDefine2(e, r, n, t); }
|
|
6
|
+
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
|
|
7
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
8
|
+
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
9
|
+
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
10
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
11
|
+
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
12
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
13
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
14
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
15
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
16
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
17
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
18
|
+
import React, { useState, useEffect, useCallback, useMemo, memo, useRef } from "react";
|
|
19
|
+
import PropTypes from "prop-types";
|
|
20
|
+
import "./style/post.scss";
|
|
21
|
+
// Removed bootstrap imports - loaded from CDN in HTML
|
|
22
|
+
// Removed react-toastify imports - will be handled separately
|
|
23
|
+
import { newwalletpostapi } from "./helper/Helper";
|
|
24
|
+
// Removed react-toastify imports for browser compatibility
|