From 87edf1a8c87725ac320b0b43c58607b0a25dcb32 Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Sat, 16 Mar 2024 12:49:15 +0100 Subject: [PATCH 01/11] Add form to upload new audio file --- playbeat/src/pages/creator/tusaudios.astro | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/playbeat/src/pages/creator/tusaudios.astro b/playbeat/src/pages/creator/tusaudios.astro index d8270eb..7a08eaa 100644 --- a/playbeat/src/pages/creator/tusaudios.astro +++ b/playbeat/src/pages/creator/tusaudios.astro @@ -13,6 +13,17 @@ import HeaderCreator from '@components/HeaderCreator.astro';

PLAYBEAT

TUS AUDIOS

+
+

Agrega un nuevo audio

+
+ +
+ +
+
+ +
From 15117bab14701ebb90487b3e2f91dda6d5093567 Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Sat, 16 Mar 2024 17:20:24 +0100 Subject: [PATCH 02/11] Add TagsTabs component to tusaudios page --- playbeat/src/components/Tags.astro | 0 playbeat/src/components/TagsTabs.astro | 107 +++++++++++++++++++++ playbeat/src/pages/creator/tusaudios.astro | 38 ++++++-- 3 files changed, 138 insertions(+), 7 deletions(-) create mode 100644 playbeat/src/components/Tags.astro create mode 100644 playbeat/src/components/TagsTabs.astro diff --git a/playbeat/src/components/Tags.astro b/playbeat/src/components/Tags.astro new file mode 100644 index 0000000..e69de29 diff --git a/playbeat/src/components/TagsTabs.astro b/playbeat/src/components/TagsTabs.astro new file mode 100644 index 0000000..99ca490 --- /dev/null +++ b/playbeat/src/components/TagsTabs.astro @@ -0,0 +1,107 @@ +--- +import Queue from './Queue.astro'; +import History from './History.astro'; +import SearchCategories from './SearchCategories.astro'; + +const tabsItem = [ + { id: 'Canción', label: 'Canción', content: "Canción" }, + { id: 'Podcast', label: 'Podcast', content: "Podcast" }, +]; + +const categoriasMusica = [ "Pop", "Rock", "Reggaeton", "Rap", "Electrónica", "Clásica", "Jazz", "Indie", "Metal", "Hip Hop", "Trap", "Salsa", "Bachata", "Merengue", "Cumbia", "Reggae", "Folk", "Country", "Blues", "Soul", "Funk", "Disco", "R&B", "Gospel", "House", "Techno", "Dubstep", "Drum & Bass", "Hardstyle", "Trance", "Chillout", "Ambient", "Dance", "Reggaeton", "Ska", "Punk", "Grunge", "Emo", "Post-Hardcore", "Metalcore", "Deathcore", "Black Metal", "Death Metal", "Thrash Metal", "Power Metal", "Doom Metal", "Gothic Metal", "Folk Metal", "Viking Metal", "Symphonic Metal", "Progressive Metal", "Nu Metal", "Alternative Metal", "Industrial Metal", "Rap Metal", "Funk Metal", "Glam Metal", "Goregrind", "Grindcore", "Deathgrind", "Metalcore", "Mathcore", "Post-Hardcore", "Emo", "Screamo", "Pop Punk", "Hardcore Punk", "Post-Punk", "Punk Rock", "Psychobilly", "Horror Punk", "Ska Punk", "Reggae", "Ska", "Rocksteady", "2 Tone", "Third Wave Ska", "Ska Punk", "Reggae", "Dancehall", "Dub", "Lovers Rock", "Roots Reggae", "Ragga", "Reggaeton", "Reggae Fusion", "Reggae en Español", "Reggae en Inglés"] +const categoriasPodcast = ["Comedia", "Noticias", "Historia", "Ciencia", "Tecnología", "Cine", "Deportes", "Salud", "Negocios", "Educación",] + +interface Props{ + subject: string; + class?: string; +} + +const {subject, class:className} = Astro.props; + +--- + + +
+ {tabsItem.map((tab, index)=> { + return ( + + + + + ) + })} + {tabsItem.map((tab)=> { + return ( + +
{tab.content == "Canción" ?

hola

:

adios

}
+ + ) + })} +
+ + + + + \ No newline at end of file diff --git a/playbeat/src/pages/creator/tusaudios.astro b/playbeat/src/pages/creator/tusaudios.astro index 7a08eaa..b812694 100644 --- a/playbeat/src/pages/creator/tusaudios.astro +++ b/playbeat/src/pages/creator/tusaudios.astro @@ -1,7 +1,7 @@ --- import CreatorLayout from '@layouts/CreatorLayout.astro'; import HeaderCreator from '@components/HeaderCreator.astro'; - +import TagsTabs from '@components/TagsTabs.astro'; --- @@ -14,13 +14,37 @@ import HeaderCreator from '@components/HeaderCreator.astro';

