@desynova-digital/components 8.19.63 → 9.0.1

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 (80) hide show
  1. package/atoms/avatar/avatar.js +1 -1
  2. package/atoms/avatar/avatar.story.js +46 -14
  3. package/atoms/badge/badge.js +13 -13
  4. package/atoms/badge/badge.story.js +91 -29
  5. package/atoms/button/button.js +81 -85
  6. package/atoms/button/button.story.js +342 -2
  7. package/atoms/card/card.js +43 -39
  8. package/atoms/card/card.story.js +74 -48
  9. package/atoms/cardStack/cardStack.js +182 -155
  10. package/atoms/cardStack/cardStack.story.js +131 -18
  11. package/atoms/cardV2/cardV2.js +23 -23
  12. package/atoms/cardV2/cardV2.story.js +196 -45
  13. package/atoms/cardV2/content.js +109 -87
  14. package/atoms/cardV2/thumbnail.js +85 -72
  15. package/atoms/cardV2/timeline.js +119 -107
  16. package/atoms/checkbox/checkbox.js +41 -32
  17. package/atoms/checkbox/checkbox.story.js +220 -99
  18. package/atoms/customSelect/customSelect.story.js +820 -582
  19. package/atoms/datePicker/datePicker.js +77 -83
  20. package/atoms/datePicker/datePicker.story.js +167 -1
  21. package/atoms/dateTime/dateTime.story.js +26 -1
  22. package/atoms/draftInputText/draftInputText.js +358 -0
  23. package/atoms/draftInputText/draftInputText.story.js +251 -0
  24. package/atoms/draftInputText/index.js +13 -0
  25. package/atoms/dropdown/dropdown.story.js +146 -18
  26. package/atoms/dropdownList/dropdownList.story.js +1598 -1091
  27. package/atoms/graphs/barGraph/barGraph.js +143 -130
  28. package/atoms/graphs/barGraph/barGraph.story.js +74 -40
  29. package/atoms/graphs/circleDonut/circleDonut.story.js +374 -220
  30. package/atoms/graphs/circleGraph/circleGraph.js +84 -80
  31. package/atoms/graphs/circleGraph/circleGraph.story.js +38 -26
  32. package/atoms/graphs/circleNested/circleNested.story.js +98 -103
  33. package/atoms/graphs/pieChart/pieChart.story.js +160 -81
  34. package/atoms/graphs/verticalBarGraph/verticalBarGraph.story.js +30 -28
  35. package/atoms/icon/icon.story.js +220 -163
  36. package/atoms/inputText/inputText.js +52 -49
  37. package/atoms/label/label.js +29 -29
  38. package/atoms/label/label.story.js +42 -30
  39. package/atoms/loader/CircleLoader.js +13 -4
  40. package/atoms/loader/CircleLoader.jsx +10 -4
  41. package/atoms/loader/ThreeDotLoader.js +8 -4
  42. package/atoms/loader/ThreeDotLoader.jsx +4 -4
  43. package/atoms/loader/loader.js +29 -30
  44. package/atoms/loader/loader.story.js +38 -23
  45. package/atoms/loader/spinningLoader.js +7 -4
  46. package/atoms/loader/spinningLoader.jsx +5 -5
  47. package/atoms/popup/popup.js +11 -11
  48. package/atoms/popup/popup.story.js +36 -4
  49. package/atoms/radio/radio.story.js +140 -2
  50. package/atoms/sideBar/sidebar.js +19 -5
  51. package/atoms/sideBar/sidebar.jsx +13 -8
  52. package/atoms/switch/switch.js +72 -66
  53. package/atoms/switch/switch.story.js +323 -78
  54. package/atoms/tag/tag.js +39 -39
  55. package/atoms/tag/tag.story.js +83 -2
  56. package/atoms/textarea/textarea.js +36 -34
  57. package/atoms/timeCodeInput/timCodeInput.story.js +10 -9
  58. package/atoms/timeCodeInput/timeCodeInput.js +108 -100
  59. package/atoms/timer/timer.js +127 -126
  60. package/atoms/toast/toast.js +24 -14
  61. package/atoms/toast/toast.story.js +22 -0
  62. package/atoms/videoCard/videoCard.js +226 -203
  63. package/atoms/videoCard/videoCard.story.js +547 -186
  64. package/components.js +69 -66
  65. package/index.js +5 -4
  66. package/molecules/carousel/carousel.js +55 -67
  67. package/molecules/filter/filter.js +133 -106
  68. package/molecules/filter/filter.story.js +215 -173
  69. package/molecules/graphCard/graphCard.js +34 -24
  70. package/molecules/graphCard/graphCard.story.js +169 -82
  71. package/molecules/graphDetailCard/graphDetailCard.js +207 -182
  72. package/molecules/pageHeader/pageHeader.js +3 -2
  73. package/molecules/pageHeader/pageHeader.story.js +40 -18
  74. package/molecules/pagination/pagination.js +66 -14
  75. package/molecules/pagination/pagination.story.js +24 -2
  76. package/molecules/table/table.js +368 -316
  77. package/molecules/table/table.story.js +404 -208
  78. package/molecules/tabs/tabs.js +15 -6
  79. package/molecules/tabs/tabs.story.js +26 -0
  80. package/package.json +2 -2
package/atoms/videoCard/videoCard.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";
1
+ 'use strict';
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
@@ -8,36 +8,38 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
8
8
 
9
9
  var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
10
10
 
11
- var _templateObject = _taggedTemplateLiteral(["\n font-family: \"SFUIText-Regular\";\n width: ", ";\n height: ", ";\n\n cursor: ", ";\n pointer-events: ", ";\n .image-box {\n position: relative;\n height: ", ";\n width: ", ";\n .thumbnail-image-block{\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\n overflow: hidden;\n background: #182738;;\n .circle{\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n background-color: #15212F;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n \n } \n & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .iframe-image-block {\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\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 & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .bottom-box {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 30px 15px 15px;\n color: #fff;\n word-break: break-word;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.77) 0%,\n rgba(99, 99, 99, 0.85) 72%,\n rgba(78, 78, 78, 0.64) 84%,\n rgba(255, 255, 255, 0) 100%\n );\n }\n .thumbnail-overlay-text {\n position: absolute;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n text-transform: uppercase;\n background: rgba(53, 53, 53, 0.78);\n color: #ddd;\n font-family: \"SFUIText-Medium\";\n }\n .top-tag-list {\n position: absolute;\n top: 0px;\n max-width: 100%;\n padding: 10px;\n\n .top-tag-item {\n background: #152130;\n color: #fff;\n padding: 2px 5px;\n border-radius: 2px;\n font-size: 12px;\n text-transform: capitalize;\n }\n }\n .more-action-box {\n display: flex;\n justify-content: center;\n right: 5px;\n top: 0;\n position: absolute;\n z-index: 1;\n cursor: default;\n align-items: center;\n .more-action-item {\n width: 26px;\n height: 26px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 10px 5px;\n cursor: pointer;\n transition: all 350ms ease-in-out;\n position: relative;\n &:hover {\n background: #00cec6;\n .info-section {\n visibility: visible;\n opacity: 1;\n width: auto;\n height: auto;\n padding: 30px;\n }\n }\n .info-section {\n width: 0;\n height: 0;\n visibility: hidden;\n opacity: 0;\n transition: opacity 350ms ease-in-out;\n position: absolute;\n left: 90%;\n background: #15212f;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n padding: 0px;\n margin-left: 9px;\n top: -30px;\n &.left-alligned {\n left: 100%;\n transform: translateX(calc(-100% - 45px));\n &:before {\n content: \"\";\n position: absolute;\n border-left: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-right: none;\n left: 100%;\n top: 38px;\n }\n }\n &:before {\n content: \"\";\n position: absolute;\n border-right: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -5px;\n top: 38px;\n }\n }\n i {\n line-height: 0;\n }\n }\n .asset-status-chip {\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(30px);\n border-radius: 15px;\n padding: 5px 10px;\n font-size: 10px;\n line-height: 10px;\n display: flex;\n width: fit-content;\n position: relative;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n color: #fff;\n max-height: 20px;\n position: relative;\n margin: 0px 5px;\n\n .status-color {\n width: 8px;\n height: 8px;\n border-radius: 100%;\n margin-right: 5px;\n background: #fff;\n }\n\n &.review,\n &.pending,\n &.in-progress,\n &.in-queue {\n .status-color {\n background: #f9e900;\n }\n }\n &.approved,\n &.finished,\n &.upload-fc,\n &.upload-revised-fc {\n .status-color {\n background: #18b96e;\n }\n }\n &.rejected,\n &.cancelled {\n .status-color {\n background: #ff6c56;\n }\n }\n }\n }\n }\n .details-box {\n background: #15212f;\n color: #fff;\n position: relative;\n padding: 15px;\n font-size: 12px;\n transition: all 0.2s ease;\n /* border-radius: 0 0 4px 4px; */\n .main-text {\n font-family: \"SFUIText-Medium\";\n // padding-bottom: 5px;\n margin-bottom: 5px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-break: break-word;\n line-height: 17px;\n }\n .bottom-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .section-left {\n display: flex;\n justify-content: center;\n align-items: center;\n .upload-status {\n font-size: 10px;\n margin-right: 10px;\n animation: fadein 1s infinite ease-in-out;\n }\n .h2,\n .h3,\n .h4 {\n font-size: 10px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n margin-right: 10px;\n }\n .h3,\n .h4 {\n display: flex;\n justify-content: center;\n align-items: center;\n p {\n margin-left: 5px;\n }\n }\n }\n .section-right {\n .status {\n font-size: 10px;\n &.pending,\n &.in-progress,\n &.in-queue {\n color: #f9e900;\n }\n &.approved,\n &.finished {\n color: #18b96e;\n }\n &.rejected,\n &.cancelled {\n color: #ff6c56;\n }\n }\n }\n }\n }\n .actions-box {\n position: relative;\n .action-button-holder {\n position: absolute;\n bottom: 15px;\n right: 0px;\n .action-button {\n display: inline-flex;\n margin-right: 15px;\n background: #00cec6;\n border: 0px solid #00cec6;\n }\n }\n }\n .gradient-icon {\n position: relative;\n div {\n position: absolute;\n bottom: 20px;\n right: 20px;\n }\n }\n .video-card-box {\n background: transparent;\n width: 100%;\n border-radius: 5px;\n .media-box {\n display: table;\n width: 100%;\n padding-bottom: 20px;\n position: relative;\n cursor: pointer;\n .left-side {\n display: inline-block;\n overflow: hidden;\n position: relative;\n display: table-cell;\n overflow: hidden;\n border: 0px solid;\n border-right: 0px;\n vertical-align: middle;\n\n .thumbnail-as {\n font-family: DINCondensed-Bold;\n width: 100%;\n text-align: left;\n font-size: 70px;\n height: 100%;\n color: #303f51;\n }\n .image-box {\n transition: all 0.2s ease;\n width: ", ";\n\n height: ", ";\n\n background-size: auto 100%, cover;\n background-position: 50% 50%;\n font-size: 40px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #848c94;\n\n .play-icon-box {\n background: #90909066;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: none;\n }\n }\n\n .bottom-text {\n color: #aaaaaa;\n font-size: 10px;\n padding-top: 8px;\n }\n }\n .right-side {\n vertical-align: top;\n display: table-cell;\n position: relative;\n width: ", ";\n\n .main-text {\n font-size: 14px;\n font-family: \"SFUIText-Medium\";\n color: #fff;\n margin: 0px 0px 6px;\n padding: 0px 15px;\n line-height: 1.17;\n height: 83px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n .bottom-fixed-text {\n font-size: 10px;\n font-family: \"SFUIText-Medium\";\n color: #aaaaaa;\n position: absolute;\n bottom: 0px;\n padding: 0px 15px;\n }\n }\n &.small .main-text {\n height: 29px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n font-size: 12px;\n }\n &:hover {\n .left-side {\n .image-box {\n background-size: auto 120%, cover;\n .play-icon-box {\n display: flex;\n }\n }\n }\n .right-side {\n .main-text {\n color: #00cec6;\n }\n }\n }\n }\n }\n &:hover {\n .image-box {\n .full-top {\n height: 155px;\n overflow: hidden;\n }\n }\n .details-box {\n .main-text {\n color: #00cec6;\n transition: color 0.5s;\n }\n &.selectable {\n background: #121d29;\n .sub-text {\n color: #ccc;\n }\n .bottom {\n color: #aaa;\n }\n }\n }\n .actions-box {\n .action-button-holder {\n .action-button {\n background: #fff;\n ", " {\n path {\n fill: #00cec6;\n }\n }\n }\n }\n }\n }\n .sub-title {\n font-size: 10px;\n color: #aaaaaa;\n margin-right: 10px;\n }\n .segment-indicator {\n display: inline-block;\n border-width: 0px 1px;\n margin-left: 17px;\n font-size: 10px;\n color: #fff;\n position: relative;\n padding-left: 8px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: #00cec6;\n border-radius: 50%;\n }\n }\n .check-box-holder {\n position: absolute;\n right: 10px;\n bottom: 10px;\n }\n input[type=\"checkbox\"] {\n height: 0;\n width: 0;\n display: none;\n }\n input[type=\"checkbox\"] + label {\n position: relative;\n display: inline-block; // flex;\n margin: 0;\n align-items: center;\n color: #cccccc;\n font-size: 13px;\n transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);\n font-family: SFUIText-Regular;\n cursor: pointer;\n &.list-title {\n display: inline-block;\n }\n }\n input[type=\"checkbox\"]:disabled + label {\n color: #999;\n cursor: not-allowed;\n &:hover > span,\n &:focus + label > span {\n background: transparent;\n }\n }\n input[type=\"checkbox\"]:checked:disabled + label > span {\n border: 10px solid rgba(73, 218, 208, 0.45);\n &:before {\n //background: #ddd;\n }\n }\n input[type=\"checkbox\"] + label > span {\n display: inline-block; // flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9e9e9e;\n border-radius: 50%;\n cursor: pointer;\n transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"] + label:hover > span,\n input[type=\"checkbox\"]:focus + label > span {\n background: rgba(255, 255, 255, 0.1);\n }\n input[type=\"checkbox\"]:checked + label > span {\n border: 10px solid #49dad0;\n animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"]:checked + label > span:before {\n content: \"\";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n }\n .gradient-box {\n display: flex;\n height: 100%;\n width: 100%;\n font-family: \"SFUIText-Medium\";\n background-image: ", ";\n position: relative;\n border-radius: 2px;\n\n .main-text {\n color: #fff;\n font-size: 32px;\n padding: 15px;\n height: 145px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n\n .bottom {\n position: absolute;\n bottom: 0px;\n padding: 15px;\n color: #fff;\n font-size: 12px;\n & > i {\n margin-right: 5px;\n }\n }\n }\n @keyframes shrink-bounce {\n 0% {\n transform: scale(1);\n }\n 33% {\n transform: scale(0.85);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes checkbox-check {\n 0% {\n width: 0;\n height: 0;\n border-color: #fff;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 33% {\n width: 4px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 4px;\n height: 9px;\n border-color: #fff;\n transform: translate3d(0, -0.5em, 0) rotate(45deg);\n }\n }\n @keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n"], ["\n font-family: \"SFUIText-Regular\";\n width: ", ";\n height: ", ";\n\n cursor: ", ";\n pointer-events: ", ";\n .image-box {\n position: relative;\n height: ", ";\n width: ", ";\n .thumbnail-image-block{\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\n overflow: hidden;\n background: #182738;;\n .circle{\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n background-color: #15212F;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n \n } \n & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .iframe-image-block {\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\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 & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .bottom-box {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 30px 15px 15px;\n color: #fff;\n word-break: break-word;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.77) 0%,\n rgba(99, 99, 99, 0.85) 72%,\n rgba(78, 78, 78, 0.64) 84%,\n rgba(255, 255, 255, 0) 100%\n );\n }\n .thumbnail-overlay-text {\n position: absolute;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n text-transform: uppercase;\n background: rgba(53, 53, 53, 0.78);\n color: #ddd;\n font-family: \"SFUIText-Medium\";\n }\n .top-tag-list {\n position: absolute;\n top: 0px;\n max-width: 100%;\n padding: 10px;\n\n .top-tag-item {\n background: #152130;\n color: #fff;\n padding: 2px 5px;\n border-radius: 2px;\n font-size: 12px;\n text-transform: capitalize;\n }\n }\n .more-action-box {\n display: flex;\n justify-content: center;\n right: 5px;\n top: 0;\n position: absolute;\n z-index: 1;\n cursor: default;\n align-items: center;\n .more-action-item {\n width: 26px;\n height: 26px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 10px 5px;\n cursor: pointer;\n transition: all 350ms ease-in-out;\n position: relative;\n &:hover {\n background: #00cec6;\n .info-section {\n visibility: visible;\n opacity: 1;\n width: auto;\n height: auto;\n padding: 30px;\n }\n }\n .info-section {\n width: 0;\n height: 0;\n visibility: hidden;\n opacity: 0;\n transition: opacity 350ms ease-in-out;\n position: absolute;\n left: 90%;\n background: #15212f;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n padding: 0px;\n margin-left: 9px;\n top: -30px;\n &.left-alligned {\n left: 100%;\n transform: translateX(calc(-100% - 45px));\n &:before {\n content: \"\";\n position: absolute;\n border-left: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-right: none;\n left: 100%;\n top: 38px;\n }\n }\n &:before {\n content: \"\";\n position: absolute;\n border-right: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -5px;\n top: 38px;\n }\n }\n i {\n line-height: 0;\n }\n }\n .asset-status-chip {\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(30px);\n border-radius: 15px;\n padding: 5px 10px;\n font-size: 10px;\n line-height: 10px;\n display: flex;\n width: fit-content;\n position: relative;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n color: #fff;\n max-height: 20px;\n position: relative;\n margin: 0px 5px;\n\n .status-color {\n width: 8px;\n height: 8px;\n border-radius: 100%;\n margin-right: 5px;\n background: #fff;\n }\n\n &.review,\n &.pending,\n &.in-progress,\n &.in-queue {\n .status-color {\n background: #f9e900;\n }\n }\n &.approved,\n &.finished,\n &.upload-fc,\n &.upload-revised-fc {\n .status-color {\n background: #18b96e;\n }\n }\n &.rejected,\n &.cancelled {\n .status-color {\n background: #ff6c56;\n }\n }\n }\n }\n }\n .details-box {\n background: #15212f;\n color: #fff;\n position: relative;\n padding: 15px;\n font-size: 12px;\n transition: all 0.2s ease;\n /* border-radius: 0 0 4px 4px; */\n .main-text {\n font-family: \"SFUIText-Medium\";\n // padding-bottom: 5px;\n margin-bottom: 5px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-break: break-word;\n line-height: 17px;\n }\n .bottom-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .section-left {\n display: flex;\n justify-content: center;\n align-items: center;\n .upload-status {\n font-size: 10px;\n margin-right: 10px;\n animation: fadein 1s infinite ease-in-out;\n }\n .h2,\n .h3,\n .h4 {\n font-size: 10px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n margin-right: 10px;\n }\n .h3,\n .h4 {\n display: flex;\n justify-content: center;\n align-items: center;\n p {\n margin-left: 5px;\n }\n }\n }\n .section-right {\n .status {\n font-size: 10px;\n &.pending,\n &.in-progress,\n &.in-queue {\n color: #f9e900;\n }\n &.approved,\n &.finished {\n color: #18b96e;\n }\n &.rejected,\n &.cancelled {\n color: #ff6c56;\n }\n }\n }\n }\n }\n .actions-box {\n position: relative;\n .action-button-holder {\n position: absolute;\n bottom: 15px;\n right: 0px;\n .action-button {\n display: inline-flex;\n margin-right: 15px;\n background: #00cec6;\n border: 0px solid #00cec6;\n }\n }\n }\n .gradient-icon {\n position: relative;\n div {\n position: absolute;\n bottom: 20px;\n right: 20px;\n }\n }\n .video-card-box {\n background: transparent;\n width: 100%;\n border-radius: 5px;\n .media-box {\n display: table;\n width: 100%;\n padding-bottom: 20px;\n position: relative;\n cursor: pointer;\n .left-side {\n display: inline-block;\n overflow: hidden;\n position: relative;\n display: table-cell;\n overflow: hidden;\n border: 0px solid;\n border-right: 0px;\n vertical-align: middle;\n\n .thumbnail-as {\n font-family: DINCondensed-Bold;\n width: 100%;\n text-align: left;\n font-size: 70px;\n height: 100%;\n color: #303f51;\n }\n .image-box {\n transition: all 0.2s ease;\n width: ", ";\n\n height: ", ";\n\n background-size: auto 100%, cover;\n background-position: 50% 50%;\n font-size: 40px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #848c94;\n\n .play-icon-box {\n background: #90909066;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: none;\n }\n }\n\n .bottom-text {\n color: #aaaaaa;\n font-size: 10px;\n padding-top: 8px;\n }\n }\n .right-side {\n vertical-align: top;\n display: table-cell;\n position: relative;\n width: ", ";\n\n .main-text {\n font-size: 14px;\n font-family: \"SFUIText-Medium\";\n color: #fff;\n margin: 0px 0px 6px;\n padding: 0px 15px;\n line-height: 1.17;\n height: 83px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n .bottom-fixed-text {\n font-size: 10px;\n font-family: \"SFUIText-Medium\";\n color: #aaaaaa;\n position: absolute;\n bottom: 0px;\n padding: 0px 15px;\n }\n }\n &.small .main-text {\n height: 29px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n font-size: 12px;\n }\n &:hover {\n .left-side {\n .image-box {\n background-size: auto 120%, cover;\n .play-icon-box {\n display: flex;\n }\n }\n }\n .right-side {\n .main-text {\n color: #00cec6;\n }\n }\n }\n }\n }\n &:hover {\n .image-box {\n .full-top {\n height: 155px;\n overflow: hidden;\n }\n }\n .details-box {\n .main-text {\n color: #00cec6;\n transition: color 0.5s;\n }\n &.selectable {\n background: #121d29;\n .sub-text {\n color: #ccc;\n }\n .bottom {\n color: #aaa;\n }\n }\n }\n .actions-box {\n .action-button-holder {\n .action-button {\n background: #fff;\n ", " {\n path {\n fill: #00cec6;\n }\n }\n }\n }\n }\n }\n .sub-title {\n font-size: 10px;\n color: #aaaaaa;\n margin-right: 10px;\n }\n .segment-indicator {\n display: inline-block;\n border-width: 0px 1px;\n margin-left: 17px;\n font-size: 10px;\n color: #fff;\n position: relative;\n padding-left: 8px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: #00cec6;\n border-radius: 50%;\n }\n }\n .check-box-holder {\n position: absolute;\n right: 10px;\n bottom: 10px;\n }\n input[type=\"checkbox\"] {\n height: 0;\n width: 0;\n display: none;\n }\n input[type=\"checkbox\"] + label {\n position: relative;\n display: inline-block; // flex;\n margin: 0;\n align-items: center;\n color: #cccccc;\n font-size: 13px;\n transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);\n font-family: SFUIText-Regular;\n cursor: pointer;\n &.list-title {\n display: inline-block;\n }\n }\n input[type=\"checkbox\"]:disabled + label {\n color: #999;\n cursor: not-allowed;\n &:hover > span,\n &:focus + label > span {\n background: transparent;\n }\n }\n input[type=\"checkbox\"]:checked:disabled + label > span {\n border: 10px solid rgba(73, 218, 208, 0.45);\n &:before {\n //background: #ddd;\n }\n }\n input[type=\"checkbox\"] + label > span {\n display: inline-block; // flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9e9e9e;\n border-radius: 50%;\n cursor: pointer;\n transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"] + label:hover > span,\n input[type=\"checkbox\"]:focus + label > span {\n background: rgba(255, 255, 255, 0.1);\n }\n input[type=\"checkbox\"]:checked + label > span {\n border: 10px solid #49dad0;\n animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"]:checked + label > span:before {\n content: \"\";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n }\n .gradient-box {\n display: flex;\n height: 100%;\n width: 100%;\n font-family: \"SFUIText-Medium\";\n background-image: ", ";\n position: relative;\n border-radius: 2px;\n\n .main-text {\n color: #fff;\n font-size: 32px;\n padding: 15px;\n height: 145px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n\n .bottom {\n position: absolute;\n bottom: 0px;\n padding: 15px;\n color: #fff;\n font-size: 12px;\n & > i {\n margin-right: 5px;\n }\n }\n }\n @keyframes shrink-bounce {\n 0% {\n transform: scale(1);\n }\n 33% {\n transform: scale(0.85);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes checkbox-check {\n 0% {\n width: 0;\n height: 0;\n border-color: #fff;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 33% {\n width: 4px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 4px;\n height: 9px;\n border-color: #fff;\n transform: translate3d(0, -0.5em, 0) rotate(45deg);\n }\n }\n @keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n"]);
11
+ var _templateObject = _taggedTemplateLiteral(['\n font-family: \'SFUIText-Regular\';\n width: ', ';\n height: ', ';\n\n cursor: ', ';\n pointer-events: ', ';\n .image-box {\n position: relative;\n height: ', ';\n width: ', ';\n .thumbnail-image-block {\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\n overflow: hidden;\n background: #182738;\n .circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #15212f;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .iframe-image-block {\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\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 & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .bottom-box {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 30px 15px 15px;\n color: #fff;\n word-break: break-word;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.77) 0%,\n rgba(99, 99, 99, 0.85) 72%,\n rgba(78, 78, 78, 0.64) 84%,\n rgba(255, 255, 255, 0) 100%\n );\n }\n .thumbnail-overlay-text {\n position: absolute;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n text-transform: uppercase;\n background: rgba(53, 53, 53, 0.78);\n color: #ddd;\n font-family: \'SFUIText-Medium\';\n }\n .top-tag-list {\n position: absolute;\n top: 0px;\n max-width: 100%;\n padding: 10px;\n\n .top-tag-item {\n background: #152130;\n color: #fff;\n padding: 2px 5px;\n border-radius: 2px;\n font-size: 12px;\n text-transform: capitalize;\n }\n }\n .more-action-box {\n display: flex;\n justify-content: center;\n right: 5px;\n top: 0;\n position: absolute;\n z-index: 1;\n cursor: default;\n align-items: center;\n .more-action-item {\n width: 26px;\n height: 26px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 10px 5px;\n cursor: pointer;\n transition: all 350ms ease-in-out;\n position: relative;\n &:hover {\n background: ', '\n .info-section {\n visibility: visible;\n opacity: 1;\n width: auto;\n height: auto;\n padding: 30px;\n }\n }\n .info-section {\n width: 0;\n height: 0;\n visibility: hidden;\n opacity: 0;\n transition: opacity 350ms ease-in-out;\n position: absolute;\n left: 90%;\n background: #15212f;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n padding: 0px;\n margin-left: 9px;\n top: -30px;\n &.left-alligned {\n left: 100%;\n transform: translateX(calc(-100% - 45px));\n &:before {\n content: \'\';\n position: absolute;\n border-left: 5px solid ', '\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-right: none;\n left: 100%;\n top: 38px;\n }\n }\n &:before {\n content: \'\';\n position: absolute;\n border-right: 5px solid ', '\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -5px;\n top: 38px;\n }\n }\n i {\n line-height: 0;\n }\n }\n .asset-status-chip {\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(30px);\n border-radius: 15px;\n padding: 5px 10px;\n font-size: 10px;\n line-height: 10px;\n display: flex;\n width: fit-content;\n position: relative;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n color: #fff;\n max-height: 20px;\n position: relative;\n margin: 0px 5px;\n\n .status-color {\n width: 8px;\n height: 8px;\n border-radius: 100%;\n margin-right: 5px;\n background: #fff;\n }\n\n &.review,\n &.pending,\n &.in-progress,\n &.in-queue {\n .status-color {\n background: #f9e900;\n }\n }\n &.approved,\n &.finished,\n &.upload-fc,\n &.upload-revised-fc {\n .status-color {\n background: #18b96e;\n }\n }\n &.rejected,\n &.cancelled {\n .status-color {\n background: #ff6c56;\n }\n }\n }\n }\n }\n .details-box {\n background: #15212f;\n color: #fff;\n position: relative;\n padding: 15px;\n font-size: 12px;\n transition: all 0.2s ease;\n /* border-radius: 0 0 4px 4px; */\n .main-text {\n font-family: \'SFUIText-Medium\';\n // padding-bottom: 5px;\n margin-bottom: 5px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-break: break-word;\n line-height: 17px;\n }\n .bottom-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .section-left {\n display: flex;\n justify-content: center;\n align-items: center;\n .upload-status {\n font-size: 10px;\n margin-right: 10px;\n animation: fadein 1s infinite ease-in-out;\n }\n .h2,\n .h3,\n .h4 {\n font-size: 10px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n margin-right: 10px;\n }\n .h3,\n .h4 {\n display: flex;\n justify-content: center;\n align-items: center;\n p {\n margin-left: 5px;\n }\n }\n }\n .section-right {\n .status {\n font-size: 10px;\n &.pending,\n &.in-progress,\n &.in-queue {\n color: #f9e900;\n }\n &.approved,\n &.finished {\n color: #18b96e;\n }\n &.rejected,\n &.cancelled {\n color: #ff6c56;\n }\n }\n }\n }\n }\n .actions-box {\n position: relative;\n .action-button-holder {\n position: absolute;\n bottom: 15px;\n right: 0px;\n .action-button {\n display: inline-flex;\n margin-right: 15px;\n background: ', '\n border: 0px solid ', '\n }\n }\n }\n .gradient-icon {\n position: relative;\n div {\n position: absolute;\n bottom: 20px;\n right: 20px;\n }\n }\n .video-card-box {\n background: transparent;\n width: 100%;\n border-radius: 5px;\n .media-box {\n display: table;\n width: 100%;\n padding-bottom: 20px;\n position: relative;\n cursor: pointer;\n .left-side {\n display: inline-block;\n overflow: hidden;\n position: relative;\n display: table-cell;\n overflow: hidden;\n border: 0px solid;\n border-right: 0px;\n vertical-align: middle;\n\n .thumbnail-as {\n font-family: DINCondensed-Bold;\n width: 100%;\n text-align: left;\n font-size: 70px;\n height: 100%;\n color: #303f51;\n }\n .image-box {\n transition: all 0.2s ease;\n width: ', ';\n\n height: ', ';\n\n background-size: auto 100%, cover;\n background-position: 50% 50%;\n font-size: 40px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #848c94;\n\n .play-icon-box {\n background: #90909066;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: none;\n }\n }\n\n .bottom-text {\n color: #aaaaaa;\n font-size: 10px;\n padding-top: 8px;\n }\n }\n .right-side {\n vertical-align: top;\n display: table-cell;\n position: relative;\n width: ', ';\n\n .main-text {\n font-size: 14px;\n font-family: \'SFUIText-Medium\';\n color: #fff;\n margin: 0px 0px 6px;\n padding: 0px 15px;\n line-height: 1.17;\n height: 83px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n .bottom-fixed-text {\n font-size: 10px;\n font-family: \'SFUIText-Medium\';\n color: #aaaaaa;\n position: absolute;\n bottom: 0px;\n padding: 0px 15px;\n }\n }\n &.small .main-text {\n height: 29px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n font-size: 12px;\n }\n &:hover {\n .left-side {\n .image-box {\n background-size: auto 120%, cover;\n .play-icon-box {\n display: flex;\n }\n }\n }\n .right-side {\n .main-text {\n color: ', '\n }\n }\n }\n }\n }\n &:hover {\n .image-box {\n .full-top {\n height: 155px;\n overflow: hidden;\n }\n }\n .details-box {\n .main-text {\n color: ', '\n transition: color 0.5s;\n }\n &.selectable {\n background: #121d29;\n .sub-text {\n color: #ccc;\n }\n .bottom {\n color: #aaa;\n }\n }\n }\n .actions-box {\n .action-button-holder {\n .action-button {\n background: #fff;\n ', ' {\n path {\n fill: ', '\n }\n }\n }\n }\n }\n }\n .sub-title {\n font-size: 10px;\n color: #aaaaaa;\n margin-right: 10px;\n }\n .segment-indicator {\n display: inline-block;\n border-width: 0px 1px;\n margin-left: 17px;\n font-size: 10px;\n color: #fff;\n position: relative;\n padding-left: 8px;\n &:before {\n display: inline-block;\n content: \' \';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ', '\n border-radius: 50%;\n }\n }\n .check-box-holder {\n position: absolute;\n right: 10px;\n bottom: 10px;\n }\n input[type=\'checkbox\'] {\n height: 0;\n width: 0;\n display: none;\n }\n input[type=\'checkbox\'] + label {\n position: relative;\n display: inline-block; // flex;\n margin: 0;\n align-items: center;\n color: #cccccc;\n font-size: 13px;\n transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);\n font-family: SFUIText-Regular;\n cursor: pointer;\n &.list-title {\n display: inline-block;\n }\n }\n input[type=\'checkbox\']:disabled + label {\n color: #999;\n cursor: not-allowed;\n &:hover > span,\n &:focus + label > span {\n background: transparent;\n }\n }\n input[type=\'checkbox\']:checked:disabled + label > span {\n border: 10px solid rgba(73, 218, 208, 0.45);\n &:before {\n //background: #ddd;\n }\n }\n input[type=\'checkbox\'] + label > span {\n display: inline-block; // flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9e9e9e;\n border-radius: 50%;\n cursor: pointer;\n transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\'checkbox\'] + label:hover > span,\n input[type=\'checkbox\']:focus + label > span {\n background: rgba(255, 255, 255, 0.1);\n }\n input[type=\'checkbox\']:checked + label > span {\n border: 10px solid #49dad0;\n animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\'checkbox\']:checked + label > span:before {\n content: \'\';\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n }\n .gradient-box {\n display: flex;\n height: 100%;\n width: 100%;\n font-family: \'SFUIText-Medium\';\n background-image: ', ';\n position: relative;\n border-radius: 2px;\n\n .main-text {\n color: #fff;\n font-size: 32px;\n padding: 15px;\n height: 145px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n\n .bottom {\n position: absolute;\n bottom: 0px;\n padding: 15px;\n color: #fff;\n font-size: 12px;\n & > i {\n margin-right: 5px;\n }\n }\n }\n @keyframes shrink-bounce {\n 0% {\n transform: scale(1);\n }\n 33% {\n transform: scale(0.85);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes checkbox-check {\n 0% {\n width: 0;\n height: 0;\n border-color: #fff;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 33% {\n width: 4px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 4px;\n height: 9px;\n border-color: #fff;\n transform: translate3d(0, -0.5em, 0) rotate(45deg);\n }\n }\n @keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n'], ['\n font-family: \'SFUIText-Regular\';\n width: ', ';\n height: ', ';\n\n cursor: ', ';\n pointer-events: ', ';\n .image-box {\n position: relative;\n height: ', ';\n width: ', ';\n .thumbnail-image-block {\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\n overflow: hidden;\n background: #182738;\n .circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #15212f;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .iframe-image-block {\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\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 & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .bottom-box {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 30px 15px 15px;\n color: #fff;\n word-break: break-word;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.77) 0%,\n rgba(99, 99, 99, 0.85) 72%,\n rgba(78, 78, 78, 0.64) 84%,\n rgba(255, 255, 255, 0) 100%\n );\n }\n .thumbnail-overlay-text {\n position: absolute;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n text-transform: uppercase;\n background: rgba(53, 53, 53, 0.78);\n color: #ddd;\n font-family: \'SFUIText-Medium\';\n }\n .top-tag-list {\n position: absolute;\n top: 0px;\n max-width: 100%;\n padding: 10px;\n\n .top-tag-item {\n background: #152130;\n color: #fff;\n padding: 2px 5px;\n border-radius: 2px;\n font-size: 12px;\n text-transform: capitalize;\n }\n }\n .more-action-box {\n display: flex;\n justify-content: center;\n right: 5px;\n top: 0;\n position: absolute;\n z-index: 1;\n cursor: default;\n align-items: center;\n .more-action-item {\n width: 26px;\n height: 26px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 10px 5px;\n cursor: pointer;\n transition: all 350ms ease-in-out;\n position: relative;\n &:hover {\n background: ', '\n .info-section {\n visibility: visible;\n opacity: 1;\n width: auto;\n height: auto;\n padding: 30px;\n }\n }\n .info-section {\n width: 0;\n height: 0;\n visibility: hidden;\n opacity: 0;\n transition: opacity 350ms ease-in-out;\n position: absolute;\n left: 90%;\n background: #15212f;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n padding: 0px;\n margin-left: 9px;\n top: -30px;\n &.left-alligned {\n left: 100%;\n transform: translateX(calc(-100% - 45px));\n &:before {\n content: \'\';\n position: absolute;\n border-left: 5px solid ', '\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-right: none;\n left: 100%;\n top: 38px;\n }\n }\n &:before {\n content: \'\';\n position: absolute;\n border-right: 5px solid ', '\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -5px;\n top: 38px;\n }\n }\n i {\n line-height: 0;\n }\n }\n .asset-status-chip {\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(30px);\n border-radius: 15px;\n padding: 5px 10px;\n font-size: 10px;\n line-height: 10px;\n display: flex;\n width: fit-content;\n position: relative;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n color: #fff;\n max-height: 20px;\n position: relative;\n margin: 0px 5px;\n\n .status-color {\n width: 8px;\n height: 8px;\n border-radius: 100%;\n margin-right: 5px;\n background: #fff;\n }\n\n &.review,\n &.pending,\n &.in-progress,\n &.in-queue {\n .status-color {\n background: #f9e900;\n }\n }\n &.approved,\n &.finished,\n &.upload-fc,\n &.upload-revised-fc {\n .status-color {\n background: #18b96e;\n }\n }\n &.rejected,\n &.cancelled {\n .status-color {\n background: #ff6c56;\n }\n }\n }\n }\n }\n .details-box {\n background: #15212f;\n color: #fff;\n position: relative;\n padding: 15px;\n font-size: 12px;\n transition: all 0.2s ease;\n /* border-radius: 0 0 4px 4px; */\n .main-text {\n font-family: \'SFUIText-Medium\';\n // padding-bottom: 5px;\n margin-bottom: 5px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-break: break-word;\n line-height: 17px;\n }\n .bottom-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .section-left {\n display: flex;\n justify-content: center;\n align-items: center;\n .upload-status {\n font-size: 10px;\n margin-right: 10px;\n animation: fadein 1s infinite ease-in-out;\n }\n .h2,\n .h3,\n .h4 {\n font-size: 10px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n margin-right: 10px;\n }\n .h3,\n .h4 {\n display: flex;\n justify-content: center;\n align-items: center;\n p {\n margin-left: 5px;\n }\n }\n }\n .section-right {\n .status {\n font-size: 10px;\n &.pending,\n &.in-progress,\n &.in-queue {\n color: #f9e900;\n }\n &.approved,\n &.finished {\n color: #18b96e;\n }\n &.rejected,\n &.cancelled {\n color: #ff6c56;\n }\n }\n }\n }\n }\n .actions-box {\n position: relative;\n .action-button-holder {\n position: absolute;\n bottom: 15px;\n right: 0px;\n .action-button {\n display: inline-flex;\n margin-right: 15px;\n background: ', '\n border: 0px solid ', '\n }\n }\n }\n .gradient-icon {\n position: relative;\n div {\n position: absolute;\n bottom: 20px;\n right: 20px;\n }\n }\n .video-card-box {\n background: transparent;\n width: 100%;\n border-radius: 5px;\n .media-box {\n display: table;\n width: 100%;\n padding-bottom: 20px;\n position: relative;\n cursor: pointer;\n .left-side {\n display: inline-block;\n overflow: hidden;\n position: relative;\n display: table-cell;\n overflow: hidden;\n border: 0px solid;\n border-right: 0px;\n vertical-align: middle;\n\n .thumbnail-as {\n font-family: DINCondensed-Bold;\n width: 100%;\n text-align: left;\n font-size: 70px;\n height: 100%;\n color: #303f51;\n }\n .image-box {\n transition: all 0.2s ease;\n width: ', ';\n\n height: ', ';\n\n background-size: auto 100%, cover;\n background-position: 50% 50%;\n font-size: 40px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #848c94;\n\n .play-icon-box {\n background: #90909066;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: none;\n }\n }\n\n .bottom-text {\n color: #aaaaaa;\n font-size: 10px;\n padding-top: 8px;\n }\n }\n .right-side {\n vertical-align: top;\n display: table-cell;\n position: relative;\n width: ', ';\n\n .main-text {\n font-size: 14px;\n font-family: \'SFUIText-Medium\';\n color: #fff;\n margin: 0px 0px 6px;\n padding: 0px 15px;\n line-height: 1.17;\n height: 83px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n .bottom-fixed-text {\n font-size: 10px;\n font-family: \'SFUIText-Medium\';\n color: #aaaaaa;\n position: absolute;\n bottom: 0px;\n padding: 0px 15px;\n }\n }\n &.small .main-text {\n height: 29px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n font-size: 12px;\n }\n &:hover {\n .left-side {\n .image-box {\n background-size: auto 120%, cover;\n .play-icon-box {\n display: flex;\n }\n }\n }\n .right-side {\n .main-text {\n color: ', '\n }\n }\n }\n }\n }\n &:hover {\n .image-box {\n .full-top {\n height: 155px;\n overflow: hidden;\n }\n }\n .details-box {\n .main-text {\n color: ', '\n transition: color 0.5s;\n }\n &.selectable {\n background: #121d29;\n .sub-text {\n color: #ccc;\n }\n .bottom {\n color: #aaa;\n }\n }\n }\n .actions-box {\n .action-button-holder {\n .action-button {\n background: #fff;\n ', ' {\n path {\n fill: ', '\n }\n }\n }\n }\n }\n }\n .sub-title {\n font-size: 10px;\n color: #aaaaaa;\n margin-right: 10px;\n }\n .segment-indicator {\n display: inline-block;\n border-width: 0px 1px;\n margin-left: 17px;\n font-size: 10px;\n color: #fff;\n position: relative;\n padding-left: 8px;\n &:before {\n display: inline-block;\n content: \' \';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ', '\n border-radius: 50%;\n }\n }\n .check-box-holder {\n position: absolute;\n right: 10px;\n bottom: 10px;\n }\n input[type=\'checkbox\'] {\n height: 0;\n width: 0;\n display: none;\n }\n input[type=\'checkbox\'] + label {\n position: relative;\n display: inline-block; // flex;\n margin: 0;\n align-items: center;\n color: #cccccc;\n font-size: 13px;\n transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);\n font-family: SFUIText-Regular;\n cursor: pointer;\n &.list-title {\n display: inline-block;\n }\n }\n input[type=\'checkbox\']:disabled + label {\n color: #999;\n cursor: not-allowed;\n &:hover > span,\n &:focus + label > span {\n background: transparent;\n }\n }\n input[type=\'checkbox\']:checked:disabled + label > span {\n border: 10px solid rgba(73, 218, 208, 0.45);\n &:before {\n //background: #ddd;\n }\n }\n input[type=\'checkbox\'] + label > span {\n display: inline-block; // flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9e9e9e;\n border-radius: 50%;\n cursor: pointer;\n transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\'checkbox\'] + label:hover > span,\n input[type=\'checkbox\']:focus + label > span {\n background: rgba(255, 255, 255, 0.1);\n }\n input[type=\'checkbox\']:checked + label > span {\n border: 10px solid #49dad0;\n animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\'checkbox\']:checked + label > span:before {\n content: \'\';\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n }\n .gradient-box {\n display: flex;\n height: 100%;\n width: 100%;\n font-family: \'SFUIText-Medium\';\n background-image: ', ';\n position: relative;\n border-radius: 2px;\n\n .main-text {\n color: #fff;\n font-size: 32px;\n padding: 15px;\n height: 145px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n\n .bottom {\n position: absolute;\n bottom: 0px;\n padding: 15px;\n color: #fff;\n font-size: 12px;\n & > i {\n margin-right: 5px;\n }\n }\n }\n @keyframes shrink-bounce {\n 0% {\n transform: scale(1);\n }\n 33% {\n transform: scale(0.85);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes checkbox-check {\n 0% {\n width: 0;\n height: 0;\n border-color: #fff;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 33% {\n width: 4px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 4px;\n height: 9px;\n border-color: #fff;\n transform: translate3d(0, -0.5em, 0) rotate(45deg);\n }\n }\n @keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n']);
12
12
 
