Padronização da interface e atualização do sync entre clientes
This commit is contained in:
JotaChina committed
1 parent
3f714c88de
commit
7d9d2b0f63
10 files changed
+796
-377
No files matched your search
+144
-212
@@ -84,33 +84,31 @@
|
||||
id="new-project-btn"
|
||||
title="Novo Projeto"
|
||||
></i>
|
||||
<span style="margin-left: 8px">Novo projeto</span>
|
||||
<i
|
||||
class="fa-solid fa-folder-open"
|
||||
id="open-mmp-btn"
|
||||
title="Abrir Projeto do Servidor"
|
||||
></i>
|
||||
<span style="margin-left: 8px">Abrir projetos</span>
|
||||
<i
|
||||
class="fa-solid fa-save"
|
||||
id="save-mmp-btn"
|
||||
title="Salvar Projeto (.mmp)"
|
||||
></i>
|
||||
<span style="margin-left: 8px">Salvar projeto</span>
|
||||
<i
|
||||
class="fa-solid fa-upload"
|
||||
id="upload-sample-btn"
|
||||
title="Carregar Sample do Computador"
|
||||
></i>
|
||||
<span style="margin-left: 8px">Enviar sample</span>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="control-group">
|
||||
<i
|
||||
class="fa-solid fa-backward-step"
|
||||
id="rewind-btn"
|
||||
title="Voltar ao Início"
|
||||
></i>
|
||||
<i class="fa-solid fa-play" title="Play/Pause Global (Futuro)"></i>
|
||||
<i class="fa-solid fa-stop" title="Stop Global (Futuro)"></i>
|
||||
<button id="record-btn" class="transport-btn" title="Gravar">
|
||||
<i class="fa-solid fa-circle-dot"></i>
|
||||
<span style="margin-left: 8px">Gravar</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
@@ -228,6 +226,10 @@
|
||||
<i class="fa-solid fa-users"></i>
|
||||
<span style="margin-left: 8px">Criar Sala</span>
|
||||
</button>
|
||||
<button id="toggle-mixer-btn" class="control-btn" title="Abrir Mixer (Futuro)">
|
||||
<i class="fa-solid fa-sliders"></i>
|
||||
<span style="margin-left: 8px">Abrir Mixer</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="control-group master-controls">
|
||||
@@ -248,54 +250,50 @@
|
||||
|
||||
<main class="main-content">
|
||||
<div class="beat-editor">
|
||||
<div class="editor-header">
|
||||
Mostrar/esconder Editor de Bases
|
||||
<div class="window-controls">
|
||||
<i class="fa-solid fa-minus"></i
|
||||
><i class="fa-regular fa-square"></i
|
||||
><i class="fa-solid fa-xmark"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-toolbar">
|
||||
<div class="playback-controls">
|
||||
<i class="fa-solid fa-play" id="play-btn" title="Play/Pause"></i>
|
||||
<i class="fa-solid fa-stop" id="stop-btn" title="Stop"></i>
|
||||
</div>
|
||||
<div class="pattern-manager">
|
||||
<h2 id="beat-bassline-title"></h2>
|
||||
<select
|
||||
id="global-pattern-selector"
|
||||
class="pattern-selector"
|
||||
disabled
|
||||
>
|
||||
<option>Selecione uma faixa</option>
|
||||
</select>
|
||||
<button id="add-pattern-btn" class="pattern-btn">+</button>
|
||||
<button id="remove-pattern-btn" class="pattern-btn">-</button>
|
||||
<div class="editor-header">
|
||||
<div class="toolbar-group">
|
||||
<button id="play-btn" class="control-btn" title="Play Patterns"><i class="fa-solid fa-play"></i></button>
|
||||
<button id="stop-btn" class="control-btn" title="Stop"><i class="fa-solid fa-stop"></i></button>
|
||||
|
||||
<div class="toolbar-divider"></div>
|
||||
|
||||
<button
|
||||
id="send-pattern-to-playlist-btn"
|
||||
class="pattern-btn"
|
||||
title="Enviar Pattern para a Playlist"
|
||||
style="width: auto; padding: 0 8px; font-size: 0.9rem"
|
||||
>
|
||||
<i class="fa-solid fa-arrow-right-to-bracket"></i> Enviar
|
||||
</button>
|
||||
</div>
|
||||
<select id="global-pattern-selector" title="Selecionar Pattern Ativo">
|
||||
<option value="0">Pattern 1</option>
|
||||
<option value="1">Pattern 2</option>
|
||||
<option value="2">Pattern 3</option>
|
||||
<option value="3">Pattern 4</option>
|
||||
</select>
|
||||
|
||||
<button class="control-btn" id="add-pattern-btn" title="Novo Pattern (Não implementado no JS ainda)"><i class="fa-solid fa-plus"></i></button>
|
||||
<button class="control-btn" id="remove-pattern-btn" title="Remover Pattern (Não implementado no JS ainda)"><i class="fa-solid fa-minus"></i></button>
|
||||
|
||||
<div class="toolbar-divider"></div>
|
||||
|
||||
<button id="send-pattern-to-playlist-btn" class="control-btn" title="Renderizar para Áudio">
|
||||
<i class="fa-solid fa-arrow-right-to-bracket"></i> <span style="margin-left:5px;">Enviar p/ Playlist</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-group">
|
||||
|
||||
|
||||
<div class="toolbar-divider"></div>
|
||||
|
||||
<button id="add-instrument-btn" class="control-btn" title="Adicionar Instrumento">
|
||||
<i class="fa-solid fa-music"></i> <i class="fa-solid fa-plus" style="font-size: 0.7em; margin-left: 3px;"></i>
|
||||
<span style="margin-left: 8px">Adicionar Instrumento</span>
|
||||
</button>
|
||||
<button id="remove-instrument-btn" class="control-btn" title="Remover Instrumento Selecionado">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
<span style="margin-left: 8px">Remover Instrumento</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sequencer-grid" class="sequencer-container">
|
||||
</div>
|
||||
<div class="tool-icons">
|
||||
<i class="fa-solid fa-table-cells"></i
|
||||
><i class="fa-solid fa-bars-staggered"></i>
|
||||
<i class="fa-solid fa-music" id="open-piano-roll-btn" title="Abrir Piano Roll"></i>
|
||||
<i
|
||||
class="fa-solid fa-wave-square"
|
||||
id="bounce-pattern-btn"
|
||||
title="Renderizar Pattern para Pista de Áudio"
|
||||
></i>
|
||||
<i
|
||||
class="fa-solid fa-plus"
|
||||
id="add-bar-btn"
|
||||
title="Adicionar 1 Compasso"
|
||||
></i>
|
||||
</div>
|
||||
<div id="timeline-context-menu">
|
||||
<div id="copy-clip">Copiar</div>
|
||||
@@ -311,176 +309,110 @@
|
||||
<div id="ruler-set-loop-start">Definir Início do Loop</div>
|
||||
<div id="ruler-set-loop-end">Definir Fim do Loop</div>
|
||||
</div>
|
||||
<div class="zoom-controls">
|
||||
<i class="fa-solid fa-minus" id="remove-instrument-btn"></i
|
||||
><i class="fa-solid fa-plus" id="add-instrument-btn"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="track-container"></div>
|
||||
</div>
|
||||
<div class="piano-roll-editor" id="piano-roll-editor" style="display: none;">
|
||||
<div class="editor-header">
|
||||
<span>Piano Roll - <span id="piano-roll-instrument-name">Instrumento 1</span></span>
|
||||
<div class="window-controls">
|
||||
<i class="fa-solid fa-xmark" id="close-piano-roll-btn"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piano-roll-toolbar">
|
||||
<div class="playback-controls">
|
||||
<i class="fa-solid fa-pencil active" title="Draw Tool"></i>
|
||||
<i class="fa-solid fa-eraser" title="Erase Tool"></i>
|
||||
</div>
|
||||
<div class="snap-controls">
|
||||
<label>Snap:</label>
|
||||
<select>
|
||||
<option>1/4</option>
|
||||
<option>1/8</option>
|
||||
<option selected>1/16</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piano-roll-workspace">
|
||||
<div class="piano-keys-container" id="piano-keys-container">
|
||||
<canvas id="piano-keys-canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="piano-grid-container" id="piano-grid-container">
|
||||
<canvas id="piano-grid-canvas"></canvas>
|
||||
<div class="piano-roll-editor" id="piano-roll-editor" style="display: none;">
|
||||
<div class="editor-header">
|
||||
<span>Piano Roll - <span id="piano-roll-instrument-name">Instrumento 1</span></span>
|
||||
<div class="window-controls">
|
||||
<i class="fa-solid fa-xmark" id="close-piano-roll-btn"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piano-roll-toolbar">
|
||||
<div class="playback-controls">
|
||||
<i class="fa-solid fa-pencil active" title="Draw Tool"></i>
|
||||
<i class="fa-solid fa-eraser" title="Erase Tool"></i>
|
||||
</div>
|
||||
<div class="snap-controls">
|
||||
<label>Snap:</label>
|
||||
<select>
|
||||
<option>1/4</option>
|
||||
<option>1/8</option>
|
||||
<option selected>1/16</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piano-roll-workspace">
|
||||
<div class="piano-keys-container" id="piano-keys-container">
|
||||
<canvas id="piano-keys-canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="piano-grid-container" id="piano-grid-container">
|
||||
<canvas id="piano-grid-canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="audio-editor">
|
||||
<div class="editor-header">
|
||||
<span>Editor de Amostras de Áudio</span>
|
||||
<div class="editor-header" id="audio-editor-header">
|
||||
<div class="toolbar-group">
|
||||
<span class="panel-title" style="margin-right: 10px;"><i class="fa-solid fa-wave-square"></i> Playlist</span>
|
||||
|
||||
<div class="toolbar-divider"></div>
|
||||
|
||||
<div class="playback-controls">
|
||||
<i
|
||||
class="fa-solid fa-search-minus"
|
||||
id="zoom-out-btn"
|
||||
title="Zoom Out"
|
||||
></i>
|
||||
<i
|
||||
class="fa-solid fa-search-plus"
|
||||
id="zoom-in-btn"
|
||||
title="Zoom In"
|
||||
></i>
|
||||
<i
|
||||
class="fa-solid fa-scissors"
|
||||
id="slice-tool-btn"
|
||||
title="Ferramenta de Corte"
|
||||
></i>
|
||||
<button id="audio-editor-play-btn" class="control-btn" title="Play Playlist">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</button>
|
||||
<button id="audio-editor-stop-btn" class="control-btn" title="Stop Playlist">
|
||||
<i class="fa-solid fa-stop"></i>
|
||||
</button>
|
||||
<button id="audio-editor-loop-btn" class="control-btn" title="Loop Mode">
|
||||
<i class="fa-solid fa-repeat"></i>
|
||||
<span style="margin-left: 8px">Loop</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<i
|
||||
class="fa-solid fa-arrows-left-right-to-line"
|
||||
id="resize-tool-trim"
|
||||
title="Modo de Redimensionamento (Aparar/Trimming)"
|
||||
></i>
|
||||
<i
|
||||
class="fa-solid fa-arrows-left-right"
|
||||
id="resize-tool-stretch"
|
||||
title="Modo de Redimensionamento (Esticar/Time Stretch)"
|
||||
></i>
|
||||
<i
|
||||
class="fa-solid fa-play"
|
||||
id="audio-editor-play-btn"
|
||||
title="Play/Pause"
|
||||
></i>
|
||||
<i
|
||||
class="fa-solid fa-stop"
|
||||
id="audio-editor-stop-btn"
|
||||
title="Stop"
|
||||
></i>
|
||||
<i
|
||||
class="fa-solid fa-repeat"
|
||||
id="audio-editor-loop-btn"
|
||||
title="Ativar/Desativar Loop"
|
||||
></i>
|
||||
<button
|
||||
id="sync-mode-btn"
|
||||
class="control-btn active"
|
||||
title="Modo de Sincronia de Playback (Global/Local)"
|
||||
>
|
||||
Global
|
||||
</button>
|
||||
<i
|
||||
class="fa-solid fa-plus"
|
||||
id="add-audio-track-btn"
|
||||
title="Adicionar Pista de Áudio"
|
||||
></i>
|
||||
</div>
|
||||
<div class="toolbar-group">
|
||||
<button id="slice-tool-btn" class="control-btn" title="Ferramenta Corte (Slice)">
|
||||
<i class="fa-solid fa-scissors"></i>
|
||||
<span style="margin-left: 8px">Cortar</span>
|
||||
</button>
|
||||
<button id="resize-tool-trim" class="control-btn active" title="Redimensionar (Trim)">
|
||||
<i class="fa-solid fa-arrows-left-right-to-line"></i>
|
||||
<span style="margin-left: 8px">Redimensionar</span>
|
||||
</button>
|
||||
<button id="resize-tool-stretch" class="control-btn" title="Esticar (Stretch)">
|
||||
<i class="fa-solid fa-expand"></i>
|
||||
<span style="margin-left: 8px">Esticar</span>
|
||||
</button>
|
||||
<button id="delete-clip" class="control-btn" title="Excluir Clip Selecionado">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
<span style="margin-left: 8px">Rem. Instrumento</span>
|
||||
</button>
|
||||
|
||||
<div class="toolbar-divider"></div>
|
||||
|
||||
<button id="zoom-out-btn" class="control-btn" title="Zoom Out">
|
||||
<i class="fa-solid fa-magnifying-glass-minus"></i>
|
||||
</button>
|
||||
<button id="zoom-in-btn" class="control-btn" title="Zoom In">
|
||||
<i class="fa-solid fa-magnifying-glass-plus"></i>
|
||||
</button>
|
||||
|
||||
<div class="toolbar-divider"></div>
|
||||
|
||||
<button id="add-audio-track-btn" class="control-btn" title="Adicionar Pista">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
<span style="margin-left: 8px">Add Track</span>
|
||||
</button>
|
||||
<button id="remove-audio-track-btn" class="control-btn" title="Remover Última Pista">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
<span style="margin-left: 8px">Rem. Track</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="audio-track-container">
|
||||
<div class="audio-track-lane">
|
||||
<div class="track-info">
|
||||
<div class="track-info-header">
|
||||
<i class="fa-solid fa-gear"></i>
|
||||
<span class="track-name">Pista de Áudio 1</span>
|
||||
<div class="track-mute"></div>
|
||||
</div>
|
||||
<div class="track-controls">
|
||||
<div class="knob-container">
|
||||
<div class="knob" data-control="volume">
|
||||
<div class="knob-indicator"></div>
|
||||
</div>
|
||||
<span>VOL</span>
|
||||
</div>
|
||||
<div class="knob-container">
|
||||
<div class="knob" data-control="pan">
|
||||
<div class="knob-indicator"></div>
|
||||
</div>
|
||||
<span>PAN</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-container">
|
||||
<div class="spectrogram-view-grid" style="width: 4000px">
|
||||
<div
|
||||
class="timeline-clip"
|
||||
style="left: 100px; width: 400px"
|
||||
></div>
|
||||
<div class="playhead"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="audio-track-lane">
|
||||
<div class="track-info">
|
||||
<div class="track-info-header">
|
||||
<i class="fa-solid fa-gear"></i>
|
||||
<span class="track-name">Pista de Áudio 2</span>
|
||||
<div class="track-mute"></div>
|
||||
</div>
|
||||
<div class="track-controls">
|
||||
<div class="knob-container">
|
||||
<div class="knob" data-control="volume">
|
||||
<div class="knob-indicator"></div>
|
||||
</div>
|
||||
<span>VOL</span>
|
||||
</div>
|
||||
<div class="knob-container">
|
||||
<div class="knob" data-control="pan">
|
||||
<div class="knob-indicator"></div>
|
||||
</div>
|
||||
<span>PAN</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-container">
|
||||
<div id="loop-region" class="loop-region">
|
||||
<div class="spectrogram-view-grid" style="width: 4000px">
|
||||
<div class="timeline-clip" style="left: 50px; width: 600px">
|
||||
<div class="clip-name">jungle01.ogg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playhead"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="audio-tracks-wrapper">
|
||||
<div id="audio-timeline-ruler" class="timeline-ruler"></div>
|
||||
<div id="loop-region" class="loop-region"></div>
|
||||
<div id="playhead" class="playhead"></div>
|
||||
<div id="audio-track-container" class="track-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<input
|
||||
@@ -743,4 +675,4 @@
|
||||
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
|
||||
<script src="assets/js/creations/socket.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in new issue
Block a user