TUS AUDIOS

-

Agrega un nuevo audio

+
+

Agrega un nuevo audio

- -
- -
+
+ +
+ +
+
+
+
+ +
+ + +
+
+ + +
+
+ + +
+ +
+
+ +
+
+
From 1dc5936547bb7c32b5e7619c14a1f46e4dfa8fc8 Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Sat, 16 Mar 2024 19:56:16 +0100 Subject: [PATCH 03/11] Add Tags component and update TagsTabs and tusaudios pages --- playbeat/src/components/Tags.astro | 26 ++++++++++++++++++++++ playbeat/src/components/TagsTabs.astro | 6 ++--- playbeat/src/pages/creator/tusaudios.astro | 4 ++-- 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/playbeat/src/components/Tags.astro b/playbeat/src/components/Tags.astro index e69de29..65905c3 100644 --- a/playbeat/src/components/Tags.astro +++ b/playbeat/src/components/Tags.astro @@ -0,0 +1,26 @@ +--- + +const tags = ["Pop", "Rock", "Indie", "R&b", "Rap", "Latino", "Trap"] +--- + +
+ {tags.map((tag) => { + return ( + + ) + + })} + + + +
+ + \ No newline at end of file diff --git a/playbeat/src/components/TagsTabs.astro b/playbeat/src/components/TagsTabs.astro index 99ca490..dc9c61e 100644 --- a/playbeat/src/components/TagsTabs.astro +++ b/playbeat/src/components/TagsTabs.astro @@ -1,7 +1,5 @@ --- -import Queue from './Queue.astro'; -import History from './History.astro'; -import SearchCategories from './SearchCategories.astro'; +import Tags from '@components/Tags.astro'; const tabsItem = [ { id: 'Canción', label: 'Canción', content: "Canción" }, @@ -33,7 +31,7 @@ const {subject, class:className} = Astro.props; {tabsItem.map((tab)=> { return ( -
{tab.content == "Canción" ?

hola

:

adios

}
+
{tab.content == "Canción" ? :

adios

}
) })} diff --git a/playbeat/src/pages/creator/tusaudios.astro b/playbeat/src/pages/creator/tusaudios.astro index b812694..4287bb4 100644 --- a/playbeat/src/pages/creator/tusaudios.astro +++ b/playbeat/src/pages/creator/tusaudios.astro @@ -28,11 +28,11 @@ import TagsTabs from '@components/TagsTabs.astro';
- +
- +
From 39a9bdd5923a63065ebddb901a0ecd68a67d3304 Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Sun, 17 Mar 2024 10:21:25 +0100 Subject: [PATCH 04/11] Refactor tags in TagsTabs component --- playbeat/src/components/Tags.astro | 6 +++++- playbeat/src/components/TagsTabs.astro | 6 +++--- playbeat/src/pages/creator/tusaudios.astro | 4 ++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/playbeat/src/components/Tags.astro b/playbeat/src/components/Tags.astro index 65905c3..f508ff7 100644 --- a/playbeat/src/components/Tags.astro +++ b/playbeat/src/components/Tags.astro @@ -1,6 +1,10 @@ --- -const tags = ["Pop", "Rock", "Indie", "R&b", "Rap", "Latino", "Trap"] +interface Props { + tags: string[] +} + +const {tags} = Astro.props ---
diff --git a/playbeat/src/components/TagsTabs.astro b/playbeat/src/components/TagsTabs.astro index dc9c61e..bb677b3 100644 --- a/playbeat/src/components/TagsTabs.astro +++ b/playbeat/src/components/TagsTabs.astro @@ -6,8 +6,8 @@ const tabsItem = [ { id: 'Podcast', label: 'Podcast', content: "Podcast" }, ]; -const categoriasMusica = [ "Pop", "Rock", "Reggaeton", "Rap", "Electrónica", "Clásica", "Jazz", "Indie", "Metal", "Hip Hop", "Trap", "Salsa", "Bachata", "Merengue", "Cumbia", "Reggae", "Folk", "Country", "Blues", "Soul", "Funk", "Disco", "R&B", "Gospel", "House", "Techno", "Dubstep", "Drum & Bass", "Hardstyle", "Trance", "Chillout", "Ambient", "Dance", "Reggaeton", "Ska", "Punk", "Grunge", "Emo", "Post-Hardcore", "Metalcore", "Deathcore", "Black Metal", "Death Metal", "Thrash Metal", "Power Metal", "Doom Metal", "Gothic Metal", "Folk Metal", "Viking Metal", "Symphonic Metal", "Progressive Metal", "Nu Metal", "Alternative Metal", "Industrial Metal", "Rap Metal", "Funk Metal", "Glam Metal", "Goregrind", "Grindcore", "Deathgrind", "Metalcore", "Mathcore", "Post-Hardcore", "Emo", "Screamo", "Pop Punk", "Hardcore Punk", "Post-Punk", "Punk Rock", "Psychobilly", "Horror Punk", "Ska Punk", "Reggae", "Ska", "Rocksteady", "2 Tone", "Third Wave Ska", "Ska Punk", "Reggae", "Dancehall", "Dub", "Lovers Rock", "Roots Reggae", "Ragga", "Reggaeton", "Reggae Fusion", "Reggae en Español", "Reggae en Inglés"] -const categoriasPodcast = ["Comedia", "Noticias", "Historia", "Ciencia", "Tecnología", "Cine", "Deportes", "Salud", "Negocios", "Educación",] +const tagsCancion = ["Pop", "Rock", "Indie", "R&b", "Rap", "Latino", "Trap"] +const tagsPodcast = ["Historia", "Ciencia", "Cultura", "Deporte", "Música", "Humor", "Tecnología", "Negocios"] interface Props{ subject: string; @@ -31,7 +31,7 @@ const {subject, class:className} = Astro.props; {tabsItem.map((tab)=> { return ( -
{tab.content == "Canción" ? :

adios

}
+
{tab.content == "Canción" ? : }
) })} diff --git a/playbeat/src/pages/creator/tusaudios.astro b/playbeat/src/pages/creator/tusaudios.astro index 4287bb4..6506df1 100644 --- a/playbeat/src/pages/creator/tusaudios.astro +++ b/playbeat/src/pages/creator/tusaudios.astro @@ -23,8 +23,8 @@ import TagsTabs from '@components/TagsTabs.astro';
-
-
+
+
From e788ed70e78ef64574dff16218a0600bd5a0e6af Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Sun, 17 Mar 2024 10:26:00 +0100 Subject: [PATCH 05/11] Add table to display song information --- playbeat/src/pages/creator/tusaudios.astro | 25 ++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/playbeat/src/pages/creator/tusaudios.astro b/playbeat/src/pages/creator/tusaudios.astro index 6506df1..3667b7e 100644 --- a/playbeat/src/pages/creator/tusaudios.astro +++ b/playbeat/src/pages/creator/tusaudios.astro @@ -47,6 +47,31 @@ import TagsTabs from '@components/TagsTabs.astro';
+ + + + + + + + + + {canciones.map((cancion, index) => ( + + + + + + + + )) + } + +
CanciónÁlbumDuración
+
+
+ {cancion.title} + 		{cancion.album}{cancion.time}
From 3cca5f5fe4a65883909ab99bbb962bcd380addab Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Sun, 17 Mar 2024 17:48:15 +0100 Subject: [PATCH 06/11] Add array of songs and update section class in tusaudios.astro --- playbeat/src/components/Tags.astro | 2 +- playbeat/src/pages/creator/tusaudios.astro | 74 +++++++++++++++++++++- 2 files changed, 74 insertions(+), 2 deletions(-) diff --git a/playbeat/src/components/Tags.astro b/playbeat/src/components/Tags.astro index f508ff7..51c6e44 100644 --- a/playbeat/src/components/Tags.astro +++ b/playbeat/src/components/Tags.astro @@ -10,7 +10,7 @@ const {tags} = Astro.props
{tags.map((tag) => { return ( -
-

Agrega un nuevo audio

From fb1a25fb95fe01a557952f546d674f2352b88645 Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Sun, 17 Mar 2024 23:12:30 +0100 Subject: [PATCH 07/11] Add form submission functionality and audio preview --- playbeat/src/components/Tags.astro | 2 +- playbeat/src/pages/creator/tusaudios.astro | 87 +++++++++++++++------- 2 files changed, 63 insertions(+), 26 deletions(-) diff --git a/playbeat/src/components/Tags.astro b/playbeat/src/components/Tags.astro index 51c6e44..d3223ac 100644 --- a/playbeat/src/components/Tags.astro +++ b/playbeat/src/components/Tags.astro @@ -11,7 +11,7 @@ const {tags} = Astro.props {tags.map((tag) => { return ( ) diff --git a/playbeat/src/pages/creator/tusaudios.astro b/playbeat/src/pages/creator/tusaudios.astro index df0b658..e386645 100644 --- a/playbeat/src/pages/creator/tusaudios.astro +++ b/playbeat/src/pages/creator/tusaudios.astro @@ -77,6 +77,18 @@ const canciones = [ ] --- +
@@ -88,35 +100,42 @@ const canciones = [

Agrega un nuevo audio

- -
- -
- -
-
-
-
+ +
-
- - -
-
- - -
-
- - +
+ +
+
+
+
+
-
-
- -
-
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+ + +
+
@@ -148,3 +167,21 @@ const canciones = [ + + From 335db242abeacd987e41e0adc2cce1a777c0c342 Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Mon, 18 Mar 2024 10:05:34 +0100 Subject: [PATCH 08/11] Add AddAudio component and update UI in tusaudios.astro --- playbeat/src/components/AddAudio.astro | 51 ++++++++ playbeat/src/pages/audio/cancion1.astro | 132 +++++++++++++++++++++ playbeat/src/pages/creator/tusaudios.astro | 45 +------ 3 files changed, 187 insertions(+), 41 deletions(-) create mode 100644 playbeat/src/components/AddAudio.astro create mode 100644 playbeat/src/pages/audio/cancion1.astro diff --git a/playbeat/src/components/AddAudio.astro b/playbeat/src/components/AddAudio.astro new file mode 100644 index 0000000..1d435bb --- /dev/null +++ b/playbeat/src/components/AddAudio.astro @@ -0,0 +1,51 @@ +--- +import TagsTabs from '@components/TagsTabs.astro'; + +interface Props { + title: string +} + +const {title} = Astro.props + +--- + +
+

{title}

+
+
+ +
+ +
+ +
+
+
+
+ +
+ + +
+
+ + +
+
+ + +
+ +
+
+ +
+
+
+
+ + +
+ + +
\ No newline at end of file diff --git a/playbeat/src/pages/audio/cancion1.astro b/playbeat/src/pages/audio/cancion1.astro new file mode 100644 index 0000000..c90f34b --- /dev/null +++ b/playbeat/src/pages/audio/cancion1.astro @@ -0,0 +1,132 @@ +--- +import CreatorLayout from '@layouts/CreatorLayout.astro'; +import HeaderCreator from '@components/HeaderCreator.astro'; +import TagsTabs from '@components/TagsTabs.astro'; +import AddAudio from '@components/AddAudio.astro'; +const canciones = [ + { + title: "Cancion 1", + artist: "Artista 1", + album: "Album 1", + time: "2:30", + url: "stats/cancion1" + }, + { + title: "Cancion 2", + artist: "Artista 2", + album: "Album 2", + time: "3:30", + url: "stats/cancion1" + }, + { + title: "Cancion 3", + artist: "Artista 3", + album: "Album 3", + time: "4:30", + url: "stats/cancion1" + }, + { + title: "Cancion 4", + artist: "Artista 4", + album: "Album 4", + time: "5:30", + url: "stats/cancion1" + }, + { + title: "Cancion 5", + artist: "Artista 5", + album: "Album 5", + time: "6:30", + url: "stats/cancion1" + }, + { + title: "Cancion 6", + artist: "Artista 6", + album: "Album 6", + time: "7:30", + url: "stats/cancion1" + }, + { + title: "Cancion 7", + artist: "Artista 7", + album: "Album 7", + time: "8:30", + url: "stats/cancion1" + }, + { + title: "Cancion 8", + artist: "Artista 8", + album: "Album 8", + time: "9:30", + url: "stats/cancion1" + }, + { + title: "Cancion 9", + artist: "Artista 9", + album: "Album 9", + time: "10:30", + url: "stats/cancion1" + }, + { + title: "Cancion 10", + artist: "Artista 10", + album: "Album 10", + time: "11:30", + url: "stats/cancion1" + } + +] + +--- + + + +
+ +
+

PLAYBEAT

+

TUS AUDIOS

+
+
+ + +
+ +
+ + + diff --git a/playbeat/src/pages/creator/tusaudios.astro b/playbeat/src/pages/creator/tusaudios.astro index e386645..53798cc 100644 --- a/playbeat/src/pages/creator/tusaudios.astro +++ b/playbeat/src/pages/creator/tusaudios.astro @@ -2,6 +2,7 @@ import CreatorLayout from '@layouts/CreatorLayout.astro'; import HeaderCreator from '@components/HeaderCreator.astro'; import TagsTabs from '@components/TagsTabs.astro'; +import AddAudio from '@components/AddAudio.astro'; const canciones = [ { title: "Cancion 1", @@ -98,46 +99,8 @@ const canciones = [

TUS AUDIOS

-
-

Agrega un nuevo audio

-
-
- -
- -
- -
-
-
-
- -
- - -
-
- - -
-
- - -
- -
-
- -
-
-
-
- - -
- - -
+ +

Tus audios

@@ -148,7 +111,7 @@ const canciones = [ {canciones.map((cancion, index) => ( - +
From 2194680b71f254890a5958e863bdd4d8616f37b0 Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Fri, 29 Mar 2024 23:46:47 +0100 Subject: [PATCH 09/11] Add image preview and upload functionality to AddAudio component, and include AddAlbum component in tusalbums page --- playbeat/src/components/AddAlbum.astro | 106 +++++++++++++++++++++ playbeat/src/components/AddAudio.astro | 23 ++++- playbeat/src/pages/creator/tusalbums.astro | 7 +- 3 files changed, 132 insertions(+), 4 deletions(-) create mode 100644 playbeat/src/components/AddAlbum.astro diff --git a/playbeat/src/components/AddAlbum.astro b/playbeat/src/components/AddAlbum.astro new file mode 100644 index 0000000..ae13920 --- /dev/null +++ b/playbeat/src/components/AddAlbum.astro @@ -0,0 +1,106 @@ +--- +import TagsTabs from '@components/TagsTabs.astro'; + +interface Props { + title: string +} + +const {title} = Astro.props + +--- + +
+

{title}

+
+
+ +
+ +
+ + +
+
+
+
+ +
+ + +
+
+ + +
+
+ + +
+ +
+
+ +
+
+
+ +
+ + +
+ + +
+ +
+ \ No newline at end of file diff --git a/playbeat/src/components/AddAudio.astro b/playbeat/src/components/AddAudio.astro index 1d435bb..da4564c 100644 --- a/playbeat/src/components/AddAudio.astro +++ b/playbeat/src/components/AddAudio.astro @@ -11,12 +11,13 @@ const {title} = Astro.props

{title}

-
+
- +
+
@@ -48,4 +49,20 @@ const {title} = Astro.props
-
\ No newline at end of file + + + \ No newline at end of file diff --git a/playbeat/src/pages/creator/tusalbums.astro b/playbeat/src/pages/creator/tusalbums.astro index 6afe2ca..544bdce 100644 --- a/playbeat/src/pages/creator/tusalbums.astro +++ b/playbeat/src/pages/creator/tusalbums.astro @@ -2,6 +2,7 @@ import CreatorLayout from '@layouts/CreatorLayout.astro'; import HeaderCreator from '@components/HeaderCreator.astro'; import Library from '@components/Library.astro'; +import AddAlbum from '@components/AddAlbum.astro'; const Playlists = [ @@ -18,7 +19,9 @@ const Playlists = [

PLAYBEAT

TUS ALBUMS

-
+
+ + {Playlists.map( (element) => { @@ -29,3 +32,5 @@ const Playlists = [
+ + From 08929b37ce0c1c6d0e6c34535a085f660535aa6f Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Sat, 30 Mar 2024 10:47:08 +0100 Subject: [PATCH 10/11] Add audio input fields and functionality to dynamically add and remove audio blocks --- playbeat/src/components/AddAlbum.astro | 54 +++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 5 deletions(-) diff --git a/playbeat/src/components/AddAlbum.astro b/playbeat/src/components/AddAlbum.astro index ae13920..33ab688 100644 --- a/playbeat/src/components/AddAlbum.astro +++ b/playbeat/src/components/AddAlbum.astro @@ -43,12 +43,32 @@ const {title} = Astro.props -
+
+
+ +
+
+ +
+ + +
+
+ + +
+
+
+
- +
+ + +
+ @@ -59,13 +79,31 @@ const {title} = Astro.props var newAudioBlock = document.createElement('div'); newAudioBlock.className = "w-full flex flex-col gap-2"; newAudioBlock.innerHTML = ` +
+
+ +
+
+ +
+ + +
+
+ + +
+ +
+
+
`; document.getElementById('audioContainer').appendChild(newAudioBlock); var blob = window.URL || window.webkitURL; - const inputFile = document.getElementById('file'+i); - const audio = document.getElementById('audio'+i); + const inputFile = document.getElementById('file'+audioCount); + const audio = document.getElementById('audio'+audioCount); if(inputFile != null && audio != null){ inputFile.addEventListener('change', function(event){ @@ -77,7 +115,13 @@ const {title} = Astro.props } audioCount++; }); - + document.getElementById('minusAudio').addEventListener('click', function() { + if(audioCount > 1) { + audioCount--; + var audioContainer = document.getElementById('audioContainer'); + audioContainer.removeChild(audioContainer.lastChild); + } + }); function previewImage(event) { var reader = new FileReader(); reader.onload = function(){ From 63d84e0473afd8283c9119780e746db6c0f60c38 Mon Sep 17 00:00:00 2001 From: pabloangusto Date: Sat, 30 Mar 2024 10:52:16 +0100 Subject: [PATCH 11/11] Update AddAlbum component styles and layout --- playbeat/src/components/AddAlbum.astro | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/playbeat/src/components/AddAlbum.astro b/playbeat/src/components/AddAlbum.astro index 33ab688..20f3776 100644 --- a/playbeat/src/components/AddAlbum.astro +++ b/playbeat/src/components/AddAlbum.astro @@ -43,11 +43,11 @@ const {title} = Astro.props -
+
-
+
-
+
@@ -62,7 +62,7 @@ const {title} = Astro.props
- +
@@ -80,9 +80,9 @@ const {title} = Astro.props newAudioBlock.className = "w-full flex flex-col gap-2"; newAudioBlock.innerHTML = `
-
+
-
+
@@ -98,7 +98,7 @@ const {title} = Astro.props
- + `; document.getElementById('audioContainer').appendChild(newAudioBlock); var blob = window.URL || window.webkitURL;