@desynova-digital/components 9.3.3 → 9.3.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.
- package/atoms/avatar/index.js +1 -2
- package/atoms/badge/index.js +1 -2
- package/atoms/button/button.js +1 -2
- package/atoms/card/index.js +1 -2
- package/atoms/cardStack/index.js +1 -2
- package/atoms/cardV2/cardV2.js +1 -2
- package/atoms/cardV2/content.js +1 -2
- package/atoms/cardV2/contentV2.js +1 -2
- package/atoms/cardV2/thumbnail.js +1 -2
- package/atoms/cardV2/thumbnailV2.js +54 -55
- package/atoms/cardV2/timeline.js +1 -2
- package/atoms/customSelect/customSelect.js +1 -2
- package/atoms/datePicker/datePicker.js +11 -12
- package/atoms/dateTime/dateTime.js +1 -1
- package/atoms/draftInputText/draftInputText.js +4 -5
- package/atoms/dropdown/dropdown.js +1 -2
- package/atoms/dropdownList/dropdownList.js +1 -2
- package/atoms/graphs/circleDonut/circleDonut.js +1 -2
- package/atoms/graphs/circleGraph/circleGraph.js +1 -2
- package/atoms/graphs/circleNested/circleNested.js +1 -2
- package/atoms/graphs/pieChart/pieChart.js +1 -2
- package/atoms/graphs/verticalBarGraph/verticalBarGraph.js +1 -2
- package/atoms/icon/index.js +1 -2
- package/atoms/inputText/inputText.js +1 -2
- package/atoms/loader/ShimmerComponent/Shimmer.js +1 -2
- package/atoms/loader/index.js +1 -2
- package/atoms/pageSearchCard/pageSearchCard.js +40 -42
- package/atoms/popup/popup.js +1 -2
- package/atoms/radio/index.js +1 -2
- package/atoms/sideBar/sidebar.js +1 -2
- package/atoms/tag/index.js +1 -2
- package/atoms/thematicBreak/index.js +1 -2
- package/atoms/timeCodeInput/timeCodeInput.js +1 -2
- package/atoms/timeCodeInput/timeCodeMSInput.js +1 -2
- package/atoms/timeCodeInput/timeCodeMainInput.js +1 -2
- package/atoms/timeCodeInput/timeCodeStandardInput.js +1 -2
- package/atoms/timer/timer.js +1 -2
- package/atoms/toast/toast.js +1 -2
- package/atoms/videoCard/index.js +1 -2
- package/components.js +1 -2
- package/molecules/filter/filter.js +13 -7
- package/molecules/graphDetailCard/graphDetailCard.js +1 -2
- package/molecules/pageHeader/index.js +1 -2
- package/molecules/richTextInput/RichTextInput.js +1 -2
- package/molecules/richTextInputV2/RichTextInputV2.js +1 -2
- package/molecules/table/table.js +9 -10
- package/molecules/videoPlayer/videoPlayer.js +6 -6
- package/package.json +2 -2
package/molecules/table/table.js
CHANGED
|
@@ -34,9 +34,8 @@ var _permissionIconMap = _interopRequireDefault(require("../../../tokens/permiss
|
|
|
34
34
|
var _TableErrorScreen = _interopRequireDefault(require("../../molecules/errorScreen/TableErrorScreen"));
|
|
35
35
|
var _inputText = _interopRequireDefault(require("../../atoms/inputText"));
|
|
36
36
|
var _Shimmer = _interopRequireDefault(require("../../atoms/loader/ShimmerComponent/Shimmer"));
|
|
37
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14
|
|
38
|
-
function
|
|
39
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
37
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
38
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
40
39
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
41
40
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
42
41
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
@@ -1466,7 +1465,7 @@ Table.compare = {
|
|
|
1466
1465
|
Table.Element = _styledComponents["default"].table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"])));
|
|
1467
1466
|
var TableInner = {};
|
|
1468
1467
|
TableInner.Element = _styledComponents["default"].table(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"])));
|
|
1469
|
-
TableInner.Cell = _styledComponents["default"].td(
|
|
1468
|
+
TableInner.Cell = _styledComponents["default"].td(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", ";\n padding: 7px 14px;\n border-top: 1px solid ", ";\n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: ", ";\n max-width: ", ";\n\n & > div.text-box {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &.text-linkexpired {\n color: #ff6c56;\n }\n }\n"])), function (props) {
|
|
1470
1469
|
return _tokens.colors[props.theme].table.InnerTdColor;
|
|
1471
1470
|
}, function (props) {
|
|
1472
1471
|
return _tokens.colors[props.theme].table.border;
|
|
@@ -1475,8 +1474,8 @@ TableInner.Cell = _styledComponents["default"].td(_templateObject10 || (_templat
|
|
|
1475
1474
|
}, function (props) {
|
|
1476
1475
|
return props.maxWidth || "175px";
|
|
1477
1476
|
});
|
|
1478
|
-
Table.Body = _styledComponents["default"].tbody(
|
|
1479
|
-
Table.Row = _styledComponents["default"].tr(
|
|
1477
|
+
Table.Body = _styledComponents["default"].tbody(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])([""])));
|
|
1478
|
+
Table.Row = _styledComponents["default"].tr(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n .show-row {\n transform: rotate(-180deg);\n -webkit-transform: rotate(-180deg);\n -moz-transform: rotate(-180deg);\n -ms-transform: rotate(-180deg);\n -o-transform: rotate(-180deg);\n }\n .hide-row {\n transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n }\n .show-row,\n .hide-row {\n transition: transform 0.5s ease-in-out;\n -webkit-transition: transform 0.5s ease-in-out;\n -moz-transition: transform 0.5s ease-in-out;\n -ms-transition: transform 0.5s ease-in-out;\n -o-transition: transform 0.5s ease-in-out;\n text-align: right;\n cursor: pointer;\n }\n\n &.selected-row > td,\n &.selected-row:nth-child(even) > td {\n background: ", ";\n }\n\n &:nth-child(even) > td {\n background: ", ";\n }\n\n &:hover {\n .asset-play {\n color: ", ";\n }\n }\n\n ", " {\n margin: 0px;\n box-shadow: 0px 0px 0px transparent;\n ", ";\n }\n"])), function (props) {
|
|
1480
1479
|
return _tokens.colors[props.theme].table.rowSelectedBackground;
|
|
1481
1480
|
}, function (props) {
|
|
1482
1481
|
return _tokens.colors[props.theme].table.evenRowBackground;
|
|
@@ -1485,7 +1484,7 @@ Table.Row = _styledComponents["default"].tr(_templateObject12 || (_templateObjec
|
|
|
1485
1484
|
}, Table.Card, function (props) {
|
|
1486
1485
|
if (typeof props.theme === "string") return "background:" + _tokens.colors[props.theme].table.innerTableBackground;
|
|
1487
1486
|
});
|
|
1488
|
-
Table.Cell = _styledComponents["default"].td(
|
|
1487
|
+
Table.Cell = _styledComponents["default"].td(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", "; \n padding: 7px 14px;\n // border-top: 1px solid ", "; \n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: ", ";\n max-width: ", ";\n\n &.tableHolder{\n padding:0px;\n }\n\n .asset-play {\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #dddddd;\n &:hover, &:focus {\n outline: none;\n color: ", ";\n text-decoration: underline;\n }\n }\n\n .icon-circle {\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n i {\n line-height: 0;\n }\n }\n\n // max-width: 0;\n // overflow: hidden;\n // text-overflow: ellipsis;\n // white-space: nowrap;\n\n & > div.text-box {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &.text-linkexpired {\n color: #FF6C56;\n }\n }\n & > div.action-icons-cell{\n white-space: nowrap;\n\n .tooltip-block {\n top: -50px;\n }\n \n .action-item-btn {\n padding: 0 15px;\n cursor: pointer;\n background-color: transparent;\n\n &.nested {\n border-bottom: 1px solid #303f51;\n display: flex;\n padding: 10px;\n align-items: center;\n &>div:first-child{\n margin-right:10px;\n }\n &:last-child{\n border-bottom: 0px none;\n }\n }\n\n &:hover {\n transition: color 0.4s ease-out;\n color: ", ";\n path{\n fill: ", ";\n transition: fill 0.4s ease-out;\n }\n }\n }\n\n\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .more-action-holder {\n position: relative;\n\n &:hover {\n .more-action-list-box{\n display:block;\n }\n .more-action-icon{\n transition: all 0.4s ease-out;\n background: ", ";\n }\n }\n\n .more-action-icon{\n height: 24px;\n width: 24px;\n background: #303f51;\n border-radius: 50%;\n padding: 0px 10px;\n transform: translate(0px, -1px);\n }\n .more-action-list-box{\n position: absolute;\n z-index:100;\n display:none;\n //display:block;\n padding-top: 11px;\n transform: translate(-136px,-2px);\n \n .more-action-list {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n background: ", ";\n min-width: 200px;\n }\n\n &:before{\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n \n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid ", ";\n transform: translate(144px,-6px);\n }\n\n }\n\n }\n }\n\n .nested-table {\n background: #182738;\n border-left: 2px solid ", ";\n }\n\n\n"])), function (props) {
|
|
1489
1488
|
return _tokens.colors[props.theme].table.tdColor;
|
|
1490
1489
|
}, function (props) {
|
|
1491
1490
|
return _tokens.colors[props.theme].table.border;
|
|
@@ -1508,11 +1507,11 @@ Table.Cell = _styledComponents["default"].td(_templateObject13 || (_templateObje
|
|
|
1508
1507
|
}, function (props) {
|
|
1509
1508
|
return _tokens.colors[props.theme].table.CellNestedTableBorderLeft;
|
|
1510
1509
|
});
|
|
1511
|
-
var TableTitleLoadingInitial = _styledComponents["default"].div(
|
|
1512
|
-
var DubbingStatusStyles = _styledComponents["default"].div(
|
|
1510
|
+
var TableTitleLoadingInitial = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n height: 30px;\n position: absolute;\n left: -1px;\n z-index: 2;\n display: flex;\n width: 100%;\n top: -1px;\n"])));
|
|
1511
|
+
var DubbingStatusStyles = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: ", ";\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"])), function (props) {
|
|
1513
1512
|
return _tokens.colors[props.theme].table.ApprovedBackground;
|
|
1514
1513
|
});
|
|
1515
|
-
var SelectAllButton = _styledComponents["default"].div(
|
|
1514
|
+
var SelectAllButton = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n width: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button {\n height: 0px;\n width: 0px;\n display: none;\n }\n .label-select-all-button {\n position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button {\n display: ", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation: ", ";\n }\n }\n"])), function (props) {
|
|
1516
1515
|
return props.isActive ? "1px solid #9E9E9E" : "";
|
|
1517
1516
|
}, function (props) {
|
|
1518
1517
|
return !props.isActive ? "#49dad0" : "";
|
|
@@ -20,7 +20,7 @@ var _icon = _interopRequireDefault(require("../../atoms/icon"));
|
|
|
20
20
|
var _image = _interopRequireDefault(require("../../atoms/image"));
|
|
21
21
|
var _thematicBreak = _interopRequireDefault(require("../../atoms/thematicBreak"));
|
|
22
22
|
var _tabs = _interopRequireDefault(require("../../molecules/tabs"));
|
|
23
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9,
|
|
23
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
|
|
24
24
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
|
|
25
25
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
26
26
|
var PlayerContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: 100%;\n"])));
|
|
@@ -32,11 +32,11 @@ var BigPlayButton = (0, _styledComponents["default"])(_button["default"])(_templ
|
|
|
32
32
|
var SDPlayerBorder = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n opacity: 0.3;\n border: solid 1px #ffffff;\n top: 50%;\n left: 50%;\n -webkit-transform: translate(-50%,-50%);\n -ms-transform: translate(-50%,-50%);\n -o-transform: translate(-50%,-50%);\n -moz-transform: translate(-50%,-50%);\n transform: translate(-50%,-50%);\n position: absolute;\n padding-left: 75%;\n height: 100%;\n"])));
|
|
33
33
|
var PlayerControlBlock = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 60px;\n position: relative;\n"])));
|
|
34
34
|
var SeekBar = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 4px;\n position: relative;\n cursor: pointer;\n .seekbar-bg {\n background: rgba(0,0,0,0.3);\n width: 100%;\n height: 100%;\n }\n .play-progress {\n position: absolute;\n width: 0px;\n height: 100%;\n left: 0;\n top: 0;\n background: #00cec6;\n &:after {\n content: '';\n width: 12px;\n height: 12px;\n position: absolute;\n background: #00cec6;\n border-radius: 100%;\n right: -6px;\n top: -5px;\n box-shadow: 0 0 14px 1px #00cec6;\n }\n }\n"])));
|
|
35
|
-
var PlayerControls = _styledComponents["default"].div(
|
|
36
|
-
var CommentBox = _styledComponents["default"].div(
|
|
37
|
-
var Carousal = _styledComponents["default"].div(
|
|
38
|
-
var VideoDetailsWrapper = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n width: 36.33%;\n .tab-block {\n height: 100%;\n .tab-container {\n padding: 20px;\n text-align: left;\n .info-block {\n width: 33.33%;\n display: inline-block;\n padding-bottom: 25px;\n &:last-child{\n width: 100%;\n }\n .info-header {\n font-family: SFUIText-Regular;\n font-size: 10px;\n color: #666666;\n color: #cccccc;\n margin-bottom: 20px;\n }\n .info-value {\n font-family: SFUIText-Regular;\n font-size: 14px;\n color: #333333;\n color: #ffffff;\n }\n }\n &.scenes-tab {\n hr {\n border-color: #eeeeee;\n border-color: #4e5c6c;\n }\n .scenes-synopsis {\n .info-header {\n font-family: SFUIText-Regular;\n font-size: 12px;\n color: #333333;\n color: #cccccc;\n text-transform: uppercase;\n margin-bottom: 10px;\n }\n .synopsis {\n font-family: SFUIText-Regular;\n font-size: 12px;\n line-height: 1.33;\n color: #666666;\n color: #ffffff;\n margin-bottom: 10px;\n }\n }\n .scenes-wrapper {\n .scene-container{\n &:last-child {\n hr {\n display: none;\n }\n }\n .scene-block {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n cursor: pointer;\n &:hover{\n .scene-image {\n ", " {\n display: inline-block;\n }\n }\n }\n .scene-image {\n width: 70px;\n height: 70px;\n border-radius: 100%;\n overflow: hidden;\n position: relative;\n ", " {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n }\n }\n .scene-details {\n margin-left: 15px;\n .scene-name {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n margin-bottom: 5px;\n }\n .scene-time {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #888888;\n color: #aaaaaa;\n margin-bottom: 5px;\n }\n .scene-tags-block {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n .scene-tags {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: 1.17;\n letter-spacing: normal;\n color: #c7c5c5;\n color: #999999;\n margin-right: 5px;\n }\n }\n }\n }\n }\n }\n }\n &.comments-tab {\n padding: 0;\n position: relative;\n width: 100%;\n height: 100%;\n .comments-section {\n padding: 10px 0;\n height: calc(100% - 73px);\n overflow: auto;\n top: 0;\n position: absolute;\n left: 0;\n width: 100%;\n .comments-details {\n padding: 10px 20px 10px 20px;\n .comments-count {\n font-size: 14px;\n font-weight: normal;\n font-family: SFUIText-Regular;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #cccccc;\n }\n }\n .comments-container {\n .comment-wrapper {\n padding: 20px;\n cursor: pointer;\n &:hover {\n background: #f5f5f5;\n background: #304153;\n }\n .comment-block, .reply-block {\n .comment-header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin-bottom: 10px;\n position: relative;\n z-index: 2;\n img {\n width: 30px;\n height: 30px;\n border-radius: 100%;\n left: auto;\n top: auto;\n transform: none;\n }\n .user-name {\n padding: 0px 20px 0px 10px;\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n }\n .video-time {\n opacity: 0.8;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #626260;\n color: #cccccc;\n text-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);\n }\n .comment-time {\n opacity: 0.2;\n opacity: 1;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #000000;\n color: #aaaaaa;\n margin-left: 20px;\n }\n }\n .comment-body {\n p {\n font-family: SFUIText-Regular;\n font-size: 13px;\n font-weight: 300;\n font-style: normal;\n font-stretch: normal;\n line-height: 1.38;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n }\n }\n }\n .reply-wrapper {\n .reply-block {\n padding-left: 20px;\n padding-top: 15px;\n position: relative;\n &:after {\n content: '';\n position: absolute;\n width: 1px;\n height: 100%;\n background: #cccccc;\n background: #4e5c6c;\n top: 15px;\n z-index: 0;\n left: 35px;\n }\n &:last-child {\n &:after {\n display: none;\n }\n }\n .comment-body {\n padding-left: 40px;\n }\n }\n }\n }\n }\n }\n .approval-block {\n height: 73px;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n padding: 0 10px;\n background: #121d29;\n background: #ffffff;\n position: absolute;\n width: 100%;\n bottom: 0;\n ", " {\n font-size: 12px;\n margin: 0 10px;\n }\n }\n }\n &.tags-tab {\n .tag-header {\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #cccccc;\n }\n .characters-list {\n margin: 10px 0;\n .actor-tag {\n width: 70px;\n height: 70px;\n border-radius: 100%;\n background: #121d29;\n display: inline-block;\n vertical-align: middle;\n margin: 10px;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 1px solid transparent;\n &.actor-selected, &:hover {\n border: 1px solid #00cec6;\n .actor-name-wrapper {\n display: block;\n }\n }\n ", " {\n positon: absolute;\n }\n .actor-name-wrapper {\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(0,0,0,0.8);\n .actor-name {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n width: 60px;\n text-align: center;\n font-family: SFUIText-Medium;\n font-size: 10px;\n letter-spacing: 0px;\n color: #ffffff;\n word-break: break-word;\n }\n }\n }\n }\n }\n }\n }\n"])), _icon["default"].Element, _icon["default"].Element, _button["default"].Element, _image["default"].Element);
|
|
39
|
-
var MarkerBlock = _styledComponents["default"].div(
|
|
35
|
+
var PlayerControls = _styledComponents["default"].div(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(100% - 4px);\n background: #000000;\n display: flex;\n justify-content: space-between;\n padding: 0 10px;\n align-items: center;\n .controls-left, .controls-right {\n display: flex;\n align-items: center;\n ", " {\n background: transparent;\n border: none;\n margin: 0 10px;\n }\n }\n .controls-left{\n .video-time-display {\n display: flex;\n align-items: center;\n font-family: SFUIText-Regular;\n font-size: 12px;\n letter-spacing: -0.6px;\n .video-time {\n margin: 0 2px;\n &.video-end-time, &.video-time-seperator {\n color: #888888;\n }\n &.video-current-time {\n color: #ffffff;\n min-width: 64px;\n }\n }\n }\n }\n"])), _button["default"].Element);
|
|
36
|
+
var CommentBox = _styledComponents["default"].div(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n background-color: #333333;\n align-items: center;\n justify-content: space-between;\n ", " {\n height: 100%;\n color: #ccc;\n padding: 15px 10px 15px 20px;\n border-bottom: none;\n }\n ", " {\n margin: 0;\n background: #333333;\n border: none;\n ", " {\n svg {\n path {\n fill: #00cec6;\n }\n }\n }\n }\n"])), _inputText["default"].Element, _button["default"].Element, _icon["default"].Element);
|
|
37
|
+
var Carousal = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n height: 91px;\n background: #000000;\n"])));
|
|
38
|
+
var VideoDetailsWrapper = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n width: 36.33%;\n .tab-block {\n height: 100%;\n .tab-container {\n padding: 20px;\n text-align: left;\n .info-block {\n width: 33.33%;\n display: inline-block;\n padding-bottom: 25px;\n &:last-child{\n width: 100%;\n }\n .info-header {\n font-family: SFUIText-Regular;\n font-size: 10px;\n color: #666666;\n color: #cccccc;\n margin-bottom: 20px;\n }\n .info-value {\n font-family: SFUIText-Regular;\n font-size: 14px;\n color: #333333;\n color: #ffffff;\n }\n }\n &.scenes-tab {\n hr {\n border-color: #eeeeee;\n border-color: #4e5c6c;\n }\n .scenes-synopsis {\n .info-header {\n font-family: SFUIText-Regular;\n font-size: 12px;\n color: #333333;\n color: #cccccc;\n text-transform: uppercase;\n margin-bottom: 10px;\n }\n .synopsis {\n font-family: SFUIText-Regular;\n font-size: 12px;\n line-height: 1.33;\n color: #666666;\n color: #ffffff;\n margin-bottom: 10px;\n }\n }\n .scenes-wrapper {\n .scene-container{\n &:last-child {\n hr {\n display: none;\n }\n }\n .scene-block {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n cursor: pointer;\n &:hover{\n .scene-image {\n ", " {\n display: inline-block;\n }\n }\n }\n .scene-image {\n width: 70px;\n height: 70px;\n border-radius: 100%;\n overflow: hidden;\n position: relative;\n ", " {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n }\n }\n .scene-details {\n margin-left: 15px;\n .scene-name {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n margin-bottom: 5px;\n }\n .scene-time {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #888888;\n color: #aaaaaa;\n margin-bottom: 5px;\n }\n .scene-tags-block {\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n .scene-tags {\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: 1.17;\n letter-spacing: normal;\n color: #c7c5c5;\n color: #999999;\n margin-right: 5px;\n }\n }\n }\n }\n }\n }\n }\n &.comments-tab {\n padding: 0;\n position: relative;\n width: 100%;\n height: 100%;\n .comments-section {\n padding: 10px 0;\n height: calc(100% - 73px);\n overflow: auto;\n top: 0;\n position: absolute;\n left: 0;\n width: 100%;\n .comments-details {\n padding: 10px 20px 10px 20px;\n .comments-count {\n font-size: 14px;\n font-weight: normal;\n font-family: SFUIText-Regular;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #cccccc;\n }\n }\n .comments-container {\n .comment-wrapper {\n padding: 20px;\n cursor: pointer;\n &:hover {\n background: #f5f5f5;\n background: #304153;\n }\n .comment-block, .reply-block {\n .comment-header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n margin-bottom: 10px;\n position: relative;\n z-index: 2;\n img {\n width: 30px;\n height: 30px;\n border-radius: 100%;\n left: auto;\n top: auto;\n transform: none;\n }\n .user-name {\n padding: 0px 20px 0px 10px;\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-weight: 500;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n }\n .video-time {\n opacity: 0.8;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #626260;\n color: #cccccc;\n text-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);\n }\n .comment-time {\n opacity: 0.2;\n opacity: 1;\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #000000;\n color: #aaaaaa;\n margin-left: 20px;\n }\n }\n .comment-body {\n p {\n font-family: SFUIText-Regular;\n font-size: 13px;\n font-weight: 300;\n font-style: normal;\n font-stretch: normal;\n line-height: 1.38;\n letter-spacing: normal;\n color: #333333;\n color: #ffffff;\n }\n }\n }\n .reply-wrapper {\n .reply-block {\n padding-left: 20px;\n padding-top: 15px;\n position: relative;\n &:after {\n content: '';\n position: absolute;\n width: 1px;\n height: 100%;\n background: #cccccc;\n background: #4e5c6c;\n top: 15px;\n z-index: 0;\n left: 35px;\n }\n &:last-child {\n &:after {\n display: none;\n }\n }\n .comment-body {\n padding-left: 40px;\n }\n }\n }\n }\n }\n }\n .approval-block {\n height: 73px;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n padding: 0 10px;\n background: #121d29;\n background: #ffffff;\n position: absolute;\n width: 100%;\n bottom: 0;\n ", " {\n font-size: 12px;\n margin: 0 10px;\n }\n }\n }\n &.tags-tab {\n .tag-header {\n font-family: SFUIText-Regular;\n font-size: 12px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #cccccc;\n }\n .characters-list {\n margin: 10px 0;\n .actor-tag {\n width: 70px;\n height: 70px;\n border-radius: 100%;\n background: #121d29;\n display: inline-block;\n vertical-align: middle;\n margin: 10px;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 1px solid transparent;\n &.actor-selected, &:hover {\n border: 1px solid #00cec6;\n .actor-name-wrapper {\n display: block;\n }\n }\n ", " {\n positon: absolute;\n }\n .actor-name-wrapper {\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(0,0,0,0.8);\n .actor-name {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-transform: translate(-50%, -50%);\n -moz-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n -o-transform: translate(-50%, -50%);\n width: 60px;\n text-align: center;\n font-family: SFUIText-Medium;\n font-size: 10px;\n letter-spacing: 0px;\n color: #ffffff;\n word-break: break-word;\n }\n }\n }\n }\n }\n }\n }\n"])), _icon["default"].Element, _icon["default"].Element, _button["default"].Element, _image["default"].Element);
|
|
39
|
+
var MarkerBlock = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n width: 100%;\n height: 10px;\n left:0;\n bottom: 15px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n .scene-marker {\n background: #00cec6;\n position: relative;\n height: 100%;\n display: inline-block;\n vertical-align: top;\n }\n"])));
|
|
40
40
|
var Player = /*#__PURE__*/function (_React$Component) {
|
|
41
41
|
function Player(props) {
|
|
42
42
|
var _this;
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.5",
|
|
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": "9.3.
|
|
10
|
+
"@desynova-digital/tokens": "9.3.5",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|