105 lines
4.5 KiB
HTML
Executable File
105 lines
4.5 KiB
HTML
Executable File
<div
|
|
class="instrument-wrapper mb-4 p-2"
|
|
style="border-left: 3px solid #3298dc; background: #fff"
|
|
data-plugin-name="{{ instrument.instrument_name | downcase }}"
|
|
data-params="{{ instrument | jsonify | escape }}"
|
|
>
|
|
<li style="list-style: none">
|
|
<details {% if should_open %}open{% endif %}>
|
|
<summary style="cursor: pointer; outline: none; margin-bottom: 0.5rem">
|
|
<div style="display: inline-flex; align-items: center; gap: 8px">
|
|
{% assign display_name = instrument.instrument_name %} {% assign
|
|
plugin_name = instrument.instrument_name | downcase %} {% assign
|
|
is_sample = false %} {% if plugin_name == 'audiofileprocessor' or
|
|
instrument.audiofileprocessor %}{% assign is_sample = true %}{% endif
|
|
%} {% if is_sample %} {% if display_name contains "audiofileprocessor"
|
|
and instrument.patterns %} {% assign first_pattern =
|
|
instrument.patterns | first %} {% if first_pattern.name %}{% assign
|
|
display_name = first_pattern.name %}{% endif %} {% elsif
|
|
instrument.audiofileprocessor.src %} {% assign src_parts =
|
|
instrument.audiofileprocessor.src | split: '/' %} {% assign
|
|
display_name = src_parts | last %} {% endif %} {% assign display_name
|
|
= display_name | remove: ".ogg" | remove: ".wav" %} {% endif %} {%
|
|
assign instrument_slug = display_name | replace: ' ', '+' %}
|
|
<a
|
|
href="{{ '/instruments/?instrument=' | append: instrument_slug | relative_url }}"
|
|
class="tag is-info is-light"
|
|
>
|
|
<strong>{{ display_name }}</strong>
|
|
{% unless is_sample %}
|
|
<span class="ml-1" style="font-size: 0.7em">(Synth 🎹)</span>{%
|
|
endunless %}
|
|
</a>
|
|
</div>
|
|
</summary>
|
|
|
|
{% for pattern in instrument.patterns %} {% assign pattern_steps =
|
|
pattern.steps %} {% if pattern_steps and pattern_steps.size > 0 %}
|
|
<div
|
|
class="mt-2 ml-4"
|
|
style="display: flex; align-items: center; gap: 4px"
|
|
>
|
|
<div
|
|
class="patterns-container"
|
|
style="display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px"
|
|
>
|
|
{% assign total_steps = pattern_steps.size %} {% assign chunk_size = 4
|
|
%} {% assign num_chunks = total_steps | divided_by: chunk_size %} {%
|
|
assign remainder = total_steps | modulo: chunk_size %} {% if remainder
|
|
> 0 %}{% assign num_chunks = num_chunks | plus: 1 %}{% endif %} {% for
|
|
i in (0..num_chunks) %} {% assign start_index = i | times: chunk_size
|
|
%} {% assign current_chunk_array = pattern_steps | slice: start_index,
|
|
chunk_size %} {% if current_chunk_array.size > 0 %} {% assign
|
|
chunk_string = "" %} {% for step in current_chunk_array %} {% if step
|
|
== true or step == 'true' or step == 1 %} {% assign chunk_string =
|
|
chunk_string | append: '1' %} {% else %} {% assign chunk_string =
|
|
chunk_string | append: '0' %} {% endif %} {% endfor %}
|
|
<a
|
|
href="{{ '/pattern/?p=' | append: chunk_string | relative_url }}"
|
|
style="display: inline-block; opacity: 0.8"
|
|
>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
border: 1px solid #ccc;
|
|
padding: 1px;
|
|
background: #fff;
|
|
"
|
|
>
|
|
{% for step_active in current_chunk_array %}
|
|
<div
|
|
style="width: 4px; height: 8px; margin-right: 1px; background-color: {% if step_active == true or step_active == 1 %}#4caf50{% else %}#ddd{% endif %};"
|
|
></div>
|
|
{% endfor %}
|
|
</div>
|
|
</a>
|
|
{% endif %} {% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %} {% endfor %}
|
|
</details>
|
|
|
|
<div class="playback-controls mt-2 pl-4">
|
|
{% if is_sample %} {% assign sample_src =
|
|
instrument.audiofileprocessor.src | default: "" | strip %} {% if
|
|
sample_src != "" %} {% assign audio_filename_with_path = 'src/samples/' |
|
|
append: sample_src %}
|
|
<audio
|
|
controls
|
|
class="js-sample-player"
|
|
style="height: 25px; width: 200px"
|
|
>
|
|
<source
|
|
src="{{ audio_filename_with_path | relative_url }}"
|
|
type="audio/ogg"
|
|
/>
|
|
</audio>
|
|
{% endif %} {% else %}
|
|
<button class="button is-small is-primary is-outlined js-play-synth-btn">
|
|
Testar
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</li>
|
|
</div>
|