@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

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

@@ -0,0 +1,737 @@
+@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%;
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/VideoEditorBundle.js

@@ -0,0 +1,8 @@
+import onFindOnce from './dom/onFindOnce'
+
+onFindOnce('.VideoEditor', async () => {
+  if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+    await import(/* webpackChunkName: 'VideoEditor' */ './VideoEditor.less')
+  }
+  await import(/* webpackChunkName: 'VideoEditor' */ './VideoEditor')
+})