207 lines
11 KiB
HTML
207 lines
11 KiB
HTML
---
|
|
layout: default
|
|
title: "{{ page.file }}"
|
|
---
|
|
|
|
<div class="publication">
|
|
{% include sidebar.html %}
|
|
<main class="content">
|
|
<div class="container">
|
|
<br>
|
|
|
|
<h1 class="title is-3 mb-4"><code>{{ page.file }}</h1></code>
|
|
|
|
{% if page.file or page.bpm %}
|
|
<div class="mb-5">
|
|
<div class="columns is-mobile is-multiline is-vcentered">
|
|
{% if page.file %}
|
|
<div class="column is-narrow">
|
|
<span><strong><code>📁 Arquivo:</strong> {{ page.file }}</span></code>
|
|
</div>
|
|
{% endif %}
|
|
{% if page.bpm %}
|
|
<div class="column is-narrow">
|
|
<span><strong><code>🎵 BPM:</strong> {{ page.bpm }}</span></code>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column is-two-thirds">
|
|
|
|
{% if page.tags %}
|
|
{% assign tags_vazias = true %}
|
|
{% for categoria in page.tags %}
|
|
{% if categoria[1].size > 0 %}
|
|
{% assign tags_vazias = false %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% unless tags_vazias %}
|
|
<section class="tags-section mb-6">
|
|
{% assign audio_file = '/mmp/wav/' | append: page.file | append: '.wav' %}
|
|
|
|
{% if audio_file %}
|
|
<section class="audio-player-section mb-6">
|
|
<audio controls>
|
|
<source src="{{ audio_file | relative_url }}" type="audio/wav">
|
|
Seu navegador não suporta o elemento <code>audio</code>.
|
|
</audio>
|
|
</section>
|
|
{% endif %}
|
|
<details>
|
|
<summary class="title is-5" style="cursor: pointer; padding-left: 0;">
|
|
<code>🏷️ Tags</code>
|
|
</summary>
|
|
{% for categoria in page.tags %}
|
|
{% if categoria[1].size > 0 %}
|
|
<div class="mb-4">
|
|
<strong><code>{{ categoria[0] }}:</strong></code>
|
|
<div class="tags mt-2">
|
|
{% for valor in categoria[1] %}
|
|
{% if valor != "" %}
|
|
{% assign tag_slug = valor | replace: ' ', '+' %}
|
|
|
|
{% if categoria[0] == 'bassline' %}
|
|
<a href="{{ '/bassline/?bassline=' | append: tag_slug | relative_url }}" class="tag is-info is-light">{{ valor }}</a>
|
|
{% elsif categoria[0] == 'sample' %}
|
|
<a href="{{ '/sample/?sample=' | append: tag_slug | relative_url }}" class="tag is-info is-light">{{ valor }}</a>
|
|
{% elsif categoria[0] == 'plugin' %}
|
|
<a href="{{ '/plugin/?plugin=' | append: tag_slug | relative_url }}" class="tag is-info is-light">{{ valor }}</a>
|
|
{% elsif categoria[0] == 'automation' %}
|
|
<a href="{{ '/automation/?automation=' | append: tag_slug | relative_url }}" class="tag is-info is-light">{{ valor }}</a>
|
|
{% else %}
|
|
<a href="{{ '/' | append: tag_slug | relative_url }}" class="tag is-info is-light">{{ valor }}</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</section>
|
|
</details>
|
|
{% endunless %}
|
|
{% endif %}
|
|
{% if page.tracks and page.tracks.size > 0 %}
|
|
<section class="instruments-section">
|
|
|
|
{% comment %}
|
|
USANDO <details> PARA CRIAR UM ACORDION NATIVO:
|
|
O atributo "open" (se presente) mantém a lista expandida.
|
|
O <summary> é o título clicável que o usuário vê.
|
|
{% endcomment %}
|
|
<details>
|
|
<summary class="title is-5" style="cursor: pointer; padding-left: 0;">
|
|
<code>🎚️ Instrumentos </code>
|
|
</summary>
|
|
|
|
<div class="content mt-3">
|
|
<ul style="list-style: none; padding-left: 0;">
|
|
{% for track in page.tracks %}
|
|
{% assign tem_instr = false %}
|
|
{% if track.instruments and track.instruments.size > 0 %}
|
|
{% assign tem_instr = true %}
|
|
{% endif %}
|
|
|
|
{% if track.bassline_name or tem_instr %}
|
|
<li class="mb-5">
|
|
{% if track.bassline_name %}
|
|
<p class="has-text-weight-bold mb-2">🎼 {{ track.bassline_name }}</p>
|
|
{% endif %}
|
|
|
|
{% if tem_instr %}
|
|
<ul class="pl-4">
|
|
{% for instrument in track.instruments %}
|
|
{% if instrument.instrument_name %}
|
|
<li style="margin-bottom: 0.4rem;">
|
|
{% assign instrument_slug = instrument.instrument_name | replace: ' ', '+' %}
|
|
<a href="{{ '/instruments/?instrument=' | append: instrument_slug | relative_url }}" class="tag is-info is-light">
|
|
<code>{{ instrument.instrument_name }}</code>
|
|
</a>
|
|
|
|
{% comment %}
|
|
VERIFICAÇÃO DE SAMPLE:
|
|
Se `audiofileprocessor` existir E `src` existir E `src` não for vazio, exibe o player.
|
|
{% endcomment %}
|
|
{% assign sample_src = instrument.audiofileprocessor.src | default: "" | strip %}
|
|
|
|
{% if instrument.audiofileprocessor and sample_src != "" %}
|
|
{% assign audio_filename_with_path = 'src/samples/' | append: sample_src %}
|
|
<div class="audio-player-section mt-3">
|
|
<audio controls>
|
|
<source
|
|
src="{{ audio_filename_with_path | relative_url }}"
|
|
type="audio/ogg"
|
|
>
|
|
|
|
{% assign wav_path = audio_filename_with_path | replace: '.ogg', '.wav' %}
|
|
<source
|
|
src="{{ wav_path | relative_url }}"
|
|
type="audio/wav"
|
|
>
|
|
|
|
Seu navegador não suporta o elemento <code>audio</code>.
|
|
</audio>
|
|
</div>
|
|
{% else %}
|
|
{% comment %} CONDIÇÃO DE MENSAGEM: O sample não foi enviado! {% endcomment %}
|
|
<p class="has-text-danger is-size-7 mt-3">
|
|
O sample **não foi enviado** 😢
|
|
</p>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
|
|
</section>
|
|
{% endif %}
|
|
</div> <div class="column is-one-third" height="800px" widht="800px">
|
|
<div class="box p-4 has-background-info-light" height="800px" widht="800px">
|
|
<h3 class="title is-6 has-text-info mb-3">🛠️ Abra na Criação Colaborativa</h3>
|
|
|
|
{% comment %}
|
|
CONSTRUÇÃO DA URL CORRIGIDA PARA AMBIENTES DE TESTE:
|
|
- O filtro `relative_url` foi removido para evitar a duplicação do caminho.
|
|
- O prefixo de teste `/~jotachina/mmpSearch/` foi adicionado manualmente.
|
|
{% endcomment %}
|
|
{% assign creation_url = '/~jotachina/mmpSearch/creation.html?project=' | append: page.file %}
|
|
<span class="icon"><i class="fa-solid fa-up-right-from-square"></i></span>
|
|
<a
|
|
href="{{ creation_url }}"
|
|
target="_blank"
|
|
class="button is-info is-fullwidth is-medium mb-4"
|
|
>Abrir no MMPCreator</a>
|
|
|
|
<p class="is-size-7 has-text-grey-dark">
|
|
O link abrirá o projeto em uma nova aba para edição.
|
|
<br>
|
|
Arquivo: <code>{{ page.file }}</code>
|
|
</p>
|
|
|
|
<div class="mt-4 is-hidden-mobile" height="800px" widht="800px">
|
|
{% assign embed_url = creation_url | append: '&embed=true' %}
|
|
|
|
<iframe
|
|
src="{{ embed_url }}"
|
|
title="Prévia do Projeto"
|
|
style="width: 500px; height: 800px; border: 1px solid #ccc; border-radius: 4px;"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
</div> </div>
|
|
</div>
|
|
</main>
|
|
</div> |