diff --git a/app/pages/PageEnigma/comps/Timeline/PremiumLockTimeline.tsx b/app/pages/PageEnigma/comps/Timeline/PremiumLockTimeline.tsx
new file mode 100644
index 0000000000..49acbd0e64
--- /dev/null
+++ b/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 ? (
+
+
+
+
+
+ Your timeline is currently limited to 3 seconds.
+
+
+ Please{" "}
+
+ upgrade your account
+ {" "}
+ to increase the movie render length up to 7 seconds.
+
+
+
+
+
+ ) : null}
+ >
+ );
+}
diff --git a/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx b/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx
index 34ba1d99be..88a7cbd266 100644
--- a/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Scrubber.tsx
@@ -26,7 +26,7 @@ export const Scrubber = ({ page }: Props) => {
return (
{
height: timelineHeight.value - 54,
}}>
+
diff --git a/app/pages/PageEnigma/store/sizing.ts b/app/pages/PageEnigma/store/sizing.ts
index 2a9950d5a6..ee57f06b76 100644
--- a/app/pages/PageEnigma/store/sizing.ts
+++ b/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;
});