{% if block.Translation[app.request.locale].title or block.Translation[app.request.locale].text %}{% set mobile = openform_front_util.isMobileDevice() %}<section class="block-item block-audio block-audio--{{block.textPosition}} {% if mobile %}block-audio--mobile{% endif %}"> {% if block.Translation[app.request.locale].title %} <div class="block-audio__title block__h3"{% if not mobile %} style="{{block.textBlockWidth is defined and block.textBlockWidth ? "max-width:" ~ block.textBlockWidth ~"%;"}} {{block.textBlockPaddingTop is defined and block.textBlockPaddingTop ? "padding-top:" ~ block.textBlockPaddingTop ~"px;"}} {{block.textBlockPaddingBottom is defined and block.textBlockPaddingBottom ? "padding-bottom:" ~ block.textBlockPaddingBottom ~"px;"}} {{block.textBlockPaddingLeft is defined and block.textBlockPaddingLeft ? "padding-left:" ~ block.textBlockPaddingLeft ~"px;"}} {{block.textBlockPaddingRight is defined and block.textBlockPaddingRight ? "padding-right:" ~ block.textBlockPaddingRight ~"px;"}} "{% endif %}> {{ block.Translation[app.request.locale].title|nl2br }} </div> {% endif %} {% set alt = block.Translation[app.request.locale].fileaudioAlt %} {% set fileTitle = block.Translation[app.request.locale].fileaudioTitle %} <div class="block-audio__container" style="width: 100%; margin: 0 auto; position: relative;"> {% if openform_front_util.isMp3File(block.filePath) %} <div class="block-audio__player" {% if classType == "normal" and not mobile %}style="{{ (block.textPosition == "left" or block.textPosition =="right") and block.textBlockWidth ? 'max-width: calc(100% - ' ~ block.textBlockWidth ~ '%); min-width: calc(100% - ' ~ block.textBlockWidth ~ '%);' }}" {% endif %}> <audio controls class="js-audio-player block-audio__inner"> <source src="{{ block.filePath }}" aria-label="{{alt}}" title="{{fileTitle}}"> Your browser does not support the audio element. </audio> </div> <div class="block-audio__text block__text" {% if classType == "normal" and not mobile %}style="{{ block.textBlockWidth ? 'max-width: ' ~ block.textBlockWidth ~ '%; width: 100%;'}} {{block.textBlockPaddingLeft is same as(0) ? 'padding-left: 0px;' : block.textBlockPaddingLeft ? 'padding-left: ' ~ block.textBlockPaddingLeft ~ 'px;' }} {{block.textBlockPaddingRight is same as(0) ? 'padding-right: 0px;' : block.textBlockPaddingRight ? 'padding-right: ' ~ block.textBlockPaddingRight ~ 'px;' }} {{block.textBlockPaddingTop is same as(0) ? 'padding-top: 0px;' : block.textBlockPaddingTop ? 'padding-top: ' ~ block.textBlockPaddingTop ~ 'px;'}} {{block.textBlockPaddingBottom is same as(0) ? 'padding-bottom: 0px;' : block.textBlockPaddingBottom ? 'padding-bottom: ' ~ block.textBlockPaddingBottom ~ 'px;' }}"{% endif %}>{{ block.Translation[app.request.locale].text|raw }}</div> {% endif %} </div></section>{% endif %}