Skip to content

Commit

Permalink
Merge pull request #40 from UNIZAR-30226-2024-03/Audios
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arejula11
Arejula11 authored Mar 30, 2024
2 parents 8b98473 + 0b35870 commit 632f42f
Show file tree
Hide file tree
Showing 7 changed files with 626 additions and 3 deletions.
150 changes: 150 additions & 0 deletions playbeat/src/components/AddAlbum.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
---
import TagsTabs from '@components/TagsTabs.astro';
interface Props {
title: string
}
const {title} = Astro.props
---

<div class="flex flex-col gap-3 px-8">
<h2 class="text-xl font-medium">{title}</h2>
<form class="flex flex-col items-center gap-3 pt-4">
<div class="flex flex-row items-center w-full gap-3">

<section class="flex flex-col">
<input type="file" id="addFoto" name="photo" class=" text-white p-2 rounded-md hidden" onchange="previewImage(event)" />
<div class=" w-64 aspect-square mt-2 cursor-pointer bg-[#333] rounded-md border-2 border-[#c5c5c5] flex justify-center items-center" onclick="document.getElementById('addFoto').click();">
<img id="preview" class="w-64 aspect-square rounded-md hidden" />
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 24 24" fill="none" stroke="#c5c5c5" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-photo"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" /></svg>
</div>
</section>
<section class="h-64 flex flex-col items-start gap-4">
<div class="h-20 flex flex-row justify-start gap-4">

<div class="flex flex-col gap-1">
<label>Nombre del album</label>
<input type="text" name="name" class="w-80 h-10 rounded-md bg-[#333] border-2 border-[#c5c5c5] text-white p-2 outline-none" placeholder="Nombre" />
</div>
<div class="flex flex-col gap-1">
<label >Participantes</label>
<input type="text" name="featurings" class="w-80 h-10 rounded-md bg-[#333] border-2 border-[#c5c5c5] text-white p-2 outline-none" placeholder="Usuario" />
</div>
<div class="flex flex-row gap-2 items-center mt-4 ">
<label>Privado</label>
<input type="checkbox" name="private" />
</div>

</div>
<div class="w-full h-full">
<TagsTabs subject="audio"/>
</div>
</section>
</div>
<div id="audioContainer" class="w-full flex flex-col gap-2 ">
<div class="w-full h-[1px] bg-[#c5c5c5] "></div>
<div class="flex flex-row items-center w-full gap-3 ">

<section class="h-26 flex flex-col items-start gap-4 mt-4">
<div class="h-20 flex flex-row justify-start gap-4">

<div class="flex flex-col gap-1">
<label>Nombre del audio</label>
<input type="text" name="name" class="w-80 h-10 rounded-md bg-[#333] border-2 border-[#c5c5c5] text-white p-2 outline-none" placeholder="Nombre" />
</div>
<div class="flex flex-col gap-1">
<label >Participantes</label>
<input type="text" name="featurings" class="w-80 h-10 rounded-md bg-[#333] border-2 border-[#c5c5c5] text-white p-2 outline-none" placeholder="Usuario" />
</div>
</div>
</section>
</div>
<input type="file" id="file" name="audio"/>
<audio id="audio" controls class="w-full mb-4" ></audio>
</div>
<div class="flex flex-row">
<svg id="addAudio" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-plus cursor-pointer "><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
<svg id="minusAudio" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus cursor-pointer"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /></svg>
</div>

<input type="submit" class=" bg-bluePB px-4 py-1 rounded-sm" value="Subir"/>
</form>

</div>
<script is:inline>
var audioCount = 1;
document.getElementById('addAudio').addEventListener('click', function() {
var newAudioBlock = document.createElement('div');
newAudioBlock.className = "w-full flex flex-col gap-2";
newAudioBlock.innerHTML = `
<div class="w-full h-[1px] bg-[#c5c5c5] "></div>
<div class="flex flex-row items-center w-full gap-3 ">

<section class="h-20 flex flex-col items-start gap-4 mt-4">
<div class="h-20 flex flex-row justify-start gap-4">

<div class="flex flex-col gap-1">
<label>Nombre del audio</label>
<input type="text" name="name${audioCount}" class="w-80 h-10 rounded-md bg-[#333] border-2 border-[#c5c5c5] text-white p-2 outline-none" placeholder="Nombre" />
</div>
<div class="flex flex-col gap-1">
<label >Participantes</label>
<input type="text" name="featurings${audioCount}" class="w-80 h-10 rounded-md bg-[#333] border-2 border-[#c5c5c5] text-white p-2 outline-none" placeholder="Usuario" />
</div>

</div>
</section>
</div>
<input type="file" id="file${audioCount}" name="audio"/>
<audio id="audio${audioCount}" controls class="w-full mb-4"></audio>
`;
document.getElementById('audioContainer').appendChild(newAudioBlock);
var blob = window.URL || window.webkitURL;
const inputFile = document.getElementById('file'+audioCount);
const audio = document.getElementById('audio'+audioCount);
if(inputFile != null && audio != null){
inputFile.addEventListener('change', function(event){

var file = this.files[0],
fileURL = blob.createObjectURL(file);
audio.src = fileURL;

});
}
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(){
var output = document.getElementById('preview');
output.style.display = 'block';
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}


// Check for BlobURL support
var blob = window.URL || window.webkitURL;
const inputFile = document.getElementById('file');
const audio = document.getElementById('audio');
if(inputFile != null && audio != null){
inputFile.addEventListener('change', function(event){

var file = this.files[0],
fileURL = blob.createObjectURL(file);
audio.src = fileURL;

});
}

</script>
68 changes: 68 additions & 0 deletions playbeat/src/components/AddAudio.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
import TagsTabs from '@components/TagsTabs.astro';
interface Props {
title: string
}
const {title} = Astro.props
---

<div class="flex flex-col gap-3">
<h2 class="text-xl font-medium">{title}</h2>
<form class="flex flex-col items-center gap-3 pt-4" onsubmit="uploadAudio(event)">
<div class="flex flex-row items-center w-full gap-3">

<section class="flex flex-col">
<input type="file" id="addFoto" name="photo" class=" text-white p-2 rounded-md hidden" onchange="previewImage(event)" />
<div class=" w-64 aspect-square mt-2 cursor-pointer bg-[#333] rounded-md border-2 border-[#c5c5c5] flex justify-center items-center" onclick="document.getElementById('addFoto').click();">
<img id="preview" class="w-64 aspect-square rounded-md hidden" />
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 24 24" fill="none" stroke="#c5c5c5" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-photo"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" /></svg>
</div>
</section>
<section class="h-64 flex flex-col items-start gap-4">
<div class="h-20 flex flex-row justify-start gap-4">

<div class="flex flex-col gap-1">
<label>Nombre del audio</label>
<input type="text" name="name" class="w-80 h-10 rounded-md bg-[#333] border-2 border-[#c5c5c5] text-white p-2 outline-none" placeholder="Nombre" />
</div>
<div class="flex flex-col gap-1">
<label >Participantes</label>
<input type="text" name="featurings" class="w-80 h-10 rounded-md bg-[#333] border-2 border-[#c5c5c5] text-white p-2 outline-none" placeholder="Usuario" />
</div>
<div class="flex flex-row gap-2 items-center mt-4 ">
<label>Privado</label>
<input type="checkbox" name="private" />
</div>

</div>
<div class="w-full h-full">
<TagsTabs subject="audio"/>
</div>
</section>
</div>
<div class="w-full flex flex-col gap-2">
<input type="file" id="file" name="audio"/>
<audio id="audio" controls class="w-full"></audio>
</div>
<input type="submit" class=" bg-bluePB px-4 py-1 rounded-sm" value="Subir"/>
</form>
</div>

<script is:inline>
function previewImage(event) {
var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('preview');
output.style.display = 'block';
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}
function uploadAudio(event){
event.preventDefault();

}
</script>
30 changes: 30 additions & 0 deletions playbeat/src/components/Tags.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
---
interface Props {
tags: string[]
}
const {tags} = Astro.props
---

<div class="h-24 flex flex-row flex-wrap gap-4">
{tags.map((tag) => {
return (
<label class=" w-max flex h-max rounded-full justify-center items-center cursor-pointer">
<input type="checkbox" name={tag} class="hidden tag"/>
<span class="select-none w-max px-5 rounded-full h-max py-2 flex justify-center items-center border-2 border-bluePB bg-bluePB font-medium">{tag}</span>
</label>
)

})}



</div>

<style>
.tag:checked + span{
border: 2px solid #fff;
}

</style>
105 changes: 105 additions & 0 deletions playbeat/src/components/TagsTabs.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
---
import Tags from '@components/Tags.astro';
const tabsItem = [
{ id: 'Canción', label: 'Canción', content: "Canción" },
{ id: 'Podcast', label: 'Podcast', content: "Podcast" },
];
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;
class?: string;
}
const {subject, class:className} = Astro.props;
---


<div class="tabsNav ">
{tabsItem.map((tab, index)=> {
return (

<input type="radio" name={"tabs"+subject} id={tab.id+subject} checked={index == 0}>
<label for={tab.id+subject} class="font-medium" >{tab.label}</label>

)
})}
{tabsItem.map((tab)=> {
return (

<div class={className}>{tab.content == "Canción" ? <Tags tags={tagsCancion}/> : <Tags tags={tagsPodcast}/>}</div>

)
})}
</div>



<style>

/*Contiene todo el sistema de tabs*/
.tabsNav{
position: relative;

}
/*Las pestañas: cabecera inputs y labels*/
.tabsNav {
display:block;
position:relative;
width:100%;
}

.tabsNav input{
display:none;
}
.tabsNav label{
display:inline-block;
position:relative;
z-index:10;
width: 100px;
text-align: center;
color: lightgray;
margin-bottom: 10px;
cursor: pointer;

}


.tabsNav .div:nth-of-type(1) {
padding: 30px;


}
.tabsNav .div:nth-of-type(2) {

}

/*Las pestañas contenido dentro de los tabs*/
.tabsNav div{
display:none;

text-align:justify;

}
/*Etiquetas pulsadas*/
.tabsNav input:checked + label
{
color: white;
border-bottom: 2px solid #6985C0;

}

.tabsNav input:nth-of-type(1):checked ~ div:nth-of-type(1){
display:block;

}
.tabsNav input:nth-of-type(2):checked ~ div:nth-of-type(2){
display:block;

}
</style>

Loading

0 comments on commit 632f42f

Please sign in to comment.