@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/videoCard/videoCard.js

@@ -1,56 +1,30 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-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; }; }();
-
-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']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _icon = require('../../atoms/icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-var _button = require('../../atoms/button');
-
-var _button2 = _interopRequireDefault(_button);
-
-var _dateTime = require('../dateTime/dateTime');
-
-var _dateTime2 = _interopRequireDefault(_dateTime);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _permissionIconMap = require('../../../tokens/permissionIconMap');
-
-var _permissionIconMap2 = _interopRequireDefault(_permissionIconMap);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var VideoCardStyled = _styledComponents2.default.div(_templateObject, function (props) {
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _icon = _interopRequireDefault(require("../../atoms/icon"));
+var _button = _interopRequireDefault(require("../../atoms/button"));
+var _dateTime = _interopRequireDefault(require("../dateTime/dateTime"));
+var _tokens = require("@desynova-digital/tokens");
+var _permissionIconMap = _interopRequireDefault(require("../../../tokens/permissionIconMap"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _templateObject;
+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)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var VideoCardStyled = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
   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%';
 }, function (props) {
   return props.height ? props.height + 'px' : defaultDimensions[props.display_type] && defaultDimensions[props.display_type].height ? defaultDimensions[props.display_type].height : '100%';
@@ -82,7 +56,7 @@ var VideoCardStyled = _styledComponents2.default.div(_templateObject, function (
   return _tokens.colors[props.theme].videoCard.themeColor;
 }, function (props) {
   return _tokens.colors[props.theme].videoCard.themeColor;
-}, _icon2.default.Element, function (props) {
+}, _icon["default"].Element, function (props) {
   return _tokens.colors[props.theme].videoCard.themeColor;
 }, function (props) {
   return _tokens.colors[props.theme].videoCard.themeColor;
@@ -91,42 +65,31 @@ var VideoCardStyled = _styledComponents2.default.div(_templateObject, function (
   var gradValue = props.gradient ? props.gradient : 'grad' + parseInt(Math.random() * 10);
   return _tokens.colors[props.theme].videoCard.gradient[gradValue];
 });
-
-var VideoCard = function (_React$Component) {
-  _inherits(VideoCard, _React$Component);
-
+var VideoCard = /*#__PURE__*/function (_React$Component) {
   function VideoCard(props) {
-    _classCallCheck(this, VideoCard);
-
-    var _this = _possibleConstructorReturn(this, (VideoCard.__proto__ || Object.getPrototypeOf(VideoCard)).call(this, props));
-
-    _this.getAgoDays = function (timestamp) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, VideoCard);
+    _this = _callSuper(this, VideoCard, [props]);
+    (0, _defineProperty2["default"])(_this, "getAgoDays", function (timestamp) {
       var xdate = new Date(timestamp);
       var diff = 0;
-
       var todayDate = new Date();
-
       if (xdate.getFullYear() === todayDate.getFullYear()) {} else {
         diff = todayDate.getFullYear() - xdate.getFullYear();
-
         return diff + ' year' + (diff > 1 ? 's' : '') + ' ago';
       }
-
       if (xdate.getMonth() === todayDate.getMonth()) {} else {
         diff = todayDate.getMonth() - xdate.getMonth();
-
         return diff + ' month' + (diff > 1 ? 's' : '') + ' ago';
       }
       if (xdate.getDate() === todayDate.getDate()) {
         return 'Today';
       } else {
         diff = todayDate.getDate() - xdate.getDate();
-
         return diff + ' day' + (diff > 1 ? 's' : '') + ' ago';
       }
-    };
-
-    _this.handleMouseMove = function () {
+    });
+    (0, _defineProperty2["default"])(_this, "handleMouseMove", function () {
       if (_this._iframeImageBlock) {
         var iframeBlockHeight = _this._iframeImageBlock.offsetHeight;
         var iframeOgHeight = 120;
@@ -145,397 +108,255 @@ var VideoCard = function (_React$Component) {
         }
         _this._iframeImage.style.top = '-' + imageTop + 'px';
       }
-    };
-
-    _this.formatCardStatus = function (status) {
+    });
+    (0, _defineProperty2["default"])(_this, "formatCardStatus", function (status) {
       return status.toLowerCase().split(' ').join('-');
-    };
-
+    });
     _this.handleMouseMove = _this.handleMouseMove.bind(_this);
     return _this;
   }
-
-  _createClass(VideoCard, [{
-    key: 'render',
+  (0, _inherits2["default"])(VideoCard, _React$Component);
+  return (0, _createClass2["default"])(VideoCard, [{
+    key: "render",
     value: function render() {
       var _this2 = this;
-
-      var _props = this.props,
-          gradient = _props.gradient,
-          display_type = _props.display_type,
-          default_action = _props.default_action,
-          actionClickHandler = _props.actionClickHandler,
-          id = _props.id,
-          thumbnail = _props.thumbnail,
-          overLayText = _props.overLayText,
-          categoryText = _props.categoryText,
-          h1 = _props.h1,
-          h2 = _props.h2,
-          h3 = _props.h3,
-          h4 = _props.h4,
-          uploadType = _props.uploadType,
-          uploadStatus = _props.uploadStatus,
-          taskType = _props.taskType,
-          assetStatus = _props.assetStatus,
-          display_size = _props.display_size,
-          thumbnailAs = _props.thumbnailAs,
-          creation = _props.creation,
-          is_segment = _props.is_segment,
-          keywords = _props.keywords,
-          mentions = _props.mentions,
-          main_title = _props.main_title,
-          iframeURL = _props.iframeURL,
-          selectable = _props.selectable,
-          isSelected = _props.isSelected,
-          moreActions = _props.moreActions,
-          info = _props.info,
-          cardSelectionChangeHandler = _props.cardSelectionChangeHandler,
-          theme = _props.theme,
-          sub_title = _props.sub_title,
-          file_type = _props.file_type;
-
+      var _this$props = this.props,
+        gradient = _this$props.gradient,
+        display_type = _this$props.display_type,
+        default_action = _this$props.default_action,
+        actionClickHandler = _this$props.actionClickHandler,
+        id = _this$props.id,
+        thumbnail = _this$props.thumbnail,
+        overLayText = _this$props.overLayText,
+        categoryText = _this$props.categoryText,
+        h1 = _this$props.h1,
+        h2 = _this$props.h2,
+        h3 = _this$props.h3,
+        h4 = _this$props.h4,
+        uploadType = _this$props.uploadType,
+        uploadStatus = _this$props.uploadStatus,
+        taskType = _this$props.taskType,
+        assetStatus = _this$props.assetStatus,
+        display_size = _this$props.display_size,
+        thumbnailAs = _this$props.thumbnailAs,
+        creation = _this$props.creation,
+        is_segment = _this$props.is_segment,
+        keywords = _this$props.keywords,
+        mentions = _this$props.mentions,
+        main_title = _this$props.main_title,
+        iframeURL = _this$props.iframeURL,
+        selectable = _this$props.selectable,
+        isSelected = _this$props.isSelected,
+        moreActions = _this$props.moreActions,
+        info = _this$props.info,
+        cardSelectionChangeHandler = _this$props.cardSelectionChangeHandler,
+        theme = _this$props.theme,
+        sub_title = _this$props.sub_title,
+        file_type = _this$props.file_type;
       var iconMap = {
         audio: 'audio_track_ingest',
         document: 'document-icon'
       };
-
-      return _react2.default.createElement(
-        VideoCardStyled,
-        _extends({
-          theme: this.props.theme,
-          className: display_type + ' card-main'
-        }, this.props, {
+      return /*#__PURE__*/_react["default"].createElement(VideoCardStyled, (0, _extends2["default"])({
+        theme: this.props.theme,
+        className: display_type + ' card-main'
+      }, this.props, {
+        onClick: function onClick(e) {
+          if (e.target.closest('.check-box-holder')) {
+            cardSelectionChangeHandler(!isSelected, id);
+          } else if (default_action && actionClickHandler) {
+            if (!e.target.closest('.action-button-holder') && !e.target.closest('.more-action-box')) {
+              actionClickHandler(id, default_action, e);
+            }
+          } else {
+            console.log("pass func as props named 'actionClickHandler'... receive args as actionItem name and event obj. ");
+          }
+        }
+      }), display_type === 'type1' || display_type === 'type2' || display_type === 'type3' ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "image-box",
+        style: {
+          backgroundImage: gradient ? _tokens.colors[theme].videoCard.gradient[gradient] : "",
+          backgroundSize: "".concat(display_type === 'type3' ? 'auto 100%, cover' : '100%, cover'),
+          backgroundPositionX: '50% 50%',
+          backgroundRepeat: 'no-repeat'
+        }
+      }, thumbnail && !gradient && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "thumbnail-image-block"
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        className: "thumbnail-image",
+        src: thumbnail
+      })), !thumbnail && !gradient && file_type !== 'video' && file_type !== 'image' && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "thumbnail-image-block"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "circle"
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "".concat(iconMap[file_type]) || 'default',
+        width: 20,
+        height: 20
+      }))), (display_type === 'type1' || display_type === 'type2') && iframeURL && !gradient ? /*#__PURE__*/_react["default"].createElement("div", {
+        onMouseMove: this.handleMouseMove,
+        className: "iframe-image-block",
+        ref: function ref(iframeImageBlock) {
+          _this2._iframeImageBlock = iframeImageBlock;
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "hover-pointer",
+        ref: function ref(hoverPointer) {
+          _this2._hoverPointer = hoverPointer;
+        }
+      }), /*#__PURE__*/_react["default"].createElement("img", {
+        className: "iframe-image",
+        ref: function ref(iframeImage) {
+          _this2._iframeImage = iframeImage;
+        },
+        src: iframeURL
+      })) : null, overLayText && overLayText.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "thumbnail-overlay-text"
+      }, overLayText) : null, categoryText && categoryText.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "top-tag-list"
+      }, categoryText.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement("span", {
+          className: "top-tag-item"
+        }, item);
+      })) : null, moreActions || info || assetStatus ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "more-action-box"
+      }, display_type === 'type1' && assetStatus && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "asset-status-chip ".concat(this.formatCardStatus(assetStatus))
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "status-color"
+      }), /*#__PURE__*/_react["default"].createElement("p", {
+        className: "status-name"
+      }, assetStatus)), moreActions && moreActions.length > 0 && moreActions.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "more-action-item",
           onClick: function onClick(e) {
-            if (e.target.closest('.check-box-holder')) {
-              cardSelectionChangeHandler(!isSelected, id);
-            } else if (default_action && actionClickHandler) {
-              if (!e.target.closest('.action-button-holder') && !e.target.closest('.more-action-box')) {
-                actionClickHandler(id, default_action, e);
-              }
+            if (_this2.props.actionClickHandler) {
+              _this2.props.actionClickHandler(_this2.props.id, item.field, e);
             } else {
               console.log("pass func as props named 'actionClickHandler'... receive args as actionItem name and event obj. ");
             }
           }
-        }),
-        display_type === 'type1' || display_type === 'type2' || display_type === 'type3' ? _react2.default.createElement(
-          'div',
-          {
-            className: 'image-box',
-            style: {
-              backgroundImage: gradient ? _tokens.colors[theme].videoCard.gradient[gradient] : '',
-              backgroundSize: '' + (display_type === 'type3' ? 'auto 100%, cover' : '100%, cover'),
-              backgroundPositionX: '50% 50%',
-              backgroundRepeat: 'no-repeat'
-            }
-          },
-          thumbnail && !gradient && _react2.default.createElement(
-            'div',
-            { className: 'thumbnail-image-block' },
-            _react2.default.createElement('img', { className: 'thumbnail-image', src: thumbnail })
-          ),
-          !thumbnail && !gradient && file_type !== 'video' && file_type !== 'image' && _react2.default.createElement(
-            'div',
-            { className: 'thumbnail-image-block' },
-            _react2.default.createElement(
-              'div',
-              { className: 'circle' },
-              _react2.default.createElement(_icon2.default, { name: '' + iconMap[file_type] || 'default', width: 20, height: 20 })
-            )
-          ),
-          (display_type === 'type1' || display_type === 'type2') && iframeURL && !gradient ? _react2.default.createElement(
-            'div',
-            {
-              onMouseMove: this.handleMouseMove,
-              className: 'iframe-image-block',
-              ref: function ref(iframeImageBlock) {
-                _this2._iframeImageBlock = iframeImageBlock;
-              }
-            },
-            _react2.default.createElement('div', {
-              className: 'hover-pointer',
-              ref: function ref(hoverPointer) {
-                _this2._hoverPointer = hoverPointer;
-              }
-            }),
-            _react2.default.createElement('img', {
-              className: 'iframe-image',
-              ref: function ref(iframeImage) {
-                _this2._iframeImage = iframeImage;
-              },
-              src: iframeURL
-            })
-          ) : null,
-          overLayText && overLayText.length > 0 ? _react2.default.createElement(
-            'div',
-            { className: 'thumbnail-overlay-text' },
-            overLayText
-          ) : null,
-          categoryText && categoryText.length > 0 ? _react2.default.createElement(
-            'div',
-            { className: 'top-tag-list' },
-            categoryText.map(function (item) {
-              return _react2.default.createElement(
-                'span',
-                { className: 'top-tag-item' },
-                item
-              );
-            })
-          ) : null,
-          moreActions || info || assetStatus ? _react2.default.createElement(
-            'div',
-            { className: 'more-action-box' },
-            display_type === 'type1' && assetStatus && _react2.default.createElement(
-              'div',
-              { className: 'asset-status-chip ' + this.formatCardStatus(assetStatus) },
-              _react2.default.createElement('div', { className: 'status-color' }),
-              _react2.default.createElement(
-                'p',
-                { className: 'status-name' },
-                assetStatus
-              )
-            ),
-            moreActions && moreActions.length > 0 && moreActions.map(function (item) {
-              return _react2.default.createElement(
-                'div',
-                {
-                  className: 'more-action-item',
-                  onClick: function onClick(e) {
-                    if (_this2.props.actionClickHandler) {
-                      _this2.props.actionClickHandler(_this2.props.id, item.field, e);
-                    } else {
-                      console.log("pass func as props named 'actionClickHandler'... receive args as actionItem name and event obj. ");
-                    }
-                  }
-                },
-                _react2.default.createElement(_icon2.default, { name: item.icon })
-              );
-            })
-          ) : null,
-          display_type === 'type3' ? _react2.default.createElement(
-            'div',
-            { className: 'bottom-box' },
-            h1
-          ) : null
-        ) : null,
-        display_type === 'type1' || display_type === 'type2' ? _react2.default.createElement(
-          'div',
-          { className: 'details-box' + (selectable ? ' selectable' : '') },
-          _react2.default.createElement(
-            'div',
-            { className: 'main-text' },
-            h1
-          ),
-          _react2.default.createElement(
-            'div',
-            { className: 'bottom-section' },
-            _react2.default.createElement(
-              'div',
-              { className: 'section-left' },
-              uploadStatus ? _react2.default.createElement(
-                'div',
-                { className: 'upload-status' },
-                uploadStatus
-              ) : null,
-              h2 ? _react2.default.createElement(
-                'div',
-                { className: 'h2' },
-                h2
-              ) : null,
-              h3 ? _react2.default.createElement(
-                'div',
-                { className: 'h3' },
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  h3
-                )
-              ) : null,
-              h4 ? _react2.default.createElement(
-                'div',
-                { className: 'h4' },
-                _react2.default.createElement(
-                  'p',
-                  null,
-                  h4
-                )
-              ) : null
-            ),
-            _react2.default.createElement(
-              'div',
-              { className: 'section-right' },
-              display_type === 'type2' && assetStatus ? _react2.default.createElement(
-                'p',
-                { className: 'status ' + this.formatCardStatus(assetStatus) },
-                assetStatus
-              ) : null,
-              taskType && taskType !== 'phupload_ingest' ? _react2.default.createElement(_icon2.default, { name: taskType, width: 14, height: 14 }) : null,
-              taskType && taskType === 'phupload_ingest' ? _react2.default.createElement(_icon2.default, {
-                name: 'ingest',
-                width: 20,
-                height: 20,
-                color: uploadType === 'fc' ? '#07d5cd' : '#ff8d29'
-              }) : null
-            )
-          ),
-          selectable ? _react2.default.createElement(
-            'span',
-            { className: 'check-box-holder' },
-            _react2.default.createElement('input', {
-              id: id,
-              type: 'checkbox',
-              onClick: function onClick(e) {
-                //this.checkUnCheck(e, 'title', this.ifAllChecked());
-                cardSelectionChangeHandler(!isSelected, id);
-              },
-              checked: isSelected
-            }),
-            _react2.default.createElement(
-              'label',
-              { htmlFor: id, className: 'list-title' },
-              _react2.default.createElement('span', null),
-              ''
-            )
-          ) : null
-        ) : null,
-        display_type === 'type4' ? _react2.default.createElement(
-          'div',
-          { className: 'video-card-box' },
-          _react2.default.createElement(
-            'div',
-            {
-              className: display_size ? display_size + ' media-box' : 'media-box',
-              onClick: function onClick(e) {
-                if (actionClickHandler) {
-                  actionClickHandler(id, default_action, e);
-                } else {
-                  console.log("pass func as props named 'actionClickHandler'... receive args as actionItem name and event obj. ");
-                }
-              }
-            },
-            _react2.default.createElement(
-              'div',
-              { className: 'left-side' },
-              _react2.default.createElement(
-                'div',
-                {
-                  className: 'image-box',
-                  style: {
-                    backgroundImage: thumbnailAs ? null : thumbnail ? 'url(' + thumbnail + ')' : 'url(https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png)'
-                  }
-                },
-                thumbnail && !gradient && _react2.default.createElement(
-                  'div',
-                  { className: 'thumbnail-image-block' },
-                  _react2.default.createElement('img', { className: 'thumbnail-image', src: thumbnail })
-                ),
-                !thumbnail && !gradient && file_type !== 'video' && file_type !== 'image' && _react2.default.createElement(
-                  'div',
-                  { className: 'thumbnail-image-block' },
-                  _react2.default.createElement(
-                    'div',
-                    { className: 'circle' },
-                    _react2.default.createElement(_icon2.default, {
-                      name: '' + iconMap[file_type] || 'default',
-                      width: 20,
-                      height: 20
-                    })
-                  )
-                ),
-                thumbnailAs ? _react2.default.createElement(
-                  'div',
-                  { className: 'thumbnail-as' },
-                  thumbnailAs
-                ) : null,
-                display_type === 'type4' && iframeURL ? _react2.default.createElement(
-                  'div',
-                  {
-                    onMouseMove: this.handleMouseMove,
-                    className: 'iframe-image-block',
-                    ref: function ref(iframeImageBlock) {
-                      _this2._iframeImageBlock = iframeImageBlock;
-                    }
-                  },
-                  _react2.default.createElement('div', {
-                    className: 'hover-pointer',
-                    ref: function ref(hoverPointer) {
-                      _this2._hoverPointer = hoverPointer;
-                    }
-                  }),
-                  _react2.default.createElement('img', {
-                    className: 'iframe-image',
-                    ref: function ref(iframeImage) {
-                      _this2._iframeImage = iframeImage;
-                    },
-                    src: iframeURL
-                  })
-                ) : null
-              ),
-              display_size === 'thumbnail' ? _react2.default.createElement(
-                'div',
-                { className: 'bottom-text' },
-                sub_title ? _react2.default.createElement(
-                  'span',
-                  { className: 'sub-title' },
-                  sub_title
-                ) : null,
-                creation ? _dateTime2.default.toDateString(creation) : '',
-                is_segment ? _react2.default.createElement(
-                  'span',
-                  { className: 'segment-indicator' },
-                  ' S '
-                ) : null
-              ) : null
-            ),
-            display_size === 'large' || display_size === 'small' ? _react2.default.createElement(
-              'div',
-              { className: 'right-side' },
-              _react2.default.createElement(
-                'div',
-                { className: 'main-text' },
-                keywords && keywords.map(function (item) {
-                  return _react2.default.createElement(
-                    'span',
-                    null,
-                    '#',
-                    item,
-                    ' '
-                  );
-                }),
-                mentions && mentions.map(function (item, index) {
-                  return _react2.default.createElement(
-                    'span',
-                    null,
-                    index === mentions.length - 1 ? item : item + ', ',
-                    ' '
-                  );
-                }),
-                !keywords && !mentions && main_title
-              ),
-              _react2.default.createElement(
-                'div',
-                { className: 'bottom-fixed-text' },
-                sub_title ? _react2.default.createElement(
-                  'span',
-                  { className: 'sub-title' },
-                  sub_title
-                ) : null,
-                creation ? _dateTime2.default.toDateString(creation) : '',
-                is_segment ? _react2.default.createElement(
-                  'span',
-                  { className: 'segment-indicator' },
-                  ' S '
-                ) : null
-              )
-            ) : null
-          )
-        ) : null
-      );
+        }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+          name: item.icon
+        }));
+      })) : null, display_type === 'type3' ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "bottom-box"
+      }, h1) : null) : null, display_type === 'type1' || display_type === 'type2' ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: 'details-box' + (selectable ? ' selectable' : '')
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "main-text"
+      }, h1), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "bottom-section"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "section-left"
+      }, uploadStatus ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "upload-status"
+      }, uploadStatus) : null, h2 ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "h2"
+      }, h2) : null, h3 ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "h3"
+      }, /*#__PURE__*/_react["default"].createElement("p", null, h3)) : null, h4 ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "h4"
+      }, /*#__PURE__*/_react["default"].createElement("p", null, h4)) : null), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "section-right"
+      }, display_type === 'type2' && assetStatus ? /*#__PURE__*/_react["default"].createElement("p", {
+        className: "status ".concat(this.formatCardStatus(assetStatus))
+      }, assetStatus) : null, taskType && taskType !== 'phupload_ingest' ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: taskType,
+        width: 14,
+        height: 14
+      }) : null, taskType && taskType === 'phupload_ingest' ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "ingest",
+        width: 20,
+        height: 20,
+        color: uploadType === 'fc' ? '#07d5cd' : '#ff8d29'
+      }) : null)), selectable ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "check-box-holder"
+      }, /*#__PURE__*/_react["default"].createElement("input", {
+        id: id,
+        type: "checkbox",
+        onClick: function onClick(e) {
+          //this.checkUnCheck(e, 'title', this.ifAllChecked());
+          cardSelectionChangeHandler(!isSelected, id);
+        },
+        checked: isSelected
+      }), /*#__PURE__*/_react["default"].createElement("label", {
+        htmlFor: id,
+        className: "list-title"
+      }, /*#__PURE__*/_react["default"].createElement("span", null), '')) : null) : null, display_type === 'type4' ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "video-card-box"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: display_size ? display_size + ' media-box' : 'media-box',
+        onClick: function onClick(e) {
+          if (actionClickHandler) {
+            actionClickHandler(id, default_action, e);
+          } else {
+            console.log("pass func as props named 'actionClickHandler'... receive args as actionItem name and event obj. ");
+          }
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "left-side"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "image-box",
+        style: {
+          backgroundImage: thumbnailAs ? null : thumbnail ? "url(".concat(thumbnail, ")") : 'url(https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png)'
+        }
+      }, thumbnail && !gradient && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "thumbnail-image-block"
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        className: "thumbnail-image",
+        src: thumbnail
+      })), !thumbnail && !gradient && file_type !== 'video' && file_type !== 'image' && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "thumbnail-image-block"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "circle"
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "".concat(iconMap[file_type]) || 'default',
+        width: 20,
+        height: 20
+      }))), thumbnailAs ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "thumbnail-as"
+      }, thumbnailAs) : null, display_type === 'type4' && iframeURL ? /*#__PURE__*/_react["default"].createElement("div", {
+        onMouseMove: this.handleMouseMove,
+        className: "iframe-image-block",
+        ref: function ref(iframeImageBlock) {
+          _this2._iframeImageBlock = iframeImageBlock;
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "hover-pointer",
+        ref: function ref(hoverPointer) {
+          _this2._hoverPointer = hoverPointer;
+        }
+      }), /*#__PURE__*/_react["default"].createElement("img", {
+        className: "iframe-image",
+        ref: function ref(iframeImage) {
+          _this2._iframeImage = iframeImage;
+        },
+        src: iframeURL
+      })) : null), display_size === 'thumbnail' ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "bottom-text"
+      }, sub_title ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "sub-title"
+      }, sub_title) : null, creation ? _dateTime["default"].toDateString(creation) : '', is_segment ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "segment-indicator"
+      }, " S ") : null) : null), display_size === 'large' || display_size === 'small' ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "right-side"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "main-text"
+      }, keywords && keywords.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement("span", null, "#", item, " ");
+      }), mentions && mentions.map(function (item, index) {
+        return /*#__PURE__*/_react["default"].createElement("span", null, index === mentions.length - 1 ? item : item + ', ', " ");
+      }), !keywords && !mentions && main_title), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "bottom-fixed-text"
+      }, sub_title ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "sub-title"
+      }, sub_title) : null, creation ? _dateTime["default"].toDateString(creation) : '', is_segment ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "segment-indicator"
+      }, " S ") : null)) : null)) : null);
     }
   }]);
-
-  return VideoCard;
-}(_react2.default.Component);
-
+}(_react["default"].Component);
 var defaultDimensions = {
   type1: {
     width: '280px',
@@ -605,14 +426,11 @@ var defaultDimensions = {
     }
   }
 };
-
 VideoCardStyled.defaultPros = {
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
   display_type: 'type1'
 };
-
 VideoCard.defaultProps = {
   theme: 'dark'
 };
-
-exports.default = VideoCard;
+var _default = exports["default"] = VideoCard;