13
- var _react = require("react");
13
+ var _react = require('react');
14
14
 
15
15
  var _react2 = _interopRequireDefault(_react);
16
16
 
17
- var _styledComponents = require("styled-components");
17
+ var _styledComponents = require('styled-components');
18
18
 
19
19
  var _styledComponents2 = _interopRequireDefault(_styledComponents);
20
20
 
21
- var _icon = require("../../atoms/icon");
21
+ var _icon = require('../../atoms/icon');
22
22
 
23
23
  var _icon2 = _interopRequireDefault(_icon);
24
24
 
25
- var _button = require("../../atoms/button");
25
+ var _button = require('../../atoms/button');
26
26
 
27
27
  var _button2 = _interopRequireDefault(_button);
28
28
 
29
- var _dateTime = require("../dateTime/dateTime");
29
+ var _dateTime = require('../dateTime/dateTime');
30
30
 
31
31
  var _dateTime2 = _interopRequireDefault(_dateTime);
32
32
 
33
- var _colors = require("../../../tokens/colors");
33
+ var _tokens = require('@desynova-digital/tokens');
34
34
 
35
- var _colors2 = _interopRequireDefault(_colors);
36
-
37
- var _permissionIconMap = require("../../../tokens/permissionIconMap");
35
+ var _permissionIconMap = require('../../../tokens/permissionIconMap');
38
36
 
