@desynova-digital/components 8.17.1 → 8.17.2

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.
@@ -67,6 +67,7 @@ var overllapingShows = [{ episode_name: "Wicked Tuna: North vs South, East vs We
67
67
  h3: "24/05/2021",
68
68
  h4: "HINDI",
69
69
  h5: "V1",
70
+ upload_type: "FC",
70
71
  isSegment: true,
71
72
  upload_status: "Uploading" // if upload_status is present then card_status will be ignored
72
73
  , card_status: "Revision",
@@ -8,8 +8,10 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = [
8
8
 
9
9
  var _templateObject = _taggedTemplateLiteral(["\n background: rgba(0, 0, 0, 0.5);\n"], ["\n background: rgba(0, 0, 0, 0.5);\n"]),
10
10
  _templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n background: ", ";\n background-size: cover;\n width: ", ";\n height: ", ";\n\n .iframe-image-block {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: ", ";\n overflow: hidden;\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n"], ["\n position: relative;\n background: ", ";\n background-size: cover;\n width: ", ";\n height: ", ";\n\n .iframe-image-block {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: ", ";\n overflow: hidden;\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n"]),
11
- _templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ", ";\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ", ";\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n"], ["\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ", ";\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ", ";\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n"]),
12
- _templateObject4 = _taggedTemplateLiteral(["\n ", ";\n &:hover {\n background-color: #00cec6;\n }\n &:active,\n &:focus {\n outline: none;\n }\n"], ["\n ", ";\n &:hover {\n background-color: #00cec6;\n }\n &:active,\n &:focus {\n outline: none;\n }\n"]);
11
+ _templateObject3 = _taggedTemplateLiteral(["\n padding:10px;\n z-index:2;\n .uploadWrapper{\n border-radius: 50%;\n background: ", ";\n color: ", ";\n .wrapper{\n padding:5px;\n font-size: 10px;\n font-weight: 600;\n }\n }\n"], ["\n padding:10px;\n z-index:2;\n .uploadWrapper{\n border-radius: 50%;\n background: ", ";\n color: ", ";\n .wrapper{\n padding:5px;\n font-size: 10px;\n font-weight: 600;\n }\n }\n"]),
12
+ _templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ", ";\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ", ";\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n"], ["\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ", ";\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ", ";\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n"]),
13
+ _templateObject5 = _taggedTemplateLiteral(["\n ", ";\n &:hover {\n background-color: #00cec6;\n }\n &:active,\n &:focus {\n outline: none;\n }\n"], ["\n ", ";\n &:hover {\n background-color: #00cec6;\n }\n &:active,\n &:focus {\n outline: none;\n }\n"]),
14
+ _templateObject6 = _taggedTemplateLiteral(["\n display:flex;\n justify-content:space-between;\n"], ["\n display:flex;\n justify-content:space-between;\n"]);
13
15
 
14
16
  var _react = require("react");
15
17
 
@@ -60,14 +62,22 @@ var ThumbnailStyles = _styledComponents2.default.div(_templateObject2, function
60
62
  return !isClickPrevented ? "pointer" : "default";
61
63
  });
62
64
 
63
- var StatusBoxStyles = _styledComponents2.default.div(_templateObject3, OverlayBackgroundStyles, function (_ref5) {
65
+ var UploadTypeContainer = _styledComponents2.default.div(_templateObject3, function (props) {
66
+ return props.upload_type === 'RC' ? '#FF6327' : '#00CEC6';
67
+ }, function (props) {
68
+ return props.upload_type === 'RC' ? '#FFFFFF' : '#0C141D';
69
+ });
70
+
71
+ var StatusBoxStyles = _styledComponents2.default.div(_templateObject4, OverlayBackgroundStyles, function (_ref5) {
64
72
  var hex = _ref5.hex;
65
73
  return hex.background;
66
74
  });
67
75
 
68
76
  var IconButtonStyles = (0, _styledComponents2.default)(function (props) {
69
77
  return _react2.default.createElement(_cardV.BaseButtonStyles, props);
70
- })(_templateObject4, OverlayBackgroundStyles);
78
+ })(_templateObject5, OverlayBackgroundStyles);
79
+
80
+ var CardHeader = _styledComponents2.default.div(_templateObject6);
71
81
 
72
82
  var Thumbnail = function Thumbnail(props) {
73
83
  var width = props.width,
@@ -77,7 +87,8 @@ var Thumbnail = function Thumbnail(props) {
77
87
  actions = props.actions,
78
88
  ingest_db_id = props.ingest_db_id,
79
89
  actionClick = props.actionClick,
80
- upload_status = props.upload_status;
90
+ upload_status = props.upload_status,
91
+ upload_type = props.upload_type;
81
92
 
82
93
  var _useState = (0, _react.useState)(null),
83
94
  _useState2 = _slicedToArray(_useState, 2),
@@ -159,56 +170,73 @@ var Thumbnail = function Thumbnail(props) {
159
170
  onClick: handleThumbnailClick
160
171
  },
161
172
  _react2.default.createElement(
162
- _cardV.DivStyles,
163
- {
164
- className: "asset-card-thumbnail-head",
165
- display: "flex",
166
- justify: "flex-end",
167
- align: "center",
168
- padding: "10px",
169
- position: "relative",
170
- zIndex: "2"
171
- },
172
- (card_status || upload_status) && statusIndex > -1 && _react2.default.createElement(
173
- StatusBoxStyles,
174
- {
175
- hex: _tokens.CARD_ASSET_STATUS[statusIndex] ? _tokens.CARD_ASSET_STATUS[statusIndex].hex : { background: "#AFB2BA" }
176
- },
177
- _react2.default.createElement("div", { className: "status-color" }),
173
+ CardHeader,
174
+ null,
175
+ upload_type && _react2.default.createElement(
176
+ UploadTypeContainer,
177
+ { upload_type: upload_type },
178
178
  _react2.default.createElement(
179
- _cardV.BaseParaStyles,
180
- {
181
- className: "status-text",
182
- display: "inline-block",
183
- fontSize: "10px",
184
- color: "#FFF"
185
- },
186
- card_status || upload_status
179
+ "div",
180
+ { className: "uploadWrapper" },
181
+ _react2.default.createElement(
182
+ "div",
183
+ { className: "wrapper" },
184
+ upload_type
185
+ )
187
186
  )
188
- ) || null,
189
- actions && actions.length && actions.map(function (item, i) {
190
- return item.icon && _react2.default.createElement(
191
- IconButtonStyles,
187
+ ),
188
+ _react2.default.createElement(
189
+ _cardV.DivStyles,
190
+ {
191
+ className: "asset-card-thumbnail-head",
192
+ display: "flex",
193
+ justify: "flex-end",
194
+ align: "center",
195
+ padding: "10px",
196
+ position: "relative",
197
+ zIndex: "2"
198
+ },
199
+ (card_status || upload_status) && statusIndex > -1 && _react2.default.createElement(
200
+ StatusBoxStyles,
192
201
  {
193
- className: "asset-card-thumbnail-icon-button",
194
- type: "button",
195
- key: i,
196
- position: "relative",
197
- border: "none",
198
- cursor: "pointer",
199
- borderRadius: "15px",
200
- height: "26px",
201
- padding: "0px",
202
- width: "26px",
203
- margin: actions.length === i + 1 ? "0" : "0 5px 0px 0px",
204
- onClick: function onClick(e) {
205
- e.stopPropagation();
206
- actionClick(e, item.field);
207
- }
202
+ hex: _tokens.CARD_ASSET_STATUS[statusIndex] ? _tokens.CARD_ASSET_STATUS[statusIndex].hex : { background: "#AFB2BA" }
208
203
  },
209
- _react2.default.createElement(_icon2.default, { name: item.icon, width: 14, height: 14 })
210
- );
211
- }) || null
204
+ _react2.default.createElement("div", { className: "status-color" }),
205
+ _react2.default.createElement(
206
+ _cardV.BaseParaStyles,
207
+ {
208
+ className: "status-text",
209
+ display: "inline-block",
210
+ fontSize: "10px",
211
+ color: "#FFF"
212
+ },
213
+ card_status || upload_status
214
+ )
215
+ ) || null,
216
+ actions && actions.length && actions.map(function (item, i) {
217
+ return item.icon && _react2.default.createElement(
218
+ IconButtonStyles,
219
+ {
220
+ className: "asset-card-thumbnail-icon-button",
221
+ type: "button",
222
+ key: i,
223
+ position: "relative",
224
+ border: "none",
225
+ cursor: "pointer",
226
+ borderRadius: "15px",
227
+ height: "26px",
228
+ padding: "0px",
229
+ width: "26px",
230
+ margin: actions.length === i + 1 ? "0" : "0 5px 0px 0px",
231
+ onClick: function onClick(e) {
232
+ e.stopPropagation();
233
+ actionClick(e, item.field);
234
+ }
235
+ },
236
+ _react2.default.createElement(_icon2.default, { name: item.icon, width: 14, height: 14 })
237
+ );
238
+ }) || null
239
+ )
212
240
  ),
213
241
  iframeurl && _react2.default.createElement(
214
242
  "div",
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "8.17.1",
3
+ "version": "8.17.2",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "8.17.1",
10
+ "@desynova-digital/tokens": "8.17.2",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },