=DataStore.js and UploaderManager.js overhaul

Jake Vanderwerf

2025-10-18 b0194e10a87e16797a568d8a30d53ebecd27d8a4

 src/video/style.scss

@@ -1,11 +1,113 @@
.video-cover {
.video-cover-wrapper {
   position: relative;
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   min-height: 400px;
   overflow: hidden;
   display: flex;

   &.fade {
      animation: fadeIn 1s ease-in;
   // Video background
   .video-cover-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      object-fit: cover;
      z-index: 0;

      &.fade {
         animation: fadeIn 1s ease-in;
      }
   }

   // Dark overlay
   .video-cover-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 1);
      z-index: 1;
   }

   // Content container
   .video-cover-content {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 2rem;
      color: white;

      // Better text readability
      h1, h2, h3, h4, h5, h6 {
         color: white;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      }

      p {
         color: white;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
      }

      // Button styles
      .wp-block-button__link {
         text-shadow: none;
      }
   }

   // Alignment classes
   &.align-top-left {
      align-items: flex-start;
      justify-content: flex-start;
   }
   &.align-top-center {
      align-items: flex-start;
      justify-content: center;
   }
   &.align-top-right {
      align-items: flex-start;
      justify-content: flex-end;
   }
   &.align-center-left {
      align-items: center;
      justify-content: flex-start;
   }
   &.align-center {
      align-items: center;
      justify-content: center;
   }
   &.align-center-right {
      align-items: center;
      justify-content: flex-end;
   }
   &.align-bottom-left {
      align-items: flex-end;
      justify-content: flex-start;
   }
   &.align-bottom-center {
      align-items: flex-end;
      justify-content: center;
   }
   &.align-bottom-right {
      align-items: flex-end;
      justify-content: flex-end;
   }

   // Full-width alignment
   &.alignfull {
      width: 100vw;
      max-width: none;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
   }

   // Wide alignment
   &.alignwide {
      max-width: 1200px;
   }
}

@@ -18,18 +120,23 @@
   }
}

// Responsive adjustments
@media (max-width: 768px) {
   .video-cover-wrapper {
      min-height: 300px;

.video-cover video {
   pointer-events: none;
   position: absolute;
   top: 0;
   left: 50%;
   opacity: 0.85;
   mix-blend-mode: multiply;
   transform: translate(-40%,-10%);
   height: 105vh;
   width: 300vw!important;
   filter: grayscale(100%) contrast(1);
   flex: 1 0 100%;
   max-width: none;
      .video-cover-content {
         padding: 1.5rem;
      }
   }
}

@media (max-width: 480px) {
   .video-cover-wrapper {
      min-height: 250px;

      .video-cover-content {
         padding: 1rem;
      }
   }
}