39
37
  var _permissionIconMap2 = _interopRequireDefault(_permissionIconMap);
40
38
 
39
+ var _propTypes = require('prop-types');
40
+
41
+ var _propTypes2 = _interopRequireDefault(_propTypes);
42
+
41
43
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
42
44
 
43
45
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -49,27 +51,45 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
49
51
  function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
50
52
 
51
53
  var VideoCardStyled = _styledComponents2.default.div(_templateObject, function (props) {
52
- return props.width ? props.width + "px" : defaultDimensions[props.display_type][props.display_size] ? defaultDimensions[props.display_type][props.display_size].width : defaultDimensions[props.display_type] && defaultDimensions[props.display_type].width ? defaultDimensions[props.display_type].width : "100%";
54
+ return props.width ? props.width + 'px' : defaultDimensions[props.display_type][props.display_size] ? defaultDimensions[props.display_type][props.display_size].width : defaultDimensions[props.display_type] && defaultDimensions[props.display_type].width ? defaultDimensions[props.display_type].width : '100%';
55
+ }, function (props) {
56
+ return props.height ? props.height + 'px' : defaultDimensions[props.display_type] && defaultDimensions[props.display_type].height ? defaultDimensions[props.display_type].height : '100%';
57
+ }, function (props) {
58
+ return props.default_action ? 'pointer' : 'default';
59
+ }, function (props) {
60
+ return props.isDisabled ? 'none' : 'all';
61
+ }, function (props) {
62
+ return defaultDimensions[props.display_type] && defaultDimensions[props.display_type].img && defaultDimensions[props.display_type].img.height ? defaultDimensions[props.display_type].img.height : '100%';
53
63
  }, function (props) {
54
- return props.height ? props.height + "px" : defaultDimensions[props.display_type] && defaultDimensions[props.display_type].height ? defaultDimensions[props.display_type].height : "100%";
64
+ return defaultDimensions[props.display_type] && defaultDimensions[props.display_type].img && defaultDimensions[props.display_type].img.width ? defaultDimensions[props.display_type].img.width : '100%';
55
65
  }, function (props) {
56
- return props.default_action ? "pointer" : "default";
66
+ return _tokens.colors[props.theme].videoCard.themeColor;
57
67
  }, function (props) {
58
- return props.isDisabled ? "none" : "all";
68
+ return _tokens.colors[props.theme].videoCard.themeColor;
59
69
  }, function (props) {
60
- return defaultDimensions[props.display_type] && defaultDimensions[props.display_type].img && defaultDimensions[props.display_type].img.height ? defaultDimensions[props.display_type].img.height : "100%";
70
+ return _tokens.colors[props.theme].videoCard.themeColor;
61
71
  }, function (props) {
62
- return defaultDimensions[props.display_type] && defaultDimensions[props.display_type].img && defaultDimensions[props.display_type].img.width ? defaultDimensions[props.display_type].img.width : "100%";
72
+ return _tokens.colors[props.theme].videoCard.themeColor;
63
73
  }, function (props) {
64
- return props.display_size === "thumbnail" && props.width ? props.width + "px" : defaultDimensions[props.display_type] && defaultDimensions[props.display_type][props.display_size] && defaultDimensions[props.display_type][props.display_size].img.width ? defaultDimensions[props.display_type][props.display_size].img.width : "100%";
74
+ return _tokens.colors[props.theme].videoCard.themeColor;
65
75
  }, function (props) {
66
- return props.display_size === "thumbnail" && props.width ? props.width / 1.79 + "px" : defaultDimensions[props.display_type] && defaultDimensions[props.display_type][props.display_size] && defaultDimensions[props.display_type][props.display_size].img.width ? defaultDimensions[props.display_type][props.display_size].img.height : "auto";
76
+ return props.display_size === 'thumbnail' && props.width ? props.width + 'px' : defaultDimensions[props.display_type] && defaultDimensions[props.display_type][props.display_size] && defaultDimensions[props.display_type][props.display_size].img.width ? defaultDimensions[props.display_type][props.display_size].img.width : '100%';
67
77
  }, function (props) {
68
- return defaultDimensions[props.display_type] && defaultDimensions[props.display_type][props.display_size] && defaultDimensions[props.display_type][props.display_size].width ? defaultDimensions[props.display_type][props.display_size].data.width : "100%";
78
+ return props.display_size === 'thumbnail' && props.width ? props.width / 1.79 + 'px' : defaultDimensions[props.display_type] && defaultDimensions[props.display_type][props.display_size] && defaultDimensions[props.display_type][props.display_size].img.width ? defaultDimensions[props.display_type][props.display_size].img.height : 'auto';
79
+ }, function (props) {
80
+ return defaultDimensions[props.display_type] && defaultDimensions[props.display_type][props.display_size] && defaultDimensions[props.display_type][props.display_size].width ? defaultDimensions[props.display_type][props.display_size].data.width : '100%';
81
+ }, function (props) {
82
+ return _tokens.colors[props.theme].videoCard.themeColor;
83
+ }, function (props) {
84
+ return _tokens.colors[props.theme].videoCard.themeColor;
69
85
  }, _icon2.default.Element, function (props) {
86
+ return _tokens.colors[props.theme].videoCard.themeColor;
87
+ }, function (props) {
88
+ return _tokens.colors[props.theme].videoCard.themeColor;
89
+ }, function (props) {
70
90
  //linear-gradient(to bottom, #edbe55, #ff8185)
71
- var gradValue = props.gradient ? props.gradient : "grad" + parseInt(Math.random() * 10);
72
- return _colors2.default[props.theme].videoCard.gradient[gradValue];
91
+ var gradValue = props.gradient ? props.gradient : 'grad' + parseInt(Math.random() * 10);
92
+ return _tokens.colors[props.theme].videoCard.gradient[gradValue];
73
93
  });
