website: bring back download buttons for Nightly version

website/src/lib/components/misc/legal.svelte

@@ -1,54 +1,47 @@
 <script lang="ts">
-    import SvelteMarkdown from "svelte-markdown";
+	import SvelteMarkdown from 'svelte-markdown';
-	import Layout from "$lib/components/markdown/layout.svelte";
+	import Layout from '$lib/components/markdown/layout.svelte';
+	import { X } from 'lucide-svelte';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+
+	const modalStore = getModalStore();
 
 	const mdContent = `
-## 🚨 Spotube is banned from using "Spotify™ API" 🚨
+## Spotube reborn 🦄
 
-The developer of Spotube has received a cease and desist letter from Spotify USA Inc. and Spotify AB, asserting a legal threat concerning the distribution and development of any application that utilizes Spotify’s data API in conjunction with content from YouTube® to facilitate ad-free playback of music tracks. The letter contends that this specific use of the Spotify™ APIs contravenes the Spotify™ Agreements and may also infringe upon the rights of music rights holders.
+After facing a legal threat(s) from Spotify™, Spotube has moved from using Spotify™ API for music metadata purposes.
+Now we're aiming to make Spotube an extensible music streaming platform and will continue to use free to use and open source music APIs.
 
-Consequently, as the official maintainer of Spotube, I will immediately cease all forms of official distribution and development of Spotube that continue to employ the aforementioned 'Spotify™ APIs'
+So users can bring their own metadata APIs (already finished) and playback APIs (WIP). And can plug things together using community plugins.
 
-<ins>Their exact reasoning</ins>: (any) "uses of Spotify’s data API in connection with content from YouTube to provide ad-free playback of music tracks. The use of the Spotify APIs in this manner violates the Spotify Agreements and may also violate the rights of music rights holders."
+To reduce friction, by default, from Spotube v5, it will contain MusicBrainz and ListenBrainz plugin (including support for custom instances). But you can always
+bring your own metadata and playback APIs using plugins (there will be documentation on how to do that soon!).
 
-## So what's now?
+Currently, the v5 is still under beta. So only nightly builds are downloadable. Please continue to use Nightly versions (it can contains bugs or not work at all) until stable Spotube v5 is released.
 
-> In short, we are cooked (legally)
+Btw, please support the [MetaBrainz Foundation](https://metabrainz.org/) for their amazing work on MusicBrainz and ListenBrainz.
-
+They're open source and non-profit, so they need your support to keep the lights on and continue their work.
-For now, I've to:
+`;
-
-1. Stop distributing/developing Spotube/any app that uses "Spotify™ APIs"
-
-   That means, I can no longer distribute Spotube through the website, GitHub, any app store and immediately have to take down the versions that uses Spotify™ APIs.
-
-1. Stop using their logo/image/name/intellectual property in a manner that "seems infringement"
-1. Forever desist from aiding or assisting any other person or entity in the activities described above
-
----
-
-**For the users of Spotube:**
-
-Don't worry, Spotube is banned only from (or assisting other) using those APIs. As long as the app isn't using them or no way helps anyone else to use them, it's ok.
-
-In future, I'll try to rewrite Spotube to ensure it operates within the bounds of copyright law and platform policies. And give ways for the users to extend the app to their use cases. Work is already in progress to implement this! So expect some big updates soon!
-
-But for eternity, you can't download versions of Spotube that still uses "Spotify™ APIs" from official means (website/Github/app stores). Those will be taken down.
-
-**But newer version of Spotube that _doesn't_ use "Spotify™ APIs" will be available to replace those.**
-
-That means, in the upcoming new versions, you will no longer be able to login with your "Spotify™ Account", access your saved playlists, albums, tracks, followed artists or perform any action on that account or anything that is from "Spotify™" or owned by "Spotify™" (yes the API public data (e.g. track metadata) as well) through Spotube.
-
-**Conclusion:** I'm extremely sorry for this disruption to your day to day music listening experience. Spotube existed and it used by a large number of users because they find it better. And we'll continue to be better than others but legally\* from now on.
-`
 </script>
 
-<div class="bg-primary-100 p-5 rounded-lg overflow-scroll max-h-[95vh]">
+<div class="bg-primary-100 p-5 rounded-lg overflow-scroll max-h-[95vh] relative">
+	<button
+		type="button"
+		class="btn variant-soft absolute top-2 right-2"
+		on:click={() => modalStore.close()}
+	>
+		<X />
+	</button>
 	<Layout>
 		<SvelteMarkdown source={mdContent} />
 	</Layout>
-    <p class="w-1 h-60"></p>
 
-    <p class="text-surface-500 mt-20">
+	<p class="text-surface-500 mt-5">
 		Spotube has no affiliation with Spotify™ or any of its subsidiaries.
 	</p>
+	<div class="flex justify-end mt-4">
+		<button type="button" class="btn variant-filled-primary" on:click={() => modalStore.close()}>
+			Understood
+		</button>
+	</div>
 </div>

website/src/routes/+page.svelte

@@ -1,10 +1,5 @@
 <script lang="ts">
-	import {
+	import { faAndroid, faWindows, faApple, faLinux } from '@fortawesome/free-brands-svg-icons/index';
-		faAndroid,
-		faWindows,
-		faApple,
-		faLinux
-	} from '@fortawesome/free-brands-svg-icons/index';
 	import Fa from 'svelte-fa';
 	import { Download, Heart } from 'lucide-svelte';
 	import type { PageData } from './$types';
@@ -38,8 +33,7 @@
 			<h1 class="h1">Spotube</h1>
 			<br />
 			<h3 class="h3">
-				An Open Source Music Client for every
+				A cross-platform Extensible open-source Music Streaming platform
-				platform
 				<div class="inline-flex gap-3 items-center">
 					<Fa class="inline text-[#3DDC84]" icon={faAndroid} />
 					<Fa class="inline text-[#00A2F0]" icon={faWindows} />
@@ -65,17 +59,17 @@
 				</a> -->
 			</div>
 		</div>
-		<!-- <div class="flex justify-center">
+		<div class="flex justify-center">
-			<a href="/downloads" class="flex gap-2 btn variant-filled-primary">
+			<a href="/downloads" class="flex gap-2 btn variant-filled">
-				Download
+				Download Nightly
 				<Download />
 			</a>
-		</div> -->
+		</div>
 	</div>
 
-	<!-- <br />
+	<br />
 	<Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
-	<br /> -->
+	<br />
 
 	<div class="flex flex-col gap-4">
 		<h2 class="h2">
@@ -113,5 +107,5 @@
 		</div>
 	</div>
 	<br />
-	<!-- <Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" /> -->
+	<Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
 </section>

website/src/routes/blog/+page.svelte

@@ -44,12 +44,12 @@
 		{#each adAddedPosts as post}
 			{#if post.slug === 'ad'}
 				<p></p>
-				<!-- <Ads
+				<Ads
 					adSlot={ADS_SLOTS.blogPageInFeed}
 					adFormat="fluid"
 					adLayoutKey="-6l+eh+17-40+59"
 					fullWidthResponsive={false}
-				/> -->
+				/>
 			{:else}
 				<a
 					href={`/blog/${post.slug}`}

website/src/routes/downloads/+page.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	// import { ADS_SLOTS, extendedDownloadLinks } from '$lib';
+	import { ADS_SLOTS, extendedDownloadLinks } from '$lib';
 	import { Download } from 'lucide-svelte';
-	// import { History, Sparkles, Package } from 'lucide-svelte';
+	import { History, Sparkles, Package } from 'lucide-svelte';
 	// import DownloadItems from '$lib/components/downloads/download-items.svelte';
-	// import Ads from '$lib/components/ads/ads.svelte';
+	import Ads from '$lib/components/ads/ads.svelte';
 
-	// const otherDownloads: [string, string, any][] = [
+	const otherDownloads: [string, string, any][] = [
 		// ['/downloads/packages', 'CLI Packages Managers', Package],
 		// ['/downloads/older', 'Older Versions', History],
-		// ['/downloads/nightly', 'Nightly Builds', Sparkles]
+		['/downloads/nightly', 'Nightly Builds', Sparkles]
-	// ];
+	];
 </script>
 
 <section class="p-4 md:p-16 md:pb-4">
@@ -30,16 +30,23 @@
 		<br />
 		Please wait for the next version that will remedy this issue by not using such APIs.
 	</h3>
-
+	<p class="text-surface-500 mt-5">
-	<p class="text-surface-500 mt-20">
 		Spotube has no affiliation with Spotify™ or any of its subsidiaries.
 	</p>
+	<br />
+	<br />
+	<h6 class="h6 mb-5">
+		The new Spotube v5 is still under beta. Please use the Nightly version until stable release.
+	</h6>
+	<a href="/downloads/nightly">
+		<button type="button" class="btn variant-filled"> Download Nightly </button>
+	</a>
 
 	<br />
-	<!-- <Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" /> -->
+	<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
 	<br />
 
-	<!-- <h2 class="h2">Other Downloads</h2>
+	<h2 class="h2">Other Downloads</h2>
 	<br /><br />
 	<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 max-w-3xl">
 		{#each otherDownloads as download}
@@ -51,6 +58,6 @@
 			</a>
 		{/each}
 	</div>
-	<br /> -->
+	<br />
-	<!-- <Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" /> -->
+	<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
 </section>

website/src/routes/downloads/nightly/+page.svelte

@@ -1,7 +1,8 @@
 <script>
 	import { AlertTriangle, Bug, Sparkles } from 'lucide-svelte';
-	// import DownloadItems from '$lib/components/downloads/download-items.svelte';
+	import DownloadItems from '$lib/components/downloads/download-items.svelte';
-	// import { extendedNightlyDownloadLinks } from '$lib';
+	import { ADS_SLOTS, extendedNightlyDownloadLinks } from '$lib';
+	import Ads from '$lib/components/ads/ads.svelte';
 </script>
 
 <section class="p-4 md:p-16">
@@ -29,17 +30,10 @@
 	</aside>
 	<br />
 
-	<h3 class="h3 text-red-500">
+	<p class="mb-4">Following are the new v5 Nightly versions:</p>
-		Versions of Spotube (&lt;=v4.0.2) are ceased to work with Spotify™ API. 
+	<DownloadItems links={extendedNightlyDownloadLinks} />
-		<br />
-		So users can no longer use/download those versions. 
-		<br />
-		Please wait for the next version that will remedy this issue by not using such APIs.
-	</h3>
 
-	<p class="text-surface-500 mt-20">
+	<br />
-		Spotube has no affiliation with Spotify™ or any of its subsidiaries.
+	<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
-	</p>
+	<br />
-
-	<!-- <DownloadItems links={extendedNightlyDownloadLinks} /> -->
 </section>