Merge branch 'main' into feature/login-by-email

CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 Hello! We're glad to have you interested in contributing to Note Block World. This document will guide you through the process of setting up the project and submitting your contributions.
 
-This page is a work-in-progress and will be updated as the project evolves. If you have any questions or need help, feel free to reach out to us on our [Discord server](https://discord.gg/open-note-block-studio-608692895179997252).
+This page is a work-in-progress and will be updated as the project evolves. If you have any questions or need help, feel free to reach out to us on our [Discord server](https://discord.gg/note-block-world-608692895179997252).
 
 ## Stack
 

server/src/song/song.controller.ts

@@ -122,6 +122,8 @@ export class SongController {
     @GetRequestToken() user: UserDocument | null,
     @Res() res: Response,
   ): Promise<void> {
+    user = validateUser(user);
+
     // TODO: no longer used
     res.set({
       'Content-Disposition': 'attachment; filename="song.nbs"',

shared/features/song/obfuscate.ts

@@ -119,8 +119,21 @@ export class SongObfuscator {
 
     const resolveKeyAndPitch = (note: Note) => {
       const factoredPitch = note.key * 100 + note.pitch;
-      const key = Math.floor((factoredPitch + 50) / 100);
-      const pitch = ((factoredPitch + 50) % 100) - 50;
+
+      let key, pitch;
+
+      if (factoredPitch < 0) {
+        // Below A0
+        key = 0;
+        pitch = factoredPitch;
+      } else if (factoredPitch >= 87 * 100) {
+        // Above C8
+        key = 87;
+        pitch = factoredPitch - 87 * 100;
+      } else {
+        key = Math.floor((factoredPitch + 50) / 100);
+        pitch = ((factoredPitch + 50) % 100) - 50;
+      }
 
       return { key, pitch };
     };

shared/validation/song/constants.ts

@@ -128,7 +128,6 @@ export const MY_SONGS = deepFreeze({
 });
 
 export const BROWSER_SONGS = deepFreeze({
-  max_recent_songs: 100,
   featuredPageSize: 10,
   paddedFeaturedPageSize: 5,
 });

web/src/app/(content)/(info)/contact/contact.mdx

@@ -2,6 +2,6 @@ Have you got any question, suggestion or feedback? We'd love to hear from you!
 
 To report an issue or suggest a new feature, please [open a new issue](https://github.com/issues/new/choose) in our GitHub repository. Make sure to search the existing issues to see if your suggestion has already been made. Also, check our [project roadmap](https://github.com/orgs/OpenNBS/projects/4) to see if the feature you want is already planned!
 
-For general support, or if you'd just like to have a chat, the fastest way to get in touch with us is by joining our public community on [Discord](https://discord.gg/open-note-block-studio-608692895179997252). We're always happy to help!
+For general support, or if you'd just like to have a chat, the fastest way to get in touch with us is by joining our public community on [Discord](https://discord.gg/note-block-world-608692895179997252). We're always happy to help!
 
 For business inquiries, or if you need to reach out to us privately, you can send us an email at [opennbs@gmail.com](opennbs@gmail.com).

web/src/app/(content)/page.tsx

@@ -52,12 +52,12 @@ export const metadata: Metadata = {
 };
 
 async function Home() {
-  const recentSongs = await fetchRecentSongs();
+  //const recentSongs = await fetchRecentSongs();
   const featuredSongs = await fetchFeaturedSongs();
 
   return (
     <HomePageProvider
-      initialRecentSongs={recentSongs}
+      initialRecentSongs={[]}
       initialFeaturedSongs={featuredSongs}
     >
       <HomePageComponent />

web/src/modules/browse/WelcomeBanner.tsx

@@ -40,7 +40,7 @@ export const WelcomeBanner = () => {
           </Link>
           {' • '}
           <Link
-            href='https://github.com/OpenNBS/NoteBlockWorld/issues/new/choose'
+            href='https://discord.gg/note-block-world-608692895179997252'
             className='text-blue-400 hover:text-blue-300'
           >
             Discord Server

web/src/modules/browse/components/client/context/RecentSongs.context.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { BROWSER_SONGS } from '@shared/validation/song/constants';
 import { SongPreviewDtoType } from '@shared/validation/song/dto/types';
 import {
   createContext,
@@ -39,7 +38,7 @@ export function RecentSongsProvider({
     useState<SongPreviewDtoType[]>(initialRecentSongs);
 
   const [recentError, setRecentError] = useState<string>('');
-  const [page, setPage] = useState<number>(3);
+  const [page, setPage] = useState<number>(0);
   const [loading, setLoading] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [categories, setCategories] = useState<Record<string, number>>({});
@@ -56,7 +55,7 @@ export function RecentSongsProvider({
           {
             params: {
               page,
-              limit: 8, // TODO: fix constants
+              limit: 12, // TODO: fix constants
               order: false,
             },
           },
@@ -67,7 +66,7 @@ export function RecentSongsProvider({
           ...response.data,
         ]);
 
-        if (response.data.length < 8) {
+        if (response.data.length < 12) {
           setHasMore(false);
         }
       } catch (error) {
@@ -114,18 +113,13 @@ export function RecentSongsProvider({
     setEndpoint(newEndpoint);
   }, [selectedCategory]);
 
-  // Fetch recent songs when the page or endpoint changes
   useEffect(() => {
+    if (page === 0) return;
     fetchRecentSongs();
-  }, [page, endpoint]);
+  }, [page, endpoint, fetchRecentSongs]);
 
   async function increasePageRecent() {
-    if (
-      BROWSER_SONGS.max_recent_songs <= recentSongs.length ||
-      loading ||
-      recentError ||
-      !hasMore
-    ) {
+    if (loading || recentError || !hasMore) {
       return;
     }
 

web/src/modules/shared/components/client/ads/AdSlots.tsx

@@ -39,12 +39,14 @@ const AdTemplate = ({
   adFormat = 'auto',
   fullWidthResponsive = 'true',
   hiddenClassName = 'hidden',
+  showCloseButton = true,
 }: {
   className: string;
   adSlot: string;
   adFormat: string;
   fullWidthResponsive: string;
   hiddenClassName?: string;
+  showCloseButton?: boolean;
 }) => {
   const pubId = useAdSenseClient();
 
@@ -81,7 +83,7 @@ const AdTemplate = ({
             data-ad-format={adFormat}
             data-full-width-responsive={fullWidthResponsive}
           ></ins>
-          <HideAdButton setIsHidden={setIsHidden} />
+          {showCloseButton && <HideAdButton setIsHidden={setIsHidden} />}
         </>
       )}
     </div>
@@ -122,3 +124,18 @@ export const SideRailAdSlot = ({ className }: { className?: string }) => {
     />
   );
 };
+
+export const DownloadPopupAdSlot = ({ className }: { className?: string }) => {
+  return (
+    <AdTemplate
+      className={cn(
+        'relative rounded-xl bg-zinc-800/50 p-2 my-8 h-32 max-h-32 w-full min-w-64 text-sm text-zinc-400',
+        className,
+      )}
+      adSlot='3239923384'
+      adFormat='auto'
+      fullWidthResponsive='true'
+      showCloseButton={false}
+    />
+  );
+};

web/src/modules/shared/components/layout/Footer.tsx

@@ -29,7 +29,7 @@ export function Footer() {
           <FooterIcon icon={faGithub} href='https://github.com/OpenNBS' />
           <FooterIcon
             icon={faDiscord}
-            href='https://discord.gg/open-note-block-studio-608692895179997252'
+            href='https://discord.gg/note-block-world-608692895179997252'
           />
           {/* <FooterIcon icon={faEarth} href='https://opennbs.org' /> */}
           {/* <FooterIcon icon={faEnvelope} href='mailto:opennbs@gmail.com' /> */}

web/src/modules/shared/components/layout/RandomSongButton.tsx

@@ -37,7 +37,7 @@ export const RandomSongButton = () => {
 
   return (
     <button
-      className='bevel p-2 flex-0 w-8 w-min flex items-center justify-center gap-2 bg-zinc-600 after:bg-zinc-800 before:bg-zinc-900 translate-y-[11px] hover:translate-y-1.5 transition-all duration-150 hover:brightness-125'
+      className='bevel p-2 flex-0 w-min flex items-center justify-center gap-2 bg-zinc-600 after:bg-zinc-700 before:bg-zinc-800 translate-y-[11px] hover:translate-y-1.5 transition-all duration-150 hover:brightness-125'
       onClick={randomSong}
     >
       <FontAwesomeIcon icon={faDice} />

web/src/modules/song-edit/components/client/context/EditSong.context.tsx

@@ -239,12 +239,15 @@ export const EditSongProvider = ({
       formMethods.setValue('category', songData.category);
 
       // fetch song
+      const token = getTokenLocal();
+
       const songFile = (
         await axiosInstance.get(`/song/${id}/download`, {
           params: {
             src: 'edit',
           },
           responseType: 'arraybuffer',
+          headers: { authorization: `Bearer ${token}` },
         })
       ).data as ArrayBuffer;
 

web/src/modules/song/components/SongDetails.tsx

@@ -22,7 +22,7 @@ const SongDetailsRow = ({ children }: { children: React.ReactNode }) => {
 
 const SongDetailsCell = ({ children }: { children: React.ReactNode }) => {
   return (
-    <td className='first:w-[40%] last:w-[60%] last:max-w-0 text-ellipsis overflow-hidden whitespace-nowrap p-2 py-[10px] first:text-zinc-400 first:text-right last:font-bold'>
+    <td className='first:w-[40%] last:max-w-0 p-2 py-[10px] break-words align-top first:text-zinc-400 first:text-right last:font-bold'>
       {children}
     </td>
   );

web/src/modules/song/components/SongPage.tsx

@@ -66,7 +66,7 @@ export async function SongPage({ id }: { id: string }) {
             <UploaderBadge user={song.uploader} />
             {/* <FollowButton /> */}
             <div className='flex-grow'></div>
-            <div className='flex flex-row gap-4'>
+            <div className='flex flex-row gap-4 overflow-x-auto'>
               {/* <LikeButton /> */}
               <ShareButton songId={song.publicId} />
               <OpenSongInNBSButton song={song} />

web/src/modules/song/components/SongPageButtons.tsx

@@ -16,7 +16,15 @@ import Link from 'next/link';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
 
+import { getTokenLocal } from '@web/src/lib/axios/token.utils';
+
+import DownloadSongModal from './client/DownloadSongModal';
 import ShareModal from './client/ShareModal';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '../../shared/components/tooltip';
 import { downloadSongFile, openSongInNBS } from '../util/downloadSong';
 
 const UploaderBadge = ({ user }: { user: SongViewDtoType['uploader'] }) => {
@@ -149,7 +157,7 @@ const OpenInNBSButton = ({
     <button
       onClick={handleClick}
       disabled={isLoading}
-      className='uppercase px-2 py-1 h-fit rounded-md text-sm bg-blue-600 hover:enabled:bg-blue-500 disabled:opacity-50'
+      className='hidden md:block uppercase px-2 py-1 h-fit rounded-md text-sm bg-blue-600 hover:enabled:bg-blue-500 disabled:opacity-50'
     >
       <div className='flex flex-row items-center gap-2 w-max'>
         {isLoading ? (
@@ -199,22 +207,27 @@ const showOpenFailedToast = () => {
   );
 };
 
-const DownloadSongButton = ({
-  song,
-}: {
-  song: {
-    publicId: string;
-    title: string;
-    downloadCount: number;
-  };
-}) => {
+const DownloadSongButton = ({ song }: { song: SongViewDtoType }) => {
+  const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false);
+
   return (
-    <DownloadButton
-      downloadCount={song.downloadCount}
-      handleClick={() => {
-        downloadSongFile(song);
-      }}
-    />
+    <>
+      <DownloadButton
+        downloadCount={song.downloadCount}
+        handleClick={() => {
+          setTimeout(() => {
+            downloadSongFile(song);
+          }, 3000);
+
+          setIsDownloadModalOpen(true);
+        }}
+      />
+      <DownloadSongModal
+        isOpen={isDownloadModalOpen}
+        setIsOpen={setIsDownloadModalOpen}
+        song={song}
+      />
+    </>
   );
 };
 
@@ -225,17 +238,35 @@ const DownloadButton = ({
   downloadCount: number;
   handleClick: React.MouseEventHandler<HTMLButtonElement>;
 }) => {
+  let isLoggedIn = true;
+
+  try {
+    getTokenLocal();
+  } catch {
+    isLoggedIn = false;
+  }
+
   return (
     <div className='flex gap-0.5'>
-      <button
-        onClick={handleClick}
-        className='uppercase px-2 py-1 h-fit rounded-md text-sm bg-green-600 hover:bg-green-500'
-      >
-        <div className='flex flex-row items-center gap-2'>
-          <FontAwesomeIcon icon={faDownload} />
-          <div>Download</div>
-        </div>
-      </button>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={handleClick}
+            className='uppercase px-2 py-1 h-fit rounded-md text-sm bg-green-600 hover:enabled:bg-green-500 disabled:opacity-50'
+            disabled={!isLoggedIn}
+          >
+            <div className='flex flex-row items-center gap-2'>
+              <FontAwesomeIcon icon={faDownload} />
+              <div>Download</div>
+            </div>
+          </button>
+        </TooltipTrigger>
+        {!isLoggedIn && (
+          <TooltipContent>
+            {'You must sign in to download this song!'}
+          </TooltipContent>
+        )}
+      </Tooltip>
       <CountBalloon count={downloadCount} />
     </div>
   );