74
94
 
75
95
  var VideoCard = function (_React$Component) {
@@ -89,20 +109,20 @@ var VideoCard = function (_React$Component) {
89
109
  if (xdate.getFullYear() === todayDate.getFullYear()) {} else {
90
110
  diff = todayDate.getFullYear() - xdate.getFullYear();
91
111
 
92
- return diff + " year" + (diff > 1 ? "s" : "") + " ago";
112
+ return diff + ' year' + (diff > 1 ? 's' : '') + ' ago';
93
113
  }
94
114
 
95
115
  if (xdate.getMonth() === todayDate.getMonth()) {} else {
96
116
  diff = todayDate.getMonth() - xdate.getMonth();
97
117
 
98
- return diff + " month" + (diff > 1 ? "s" : "") + " ago";
118
+ return diff + ' month' + (diff > 1 ? 's' : '') + ' ago';
99
119
  }
100
120
  if (xdate.getDate() === todayDate.getDate()) {
101
- return "Today";
121
+ return 'Today';
102
122
  } else {
103
123
  diff = todayDate.getDate() - xdate.getDate();
104
124
 
105
- return diff + " day" + (diff > 1 ? "s" : "") + " ago";
125
+ return diff + ' day' + (diff > 1 ? 's' : '') + ' ago';
106
126
  }
107
127
  };
108
128
 
@@ -117,18 +137,18 @@ var VideoCard = function (_React$Component) {
117
137
  var iframeOffsetHeight = offsetHeight / iframeCount;
118
138
  var imageChangePoint = offsetWidth / iframeCount;
119
139
  var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
120
- _this._hoverPointer.style.left = event.offsetX + "px";
140
+ _this._hoverPointer.style.left = event.offsetX + 'px';
121
141
  var imageNum = parseInt(event.offsetX / imageChangePoint) || 1;
122
142
  var imageTop = iframeOffsetHeight * imageNum + offsetTop;
123
143
  if (imageTop > offsetHeight) {
124
144
  imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
125
145
  }
126
- _this._iframeImage.style.top = "-" + imageTop + "px";
146
+ _this._iframeImage.style.top = '-' + imageTop + 'px';
127
147
  }
128
148
  };
