Highlighter/jk replay integration

app/components-react/highlighter/ClipsView.m.less

@@ -8,6 +8,9 @@
   :global(.ant-modal-wrap),
   :global(.ant-modal-mask) {
     position: absolute;
+    top: 0 !important;
+    height: 100% !important;
+    overflow: hidden !important;
   }
   :global(.os-content-glue) {
     width: 100% !important;

app/components-react/highlighter/ClipsView.tsx

@@ -211,6 +211,7 @@ export default function ClipsView({
               <PreviewExportButton streamId={streamId} setModal={setModal} />
             </div>
           </div>
+
           {sortedList.length === 0 ? (
             <div style={{ padding: '20px' }}>
               {$t('No clips found')}
@@ -307,8 +308,10 @@ export default function ClipsView({
           )}
         </div>
         <EditingControls
-          emitSetShowModal={(modal: TModalClipsView) => {
-            setModal({ modal });
+          emitSetShowModal={(modal: TModalClipsView | null) => {
+            if (modal) {
+              setModal({ modal });
+            }
           }}
         />
         <ClipsViewModal

app/components-react/highlighter/HypeWrapper.m.less

@@ -0,0 +1,222 @@
+@import '../../styles/index';
+
+@sectionWidth: 424px;
+@sectionHeight: @sectionWidth;
+@padding: 16px;
+@gap: 16px;
+@width: 1920px;
+@height: 1080px;
+
+.hype-wrapper {
+  --fixed-height: calc(504px + 22px + 14px + @gap);
+  --fixed-width: 441px;
+  position: relative;
+  height: 80vh;
+  width: 80vw;
+  max-width: 1500px;
+  display: grid;
+  border-radius: 24px;
+  overflow: hidden;
+  transition: clip-path 0.15s ease, background-color 0.3s ease;
+
+  clip-path: inset(
+    calc((100% - var(--fixed-height, 0px)) / 2) calc((100% - var(--fixed-width, 0px)) / 2)
+      calc((100% - var(--fixed-height, 0px)) / 2) calc((100% - var(--fixed-width, 0px)) / 2) round
+      13px
+  );
+}
+
+.hype-wrapper-with-import-config {
+  clip-path: inset(0px 0px 0px 0px round 13px);
+}
+
+.content-divider {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr 400px 1fr;
+  top: 0;
+  left: 0;
+}
+
+.left-wrapper {
+  position: relative;
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  padding-left: 12%;
+  align-self: center;
+}
+
+.header-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+}
+
+.hype-content-headline {
+  color: white;
+  font-family: 'Luckiest Guy', serif;
+  font-size: clamp(33px, 3vw, 73px);
+  margin: 0px;
+  width: 85%;
+  line-height: clamp(33px, 3vw, 63px);
+  rotate: -4deg;
+}
+
+.hype-content-subheadline {
+  color: white;
+  font-family: 'Luckiest Guy', serif;
+  font-size: 24px;
+  margin: 0px;
+  margin-top: 12px;
+  width: 85%;
+  line-height: 22px;
+  rotate: -4deg;
+}
+
+.plattform-icon {
+  position: absolute;
+  z-index: 10;
+  animation: wiggleAnimation 5s infinite ease-in-out;
+}
+
+@keyframes wiggleAnimation {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  25% {
+    transform: rotate(-3deg) scale(1.05);
+  }
+  50% {
+    transform: rotate(3deg) scale(1.1);
+  }
+  75% {
+    transform: rotate(-3deg) scale(1.05);
+  }
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+.horizontal-video {
+  position: absolute;
+  width: calc(@width / 8);
+  height: calc(@height / 8);
+  top: 60px;
+  transform: rotate(-5deg);
+  overflow: hidden;
+  border-radius: 5px;
+  border-color: #7b7b7b;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.vertical-video {
+  position: absolute;
+  height: calc(@width / 8);
+  width: calc(@height / 8);
+  top: 98px;
+  left: 170px;
+  transform: rotate(2deg);
+  overflow: hidden;
+  border-radius: 5px;
+  border-color: #7b7b7b;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.colored-blob {
+  width: 130%;
+  position: absolute;
+  height: 50%;
+  bottom: -50px;
+  left: 0px;
+  border-radius: 120%;
+  opacity: 0.2;
+  rotate: -20deg;
+  filter: blur(74px);
+  animation: blobAnimation 8s infinite;
+  animation-timing-function: ease-in-out;
+  transition: background-color 0.3s ease;
+}
+
+@keyframes blobAnimation {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.overlay {
+  display: none;
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  background-color: var(--section);
+  top: 0px;
+  left: 0px;
+}
+
+.manual-upload-wrapper {
+  background-color: var(--section);
+  border-radius: 12px;
+  border: 1px solid var(--Day-Colors-Dark-4, #4f5e6550);
+  width: 441px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  height: 556px; // needs to be hardcoded. to match hypewrapper
+
+  :global {
+    /* Hide labels */
+    .ant-form-item-label,
+    [class*='ant-col'] .ant-form-item-label {
+      display: none !important;
+    }
+
+    .ant-form-item {
+      margin: 0;
+    }
+  }
+
+  video {
+    display: block;
+    max-width: calc(@sectionWidth - @padding * 2);
+    max-height: calc(@sectionHeight - @padding * 2);
+    border-radius: 8px;
+  }
+}
+
+.hype-content {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  overflow: hidden;
+}
+
+.artwork-image {
+  flex-shrink: 0;
+  min-height: 100%;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.fadeIn {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.fadeOut {
+  opacity: 0;
+  transform: translateX(900px);
+}