hide watermark for pro user videos creators

Author: ameer2468

apps/desktop/src/styles/theme.css

@@ -154,6 +154,24 @@
 .gray-button-shadow {
 	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.4) inset;
 }
+
+.dark .gray-button-border {
+	@apply border-gray-2
+}
+
+.gray-button-border {
+	@apply border-gray-8
+}
+
+.dark .dark-button-border {
+	@apply border-gray-2
+}
+
+.dark-button-border {
+	@apply border-gray-12
+}
+
+
 [data-transparent-window] {
 	background: transparent !important;
 }

apps/web/app/globals.css

@@ -84,6 +84,22 @@ html {
 	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.1) inset;
 }
 
+.dark .gray-button-border {
+	@apply border-gray-2
+}
+
+.gray-button-border {
+	@apply border-gray-8
+}
+
+.dark .dark-button-border {
+	@apply border-gray-2
+}
+
+.dark-button-border {
+	@apply border-gray-12
+}
+
 .gray-button-shadow {
 	box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.4) inset;
 }

apps/web/app/s/[videoId]/_components/ShareVideo.tsx

@@ -35,7 +35,12 @@ type CommentWithAuthor = typeof commentsSchema.$inferSelect & {
 export const ShareVideo = forwardRef<
 	HTMLVideoElement,
 	{
-		data: typeof videos.$inferSelect;
+		data: typeof videos.$inferSelect & {
+			owner: {
+				stripeSubscriptionStatus: string | null;
+				thirdPartyStripeSubscriptionId: string | null;
+			};
+		};
 		user: typeof userSelectProps | null;
 		comments: MaybePromise<CommentWithAuthor[]>;
 		chapters?: { title: string; start: number }[];
@@ -144,6 +149,8 @@ export const ShareVideo = forwardRef<
 		videoSrc = `${publicEnv.s3BucketUrl}/${data.ownerId}/${data.id}/combined-source/stream.m3u8`;
 	}
 
+	const isVideoOwnerPro = userIsPro(data.owner);
+
 	return (
 		<>
 			<div className="relative h-full">
@@ -167,7 +174,7 @@ export const ShareVideo = forwardRef<
 				)}
 			</div>
 
-			{!userIsPro(user) && (
+			{!isVideoOwnerPro && (
 				<div className="absolute top-4 left-4 z-30">
 					<div
 						className="block cursor-pointer"

apps/web/app/s/[videoId]/page.tsx

@@ -288,9 +288,15 @@ export default async function ShareVideoPage(props: Props) {
 					sharedOrganization: {
 						organizationId: sharedVideos.organizationId,
 					},
+					owner: {
+						stripeSubscriptionStatus: users.stripeSubscriptionStatus,
+						thirdPartyStripeSubscriptionId:
+							users.thirdPartyStripeSubscriptionId,
+					},
 				})
 				.from(videos)
 				.leftJoin(sharedVideos, eq(videos.id, sharedVideos.videoId))
+				.leftJoin(users, eq(videos.ownerId, users.id))
 				.where(eq(videos.id, videoId)),
 		).pipe(Policy.withPublicPolicy(videosPolicy.canView(videoId)));
 
@@ -437,6 +443,10 @@ async function AuthorizedContent({
 				id: videos.id,
 				name: videos.name,
 				ownerId: videos.ownerId,
+				owner: {
+					stripeSubscriptionStatus: users.stripeSubscriptionStatus,
+					thirdPartyStripeSubscriptionId: users.thirdPartyStripeSubscriptionId,
+				},
 				createdAt: videos.createdAt,
 				updatedAt: videos.updatedAt,
 				awsRegion: videos.awsRegion,
@@ -459,6 +469,7 @@ async function AuthorizedContent({
 			})
 			.from(videos)
 			.leftJoin(sharedVideos, eq(videos.id, sharedVideos.videoId))
+			.leftJoin(users, eq(videos.ownerId, users.id))
 			.where(eq(videos.id, videoId))
 			.execute();
 

packages/ui-solid/src/Button.tsx

@@ -20,8 +20,8 @@ const styles = cva(
 				white:
 					"bg-gray-1 border border-gray-6 text-gray-12 hover:bg-gray-3 disabled:bg-gray-8",
 				ghost: "hover:bg-white/20 hover:text-white",
-				gray: "bg-gray-5 data-[selected=true]:!bg-gray-8 dark:data-[selected=true]:!bg-gray-9 hover:bg-gray-7 border border-gray-6 gray-button-shadow text-gray-12 disabled:bg-gray-8 disabled:text-gray-9",
-				dark: "bg-gray-12 dark-button-shadow hover:bg-gray-11 border border-gray-12 text-gray-1 disabled:cursor-not-allowed disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
+				gray: "bg-gray-5 data-[selected=true]:!bg-gray-8 dark:data-[selected=true]:!bg-gray-9 hover:bg-gray-7 border gray-button-border gray-button-shadow text-gray-12 disabled:bg-gray-8 disabled:text-gray-9",
+				dark: "bg-gray-12 dark-button-border dark-button-shadow hover:bg-gray-11 border text-gray-1 disabled:cursor-not-allowed disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
 				darkgradient:
 					"bg-gradient-to-t button-gradient-border from-[#0f0f0f] to-[#404040] shadow-[0_0_0_1px] hover:brightness-110 shadow-[#383838] text-gray-50 hover:bg-[#383838] disabled:bg-[#383838] border-transparent",
 				radialblue:

packages/ui/src/components/Button.tsx

@@ -23,8 +23,8 @@ const buttonVariants = cva(
 				white:
 					"bg-gray-1 border border-gray-6 text-gray-12 hover:bg-gray-3 disabled:bg-gray-8",
 				ghost: "hover:bg-white/20 hover:text-white",
-				gray: "bg-gray-5 hover:bg-gray-7 border border-gray-6 gray-button-shadow text-gray-12 disabled:border-gray-7 disabled:bg-gray-8 disabled:text-gray-11",
-				dark: "bg-gray-12 dark-button-shadow hover:bg-gray-11 border border-gray-12 text-gray-1 disabled:cursor-not-allowed disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
+				gray: "bg-gray-5 hover:bg-gray-7 border gray-button-border gray-button-shadow text-gray-12 disabled:border-gray-7 disabled:bg-gray-8 disabled:text-gray-11",
+				dark: "bg-gray-12 dark-button-shadow hover:bg-gray-11 border dark-button-border text-gray-1 disabled:cursor-not-allowed disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
 				darkgradient:
 					"bg-gradient-to-t button-gradient-border from-[#0f0f0f] to-[#404040] shadow-[0_0_0_1px] hover:brightness-110 shadow-[#383838] text-gray-50 hover:bg-[#383838] disabled:bg-[#383838] border-transparent",
 				radialblue: