Skip to content

Commit

Permalink
v1.2.0 Remove Test Logging & Show Export View on Error
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabe-serna
gabe-serna committed Nov 18, 2024
1 parent 6819dec commit 2107ea0
Show file tree
Hide file tree
Showing 10 changed files with 179 additions and 169 deletions.
4 changes: 1 addition & 3 deletions app/audio/AudioForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ export default function AudioForm({
// Set Tempo
async function submitForm() {
try {
console.log("submitting form");
// Get File if YT Link
let file = audioForm.audio_file;
if (audioForm.audio_link && !file) {
Expand All @@ -58,15 +57,14 @@ export default function AudioForm({
// This shouldn't happen
throw new Error("No audio file provided");
}
console.log("audio retrieved: ", file.name);

// Get Tempo
let tempo = 120;
if (!audioForm.tempo) {
tempo = await getTempo(file);
setAudioForm({ ...audioForm, tempo });
} else tempo = audioForm.tempo;
console.log("tempo: ", tempo);
// console.log("tempo: ", tempo);
songName.current = file.name.split(".")[0];

// Create Form Data
Expand Down
284 changes: 151 additions & 133 deletions app/audio/ExportView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,163 +11,181 @@ import { AudioStorage, Stem } from "@/utils/types";
import { Download, Undo } from "lucide-react";
import { zipAllParts } from "@/utils/zipAll";

const ExportView = forwardRef<HTMLDivElement>((_props, ref) => {
const { audioStorage, audioForm, songName, songKey, finalMidiFile } =
useContext(AudioContext);
const ExportView = forwardRef<HTMLDivElement, { showSheetMusic?: boolean }>(
({ showSheetMusic = true }, ref) => {
const { audioStorage, audioForm, songName, songKey, finalMidiFile } =
useContext(AudioContext);

return (
<div className="flex w-full flex-col items-start justify-center max-xl:max-w-[800px] xl:flex-row xl:space-x-12">
<div
ref={ref}
className="flex h-[400px] w-full max-w-[800px] items-center justify-center overflow-hidden rounded-2xl shadow-lg dark:shadow-stone-950 xl:h-[565.6px]"
/>
<Accordion
type="single"
orientation="horizontal"
className="flex w-full flex-col justify-between max-xl:ml-0 max-xl:mt-8 xl:h-[565.6px] xl:max-w-[300px]"
collapsible
>
<div
className={`flex flex-col justify-normal space-y-4 xl:justify-between`}
return (
<div className="flex w-full flex-col items-start justify-center max-xl:max-w-[800px] xl:flex-row xl:space-x-12">
{showSheetMusic ? (
<div
ref={ref}
className="flex h-[400px] w-full max-w-[800px] items-center justify-center overflow-hidden rounded-2xl shadow-lg dark:shadow-stone-950 xl:h-[565.6px]"
/>
) : (
<div className="flex h-[400px] w-full max-w-[800px] items-center justify-center overflow-hidden rounded-2xl bg-accent p-8 text-center shadow-lg dark:shadow-stone-950 xl:h-[565.6px]">
<p className="text-lg text-card-foreground">
Sheet music viewer unavailable. Please try again at the start of
the next hour.
</p>
</div>
)}
<Accordion
type="single"
orientation="horizontal"
className="flex w-full flex-col justify-between max-xl:ml-0 max-xl:mt-8 xl:h-[565.6px] xl:max-w-[300px]"
collapsible
>
<AccordionItem value="export" className="rounded-3xl shadow-md">
<AccordionTrigger className="font-heading w-max rounded-3xl border-2 border-border bg-accent px-6 data-[state=open]:rounded-b-none xl:max-w-[300px]">
Export
</AccordionTrigger>
<AccordionContent className="rounded-b-3xl border-2 border-t-0 border-border bg-stone-200 px-6 dark:bg-popover">
<ol>
<span className="mb-2 flex items-center justify-between space-x-4">
<li>Final Score Midi</li>
<Download
className="cursor-pointer stroke-pink-500 transition-colors hover:stroke-pink-700 dark:stroke-pink-600 dark:hover:stroke-pink-800"
onClick={() => {
const midiBlob = new Blob([finalMidiFile.current!], {
type: "audio/midi",
});
const url = URL.createObjectURL(midiBlob);
const a = document.createElement("a");
a.href = url;
a.download = `${songName.current}.mid`;
a.click();
URL.revokeObjectURL(url);
}}
/>
</span>
{audioForm.audio_link && (
<div
className={`flex flex-col justify-normal space-y-4 xl:justify-between`}
>
<AccordionItem value="export" className="rounded-3xl shadow-md">
<AccordionTrigger className="font-heading w-max rounded-3xl border-2 border-border bg-accent px-6 data-[state=open]:rounded-b-none xl:max-w-[300px]">
Export
</AccordionTrigger>
<AccordionContent className="rounded-b-3xl border-2 border-t-0 border-border bg-stone-200 px-6 dark:bg-popover">
<ol>
<span className="mb-2 flex items-center justify-between space-x-4">
<li>Original Audio</li>
<li>Final Score Midi</li>
<Download
className="cursor-pointer stroke-pink-500 transition-colors hover:stroke-pink-700 dark:stroke-pink-600 dark:hover:stroke-pink-800"
onClick={() => {
const url = URL.createObjectURL(audioForm.audio_file!);
const midiBlob = new Blob([finalMidiFile.current!], {
type: "audio/midi",
});
const url = URL.createObjectURL(midiBlob);
const a = document.createElement("a");
a.href = url;
a.download = `${songName.current}.mp3`;
a.download = `${songName.current}.mid`;
a.click();
URL.revokeObjectURL(url);
}}
/>
</span>
)}
<span className="mb-2 flex items-center justify-between space-x-4">
<li>Midi and Audio for Each Instrument</li>
<Download
className="cursor-pointer stroke-pink-500 transition-colors hover:stroke-pink-700 dark:stroke-pink-600 dark:hover:stroke-pink-800"
onClick={() => zipAllParts(audioStorage!, songName.current)}
/>
</span>
<br />
<li className="italic text-card-foreground">
{songKey.current}, {audioForm.tempo} BPM
</li>
</ol>
</AccordionContent>
</AccordionItem>
<AccordionItem value="midi-files" className="rounded-3xl shadow-md">
<AccordionTrigger className="font-heading w-full rounded-3xl border-2 border-border bg-accent px-6 data-[state=open]:rounded-b-none">
Midi Files
</AccordionTrigger>
<AccordionContent className="rounded-b-3xl border-2 border-t-0 border-border bg-stone-200 px-6 dark:bg-popover">
<ol>
{Object.entries(
audioStorage as Record<keyof AudioStorage, Stem>,
).map(([key, stem]) => {
if (!stem.midiBlob) return;

let name = key.split("_").join(" ");
name = name.replace(/\b\w/g, (char) => char.toUpperCase());

return (
<span
key={key}
className="mb-2 flex items-center justify-between space-x-4"
>
<li>{name}</li>
{audioForm.audio_link && (
<span className="mb-2 flex items-center justify-between space-x-4">
<li>Original Audio</li>
<Download
className="cursor-pointer stroke-pink-500 transition-colors hover:stroke-pink-700 dark:stroke-pink-600 dark:hover:stroke-pink-800"
onClick={() => {
const url = URL.createObjectURL(stem.midiBlob!);
const url = URL.createObjectURL(
audioForm.audio_file!,
);
const a = document.createElement("a");
a.href = url;
a.download = `${stem.name}.mid`;
a.download = `${songName.current}.mp3`;
a.click();
URL.revokeObjectURL(url);
}}
/>
</span>
);
})}
</ol>
</AccordionContent>
</AccordionItem>
<AccordionItem value="audio-files" className="rounded-3xl shadow-md">
<AccordionTrigger className="font-heading w-max rounded-3xl border-2 border-border bg-accent px-6 data-[state=open]:rounded-b-none xl:max-w-[300px]">
Audio Files
</AccordionTrigger>
<AccordionContent className="rounded-b-3xl border-2 border-t-0 border-border bg-stone-200 px-6 dark:bg-popover">
<ol>
{Object.entries(
audioStorage as Record<keyof AudioStorage, Stem>,
).map(([key, stem]) => {
if (!stem.audioBlob) return;
)}
<span className="mb-2 flex items-center justify-between space-x-4">
<li>Midi and Audio for Each Instrument</li>
<Download
className="cursor-pointer stroke-pink-500 transition-colors hover:stroke-pink-700 dark:stroke-pink-600 dark:hover:stroke-pink-800"
onClick={() =>
zipAllParts(audioStorage!, songName.current)
}
/>
</span>
<br />
<li className="italic text-card-foreground">
{songKey.current}, {audioForm.tempo} BPM
</li>
</ol>
</AccordionContent>
</AccordionItem>
<AccordionItem value="midi-files" className="rounded-3xl shadow-md">
<AccordionTrigger className="font-heading w-full rounded-3xl border-2 border-border bg-accent px-6 data-[state=open]:rounded-b-none">
Midi Files
</AccordionTrigger>
<AccordionContent className="rounded-b-3xl border-2 border-t-0 border-border bg-stone-200 px-6 dark:bg-popover">
<ol>
{Object.entries(
audioStorage as Record<keyof AudioStorage, Stem>,
).map(([key, stem]) => {
if (!stem.midiBlob) return;

let name = key.split("_").join(" ");
name = name.replace(/\b\w/g, (char) => char.toUpperCase());
let name = key.split("_").join(" ");
name = name.replace(/\b\w/g, (char) => char.toUpperCase());

return (
<span
key={key}
className="mb-2 flex items-center justify-between space-x-4"
>
<li>{name}</li>
<Download
className="cursor-pointer stroke-pink-500 transition-colors hover:stroke-pink-700 dark:stroke-pink-600 dark:hover:stroke-pink-800"
onClick={() => {
const url = URL.createObjectURL(stem.audioBlob!);
const a = document.createElement("a");
a.href = url;
a.download = `${stem.name}.mp3`;
a.click();
URL.revokeObjectURL(url);
}}
/>
</span>
);
})}
</ol>
</AccordionContent>
</AccordionItem>
<AccordionItem
value="back"
onClick={() => (window.location.href = "/audio")}
className="button-primary flex h-min w-full cursor-pointer items-center justify-center gap-2 rounded-3xl px-6 py-2 text-base shadow-md transition-colors xl:max-w-[300px]"
>
Convert Again <Undo className="size-4" />
</AccordionItem>
</div>
</Accordion>
</div>
);
});
return (
<span
key={key}
className="mb-2 flex items-center justify-between space-x-4"
>
<li>{name}</li>
<Download
className="cursor-pointer stroke-pink-500 transition-colors hover:stroke-pink-700 dark:stroke-pink-600 dark:hover:stroke-pink-800"
onClick={() => {
const url = URL.createObjectURL(stem.midiBlob!);
const a = document.createElement("a");
a.href = url;
a.download = `${stem.name}.mid`;
a.click();
URL.revokeObjectURL(url);
}}
/>
</span>
);
})}
</ol>
</AccordionContent>
</AccordionItem>
<AccordionItem
value="audio-files"
className="rounded-3xl shadow-md"
>
<AccordionTrigger className="font-heading w-max rounded-3xl border-2 border-border bg-accent px-6 data-[state=open]:rounded-b-none xl:max-w-[300px]">
Audio Files
</AccordionTrigger>
<AccordionContent className="rounded-b-3xl border-2 border-t-0 border-border bg-stone-200 px-6 dark:bg-popover">
<ol>
{Object.entries(
audioStorage as Record<keyof AudioStorage, Stem>,
).map(([key, stem]) => {
if (!stem.audioBlob) return;

let name = key.split("_").join(" ");
name = name.replace(/\b\w/g, (char) => char.toUpperCase());

return (
<span
key={key}
className="mb-2 flex items-center justify-between space-x-4"
>
<li>{name}</li>
<Download
className="cursor-pointer stroke-pink-500 transition-colors hover:stroke-pink-700 dark:stroke-pink-600 dark:hover:stroke-pink-800"
onClick={() => {
const url = URL.createObjectURL(stem.audioBlob!);
const a = document.createElement("a");
a.href = url;
a.download = `${stem.name}.mp3`;
a.click();
URL.revokeObjectURL(url);
}}
/>
</span>
);
})}
</ol>
</AccordionContent>
</AccordionItem>
<AccordionItem
value="back"
onClick={() => (window.location.href = "/audio")}
className="button-primary flex h-min w-full cursor-pointer items-center justify-center gap-2 rounded-3xl px-6 py-2 text-base shadow-md transition-colors xl:max-w-[300px]"
>
Convert Again <Undo className="size-4" />
</AccordionItem>
</div>
</Accordion>
</div>
);
},
);

export default ExportView;
Loading

0 comments on commit 2107ea0

Please sign in to comment.