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; });