timeline premium lock (#386)

app/pages/PageEnigma/comps/Timeline/PremiumLockTimeline.tsx

@@ -0,0 +1,42 @@
+import { Link } from "@remix-run/react";
+import { fullWidth, timelineHeight } from "../../store";
+
+interface PremiumLockTimelineProps {
+  locked: boolean;
+}
+
+export default function PremiumLockTimeline({
+  locked,
+}: PremiumLockTimelineProps) {
+  return (
+    <>
+      {locked ? (
+        <div className="sticky left-0 top-1/2 z-20 h-full w-full -translate-y-1/2 transform">
+          <div
+            style={{
+              height: timelineHeight.value,
+              width: fullWidth.value - 704,
+            }}
+            className="absolute top-1/2 ml-[720px] -translate-y-1/2 transform border-l border-[#43435C] bg-ui-panel/70 backdrop-blur-sm">
+            <div className="flex h-full w-full flex-col justify-center pl-12">
+              <div className="flex w-[400px] flex-col gap-1 rounded-lg border-2 border-white/40 bg-ui-controls p-4 text-center shadow-lg">
+                <h6 className="text-md font-medium">
+                  Your timeline is currently limited to 3 seconds.
+                </h6>
+                <p className="text-sm font-normal">
+                  Please{" "}
+                  <Link
+                    to="/pricing"
+                    className="font-medium text-brand-primary brightness-125">
+                    upgrade your account
+                  </Link>{" "}
+                  to increase the movie render length up to 7 seconds.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}

app/pages/PageEnigma/comps/Timeline/Scrubber.tsx

@@ -26,7 +26,7 @@ export const Scrubber = ({ page }: Props) => {
 
   return (
     <div
-      className="absolute flex cursor-ew-resize flex-col items-center text-brand-primary"
+      className="absolute z-20 flex cursor-ew-resize flex-col items-center"
       style={{
         top: 16,
         left: displayTime * 4 * scale.value + 199 - scrollX,

app/pages/PageEnigma/comps/Timeline/Timeline.tsx

@@ -31,6 +31,7 @@ import { RowHeaders } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/RowHead
 import { pageWidth } from "~/store";
 import { Pages } from "~/pages/PageEnigma/constants/page";
 import { DoNotShow } from "~/pages/PageEnigma/constants/misc";
+import PremiumLockTimeline from "./PremiumLockTimeline";
 
 function getItemType(item: Clip | Keyframe | null) {
   if (!item) {
@@ -156,7 +157,9 @@ export const Timeline = () => {
               height: timelineHeight.value - 54,
             }}>
             <div
+              className="relative"
               style={{ width: filmLength.value * 60 * 4 * scale.value + 72 }}>
+              <PremiumLockTimeline locked={false} />
               <Characters />
               <div className="pb-4 pr-8">
                 <Camera />

app/pages/PageEnigma/store/sizing.ts

@@ -51,6 +51,13 @@ export const minimizeIconPosition = computed(() => {
   );
 });
 
+export const timelinePremiumLockPosition = computed(() => {
+  return Math.min(
+    pageWidth.value - 2000 + timelineScrollX.value,
+    fullWidth.value - 24,
+  );
+});
+
 export const fullWidth = computed(() => {
   return filmLength.value * 60 * 4 * scale.value;
 });