129
149
 
130
150
  _this.formatCardStatus = function (status) {
131
- return status.toLowerCase().split(" ").join("-");
151
+ return status.toLowerCase().split(' ').join('-');
132
152
  };
133
153
 
134
154
  _this.handleMouseMove = _this.handleMouseMove.bind(_this);
@@ -136,7 +156,7 @@ var VideoCard = function (_React$Component) {
136
156
  }
137
157
 
138
158
  _createClass(VideoCard, [{
139
- key: "render",
159
+ key: 'render',
140
160
  value: function render() {
141
161
  var _this2 = this;
142
162
 
@@ -175,19 +195,21 @@ var VideoCard = function (_React$Component) {
175
195
  file_type = _props.file_type;
176
196
 
177
197
  var iconMap = {
178
- 'audio': 'audio_track_ingest',
179
- 'document': 'document-icon'
198
+ audio: 'audio_track_ingest',
199
+ document: 'document-icon'
180
200
  };
201
+
181
202
  return _react2.default.createElement(
182
203
  VideoCardStyled,
183
204
  _extends({
184
- className: display_type + " card-main"
205
+ theme: this.props.theme,
206
+ className: display_type + ' card-main'
185
207
  }, this.props, {
186
208
  onClick: function onClick(e) {
187
- if (e.target.closest(".check-box-holder")) {
209
+ if (e.target.closest('.check-box-holder')) {
188
210
  cardSelectionChangeHandler(!isSelected, id);
189
211
  } else if (default_action && actionClickHandler) {
190
- if (!e.target.closest(".action-button-holder") && !e.target.closest(".more-action-box")) {
212
+ if (!e.target.closest('.action-button-holder') && !e.target.closest('.more-action-box')) {
191
213
  actionClickHandler(id, default_action, e);
192
214
  }
193
215
  } else {
@@ -195,48 +217,48 @@ var VideoCard = function (_React$Component) {
195
217
  }
196
218
  }
197
219
  }),
198
- display_type === "type1" || display_type === "type2" || display_type === "type3" ? _react2.default.createElement(
199
- "div",
220
+ display_type === 'type1' || display_type === 'type2' || display_type === 'type3' ? _react2.default.createElement(
221
+ 'div',
200
222
  {
201
- className: "image-box",
223
+ className: 'image-box',
202
224
  style: {
203
- backgroundImage: gradient ? _colors2.default[theme].videoCard.gradient[gradient] : "",
204
- backgroundSize: "" + (display_type === "type3" ? "auto 100%, cover" : "100%, cover"),
205
- backgroundPositionX: "50% 50%",
206
- backgroundRepeat: "no-repeat"
225
+ backgroundImage: gradient ? _tokens.colors[theme].videoCard.gradient[gradient] : '',
226
+ backgroundSize: '' + (display_type === 'type3' ? 'auto 100%, cover' : '100%, cover'),
227
+ backgroundPositionX: '50% 50%',
228
+ backgroundRepeat: 'no-repeat'
207
229
  }
208
230
  },
209
231
  thumbnail && !gradient && _react2.default.createElement(
210
- "div",
211
- { className: "thumbnail-image-block" },
212
- _react2.default.createElement("img", { className: "thumbnail-image", src: thumbnail })
232
+ 'div',
233
+ { className: 'thumbnail-image-block' },
234
+ _react2.default.createElement('img', { className: 'thumbnail-image', src: thumbnail })
213
235
  ),
214
236
  !thumbnail && !gradient && file_type !== 'video' && file_type !== 'image' && _react2.default.createElement(
215
- "div",
216
- { className: "thumbnail-image-block" },
237
+ 'div',
238
+ { className: 'thumbnail-image-block' },
217
239
  _react2.default.createElement(
218
- "div",
219
- { className: "circle" },
220
- _react2.default.createElement(_icon2.default, { name: "" + iconMap[file_type] || 'default', width: 20, height: 20 })
240
+ 'div',
241
+ { className: 'circle' },
242
+ _react2.default.createElement(_icon2.default, { name: '' + iconMap[file_type] || 'default', width: 20, height: 20 })
221
243
  )
222
244
  ),
223
- (display_type === "type1" || display_type === "type2") && iframeURL && !gradient ? _react2.default.createElement(
224
- "div",
245
+ (display_type === 'type1' || display_type === 'type2') && iframeURL && !gradient ? _react2.default.createElement(
246
+ 'div',
225
247
  {
226
248
  onMouseMove: this.handleMouseMove,
227
- className: "iframe-image-block",
249
+ className: 'iframe-image-block',
228
250
  ref: function ref(iframeImageBlock) {
229
251
  _this2._iframeImageBlock = iframeImageBlock;
230
252
  }
231
253
  },
232
- _react2.default.createElement("div", {
233
- className: "hover-pointer",
254
+ _react2.default.createElement('div', {
255
+ className: 'hover-pointer',
234
256
  ref: function ref(hoverPointer) {
235
257
  _this2._hoverPointer = hoverPointer;
236
258
  }
237
259
  }),
238
- _react2.default.createElement("img", {
239
- className: "iframe-image",
260
+ _react2.default.createElement('img', {
261
+ className: 'iframe-image',
240
262
  ref: function ref(iframeImage) {
241
263
  _this2._iframeImage = iframeImage;
242
264
  },
@@ -244,41 +266,39 @@ var VideoCard = function (_React$Component) {
244
266
  })
245
267
  ) : null,
246
268
  overLayText && overLayText.length > 0 ? _react2.default.createElement(
247
- "div",
248
- { className: "thumbnail-overlay-text" },
269
+ 'div',
270
+ { className: 'thumbnail-overlay-text' },
249
271
  overLayText
250
272
  ) : null,
251
273
  categoryText && categoryText.length > 0 ? _react2.default.createElement(
252
- "div",
253
- { className: "top-tag-list" },
274
+ 'div',
275
+ { className: 'top-tag-list' },
254
276
  categoryText.map(function (item) {
255
277
  return _react2.default.createElement(
256
- "span",
257
- { className: "top-tag-item" },
278
+ 'span',
279
+ { className: 'top-tag-item' },
258
280
  item
259
281
  );
260
282
  })
261
283
  ) : null,
262
284
  moreActions || info || assetStatus ? _react2.default.createElement(
263
- "div",
264
- { className: "more-action-box" },
265
- display_type === "type1" && assetStatus && _react2.default.createElement(
266
- "div",
267
- {
268
- className: "asset-status-chip " + this.formatCardStatus(assetStatus)
269
- },
270
- _react2.default.createElement("div", { className: "status-color" }),
285
+ 'div',
286
+ { className: 'more-action-box' },
287
+ display_type === 'type1' && assetStatus && _react2.default.createElement(
288
+ 'div',
289
+ { className: 'asset-status-chip ' + this.formatCardStatus(assetStatus) },
290
+ _react2.default.createElement('div', { className: 'status-color' }),
271
291
  _react2.default.createElement(
272
- "p",
273
- { className: "status-name" },
292
+ 'p',
293
+ { className: 'status-name' },
274
294
  assetStatus
275
295
  )
276
296
  ),
277
297
  moreActions && moreActions.length > 0 && moreActions.map(function (item) {
278
298
  return _react2.default.createElement(
279
- "div",
299
+ 'div',
280
300
  {
281
- className: "more-action-item",
301
+ className: 'more-action-item',
282
302
  onClick: function onClick(e) {
283
303
  if (_this2.props.actionClickHandler) {
284
304
  _this2.props.actionClickHandler(_this2.props.id, item.field, e);
@@ -291,78 +311,78 @@ var VideoCard = function (_React$Component) {
291
311
  );
292
312
  })
293
313
  ) : null,
294
- display_type === "type3" ? _react2.default.createElement(
295
- "div",
296
- { className: "bottom-box" },
314
+ display_type === 'type3' ? _react2.default.createElement(
315
+ 'div',
316
+ { className: 'bottom-box' },
297
317
  h1
298
318
  ) : null
299
319
  ) : null,
300
- display_type === "type1" || display_type === "type2" ? _react2.default.createElement(
301
- "div",
302
- { className: "details-box" + (selectable ? " selectable" : "") },
320
+ display_type === 'type1' || display_type === 'type2' ? _react2.default.createElement(
321
+ 'div',
322
+ { className: 'details-box' + (selectable ? ' selectable' : '') },
303
323
  _react2.default.createElement(
304
- "div",
305
- { className: "main-text" },
324
+ 'div',
325
+ { className: 'main-text' },
306
326
  h1
307
327
  ),
308
328
  _react2.default.createElement(
309
- "div",
310
- { className: "bottom-section" },
329
+ 'div',
330
+ { className: 'bottom-section' },
311
331
  _react2.default.createElement(
312
- "div",
313
- { className: "section-left" },
332
+ 'div',
333
+ { className: 'section-left' },
314
334
  uploadStatus ? _react2.default.createElement(
315
- "div",
316
- { className: "upload-status" },
335
+ 'div',
336
+ { className: 'upload-status' },
317
337
  uploadStatus
318
338
  ) : null,
319
339
  h2 ? _react2.default.createElement(
320
- "div",
321
- { className: "h2" },
340
+ 'div',
341
+ { className: 'h2' },
322
342
  h2
323
343
  ) : null,
324
344
  h3 ? _react2.default.createElement(
325
- "div",
326
- { className: "h3" },
345
+ 'div',
346
+ { className: 'h3' },
327
347
  _react2.default.createElement(
328
- "p",
348
+ 'p',
329
349
  null,
330
350
  h3
331
351
  )
332
352
  ) : null,
333
353
  h4 ? _react2.default.createElement(
334
- "div",
335
- { className: "h4" },
354
+ 'div',
355
+ { className: 'h4' },
336
356
  _react2.default.createElement(
337
- "p",
357
+ 'p',
338
358
  null,
339
359
  h4
340
360
  )
341
361
  ) : null
342
362
  ),
343
363
  _react2.default.createElement(
344
- "div",
345
- { className: "section-right" },
346
- display_type === "type2" && assetStatus ? _react2.default.createElement(
347
- "p",
348
- { className: "status " + this.formatCardStatus(assetStatus) },
364
+ 'div',
365
+ { className: 'section-right' },
366
+ display_type === 'type2' && assetStatus ? _react2.default.createElement(
367
+ 'p',
368
+ { className: 'status ' + this.formatCardStatus(assetStatus) },
349
369
  assetStatus
350
370
  ) : null,
351
- taskType && taskType !== "phupload_ingest" ? _react2.default.createElement(_icon2.default, { name: taskType, width: 14, height: 14 }) : null,
352
- taskType && taskType === "phupload_ingest" ? _react2.default.createElement(_icon2.default, {
353
- name: "ingest",
371
+ taskType && taskType !== 'phupload_ingest' ? _react2.default.createElement(_icon2.default, { name: taskType, width: 14, height: 14 }) : null,
372
+ taskType && taskType === 'phupload_ingest' ? _react2.default.createElement(_icon2.default, {
373
+ name: 'ingest',
354
374
  width: 20,
355
375
  height: 20,
356
- color: uploadType === "fc" ? "#07d5cd" : "#ff8d29"
376
+ color: uploadType === 'fc' ? '#07d5cd' : '#ff8d29'
357
377
  }) : null
358
378
  )
359
379
  ),
360
380
  selectable ? _react2.default.createElement(
361
- "span",
362
- { className: "check-box-holder" },
363
- _react2.default.createElement("input", {
381
+ 'span',
382
+ { className: 'check-box-holder' },
383
+ _react2.default.createElement('input', {
364
384
  id: id,
365
- type: "checkbox",
385
+ type: 'checkbox',
366
386
  onClick: function onClick(e) {
367
387
  //this.checkUnCheck(e, 'title', this.ifAllChecked());
368
388
  cardSelectionChangeHandler(!isSelected, id);
@@ -370,20 +390,20 @@ var VideoCard = function (_React$Component) {
370
390
  checked: isSelected
371
391
  }),
372
392
  _react2.default.createElement(
373
- "label",
374
- { htmlFor: id, className: "list-title" },
375
- _react2.default.createElement("span", null),
376
- ""
393
+ 'label',
394
+ { htmlFor: id, className: 'list-title' },
395
+ _react2.default.createElement('span', null),
396
+ ''
377
397
  )
378
398
  ) : null
379
399
  ) : null,
380
- display_type === "type4" ? _react2.default.createElement(
381
- "div",
382
- { className: "video-card-box" },
400
+ display_type === 'type4' ? _react2.default.createElement(
401
+ 'div',
402
+ { className: 'video-card-box' },
383
403
  _react2.default.createElement(
384
- "div",
404
+ 'div',
385
405
  {
386
- className: display_size ? display_size + " media-box" : "media-box",
406
+ className: display_size ? display_size + ' media-box' : 'media-box',
387
407
  onClick: function onClick(e) {
388
408
  if (actionClickHandler) {
389
409
  actionClickHandler(id, default_action, e);
@@ -393,52 +413,56 @@ var VideoCard = function (_React$Component) {
393
413
  }
394
414
  },
395
415
  _react2.default.createElement(
396
- "div",
397
- { className: "left-side" },
416
+ 'div',
417
+ { className: 'left-side' },
398
418
  _react2.default.createElement(
399
- "div",
419
+ 'div',
400
420
  {
401
- className: "image-box",
421
+ className: 'image-box',
402
422
  style: {
403
- backgroundImage: thumbnailAs ? null : thumbnail ? "url(" + thumbnail + ")" : "url(https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png)"
423
+ backgroundImage: thumbnailAs ? null : thumbnail ? 'url(' + thumbnail + ')' : 'url(https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png)'
404
424
  }
405
425
  },
406
426
  thumbnail && !gradient && _react2.default.createElement(
407
- "div",
408
- { className: "thumbnail-image-block" },
409
- _react2.default.createElement("img", { className: "thumbnail-image", src: thumbnail })
427
+ 'div',
428
+ { className: 'thumbnail-image-block' },
429
+ _react2.default.createElement('img', { className: 'thumbnail-image', src: thumbnail })
410
430
  ),
411
431
  !thumbnail && !gradient && file_type !== 'video' && file_type !== 'image' && _react2.default.createElement(
412
- "div",
413
- { className: "thumbnail-image-block" },
432
+ 'div',
433
+ { className: 'thumbnail-image-block' },
414
434
  _react2.default.createElement(
415
- "div",
416
- { className: "circle" },
417
- _react2.default.createElement(_icon2.default, { name: "" + iconMap[file_type] || 'default', width: 20, height: 20 })
435
+ 'div',
436
+ { className: 'circle' },
437
+ _react2.default.createElement(_icon2.default, {
438
+ name: '' + iconMap[file_type] || 'default',
439
+ width: 20,
440
+ height: 20
441
+ })
418
442
  )
419
443
  ),
420
444
  thumbnailAs ? _react2.default.createElement(
421
- "div",
422
- { className: "thumbnail-as" },
445
+ 'div',
446
+ { className: 'thumbnail-as' },
423
447
  thumbnailAs
424
448
  ) : null,
425
- display_type === "type4" && iframeURL ? _react2.default.createElement(
426
- "div",
449
+ display_type === 'type4' && iframeURL ? _react2.default.createElement(
450
+ 'div',
427
451
  {
428
452
  onMouseMove: this.handleMouseMove,
429
- className: "iframe-image-block",
453
+ className: 'iframe-image-block',
430
454
  ref: function ref(iframeImageBlock) {
431
455
  _this2._iframeImageBlock = iframeImageBlock;
432
456
  }
433
457
  },
434
- _react2.default.createElement("div", {
435
- className: "hover-pointer",
458
+ _react2.default.createElement('div', {
459
+ className: 'hover-pointer',
436
460
  ref: function ref(hoverPointer) {
437
461
  _this2._hoverPointer = hoverPointer;
438
462
  }
439
463
  }),
440
- _react2.default.createElement("img", {
441
- className: "iframe-image",
464
+ _react2.default.createElement('img', {
465
+ className: 'iframe-image',
442
466
  ref: function ref(iframeImage) {
443
467
  _this2._iframeImage = iframeImage;
444
468
  },
@@ -446,60 +470,60 @@ var VideoCard = function (_React$Component) {
446
470
  })
447
471
  ) : null
448
472
  ),
449
- display_size === "thumbnail" ? _react2.default.createElement(
450
- "div",
451
- { className: "bottom-text" },
473
+ display_size === 'thumbnail' ? _react2.default.createElement(
474
+ 'div',
475
+ { className: 'bottom-text' },
452
476
  sub_title ? _react2.default.createElement(
453
- "span",
454
- { className: "sub-title" },
477
+ 'span',
478
+ { className: 'sub-title' },
455
479
  sub_title
456
480
  ) : null,
457
- creation ? _dateTime2.default.toDateString(creation) : "",
481
+ creation ? _dateTime2.default.toDateString(creation) : '',
458
482
  is_segment ? _react2.default.createElement(
459
- "span",
460
- { className: "segment-indicator" },
461
- " S "
483
+ 'span',
484
+ { className: 'segment-indicator' },
485
+ ' S '
462
486
  ) : null
463
487
  ) : null
464
488
  ),
465
- display_size === "large" || display_size === "small" ? _react2.default.createElement(
466
- "div",
467
- { className: "right-side" },
489
+ display_size === 'large' || display_size === 'small' ? _react2.default.createElement(
490
+ 'div',
491
+ { className: 'right-side' },
468
492
  _react2.default.createElement(
469
- "div",
470
- { className: "main-text" },
493
+ 'div',
494
+ { className: 'main-text' },
471
495
  keywords && keywords.map(function (item) {
472
496
  return _react2.default.createElement(
473
- "span",
497
+ 'span',
474
498
  null,
475
- "#",
499
+ '#',
476
500
  item,
477
- " "
501
+ ' '
478
502
  );
479
503
  }),
480
504
  mentions && mentions.map(function (item, index) {
481
505
  return _react2.default.createElement(
482
- "span",
506
+ 'span',
483
507
  null,
484
- index === mentions.length - 1 ? item : item + ", ",
485
- " "
508
+ index === mentions.length - 1 ? item : item + ', ',
509
+ ' '
486
510
  );
487
511
  }),
488
512
  !keywords && !mentions && main_title
489
513
  ),
490
514
  _react2.default.createElement(
491
- "div",
492
- { className: "bottom-fixed-text" },
515
+ 'div',
516
+ { className: 'bottom-fixed-text' },
493
517
  sub_title ? _react2.default.createElement(
494
- "span",
495
- { className: "sub-title" },
518
+ 'span',
519
+ { className: 'sub-title' },
496
520
  sub_title
497
521
  ) : null,
498
- creation ? _dateTime2.default.toDateString(creation) : "",
522
+ creation ? _dateTime2.default.toDateString(creation) : '',
499
523
  is_segment ? _react2.default.createElement(
500
- "span",
501
- { className: "segment-indicator" },
502
- " S "
524
+ 'span',
525
+ { className: 'segment-indicator' },
526
+ ' S '
503
527
  ) : null
504
528
  )
505
529
  ) : null
@@ -514,27 +538,27 @@ var VideoCard = function (_React$Component) {
514
538
 
515
539
  var defaultDimensions = {
516
540
  type1: {
517
- width: "280px",
518
- height: "auto",
541
+ width: '280px',
542
+ height: 'auto',
519
543
  img: {
520
- width: "100%",
521
- height: "155px"
544
+ width: '100%',
545
+ height: '155px'
522
546
  }
523
547
  },
524
548
  type2: {
525
- width: "222px",
526
- height: "auto",
549
+ width: '222px',
550
+ height: 'auto',
527
551
  img: {
528
- width: "100%",
529
- height: "125px"
552
+ width: '100%',
553
+ height: '125px'
530
554
  }
531
555
  },
532
556
  type3: {
533
- width: "180px",
534
- height: "250px",
557
+ width: '180px',
558
+ height: '250px',
535
559
  img: {
536
- width: "100%",
537
- height: "250px"
560
+ width: '100%',
561
+ height: '250px'
538
562
  }
539
563
  },
540
564
  type4: {
@@ -544,52 +568,51 @@ var defaultDimensions = {
544
568
  */
545
569
 
546
570
  large: {
547
- width: "440px",
548
- height: "auto",
571
+ width: '440px',
572
+ height: 'auto',
549
573
  img: {
550
- width: "180px",
551
- height: "100px"
574
+ width: '180px',
575
+ height: '100px'
552
576
  },
553
577
  data: {
554
- width: "260px",
555
- height: "auto"
578
+ width: '260px',
579
+ height: 'auto'
556
580
  }
557
581
  },
558
582
  small: {
559
- width: "270px",
560
- height: "auto",
583
+ width: '270px',
584
+ height: 'auto',
561
585
  img: {
562
- width: "90px",
563
- height: "50px"
586
+ width: '90px',
587
+ height: '50px'
564
588
  },
565
589
  data: {
566
- width: "180px",
567
- height: "auto"
590
+ width: '180px',
591
+ height: 'auto'
568
592
  }
569
593
  },
570
594
  thumbnail: {
571
- width: "125px",
572
- height: "auto",
595
+ width: '125px',
596
+ height: 'auto',
573
597
  img: {
574
- width: "100%",
575
- height: "70px"
598
+ width: '100%',
599
+ height: '70px'
576
600
  },
577
601
  data: {
578
- width: "auto",
579
- height: "auto"
602
+ width: 'auto',
603
+ height: 'auto'
580
604
  }
581
605
  }
582
606
  }
583
607
  };
584
608
 
585
609
  VideoCardStyled.defaultPros = {
586
- // width: 280,
587
- //height: 250,
588
- display_type: "type1"
610
+ theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
611
+ display_type: 'type1'
589
612
  };
590
613
 
591
614
  VideoCard.defaultProps = {
592
- theme: "dark"
615
+ theme: 'dark'
593
616
  };
594
617
 
595
618
  exports.default = VideoCard;