Corrigindo aparência dos projetos no MMPSearch e interligando com o MMPCreator
Deploy / Deploy (push) Successful in 1m16s
Details
Deploy / Deploy (push) Successful in 1m16s
Details
This commit is contained in:
parent
b21d8c8a02
commit
25a3a60576
|
|
@ -7,6 +7,7 @@ title: "{{ page.file }}"
|
|||
{% include sidebar.html %}
|
||||
<main class="content">
|
||||
<div class="container">
|
||||
<br>
|
||||
|
||||
<h1 class="title is-3 mb-4"><code>{{ page.file }}</h1></code>
|
||||
|
||||
|
|
@ -51,8 +52,10 @@ title: "{{ page.file }}"
|
|||
</audio>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<h2 class="title is-5"><code>🏷️ Tags</code></h2>
|
||||
<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">
|
||||
|
|
@ -80,86 +83,106 @@ title: "{{ page.file }}"
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
</details>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% if page.tracks and page.tracks.size > 0 %}
|
||||
<section class="instruments-section">
|
||||
<h2 class="title is-5"><code>🎚️ Instrumentos</h2></code>
|
||||
<div class="content">
|
||||
<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 %}
|
||||
<section class="instruments-section">
|
||||
|
||||
{% 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 %}
|
||||
{% 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>
|
||||
|
||||
{% 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>
|
||||
<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 instrument.audiofileprocessor and instrument.audiofileprocessor.src %}
|
||||
{% assign audio_filename_with_path = 'src/samples/' | append: instrument.audiofileprocessor.src %}
|
||||
<div class="audio-player-section mt-3">
|
||||
<audio controls>
|
||||
<source
|
||||
src="{{ audio_filename_with_path | relative_url }}"
|
||||
type="audio/ogg"
|
||||
>
|
||||
{% 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 %}
|
||||
|
||||
{% assign wav_path = audio_filename_with_path | replace: '.ogg', '.wav' %}
|
||||
<source
|
||||
src="{{ wav_path | relative_url }}"
|
||||
type="audio/wav"
|
||||
>
|
||||
{% 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>
|
||||
|
||||
Seu navegador não suporta o elemento <code>audio</code>.
|
||||
</audio>
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
</div> <div class="column is-one-third">
|
||||
<div class="box p-4 has-background-info-light">
|
||||
{% 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:
|
||||
1. Usa o arquivo fonte (`page.file`) como parâmetro `project`.
|
||||
2. Assume que a plataforma de criação está em `/creations/`.
|
||||
3. Abre em uma nova aba (`target="_blank"`).
|
||||
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 = '/creations/?project=' | append: page.file | relative_url %}
|
||||
|
||||
{% 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"
|
||||
>
|
||||
<span class="icon"><i class="fa-solid fa-up-right-from-square"></i></span>
|
||||
<span>Abrir no MMPCreator</span>
|
||||
</a>
|
||||
>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.
|
||||
|
|
@ -167,16 +190,13 @@ title: "{{ page.file }}"
|
|||
Arquivo: <code>{{ page.file }}</code>
|
||||
</p>
|
||||
|
||||
<div class="mt-4 is-hidden-mobile">
|
||||
<h4 class="title is-7 has-text-grey-dark">Prévia (Embed)</h4>
|
||||
{% comment %}
|
||||
A prévia embutida é opcional e pode ser um pouco pesada.
|
||||
Ajuste o caminho da URL e o estilo (altura) conforme necessário.
|
||||
{% endcomment %}
|
||||
<div class="mt-4 is-hidden-mobile" height="800px" widht="800px">
|
||||
{% assign embed_url = creation_url | append: '&embed=true' %}
|
||||
|
||||
<iframe
|
||||
src="{{ creation_url }}"
|
||||
src="{{ embed_url }}"
|
||||
title="Prévia do Projeto"
|
||||
style="width: 100%; height: 300px; border: 1px solid #ccc; border-radius: 4px;"
|
||||
style="width: 500px; height: 800px; border: 1px solid #ccc; border-radius: 4px;"
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,52 @@
|
|||
--accent-blue: #3498db;
|
||||
}
|
||||
|
||||
/* Esconde elementos não essenciais quando em modo embed */
|
||||
body.embed-mode .sample-browser, /* Navegador de Samples */
|
||||
body.embed-mode .global-toolbar, /* Barra de ferramentas principal */
|
||||
body.embed-mode #sidebar-toggle { /* Botão de toggle da sidebar */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* AJUSTE PARA O ZOOM DE 65% */
|
||||
/* 1. Aplica o zoom na div principal do aplicativo */
|
||||
body.embed-mode .app-container {
|
||||
padding-left: 0;
|
||||
|
||||
/* Configura o zoom */
|
||||
transform: scale(0.15);
|
||||
transform-origin: top left; /* Garante que o zoom comece do canto superior esquerdo */
|
||||
|
||||
/* POSICIONAMENTO CRUCIAL: Fixa no canto 0,0 do body */
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
/* Compensação de tamanho para o container do iframe */
|
||||
width: calc(100vw / 0.15);
|
||||
height: calc(100vh / 0.15);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Ajusta o layout principal para ocupar toda a área visível */
|
||||
body.embed-mode .main-content {
|
||||
flex-grow: 1;
|
||||
height: auto;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Garante que o body não tenha margens */
|
||||
body.embed-mode {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* =============================================== */
|
||||
/* LAYOUT E ESTRUTURA GLOBAL
|
||||
/* =============================================== */
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import {
|
|||
import { renderAudioEditor } from "./audio/audio_ui.js";
|
||||
import { adjustValue, enforceNumericInput } from "./utils.js";
|
||||
import { ZOOM_LEVELS } from "./config.js";
|
||||
import { loadProjectFromServer } from "./file.js"
|
||||
|
||||
// ⚠️ IMPORT ABSOLUTO para evitar 404/text/html quando a página estiver em /creation/ ou fora dela.
|
||||
// Ajuste o prefixo abaixo para o caminho real onde seus assets vivem no servidor:
|
||||
|
|
|
|||
|
|
@ -29,3 +29,4 @@
|
|||
{"level":30,"time":1762793551124,"pid":2587819,"hostname":"ubuntu","timestamp":1762793551124,"socketId":"Kn3WrWSIHiXuIEbrAAAf","action":{"type":"ADD_AUDIO_LANE","trackId":"track_1762793552505_bakgtwv","__token":"3","__senderId":"Kn3WrWSIHiXuIEbrAAAf","__senderName":"Alicer-Kn3W"},"msg":"action_received"}
|
||||
{"level":30,"time":1762793562373,"pid":2587819,"hostname":"ubuntu","timestamp":1762793562373,"socketId":"Kn3WrWSIHiXuIEbrAAAf","action":{"type":"START_AUDIO_PLAYBACK","seekTime":0,"loopState":{"isLoopActive":false,"loopStartTime":0,"loopEndTime":8},"__token":"4","__senderId":"Kn3WrWSIHiXuIEbrAAAf","__senderName":"Alicer-Kn3W","scheduleAtServerMs":1762793562514,"__syncMode":"global"},"msg":"action_received"}
|
||||
{"level":30,"time":1762799493877,"pid":2587819,"hostname":"ubuntu","timestamp":1762799493877,"socketId":"6m7mwC7-DHtJDo_PAAAh","action":{"type":"AUDIO_SNAPSHOT_REQUEST","__token":"1","__senderId":"6m7mwC7-DHtJDo_PAAAh","__senderName":"Alicer-6m7m"},"msg":"action_received"}
|
||||
{"level":30,"time":1762805078903,"pid":2587819,"hostname":"ubuntu","timestamp":1762805078903,"socketId":"vu6EfXEqBDAxY_ZVAABp","action":{"type":"AUDIO_SNAPSHOT_REQUEST","__token":"1","__senderId":"vu6EfXEqBDAxY_ZVAABp","__senderName":"Alicer-vu6E"},"msg":"action_received"}
|
||||
|
|
|
|||
|
|
@ -479,6 +479,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Verifica se a página está sendo carregada com o parâmetro &embed=true
|
||||
const isEmbed = new URLSearchParams(window.location.search).get("embed");
|
||||
if (isEmbed === "true") {
|
||||
document.body.classList.add("embed-mode");
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js"></script>
|
||||
<script src="assets/js/creations/main.js" type="module"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue