feat: front interstitial ads settings (#298)

openstream-fm · Mar 22, 2024 · 48b9ba7 · 48b9ba7
2 parents e0643b4 + 5d89fb7
commit 48b9ba7
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 23 deletions.
diff --git a/front/admin/package-lock.json b/front/admin/package-lock.json
diff --git a/front/app/src/lib/components/StationProfile.svelte b/front/app/src/lib/components/StationProfile.svelte
@@ -59,6 +59,7 @@
 	import type { LangCode } from '$server/defs/LangCode';
 	import type { GooglePlayLang } from './google-play-lang';
 	import GooglePlayLangField from './GooglePlayLangField.svelte';
+	import { tooltip } from '$share/tooltip';
 
 	export let account_id: string;
 	export let station_id: string | null;
@@ -100,10 +101,14 @@
 				base_color: string
 				icon_bg_color: string
 				icon_rounded: boolean
-				ads: boolean
 				
+				// banners
+				ads: boolean
+				interstitial_ads: boolean
+
 				admob_app_id: string | null | undefined
 				admob_banner_id: string | null | undefined
+				admob_interstitial_id: string | null | undefined
 				
 				google_play_console_id: string | null | undefined,
 
@@ -125,7 +130,7 @@
 		return null;
 	}
 
-	const _validate_admob_banner_id = (value: string | null | undefined): string | null => {
+	const _validate_admob_ad_id = (value: string | null | undefined): string | null => {
 		if(value == null) return null;
 		if(!/^ca\-app\-pub\-[0-9]{16}\/[0-9]{10}$/.test(value)) {
 			return $locale.station_profile.validation.admob_banner_id_pattern;
@@ -151,7 +156,7 @@
 		gap: 2.5rem;
 		padding: 2rem;
 	}
-  
+
   .section-logo {
     --validator-message-font-size: 1em;
     --validator-message-margin: 0;
@@ -200,6 +205,20 @@
 		font-size: 0.8rem;
 		margin: 0.5rem 0.25rem;
 	}
+
+	.field.with-toggle {
+		position: relative;
+		padding-inline-end: 2.5rem;
+	}
+
+	.field-toggle {
+		position: absolute;
+		right: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		flex: none;
+	}
 </style>
 
 
@@ -578,13 +597,6 @@
 
 		<div class="advanced-sep" />
 
-		<div class="field">
-			<BooleanField
-				label={$locale.station_profile.labels.mob_app_enable_ads}
-				bind:value={current.user_metadata.mob_app.ads}
-			/>
-		</div>
-
 		<div class="field">
 			<!-- TODO: locale -->
 			<NullTextField
@@ -612,16 +624,50 @@
 			<Validator value={current.user_metadata.mob_app.admob_app_id} fn={_validate_admob_app_id} />
 		</div>
 
-		<div class="field">
+		<div class="field with-toggle">
 			<NullTextField
 				icon={mdiAdMob}
 				icon_viewbox={mdiAdMobViewBox}
 				trim
 				label={$locale.station_profile.labels.mob_app_admob_banner_id}
 				bind:value={current.user_metadata.mob_app.admob_banner_id}
 			/>
-			<Validator value={current.user_metadata.mob_app.admob_banner_id} fn={_validate_admob_banner_id} />
+			<Validator value={current.user_metadata.mob_app.admob_banner_id} fn={_validate_admob_ad_id} />
+
+			<div
+				class="field-toggle"
+				use:tooltip={
+				// TODO: locale
+				"Enable banner ads"
+				}
+			>
+				<BooleanField bind:value={current.user_metadata.mob_app.ads} />
+			</div>
+		</div>
+
+
+		<div class="field with-toggle">
+			<NullTextField
+				icon={mdiAdMob}
+				icon_viewbox={mdiAdMobViewBox}
+				trim
+				label={
+					// TODO: locale
+					"Admob Interstitial Id"
+				}
+				bind:value={current.user_metadata.mob_app.admob_interstitial_id}
+			/>
+			<Validator value={current.user_metadata.mob_app.admob_interstitial_id} fn={_validate_admob_ad_id} />
+
+			<div
+				class="field-toggle"
+				use:tooltip={
+					// TODO: locale
+					"Enable interstitial ads"
+				}
+			>
+				<BooleanField bind:value={current.user_metadata.mob_app.interstitial_ads} />
+			</div>
 		</div>
-
 	</div>
 </div>
diff --git a/...c/routes/(root)/(online)/(app)/accounts/[account]/stations/[station]/profile/+page.svelte b/...c/routes/(root)/(online)/(app)/accounts/[account]/stations/[station]/profile/+page.svelte
@@ -45,9 +45,13 @@
         base_color: String((data.station.user_metadata.mob_app as any)?.base_color ?? ""),
         icon_bg_color: String((data.station.user_metadata.mob_app as any)?.icon_bg_color ?? ""),
         icon_rounded: !!(data.station.user_metadata.mob_app as any)?.icon_rounded ?? false,
+        
         ads: !!(data.station.user_metadata.mob_app as any)?.ads ?? false,
+        interstitial_ads: !!(data.station.user_metadata.mob_app as any)?.interstitial_ads ?? false,
+
         admob_app_id: String((data.station.user_metadata.mob_app as any)?.admob_app_id ?? "") || null,
         admob_banner_id: String((data.station.user_metadata.mob_app as any)?.admob_banner_id ?? "") || null,
+        admob_interstitial_id: String((data.station.user_metadata.mob_app as any)?.admob_interstitial_id ?? "") || null,
         
         google_play_console_id: String((data.station.user_metadata.mob_app as any)?.google_play_console_id || "") || null,
 

diff --git a/.../src/routes/(root)/(online)/(app)/accounts/[account]/stations/create-station/+page.svelte b/.../src/routes/(root)/(online)/(app)/accounts/[account]/stations/create-station/+page.svelte
@@ -55,9 +55,13 @@
         base_color: "",
         icon_bg_color: "",
         icon_rounded: false,
+        
         ads: false,
+        interstitial_ads: false,
+
         admob_app_id: null as string | null | undefined,
         admob_banner_id: null as string | null | undefined,
+        admob_interstitial_id: null as string | null | undefined,
 
         google_play_console_id: null as string | null | undefined,
 

diff --git a/front/share/src/Form/BooleanField.svelte b/front/share/src/Form/BooleanField.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let value: boolean;
-  export let label: string;
+  export let label: string | null = null;
 
 	import Icon from "$share/Icon.svelte";
   import { ripple } from "$share/ripple";
@@ -40,7 +40,6 @@
   }
 
   .icon-out {
-    margin-inline-end: 1rem;
     flex: none;
     position: relative;
   }
@@ -58,6 +57,10 @@
   .checked .icon {
     color: var(--green);
   }
+
+  .label {
+    margin-inline-start: 1rem;
+  }
 </style>
 
 <div class="boolean-field" class:checked={value}>
@@ -74,8 +77,11 @@
         </div>
       {/if}
     </div>
-    <div class="label">
-      {label}
-    </div>
+
+    {#if label != null}
+      <div class="label">
+        {label}
+      </div>
+    {/if}
   </label>
 </div>