@learningpool/ui 1.15.1 → 1.15.3
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.
|
@@ -9,44 +9,8 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
-
});
|
|
20
|
-
};
|
|
21
|
-
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
-
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
-
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
-
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
-
function step(op) {
|
|
26
|
-
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
-
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
-
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
-
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
-
switch (op[0]) {
|
|
31
|
-
case 0: case 1: t = op; break;
|
|
32
|
-
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
-
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
-
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
-
default:
|
|
36
|
-
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
-
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
-
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
-
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
-
if (t[2]) _.ops.pop();
|
|
41
|
-
_.trys.pop(); continue;
|
|
42
|
-
}
|
|
43
|
-
op = body.call(thisArg, _);
|
|
44
|
-
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
-
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
49
|
-
import { useState
|
|
13
|
+
import { useState } from 'react';
|
|
50
14
|
import { AppHubRow } from './AppHubStyles';
|
|
51
15
|
import Grid from '@mui/material/Unstable_Grid2';
|
|
52
16
|
import { StyledAdvertPaper, StyledAdvertLink, StyledAdvertImage } from './AppHubAdvertStyles';
|
|
@@ -63,58 +27,14 @@ var addUtmParams = function (baseUrl, source, medium, campaign) {
|
|
|
63
27
|
return baseUrl;
|
|
64
28
|
}
|
|
65
29
|
};
|
|
66
|
-
var checkImageExists = function (url) {
|
|
67
|
-
return new Promise(function (resolve) {
|
|
68
|
-
var img = new window.Image();
|
|
69
|
-
var timeoutId = setTimeout(function () {
|
|
70
|
-
resolve(false);
|
|
71
|
-
}, 5000);
|
|
72
|
-
img.onload = function () {
|
|
73
|
-
clearTimeout(timeoutId);
|
|
74
|
-
resolve(true);
|
|
75
|
-
};
|
|
76
|
-
img.onerror = function (error) {
|
|
77
|
-
clearTimeout(timeoutId);
|
|
78
|
-
console.error('Banner Image failed to load:', url, error);
|
|
79
|
-
resolve(false);
|
|
80
|
-
};
|
|
81
|
-
img.src = url;
|
|
82
|
-
});
|
|
83
|
-
};
|
|
84
30
|
export var renderBannerAdvertRow = function (rowData, rowIndex) {
|
|
85
31
|
var items = rowData.items;
|
|
86
|
-
var _a = useState(
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
return __generator(this, function (_a) {
|
|
95
|
-
switch (_a.label) {
|
|
96
|
-
case 0:
|
|
97
|
-
if (!item.hubImageUrl) return [3 /*break*/, 2];
|
|
98
|
-
return [4 /*yield*/, checkImageExists(item.hubImageUrl)];
|
|
99
|
-
case 1:
|
|
100
|
-
isValid = _a.sent();
|
|
101
|
-
return [2 /*return*/, isValid ? item : null];
|
|
102
|
-
case 2: return [2 /*return*/, null];
|
|
103
|
-
}
|
|
104
|
-
});
|
|
105
|
-
}); }))];
|
|
106
|
-
case 1:
|
|
107
|
-
validatedItems = _a.sent();
|
|
108
|
-
setValidAdverts(validatedItems.filter(function (item) { return item !== null; }));
|
|
109
|
-
return [2 /*return*/];
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
}); };
|
|
113
|
-
validateImages();
|
|
114
|
-
}, [items]);
|
|
115
|
-
if (validAdverts.length === 0) {
|
|
116
|
-
console.error('No valid images found for banner adverts');
|
|
117
|
-
return null; // Don't render the row if no valid images
|
|
118
|
-
}
|
|
119
|
-
return (_jsx(AppHubRow, { children: _jsx(Grid, __assign({ container: true, spacing: 2 }, { children: validAdverts.map(function (item, index) { return (_jsx(Grid, __assign({ xs: 12 }, { children: _jsx(StyledAdvertPaper, __assign({ elevation: 0 }, { children: _jsx(StyledAdvertLink, __assign({ href: addUtmParams(item.basePromoUrl, 'stream-home', 'App-Hub-Banner-Advert', item.name), target: "_blank" }, { children: _jsx(StyledAdvertImage, { src: item.hubImageUrl, alt: item.altText }) })) })) }), index)); }) })) }, "row_".concat(rowIndex)));
|
|
32
|
+
var _a = useState(true), hasValidImage = _a[0], setHasValidImage = _a[1];
|
|
33
|
+
var handleImageError = function () {
|
|
34
|
+
setHasValidImage(false);
|
|
35
|
+
};
|
|
36
|
+
var validItems = items.filter(function (item) { return item.hubImageUrl && item.basePromoUrl; });
|
|
37
|
+
if (!hasValidImage || validItems.length === 0)
|
|
38
|
+
return null;
|
|
39
|
+
return (_jsx(AppHubRow, { children: _jsx(Grid, __assign({ container: true, spacing: 2 }, { children: validItems.map(function (item, index) { return (_jsx(Grid, __assign({ xs: 12 }, { children: _jsx(StyledAdvertPaper, __assign({ elevation: 0 }, { children: _jsx(StyledAdvertLink, __assign({ href: addUtmParams(item.basePromoUrl, 'hub', 'hub_dashboard_banner_advert', item.name), target: "_blank" }, { children: _jsx(StyledAdvertImage, { src: item.hubImageUrl, alt: item.altText || 'Banner image advertisement', onError: handleImageError }) })) })) }), index)); }) })) }, "row_".concat(rowIndex)));
|
|
120
40
|
};
|
|
@@ -57,11 +57,17 @@ import { defaultAttributes } from '../../../utils/dataAttributes';
|
|
|
57
57
|
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
|
58
58
|
import PromotionalCampaignItem from './PromotionalCampaignItem';
|
|
59
59
|
var addUtmParams = function (baseUrl, source, medium, campaign) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
60
|
+
try {
|
|
61
|
+
var url = new URL(baseUrl);
|
|
62
|
+
url.searchParams.append('utm_source', source);
|
|
63
|
+
url.searchParams.append('utm_medium', medium);
|
|
64
|
+
url.searchParams.append('utm_campaign', campaign);
|
|
65
|
+
return url.toString();
|
|
66
|
+
}
|
|
67
|
+
catch (error) {
|
|
68
|
+
console.error('Error adding UTM params to advert redirect - invalid URL:', baseUrl, error);
|
|
69
|
+
return baseUrl;
|
|
70
|
+
}
|
|
65
71
|
};
|
|
66
72
|
var AppSwitcher = function (props) {
|
|
67
73
|
var _a;
|
|
@@ -79,6 +85,12 @@ var AppSwitcher = function (props) {
|
|
|
79
85
|
var _g = useState(null), activeApplication = _g[0], setActiveApplication = _g[1];
|
|
80
86
|
// Stores any org filter text (on the second tab).
|
|
81
87
|
var _h = useState(''), searchString = _h[0], setSearchString = _h[1];
|
|
88
|
+
// Holds the number of valid promotional campaigns.
|
|
89
|
+
var _j = useState((promotionalCampaigns === null || promotionalCampaigns === void 0 ? void 0 : promotionalCampaigns.length) || 0), validCampaignCount = _j[0], setValidCampaignCount = _j[1];
|
|
90
|
+
// Decrease the valid campaign count if an image fails to load.
|
|
91
|
+
var handleCampaignImageError = function () {
|
|
92
|
+
setValidCampaignCount(function (prev) { return Math.max(0, prev - 1); });
|
|
93
|
+
};
|
|
82
94
|
var messages = __assign(__assign({}, Constants.DefaultMessages), localization);
|
|
83
95
|
var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
|
|
84
96
|
var userId = (_a = props.userId) !== null && _a !== void 0 ? _a : '';
|
|
@@ -87,7 +99,7 @@ var AppSwitcher = function (props) {
|
|
|
87
99
|
* @returns {Promise<IApplication[]>} Get a Promotional Campaign to show.
|
|
88
100
|
*/
|
|
89
101
|
var getLatestPromotionalCampaign = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
90
|
-
var response, data, error_1;
|
|
102
|
+
var response, responseData, data, error_1;
|
|
91
103
|
return __generator(this, function (_a) {
|
|
92
104
|
switch (_a.label) {
|
|
93
105
|
case 0:
|
|
@@ -108,15 +120,14 @@ var AppSwitcher = function (props) {
|
|
|
108
120
|
case 2:
|
|
109
121
|
response = _a.sent();
|
|
110
122
|
if (!response.ok) {
|
|
111
|
-
console.error('Unable to retrieve latest promotional campaign from
|
|
123
|
+
console.error('Unable to retrieve latest promotional campaign from Hub API, returned statuscode:', response.status);
|
|
112
124
|
return [2 /*return*/, null];
|
|
113
125
|
}
|
|
114
|
-
return [4 /*yield*/, response.json()
|
|
115
|
-
// Store the latest access token.
|
|
116
|
-
];
|
|
126
|
+
return [4 /*yield*/, response.json()];
|
|
117
127
|
case 3:
|
|
118
|
-
|
|
119
|
-
|
|
128
|
+
responseData = _a.sent();
|
|
129
|
+
data = responseData.records;
|
|
130
|
+
// Store the latest access token
|
|
120
131
|
window.localStorage.setItem(Constants.LocalStorageKey.Token, token);
|
|
121
132
|
return [2 /*return*/, (data === null || data === void 0 ? void 0 : data.map(function (_a) {
|
|
122
133
|
var id = _a.id, name = _a.name, appSwitcherImageUrl = _a.appSwitcherImageUrl, hubImageUrl = _a.hubImageUrl, altText = _a.altText, basePromoUrl = _a.basePromoUrl, isActive = _a.isActive;
|
|
@@ -132,7 +143,7 @@ var AppSwitcher = function (props) {
|
|
|
132
143
|
})) || null];
|
|
133
144
|
case 4:
|
|
134
145
|
error_1 = _a.sent();
|
|
135
|
-
console.error('Unable to retrieve latest promotional campaign from
|
|
146
|
+
console.error('Unable to retrieve and display latest promotional campaign from Hub API', error_1);
|
|
136
147
|
return [2 /*return*/, null];
|
|
137
148
|
case 5: return [2 /*return*/];
|
|
138
149
|
}
|
|
@@ -405,13 +416,12 @@ var AppSwitcher = function (props) {
|
|
|
405
416
|
if (!props.applications && (!token || !apiKey)) {
|
|
406
417
|
return null;
|
|
407
418
|
}
|
|
408
|
-
var
|
|
409
|
-
var _j = props.hidePromotionalCampaign, hidePromotionalCampaign = _j === void 0 ? false : _j;
|
|
419
|
+
var _k = props.hidePromotionalCampaign, hidePromotionalCampaign = _k === void 0 ? false : _k;
|
|
410
420
|
return (_jsxs(AppSwitcherPanel, __assign({ id: "app-switcher-menu", style: {
|
|
411
421
|
display: isAppSwitcherOpen ? 'block' : 'none',
|
|
412
422
|
left: isDrawerOpen ? Constants.DrawerWidth.Expanded : Constants.DrawerWidth.Collapsed - 3
|
|
413
|
-
}, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer, hasPromotionalCampaign:
|
|
414
|
-
? (_jsxs("div", { children: [!hidePromotionalCampaign && promotionalCampaigns && promotionalCampaigns.length > 0 && (_jsx("div", __assign({ className: "promotional-campaigns-container" }, { children: promotionalCampaigns.map(function (campaign) { return (_jsx(PromotionalCampaignItem, { imageUrl: campaign.appSwitcherImageUrl, altText: campaign.altText, linkUrl: addUtmParams(campaign.basePromoUrl, '
|
|
423
|
+
}, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer, hasPromotionalCampaign: validCampaignCount > 0, onMouseDown: function (event) { return event.stopPropagation(); } }, { children: [activeTab === Constants.Tabs.ListApplications
|
|
424
|
+
? (_jsxs("div", { children: [!hidePromotionalCampaign && promotionalCampaigns && promotionalCampaigns.length > 0 && (_jsx("div", __assign({ className: "promotional-campaigns-container" }, { children: promotionalCampaigns.map(function (campaign) { return (_jsx(PromotionalCampaignItem, { imageUrl: campaign.appSwitcherImageUrl, altText: campaign.altText, linkUrl: addUtmParams(campaign.basePromoUrl, 'hub', 'app_switcher_advert', campaign.name), onImageError: handleCampaignImageError }, campaign.id)); }) }))), _jsxs(AppListHeader, __assign({ "data-id": dataIds.AppSwitcherHeader }, { children: [messages['your-apps'], !props.hideStreamHomeButton &&
|
|
415
425
|
_jsx(StyleHomeButton, __assign({ "aria-label": messages['go-to-hub'], endIcon: _jsx(ChevronRightIcon, {}), onClick: function (e) { var _a; return window.open((_a = props.StreamHomeUrl) !== null && _a !== void 0 ? _a : Constants.DefaultStreamHomeUrl); } }, { children: messages['go-to-hub'] }))] })), _jsx(MenuContent, __assign({ style: {
|
|
416
426
|
display: activeTab === 1 ? 'flex' : 'none'
|
|
417
427
|
}, "data-id": dataIds.AppSwitcherList }, { children: applications.map(function (_a) {
|
|
@@ -3,6 +3,7 @@ interface IPromotionalCampaignItemProps {
|
|
|
3
3
|
imageUrl: string;
|
|
4
4
|
altText: string;
|
|
5
5
|
linkUrl: string;
|
|
6
|
+
onImageError?: () => void;
|
|
6
7
|
}
|
|
7
|
-
declare const PromotionalCampaignItem: ({ imageUrl, altText, linkUrl }: IPromotionalCampaignItemProps) => ReactElement;
|
|
8
|
+
declare const PromotionalCampaignItem: ({ imageUrl, altText, linkUrl, onImageError }: IPromotionalCampaignItemProps) => ReactElement | null;
|
|
8
9
|
export default PromotionalCampaignItem;
|
|
@@ -11,21 +11,26 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { CardMedia } from '@mui/material';
|
|
14
|
-
import
|
|
14
|
+
import { useState } from 'react';
|
|
15
15
|
import { PromotionalCampaignCardStyled, PromotionalCampaignCardActionArea } from './AppSwitcherStyles';
|
|
16
16
|
var PromotionalCampaignItem = function (_a) {
|
|
17
|
-
var imageUrl = _a.imageUrl, altText = _a.altText, linkUrl = _a.linkUrl;
|
|
17
|
+
var imageUrl = _a.imageUrl, altText = _a.altText, linkUrl = _a.linkUrl, onImageError = _a.onImageError;
|
|
18
18
|
var _b = useState(true), imageLoaded = _b[0], setImageLoaded = _b[1];
|
|
19
19
|
var handleImageError = function () {
|
|
20
20
|
setImageLoaded(false);
|
|
21
|
+
if (onImageError) {
|
|
22
|
+
onImageError();
|
|
23
|
+
}
|
|
21
24
|
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
if (!imageLoaded)
|
|
26
|
+
return null;
|
|
27
|
+
return (_jsx(PromotionalCampaignCardStyled, { children: _jsx(PromotionalCampaignCardActionArea, __assign({ onClick: function () { return window.open(linkUrl, '_blank'); } }, { children: _jsx(CardMedia, { component: "img", image: imageUrl, alt: altText, onError: handleImageError, sx: {
|
|
28
|
+
width: '100%',
|
|
29
|
+
height: '100%',
|
|
30
|
+
objectFit: 'cover',
|
|
31
|
+
'&.MuiCardMedia-img': {
|
|
32
|
+
objectPosition: 'center'
|
|
33
|
+
}
|
|
34
|
+
} }) })) }));
|
|
30
35
|
};
|
|
31
36
|
export default PromotionalCampaignItem;
|