@brightspot/ui 3.0.1-cms-ui-migration.3 → 3.0.1

package/src/legacy/tool-ui/src/main/webapp/v4/VideoEditor.less

@@ -1,737 +0,0 @@
-@import (reference) './Button.less';
-@import (reference) './IconButton.less';
-@import (reference) './Link.less';
-@import (reference) './Text.less';
-
-// State Changes:
-
-.is-VideoEditorLoading {
-  .FilePreview-actions * > {
-    visibility: hidden;
-  }
-}
-
-.is-VideoEditorLoaded {
-  .FilePreview-actions * > {
-    visibility: visible;
-  }
-}
-
-.is-VideoEditorOpen {
-  .VideoEditor-stage {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-// Hiding referenced Content Edit Ui:
-
-.VideoEditor-fileContainer > :not([data-name$='/file']) {
-  display: none;
-}
-
-.VideoEditor-InputColors {
-  display: none;
-}
-
-// Module styles:
-
-.VideoEditor-stage {
-  --VideoEditor-asideWidth: 440px;
-  --VideoEditor-bottomHeight: 221px;
-
-  background: var(--color-white);
-  bottom: 0;
-  display: block;
-  left: 0;
-  opacity: 0;
-  position: fixed;
-  right: 0;
-  top: var(--Page-headerBottom);
-  transform: scaleY(0);
-  transform-origin: bottom;
-  transition:
-    opacity var(--time-xs) var(--ease-in),
-    transform var(--time-s) var(--ease-out);
-  z-index: 1000;
-
-  .CIG & > .TabBar {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  > [data-tab] {
-    height: calc(100% - var(--gap-m) * 2 - var(--lineHeight-m));
-  }
-}
-
-.VideoEditor-stage-closeButton {
-  .Button.is-dominant;
-
-  position: absolute;
-  right: calc(var(--gap-l) - var(--gap-s));
-  top: calc(var(--gap-l) - var(--gap-s));
-}
-
-.VideoEditor-stage-aside {
-  bottom: 0;
-  display: flex;
-  flex-flow: column wrap;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: var(--VideoEditor-asideWidth);
-
-  .TC-unselected {
-    display: none;
-  }
-
-  input[type='range'] {
-    display: none;
-  }
-}
-
-.VideoEditorAside-top {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  height: calc(var(--gap-l) * 3);
-  padding: var(--gap-l);
-
-  > h2:first-of-type {
-    font-size: var(--fontSize-xl);
-    font-weight: normal;
-  }
-}
-
-.VideoEditorAside-body {
-  max-height: calc(100% - (var(--gap-l) * 3));
-  overflow: auto;
-  padding: 0 var(--gap-l) var(--gap-m) var(--gap-l);
-  width: 100%;
-}
-
-.VideoEditor-stage-main {
-  // align-items: center;
-  background-color: var(--color-gray1);
-  background-image: linear-gradient(
-    -45deg,
-    var(--color-gray1),
-    var(--color-gray1) 25%,
-    var(--color-gray2) 25%,
-    var(--color-gray2) 50%,
-    var(--color-gray1) 50%,
-    var(--color-gray1) 75%,
-    var(--color-gray2) 75%
-  );
-  background-size: 50px 50px;
-  bottom: var(--VideoEditor-bottomHeight);
-  display: flex;
-  justify-content: center;
-  left: 0;
-  position: absolute;
-  right: var(--VideoEditor-asideWidth);
-  top: 0;
-}
-
-.VideoEditor-stage-bottom {
-  background: rgb(236 236 238);
-  bottom: 0;
-  height: var(--VideoEditor-bottomHeight);
-  left: 0;
-  padding: var(--gap-l);
-  position: absolute;
-  right: var(--VideoEditor-asideWidth);
-
-  &::before {
-    color: var(--color-gray6);
-    content: 'Overlays';
-    font-size: 12px;
-    left: 0;
-    position: absolute;
-    text-align: right;
-    text-transform: uppercase;
-    top: calc(var(--gap-l) + 4px);
-    transform: rotate(180deg);
-    writing-mode: vertical-rl;
-  }
-
-  &::after {
-    content: '';
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 1px;
-    z-index: 1;
-  }
-}
-
-// The video used for capturing should be almost unnoticeable to the User
-// while still working within the browsers' constraints for video playback (eg: not completely hidden).
-.VideoEditor-captureVideo {
-  height: 3px;
-  width: auto;
-}
-
-.VideoEditor-minimap {
-  cursor: copy;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.VideoEditor-minimap.is-selecting {
-  cursor: col-resize;
-}
-
-.VideoEditor-minimap .playhead {
-  background: var(--color-black);
-  height: 100%;
-  pointer-events: none;
-  position: absolute;
-  width: 1px;
-  z-index: 1;
-
-  &::after {
-    border-bottom: 10px solid var(--color-black);
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    content: '';
-    height: 0;
-    position: absolute;
-    transform: translate(-9.5px, -9px) rotate(180deg);
-    width: 0;
-  }
-}
-
-.VideoEditor-minimap .playhead.is-hidden {
-  opacity: 0.25;
-}
-
-.VideoEditorClip-surface {
-  bottom: 0;
-  height: 100%;
-  padding: 2px 0;
-  position: absolute;
-  z-index: 4;
-}
-
-.VideoEditorClip-surface:hover {
-  .VideoEditorClip-resizeUI {
-    animation: none;
-    display: block;
-    opacity: 1;
-  }
-}
-
-.VideoEditor-overlays {
-  height: 65px;
-  margin-bottom: 8px;
-  position: relative;
-}
-
-.VideoOverlays-clippingSvg {
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.VideoOverlays-clipBackground {
-  clip-path: url('#VideoEditorOverlays-svgPath');
-}
-
-.VideoEditor-filmstrip {
-  display: block;
-  height: 96px;
-  position: relative;
-  width: 100%;
-}
-
-.VideoEditorFilmstrip-placeholder {
-  align-items: center;
-  background-color: var(--color-black);
-  background-image: linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee),
-    linear-gradient(to right, #ececee, #ececee);
-  background-position:
-    5% 5%,
-    15% 5%,
-    25% 5%,
-    35% 5%,
-    45% 5%,
-    55% 5%,
-    65% 5%,
-    75% 5%,
-    85% 5%,
-    95% 5%,
-    5% 95%,
-    15% 95%,
-    25% 95%,
-    35% 95%,
-    45% 95%,
-    55% 95%,
-    65% 95%,
-    75% 95%,
-    85% 95%,
-    95% 95%;
-  background-repeat: no-repeat;
-  background-size:
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%,
-    5% 8%;
-  display: flex;
-  justify-content: center;
-}
-
-.VideoEditorFilmstrip-placeholderLabel {
-  align-items: center;
-  background: rgb(233 233 233 / 20%);
-  color: var(--color-white);
-  display: flex;
-  font-size: var(--fontSize-xs);
-  height: 68%;
-  justify-content: center;
-  position: relative;
-  width: 97%;
-}
-
-.VideoEditorFilmstrip-selectionContainer {
-  height: 100%;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: 3;
-}
-
-.VideoEditorFilmstrip-selection {
-  @size: 2px;
-
-  animation: stroke 0.2s linear infinite;
-  fill: none;
-  shape-rendering: geometricPrecision;
-  stroke: #fff;
-  stroke-dasharray: @size * 3;
-  stroke-dashoffset: @size * 3 * 2;
-  stroke-width: @size;
-  vector-effect: non-scaling-stroke;
-
-  @keyframes stroke {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-}
-
-.VideoEditorFilmstrip-clippingSvg {
-  height: 100%;
-  position: absolute;
-  width: 100%;
-}
-
-.VideoEditorFilmstrip-clips,
-.VideoEditorFilmstrip-images {
-  display: flex; // keeps the image boxes 96px tall.
-  height: 96px;
-  pointer-events: none;
-}
-
-.VideoEditorFilmstrip-clips {
-  bottom: 0;
-  clip-path: url('#VideoEditorFilmstrip-svgPath');
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.VideoEditorFilmstrip-placeholder,
-.VideoEditorFilmstrip-clips > img,
-.VideoEditorFilmstrip-images > img {
-  object-fit: cover;
-  pointer-events: none;
-  width: 10%;
-}
-
-.VideoEditor-filmstrip.is-clipped {
-  .VideoEditorFilmstrip-images {
-    filter: brightness(0.4) saturate(0.4);
-  }
-}
-
-.resizeHandle() {
-  background: var(--color-blue5);
-  border-radius: 50%;
-  cursor: col-resize;
-  height: 20px;
-  position: absolute;
-  top: calc(50% - 10px);
-  transition: transform 100ms ease;
-  width: 20px;
-
-  &:hover {
-    transform: scale(1.2);
-  }
-}
-
-.VideoEditorClip-resizeUI {
-  // display: none;
-  animation: intro 200ms ease-out 200ms forwards;
-  box-sizing: border-box;
-  height: 100%;
-  opacity: 1;
-  outline: 2px solid var(--color-blue5);
-  width: 100%;
-
-  @keyframes intro {
-    to {
-      opacity: 0.3;
-    }
-  }
-}
-
-.VideoEditorClip-resizerLeft {
-  .resizeHandle();
-
-  left: -10px;
-}
-
-.VideoEditorClip-resizerRight {
-  .resizeHandle();
-
-  right: -10px;
-}
-
-// Overlay UI:
-
-.VideoOverlay-layer {
-  --index: auto;
-  --transitionDuration-millis: 0;
-
-  height: 100%;
-  left: 0;
-  object-fit: contain;
-  opacity: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  transition: opacity var(--transitionDuration-millis) ease;
-  width: 100%;
-  z-index: var(--index);
-}
-
-.VideoOverlay-layer.is-removing {
-  visibility: hidden;
-}
-
-.VideoOverlay-image {
-  display: block;
-  height: auto;
-  max-width: 100%;
-  position: relative;
-}
-
-// Temporarily hide the Image Editor capability for overlays until it works properly.
-.VideoEditor-OverlayUI .ImageEditor-open {
-  opacity: 0;
-  pointer-events: none;
-}
-
-// Place the RCIG's "Add +" container above the RCIG list.
-.VideoEditor-OverlayUI .RCIG {
-  display: flex;
-  flex-direction: column-reverse;
-  max-width: calc(var(--VideoEditor-asideWidth) - 2 * var(--gap-l));
-
-  > :last-child {
-    margin-bottom: var(--gap-m);
-  }
-}
-
-// Reverse the order of the items to mirror what the User percieves as the z-index stacking order.
-.VideoEditor-OverlayUI .RCIG-list {
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-// Hide's the ability to "soft-remove" since its not feasible for this version of the UI.
-.VideoEditor-OverlayUI .RCIG-item.is-removing,
-.VideoEditor-ClippingUI .RCIG-item.is-removing {
-  display: none;
-}
-
-.VideoEditor-OverlayUI .RCIG-addSelect {
-  display: flex;
-}
-
-.VideoOverlay-layoutUI {
-  display: grid;
-  grid-gap: var(--gap-xs);
-  grid-template-columns: repeat(3, minmax(90px, 1fr));
-  grid-template-rows: repeat(3, minmax(40px, 60px));
-  margin-top: var(--gap-l);
-  width: 100%;
-}
-
-.VideoOverlay-layout-item {
-  background: var(--color-gray4);
-  cursor: pointer;
-
-  &:hover {
-    background: var(--Input-focusColor);
-  }
-
-  // Adds a "play" icon to the center cell to suggest a video player.
-  &:nth-child(5n) {
-    display: flex;
-
-    &::after {
-      .Icon;
-
-      align-items: center;
-      color: var(--color-white);
-      content: 'play_circle_filled';
-      display: flex;
-      flex: 1;
-      justify-content: center;
-    }
-  }
-}
-
-.VideoOverlay-layout-item.is-selected {
-  background: var(--color-dominant6);
-}
-
-.VideoEditor-InputOverlay.is-overlay-ready {
-  // Reveals certain form inputs once the file has been uploaded.
-  .CIG-row[visible],
-  .CIG-row[data-name$='/opacity'] {
-    display: block;
-  }
-
-  // Temporarily hides the "scale" control on Overlay objects until we figure out a better UX.
-  .CIG-row.scale {
-    display: none;
-  }
-}
-
-.VideoOverlay-fadeEffect-group {
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-}
-
-// Clipping UI
-
-.VideoEditor-resetButton {
-  .Link.is-red;
-  .Text.is-s;
-
-  align-items: center;
-  display: block;
-  margin: var(--gap-l) 0 0 0;
-
-  &::before {
-    .Icon;
-    .Icon.is-s;
-
-    content: 'refresh';
-    margin-right: var(--gap-xs);
-  }
-}
-
-// Hides certain RCIG UI from the Clipping tab
-.VideoEditor-ClippingUI ol[data-sortable-input-name$='/clippings'] {
-  .CIG-note {
-    display: none;
-  }
-}
-
-.VideoEditor-ClippingUI .RCIG-controls {
-  display: none;
-}
-
-// Component Overrides:
-.FilePreview-actions > *:not(:first-child) {
-  margin-left: var(--gap-m);
-}
-
-// Remove the margin from the CIGs within the Overlay tab because it breaks the layout.
-.VideoEditor-OverlayUI .CIG-row:only-child.is-unlabeled > .CIG-large > .CIG {
-  margin-right: unset;
-}
-
-// Hides all the CIGs from the original form except the one for uploading a file.
-.VideoEditor-InputOverlay .CIG-row:not([data-name$='/file']) {
-  display: none;
-}
-
-// Un-hide the inputs in a Popup/Shared overlay.
-.Popup .VideoEditor-InputOverlay .CIG-row:not([data-name$='/file']) {
-  display: initial;
-}
-
-// Un-hides the width/height inputs for now until we redesign the UI.
-.VideoEditor-InputOverlay .CIG-row[data-name$='/heightPercent'],
-.VideoEditor-InputOverlay .CIG-row[data-name$='/widthPercent'] {
-  display: initial;
-}
-
-.CIG-row:only-child.is-unlabeled::before {
-  box-shadow: none;
-}
-
-.CIG-row:only-child.is-unlabeled > .CIG-large > .CIG {
-  padding-right: var(--CIG-padding);
-}
-
-.VideoEditor-OverlayUI,
-.VideoEditor-ColorUI {
-  .CIG-note {
-    display: none;
-
-    .VideoEditor-OverlayUI .RCIG-addSelect {
-      display: flex;
-    }
-  }
-
-  .CIG-row::after {
-    display: none;
-  }
-}
-
-// noUiSlider style overrides:
-
-.is-slideable {
-  --Thumb-diameter: 1.5em;
-  --Thumb-color: var(--color-dominant6);
-  --Thumb-hover-color: var(--Input-focusColor);
-  --Track-color: var(--color-gray3);
-  --Track-height: 4px;
-}
-
-.is-slideable.noUi-target {
-  background: none;
-  border: none;
-  box-shadow: none;
-  height: 20px;
-}
-
-.is-slideable.noUi-target::after {
-  background: var(--Track-color);
-  content: '';
-  height: var(--Track-height);
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
-}
-
-.is-slideable.noUi-horizontal .noUi-handle {
-  background: var(--Thumb-color);
-  border: none;
-  border-radius: 100%;
-  box-shadow: none;
-  height: var(--Thumb-diameter);
-  left: calc(-1 * var(--Thumb-diameter) / 2);
-  top: -2px;
-  width: var(--Thumb-diameter);
-
-  &::before,
-  &::after {
-    content: none;
-  }
-
-  &:hover {
-    background: var(--Thumb-hover-color);
-  }
-}
-
-.is-slideable .noUi-connect {
-  background: rgb(14 128 184 / 44%);
-}
-
-html:not([dir='rtl']) .is-slideable.noUi-horizontal .noUi-handle {
-  right: calc(-1 * var(--Thumb-diameter) / 2);
-}
-
-// Plyr Style overrides
-
-.VideoEditor-stage {
-  --Video-controlsHeight: 50px;
-
-  .plyr--video {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .plyr__controls {
-    height: var(--Video-controlsHeight);
-  }
-
-  .plyr--video .plyr__controls {
-    background: var(--color-blue7);
-    order: 2;
-    padding: 10px;
-    position: relative;
-  }
-
-  .plyr__volume {
-    display: flex;
-  }
-
-  .plyr__video-wrapper {
-    height: 100%;
-    max-height: calc(
-      100vh - var(--Page-headerBottom) - var(--Video-controlsHeight) -
-        var(--VideoEditor-bottomHeight)
-    );
-    width: 100%;
-  }
-
-  .plyr video {
-    height: 100%;
-    object-fit: contain;
-    width: 100%;
-  }
-}