Corrigindo aparência dos projetos no MMPSearch e interligando com o MMPCreator

_layouts/projetos.html

@@ -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 %}
-
+            <details>
-              <h2 class="title is-5"><code>🏷️ Tags</code></h2>
+              <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,12 +83,23 @@ 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">
+                {% 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 %}
@@ -109,8 +123,14 @@ title: "{{ page.file }}"
                                                         <code>{{ instrument.instrument_name }}</code>
                                                     </a>
 
-                            {% if instrument.audiofileprocessor and instrument.audiofileprocessor.src %}
+                                                    {% comment %}
-                              {% assign audio_filename_with_path = 'src/samples/' | append: instrument.audiofileprocessor.src %}                        
+                                                        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 
@@ -127,6 +147,11 @@ title: "{{ page.file }}"
                                                                 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 %}
@@ -138,28 +163,26 @@ title: "{{ page.file }}"
                             {% endfor %}
                         </ul>
                     </div>
+                </details>
+
             </section>
             {% endif %}
-          </div> <div class="column is-one-third">
+          </div> <div class="column is-one-third" height="800px" widht="800px">
-            <div class="box p-4 has-background-info-light">
+            <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:
+                    CONSTRUÇÃO DA URL CORRIGIDA PARA AMBIENTES DE TESTE:
-                    1. Usa o arquivo fonte (`page.file`) como parâmetro `project`.
+                    - O filtro `relative_url` foi removido para evitar a duplicação do caminho.
-                    2. Assume que a plataforma de criação está em `/creations/`.
+                    - O prefixo de teste `/~jotachina/mmpSearch/` foi adicionado manualmente.
-                    3. Abre em uma nova aba (`target="_blank"`).
                 {% 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"
-                >
+                >Abrir no MMPCreator</a>
-                    <span class="icon"><i class="fa-solid fa-up-right-from-square"></i></span>
-                    <span>Abrir no MMPCreator</span>
-                </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">
+                <div class="mt-4 is-hidden-mobile" height="800px" widht="800px">
-                    <h4 class="title is-7 has-text-grey-dark">Prévia (Embed)</h4>
+                    {% assign embed_url = creation_url | append: '&embed=true' %}
-                    {% 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 %}
                     <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>

assets/css/style.css

@@ -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
 /* =============================================== */

assets/js/creations/main.js

@@ -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:

assets/js/creations/server/data/2025-11-10_21-14-20_sessao-o1fjv.log

@@ -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"}

creation.html

@@ -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>