@tradly/asset 1.0.3 → 1.0.5

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.
Files changed (33) hide show
  1. package/dist/components/FileUpload.js +163 -0
  2. package/dist/components/Icons.js +39 -0
  3. package/dist/components/ImagesSkeleton.js +21 -0
  4. package/dist/components/MediaGallery.js +153 -0
  5. package/dist/components/MediaPopup.js +104 -0
  6. package/dist/components/MediaTab.js +141 -0
  7. package/dist/components/Pagination.js +141 -0
  8. package/dist/components/VideosGallery.js +153 -0
  9. package/dist/esm/components/FileUpload.js +155 -0
  10. package/dist/esm/components/Icons.js +32 -0
  11. package/dist/esm/components/ImagesSkeleton.js +14 -0
  12. package/dist/esm/components/MediaGallery.js +144 -0
  13. package/dist/esm/components/MediaPopup.js +97 -0
  14. package/dist/esm/components/MediaTab.js +132 -0
  15. package/dist/esm/components/Pagination.js +134 -0
  16. package/dist/esm/components/VideosGallery.js +144 -0
  17. package/{index.js → dist/esm/index.js} +6 -6
  18. package/dist/esm/services/apiService.js +373 -0
  19. package/dist/index.js +60 -0
  20. package/dist/services/apiService.js +379 -0
  21. package/package.json +17 -6
  22. package/EXAMPLE_USAGE.jsx +0 -128
  23. package/MIGRATION_GUIDE.md +0 -249
  24. package/STYLING_GUIDE.md +0 -219
  25. package/src/components/FileUpload.jsx +0 -114
  26. package/src/components/Icons.jsx +0 -23
  27. package/src/components/ImagesSkeleton.jsx +0 -18
  28. package/src/components/MediaGallery.jsx +0 -125
  29. package/src/components/MediaPopup.jsx +0 -101
  30. package/src/components/MediaTab.jsx +0 -152
  31. package/src/components/Pagination.jsx +0 -175
  32. package/src/components/VideosGallery.jsx +0 -121
  33. package/src/services/apiService.js +0 -270
@@ -0,0 +1,379 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _axios = _interopRequireDefault(require("axios"));
8
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
9
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
10
+ 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 }; })(); }
11
+ function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
12
+ 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); }
13
+ 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); }); }; }
14
+ function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
15
+ function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
16
+ function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
17
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
18
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
19
+ /**
20
+ * Get the API base URL based on environment
21
+ * @returns {string} API base URL
22
+ */
23
+ var getApiBaseUrl = function getApiBaseUrl(environment) {
24
+ // Check if environment includes 'dev' (case insensitive)
25
+ var isDev = environment && String(environment).toLowerCase().includes('dev');
26
+ return isDev ? 'https://api.dev.tradly.app' : 'https://api.tradly.app';
27
+ };
28
+
29
+ /**
30
+ * API Service for Media Gallery
31
+ * Handles all API calls with Tradly authentication
32
+ * Includes full upload logic using direct API call to S3 signed URL endpoint
33
+ */
34
+ var MediaApiService = /*#__PURE__*/function () {
35
+ function MediaApiService() {
36
+ var _process$env;
37
+ var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
38
+ _classCallCheck(this, MediaApiService);
39
+ this.authKey = config.authKey || '';
40
+ // Auto-detect API base URL from environment, or use provided one
41
+ var environment = config.environment || typeof process !== 'undefined' && ((_process$env = process.env) === null || _process$env === void 0 ? void 0 : _process$env.ENVIRONMENT) || '';
42
+ this.apiBaseUrl = config.apiBaseUrl || getApiBaseUrl(environment);
43
+ this.bearerToken = config.bearerToken || ''; // Bearer token for Authorization header
44
+ this.onError = config.onError || null;
45
+ }
46
+
47
+ /**
48
+ * Set authentication key
49
+ */
50
+ return _createClass(MediaApiService, [{
51
+ key: "setAuthKey",
52
+ value: function setAuthKey(authKey) {
53
+ this.authKey = authKey;
54
+ }
55
+
56
+ /**
57
+ * Set API base URL (used for all API calls)
58
+ */
59
+ }, {
60
+ key: "setApiBaseUrl",
61
+ value: function setApiBaseUrl(apiBaseUrl) {
62
+ this.apiBaseUrl = apiBaseUrl;
63
+ }
64
+
65
+ /**
66
+ * Set Bearer token for Authorization header
67
+ */
68
+ }, {
69
+ key: "setBearerToken",
70
+ value: function setBearerToken(bearerToken) {
71
+ this.bearerToken = bearerToken;
72
+ }
73
+
74
+ /**
75
+ * Make API call with authentication to Tradly API
76
+ */
77
+ }, {
78
+ key: "apiCall",
79
+ value: (function () {
80
+ var _apiCall = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(_ref) {
81
+ var method, path, data, params, setISLoading, isLoading, headers, response, _t;
82
+ return _regenerator().w(function (_context) {
83
+ while (1) switch (_context.p = _context.n) {
84
+ case 0:
85
+ method = _ref.method, path = _ref.path, data = _ref.data, params = _ref.params, setISLoading = _ref.setISLoading, isLoading = _ref.isLoading;
86
+ if (setISLoading) setISLoading(true);
87
+ _context.p = 1;
88
+ headers = {
89
+ 'Content-Type': 'application/json'
90
+ }; // Add auth key to headers if provided (X-Auth-Key header)
91
+ if (this.authKey) {
92
+ headers['X-Auth-Key'] = this.authKey;
93
+ }
94
+
95
+ // Add Bearer token if provided
96
+ if (this.bearerToken) {
97
+ headers['Authorization'] = "Bearer ".concat(this.bearerToken);
98
+ }
99
+ _context.n = 2;
100
+ return (0, _axios.default)({
101
+ method: method,
102
+ url: "".concat(this.apiBaseUrl).concat(path),
103
+ headers: headers,
104
+ data: data,
105
+ params: params
106
+ });
107
+ case 2:
108
+ response = _context.v;
109
+ if (setISLoading) setISLoading(false);
110
+ return _context.a(2, response.data);
111
+ case 3:
112
+ _context.p = 3;
113
+ _t = _context.v;
114
+ if (setISLoading) setISLoading(false);
115
+ if (this.onError) {
116
+ this.onError(_t);
117
+ }
118
+ throw _t;
119
+ case 4:
120
+ return _context.a(2);
121
+ }
122
+ }, _callee, this, [[1, 3]]);
123
+ }));
124
+ function apiCall(_x) {
125
+ return _apiCall.apply(this, arguments);
126
+ }
127
+ return apiCall;
128
+ }()
129
+ /**
130
+ * Fetch media items from Tradly API
131
+ * GET /v1/media?page=1&parent=0&mime_type=...
132
+ */
133
+ )
134
+ }, {
135
+ key: "fetchMedia",
136
+ value: (function () {
137
+ var _fetchMedia = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(_ref2) {
138
+ var mimeTypes, _ref2$page, page, _ref2$parent, parent, setISLoading, isLoading, params, mimeTypeParam;
139
+ return _regenerator().w(function (_context2) {
140
+ while (1) switch (_context2.n) {
141
+ case 0:
142
+ mimeTypes = _ref2.mimeTypes, _ref2$page = _ref2.page, page = _ref2$page === void 0 ? 1 : _ref2$page, _ref2$parent = _ref2.parent, parent = _ref2$parent === void 0 ? 0 : _ref2$parent, setISLoading = _ref2.setISLoading, isLoading = _ref2.isLoading;
143
+ params = {
144
+ page: page,
145
+ parent: parent
146
+ }; // Add mime_type to params if provided
147
+ if (mimeTypes) {
148
+ mimeTypeParam = Array.isArray(mimeTypes) ? mimeTypes.join(',') : mimeTypes;
149
+ params.mime_type = mimeTypeParam;
150
+ }
151
+ return _context2.a(2, this.apiCall({
152
+ method: 'GET',
153
+ path: '/v1/media',
154
+ params: params,
155
+ setISLoading: setISLoading,
156
+ isLoading: isLoading
157
+ }));
158
+ }
159
+ }, _callee2, this);
160
+ }));
161
+ function fetchMedia(_x2) {
162
+ return _fetchMedia.apply(this, arguments);
163
+ }
164
+ return fetchMedia;
165
+ }()
166
+ /**
167
+ * Get S3 signed upload URLs from API
168
+ */
169
+ )
170
+ }, {
171
+ key: "getS3SignedUrls",
172
+ value: (function () {
173
+ var _getS3SignedUrls = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(files, authKey) {
174
+ var auth_key, fileData, headers, _response$data$data, response, _t2;
175
+ return _regenerator().w(function (_context3) {
176
+ while (1) switch (_context3.p = _context3.n) {
177
+ case 0:
178
+ auth_key = authKey || this.authKey;
179
+ if (auth_key) {
180
+ _context3.n = 1;
181
+ break;
182
+ }
183
+ throw new Error('Authentication key is required for upload');
184
+ case 1:
185
+ if (this.apiBaseUrl) {
186
+ _context3.n = 2;
187
+ break;
188
+ }
189
+ throw new Error('API base URL is required. The package automatically detects it from ENVIRONMENT, or you can set apiBaseUrl in config: new MediaApiService({ apiBaseUrl: "https://api.tradly.app" })');
190
+ case 2:
191
+ // Prepare file data
192
+ fileData = files.map(function (file) {
193
+ return {
194
+ name: file.name.replace(/\s/g, '-'),
195
+ type: file.type
196
+ };
197
+ }); // Prepare headers
198
+ headers = {
199
+ 'Content-Type': 'application/json',
200
+ 'X-Auth-Key': auth_key // Capital X for Tradly API
201
+ }; // Add Bearer token if provided
202
+
203
+ if (this.bearerToken) {
204
+ headers['Authorization'] = "Bearer ".concat(this.bearerToken);
205
+ }
206
+ _context3.p = 3;
207
+ _context3.n = 4;
208
+ return (0, _axios.default)({
209
+ method: 'POST',
210
+ url: "".concat(this.apiBaseUrl, "/v1/utils/S3signedUploadURL"),
211
+ headers: headers,
212
+ data: {
213
+ files: fileData
214
+ }
215
+ });
216
+ case 4:
217
+ response = _context3.v;
218
+ if (!response.data.error) {
219
+ _context3.n = 5;
220
+ break;
221
+ }
222
+ throw new Error(response.data.error);
223
+ case 5:
224
+ return _context3.a(2, response.data.result || ((_response$data$data = response.data.data) === null || _response$data$data === void 0 ? void 0 : _response$data$data.result) || response.data);
225
+ case 6:
226
+ _context3.p = 6;
227
+ _t2 = _context3.v;
228
+ console.error('Error getting S3 signed URLs:', _t2);
229
+ if (this.onError) {
230
+ this.onError(_t2);
231
+ }
232
+ throw _t2;
233
+ case 7:
234
+ return _context3.a(2);
235
+ }
236
+ }, _callee3, this, [[3, 6]]);
237
+ }));
238
+ function getS3SignedUrls(_x3, _x4) {
239
+ return _getS3SignedUrls.apply(this, arguments);
240
+ }
241
+ return getS3SignedUrls;
242
+ }()
243
+ /**
244
+ * Upload media files using direct API call
245
+ * This includes the full upload logic: get S3 signed URLs -> upload to S3 -> save to media API
246
+ */
247
+ )
248
+ }, {
249
+ key: "uploadMedia",
250
+ value: (function () {
251
+ var _uploadMedia = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(files, authKey) {
252
+ var auth_key, all_files_uri, upload_files, upload_full_files, i, element, file_data, responseFiles, index, path, fileURI, res, mediaData, _t3, _t4;
253
+ return _regenerator().w(function (_context4) {
254
+ while (1) switch (_context4.p = _context4.n) {
255
+ case 0:
256
+ auth_key = authKey || this.authKey;
257
+ if (auth_key) {
258
+ _context4.n = 1;
259
+ break;
260
+ }
261
+ throw new Error('Authentication key is required for upload');
262
+ case 1:
263
+ all_files_uri = [];
264
+ upload_files = [];
265
+ upload_full_files = []; // Process all files
266
+ i = 0;
267
+ case 2:
268
+ if (!(i < files.length)) {
269
+ _context4.n = 14;
270
+ break;
271
+ }
272
+ element = files[i]; // Check if file already has a path (from previous upload)
273
+ if (element.full_file === null && element.path) {
274
+ all_files_uri.push(element.path);
275
+ } else {
276
+ // Prepare file data for upload
277
+ file_data = {
278
+ name: element.name.replace(/\s/g, '-'),
279
+ type: element.type
280
+ };
281
+ upload_files.push(file_data);
282
+ upload_full_files.push(element);
283
+ }
284
+
285
+ // Upload files when we've processed all files
286
+ if (!(files.length === i + 1 && upload_files.length > 0)) {
287
+ _context4.n = 13;
288
+ break;
289
+ }
290
+ _context4.p = 3;
291
+ _context4.n = 4;
292
+ return this.getS3SignedUrls(upload_full_files, auth_key);
293
+ case 4:
294
+ responseFiles = _context4.v;
295
+ index = 0;
296
+ case 5:
297
+ if (!(index < responseFiles.length)) {
298
+ _context4.n = 10;
299
+ break;
300
+ }
301
+ path = responseFiles[index].signedUrl;
302
+ fileURI = responseFiles[index].fileUri;
303
+ _context4.p = 6;
304
+ _context4.n = 7;
305
+ return fetch(path, {
306
+ method: 'PUT',
307
+ headers: {
308
+ ContentType: upload_files[index].type
309
+ },
310
+ body: upload_full_files[index]
311
+ });
312
+ case 7:
313
+ res = _context4.v;
314
+ if (res.ok) {
315
+ all_files_uri.push(fileURI);
316
+ } else {
317
+ console.error("Failed to upload file ".concat(index + 1));
318
+ }
319
+ _context4.n = 9;
320
+ break;
321
+ case 8:
322
+ _context4.p = 8;
323
+ _t3 = _context4.v;
324
+ console.error("Error uploading file ".concat(index + 1, ":"), _t3);
325
+ case 9:
326
+ index++;
327
+ _context4.n = 5;
328
+ break;
329
+ case 10:
330
+ if (!(all_files_uri.length > 0)) {
331
+ _context4.n = 11;
332
+ break;
333
+ }
334
+ mediaData = all_files_uri.map(function (url, index) {
335
+ var originalFile = upload_full_files[index];
336
+ return {
337
+ type: 1,
338
+ parent: 0,
339
+ url: url,
340
+ name: originalFile.name.replace(/\s/g, '-'),
341
+ mime_type: originalFile.type
342
+ };
343
+ }); // Save to media API - POST /v1/media with { media: [...] }
344
+ _context4.n = 11;
345
+ return this.apiCall({
346
+ method: 'POST',
347
+ path: '/v1/media',
348
+ data: {
349
+ media: mediaData
350
+ }
351
+ });
352
+ case 11:
353
+ _context4.n = 13;
354
+ break;
355
+ case 12:
356
+ _context4.p = 12;
357
+ _t4 = _context4.v;
358
+ console.error('Upload error:', _t4);
359
+ if (this.onError) {
360
+ this.onError(_t4);
361
+ }
362
+ throw _t4;
363
+ case 13:
364
+ i++;
365
+ _context4.n = 2;
366
+ break;
367
+ case 14:
368
+ return _context4.a(2, all_files_uri);
369
+ }
370
+ }, _callee4, this, [[6, 8], [3, 12]]);
371
+ }));
372
+ function uploadMedia(_x5, _x6) {
373
+ return _uploadMedia.apply(this, arguments);
374
+ }
375
+ return uploadMedia;
376
+ }())
377
+ }]);
378
+ }();
379
+ var _default = exports.default = MediaApiService;
package/package.json CHANGED
@@ -1,12 +1,18 @@
1
1
  {
2
2
  "name": "@tradly/asset",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
5
- "main": "index.js",
6
- "type": "module",
5
+ "main": "dist/index.js",
6
+ "module": "dist/esm/index.js",
7
+ "files": [
8
+ "dist",
9
+ "README.md",
10
+ "LICENSE"
11
+ ],
7
12
  "scripts": {
8
- "build": "echo 'Build script - configure with your bundler'",
9
- "dev": "echo 'Dev script - configure with your bundler'"
13
+ "build": "node build.js",
14
+ "prepublishOnly": "npm run build",
15
+ "dev": "npm run build"
10
16
  },
11
17
  "keywords": [
12
18
  "media",
@@ -35,5 +41,10 @@
35
41
  "@headlessui/react": "^1.7.0",
36
42
  "axios": "^0.24.0"
37
43
  },
38
- "devDependencies": {}
44
+ "devDependencies": {
45
+ "@babel/cli": "^7.28.3",
46
+ "@babel/core": "^7.28.5",
47
+ "@babel/preset-env": "^7.28.5",
48
+ "@babel/preset-react": "^7.28.5"
49
+ }
39
50
  }
package/EXAMPLE_USAGE.jsx DELETED
@@ -1,128 +0,0 @@
1
- /**
2
- * Example usage of @tradly/asset package
3
- *
4
- * This shows how to integrate the media gallery package into your existing project
5
- */
6
-
7
- import React, { useState } from "react";
8
- import { MediaPopup, MediaApiService } from "@tradly/asset";
9
- import { getAuthKey } from "constant/functions";
10
-
11
- function ExampleMediaGalleryUsage() {
12
- const [isOpen, setIsOpen] = useState(false);
13
- const [selectedMedia, setSelectedMedia] = useState(null);
14
-
15
- // Initialize API service with auth key
16
- // API base URL is automatically detected from ENVIRONMENT:
17
- // - Dev: https://api.dev.tradly.app
18
- // - Prod: https://api.tradly.app
19
- // All API calls go directly to Tradly API (no proxy needed)
20
- const apiService = new MediaApiService({
21
- authKey: getAuthKey(), // Get auth key from your existing function (X-Auth-Key header)
22
- bearerToken: "your-bearer-token", // Required: Bearer token for Authorization header
23
- // environment is auto-detected from process.env.ENVIRONMENT
24
- // apiBaseUrl is auto-set based on environment (can be overridden)
25
- onError: (error) => {
26
- console.error("Media API Error:", error);
27
- // You can show a toast notification here
28
- },
29
- });
30
-
31
- const handleSelect = (mediaUrl) => {
32
- console.log("Selected media:", mediaUrl);
33
- setSelectedMedia(mediaUrl);
34
- setIsOpen(false);
35
- };
36
-
37
- const handleError = (error) => {
38
- console.error("Media gallery error:", error);
39
- // Handle error (show toast, etc.)
40
- };
41
-
42
- return (
43
- <div className="p-4">
44
- <h2 className="text-2xl font-bold mb-4">
45
- Media Gallery Example
46
- </h2>
47
-
48
- <div className="mb-4">
49
- <button
50
- onClick={() => setIsOpen(true)}
51
- className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark"
52
- >
53
- Open Media Gallery
54
- </button>
55
- </div>
56
-
57
- {selectedMedia && (
58
- <div className="mt-4">
59
- <p className="font-semibold">
60
- Selected Media:
61
- </p>
62
- <img
63
- src={selectedMedia}
64
- alt="Selected"
65
- className="mt-2 max-w-xs rounded"
66
- />
67
- </div>
68
- )}
69
-
70
- <MediaPopup
71
- isOpen={isOpen}
72
- onClose={() => setIsOpen(false)}
73
- onSelect={handleSelect}
74
- currentData={selectedMedia}
75
- options={["image", "video"]} // Options: 'image', 'video', 'file'
76
- apiService={apiService}
77
- onError={handleError}
78
- title="Select Media"
79
- />
80
- </div>
81
- );
82
- }
83
-
84
- // Example: Using only images
85
- function ImageOnlyExample() {
86
- const [isOpen, setIsOpen] = useState(false);
87
- const apiService = new MediaApiService({
88
- authKey: getAuthKey(),
89
- bearerToken: "your-bearer-token", // Required
90
- // apiBaseUrl is auto-detected from ENVIRONMENT
91
- });
92
-
93
- return (
94
- <MediaPopup
95
- isOpen={isOpen}
96
- onClose={() => setIsOpen(false)}
97
- onSelect={(url) => console.log("Selected:", url)}
98
- options={["image"]}
99
- apiService={apiService}
100
- />
101
- );
102
- }
103
-
104
- // Example: Using individual components
105
- function CustomGalleryExample() {
106
- const apiService = new MediaApiService({
107
- authKey: getAuthKey(),
108
- bearerToken: "your-bearer-token", // Required
109
- // apiBaseUrl is auto-detected from ENVIRONMENT
110
- });
111
-
112
- return (
113
- <div className="p-4">
114
- <ImagesGallery
115
- update_data={(url) => {
116
- console.log("Image selected:", url);
117
- }}
118
- closePopup={() => {
119
- console.log("Gallery closed");
120
- }}
121
- apiService={apiService}
122
- />
123
- </div>
124
- );
125
- }
126
-
127
- export default ExampleMediaGalleryUsage;
128
-